/**
 * Smart CTA — Frontend Styles
 * Architecture: Scoped variables, BEM naming, Progressive enhancement.
 */

/* --------------------------------------------------------------------------
   1. Core Variables & Reset
   -------------------------------------------------------------------------- */
.smartcta {
	/* -- Layout Defaults -- */
	--sc-width: 320px;
	--sc-radius: 12px;
	--sc-padding: 24px;
	--sc-z-index: 9999;
	
	/* -- Colors (Overridden by Modifiers) -- */
	--sc-bg: #1e293b;
	--sc-text: #ffffff;
	--sc-subtext: rgba(255, 255, 255, 0.8);
	
	/* -- Button Defaults -- */
	--sc-btn-bg: #3b82f6;
	--sc-btn-text: #ffffff;
	--sc-btn-hover: #2563eb;
	--sc-btn-radius: 8px;
	--sc-btn-border: 1px solid transparent;
	--sc-btn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

	/* -- Box Model -- */
	box-sizing: border-box;
	width: var(--sc-width);
	max-width: 100%;
	border-radius: var(--sc-radius);
	background-color: var(--sc-bg);
	color: var(--sc-text);
	padding: var(--sc-padding);
	text-align: center;
	line-height: 1.5;
	font-family: inherit; /* Inherit site font */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	
	/* -- Reset -- */
	position: relative;
	isolation: isolate;
	margin: 2rem 0; /* Default inline margin */
	transition: all 0.3s ease;
}

.smartcta *,
.smartcta *::before,
.smartcta *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   2. Content Elements
   -------------------------------------------------------------------------- */
.smartcta__headline {
	margin: 0 0 8px 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	/* FORCE color to respect the theme variable, overriding global H3 styles */
	color: var(--sc-text) !important;
}

.smartcta__subtext {
	margin: 0 0 20px 0;
	font-size: 0.95rem;
	/* FORCE color to respect the theme variable */
	color: var(--sc-subtext) !important;
}

/* NEW: Dismiss Button Styles */
.smartcta__dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	color: var(--sc-text);
	opacity: 0.5;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	z-index: 10;
    padding: 0;
}
.smartcta__dismiss:hover {
	background-color: rgba(255,255,255,0.1);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Button Component
   -------------------------------------------------------------------------- */
.smartcta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 24px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	
	background-color: var(--sc-btn-bg);
	color: var(--sc-btn-text) !important;
	border: var(--sc-btn-border);
	border-radius: var(--sc-btn-radius);
	box-shadow: var(--sc-btn-shadow);
	
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	position: relative;
	overflow: hidden;
}

.smartcta__btn:hover,
.smartcta__btn:focus-visible {
	background-color: var(--sc-btn-hover);
	transform: translateY(-2px);
	outline: none;
}

.smartcta__btn:active {
	transform: translateY(0);
}

/* -- Button Styles -- */

/* Outline Style */
.smartcta--style-outline .smartcta__btn {
	background-color: transparent;
	border: 2px solid var(--sc-btn-bg);
	color: var(--sc-btn-bg) !important; /* Inherit brand color */
	box-shadow: none;
}
.smartcta--style-outline .smartcta__btn:hover {
	background-color: var(--sc-btn-bg);
	color: #ffffff !important;
}

/* Soft Style */
.smartcta--style-soft .smartcta__btn {
	background-color: var(--sc-btn-soft-bg, rgba(59, 130, 246, 0.2));
	color: var(--sc-btn-bg) !important;
	border: 1px solid var(--sc-btn-soft-border, rgba(59, 130, 246, 0.3));
	box-shadow: none;
}
.smartcta--style-soft .smartcta__btn:hover {
	background-color: var(--sc-btn-bg);
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. Card Themes (Backgrounds)
   -------------------------------------------------------------------------- */
.smartcta--theme-navy {
	--sc-bg: #1e293b;
	--sc-text: #ffffff;
	--sc-subtext: #94a3b8;
}

.smartcta--theme-slate {
	--sc-bg: #475569;
	--sc-text: #ffffff;
	--sc-subtext: #cbd5e1;
}

.smartcta--theme-black {
	--sc-bg: #000000;
	--sc-text: #ffffff;
	--sc-subtext: #a3a3a3;
}

.smartcta--theme-white {
	--sc-bg: #ffffff;
	--sc-text: #111827;
	--sc-subtext: #4b5563;
	border: 1px solid #e5e7eb;
}

.smartcta--theme-glass {
	--sc-bg: rgba(15, 23, 42, 0.6);
	--sc-text: #ffffff;
	--sc-subtext: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   5. Button Colors (Modifiers)
   -------------------------------------------------------------------------- */
.smartcta--color-blue { --sc-btn-bg: #3b82f6; --sc-btn-hover: #2563eb; }
.smartcta--color-green { --sc-btn-bg: #10b981; --sc-btn-hover: #059669; }
.smartcta--color-red { --sc-btn-bg: #ef4444; --sc-btn-hover: #dc2626; }
.smartcta--color-orange { --sc-btn-bg: #f59e0b; --sc-btn-hover: #d97706; --sc-btn-text: #111827; }
.smartcta--color-purple { --sc-btn-bg: #8b5cf6; --sc-btn-hover: #7c3aed; }
.smartcta--color-black { --sc-btn-bg: #111827; --sc-btn-hover: #000000; }
.smartcta--color-white { --sc-btn-bg: #ffffff; --sc-btn-hover: #f3f4f6; --sc-btn-text: #111827; }

/* --------------------------------------------------------------------------
   6. Positioning (Floating)
   -------------------------------------------------------------------------- */
.smartcta--floating {
	position: fixed;
	z-index: var(--sc-z-index);
	margin: 0;
	/* Offsets handled by inline styles (--sc-offset-x, --sc-offset-y) */
	/* Defaults */
	bottom: 20px; 
	right: 20px;
}

.smartcta--pos-br { bottom: var(--sc-offset-y, 20px); right: var(--sc-offset-x, 20px); }
.smartcta--pos-bl { bottom: var(--sc-offset-y, 20px); left: var(--sc-offset-x, 20px); }
.smartcta--pos-tr { top: var(--sc-offset-y, 20px); right: var(--sc-offset-x, 20px); }
.smartcta--pos-tl { top: var(--sc-offset-y, 20px); left: var(--sc-offset-x, 20px); }

/* --------------------------------------------------------------------------
   7. Animations
   -------------------------------------------------------------------------- */
/* Glow Effect */
.smartcta--effect-glow .smartcta__btn {
	box-shadow: 0 0 15px var(--sc-btn-bg);
}

/* Pulse Animation */
@keyframes sc-pulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
	70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.smartcta--effect-pulse .smartcta__btn {
	animation: sc-pulse 2s infinite;
}

/* Bounce Animation (Attention) */
@keyframes sc-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-10px); }
	60% { transform: translateY(-5px); }
}

.smartcta--attention-bounce .smartcta__btn {
	animation: sc-bounce 2s ease infinite;
}

/* --------------------------------------------------------------------------
   8. Responsive & Accessibility
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.smartcta {
		/* Force full width on very small screens if floating */
		width: calc(100% - 32px);
		max-width: 100%;
	}
	
	.smartcta--floating {
		left: 16px !important;
		right: 16px !important;
		bottom: 16px !important;
		top: auto !important; /* Always stick to bottom on mobile for better thumb reach */
	}
}

@media (prefers-reduced-motion: reduce) {
	.smartcta,
	.smartcta__btn {
		transition: none !important;
		animation: none !important;
	}
}