/* =========================================================================
   mobile-bar — نوار ناوبری پایین صفحه در موبایل

   پنج جایگاه: چهار آیتم عادی و یک دکمهٔ برجستهٔ گرد در وسط که همان
   پاپ‌آپ «تماس با ما» را باز می‌کند.

   نوار فقط زیر ۱۰۲۴ پیکسل دیده می‌شود؛ بالاتر از آن هدر جای خودش را دارد.

   وابسته به: —            تعامل: mobile-bar.js
   ========================================================================= */

.zbn-mbar {
	--mb-h:        62px;
	--mb-bg:       #FFFFFF;
	--mb-line:     #ECE5DC;
	--mb-ink:      #8A8078;
	--mb-ink-on:   #C8102E;
	--mb-accent:   #C8102E;
	--mb-accent2:  #E8324F;
	--mb-fab:      58px;

	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;

	/* بالاتر از پردهٔ تیره (۹۹۹۶) و خودِ پنل (۹۹۹۷): وقتی پنل باز است نوار
	   باید دیده و کلیک‌پذیر بماند، وگرنه کاربر نمی‌تواند با یک ضربه پنل را
	   عوض کند. پنل هم به همین دلیل ۶۴ پیکسل پایینش را خالی می‌گذارد. */
	z-index: 9998;

	background: var(--mb-bg);
	border-top: 1px solid var(--mb-line);
	box-shadow: 0 -6px 24px rgba(40, 20, 12, .08);

	/* نوار خانهٔ آیفون زیر دکمه‌ها نیفتد. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 1024px) {
	.zbn-mbar { display: block; }

	/* محتوای انتهای صفحه پشت نوار پنهان نشود. */
	body.zbn-has-mbar {
		padding-bottom: calc(var(--mb-h, 62px) + env(safe-area-inset-bottom, 0px)) !important;
	}
}

.zbn-mbar-in {
	display: grid;
	grid-template-columns: repeat(var(--mb-cols, 5), 1fr);
	align-items: end;
	max-width: 560px;
	margin: 0 auto;
	padding: 7px 4px 6px;
	min-height: var(--mb-h);
}

/* ---------- آیتم عادی ---------- */
.zbn-mbar a.zbn-mbar-i,
.zbn-mbar button.zbn-mbar-i {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;

	padding: 4px 2px;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--mb-ink);
	font: inherit;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .18s ease;
}
.zbn-mbar a.zbn-mbar-i:hover,
.zbn-mbar a.zbn-mbar-i:focus-visible { color: var(--mb-ink-on); }

.zbn-mbar .zbn-mbar-i svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zbn-mbar .zbn-mbar-t {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* صفحهٔ جاری */
.zbn-mbar a.zbn-mbar-i.is-on { color: var(--mb-ink-on); }
.zbn-mbar a.zbn-mbar-i.is-on::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	width: 26px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: var(--mb-accent);
}
.zbn-mbar a.zbn-mbar-i { position: relative; }

/* ---------- دکمهٔ برجستهٔ وسط ---------- */
.zbn-mbar .zbn-mbar-fabwrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
}

.zbn-mbar button.zbn-mbar-fab {
	width: var(--mb-fab);
	height: var(--mb-fab);
	flex-shrink: 0;

	/* بالا زدن از نوار — حاشیهٔ هم‌رنگ نوار، حفرهٔ تمیز می‌سازد. */
	margin-top: calc(var(--mb-fab) / -2 - 4px);
	border: 4px solid var(--mb-bg);
	border-radius: 50%;

	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	background: linear-gradient(135deg, var(--mb-accent), var(--mb-accent2));
	color: #FFF;
	box-shadow: 0 8px 22px rgba(200, 16, 46, .34);
	transition: transform .18s ease, box-shadow .18s ease;
}
.zbn-mbar button.zbn-mbar-fab:hover { transform: translateY(-2px); }
.zbn-mbar button.zbn-mbar-fab:active { transform: translateY(0) scale(.96); }
.zbn-mbar button.zbn-mbar-fab:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 3px; }

.zbn-mbar .zbn-mbar-fab svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zbn-mbar .zbn-mbar-fabwrap .zbn-mbar-t {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--mb-ink);
}

/* نقطهٔ سبز «آنلاین» */
.zbn-mbar .zbn-mbar-dot {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22C55E;
	border: 2px solid var(--mb-bg);
}
.zbn-mbar button.zbn-mbar-fab { position: relative; }

/* ---------- هماهنگی با عناصر شناور موجود ---------- */
@media (max-width: 1024px) {
	/* دکمهٔ شناور تماس در موبایل تکراری است — کارش را دکمهٔ وسط می‌کند. */
	body.zbn-has-mbar .contact-us-popup > .contact-button { display: none !important; }

	/* پاپ‌آپ تماس و دکمهٔ «برو بالا» بالای نوار بنشینند. */
	body.zbn-has-mbar .contact-us-popup .contact-popup-content {
		bottom: calc(var(--mb-h, 62px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
	}
	body.zbn-has-mbar #scroll-to-top {
		bottom: calc(var(--mb-h, 62px) + env(safe-area-inset-bottom, 0px) + 14px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zbn-mbar button.zbn-mbar-fab,
	.zbn-mbar a.zbn-mbar-i { transition: none; }
}

/* =========================================================================
   شیت پایین — پنل زبان‌ها

   با ضربه روی آیتم‌هایی که «منبع پنل» دارند باز می‌شود و شش زبان را با
   پرچم نشان می‌دهد. محتوایش از همان زیرمنوی وردپرس می‌آید، پس چیزی
   دوباره وارد نمی‌شود.
   ========================================================================= */

.zbn-sheet-veil {
	position: fixed;
	inset: 0;
	z-index: 9996;
	background: rgba(26, 23, 20, .5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .26s ease, visibility 0s linear .26s;
}
.zbn-sheet-veil.is-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .26s ease, visibility 0s;
}

.zbn-sheet {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9997;

	max-height: min(78vh, 620px);
	display: flex;
	flex-direction: column;

	background: var(--mb-bg, #FFF);
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -14px 44px rgba(26, 23, 20, .2);

	/* بسته: پایین‌تر از نوار تا کاملاً از دید خارج شود. */
	transform: translateY(102%);
	transition: transform .32s cubic-bezier(.3, .8, .3, 1);
	padding-bottom: calc(var(--mb-h, 62px) + env(safe-area-inset-bottom, 0px));
}
.zbn-sheet.is-on { transform: none; }

/* دستگیرهٔ بالای شیت */
.zbn-sheet-grip {
	flex: 0 0 auto;
	width: 42px;
	height: 4px;
	margin: 10px auto 2px;
	border-radius: 99px;
	background: var(--mb-line, #ECE5DC);
}

.zbn-sheet-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 12px;
	border-bottom: 1px solid var(--mb-line, #ECE5DC);
}
.zbn-sheet-head b {
	font-size: 14.5px;
	font-weight: 800;
	color: #1A1714;
}
.zbn-sheet-head span {
	font-size: 11.5px;
	color: var(--mb-ink, #8A8078);
}
.zbn-sheet-x {
	margin-inline-start: auto;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid var(--mb-line, #ECE5DC);
	border-radius: 10px;
	background: #FAF8F5;
	color: #5C554D;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.zbn-sheet-x:hover { background: var(--mb-accent, #C8102E); border-color: var(--mb-accent, #C8102E); color: #FFF; }

.zbn-sheet-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 12px;
}

.zbn-sheet-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.zbn-sheet a.zbn-sheet-i {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px;
	border-radius: 14px;
	background: #FAF8F5;
	border: 1px solid var(--mb-line, #ECE5DC);
	color: #1A1714;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
	min-width: 0;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.zbn-sheet a.zbn-sheet-i:hover,
.zbn-sheet a.zbn-sheet-i:focus-visible {
	background: #FFF;
	border-color: var(--mb-accent, #C8102E);
	color: var(--mb-accent, #C8102E);
	outline: none;
}

.zbn-sheet .zbn-sheet-flag {
	flex: 0 0 auto;
	width: 30px;
	height: 21px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
	background: var(--mb-ink, #8A8078);
}
.zbn-sheet .zbn-sheet-flag-badge {
	display: grid;
	place-items: center;
	width: 30px;
	height: 21px;
	background: #FFF;
	border-color: var(--mb-line, #ECE5DC);
	color: #5C554D;
	font-size: 8px;
	font-weight: 800;
	direction: ltr;
	box-shadow: none;
}

.zbn-sheet .zbn-sheet-tx { min-width: 0; }
.zbn-sheet .zbn-sheet-tx b {
	display: block;
	font-weight: 600;
	font-size: 12.5px;
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.zbn-sheet .zbn-sheet-tx small {
	display: block;
	direction: ltr;
	text-align: start;
	font-size: 10px;
	font-weight: 500;
	color: var(--mb-ink, #8A8078);
	line-height: 1.6;
}

/* لینک «مشاهدهٔ همه» پای شیت */
.zbn-sheet-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 13px;
	background: var(--mb-accent, #C8102E);
	color: #FFF !important;
	font-size: 12.5px;
	font-weight: 800;
	text-decoration: none;
}

/* آیتم نوار که پنل دارد، فلش کوچکی می‌گیرد. */
.zbn-mbar .zbn-mbar-i.has-sheet .zbn-mbar-t::after {
	content: ' ⌃';
	font-size: 9px;
	opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
	.zbn-sheet, .zbn-sheet-veil { transition: none; }
}

/* پنل جزئی از نوار موبایل است و روی دسکتاپ جایی ندارد. بدون این، اگر کاربر
   روی تبلت پنل را باز کند و دستگاه را بچرخاند، پنلِ بازمانده روی صفحهٔ
   دسکتاپ می‌ماند. عمداً پس از همهٔ قواعد شیت آمده تا بر آن‌ها مقدم باشد. */
@media (min-width: 1025px) {
	.zbn-sheet,
	.zbn-sheet-veil { display: none; }
}
