/**
 * Cart FOMO Module v3.2 — Modern UI
 * Theme-agnostic. All three widget types supported.
 *
 * .fomo-inline-msg / .cart-fomo-message  — inline (server-rendered)
 * #fomo-header-bar / .cart-fomo-header   — sticky top bar (server-rendered, JS-shown)
 * .fomo-popup                            — floating toast (JS-rendered)
 */

/* ===================================================
   HEADER BAR — animates in from top when JS reveals it
   =================================================== */
#fomo-header-bar {
	animation: fomoSlideDown 0.35s ease-out;
}

/* ===================================================
   POPUP — animates in when JS creates it
   =================================================== */
.fomo-popup:not(.pos-center) {
	animation: fomoSlideInRight 0.35s ease-out;
}
.fomo-popup.pos-center {
	animation: fomoFadeIn 0.3s ease-out;
}

/* ===================================================
   GROUP WRAPPER (inline + mini-cart)
   Stacks multiple FOMO items in a single visual block
   =================================================== */
.fomo-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
}

.fomo-group .fomo-item {
	margin: 0;
}

.fomo-group .fomo-item .fomo-alert {
	color: #fff;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	/* background + box-shadow come from the template class on .fomo-item */
}
/* Fallback for items without any template class */
.fomo-group .fomo-item:not([class*="fomo-template-"]) .fomo-alert {
	background: linear-gradient(135deg, #5B6CF9 0%, #9945E0 100%);
	box-shadow: 0 4px 20px rgba(91, 108, 249, 0.28);
}

/* Mini-cart group: tighter spacing */
.cart-content .cart-fomo-message,
#cart .dropdown-menu .cart-fomo-message {
	margin: 0;
	padding: 8px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cart-content .cart-fomo-message .fomo-group,
#cart .dropdown-menu .cart-fomo-message .fomo-group {
	margin: 0;
	gap: 6px;
}

.cart-content .cart-fomo-message .fomo-item .fomo-alert,
#cart .dropdown-menu .cart-fomo-message .fomo-item .fomo-alert {
	border-radius: 7px;
	padding: 10px 14px;
	font-size: 13px;
	box-shadow: none;
}

/* ===================================================
   HEADER BAR — single sticky block with multiple rows
   =================================================== */
.cart-fomo-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	color: #fff;
	box-shadow: 0 3px 16px rgba(0, 0, 0, 0.18);
	background: #0F172A; /* fallback if rows don't paint */
}

.cart-fomo-header .fomo-header-row {
	position: relative; /* anchors per-row .fomo-close */
	padding: 10px 50px 10px 50px; /* room for close button on the right */
	text-align: center;
	background: linear-gradient(135deg, #5B6CF9 0%, #9945E0 100%);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	overflow: hidden; /* allows max-height collapse on dismiss */
}
.cart-fomo-header .fomo-header-row:last-child {
	border-bottom: none;
}

.cart-fomo-header .fomo-header-inner {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.cart-fomo-header .fomo-header-inner .fomo-progress-wrap {
	max-width: 500px;
	margin: 8px auto 0;
}

/* Per-row close button — each .fomo-header-row owns one X */
.cart-fomo-header .fomo-header-row > .fomo-close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	opacity: 0.7;
	transition: opacity 0.15s, background 0.15s;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	z-index: 1;
}

.cart-fomo-header .fomo-header-row > .fomo-close:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.35);
}

/* ===================================================
   FLOATING POPUP — per-position stack containers
   Each corner hosts a fixed-position stack; popups inside flow as flex children.
   Bottom positions use column-reverse so the newest popup sits closest to the corner.
   =================================================== */

.fomo-popup-stack {
	position: fixed;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
	width: calc(100vw - 32px);
	pointer-events: none; /* let clicks pass through gaps between items */
}

.fomo-popup-stack > .fomo-popup-item {
	pointer-events: auto; /* but each popup item is interactive */
}

.fomo-popup-stack.pos-top-right    { top: 20px;    right: 20px; }
.fomo-popup-stack.pos-top-left     { top: 20px;    left: 20px;  }
.fomo-popup-stack.pos-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }
.fomo-popup-stack.pos-bottom-left  { bottom: 20px; left: 20px;  flex-direction: column-reverse; }
.fomo-popup-stack.pos-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 80vh;
	overflow-y: auto;
}

.fomo-popup-item {
	position: relative;
	max-width: 100%;
	opacity: 0;
	transform: translateY(-6px);
	animation: fomoPopupItemIn 0.32s ease-out forwards;
}

@keyframes fomoPopupItemIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.fomo-popup-stack.pos-bottom-right .fomo-popup-item,
.fomo-popup-stack.pos-bottom-left  .fomo-popup-item {
	transform: translateY(6px);
	animation-name: fomoPopupItemInBottom;
}

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

.fomo-popup-inner {
	background: linear-gradient(135deg, #5B6CF9 0%, #9945E0 100%);
	color: #fff;
	padding: 14px 40px 14px 16px;
	border-radius: 12px;
	box-shadow: 0 8px 36px rgba(0, 0, 0, 0.22);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	position: relative;
}

.fomo-popup-item .fomo-close {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	opacity: 0.6;
	transition: opacity 0.15s, background 0.15s;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.14);
}

.fomo-popup-item .fomo-close:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.25);
}

/* ---- Back-compat: legacy single .fomo-popup (older builds may still emit it) ---- */
.fomo-popup {
	position: fixed;
	z-index: 10000;
	max-width: 340px;
	width: calc(100vw - 32px);
}
.fomo-popup.pos-top-right    { top: 20px;    right: 20px; }
.fomo-popup.pos-bottom-right { bottom: 20px; right: 20px; }
.fomo-popup.pos-bottom-left  { bottom: 20px; left: 20px;  }
.fomo-popup.pos-top-left     { top: 20px;    left: 20px;  }
.fomo-popup.pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ===================================================
   PROGRESS BAR
   =================================================== */
.fomo-progress-wrap {
	margin-top: 10px;
}

.fomo-progress-bar {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 99px;
	overflow: hidden;
}

.fomo-progress-fill {
	height: 100%;
	background: rgba(255, 255, 255, 0.88);
	border-radius: 99px;
	transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 6px;
	position: relative;
	overflow: hidden;
}

/* Shimmer sweep — applies to all templates by default */
.fomo-progress-fill::after {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	animation: fomoShimmer 2.4s ease-in-out infinite;
}

/* ===================================================
   COUNTDOWN
   =================================================== */
.fomo-countdown {
	display: inline-block;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 700;
	font-size: 1.05em;
	background: rgba(0, 0, 0, 0.15);
	padding: 1px 8px;
	border-radius: 4px;
	letter-spacing: 1px;
	min-width: 66px;
	text-align: center;
	vertical-align: middle;
}

/* ===================================================
   ICON
   =================================================== */
.fomo-icon {
	font-size: 1.2em;
	margin-right: 6px;
	vertical-align: middle;
}

/* ===================================================
   TEMPLATE: Modern (default — blue-violet)
   Specificity note: .fomo-item.fomo-template-X matches the base
   .fomo-group .fomo-item .fomo-alert (3 classes) and wins by cascade order.
   =================================================== */
.fomo-item.fomo-template-modern .fomo-alert,
.fomo-header-row.fomo-template-modern,
.fomo-popup.fomo-template-modern .fomo-popup-inner,
.fomo-popup-item.fomo-template-modern .fomo-popup-inner {
	background: linear-gradient(135deg, #5B6CF9 0%, #9945E0 100%);
	box-shadow: 0 4px 20px rgba(91, 108, 249, 0.28);
}

/* TEMPLATE: Success (emerald green) */
.fomo-item.fomo-template-success .fomo-alert,
.fomo-header-row.fomo-template-success,
.fomo-popup.fomo-template-success .fomo-popup-inner,
.fomo-popup-item.fomo-template-success .fomo-popup-inner {
	background: linear-gradient(135deg, #059669 0%, #34D399 100%);
	box-shadow: 0 4px 20px rgba(5, 150, 105, 0.28);
}

/* TEMPLATE: Warning (red-orange, urgency) */
.fomo-item.fomo-template-warning .fomo-alert,
.fomo-header-row.fomo-template-warning,
.fomo-popup.fomo-template-warning .fomo-popup-inner,
.fomo-popup-item.fomo-template-warning .fomo-popup-inner {
	background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
	box-shadow: 0 4px 20px rgba(220, 38, 38, 0.28);
}

/* TEMPLATE: Dark (slate) */
.fomo-item.fomo-template-dark .fomo-alert,
.fomo-header-row.fomo-template-dark,
.fomo-popup.fomo-template-dark .fomo-popup-inner,
.fomo-popup-item.fomo-template-dark .fomo-popup-inner {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #E2E8F0;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.fomo-template-dark .fomo-progress-bar      { background: rgba(255, 255, 255, 0.08); }
.fomo-template-dark .fomo-progress-fill     { background: #667eea; }
.fomo-template-dark .fomo-countdown         { background: rgba(255, 255, 255, 0.08); }
.fomo-template-dark .fomo-close             { background: rgba(255, 255, 255, 0.08); }
.fomo-template-dark .fomo-close:hover       { background: rgba(255, 255, 255, 0.14); }

/* ===================================================
   TEMPLATE: Minimal (clean white / light)
   =================================================== */
.fomo-item.fomo-template-minimal .fomo-alert,
.fomo-header-row.fomo-template-minimal,
.fomo-popup.fomo-template-minimal .fomo-popup-inner,
.fomo-popup-item.fomo-template-minimal .fomo-popup-inner {
	background: #FFFFFF;
	color: #1E293B;
	border-left: 4px solid #5B6CF9;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fomo-template-minimal .fomo-progress-bar   { background: #E2E8F0; }
.fomo-template-minimal .fomo-progress-fill  { background: linear-gradient(90deg, #5B6CF9, #9945E0); }
.fomo-template-minimal .fomo-countdown      { background: #F1F5F9; color: #1E293B; }
.fomo-template-minimal .fomo-close          { color: #64748B; background: #F1F5F9; }
.fomo-template-minimal .fomo-close:hover    { background: #E2E8F0; }

/* ===================================================
   TEMPLATE: Gradient (animated aurora)
   =================================================== */
.fomo-item.fomo-template-gradient .fomo-alert,
.fomo-header-row.fomo-template-gradient,
.fomo-popup.fomo-template-gradient .fomo-popup-inner,
.fomo-popup-item.fomo-template-gradient .fomo-popup-inner {
	background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #4facfe);
	background-size: 300% 300%;
	animation: fomoGradientShift 5s ease infinite;
	box-shadow: 0 4px 22px rgba(102, 126, 234, 0.35);
}

/* ===================================================
   TEMPLATE: Glass (frosted glassmorphism)
   =================================================== */
.fomo-item.fomo-template-glass .fomo-alert,
.fomo-header-row.fomo-template-glass,
.fomo-popup.fomo-template-glass .fomo-popup-inner,
.fomo-popup-item.fomo-template-glass .fomo-popup-inner {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #F8FAFC;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.fomo-template-glass .fomo-progress-bar  { background: rgba(255, 255, 255, 0.14); }
.fomo-template-glass .fomo-progress-fill { background: rgba(255, 255, 255, 0.9); }

/* ===================================================
   TEMPLATE: Neon (cyan→magenta glow)
   =================================================== */
.fomo-item.fomo-template-neon .fomo-alert,
.fomo-header-row.fomo-template-neon,
.fomo-popup.fomo-template-neon .fomo-popup-inner,
.fomo-popup-item.fomo-template-neon .fomo-popup-inner {
	background: #0B0B1E;
	color: #F0F5FF;
	border: 1px solid #22D3EE;
	box-shadow:
		0 0 0 1px rgba(34, 211, 238, 0.4),
		0 0 14px rgba(34, 211, 238, 0.55),
		0 0 32px rgba(217, 70, 239, 0.35),
		inset 0 0 12px rgba(34, 211, 238, 0.12);
	text-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
}
.fomo-template-neon .fomo-progress-bar  { background: rgba(34, 211, 238, 0.12); }
.fomo-template-neon .fomo-progress-fill { background: linear-gradient(90deg, #22D3EE, #D946EF); box-shadow: 0 0 10px rgba(217, 70, 239, 0.6); }

/* ===================================================
   TEMPLATE: Sunset (orange→pink warm)
   =================================================== */
.fomo-item.fomo-template-sunset .fomo-alert,
.fomo-header-row.fomo-template-sunset,
.fomo-popup.fomo-template-sunset .fomo-popup-inner,
.fomo-popup-item.fomo-template-sunset .fomo-popup-inner {
	background: linear-gradient(135deg, #FF512F 0%, #F09819 50%, #FF5F6D 100%);
	color: #FFF;
	box-shadow: 0 6px 24px rgba(240, 152, 25, 0.38);
}
.fomo-template-sunset .fomo-progress-bar  { background: rgba(255, 255, 255, 0.22); }
.fomo-template-sunset .fomo-progress-fill { background: linear-gradient(90deg, #FDE68A, #FFFFFF); }

/* ===================================================
   TEMPLATE: Ocean (deep blue→cyan)
   =================================================== */
.fomo-item.fomo-template-ocean .fomo-alert,
.fomo-header-row.fomo-template-ocean,
.fomo-popup.fomo-template-ocean .fomo-popup-inner,
.fomo-popup-item.fomo-template-ocean .fomo-popup-inner {
	background: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
	color: #E0F2FE;
	box-shadow: 0 6px 26px rgba(15, 32, 39, 0.45);
	border-top: 1px solid rgba(125, 211, 252, 0.22);
}
.fomo-template-ocean .fomo-progress-bar  { background: rgba(125, 211, 252, 0.14); }
.fomo-template-ocean .fomo-progress-fill { background: linear-gradient(90deg, #06B6D4, #67E8F9); }

/* ===================================================
   TEMPLATE: Royal (purple→gold luxury)
   =================================================== */
.fomo-item.fomo-template-royal .fomo-alert,
.fomo-header-row.fomo-template-royal,
.fomo-popup.fomo-template-royal .fomo-popup-inner,
.fomo-popup-item.fomo-template-royal .fomo-popup-inner {
	background: linear-gradient(135deg, #1E1B4B 0%, #6D28D9 50%, #FACC15 140%);
	color: #FEF3C7;
	border: 1px solid rgba(250, 204, 21, 0.35);
	box-shadow: 0 6px 28px rgba(109, 40, 217, 0.45);
}
.fomo-template-royal .fomo-progress-bar  { background: rgba(250, 204, 21, 0.14); }
.fomo-template-royal .fomo-progress-fill { background: linear-gradient(90deg, #FACC15, #FDE68A); box-shadow: 0 0 8px rgba(250, 204, 21, 0.5); }

/* ===================================================
   SUCCESS STATE — overrides template on all types
   =================================================== */
.fomo-item.fomo-success .fomo-alert,
.fomo-popup.fomo-success .fomo-popup-inner,
.fomo-popup-item.fomo-success .fomo-popup-inner,
.fomo-header-row.fomo-success {
	background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
	box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3) !important;
	animation: none !important;
}

.fomo-item.fomo-success .fomo-alert::before {
	content: '✓ ';
	font-weight: 700;
}

/* ===================================================
   KEYFRAMES
   =================================================== */
@keyframes fomoSlideDown {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

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

@keyframes fomoFadeIn {
	from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
	to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

@keyframes fomoShimmer {
	0%   { left: -60%; }
	100% { left: 160%; }
}

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

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 768px) {
	.fomo-inline-msg .fomo-alert,
	.cart-fomo-message .fomo-alert {
		font-size: 13px;
		padding: 12px 14px;
	}

	.fomo-popup {
		left: 16px !important;
		right: 16px !important;
		max-width: calc(100vw - 32px);
	}

	.fomo-popup.pos-center {
		left: 50% !important;
		right: auto !important;
	}

	.cart-fomo-header .fomo-header-inner {
		font-size: 13px;
	}
}