/* ==========================================================================
   SalesPulse Frontend — Notification Popup Styles
   Lightweight (~6KB gzipped). 8 template designs + animations + notification bar.
   ========================================================================== */

/* ── Inline Container (for shortcode/block inline mode) ────── */
.salespulse-inline-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
	margin: 16px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.5;
}

.salespulse-inline-container .sp-inline-item {
	position: relative;
}

.salespulse-inline-container .sp-notification-link {
	color: inherit;
	text-decoration: none;
}

.salespulse-inline-container .sp-notification-link:hover {
	text-decoration: underline;
}

.salespulse-inline-container .sp-notification-text {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
}

/* ── Container ──────────────────────────────────────────────── */
#salespulse-popup-container {
	position: fixed;
	z-index: 999999;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 400px;
	width: calc(100% - 32px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.5;
	box-sizing: border-box;
}

/* Position variants */
#salespulse-popup-container[data-position="bottom-left"] {
	bottom: 24px;
	left: 16px;
}

#salespulse-popup-container[data-position="bottom-right"] {
	bottom: 24px;
	right: 16px;
}

#salespulse-popup-container[data-position="top-left"] {
	top: 24px;
	left: 16px;
}

#salespulse-popup-container[data-position="top-right"] {
	top: 24px;
	right: 16px;
}

/* ── Base Notification ─────────────────────────────────────── */
.sp-notification {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 18px;
	border-radius: 14px;
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 4px 12px rgba(0, 0, 0, 0.06),
		0 12px 36px rgba(0, 0, 0, 0.08);
	pointer-events: auto;
	will-change: transform, opacity;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-notification:hover {
	transform: translateY(-3px);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.04),
		0 8px 20px rgba(0, 0, 0, 0.08),
		0 20px 48px rgba(0, 0, 0, 0.12);
}

.sp-notification * {
	box-sizing: border-box;
}

/* ── Image / Emoji ─────────────────────────────────────────── */
.sp-notification-image {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-notification-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-notification-emoji {
	font-size: 24px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-notification-emoji .material-symbols-outlined {
	font-size: 28px;
	color: #6366f1;
}

/* ── Content ───────────────────────────────────────────────── */
.sp-notification-content {
	flex: 1;
	min-width: 0;
}

.sp-notification-message {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: break-word;
	letter-spacing: -0.01em;
}

.sp-notification-time {
	font-size: 11px;
	color: #94a3b8;
	margin-top: 4px;
	font-weight: 400;
}

/* ── Verified Badge ────────────────────────────────────────── */
.sp-notification-verified {
	flex-shrink: 0;
	font-size: 11px;
	color: #94a3b8;
	white-space: nowrap;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.sp-notification-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, #6366f1, rgba(99, 102, 241, 0.3));
	border-radius: 0 0 14px 14px;
	pointer-events: none;
}

/* ── Close Button ──────────────────────────────────────────── */
.sp-notification-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 16px;
	line-height: 1;
	color: #cbd5e1;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s;
	pointer-events: auto;
}

.sp-notification-close:hover {
	color: #475569;
	background: rgba(0, 0, 0, 0.06);
}

/* ── Verified Badge ────────────────────────────────────────── */
.sp-notification-verified {
	position: absolute;
	bottom: 20px;
	right: 10px;
	font-size: 9px;
	color: #94a3b8;
	letter-spacing: 0.3px;
	opacity: 0.75;
	font-weight: 500;
}

/* ── Progress Bar (auto-dismiss countdown) ─────────────────── */
.sp-notification-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
	border-radius: 0 0 14px 14px;
	width: 100%;
	transform-origin: left;
	transition: none;
}

.sp-notification-progress.sp-progress-running {
	transition: width linear;
	width: 0% !important;
}

.sp-notification-progress.sp-progress-paused {
	/* Width is set dynamically via inline style by JS */
	display: block;
}

/* ============================================================
   TEMPLATE 1: Classic
   White card, image left, text right, subtle elevation
   ============================================================ */
.sp-template-classic {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.sp-template-classic .sp-notification-image {
	background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

/* ============================================================
   TEMPLATE 2: Minimal
   Thin bar, left border accent, no image emphasis
   ============================================================ */
.sp-template-minimal {
	border-radius: 10px;
	padding: 10px 16px 14px;
	background: #ffffff;
	border-left: 4px solid #e2e8f0;
	box-shadow: none;
}

.sp-template-minimal .sp-notification-image {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #f1f5f9;
}

.sp-template-minimal .sp-notification-emoji {
	font-size: 18px;
}

.sp-template-minimal .sp-notification-message {
	font-size: 13px;
	font-weight: 500;
}

.sp-template-minimal .sp-notification-progress {
	background: #94a3b8;
}

/* ============================================================
   TEMPLATE 3: Bold
   Dark background, vibrant green accent, premium feel
   ============================================================ */
.sp-template-bold {
	background: #0f172a;
	border-left: 4px solid #3b82f6;
	box-shadow:
		0 4px 12px rgba(15, 23, 42, 0.2),
		0 12px 36px rgba(15, 23, 42, 0.3);
}

.sp-template-bold:hover {
	box-shadow:
		0 8px 20px rgba(15, 23, 42, 0.25),
		0 20px 48px rgba(15, 23, 42, 0.35);
}

.sp-template-bold .sp-notification-message {
	color: #f1f5f9;
}

.sp-template-bold .sp-notification-time {
	color: #94a3b8;
}

.sp-template-bold .sp-notification-close {
	color: #64748b;
}

.sp-template-bold .sp-notification-close:hover {
	color: #cbd5e1;
	background: rgba(255, 255, 255, 0.08);
}

.sp-template-bold .sp-notification-image {
	background: rgba(59, 130, 246, 0.15);
	border: 1px solid #334155;
}

.sp-template-bold .sp-notification-verified {
	color: #64748b;
}

.sp-template-bold .sp-notification-progress {
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* ============================================================
   TEMPLATE 4: Rounded
   Pill-shaped, soft pastels, friendly and approachable
   ============================================================ */
.sp-template-rounded {
	border-radius: 50px;
	padding: 10px 20px 14px 10px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	box-shadow: 0 4px 18px rgba(59, 130, 246, 0.08);
}

.sp-template-rounded .sp-notification-image {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #bfdbfe;
}

.sp-template-rounded .sp-notification-message {
	font-size: 13px;
	color: #1e293b;
}

.sp-template-rounded .sp-notification-time {
	color: #64748b;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sp-template-rounded .sp-notification-close {
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
	color: #64748b;
}

.sp-template-rounded .sp-notification-verified {
	display: none;
}

.sp-template-rounded .sp-notification-progress {
	border-radius: 0 0 50px 50px;
	background: #3b82f6;
}

/* ============================================================
   TEMPLATE 5: Glass
   Glassmorphism — backdrop blur, semi-transparent, modern
   ============================================================ */
.sp-template-glass {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.sp-template-glass .sp-notification-image {
	background: rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.sp-template-glass .sp-notification-message {
	color: #1e293b;
}

.sp-template-glass .sp-notification-time {
	color: #64748b;
}

.sp-template-glass .sp-notification-verified {
	color: #94a3b8;
}

.sp-template-glass .sp-notification-progress {
	background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.2));
}

/* ============================================================
   TEMPLATE 6: Gradient
   Warm matcha-to-lime gradient, white text, vibrant
   ============================================================ */
.sp-template-gradient {
	background: linear-gradient(135deg, #7c3aed, #4f46e5);
	border: none;
	box-shadow:
		0 4px 12px rgba(124, 58, 237, 0.2),
		0 12px 36px rgba(124, 58, 237, 0.15);
}

.sp-template-gradient:hover {
	box-shadow:
		0 8px 20px rgba(124, 58, 237, 0.25),
		0 20px 48px rgba(124, 58, 237, 0.2);
}

.sp-template-gradient .sp-notification-image {
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
}

.sp-template-gradient .sp-notification-message {
	color: #ffffff;
	font-weight: 600;
}

.sp-template-gradient .sp-notification-time {
	color: #c7d2fe;
}

.sp-template-gradient .sp-notification-close {
	color: rgba(255, 255, 255, 0.6);
}

.sp-template-gradient .sp-notification-close:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.15);
}

.sp-template-gradient .sp-notification-verified {
	color: rgba(255, 255, 255, 0.6);
}

.sp-template-gradient .sp-notification-progress {
	background: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   TEMPLATE 7: Dark Modern
   Charcoal background, green accent, sleek minimal
   ============================================================ */
.sp-template-dark-modern {
	background: #1e1e1e;
	border: 1px solid #374151;
	border-radius: 10px;
	box-shadow:
		0 4px 12px rgba(30, 30, 30, 0.25),
		0 12px 36px rgba(30, 30, 30, 0.2);
}

.sp-template-dark-modern:hover {
	box-shadow:
		0 8px 20px rgba(30, 30, 30, 0.3),
		0 20px 48px rgba(30, 30, 30, 0.25);
}

.sp-template-dark-modern .sp-notification-image {
	background: #374151;
	border-radius: 8px;
}

.sp-template-dark-modern .sp-notification-message {
	color: #e2e8f0;
	font-weight: 500;
	letter-spacing: 0;
}

.sp-template-dark-modern .sp-notification-time {
	color: #64748b;
	font-family: monospace;
}

.sp-template-dark-modern .sp-notification-close {
	color: #475569;
}

.sp-template-dark-modern .sp-notification-close:hover {
	color: #94a3b8;
	background: rgba(255, 255, 255, 0.06);
}

.sp-template-dark-modern .sp-notification-verified {
	color: #64748b;
	opacity: 0.6;
}

.sp-template-dark-modern .sp-notification-progress {
	background: #64748b;
}

/* ============================================================
   TEMPLATE 8: Compact
   Ultra-small one-line ticker, no image, just icon + text
   ============================================================ */
.sp-template-compact {
	padding: 8px 14px 11px;
	border-radius: 8px;
	gap: 8px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sp-template-compact .sp-notification-image {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #f1f5f9;
}

.sp-template-compact .sp-notification-emoji {
	font-size: 14px;
}

.sp-template-compact .sp-notification-message {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-template-compact .sp-notification-time {
	display: none;
}

.sp-template-compact .sp-notification-verified {
	display: none;
}

.sp-template-compact .sp-notification-close {
	top: 50%;
	transform: translateY(-50%);
	right: 6px;
	font-size: 14px;
}

.sp-template-compact .sp-notification-progress {
	height: 2px;
	border-radius: 0 0 8px 8px;
}

/* ============================================================
   NOTIFICATION BAR
   Full-width announcement bar at top/bottom of viewport
   ============================================================ */
.sp-notification-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 12px 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.sp-notification-bar.sp-bar-top {
	top: 0;
}

.sp-notification-bar.sp-bar-bottom {
	bottom: 0;
}

.sp-notification-bar.sp-bar-entering.sp-bar-top {
	transform: translateY(-100%);
	opacity: 0;
}

.sp-notification-bar.sp-bar-entering.sp-bar-bottom {
	transform: translateY(100%);
	opacity: 0;
}

.sp-notification-bar.sp-bar-visible {
	transform: translateY(0);
	opacity: 1;
}

.sp-notification-bar.sp-bar-exiting.sp-bar-top {
	transform: translateY(-100%);
	opacity: 0;
}

.sp-notification-bar.sp-bar-exiting.sp-bar-bottom {
	transform: translateY(100%);
	opacity: 0;
}

.sp-notification-bar-message {
	flex: 1;
	text-align: center;
}

.sp-notification-bar-countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.5px;
}

.sp-notification-bar-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 18px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.95);
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	white-space: nowrap;
}

.sp-notification-bar-cta:hover {
	background: #ffffff;
	transform: translateY(-1px);
}

.sp-notification-bar-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	opacity: 0.7;
	transition: opacity 0.2s, background 0.2s;
	flex-shrink: 0;
}

.sp-notification-bar-close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.15);
}

/* ── Countdown Split Template ────────────────────────── */
.sp-bar-countdown-split {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.sp-bar-cd-label {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.9;
	margin-right: 4px;
}

.sp-bar-cd-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 4px 10px;
	min-width: 44px;
	backdrop-filter: blur(4px);
}

.sp-bar-cd-num {
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.sp-bar-cd-unit {
	font-size: 9px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.8;
}

/* ── Classic Template ────────────────────────────────── */
.sp-bar-tpl-classic {
	background: #1a1a2e !important;
	color: #ffffff !important;
	justify-content: space-between !important;
}

.sp-bar-tpl-classic .sp-notification-bar-message {
	flex: 1;
	text-align: left;
}

.sp-bar-tpl-classic .sp-notification-bar-cta {
	background: #3b82f6;
	color: #ffffff;
	border-radius: 6px;
	font-weight: 600;
	border: none;
}

.sp-bar-tpl-classic .sp-notification-bar-cta:hover {
	background: #2563eb;
	transform: translateY(-1px);
}

.sp-bar-tpl-classic .sp-notification-bar-countdown {
	background: rgba(59, 130, 246, 0.15);
	color: #93c5fd;
	border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ── Countdown Split Template ────────────────────────── */
.sp-bar-tpl-countdown-split {
	background: #1e293b !important;
	color: #cbd5e1 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
}

.sp-bar-tpl-countdown-split .sp-notification-bar-message {
	color: #cbd5e1;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	font-weight: 600;
}

.sp-bar-tpl-countdown-split .sp-bar-cd-box {
	background: rgba(59, 130, 246, 0.15);
	border: 1px solid rgba(59, 130, 246, 0.25);
	border-radius: 6px;
}

.sp-bar-tpl-countdown-split .sp-bar-cd-num {
	color: #93c5fd;
	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.sp-bar-tpl-countdown-split .sp-bar-cd-unit {
	color: #64748b;
}

.sp-bar-tpl-countdown-split .sp-notification-bar-cta {
	background: #3b82f6;
	color: #fff;
	border-radius: 6px;
}

.sp-bar-tpl-countdown-split .sp-notification-bar-cta:hover {
	background: #2563eb;
}

/* ── Gradient Flash Template ─────────────────────────── */
.sp-bar-tpl-gradient-flash {
	background: linear-gradient(to right, #7c3aed, #3b82f6) !important;
	animation: spBarGradientShift 3s ease-in-out infinite;
	overflow: hidden;
	color: #ffffff !important;
}

.sp-bar-tpl-gradient-flash::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 200%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 25%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0.08) 75%,
		transparent 100%
	);
	animation: spBarShimmer 2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes spBarGradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes spBarShimmer {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(50%); }
}

.sp-bar-tpl-gradient-flash .sp-notification-bar-cta {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px);
	border-radius: 20px;
}

.sp-bar-tpl-gradient-flash .sp-notification-bar-cta:hover {
	background: rgba(255, 255, 255, 0.3);
}

.sp-bar-tpl-gradient-flash .sp-notification-bar-countdown {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.sp-bar-tpl-gradient-flash .sp-bar-cd-box {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Minimal Template ────────────────────────────────── */
.sp-bar-tpl-minimal {
	background: #ffffff !important;
	color: #374151 !important;
	border-bottom: 1px solid #e5e7eb !important;
	box-shadow: none;
	padding: 12px 24px;
	font-size: 14px;
	justify-content: center !important;
}

.sp-bar-tpl-minimal .sp-notification-bar-message {
	flex: none;
	text-align: center;
	font-weight: 500;
}

.sp-bar-tpl-minimal .sp-notification-bar-cta {
	background: #374151;
	color: #fff;
	font-size: 12px;
	padding: 4px 14px;
	border-radius: 4px;
}

.sp-bar-tpl-minimal .sp-notification-bar-cta:hover {
	background: #1f2937;
}

.sp-bar-tpl-minimal .sp-notification-bar-countdown {
	background: rgba(0, 0, 0, 0.06);
	color: #374151;
	font-size: 12px;
}

.sp-bar-tpl-minimal .sp-notification-bar-close {
	opacity: 0.4;
	color: #374151;
}

.sp-bar-tpl-minimal .sp-notification-bar-close:hover {
	opacity: 0.8;
	background: rgba(0, 0, 0, 0.05);
}

/* ── Custom Template ── */
/* Colors come from inline styles (user-defined BG + text color). */
.sp-bar-tpl-custom {
	justify-content: center !important;
	gap: 16px;
	padding: 12px 24px;
	font-size: 14px;
}

.sp-bar-tpl-custom .sp-notification-bar-message {
	flex: none;
	text-align: center;
	font-weight: 600;
}

.sp-bar-tpl-custom .sp-notification-bar-cta {
	background: rgba(255,255,255,0.2);
	color: inherit;
	font-size: 13px;
	padding: 6px 18px;
	border-radius: 4px;
	font-weight: 700;
	border: 1px solid rgba(255,255,255,0.3);
}

.sp-bar-tpl-custom .sp-notification-bar-cta:hover {
	background: rgba(255,255,255,0.3);
}

.sp-bar-tpl-custom .sp-notification-bar-close {
	color: inherit;
	opacity: 0.7;
}

.sp-bar-tpl-custom .sp-notification-bar-close:hover {
	opacity: 1;
}

/* ── Banner Template ─────────────────────────────────── */
.sp-bar-tpl-banner {
	background: #f59e0b !important;
	color: #ffffff !important;
	padding: 16px 24px !important;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.3px;
	justify-content: center !important;
	gap: 24px !important;
}

.sp-bar-tpl-banner .sp-notification-bar-message {
	flex: none;
	text-align: center;
}

.sp-bar-tpl-banner .sp-notification-bar-message {
	flex: none;
	text-align: center;
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.sp-bar-tpl-banner .sp-notification-bar-countdown {
	font-size: 16px;
	padding: 6px 16px;
}

.sp-bar-tpl-banner .sp-notification-bar-cta {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 800;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: #ffffff;
	color: #d97706;
}

.sp-bar-tpl-banner .sp-notification-bar-cta:hover {
	background: #fff;
	color: #b45309;
	transform: translateY(-1px);
}

/* ── Split Duo Template (Stitch) ─────────────────────── */
.sp-bar-tpl-split-duo {
	background: transparent !important;
	color: #ffffff !important;
	padding: 0 !important;
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	min-height: 48px;
	box-shadow: none !important;
}

.sp-bar-tpl-split-duo .sp-bar-split-left {
	background: #1a1a2e;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 24px;
}

.sp-bar-tpl-split-duo .sp-bar-split-right {
	background: #f43f5e;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 24px;
	position: relative;
}

.sp-bar-tpl-split-duo .sp-bar-split-divider {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 16px;
	background: #1a1a2e;
	transform: skewX(-12deg);
	transform-origin: bottom;
}

.sp-bar-tpl-split-duo .sp-notification-bar-message {
	color: #ffffff;
	font-weight: 500;
	font-size: 14px;
	flex: none;
	text-align: right;
}

.sp-bar-tpl-split-duo .sp-notification-bar-cta {
	background: transparent !important;
	color: #ffffff !important;
	border: none !important;
	border-bottom: 1px solid #ffffff !important;
	border-radius: 0 !important;
	font-weight: 700;
	padding: 2px 0 4px !important;
	margin-left: 16px;
	text-decoration: none;
}

.sp-bar-tpl-split-duo .sp-notification-bar-cta:hover {
	opacity: 0.8;
	transform: none;
}

.sp-bar-tpl-split-duo .sp-notification-bar-close {
	color: #ffffff;
	position: absolute;
	right: 8px;
}

/* ── Sticky Ribbon Template (Stitch) ─────────────────── */
.sp-bar-tpl-sticky-ribbon {
	background: #dc2626 !important;
	color: #ffffff !important;
	font-weight: 700;
	overflow: visible;
	padding: 8px 24px !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	justify-content: center !important;
}

.sp-bar-tpl-sticky-ribbon .sp-bar-ribbon-edge-left,
.sp-bar-tpl-sticky-ribbon .sp-bar-ribbon-edge-right {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16px;
	background: #991b1b;
}

.sp-bar-tpl-sticky-ribbon .sp-bar-ribbon-edge-left {
	left: -4px;
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.sp-bar-tpl-sticky-ribbon .sp-bar-ribbon-edge-right {
	right: -4px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sp-bar-tpl-sticky-ribbon .sp-notification-bar-message {
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	text-align: center;
}

.sp-bar-tpl-sticky-ribbon .sp-notification-bar-cta {
	background: #ffffff;
	color: #dc2626;
	font-weight: 700;
	border-radius: 4px;
}

.sp-bar-tpl-sticky-ribbon .sp-notification-bar-cta:hover {
	background: #fef2f2;
	color: #b91c1c;
}

.sp-bar-tpl-sticky-ribbon .sp-notification-bar-close {
	color: #ffffff;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* ── Slide ────────────────────────────────────────────────── */
@keyframes spSlideInLeft {
	from { opacity: 0; transform: translateX(-100%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes spSlideInRight {
	from { opacity: 0; transform: translateX(100%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes spSlideInTop {
	from { opacity: 0; transform: translateY(-100%); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes spSlideInBottom {
	from { opacity: 0; transform: translateY(100%); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Slide in based on position */
#salespulse-popup-container[data-position="bottom-left"] .sp-animate-in.sp-anim-slide {
	animation: spSlideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#salespulse-popup-container[data-position="bottom-right"] .sp-animate-in.sp-anim-slide {
	animation: spSlideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#salespulse-popup-container[data-position="top-left"] .sp-animate-in.sp-anim-slide {
	animation: spSlideInTop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#salespulse-popup-container[data-position="top-right"] .sp-animate-in.sp-anim-slide {
	animation: spSlideInTop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide out */
@keyframes spSlideOutLeft {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-100%); }
}

@keyframes spSlideOutRight {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(100%); }
}

#salespulse-popup-container[data-position="bottom-left"] .sp-animate-out.sp-anim-slide,
#salespulse-popup-container[data-position="top-left"] .sp-animate-out.sp-anim-slide {
	animation: spSlideOutLeft 0.35s ease-in forwards;
}

#salespulse-popup-container[data-position="bottom-right"] .sp-animate-out.sp-anim-slide,
#salespulse-popup-container[data-position="top-right"] .sp-animate-out.sp-anim-slide {
	animation: spSlideOutRight 0.35s ease-in forwards;
}

/* ── Fade ─────────────────────────────────────────────────── */
@keyframes spFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes spFadeOut {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(8px); }
}

.sp-animate-in.sp-anim-fade {
	animation: spFadeIn 0.35s ease forwards;
}

.sp-animate-out.sp-anim-fade {
	animation: spFadeOut 0.3s ease forwards;
}

/* ── Bounce ───────────────────────────────────────────────── */
@keyframes spBounceIn {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.05); }
	70%  { transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}

.sp-animate-in.sp-anim-bounce {
	animation: spBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sp-animate-out.sp-anim-bounce {
	animation: spFadeOut 0.3s ease forwards;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
	#salespulse-popup-container {
		max-width: calc(100% - 24px);
		left: 12px !important;
		right: 12px !important;
	}

	#salespulse-popup-container[data-position="bottom-left"],
	#salespulse-popup-container[data-position="bottom-right"] {
		bottom: 12px;
	}

	#salespulse-popup-container[data-position="top-left"],
	#salespulse-popup-container[data-position="top-right"] {
		top: 12px;
	}

	.sp-notification {
		padding: 12px 14px 16px;
		gap: 10px;
		border-radius: 12px;
	}

	.sp-notification-image {
		width: 40px;
		height: 40px;
	}

	.sp-notification-message {
		font-size: 12px;
	}

	.sp-template-rounded {
		border-radius: 16px;
		padding: 10px 16px 14px 10px;
	}

	.sp-template-compact {
		padding: 6px 10px 9px;
	}

	/* Notification bar mobile */
	.sp-notification-bar {
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 14px;
		font-size: 13px;
	}

	.sp-notification-bar-countdown {
		font-size: 12px;
		padding: 3px 8px;
	}

	.sp-notification-bar-cta {
		font-size: 12px;
		padding: 5px 12px;
	}

	/* Split Duo — collapse to single row on mobile */
	.sp-bar-tpl-split-duo {
		flex-direction: column !important;
		min-height: auto;
	}

	.sp-bar-tpl-split-duo .sp-bar-split-left,
	.sp-bar-tpl-split-duo .sp-bar-split-right {
		justify-content: center;
		padding: 8px 14px;
	}

	.sp-bar-tpl-split-duo .sp-bar-split-divider {
		display: none;
	}

	.sp-bar-tpl-split-duo .sp-notification-bar-message {
		text-align: center;
		font-size: 12px;
	}

	.sp-bar-tpl-split-duo .sp-notification-bar-cta {
		margin-left: 8px;
	}

	/* Countdown Split — stack on mobile */
	.sp-bar-tpl-countdown-split {
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px 14px;
		gap: 6px;
	}

	.sp-bar-countdown-split {
		gap: 4px;
	}

	.sp-bar-cd-box {
		padding: 2px 6px;
		min-width: 36px;
	}

	.sp-bar-cd-num {
		font-size: 14px;
	}

	/* Sticky Ribbon — hide ribbon edges on mobile */
	.sp-bar-tpl-sticky-ribbon::before,
	.sp-bar-tpl-sticky-ribbon::after {
		display: none;
	}

	/* Neon Bar — reduce font on mobile */
	.sp-bar-tpl-neon-bar {
		padding: 10px 14px;
	}

	.sp-bar-tpl-neon-bar .sp-notification-bar-message {
		font-size: 11px;
		letter-spacing: 1px;
	}

	/* Banner — smaller text on mobile */
	.sp-bar-tpl-banner .sp-notification-bar-message {
		font-size: 14px;
	}

	/* Premium Glass — smaller on mobile */
	.sp-bar-tpl-premium-glass {
		padding: 10px 14px;
	}
}

/* ============================================================
   GROWTH ALERT BADGE — Live visitor count
   ============================================================ */
.sp-growth-alert {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: linear-gradient(135deg, #ff6b35, #f7931e);
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4), 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 999997;
	opacity: 0;
	transform: translateY(20px) scale(0.9);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
	white-space: nowrap;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.sp-growth-alert-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@keyframes sp-growth-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.sp-growth-alert-pulse {
	animation: sp-growth-pulse 0.5s ease;
}

/* ============================================================
   COOKIE CONSENT BANNER — GDPR compliant
   ============================================================ */
.sp-cookie-consent {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9999999;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
	box-sizing: border-box;
}

.sp-cookie-consent-top {
	top: 0;
	bottom: auto;
	transform: translateY(-100%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sp-cookie-consent-bottom {
	bottom: 0;
	top: auto;
}

.sp-cookie-consent-visible {
	transform: translateY(0);
	opacity: 1;
}

.sp-cookie-consent-hidden {
	transform: translateY(100%);
	opacity: 0;
}

.sp-cookie-consent-top.sp-cookie-consent-hidden {
	transform: translateY(-100%);
}

.sp-cookie-consent-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.sp-cookie-consent-message {
	flex: 1;
	font-size: 14px;
	line-height: 1.6;
}

.sp-cookie-consent-link {
	text-decoration: underline;
	font-weight: 600;
	margin-left: 4px;
}

.sp-cookie-consent-link:hover {
	opacity: 0.85;
}

.sp-cookie-consent-buttons {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.sp-cookie-consent-accept,
.sp-cookie-consent-decline {
	border: none;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s;
	white-space: nowrap;
}

.sp-cookie-consent-accept {
	color: #fff;
}

.sp-cookie-consent-accept:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.sp-cookie-consent-decline {
	background: rgba(255, 255, 255, 0.15);
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.sp-cookie-consent-decline:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Cookie consent responsive */
@media (max-width: 600px) {
	.sp-cookie-consent-inner {
		flex-direction: column;
		text-align: center;
		padding: 14px 16px;
		gap: 12px;
	}

	.sp-cookie-consent-buttons {
		width: 100%;
		justify-content: center;
	}

	.sp-cookie-consent-accept,
	.sp-cookie-consent-decline {
		flex: 1;
		padding: 10px 16px;
	}
}

/* ============================================================
   ACCESSIBILITY — Respect reduced motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.sp-notification,
	.sp-animate-in,
	.sp-animate-out {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.sp-notification-bar {
		transition: none !important;
	}

	.sp-notification-progress {
		transition: none !important;
	}

	.sp-cookie-consent {
		transition: none !important;
	}
}

/* ============================================================
   PRINT — Hide notifications
   ============================================================ */
@media print {
	#salespulse-popup-container,
	.sp-notification-bar,
	.sp-cookie-consent {
		display: none !important;
	}
}