/* ==========================================================================
   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;
	/* Precision QA: move the complete capsule 5px lower while preserving
	   the existing safe-area inset behavior. */
	bottom: calc(3px + 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;
	}
}