/*
 * Diwali theme (loaded only while isDiwaliThemeActive()).
 * CLS-safe: decor is absolutely positioned inside existing padding, no box sizes change.
 * LCP-safe: no images/fonts, all art is inline SVG data URIs, no JS.
 */
:root {
	--dw-maroon: #6b0f1a;
	--dw-maroon-dark: #4a0a12;
	--dw-gold: #f4b400;
	--dw-gold-soft: #ffd27a;
	--dw-cream: #fff8ee;
	--dw-toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Cpath d='M0 1.2h36' stroke='%23c8901a' stroke-width='1.2'/%3E%3Ccircle cx='9' cy='6' r='4.3' fill='%23ff9f1c'/%3E%3Ccircle cx='9' cy='6' r='1.9' fill='%23e35d0a'/%3E%3Cpath d='M27 1.6c2.6 2.2 2.6 6.4 0 9.6-2.6-3.2-2.6-7.4 0-9.6z' fill='%232e8b3e'/%3E%3C/svg%3E");
	--dw-diya: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='45%25' r='50%25'%3E%3Cstop offset='0' stop-color='%23ffd27a' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23ffd27a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='9' r='9' fill='url(%23g)'/%3E%3Cpath d='M14 2.5c2.5 3 2.7 5.8 0 8.9-2.7-3.1-2.5-5.9 0-8.9z' fill='%23ff9f1c'/%3E%3Cpath d='M14 6.4c1 1.4 1 2.9 0 4.1-1-1.2-1-2.7 0-4.1z' fill='%23ffe38a'/%3E%3Cpath d='M3 15h22c-.8 5-5.2 9-11 9S3.8 20 3 15z' fill='%23b5331e'/%3E%3Cpath d='M3 15h22' stroke='%23f4b400' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8 19.5h12' stroke='%23f4b400' stroke-width='1' stroke-dasharray='1.5 2'/%3E%3C/svg%3E");
	--dw-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23ffd27a'/%3E%3C/svg%3E");
	--dw-rangoli: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c8901a' stroke-width='1.4'%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Ccircle cx='60' cy='60' r='50' stroke-dasharray='3 5'/%3E%3Cg id='p'%3E%3Cpath d='M60 34c8 8 8 18 0 26-8-8-8-18 0-26z'/%3E%3Cpath d='M60 86c8-8 8-18 0-26-8 8-8 18 0 26z'/%3E%3Cpath d='M34 60c8-8 18-8 26 0-8 8-18 8-26 0z'/%3E%3Cpath d='M86 60c-8-8-18-8-26 0 8 8 18 8 26 0z'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(45 60 60)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- PDP main CTA ---------- */
/* Same box as .fill_btn/.tgAnimatedBtn; only paint changes, so no layout shift */
.diwali-cta {
	background: linear-gradient(90deg, #b3141c 0%, #d32525 50%, #b3141c 100%);
	text-shadow: 0 1px 1px #00000040
}

.diwali-cta:hover {
	background: linear-gradient(90deg, var(--dw-maroon-dark) 0%, var(--dw-maroon) 50%, var(--dw-maroon-dark) 100%)
}

/* Gold-tinted version of the existing tgAnimatedBtn / ctaAnimationBtn (mobile sticky CTA) shimmer */
.diwali-cta.tgAnimatedBtn::before,
.diwali-cta.ctaAnimationBtn::before {
	background: linear-gradient(90deg, rgba(255, 210, 122, .35) 0, rgba(255, 210, 122, .55) 38px, rgba(255, 210, 122, 0) 38px, rgba(255, 210, 122, 0) 45px, rgba(255, 210, 122, .55) 45px, rgba(255, 210, 122, .55) 60px)
}

/* Gold inner border + diya on the left + sparkles on the right */
.diwali-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1.5px var(--dw-gold);
	background:
		var(--dw-diya) no-repeat 10px 50% / 24px 24px,
		var(--dw-sparkle) no-repeat right 14px top 6px / 10px 10px,
		var(--dw-sparkle) no-repeat right 30px bottom 6px / 7px 7px;
	pointer-events: none
}

@media (prefers-reduced-motion: no-preference) {
	.diwali-cta::after {
		animation: diwali-twinkle 1.6s ease-in-out infinite alternate
	}
}

@keyframes diwali-twinkle {
	from {
		opacity: .7
	}

	to {
		opacity: 1
	}
}

/* ---------- Lead form + thank-you modals (components/enqform) ---------- */
/* Selectors carry .new_product_popup to beat the inline <style> in enqform.blade.php */
.new_product_popup.diwali-modal .modal-content {
	background: linear-gradient(180deg, #fff3df 0, #fff 140px);
	box-shadow: inset 0 0 0 1px var(--dw-gold-soft), 0 10px 30px #00000033
}

.new_product_popup.diwali-modal .modal-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	background: var(--dw-toran) repeat-x 0 0 / 36px 12px;
	pointer-events: none
}

.new_product_popup.diwali-modal .modal-content .modal-header .modal-title::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	vertical-align: -4px;
	background: var(--dw-diya) no-repeat center / contain
}

.new_product_popup.diwali-modal .modal-content .modal-body .new_popup_btn {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #b3141c 0%, #d32525 50%, #b3141c 100%);
	box-shadow: inset 0 0 0 1.5px var(--dw-gold);
	text-shadow: 0 1px 1px #00000040
}

.new_product_popup.diwali-modal .modal-content .modal-body .new_popup_btn:hover {
	background: linear-gradient(90deg, var(--dw-maroon-dark) 0%, var(--dw-maroon) 50%, var(--dw-maroon-dark) 100%)
}

.new_product_popup.diwali-modal .modal-content .modal-body .new_popup_btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 210, 122, .35) 0, rgba(255, 210, 122, .55) 38px, rgba(255, 210, 122, 0) 38px, rgba(255, 210, 122, 0) 45px, rgba(255, 210, 122, .55) 45px, rgba(255, 210, 122, .55) 60px);
	transform: skewX(-25deg) translateX(-100%);
	pointer-events: none
}

.new_product_popup.diwali-modal .modal-content .modal-body .new_popup_btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		var(--dw-diya) no-repeat 10px 50% / 24px 24px,
		var(--dw-sparkle) no-repeat right 14px top 6px / 10px 10px,
		var(--dw-sparkle) no-repeat right 30px bottom 6px / 7px 7px;
	pointer-events: none
}

@media (prefers-reduced-motion: no-preference) {
	.new_product_popup.diwali-modal .modal-content .modal-body .new_popup_btn::before {
		animation: diwali-shimmer 1.6s infinite linear
	}

	.new_product_popup.diwali-modal .modal-content .modal-body .new_popup_btn::after {
		animation: diwali-twinkle 1.6s ease-in-out infinite alternate
	}
}

@keyframes diwali-shimmer {
	from {
		transform: skewX(-25deg) translateX(-100%)
	}

	to {
		transform: skewX(-25deg) translateX(900%)
	}
}

/* Thank-you modal has no body padding, so leave room for the toran */
.new_product_popup.new_thanks.diwali-modal .modal-content {
	padding-top: 14px
}

.diwali-wish {
	margin: 0;
	padding: 0 16px 22px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--dw-maroon)
}

.diwali-wish::before,
.diwali-wish::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 8px;
	vertical-align: -4px;
	background: var(--dw-diya) no-repeat center / contain
}

/* ---------- Header: top bar (logo + search) ---------- */
.diwali-theme.head-revamp {
	border-bottom-color: var(--dw-gold-soft)
}

.diwali-theme .head-top {
	background: linear-gradient(180deg, #fff3df 0%, var(--dw-cream) 100%)
}

/* Same 1px width as bootstrap .border-bottom, only the colour changes */
.diwali-theme .head-top.border-bottom {
	border-bottom-color: var(--dw-gold-soft) !important
}

/* Toran hangs from the top edge, inside head-top's 12px top padding */
.diwali-toran {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	background: var(--dw-toran) repeat-x 0 0 / 36px 12px;
	pointer-events: none
}

/* Diya beside the desktop logo */
.diwali-theme .head-logo {
	position: relative
}

.diwali-theme .head-logo::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -38px;
	width: 28px;
	height: 28px;
	margin-top: -16px;
	background: var(--dw-diya) no-repeat center / contain;
	pointer-events: none
}

/* ---------- Header: desktop nav row ---------- */
.diwali-theme .head-bottom {
	position: relative;
	background: linear-gradient(90deg, var(--dw-maroon-dark) 0%, var(--dw-maroon) 50%, var(--dw-maroon-dark) 100%);
	border-bottom-color: var(--dw-maroon-dark);
	box-shadow: inset 0 -2px 0 var(--dw-gold), 0 4px 5.5px 0 #00000024
}

.diwali-theme .head-bottom .navbar.bg-white {
	background-color: transparent !important
}

.diwali-theme .desktop-mega-menu .nav-item span.dropdown-toggle,
.diwali-theme .desktop-mega-menu .nav-item.no-menu-dropdown a.nav-link {
	color: #fff
}

.diwali-theme .desktop-mega-menu .nav-item span.dropdown-toggle:hover,
.diwali-theme .desktop-mega-menu .nav-item.no-menu-dropdown a.nav-link:hover {
	color: var(--dw-gold-soft)
}

.diwali-theme .desktop-mega-menu .nav-item span.dropdown-toggle.active::before,
.diwali-theme .no-menu-dropdown .nav-link:hover:before {
	background: var(--dw-gold)
}

/* Diyas at both ends of the nav row, only where there is free gutter */
@media (min-width: 1400px) {
	.diwali-theme .head-bottom::before,
	.diwali-theme .head-bottom::after {
		content: "";
		position: absolute;
		bottom: 10px;
		left: 24px;
		width: 28px;
		height: 28px;
		background: var(--dw-diya) no-repeat center / contain;
		pointer-events: none
	}

	.diwali-theme .head-bottom::after {
		left: auto;
		right: 24px
	}
}

/* Soft flame breathing: compositor-only properties */
@media (prefers-reduced-motion: no-preference) {
	.diwali-theme .head-logo::after,
	.diwali-theme .head-bottom::before,
	.diwali-theme .head-bottom::after {
		animation: diwali-flicker 2.4s ease-in-out infinite alternate
	}
}

@keyframes diwali-flicker {
	from {
		opacity: .85;
		transform: scale(.96)
	}

	to {
		opacity: 1;
		transform: scale(1.04)
	}
}

/* ---------- Mobile (header stays 48px) ---------- */
@media (max-width: 991px) {
	.diwali-toran {
		height: 11px;
		background-size: 33px 11px
	}

	.diwali-theme .head-logo::after {
		display: none
	}

	.diwali-theme .mobile-search {
		background-color: #fff;
		border-color: var(--dw-gold-soft)
	}
}

.diwali-theme .sidebar-navigation-mobile .mobile-logo {
	background: var(--dw-cream);
	border-bottom: 1px solid var(--dw-gold-soft)
}

/* ---------- Footer ---------- */
.diwali-theme-footer {
	position: relative;
	background: var(--dw-cream)
}

.diwali-theme-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	background: var(--dw-toran) repeat-x 0 0 / 36px 12px;
	pointer-events: none
}

@media (min-width: 769px) {
	.diwali-theme-footer::after {
		content: "";
		position: absolute;
		right: 24px;
		bottom: 24px;
		width: 120px;
		height: 120px;
		background: var(--dw-rangoli) no-repeat center / contain;
		opacity: .25;
		pointer-events: none
	}
}

.diwali-theme-footer .container {
	position: relative;
	z-index: 1
}