/* HealthFoodExercise Affiliate Intelligence Engine UI Styles (Production & Variation System) */

/* 0. FTC Affiliate Disclosure Badge */
.hfe-aff-disclosure {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem 0;
	font-size: 0.82rem;
	color: #64748b;
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.hfe-aff-disclosure-icon {
	font-size: 1rem;
	flex-shrink: 0;
}

.hfe-aff-disclosure-text strong {
	color: #334155;
}

/* 1. Inline Affiliate Links */
.hfe-aff-inline-link {
	color: #0284c7;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease-in-out;
}

.hfe-aff-inline-link:hover {
	color: #0369a1;
}

/* 2. Base CTA Buttons & Variation Wrappers */
.hfe-aff-cta-wrap {
	margin: 1.5rem 0;
	display: block;
}

.hfe-aff-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none !important;
	box-sizing: border-box;
	max-width: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Color Scheme Variations */
.hfe-aff-button.btn-primary {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.hfe-aff-button.btn-success {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.hfe-aff-button.btn-danger {
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.hfe-aff-button.btn-accent {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* Hover Animations */
.hfe-aff-button.hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.hfe-aff-button.hover-pulse:hover {
	animation: hfe-pulse-anim 1s infinite alternate;
}

.hfe-aff-button.hover-glow:hover {
	box-shadow: 0 0 20px rgba(5, 150, 105, 0.6);
}

.hfe-aff-button.hover-scale:hover {
	transform: scale(1.03);
}

@keyframes hfe-pulse-anim {
	0% { transform: scale(1); }
	100% { transform: scale(1.04); }
}

.hfe-aff-button-brand {
	font-size: 0.8rem;
	opacity: 0.85;
	font-weight: 400;
}

.hfe-badge-pill {
	display: inline-block;
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.15rem 0.5rem;
	border-radius: 12px;
	margin-left: 0.5rem;
}

/* 3. Glassmorphism Product Card Widget */
.hfe-aff-card {
	margin: 2rem 0;
	padding: 1.5rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #0284c7;
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}

.hfe-aff-badge {
	display: inline-block;
	background: #e0f2fe;
	color: #0369a1;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.hfe-aff-card-title {
	margin: 0.25rem 0 0.75rem 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: #0f172a;
}

.hfe-aff-card-note {
	margin: 0 0 1rem 0;
	color: #475569;
	font-size: 0.9rem;
}

.hfe-aff-card-action {
	margin-top: 1rem;
}

.hfe-aff-card-button {
	display: inline-block;
	background: #0f172a;
	color: #ffffff !important;
	padding: 0.6rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.hfe-aff-card-button:hover {
	background: #1e293b;
	color: #ffffff !important;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
	.hfe-aff-button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.hfe-aff-card {
		padding: 1rem;
	}
}