/* ==========================================================================
   Mobile Nav v2 — bottom navigation, hamburger offcanvas, safe-area handling
   Loaded after style.css; isolated file so it can be rolled back by removing
   its <link> tag in resources/views/frontend.blade.php without touching the
   main 19k-line stylesheet. Uses the existing data-theme CSS variables and
   Remix Icon font already used across the site — no new icon library.
   ========================================================================== */

:root {
	--mnv-accent: var(--dx-accent, #0771d2);
	--mnv-accent-2: var(--dx-accent-2, #34d399);
	--mnv-content-height: 64px;
	--mnv-fab-overhang: 28px;
}

/* Light-only chrome tokens for the hamburger/offcanvas — bridge onto the
   existing global --background-color-N / --text-color-N variables (style.css)
   rather than a parallel token system. */
:root {
	--mnv-surface: var(--dx-drawer);
	--mnv-surface-elevated: var(--dx-surface);
	--mnv-text: var(--dx-text);
	--mnv-text-muted: var(--dx-muted);
	--mnv-border: var(--dx-border);
	--mnv-hairline: var(--dx-border);
	--mnv-chip-bg: var(--dx-surface-2);
	--mnv-quick-chip-bg: var(--dx-surface-2);
	--mnv-quick-border: var(--dx-border);
	--mnv-icon-chip-bg: var(--dx-active);
	--mnv-icon-fg: var(--dx-icon);
	--mnv-danger-chip-bg: color-mix(in srgb, var(--dx-danger) 14%, transparent);
	--mnv-danger-fg: var(--dx-danger);
	--mnv-static-link-fg: var(--dx-text);
	--mnv-backdrop-tint: rgba(15, 23, 42, .35);
	--mnv-wa-support-bg: linear-gradient(135deg, rgba(37, 211, 102, .16), rgba(18, 140, 126, .06));
	--mnv-wa-channel-bg: linear-gradient(135deg, rgba(49, 92, 255, .10), rgba(37, 211, 102, .08));
	--mnv-wa-border: rgba(18, 140, 126, .24);
	--mnv-wa-channel-border: rgba(49, 92, 255, .20);
	--mnv-wa-icon-bg: #25d366;
	--mnv-wa-icon-fg: #ffffff;
	--mnv-wa-title: var(--dx-text-strong, #0b1220);
	--mnv-wa-subtitle: var(--dx-muted, #54627a);
	--mnv-wa-shadow: 0 8px 22px rgba(16, 24, 40, .10);
}

/* ---------------------------------------------------------------------- */
/* Bottom navigation                                                       */
/* ---------------------------------------------------------------------- */

.mobilbottommenu {
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobilbottommenu ul li a {
	-webkit-tap-highlight-color: transparent;
}

.mobilbottommenu ul li a i {
	font-size: 22px;
	line-height: 1;
	transition: transform .12s ease, background-color .2s ease;
}

.mobilbottommenu ul li:not(.mnv-fab-item) a:active i {
	transform: scale(0.88);
}

/* Guests / empty carts must not show a meaningless blank notification dot. */
.mobilbottommenu ul li .st:empty {
	display: none;
}

.mobilbottommenu ul li a span {
	margin-top: 2px;
}

/* Server-rendered active state (request()->routeIs() in Blade) for the
   regular (non-FAB) items: soft gradient pill behind the icon. */
.mobilbottommenu ul li.mnv-active a {
	color: var(--mnv-accent);
}

.mobilbottommenu ul li.mnv-active a i {
	background: linear-gradient(135deg, rgba(7, 113, 210, .16), rgba(52, 211, 153, .16));
	border-radius: 12px;
	padding: 3px 9px;
}

.mobilbottommenu ul li.mnv-active a span {
	font-weight: 700;
}

/* "Ana səhifə" house icon — custom vector (not the Remix Icon font) so it
   can carry its own weight/proportions independent of the icon font's
   metrics, matching the site's blue/light-blue language. Sits in the same
   slot .mobilbottommenu ul li a i normally would, so the shared active-pill
   rule above (.mnv-active a i) doesn't apply to it and needs its own copy. */
.mnv-home-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: 24px;
	height: 24px;
	line-height: 1;
	transition: transform .12s ease, width .15s ease, height .15s ease;
}

.mnv-home-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.mobilbottommenu ul li:not(.mnv-fab-item) a:active .mnv-home-icon {
	transform: scale(0.88);
}

.mobilbottommenu ul li.mnv-active a .mnv-home-icon {
	width: 26px;
	height: 26px;
	background: linear-gradient(135deg, rgba(7, 113, 210, .16), rgba(52, 211, 153, .16));
	border-radius: 12px;
	padding: 3px 9px;
}

/* Ana səhifə is the only bottom-nav item without a Remix Icon glyph (it uses
   .mnv-home-icon), and the only one this pass targets. Both the icon pill
   above and the whole-row active background below (style.css:20072, which
   applies its blue fill to every .mnv-active item generically) are
   neutralised here — but scoped to :first-child only — so Balans artır /
   Səbət / Hesabım keep their existing active styling untouched. */
.mobilbottommenu ul li:first-child.mnv-active a .mnv-home-icon {
	background: none;
	box-shadow: none;
}

.mobilbottommenu ul li:first-child.mnv-active a {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Root cause of the active-state horizontal shift: .mnv-home-icon declares an
   explicit width (24px inactive / 26px active-via-.mnv-active), but the
   generic `.mobilbottommenu ul li a span { width:100% }` rule (style.css:14605,
   specificity 0,1,4) beats the inactive 24px rule (0,1,0) on specificity, so
   inactive the icon stretches to 100% and its svg is centered internally by
   .mnv-home-icon's own align-items:center. Active, the compound selector
   `.mobilbottommenu ul li.mnv-active a .mnv-home-icon` (0,3,3) wins instead,
   reasserting a real 26px width — and since the parent <a> never declares
   align-items (defaults to stretch, which doesn't apply to a definite width),
   a definite-width flex item falls back to flex-start, i.e. left-aligned.
   Result: centered-via-stretch inactive, left-pinned-at-26px active — a
   visible left shift. Forcing align-items:center on <a> here makes the icon
   center correctly at any width, in both states, without touching the width
   rules themselves. Scoped to :first-child only (Ana səhifə), so the other
   items — which use plain Remix-icon-font glyphs, unaffected by this — are
   untouched. */
.mobilbottommenu ul li:first-child a {
	align-items: center;
}

/* Center FAB: "Balans artır" */
.mobilbottommenu ul li.mnv-fab-item {
	position: relative;
}

.mobilbottommenu ul li.mnv-fab-item a {
	color: var(--text-color-26, var(--text-color));
}

.mobilbottommenu ul li.mnv-fab-item a i {
	background: none;
	padding: 0;
}

.mobilbottommenu ul li.mnv-fab-item .mnv-fab {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -28px auto 4px;
	background: linear-gradient(135deg, var(--mnv-accent), var(--mnv-accent-2));
	box-shadow: 0 10px 26px rgba(7, 113, 210, .45), inset 0 1px 1px rgba(255, 255, 255, .35);
	border: 4px solid var(--background-color-2);
	transition: transform .15s ease, box-shadow .15s ease;
}

.mobilbottommenu ul li.mnv-fab-item a:active .mnv-fab {
	transform: scale(0.93);
}

.mobilbottommenu ul li.mnv-fab-item .mnv-fab i {
	font-size: 24px;
	color: #fff;
}

.mobilbottommenu ul li.mnv-fab-item span {
	font-weight: 700;
	color: var(--mnv-accent);
}

/* Keep the fixed bar's content in a stable row. The previous auto-height
   layout let the label baseline sit on the visual viewport edge on Android,
   while body padding reserved a different amount of space. */
@media screen and (max-width: 991.98px) {
	body {
		padding-bottom: calc(var(--mnv-content-height) + env(safe-area-inset-bottom, 0px));
	}

	.mobilbottommenu {
		height: calc(var(--mnv-content-height) + env(safe-area-inset-bottom, 0px));
		min-height: calc(var(--mnv-content-height) + env(safe-area-inset-bottom, 0px));
		overflow: visible;
	}

	.mobilbottommenu ul {
		float: none;
		position: absolute;
		inset: 0 0 auto;
		height: var(--mnv-content-height);
		margin: 0;
		box-sizing: border-box;
		align-items: stretch;
	}

	.mobilbottommenu ul li {
		height: var(--mnv-content-height);
		box-sizing: border-box;
		padding: 6px 0 4px;
		display: flex;
		align-items: stretch;
	}

	.mobilbottommenu ul li a {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.mobilbottommenu ul li a i {
		flex: 0 0 auto;
	}

	.mobilbottommenu ul li a span {
		display: block;
		width: auto;
		float: none;
		max-width: 100%;
		min-height: 1.1em;
		margin-top: 2px;
		overflow: visible;
		text-overflow: clip;
		white-space: nowrap;
		line-height: 1.1;
	}

	.mobilbottommenu ul li.mnv-fab-item .mnv-fab {
		flex: 0 0 auto;
	}
}

@media screen and (max-width: 370px) {
	:root {
		--mnv-fab-overhang: 23px;
	}

	.mobilbottommenu ul li.mnv-fab-item .mnv-fab {
		width: 46px;
		height: 46px;
		margin-top: -23px;
	}

	.mobilbottommenu ul li.mnv-fab-item .mnv-fab i {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------- */
/* WhatsApp floating button (replaces the old "Kateqoriyalar" nav item)    */
/* ---------------------------------------------------------------------- */

.mobilbottommenu ul li.mnv-whatsapp-item {
	position: relative;
}

.mnv-whatsapp-fab-btn {
	--wa-green: #25d366;
	--wa-green-deep: #1fb958;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	color: var(--mnv-text-muted, var(--text-color));
}

/* Plain icon slot — same footprint as the shared `.mobilbottommenu ul li a i`
   rule (mobile-nav-v2.css above) so WhatsApp sits in the row like a normal
   nav item instead of a floating badge. */
.mnv-whatsapp-fab-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.mnv-whatsapp-fab-label {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.1;
	margin-top: 2px;
	color: var(--wa-green-deep, #1fb958);
	white-space: nowrap;
}

.mnv-whatsapp-fab-btn:active .mnv-whatsapp-fab-icon {
	transform: scale(.88);
}

.mnv-whatsapp-fab-icon svg {
	width: 22px;
	height: 22px;
	fill: var(--wa-green-deep, #1fb958);
}

/* Zero-size anchor point centered above the main WhatsApp button. Each
   option below is positioned from this single point with its own
   translate(), which is what produces the two independent circles instead
   of one shared rectangular card. */
.mnv-whatsapp-popover {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 5;
}

/* The .mobilbottommenu ul li a / ... a i / ... a span legacy selectors
   (style.css + the base rules above) target any <a>/<i>/<span> inside a
   bottom-nav <li> — including these popover option links — and win on
   specificity or !important. In particular style.css's
   `.mobilbottommenu ul li a { background: var(--dx-surface-2) !important;
   border-color: var(--dx-border) !important; }` has specificity (0,1,3)
   (1 class + 3 type selectors), which beats a bare `.mnv-whatsapp-popover-
   option` override (0,1,0) even with !important — that's what was making
   each option render as a rectangular card. Anchoring every override to the
   real `.mnv-whatsapp-item` ancestor class (0,2,0 — two classes) reliably
   outranks it regardless of !important ties. */
.mnv-whatsapp-item .mnv-whatsapp-popover-option {
	position: absolute !important;
	left: 0 !important;
	top: auto !important;
	bottom: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 5px;
	padding: 0 !important;
	border-radius: 0 !important;
	text-decoration: none;
	background: none !important;
	border: 0 !important;
	white-space: nowrap;
	min-width: 0;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0) scale(.4);
	transform-origin: center bottom;
	transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

.mnv-whatsapp-item.mnv-whatsapp-open .mnv-whatsapp-popover-option {
	opacity: 1;
	pointer-events: auto;
}

/* Kanal: upper-left leg of the V. */
.mnv-whatsapp-item.mnv-whatsapp-open .mnv-whatsapp-popover-kanal {
	transform: translate(calc(-50% - 46px), 0) scale(1);
}

/* Dəstək: upper-right leg of the V. */
.mnv-whatsapp-item.mnv-whatsapp-open .mnv-whatsapp-popover-destek {
	transform: translate(calc(-50% + 46px), 0) scale(1);
}

.mnv-whatsapp-item .mnv-whatsapp-popover-circle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	margin-top: 0 !important;
	float: none !important;
	border-radius: 50%;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .68) 45%, rgba(210, 229, 255, .58)),
		linear-gradient(135deg, rgba(7, 113, 210, .10), rgba(52, 211, 153, .08));
	border: 1.5px solid rgba(59, 130, 246, .4);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	box-shadow:
		0 10px 22px rgba(37, 99, 235, .20),
		0 3px 8px rgba(15, 23, 42, .14),
		inset 0 1px 1px rgba(255, 255, 255, .8);
	color: #2563eb;
	transition: transform .15s ease, box-shadow .15s ease;
}

.mnv-whatsapp-popover-option:active .mnv-whatsapp-popover-circle {
	transform: scale(.92);
}

.mnv-whatsapp-item .mnv-whatsapp-popover-circle i {
	font-size: 18px !important;
	line-height: 1;
}

.mnv-whatsapp-item .mnv-whatsapp-popover-label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 22px;
	font-size: 10.5px !important;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mnv-text) !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin-top: 0 !important;
	overflow: visible !important;
	text-overflow: clip !important;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--mnv-surface-elevated);
	border: 1px solid var(--mnv-border);
	box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}

@media screen and (max-width: 370px) {
	.mnv-whatsapp-item .mnv-whatsapp-popover-circle {
		width: 34px !important;
		height: 34px !important;
		max-width: 34px !important;
	}

	.mnv-whatsapp-item .mnv-whatsapp-popover-circle i {
		font-size: 15px !important;
	}

	.mnv-whatsapp-item.mnv-whatsapp-open .mnv-whatsapp-popover-kanal {
		transform: translate(calc(-50% - 40px), 0) scale(1);
	}

	.mnv-whatsapp-item.mnv-whatsapp-open .mnv-whatsapp-popover-destek {
		transform: translate(calc(-50% + 40px), 0) scale(1);
	}

	.mnv-whatsapp-item .mnv-whatsapp-popover-label {
		font-size: 10px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mnv-whatsapp-popover-option {
		transition: opacity .18s ease;
	}
}