/**
 * AMIR SUITE — Mobile Header Nav CSS v1
 * Loaded AFTER nav-desktop.css (see get_style_depends()), so all the shared
 * .as-nd-* rules (gradient border, glow, glass, centering fix, shadows,
 * action-btn styling, etc.) already apply. This file only adds the bits
 * unique to this widget: the 3-column centered-logo row2, and the
 * hamburger drawer menu.
 */

/* Show only below desktop width — this widget is the mobile counterpart
   of the desktop nav, so it should never render at the same time. */
.as-nmh-bar.hide-desktop,
.as-nd-gb-wrap.hide-desktop {
	display: block; /* default for <1025px; overridden below */
}

@media (min-width: 1025px) {
	.as-nmh-bar.hide-desktop,
	.as-nd-gb-wrap.hide-desktop {
		display: none !important;
	}
	/* Same reasoning as Desktop Nav's mobile media query: hiding just the
	   bar leaves Elementor's own widget-wrapper box (plus any column/
	   section padding) sitting there empty. Hide the whole widget class
	   too so no leftover gap remains above/below the desktop nav. */
	.elementor-widget-amir-suite-nav-mobile-header { display: none !important; }
}

/* Robust horizontal centering, same fix as Desktop Nav — this rule is
   scoped per-widget-class, so it needed its own copy here; without it,
   "فاصله از لبه‌ها" and "حداکثر عرض منو" could conflict (one control's
   plain `margin` shorthand silently cancelling the other's
   `margin-inline: auto`), leaving the bar narrower than expected and
   shifted to one side instead of centered — exactly the bug seen when
   this widget's width didn't match the desktop nav's. */
.elementor-widget-amir-suite-nav-mobile-header > .elementor-widget-container {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ══════════════════════════════════════════
   ROW 0 — countdown alone (new topmost row)
══════════════════════════════════════════ */
.as-nmh-row0-inner {
	padding-inline: 16px;
}

.as-nmh-row0-inner .as-nd-cd-wrap {
	width: 100%;
	justify-content: space-between;
}

/* ══════════════════════════════════════════
   ROW 1 — ticker alone
══════════════════════════════════════════ */
.as-nmh-row1-inner {
	padding-inline: 16px;
}

/* Font-icon fallback sizing (Icons_Manager can render <i> instead of <svg>
   when the user picks a Font Awesome icon for the customizable left button) */
.as-nd-action-btn i { font-size: 18px; line-height: 1; }

/* ══════════════════════════════════════════
   TICKER — smooth-scroll ("marquee") effect
   Renders every item twice back-to-back in one flex track, animated with
   a continuous translateX loop — duplicating the content is what makes
   the wrap-around invisible. Direction mirrors for RTL bars so the scroll
   still moves toward the reading-start side.
══════════════════════════════════════════ */
.as-nd-ticker-viewport.is-marquee { overflow: hidden; }

.as-nd-ticker-track {
	--nd-marquee-speed: 18s;
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	white-space: nowrap;
	animation: as-nd-marquee var(--nd-marquee-speed) linear infinite;
}

.as-nd-ticker-viewport.is-marquee:hover .as-nd-ticker-track {
	animation-play-state: paused;
}

.as-nd-ticker-track .as-nd-ticker-marquee-item { flex-shrink: 0; }

@keyframes as-nd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.as-nd-bar[dir="rtl"] .as-nd-ticker-track {
	animation-name: as-nd-marquee-rtl;
}

@keyframes as-nd-marquee-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.as-nd-ticker-track { animation: none; }
}

/* ══════════════════════════════════════════
   ROW 2 — hamburger (physical RIGHT) / logo (center) / action button
   (physical LEFT). Uses absolute positioning with literal `left`/`right`
   instead of a direction-aware grid — this keeps the sides fixed to the
   requested physical edges regardless of the site's text direction
   (is_rtl() isn't always reliable for this), rather than "start/end"
   flipping with dir="rtl"/"ltr".
══════════════════════════════════════════ */
.as-nmh-row2-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 16px;
	min-height: inherit;
}

.as-nmh-hamburger-btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}

.as-nmh-row2-inner .as-nd-cart-btn {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
}

.as-nmh-logo {
	font-size: 20px;
}

/* ══════════════════════════════════════════
   DRAWER MENU (opened by the hamburger button)
══════════════════════════════════════════ */
.as-nmh-drawer {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh; /* matches the actually-visible viewport on mobile browsers with a collapsing address bar; inset:0 alone can extend behind it, which was swallowing the intended bottom gap */
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
	--nmh-drawer-speed: .35s;
}

.as-nmh-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

/* While the drawer is open, hide every other fixed bar (Mobile Nav, AI
   Nav Menu, Desktop Nav) instead of just pausing their gradient-border
   spin — this is what makes "only the open menu shows, everything else
   blurred away" actually true, rather than leaving those bars sitting
   sharp and clickable in front of the blur. They're all portalled to
   <body> (see each widget's JS), so this class on <body> reaches every
   one of them regardless of where they originally lived in the markup. */
body.as-nmh-drawer-open .as-nm-gb-wrap,
body.as-nmh-drawer-open .as-nm-outer,
body.as-nmh-drawer-open .as-anm-gb-wrap,
body.as-nmh-drawer-open .as-anm-outer,
body.as-nmh-drawer-open .as-nd-gb-wrap,
body.as-nmh-drawer-open .as-nd-outer {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

.as-nmh-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--nmh-drawer-speed) ease;
}

.as-nmh-drawer.is-open .as-nmh-drawer-backdrop { opacity: 1; }

/* ══ Card wrapper — carries position/size, the slide/fade/scale-in
   animation, and the rotating gradient border (same mask-exclude-ring
   technique as the Desktop Nav / Mobile NAV gradient borders, so it's
   visually consistent and unmistakably "the same effect"). ══ */
.as-nmh-drawer-card {
	position: absolute;
	top: 16px;
	bottom: 100px; /* leaves room for a fixed bottom NAV bar, if present — see the "فاصله کارت منو از پایین صفحه" control */
	/* Physical `right`, not the logical `inset-inline-end` this used to
	   be: every other physically-positioned piece of this widget (the
	   hamburger button, the cart button) is pinned with literal left/
	   right specifically so the side never flips with text direction
	   (see the comment on .as-nmh-row2-inner above). This card was the
	   one exception, still using a logical property — and "inline-end"
	   means the LEFT edge once the card's own dir="rtl" (set in
	   widget.php for Persian sites) is taken into account, which is
	   exactly backwards from the slide-in animation just below (which
	   already assumes the resting position is on the right for RTL,
	   sliding in via translateX(100%)). That mismatch was the reported
	   "opens on the left instead of the right" bug on Persian sites. */
	right: 16px;
	width: min(78vw, 320px);
	padding: 2px; /* border thickness */
	border-radius: 24px;
	--nmh-c1: #4ee08a; --nmh-c2: #60a5fa; --nmh-c3: #f472b6;
	--nmh-c4: #fb923c; --nmh-c5: #a78bfa; --nmh-c6: #22d3ee; /* real 6th color, was previously just a mirror of c1 */
	--nmh-border-speed: 4s;
}

/* Gradient RING — content-free layer, masked to a thin ring only */
.as-nmh-drawer-card.has-gb::after {
	content: ''; position: absolute; inset: 0;
	padding: 2px;
	border-radius: inherit; z-index: 0;
	background: conic-gradient(
		from var(--nmh-angle, 0deg),
		var(--nmh-c1), var(--nmh-c2), var(--nmh-c3),
		var(--nmh-c4), var(--nmh-c5), var(--nmh-c6), var(--nmh-c1)
	);
	-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;
	-webkit-animation: nmh-gb-spin var(--nmh-border-speed) linear infinite;
	animation: nmh-gb-spin var(--nmh-border-speed) linear infinite;
}

/* Glow — same ring, blurred and pushed outward */
.as-nmh-drawer-card.has-gb::before {
	content: ''; position: absolute; inset: -4px;
	padding: 6px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--nmh-angle, 0deg),
		var(--nmh-c1), var(--nmh-c2), var(--nmh-c3),
		var(--nmh-c4), var(--nmh-c5), var(--nmh-c6), var(--nmh-c1)
	);
	filter: blur(12px); opacity: .5; z-index: -1;
	-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;
	-webkit-animation: nmh-gb-spin var(--nmh-border-speed) linear infinite;
	animation: nmh-gb-spin var(--nmh-border-speed) linear infinite;
}

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

.as-nmh-drawer-panel {
	position: relative;
	z-index: 1;
	height: 100%;
	background-color: #0d1117;
	border-radius: 22px; /* card radius(24) - padding(2) */
	box-shadow: 0 20px 50px rgba(0,0,0,.5);
	padding: 20px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* ── Animation variants (item 11): three selectable "opening" effects,
   plus the always-available "off" state which keeps the original plain
   slide. All variants share the same duration variable so the speed
   control affects whichever style is active. Applied to the whole
   card (border included), not just the inner content. ── */

/* anim-none / anim-slide-only — plain horizontal slide (original behaviour) */
.as-nmh-drawer.anim-none .as-nmh-drawer-card,
.as-nmh-drawer.anim-slide-only .as-nmh-drawer-card {
	transform: translateX(100%);
	transition: transform var(--nmh-drawer-speed) cubic-bezier(.4,0,.2,1);
}
.as-nmh-drawer.anim-none .as-nmh-drawer-card[dir="ltr"],
.as-nmh-drawer.anim-slide-only .as-nmh-drawer-card[dir="ltr"] { transform: translateX(-100%); }
.as-nmh-drawer.anim-none.is-open .as-nmh-drawer-card,
.as-nmh-drawer.anim-slide-only.is-open .as-nmh-drawer-card { transform: translateX(0); }

/* anim-fade-only — cross-fade in place, no horizontal movement */
.as-nmh-drawer.anim-fade-only .as-nmh-drawer-card {
	opacity: 0;
	transition: opacity var(--nmh-drawer-speed) ease;
}
.as-nmh-drawer.anim-fade-only.is-open .as-nmh-drawer-card { opacity: 1; }

/* anim-slide-fade-scale — slide + fade + a subtle scale-in, the
   "richer" default effect */
.as-nmh-drawer.anim-slide-fade-scale .as-nmh-drawer-card {
	transform: translateX(100%) scale(.92);
	opacity: 0;
	transition: transform var(--nmh-drawer-speed) cubic-bezier(.4,0,.2,1),
	            opacity var(--nmh-drawer-speed) ease;
}
.as-nmh-drawer.anim-slide-fade-scale .as-nmh-drawer-card[dir="ltr"] { transform: translateX(-100%) scale(.92); }
.as-nmh-drawer.anim-slide-fade-scale.is-open .as-nmh-drawer-card {
	transform: translateX(0) scale(1);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.as-nmh-drawer-card::before,
	.as-nmh-drawer-card::after { animation: none; }
}

.as-nmh-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-inline-start: auto;
	margin-bottom: 12px;
	background: rgba(255,255,255,.06);
	border: none;
	border-radius: 50%;
	color: #f0f6fc;
	font-size: 15px;
	cursor: pointer;
}

.as-nmh-drawer-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.as-nmh-drawer-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 10px;
	border-radius: 8px;
	color: rgba(240,246,252,.9);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: background-color .2s, color .2s;
}

.as-nmh-drawer-link:hover { background-color: rgba(255,255,255,.06); }

.as-nmh-drawer-link.is-active { color: var(--nd-nav-active, #4ee08a); }

/* Accordion for nested drawer items — see render_drawer_menu_items() in
   nav-mobile-header/widget.php and the toggle handler in
   nav-mobile-header.js. Each level indents a little further so the
   hierarchy stays readable even a couple of levels deep. */
.as-nmh-drawer-item { position: relative; }

.as-nmh-drawer-item.has-children > .as-nmh-drawer-link,
.as-nmh-drawer-item.has-children > .as-nmh-drawer-sublink {
	padding-inline-end: 44px; /* room for the toggle button, doesn't overlap the label */
}

.as-nmh-drawer-toggle {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: rgba(240,246,252,.6);
	cursor: pointer;
	padding: 0;
}

.as-nmh-drawer-toggle:hover { background-color: rgba(255,255,255,.06); color: #f0f6fc; }

.as-nmh-drawer-toggle svg { transition: transform .2s ease; }

.as-nmh-drawer-item.is-open > .as-nmh-drawer-toggle svg { transform: rotate(180deg); }

.as-nmh-drawer-submenu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Collapsed by default. Height-animating to "auto" isn't natively
	   supported by CSS transitions, so JS sets an explicit max-height
	   (scrollHeight) right before adding .is-open — see
	   nav-mobile-header.js — and this just handles the visual part. */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .25s ease, opacity .2s ease;
	padding-inline-start: 18px;
	border-inline-start: 1px solid rgba(255,255,255,.08);
	margin-inline-start: 14px;
}

.as-nmh-drawer-item.is-open > .as-nmh-drawer-submenu {
	opacity: 1;
}

.as-nmh-drawer-sublink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 8px;
	color: rgba(240,246,252,.75);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: background-color .2s, color .2s;
}

.as-nmh-drawer-sublink:hover { background-color: rgba(255,255,255,.06); color: #f0f6fc; }

.as-nmh-drawer-sublink.is-active { color: var(--nd-nav-active, #4ee08a); }

/* Social icons row (item 10) — pinned to the bottom of the drawer panel */
.as-nmh-drawer-social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce) {
	.as-nmh-drawer-panel, .as-nmh-drawer-backdrop { transition: none; }
}