/* ============================================================
   AMIR SUITE — Mobile Nav Bar v2.4
   ============================================================ */

@property --nm-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes nm-gb-spin { to { --nm-angle: 360deg; } }

/* ══ Gradient border wrapper ══
   Rebuilt to match the Desktop Nav technique: the conic-gradient is
   painted on a content-free ::after layer and masked (mask-composite:
   exclude) so only a thin ring survives — it is structurally
   impossible for it to show anywhere else. The previous version put
   the gradient directly on .as-nm-gb-wrap's own `background` and
   relied entirely on .as-nm-bar's opaque background-color to cover
   the middle; if that cover ever failed to fully match (glass/blur
   backgrounds, a transitional paint, etc.) the gradient showed through
   as a full background instead of a border — the reported bug. */
.as-nm-gb-wrap {
	--nm-c1: #4ee08a; --nm-c2: #60a5fa; --nm-c3: #f472b6;
	--nm-c4: #fb923c; --nm-c5: #a78bfa; --nm-c6: var(--nm-bc1, var(--nm-c1)); /* always mirrors c1 — closes the loop with zero seam, whatever c1 is set to */
	--nm-speed: 4s;
	display: block; width: 100%;
	padding: 2px;
	border-radius: 22px;   /* wrapper radius */
	position: relative; z-index: 0;
	transition: width .35s cubic-bezier(.4,0,.2,1),
	            border-radius .35s cubic-bezier(.4,0,.2,1),
	            transform .35s cubic-bezier(.4,0,.2,1);
}

.as-nm-gb-wrap.is-spinning {
	animation: nm-gb-spin var(--nm-spin-speed, var(--nm-speed)) linear infinite;
}

/* Gradient RING — content-free layer, masked to a thin ring only */
.as-nm-gb-wrap::after {
	content: ''; position: absolute; inset: 0;
	padding: 2px;
	border-radius: inherit; z-index: 0;
	background: conic-gradient(
		from var(--nm-angle),
		var(--nm-bc1, var(--nm-c1)),
		var(--nm-bc2, var(--nm-c2)),
		var(--nm-bc3, var(--nm-c3)),
		var(--nm-bc4, var(--nm-c4)),
		var(--nm-bc5, var(--nm-c5)),
		var(--nm-bc6, var(--nm-c6))
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

/* Glow — masked the same way, only blooms outside the bar's footprint */
.as-nm-gb-wrap::before {
	content: ''; position: absolute; inset: -4px;
	padding: 6px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--nm-angle),
		var(--nm-bc1, var(--nm-c1)),
		var(--nm-bc2, var(--nm-c2)),
		var(--nm-bc3, var(--nm-c3)),
		var(--nm-bc4, var(--nm-c4)),
		var(--nm-bc5, var(--nm-c5)),
		var(--nm-bc6, var(--nm-c6))
	);
	filter: blur(12px); opacity: 0.45; z-index: -1;
	animation: inherit;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

/* THE KEY FIX: bar must have SAME radius as wrapper minus padding,
   and must have an opaque background so gradient doesn't leak.    */
.as-nm-gb-wrap > .as-nm-bar {
	position: relative; z-index: 1;
	border-radius: 20px !important;   /* = wrapper(22) - padding(2) */
	background-color: var(--nm-bar-bg, #0d1117) !important;
	overflow: hidden;
}

/* Non-gradient outer */
.as-nm-outer { display: block; width: 100%; }

/* Disabled while the Mobile Header hamburger drawer is open (see
   nav-mobile-header.js), so the blurred backdrop reads more clearly. */
.as-nm-gb-wrap.is-gb-paused::after,
.as-nm-gb-wrap.is-gb-paused::before {
	animation-play-state: paused;
	opacity: 0;
	transition: opacity .2s ease;
}

/* ══ SHIMMER — same technique as Desktop Nav / Mobile Header Nav: a
   translucent white streak slides across on a loop, using plain alpha
   transparency (no mix-blend-mode — that combination with
   border-radius + overflow:hidden is a cross-browser compositing trap
   that can blacken the whole element instead of just brightening it). */
.as-nm-bar.has-shimmer {
	position: relative;
	overflow: hidden;
	--nm-shimmer-speed: 3s;
}

.as-nm-bar.has-shimmer::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background-image: linear-gradient(
		145deg,
		transparent 34%,
		rgba(255,255,255,.35) 48%,
		rgba(255,255,255,.35) 52%,
		transparent 66%
	);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	-webkit-animation: nm-shimmer var(--nm-shimmer-speed) ease-in-out infinite;
	animation: nm-shimmer var(--nm-shimmer-speed) ease-in-out infinite;
}

@-webkit-keyframes nm-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -100% 0; }
}
@keyframes nm-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.as-nm-bar.has-shimmer::after { animation: none; opacity: 0; }
}

/* ══ Bar ══ */
.as-nm-bar {
	--nm-bar-bg: #0d1117;
	display: block;
	width: 100%;
	position: relative;
	background-color: #0d1117;
	border-radius: 20px;
	overflow: hidden;
	transition: border-radius .35s cubic-bezier(.4,0,.2,1),
	            opacity .3s ease;
}

/* Glass */
.as-nm-bar.bg-glass {
	background-color: rgba(13,17,23,0.88) !important;
	--nm-bar-bg: rgba(13,17,23,0.88);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
}

/* Sticky: handled by PHP inline style on wrapper — bar itself is relative */
.as-nm-bar.is-sticky { position: relative !important; }

/* Hide on desktop */
@media (min-width: 1025px) {
	.as-nm-gb-wrap.hide-desktop,
	.as-nm-outer.hide-desktop { display: none !important; }
}

/* ══ Shrink on scroll-down ══ */
/* Wrapper shrinks width + bar radius increases for pill shape */
.as-nm-gb-wrap.is-shrunk {
	width: 72% !important;
	border-radius: 30px;   /* bar(28) + padding(2) = 30 — no leaking corners */
}

.as-nm-gb-wrap.is-shrunk > .as-nm-bar {
	border-radius: 28px !important;
}

.as-nm-gb-wrap.is-shrunk .as-nm-inner {
	padding-top: 6px;
	padding-bottom: 6px;
}

.as-nm-gb-wrap.is-shrunk .as-nm-label {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-top: 0;
	pointer-events: none;
}

.as-nm-gb-wrap.is-shrunk .as-nm-icon {
	transform: scale(0.85);
}

/* Also handle non-gradient wrapper shrink */
.as-nm-outer.is-shrunk { width: 72% !important; }
.as-nm-outer.is-shrunk > .as-nm-bar { border-radius: 28px !important; }
.as-nm-outer.is-shrunk .as-nm-inner  { padding-top: 6px; padding-bottom: 6px; }
.as-nm-outer.is-shrunk .as-nm-label  { opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; }
.as-nm-outer.is-shrunk .as-nm-icon   { transform: scale(0.85); }

/* ══ Inner ══ */
.as-nm-inner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 10px 16px;
	gap: 4px;
	transition: padding .3s ease;
}

/* ══ Buttons ══ */
.as-nm-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: 1;
	text-decoration: none;
	color: rgba(240,246,252,0.6);
	padding: 6px 8px;
	border-radius: 12px;
	transition: color .2s ease, background-color .2s ease,
	            transform .2s cubic-bezier(.34,1.56,.64,1);
	position: relative;
	min-width: 0;
}

.as-nm-btn:hover {
	background-color: rgba(255,255,255,0.06);
	color: #f0f6fc;
	transform: translateY(-2px);
}

.as-nm-btn:active { transform: scale(0.93); }

/* Active */
.as-nm-btn.is-active { color: var(--nm-item-active, #4ee08a); }

/* Active-item dot indicator removed per request */

/* Icon wrap */
.as-nm-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.as-nm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.as-nm-btn:hover .as-nm-icon { transform: scale(1.15); }
.as-nm-btn.is-active .as-nm-icon { transform: scale(1.1); }

/* Label */
.as-nm-label {
	font-size: 11px;
	font-weight: 500;
	color: rgba(240,246,252,0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60px;
	max-height: 20px;
	transition: opacity .25s ease, max-height .25s ease, margin .25s ease;
	line-height: 1.2;
}

.as-nm-btn.is-active .as-nm-label {
	color: var(--nm-item-active, #4ee08a);
}

/* Badge */
.as-nm-badge {
	position: absolute;
	top: -5px; right: -6px;
	min-width: 16px; height: 16px;
	background-color: #f43f5e;
	color: #fff;
	font-size: 9px; font-weight: 700;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 3px; line-height: 1;
	border: 1.5px solid rgba(13,17,23,0.8);
}

/* RTL */
.as-nm-bar[dir="rtl"] .as-nm-inner { flex-direction: row-reverse; }
.as-nm-bar[dir="rtl"] .as-nm-badge { right: auto; left: -6px; }

/* ══════════════════════════════════════════
   SEARCH — optional, added as an extra button; opens with a circular
   "iris" reveal from the center of the bar (same visual language as the
   desktop nav's search — clip-path circle expanding from 4% to 150%).
══════════════════════════════════════════ */
.as-nm-search-btn {
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
}

.as-nm-search-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-color: rgba(13,17,23,.97);
	z-index: 20;
	clip-path: circle(4% at 50% 50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		clip-path .48s cubic-bezier(.65,0,.35,1),
		opacity .25s ease,
		visibility 0s linear .48s;
}

.as-nm-search-overlay.is-open {
	clip-path: circle(150% at 50% 50%);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		clip-path .48s cubic-bezier(.65,0,.35,1),
		opacity .2s ease,
		visibility 0s;
}

.as-nm-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0 16px;
}

.as-nm-search-input-wrap {
	position: relative;
	flex: 1;
	display: flex;
	min-width: 0;
}

.as-nm-search-input {
	flex: 1;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px;
	padding: 10px 14px;
	color: #f0f6fc;
	font-size: 15px;
	outline: none;
	min-width: 0;
	transform: translateY(6px);
	opacity: 0;
	transition: border-color .2s, transform .35s ease .12s, opacity .35s ease .12s;
}

.as-nm-search-overlay.is-open .as-nm-search-input {
	transform: translateY(0);
	opacity: 1;
}

/* Dynamic/rotating fake placeholder (see nav-mobile.js) */
.as-nm-search-fake-ph {
	position: absolute;
	inset-inline-start: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(240,246,252,.45);
	font-size: 15px;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 28px);
	opacity: 1;
	transition: opacity .25s ease;
}

.as-nm-search-fake-ph.is-swapping { opacity: 0; }
.as-nm-search-fake-ph.is-hidden   { opacity: 0; visibility: hidden; }

.as-nm-search-submit,
.as-nm-search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	background: rgba(255,255,255,.06);
	border: none;
	border-radius: 50%;
	color: #4ee08a;
	cursor: pointer;
}

.as-nm-search-submit svg { width: 18px; height: 18px; }
.as-nm-search-close { color: #f0f6fc; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.as-nm-search-overlay,
	.as-nm-search-input { transition: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.as-nm-gb-wrap.is-spinning,
	.as-nm-gb-wrap::before { animation: none !important; --nm-angle: 45deg; }
	.as-nm-gb-wrap,
	.as-nm-bar, .as-nm-btn, .as-nm-icon, .as-nm-label { transition: none !important; }
}