/*
 * SHAHAZ.COM ZIP-300 Phase 2 — Extended Popup Templates visual layer.
 * Additive only — never edits promotion-engine.css. Each `--template-*` selector below
 * targets the exact per-template class PresentationRenderer/AdvancedPopupRenderer already
 * emit (`shahaz-promotion-popup--template-{id}`), so 20 registered templates get 20
 * genuinely different visual treatments, not one shared look. Colors reuse SHAHAZ.COM's
 * existing brand language (magenta + gold), never new arbitrary hues, per Section 25/26.
 */

:root {
	--shahaz-mpe-magenta: #d6006e;
	--shahaz-mpe-magenta-deep: #8c004b;
	--shahaz-mpe-gold: #d4af37;
	--shahaz-mpe-gold-soft: #f3e3b3;
	--shahaz-mpe-pink-soft: #ffe1ee;
	--shahaz-mpe-ink: #23131c;
}

/* Base frame shared by every popup template — no black focus/click artifacts anywhere. */
.shahaz-promotion-popup .shahaz-promotion-template__cta,
.shahaz-promotion-popup .shahaz-promotion-template__secondary,
.shahaz-promotion-popup [role="dialog"] {
	-webkit-tap-highlight-color: transparent;
}
.shahaz-promotion-popup .shahaz-promotion-template__cta:focus-visible,
.shahaz-promotion-popup .shahaz-promotion-template__secondary:focus-visible {
	outline: 2px solid var(--shahaz-mpe-magenta);
	outline-offset: 2px;
	box-shadow: none;
}
.shahaz-promotion-popup .shahaz-promotion-template__cta:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* 1. Luxury Welcome — layered, gold-bordered, premium */
.shahaz-promotion-popup--template-luxury-welcome .shahaz-promotion-template__frame {
	background: linear-gradient(160deg, #1c0f16 0%, var(--shahaz-mpe-magenta-deep) 100%);
	border: 1px solid var(--shahaz-mpe-gold);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(212,175,55,.25);
	color: #fff;
	padding: 32px;
}
.shahaz-promotion-popup--template-luxury-welcome .shahaz-promotion-template__title { color: var(--shahaz-mpe-gold-soft); font-size: 1.4em; letter-spacing: .03em; }

/* 2. Voucher Reveal — reward ticket look */
.shahaz-promotion-popup--template-voucher-reveal .shahaz-promotion-template__frame {
	background: repeating-linear-gradient(135deg, #fff 0 14px, var(--shahaz-mpe-pink-soft) 14px 28px);
	border: 2px dashed var(--shahaz-mpe-magenta);
	border-radius: 14px;
	padding: 26px;
}
.shahaz-promotion-popup--template-voucher-reveal .shahaz-promotion-template__coupon-code {
	display: inline-block; background: var(--shahaz-mpe-ink); color: var(--shahaz-mpe-gold-soft);
	font-weight: 700; letter-spacing: .08em; padding: 8px 16px; border-radius: 8px; margin-top: 10px;
}

/* 3. Limited Stock Alert — urgent amber */
.shahaz-promotion-popup--template-limited-stock-alert .shahaz-promotion-template__frame {
	background: #fff4e5; border-left: 6px solid #d97706; border-radius: 10px; padding: 20px;
}
.shahaz-promotion-popup--template-limited-stock-alert .shahaz-promotion-template__title { color: #b45309; }

/* 4. Last Chance — urgent magenta pulse */
.shahaz-promotion-popup--template-last-chance .shahaz-promotion-template__frame {
	background: var(--shahaz-mpe-magenta); color: #fff; border-radius: 10px; padding: 22px;
	animation: shahaz-mpe-pulse 1.8s ease-in-out infinite;
}
@keyframes shahaz-mpe-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,0,110,.4); } 50% { box-shadow: 0 0 0 10px rgba(214,0,110,0); } }
@media (prefers-reduced-motion: reduce) { .shahaz-promotion-popup--template-last-chance .shahaz-promotion-template__frame { animation: none; } }

/* 5. New Customer Gift — soft pink welcoming */
.shahaz-promotion-popup--template-new-customer-gift .shahaz-promotion-template__frame {
	background: var(--shahaz-mpe-pink-soft); border-radius: 20px; padding: 26px; text-align: center;
}

/* 6. Free Delivery — clean, minimal */
.shahaz-promotion-popup--template-free-delivery .shahaz-promotion-template__frame {
	background: #fff; border: 1px solid #eadfe4; border-radius: 12px; padding: 20px;
}

/* 7. Buy More Save More — bold value badge */
.shahaz-promotion-popup--template-buy-more-save-more .shahaz-promotion-template__frame {
	background: linear-gradient(90deg, var(--shahaz-mpe-magenta), var(--shahaz-mpe-magenta-deep));
	color: #fff; border-radius: 12px; padding: 22px;
}

/* 8. Category Discovery — image-forward */
.shahaz-promotion-popup--template-category-discovery .shahaz-promotion-template__frame {
	background: #fff; border-radius: 16px; padding: 0; overflow: hidden;
}
.shahaz-promotion-popup--template-category-discovery .shahaz-promotion-template__copy { padding: 18px; }

/* 9. Brand Spotlight — dark premium panel */
.shahaz-promotion-popup--template-brand-spotlight .shahaz-promotion-template__frame {
	background: var(--shahaz-mpe-ink); color: #fff; border-radius: 14px; padding: 24px;
}

/* 10. Side Floating Promo — compact persistent rail */
.shahaz-promotion-popup--template-side-floating-promo .shahaz-promotion-template__frame {
	background: #fff; border-radius: 12px 0 0 12px; box-shadow: -4px 4px 20px rgba(0,0,0,.15);
	padding: 14px 16px; max-width: 220px;
}

/* 11. Bottom Smart Promo — bottom sheet */
.shahaz-promotion-popup--template-bottom-smart-promo .shahaz-promotion-template__frame {
	background: #fff; border-radius: 16px 16px 0 0; padding: 18px 20px; box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}

/* 12. Full Screen Campaign — immersive */
.shahaz-promotion-popup--template-full-screen-campaign .shahaz-promotion-template__frame {
	background: linear-gradient(160deg, var(--shahaz-mpe-magenta-deep), var(--shahaz-mpe-ink));
	color: #fff; min-height: 100vh; width: 100vw; display: flex; flex-direction: column;
	justify-content: center; align-items: center; text-align: center; padding: 40px; border-radius: 0;
}

/* 13. Smart Recommendation Popup — grid focus */
.shahaz-promotion-popup--template-smart-recommendation .shahaz-promotion-template__frame {
	background: #fff; border-radius: 14px; padding: 22px;
}

/* 14. Product Spotlight — single product hero */
.shahaz-promotion-popup--template-product-spotlight .shahaz-promotion-template__frame {
	background: #fff; border-radius: 16px; padding: 22px;
}

/* 15. Flash Sale Burst — high energy */
.shahaz-promotion-popup--template-flash-sale-burst .shahaz-promotion-template__frame {
	background: linear-gradient(135deg, #ff4d4d, var(--shahaz-mpe-magenta));
	color: #fff; border-radius: 14px; padding: 24px; text-align: center;
}

/* 16. Three Product Showcase */
.shahaz-promotion-popup--template-three-product-showcase .shahaz-promotion-template__frame {
	background: #fff; border-radius: 14px; padding: 22px; max-width: 520px;
}

/* 17. Bundle Offer */
.shahaz-promotion-popup--template-bundle-offer .shahaz-promotion-template__frame {
	background: var(--shahaz-mpe-pink-soft); border-radius: 14px; padding: 22px;
}

/* 18. Product Collage */
.shahaz-promotion-popup--template-product-collage .shahaz-promotion-template__frame {
	background: #fff; border-radius: 14px; padding: 18px; max-width: 480px;
}

/* 19. Video Hero Popup */
.shahaz-promotion-popup--template-video-hero-popup .shahaz-promotion-template__frame {
	background: #000; color: #fff; border-radius: 14px; padding: 0; overflow: hidden; max-width: 520px;
}
.shahaz-promotion-popup--template-video-hero-popup .shahaz-promotion-template__copy { padding: 16px 18px; }

/* 20. Countdown Luxury Popup */
.shahaz-promotion-popup--template-countdown-luxury .shahaz-promotion-template__frame {
	background: linear-gradient(160deg, var(--shahaz-mpe-ink), var(--shahaz-mpe-magenta-deep));
	color: var(--shahaz-mpe-gold-soft); border: 1px solid var(--shahaz-mpe-gold);
	border-radius: 16px; padding: 28px; text-align: center;
}

/* Shared advanced-content blocks (used across several templates above) */
.shahaz-promotion-template__countdown {
	display: flex; gap: 10px; justify-content: center; margin: 14px 0;
}
.shahaz-promotion-template__countdown-unit {
	background: rgba(255,255,255,.15); border-radius: 8px; padding: 8px 12px; font-weight: 700; min-width: 40px; text-align: center;
}
.shahaz-promotion-template__products,
.shahaz-promotion-template__gallery {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 14px 0;
}
.shahaz-promotion-template__product {
	display: flex; flex-direction: column; text-decoration: none; color: inherit; text-align: center; gap: 4px;
}
.shahaz-promotion-template__product-image img,
.shahaz-promotion-template__gallery-item img { border-radius: 10px; width: 100%; height: auto; object-fit: cover; }
.shahaz-promotion-template__product-name { font-size: .85em; }
.shahaz-promotion-template__product-price { font-size: .85em; font-weight: 700; color: var(--shahaz-mpe-magenta); }
.shahaz-promotion-template__video video { width: 100%; display: block; }

/* Mobile: side-rail and bottom-sheet placements collapse safely */
@media (max-width: 767px) {
	.shahaz-promotion-popup--template-side-floating-promo .shahaz-promotion-template__frame { max-width: 92vw; border-radius: 12px; }
	.shahaz-promotion-popup--template-full-screen-campaign .shahaz-promotion-template__frame { padding: 24px; }
}