/* ==========================================================================
   SHAHAZ.com — Mobile bottom navigation (site-wide, phones + tablets) — ZIP-308 redesign
   Markup: footer-custom.php (#shahaz-cnav) · JS: assets/js/capsule-bottom-nav.js (sparkler burst + live cart count)
   Owner reference: a light pearl-pink capsule with a flowing orange → magenta → violet border and a soft pink glow;
   a gold arch with a gold knob rises over the middle; every button is a soft pink disc with a glossy colourful icon;
   the Cart is larger, raised into the arch and fully 3D (magenta basket, gold frame and wheels). Labels dark navy.
   No blur anywhere (the bar is solid). Bar height stays ~62px (other pages read --shahaz-mobile-nav-height).
   Motion: the border colours flow, the knob glows, the cart floats gently; reduced-motion stops all of it.
   ========================================================================== */
:root { --shahaz-mobile-nav-height: 64px; }

@media (min-width: 1024px) {
	.shahaz-cnav { display: none; }
}

.shahaz-cnav {
	--cn-ink: #1b1f4a;
	--cn-disc: radial-gradient(circle at 50% 40%, #ffeaf3 0%, #ffdbea 70%, #ffd2e5 100%);
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 6px; /* ZIP-309: owner — only ~6px between the bar and the bottom of the screen */
	z-index: 500;
	border-radius: 999px;
	background: #fff; /* ZIP-436 (owner): the bar is clean white — the round pink icon discs stay as they are */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset;
	isolation: isolate;
}
/* Flowing border: orange → magenta → violet → green → gold → orange, drawn as a ring (mask) so the bar itself stays solid. */
.shahaz-cnav::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: .8px; /* ZIP-348: owner — 0.8px border (was 1.6px) */
	border-radius: inherit;
	/* ZIP-316: green joins the flowing colours — orange → pink → magenta → violet → green → gold */
	background: conic-gradient(from var(--cn-angle, 0deg), #ff9a1f, #ff3d8f, #e0157a, #b02bd6, #1fbf6a, #7be495, #ffb02e, #ff9a1f);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: cnBorder 6s linear infinite;
	pointer-events: none;
}
@property --cn-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes cnBorder { to { --cn-angle: 360deg; } }

/* Gold arch with a knob over the middle (the Cart rises into it). */
.shahaz-cnav-arch {
	position: absolute;
	left: 50%;
	top: -21px;
	z-index: 2;
	width: 116px; /* ZIP-578 (owner): fixed size so the crest is a true circle that follows the raised Cart disc */
	height: 26px;
	transform: translateX(-50%);
	pointer-events: none;
}
.shahaz-cnav-arch svg { display: block; width: 100%; height: 100%; overflow: visible; }

.shahaz-cnav-list {
	position: relative;
	z-index: 3;
	display: flex;
	margin: 0;
	padding: 4px 6px 3px;
	list-style: none;
}
.shahaz-cnav-item { flex: 1; display: flex; min-width: 0; }
.shahaz-cnav-link {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 0;
	padding: 1px 0 2px;
	overflow: visible;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s cubic-bezier(.2, .9, .3, 1.3);
}
.shahaz-cnav-link:focus { outline: none !important; box-shadow: none !important; }
.shahaz-cnav-link:focus-visible .shahaz-cnav-icon-wrap { box-shadow: none; }
.shahaz-cnav-link:active { transform: scale(.92); }

.shahaz-cnav-icon-wrap {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cn-disc);
	transition: transform .25s ease, box-shadow .25s ease;
}
.shahaz-cnav-icon { display: block; width: 29px; height: 29px; }
.shahaz-cnav-icon svg { display: block; width: 100%; height: 100%; overflow: visible; filter: none; }
.shahaz-cnav-label {
	color: var(--cn-ink);
	font-family: Poppins, "Hind Siliguri", Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 600; /* ZIP-348: lighter; only the page you are on is bold */
	line-height: 1.1;
	letter-spacing: -.01em;
	white-space: nowrap;
}

/* Cart: bigger, raised into the arch, floating gently.
 * ZIP-578 (owner): a glossy gold disc with the owner's green cart (black tyres read clearly on gold), lifted a few px
 * more into the empty space under the gold arch so it stands above the other four; the label stays in line. */
.shahaz-cnav-link[data-nav-key="cart"] .shahaz-cnav-icon-wrap {
	width: 52px;
	height: 52px;
	margin-top: -16px; /* 52 + 2.4 border − 16 = the other discs' 38 px, so the Cart label stays in line */
	transform: translateY(-2px);
	border: 1.2px solid #e0157a;
	background: radial-gradient(circle at 50% 30%, #fff6c4 0%, #ffe26a 30%, #f7c325 62%, #d9970a 100%);
	box-shadow: none;
}
/* glass shine across the top half (a gradient, no blur) */
.shahaz-cnav-link[data-nav-key="cart"] .shahaz-cnav-icon-wrap::before {
	content: "";
	position: absolute;
	left: 12%;
	top: 4%;
	width: 76%;
	height: 44%;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .18) 100%);
	pointer-events: none;
}
.shahaz-cnav-link[data-nav-key="cart"] .shahaz-cnav-icon { position: relative; z-index: 1; width: 38px; height: 38px; animation: cnFloat 2.6s ease-in-out infinite; }
.shahaz-cnav-cartpic { display: block; width: 100%; height: 100%; background: url(../images/shahaz-cart-green.svg) no-repeat center / contain; }
.shahaz-cnav-link[data-nav-key="cart"] .shahaz-cnav-badge { background: #e0157a; color: #fff; }
@keyframes cnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

/* The page you are on: brighter disc with a thin gold ring, bold magenta label, full-weight icon. */
.shahaz-cnav-link-active .shahaz-cnav-icon-wrap { background: radial-gradient(circle at 50% 40%, #ffd9ea 0%, #ffc4dd 100%); box-shadow: 0 0 0 1.5px #f5b82a; transform: translateY(-1px); }
.shahaz-cnav-link-active .shahaz-cnav-label { color: #e0157a; font-weight: 800; }
.shahaz-cnav-link-active[data-nav-key="cart"] .shahaz-cnav-icon-wrap { border-color: #e0157a; background: radial-gradient(circle at 50% 30%, #fff8d0 0%, #ffe57a 30%, #f9c92e 62%, #dc9c0c 100%); box-shadow: 0 0 0 1px #e0157a; transform: translateY(-2px); } /* ZIP-578: the Cart page — a crisper magenta ring (solid, no blur) */
/* ZIP-348: the other icons are drawn thinner (the SVG stroke widths are set in footer-custom.php). */
.shahaz-cnav-link:not(.shahaz-cnav-link-active) .shahaz-cnav-icon [stroke-width="4.5"] { stroke-width: 3.2px; }
.shahaz-cnav-link:not(.shahaz-cnav-link-active) .shahaz-cnav-icon [stroke-width="6"] { stroke-width: 4.4px; }
.shahaz-cnav-link:not(.shahaz-cnav-link-active) .shahaz-cnav-icon [stroke-width="5"] { stroke-width: 4px; }
@media (hover: hover) and (pointer: fine) {
	.shahaz-cnav-link:hover .shahaz-cnav-icon-wrap { transform: translateY(-2px); }
	.shahaz-cnav-link[data-nav-key="cart"]:hover .shahaz-cnav-icon-wrap { transform: translateY(-4px); }
}

/* Cart count */
.shahaz-cnav-badge {
	position: absolute;
	top: -3px;
	right: -4px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border: 1.5px solid #fff;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd25a, #f0a312);
	color: #4a1530;
	font-size: 9.5px;
	font-weight: 900;
	line-height: 1;
	box-shadow: none;
}

/* ZIP-353: a tap presses the icon in, then a little sparkler bursts out of it like fireworks at night
 * (capsule-bottom-nav.js): bright core flash →  gold / pink / magenta streaks with light heads fly out all round and fall a little →
 * tiny twinkles. Colours are deep enough to read on the light capsule. Light comes from gradients only (no shadows, no blur). */
.shahaz-cnav-link.is-press .shahaz-cnav-icon { animation: cnPress .28s cubic-bezier(.3, .7, .3, 1.4); } /* ZIP-369: quicker — the page opens right away */
@keyframes cnPress { 0% { transform: scale(1); } 35% { transform: scale(.72); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.shahaz-cnav-link[data-nav-key="cart"].is-press .shahaz-cnav-icon { animation: cnPress .28s cubic-bezier(.3, .7, .3, 1.4), cnFloat 2.6s ease-in-out .28s infinite; }
.shahaz-cnav-sparks { position: absolute; left: 50%; top: 50%; z-index: 4; width: 0; height: 0; pointer-events: none; }
.shahaz-cnav-spark-core {
	position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, #fff6c8 30%, rgba(255, 196, 80, .55) 55%, rgba(255, 120, 190, 0) 72%);
	opacity: 0; animation: cnCore .3s ease-out forwards;
}
@keyframes cnCore { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.9); } }
/* a streak: a short line pointing outwards, head bright, tail fading */
.shahaz-cnav-spark {
	position: absolute; left: -1px; top: 0; width: 2.2px; height: 12px; border-radius: 2px;
	transform-origin: 50% 0; opacity: 0;
	background: linear-gradient(180deg, rgba(245, 168, 0, 0) 0%, #f5a800 50%, #ffe08a 100%);
	animation: cnSpark .45s cubic-bezier(.12, .7, .25, 1) forwards;
}
.shahaz-cnav-spark.is-pink { background: linear-gradient(180deg, rgba(255, 45, 149, 0) 0%, #ff2d95 50%, #ff9cce 100%); }
.shahaz-cnav-spark.is-rose { background: linear-gradient(180deg, rgba(224, 21, 122, 0) 0%, #e0157a 50%, #f7a8cf 100%); }
.shahaz-cnav-spark.is-amber { background: linear-gradient(180deg, rgba(211, 154, 18, 0) 0%, #d39a12 45%, #fff3c4 100%); }
@keyframes cnSpark {
	0% { opacity: 0; transform: rotate(var(--a)) translateY(2px) scaleY(.2); }
	12% { opacity: 1; }
	55% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--d) * .8)) scaleY(1); }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d)) translateX(0) scaleY(.15); }
}
/* twinkles: tiny four-point stars that blink once where the streaks ended, drifting down a little */
.shahaz-cnav-twinkle {
	position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; opacity: 0;
	background: #f5a800;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	animation: cnTwinkle .3s ease-out forwards;
}
.shahaz-cnav-twinkle.is-pink, .shahaz-cnav-twinkle.is-rose { background: #ff2d95; }
.shahaz-cnav-twinkle.is-amber { background: #d39a12; }
@keyframes cnTwinkle {
	0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); }
	40% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.15); }
	100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 6px)) scale(.4); }
}

/* ZIP-369: the moment a bar button is tapped a slim magenta → gold line runs along the top of the screen until the
 * next page is there, so the customer sees it is already opening (capsule-bottom-nav.js). */
.shahaz-nav-progress {
	position: fixed; left: 0; top: 0; z-index: 2147483600; width: 100%; height: 3px; pointer-events: none;
	transform-origin: 0 50%; transform: scaleX(0);
	background: linear-gradient(90deg, #e0157a, #ff5fae 60%, #d39a12);
	animation: cnLoad 2.4s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes cnLoad { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.92); } }

/* Room under the page content so the bar never covers it (phones / tablets only, like the bar). */
@media (max-width: 1023px) {
	body { padding-bottom: 94px; } /* ZIP-436: also clears the arch + star above the bar, so the last line (© SHAHAZ.com) never sits under it */
	/* ZIP-381 (owner): pages that hide the bar (policy centres…) keep no empty strip at the bottom */
	body:not(:has(.shahaz-cnav)) { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.shahaz-cnav::after,
	.shahaz-cnav-arch .cn-knob-svg,
	.shahaz-cnav-link[data-nav-key="cart"] .shahaz-cnav-icon,
	.shahaz-cnav-link.is-press .shahaz-cnav-icon { animation: none !important; }
	.shahaz-cnav-sparks { display: none; }
	.shahaz-nav-progress { animation: none; transform: scaleX(.6); }
}
.shahaz-cnav-arch .cn-knob-svg { position: absolute; left: 50%; top: -2.3px; width: 14px; height: 14px; transform: translateX(-50%); overflow: visible; } /* ZIP-578: the app's gold four-point sparkle (two-tone facets), same size and spot as in the app */
/* ZIP-578 (owner): the star turns round its centre all the time, like a slow fan — one turn every 4 s */
.shahaz-cnav-arch .cn-knob-svg { animation: cnStarSpin 4s linear infinite; }
@keyframes cnStarSpin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }