/* ==========================================================================
   SHAHAZ.COM — Floating Capsule Bottom Navigation (সাইট-ওয়াইড)
   ফাইল: assets/css/capsule-bottom-nav.css

   ⚠️ Prompt 15-এ এটা শুধু Shop পেজে ছিল, ব্যবহারকারীর নির্দেশে এখন
   সম্পূর্ণ সাইট-ওয়াইড — পুরনো mobile-navigation.css সম্পূর্ণ মুছে
   ফেলা হয়েছে (দুটো ভিন্ন ডিজাইন একসাথে রাখা হয়নি)। ⚠️ Prompt 17-এ
   ব্যাকগ্রাউন্ড হেডারের সাথে হুবহু মিলিয়ে দেওয়া হয়েছে এবং বাটন
   আগের ~২০% চিকন থেকে আবার একটু বড় করা হয়েছে (ব্যবহারকারীর নির্দেশ)।
   ========================================================================== */

@media (min-width: 1024px) {
	.shahaz-cnav {
		display: none; /* শুধু মোবাইল/ট্যাবলেটে — ডেস্কটপে হেডার/ফুটার নেভিগেশনই যথেষ্ট */
	}
}

/* ⚠️ বাগ-প্রতিরোধ: এই ভ্যারিয়েবল আগে mobile-navigation.css-এ
   সংজ্ঞায়িত ছিল (এখন মুছে ফেলা হয়েছে) — live-popup.css এখনো এটার
   উপর নির্ভর করে (positioning-এর জন্য, নিচে থেকে কতটা উপরে বসবে)।
   :root-এ রাখা হয়েছে (কোনো নির্দিষ্ট সিলেক্টরে স্কোপ করা হয়নি),
   যাতে অন্য যেকোনো ফাইল থেকে অ্যাক্সেস করা যায়। */
:root {
	--shahaz-mobile-nav-height: 64px;
}

.shahaz-cnav {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: env(safe-area-inset-bottom, 0px);
	z-index: 500;
	/* ⚠️ border-radius এমনিতেই background-কে নিজের সীমানার মধ্যে
	   ক্লিপ করে দেয়, overflow:hidden দরকার নেই — এবং সেটা দিলে
	   .shahaz-cnav-spark (যেটা top:-8px, নেভ-বারের উপরে বসে) কেটে
	   যেত, তাই ইচ্ছাকৃতভাবে overflow বাদ দেওয়া হয়েছে */
	/* ব্যবহারকারীর নির্দেশে হেডারের ব্যাকগ্রাউন্ডের সাথে হুবহু মিল
	   (assets/css/shahaz-header.css-এর .shahaz-header-এর একই
	   গ্র্যাডিয়েন্ট + অ্যানিমেশন — কোনো নতুন রং তৈরি করা হয়নি,
	   বিদ্যমানটাই পুনঃব্যবহার করা হয়েছে) — আগের turn-এ ভুল করে
	   গাঢ় মেরুন করে দেওয়া হয়েছিল, এখন আসল রংধনু গ্র্যাডিয়েন্ট
	   ফিরিয়ে আনা হলো। */
	background: linear-gradient(135deg, #FF7E29, #E65C00, #FFD700, #D4145A, #B23386, #6A11CB);
	background-size: 400% 400%;
	animation: shahaz-header-flow 12s ease infinite;
	/* ⚠️ Root-cause fix (২০২৬-০৮-১৭, "buttons disappear, touch brings
	   them back" বাগ — দেখুন shahaz-header.css-এর .shahaz-header-এর
	   একই কমেন্ট, সম্পূর্ণ ব্যাখ্যা সেখানে)। এখানে সমস্যাটা আরও প্রকট
	   হতে পারত কারণ .shahaz-cnav নিজেই position:fixed — fixed
	   এলিমেন্টের animated background রিপেইন্ট আরও ব্যয়বহুল
	   (স্ক্রলেও রিকম্পোজিট লাগে)। will-change দিয়ে আগেভাগে একটা
	   স্থায়ী compositing layer নিশ্চিত করা হলো। */
	will-change: background-position;
	border: 1.5px solid var(--shahaz-gold, #D4AF37);
	border-radius: 999px;
	box-shadow: 0 -2px 4px rgba(194,24,91,0.15), 0 10px 24px -8px rgba(194,24,91,0.35);
}

.shahaz-cnav-spark {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--shahaz-gold, #D4AF37);
	font-size: 11px;
	text-shadow: 0 0 6px rgba(212,175,55,0.8);
	pointer-events: none;
}

.shahaz-cnav-list {
	display: flex;
	list-style: none;
	margin: 0;
	/* Precision QA: reduce only the outer vertical breathing room by
	   2.5px above + 2.5px below = 5px total. Icon/text dimensions
	   and their internal relationship remain unchanged. */
	padding: 2.5px 4px;
	/* ⚠️ Root-cause fix (২০২৬-০৮-১৭): .shahaz-header > *-এর একই
	   কারণে — এই লিস্ট (আসল বাটন কনটেন্ট) কে অ্যানিমেটেড ব্যাকগ্রাউন্ড
	   লেয়ারের (উপরে) থেকে স্বাধীন, নিজস্ব GPU-composited লেয়ারে
	   promote করা হলো, যাতে ব্যাকগ্রাউন্ড রিপেইন্টে কোনো স্টল হলেও
	   বাটনগুলো দৃশ্যমান/স্থিতিশীল থাকে। */
	position: relative;
	transform: translateZ(0);
}

.shahaz-cnav-item {
	flex: 1;
	display: flex;
}

.shahaz-cnav-link {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-decoration: none !important;
	padding: 4px 2px;
	overflow: visible;
	transition: transform 0.25s cubic-bezier(.16,1,.3,1);
	-webkit-tap-highlight-color: transparent;
	/* ⚠️ বাগ-প্রতিরোধ: ক্লিক/ট্যাপ করলে Astra বা ব্রাউজারের ডিফল্ট
	   focus box/shadow দেখাচ্ছিল — সম্পূর্ণ বন্ধ করে আমাদের নিজস্ব
	   focus-visible স্টাইল (নিচে) ব্যবহার করা হচ্ছে */
	outline: none !important;
	box-shadow: none !important;
	background: none !important;
	border: none !important;
}

.shahaz-cnav-link:focus {
	outline: none !important;
	box-shadow: none !important;
}

.shahaz-cnav-link:focus-visible {
	outline: 2px solid var(--shahaz-gold, #D4AF37) !important;
	outline-offset: 2px;
	border-radius: 10px;
}

.shahaz-cnav-icon-wrap {
	position: relative;
	/* ব্যবহারকারীর নির্দেশে আবার একটু বড় (আগে 27px ছিল) */
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: rgba(255,255,255,0.85); /* গ্র্যাডিয়েন্ট ব্যাকগ্রাউন্ডে ভালো কনট্রাস্টের জন্য সাদা-ঘেঁষা (Inactive) */
	transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}

.shahaz-cnav-icon {
	/* ব্যবহারকারীর স্পষ্ট নির্দেশ: শুধু আইকনের গ্লিফ (SVG) একটু বড়
	   করতে হবে — পুরো নেভিগেশন/বৃত্তের (icon-wrap) সাইজ না। তাই
	   icon-wrap-এর সাইজ (32px) অপরিবর্তিত রেখে শুধু আইকনটা তার
	   ভেতরে আগের চেয়ে বেশি জায়গা নেবে (আগে 18px ছিল) */
	width: 21px;
	height: 21px;
	display: flex;
}

.shahaz-cnav-icon svg {
	width: 100%;
	height: 100%;
}

.shahaz-cnav-label {
	/* ব্যবহারকারীর নির্দেশে আবার একটু বড় (আগে 7.5px ছিল) */
	font-size: 8.5px;
	font-weight: 700;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.shahaz-cnav-link-active .shahaz-cnav-icon-wrap {
	background: linear-gradient(145deg, var(--shahaz-magenta, #C2185B), var(--shahaz-magenta-deep, #6B0F55)) !important;
	color: #FFFFFF !important; /* Active Icon White — অপরিবর্তিত, ব্যবহারকারীর নির্দেশে রং একই থাকবে */
	box-shadow: 0 4px 10px rgba(0,0,0,0.35);
	/* ⚠️ ব্যবহারকারীর স্পষ্ট নির্দেশে: উপরে সরে যাওয়া (translateY)
	   বাদ দেওয়া হয়েছে — এখন শুধু সামান্য বড় (scale) দেখাবে */
	transform: scale(1.12);
}

.shahaz-cnav-link-active .shahaz-cnav-label {
	color: #FFFFFF !important;
	font-weight: 800;
}

.shahaz-cnav-link:active {
	transform: scale(0.94);
}

/* ⚠️ বাগ-ফিক্স: আগে :active-এ শুধু scale হতো, কোনো কালার-অ্যানিমেশন
   ছিল না — Home বাটন যখন active page-এ থাকে তখন যে ম্যাজেন্টা
   কালার-ফিল দেখায়, বাকি বাটনে ট্যাপ করলে সেই একই রকম তাৎক্ষণিক
   ফিডব্যাক পাওয়া যেত না (পরের পেজ পুরোপুরি লোড না হওয়া পর্যন্ত কোনো
   কালার পরিবর্তন চোখে পড়ত না)। এখন :active অবস্থায় (ট্যাপ করে ধরে
   থাকা অবস্থায়) সব বাটনই Home-এর মতো একই ম্যাজেন্টা গ্র্যাডিয়েন্ট
   সংক্ষিপ্তভাবে দেখাবে (transition ইতিমধ্যে icon-wrap-এ সংজ্ঞায়িত,
   তাই মসৃণভাবে animate হবে), already-active বাটনে কোনো পরিবর্তন
   দরকার নেই তাই সেটাকে বাদ রাখা হয়েছে। */
.shahaz-cnav-link:not(.shahaz-cnav-link-active):active .shahaz-cnav-icon-wrap {
	background: linear-gradient(145deg, var(--shahaz-magenta, #C2185B), var(--shahaz-magenta-deep, #6B0F55)) !important;
	color: #FFFFFF !important;
}

.shahaz-cnav-link:not(.shahaz-cnav-link-active):active .shahaz-cnav-label {
	color: #FFFFFF !important;
}

.shahaz-cnav-badge {
	position: absolute;
	top: -1px;
	right: -1px;
	min-width: 13px;
	height: 13px;
	padding: 0 2px;
	border-radius: 999px;
	background: var(--shahaz-gold-deep, #8A6D1F);
	color: #fff;
	font-size: 7.5px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #fff;
}

/* ---------- Touch Ripple ---------- */
.shahaz-cnav-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	transform: scale(0);
	animation: shahaz-cnav-ripple-anim 0.6s ease-out;
	pointer-events: none;
}

@keyframes shahaz-cnav-ripple-anim {
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

/* Fixed bottom nav-এর জন্য পেজের নিচে বাড়তি জায়গা, যাতে কনটেন্ট
   ঢাকা না পড়ে (মোবাইলেই শুধু প্রযোজ্য, কারণ nav নিজেও মোবাইলেই) */
@media (max-width: 1023px) {
	body {
		padding-bottom: 68px;
	}
}


/* ==========================================================================
   SHAHAZ.COM — GLASSY MOBILE CAPSULE NAV — FINAL VISUAL OVERRIDE
   IMPORTANT: additive override only. Existing navigation structure, routes,
   cart badge logic, ripple JS, active-state logic and all previous CSS
   remain intact. Nothing above is removed or rewritten.
   ========================================================================== */

@media (max-width: 1023px) {
	.shahaz-cnav {
		/* Clear luxury glass: transparent enough to see the page behind it,
		   while retaining a clean readable surface. */
		background:
			linear-gradient(
				135deg,
				rgba(255,255,255,0.58) 0%,
				rgba(255,255,255,0.30) 42%,
				rgba(255,255,255,0.46) 100%
			) !important;
		background-size: 100% 100% !important;
		animation: shahaz-glass-nav-float 7s ease-in-out infinite !important;
		backdrop-filter: blur(7px) saturate(145%) !important;
		-webkit-backdrop-filter: blur(7px) saturate(145%) !important;
		border: 1px solid rgba(255,255,255,0.88) !important;
		box-shadow:
			0 1px 0 rgba(255,255,255,0.95) inset,
			0 -1px 0 rgba(255,255,255,0.45) inset,
			0 8px 26px rgba(80,20,65,0.18),
			0 2px 8px rgba(255,255,255,0.30) !important;
		isolation: isolate;
	}

	/* Fine diamond-like glass highlight; intentionally subtle and clear. */
	.shahaz-cnav::before {
		content: "";
		position: absolute;
		inset: 1px;
		border-radius: inherit;
		background:
			linear-gradient(
				125deg,
				rgba(255,255,255,0.52) 0%,
				rgba(255,255,255,0.08) 28%,
				transparent 52%,
				rgba(255,255,255,0.20) 100%
			);
		pointer-events: none;
		z-index: -1;
	}

	/* Animated luxury spectrum border: 1.5px, 60+ distinct color stops.
	 * The border is rendered as a masked pseudo-element so the existing
	 * glass surface remains intact and no layout dimensions change.
	 */
	.shahaz-cnav::after {
		content: "";
		position: absolute;
		inset: -1.5px;
		border-radius: inherit;
		padding: 1.5px;
		background: conic-gradient(
			from var(--shahaz-cnav-border-angle, 0deg),
			#FFD700 0deg, #FFB000 6deg, #FF8A00 12deg, #FF5A00 18deg,
			#FF2D00 24deg, #FF003C 30deg, #FF005C 36deg, #FF007F 42deg,
			#FF1493 48deg, #F000A8 54deg, #D900C8 60deg, #C000E8 66deg,
			#A000FF 72deg, #7A2CFF 78deg, #5A00FF 84deg, #3D3DFF 90deg,
			#245CFF 96deg, #008CFF 102deg, #00B7FF 108deg, #00D5FF 114deg,
			#00E5FF 120deg, #00F0D0 126deg, #00F5A0 132deg, #00E879 138deg,
			#00D94F 144deg, #22C55E 150deg, #58D68D 156deg, #8BE28B 162deg,
			#B7E34A 168deg, #D4E600 174deg, #E6F000 180deg, #F5E600 186deg,
			#FFF000 192deg, #FFE100 198deg, #FFD000 204deg, #FFC000 210deg,
			#FFAA00 216deg, #FF9500 222deg, #FF7A00 228deg, #FF6200 234deg,
			#FF4800 240deg, #FF2440 246deg, #F9005B 252deg, #E90078 258deg,
			#D40096 264deg, #BE00B5 270deg, #A600D4 276deg, #8C00EA 282deg,
			#7200FF 288deg, #5D20FF 294deg, #493BFF 300deg, #3157FF 306deg,
			#1678FF 312deg, #0098FF 318deg, #00B8FF 324deg, #00D0F5 330deg,
			#00DCC0 336deg, #00E7A0 342deg, #00D77A 348deg, #00C95A 354deg,
			#FFD700 360deg
		);
		-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: shahaz-cnav-spectrum-border 9s linear infinite;
		pointer-events: none;
		z-index: 1;
	}

	.shahaz-cnav-list {
		z-index: 2;
	}

	.shahaz-cnav-link {
		-webkit-tap-highlight-color: transparent !important;
		tap-highlight-color: transparent !important;
	}

	/* Default icons are Hot Magenta. Labels remain dark enough to stay
	   legible on transparent glass. */
	.shahaz-cnav-icon-wrap {
		color: var(--shahaz-magenta, #C2185B) !important;
		background: rgba(255,255,255,0.18) !important;
		border: 1px solid rgba(255,255,255,0.45);
		box-shadow:
			0 1px 3px rgba(80,20,65,0.10),
			0 1px 0 rgba(255,255,255,0.75) inset;
	}

	.shahaz-cnav-icon {
		color: var(--shahaz-magenta, #C2185B) !important;
		filter: drop-shadow(0 1px 2px rgba(194,24,91,0.18));
	}

	.shahaz-cnav-label {
		color: #4a1839 !important;
		text-shadow: 0 1px 0 rgba(255,255,255,0.82) !important;
	}

	/* Active item: Hot Magenta with a luxury-gold edge, without making the
	   entire glass navigation bar opaque. */
	.shahaz-cnav-link-active .shahaz-cnav-icon-wrap {
		background: linear-gradient(
			145deg,
			var(--shahaz-magenta, #C2185B),
			var(--shahaz-magenta-deep, #6B0F55)
		) !important;
		color: #fff !important;
		border: 1px solid var(--shahaz-gold, #D4AF37) !important;
		box-shadow:
			0 3px 10px rgba(194,24,91,0.28),
			0 1px 0 rgba(255,255,255,0.48) inset !important;
	}

	.shahaz-cnav-link-active .shahaz-cnav-icon {
		color: #fff !important;
		filter: none;
	}

	.shahaz-cnav-link-active .shahaz-cnav-label {
		color: var(--shahaz-magenta, #C2185B) !important;
		text-shadow: 0 1px 0 rgba(255,255,255,0.92) !important;
	}

	/* Gold hover animation on devices that genuinely support hover. */
	@media (hover: hover) and (pointer: fine) {
		.shahaz-cnav-link:hover .shahaz-cnav-icon-wrap {
			color: var(--shahaz-gold, #D4AF37) !important;
			border-color: var(--shahaz-gold, #D4AF37) !important;
			background: rgba(255,255,255,0.52) !important;
			transform: translateY(-2px) scale(1.06);
			box-shadow:
				0 5px 12px rgba(212,175,55,0.20),
				0 1px 0 rgba(255,255,255,0.90) inset;
		}

		.shahaz-cnav-link:hover .shahaz-cnav-icon {
			color: var(--shahaz-gold, #D4AF37) !important;
			filter: drop-shadow(0 0 4px rgba(212,175,55,0.34));
		}

		.shahaz-cnav-link:hover .shahaz-cnav-label {
			color: var(--shahaz-gold, #8A6D1F) !important;
		}

		.shahaz-cnav-link-active:hover .shahaz-cnav-icon-wrap {
			color: #fff !important;
			background: linear-gradient(
				145deg,
				var(--shahaz-magenta, #C2185B),
				var(--shahaz-magenta-deep, #6B0F55)
			) !important;
		}

		.shahaz-cnav-link-active:hover .shahaz-cnav-icon {
			color: #fff !important;
		}
	}

	/* Touch feedback stays premium and never creates a browser-blue box. */
	.shahaz-cnav-link:active,
	.shahaz-cnav-link:focus,
	.shahaz-cnav-link:focus-visible {
		-webkit-tap-highlight-color: transparent !important;
	}

	.shahaz-cnav-link:focus {
		outline: none !important;
		box-shadow: none !important;
	}

	.shahaz-cnav-link:focus-visible {
		outline: 1px solid var(--shahaz-gold, #D4AF37) !important;
		outline-offset: 1px;
	}

	/* The existing ripple remains; recolor it to a restrained gold glass
	   sparkle rather than a bright white flash. */
	.shahaz-cnav-ripple {
		background: rgba(212,175,55,0.22) !important;
		box-shadow: 0 0 12px rgba(212,175,55,0.18);
	}

	.shahaz-cnav-spark {
		color: var(--shahaz-gold, #D4AF37) !important;
		text-shadow:
			0 0 5px rgba(212,175,55,0.45),
			0 1px 0 rgba(255,255,255,0.90);
	}
}

@keyframes shahaz-cnav-spectrum-border {
	to {
		--shahaz-cnav-border-angle: 360deg;
	}
}

@property --shahaz-cnav-border-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes shahaz-glass-nav-float {
	0%, 100% {
		box-shadow:
			0 1px 0 rgba(255,255,255,0.95) inset,
			0 -1px 0 rgba(255,255,255,0.45) inset,
			0 8px 26px rgba(80,20,65,0.18),
			0 2px 8px rgba(255,255,255,0.30);
	}
	50% {
		box-shadow:
			0 1px 0 rgba(255,255,255,1) inset,
			0 -1px 0 rgba(255,255,255,0.50) inset,
			0 10px 30px rgba(80,20,65,0.20),
			0 3px 10px rgba(255,255,255,0.36);
	}
}

@media (prefers-reduced-motion: reduce) {
	.shahaz-cnav {
		animation: none !important;
	}
	.shahaz-cnav::after {
		animation: none !important;
	}
}


/* ==========================================================================
 * ZIP-434 -> ZIP-435 FINAL MOBILE FOOTER POSITION
 * The previous rule used bottom: env(safe-area-inset-bottom), which can make
 * the capsule visibly float tens of pixels above the viewport on WebViews that
 * expose a non-zero/over-reported bottom inset. The approved visual contract is
 * a 6px viewport gap. The page/content reserves its own clearance separately.
 * ========================================================================== */
@media (max-width:1023px){
  .shahaz-cnav{
    position:fixed !important;
    top:auto !important;
    right:12px !important;
    bottom:6px !important;
    left:12px !important;
    margin:0 !important;
    transform:none !important;
  }
}