/* =========================================================
   Savings Popup — Immersive Coin Drop Animation
   ========================================================= */

body.wsp-popup-open {
	overflow: hidden;
}

.wsp-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wsp-popup-overlay.wsp-active {
	opacity: 1;
	visibility: visible;
}

.wsp-popup-box {
	position: relative;
	background: linear-gradient(160deg, #ffffff 0%, #fef9f0 100%);
	border-radius: 22px;
	padding: 48px 36px 36px;
	width: 92%;
	max-width: 380px;
	text-align: center;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	transform: scale(0.6) translateY(40px);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
	overflow: hidden;
}

.wsp-popup-overlay.wsp-active .wsp-popup-box {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.wsp-popup-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	color: #475569;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.wsp-popup-close:hover {
	background: rgba(0, 0, 0, 0.12);
}

/* ---------- Coin drop stage ---------- */

.wsp-coin-stage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.wsp-coin {
	position: absolute;
	top: -60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff6d8, #ffd54a 55%, #e6a817 100%);
	color: #8a5a00;
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 4px 10px rgba(180, 130, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.4) inset;
	opacity: 0;
}

.wsp-popup-overlay.wsp-active .wsp-coin {
	animation: wsp-coin-fall 1.1s ease-in forwards;
}

.wsp-coin-1 { left: 12%; animation-delay: 0.05s !important; }
.wsp-coin-2 { left: 30%; animation-delay: 0.18s !important; width: 26px; height: 26px; font-size: 13px; }
.wsp-coin-3 { left: 50%; animation-delay: 0s !important; width: 40px; height: 40px; font-size: 19px; }
.wsp-coin-4 { left: 70%; animation-delay: 0.22s !important; width: 26px; height: 26px; font-size: 13px; }
.wsp-coin-5 { left: 86%; animation-delay: 0.1s !important; }

@keyframes wsp-coin-fall {
	0% {
		opacity: 0;
		top: -60px;
		transform: rotate(0deg);
	}
	8% {
		opacity: 1;
	}
	70% {
		opacity: 1;
		top: 60%;
		transform: rotate(280deg);
	}
	100% {
		opacity: 0;
		top: 78%;
		transform: rotate(360deg);
	}
}

/* ---------- Radial burst behind text ---------- */

.wsp-popup-burst {
	position: absolute;
	top: 38%;
	left: 50%;
	width: 260px;
	height: 260px;
	margin-left: -130px;
	margin-top: -130px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 213, 74, 0.55) 0%, rgba(255, 213, 74, 0) 70%);
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
}

.wsp-popup-overlay.wsp-active .wsp-popup-burst {
	animation: wsp-burst-pop 0.7s ease-out forwards;
}

@keyframes wsp-burst-pop {
	0% { transform: scale(0); opacity: 0; }
	40% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 0.7; }
}

/* ---------- Text content ---------- */

.wsp-popup-title {
	position: relative;
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: #1e293b;
	opacity: 0;
	transform: translateY(10px);
}

.wsp-popup-overlay.wsp-active .wsp-popup-title {
	animation: wsp-fade-up 0.5s ease 0.35s forwards;
}

.wsp-popup-savings {
	position: relative;
	margin: 4px 0 0;
	font-size: 17px;
	color: #475569;
	font-weight: 500;
	opacity: 0;
	transform: translateY(10px);
}

.wsp-popup-overlay.wsp-active .wsp-popup-savings {
	animation: wsp-fade-up 0.5s ease 0.5s forwards;
}

.wsp-popup-amount {
	display: inline-block;
	font-size: 30px;
	font-weight: 800;
	color: #d97706;
	margin-left: 6px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wsp-popup-sub {
	position: relative;
	margin: 2px 0 22px;
	font-size: 13px;
	color: #94a3b8;
	opacity: 0;
	transform: translateY(10px);
}

.wsp-popup-overlay.wsp-active .wsp-popup-sub {
	animation: wsp-fade-up 0.5s ease 0.6s forwards;
}

.wsp-popup-cta {
	position: relative;
	border: none;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 36px;
	border-radius: 30px;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(217, 119, 6, 0.35);
	opacity: 0;
	transform: translateY(10px);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wsp-popup-overlay.wsp-active .wsp-popup-cta {
	animation: wsp-fade-up 0.5s ease 0.72s forwards;
}

.wsp-popup-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 24px rgba(217, 119, 6, 0.45);
}

@keyframes wsp-fade-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Highlighted "unlocked" sale price on product page ---------- */

.wsp-sale-revealed .price {
	font-size: 1.25em !important;
}

.wsp-sale-revealed .price ins {
	color: #d97706;
	font-weight: 800;
	font-size: 1.15em;
	text-decoration: none;
}

.wsp-sale-revealed .price del {
	opacity: 0.65;
}

.wsp-price-pulse {
	animation: wsp-price-pulse-anim 0.6s ease;
}

@keyframes wsp-price-pulse-anim {
	0% { transform: scale(1); }
	35% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* ---------- "You saved ₹X on this combo" inline message (replaces stock text) ---------- */

p.stock.wsp-savings-availability {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #15803d;
	font-weight: 700;
	font-size: 0.95em;
	background: rgba(34, 197, 94, 0.1);
	padding: 6px 12px;
	border-radius: 20px;
	opacity: 0;
	transform: translateY(6px);
}

p.stock.wsp-savings-availability.wsp-fade-in {
	animation: wsp-fade-up 0.45s ease forwards;
}

@media (max-width: 480px) {
	.wsp-popup-box {
		padding: 40px 24px 28px;
	}
	.wsp-popup-title {
		font-size: 19px;
	}
	.wsp-popup-amount {
		font-size: 26px;
	}
}