/**
 * 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;
}

.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 */
	inset-inline-end: 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: var(--nmh-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)
	);
	-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)
	);
	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); }

/* 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; }
}