/* ============================================================
   BahamApply — Design tokens (rendered from the brand logo)
   ============================================================ */
:root {
  --navy-900: #0b1c3a;
  --navy-800: #122a54;
  --blue-600: #1f6feb;
  --blue-500: #2f86ff;
  --blue-400: #5aa6ff;
  --blue-050: #eaf3ff;

  --ink: #10182b;
  --ink-soft: #4a5468;
  --ink-faint: #8993a8;

  --bg: #f5f8fc;
  --surface: #ffffff;
  --border: #d5dce7;  /* خط‌ها و لبه‌ها؛ قبلاً #e4e9f3 بود و روی پس‌زمینه‌ی سفید خیلی کم‌رنگ دیده می‌شد */

  --success: #17a568;
  --danger: #d94f4f;

  /* باهم‌بر — لهجه‌ی رنگی مستقل از باهم‌اپلای (بدون هیچ آبی) */
  --amber-600: #d9670c;
  --amber-500: #f2871f;
  --amber-400: #f7a54d;
  --amber-050: #fef3e6;

  --rust-600: #b5482a;
  --rust-050: #fbeae4;

  --bar-ink: #241a12;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 16px 40px rgba(11, 28, 58, 0.08);
  --shadow-soft: 0 6px 18px rgba(11, 28, 58, 0.06);

  --font: "Vazirmatn", "Tahoma", sans-serif;
}

* { box-sizing: border-box; }

/* اسکرول‌بار یکدست برای کل سایت: نازک، بدون قاب/باکس دور یا زیرش (ترک شفافه)،
   و چون کل صفحه dir="rtl" هست خودش سمت چپ می‌شینه، نه راست */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 24, 43, 0.22) transparent;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(16, 24, 43, 0.22); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 43, 0.4); }

/* نوار بالایی چسبانه؛ بدون این، پرش به لنگرها (#booking-form و مشابهش) عنوان را
   زیر همان نوار پنهان می‌کند. */
html { scroll-padding-top: 90px; }

/* مرورگرها اسکرول‌بارِ صفحه رو سمتِ «شروعِ» خطِ html می‌ذارن؛ با dir="rtl" روی html
   می‌رفت سمتِ چپ. خودِ html رو چپ‌به‌راست می‌کنیم تا اسکرول‌بار سمتِ راست بمونه، و همه‌ی
   محتوا (body) همچنان راست‌به‌چپه. ویژگیِ dir="rtl" روی html (برای :dir() و صفحه‌خوان‌ها)
   دست‌نخورده می‌مونه. */
html { direction: ltr; }
body { direction: rtl; }

html, body {
  margin: 0;
  padding: 0;
  /* پس‌زمینه‌ی صفحه‌ها سفیده؛ --bg (آبیِ خیلی کم‌رنگ) فقط برای چیپ‌ها، هاور و کادرهای داخلی می‌مونه */
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
}

/* .home-hero و .bar-hero برای تمام‌عرض شدن از ترفند 100vw استفاده می‌کنن؛ 100vw عرض
   اسکرول‌بار عمودی رو حساب نمی‌کنه، برای همین توی مرورگرهایی که اسکرول‌بار غیرشفاف
   دارن (مثل کروم) چند پیکسل بیشتر از صفحه می‌زنه بیرون و یه اسکرول‌بار افقی/نوار
   خاکستری ثابت ته صفحه ایجاد می‌کنه (سافاری چون اسکرول‌بارش شناور/خودکارمخفی‌شونده‌ست
   این مشکل رو نداره). overflow-x: hidden جلوی اون سرریز افقی ناخواسته رو می‌گیره.
   عمداً فقط روی html می‌ذاریمش، نه body: طبق مشخصات CSS اگه overflow-x روی یه المنت
   hidden باشه ولی overflow-y ست نشده باشه (یعنی visible)، مرورگر خودش overflow-y رو
   هم auto حساب می‌کنه؛ اگه این کار رو هم روی html و هم روی body انجام بدیم، body یه
   اسکرول‌کانتینر جدا و مستقل از viewport می‌شه و نوار بالا (position: sticky) دیگه
   درست به بالای صفحه نمی‌چسبه و با اسکرول محو می‌شه. با گذاشتنش فقط روی html، اسکرول
   صفحه همچنان از طریق خود html/viewport انجام می‌شه و sticky درست کار می‌کنه. */
html { overflow-x: hidden; }

/* فوتر همیشه ته صفحه بچسبه، حتی وقتی محتوا کمتر از ارتفاع صفحه‌ست (مثل صفحات
   کوتاه). توی صفحات داشبورد که layout مستقل خودشون رو دارن (body:has(.dash-layout)
   بالاتر) این قانون override می‌شه و فوتر اصلاً نشون داده نمی‌شه. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

h1, h2, h3 { color: var(--navy-900); margin: 0 0 8px; font-weight: 800; }
p { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--ink-soft); font-size: 0.95rem; }

/* برای متنی که فقط باید برای صفحه‌خوان‌ها بمونه ولی بصری مخفی باشه (مثلاً متنِ
   دکمه‌های آیکون‌محور که به‌جاش یه تولتیپ hover توضیح می‌ده) — الگوی استانداردِ
   sr-only، نه display:none (که از صفحه‌خوان هم حذفش می‌کنه). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main {
  /* body یک flex ستونیه؛ margin خودکار باعث می‌شد main به اندازه‌ی محتواش جمع بشه
     و صفحه‌های کم‌محتوا (مثل ورود) باریک بمونن. width صریح این رو درست می‌کنه. */
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ---------------- Navbar ---------------- */
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.navbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
}
.navbar__brand-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy-900);
}
.navbar__brand-accent { color: var(--blue-500); }

/* دکمه‌ی همبرگری — فقط زیر ۶۴۰px دیده می‌شه (رول نمایشش داخل مدیا کوئری آخر فایله).
   سه خط آیکون با ::before/::after ساخته می‌شن و موقع باز بودن منو به ضربدر تبدیل می‌شن. */
.navbar__toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy-900);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.navbar__toggle-bars { position: relative; }
.navbar__toggle-bars,
.navbar__toggle-bars::before,
.navbar__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s ease, background 0.18s ease;
}
.navbar__toggle-bars::before,
.navbar__toggle-bars::after { content: ""; position: absolute; left: 0; }
.navbar__toggle-bars::before { top: -6px; }
.navbar__toggle-bars::after { top: 6px; }
.navbar__toggle[aria-expanded="true"] .navbar__toggle-bars { background: transparent; }
.navbar__toggle[aria-expanded="true"] .navbar__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] .navbar__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- Navbar links + dropdown ---------------- */
.navbar__links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}
.navbar__link {
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-soft);
  transition: color 0.12s ease, background 0.12s ease;
}
.navbar__link:hover { color: var(--navy-900); background: var(--bg); }
.navbar__link.is-active { color: var(--navy-900); background: var(--bg); font-weight: 700; }

.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav-dropdown__trigger:hover { color: var(--navy-900); background: var(--bg); }
.nav-dropdown__chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-dropdown.is-open .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown.is-open .nav-dropdown__trigger { color: var(--navy-900); background: var(--bg); }

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}
.nav-dropdown.is-open .nav-dropdown__menu { display: flex; }

.nav-dropdown__group {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.nav-dropdown__group:last-child { border-bottom: none; margin-bottom: 0; }

.nav-dropdown__title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-900);
  padding: 6px 8px 8px;
}
.nav-dropdown__title--link {
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.nav-dropdown__title--link:hover { background: var(--blue-050); color: var(--blue-600); }

.nav-dropdown__item {
  padding: 8px 10px 8px 8px;
  margin-right: 8px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-dropdown__item:hover { background: var(--blue-050); color: var(--blue-600); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(95deg, var(--navy-900), var(--blue-600));
  color: #fff;
  box-shadow: 0 10px 24px rgba(31, 111, 235, 0.28);
}
.btn--primary:hover { box-shadow: 0 12px 28px rgba(31, 111, 235, 0.36); }

.btn--secondary {
  background: var(--blue-050);
  color: var(--blue-600);
}
.btn--secondary:hover { background: #dcebff; }

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.btn--ghost:hover { background: var(--bg); }

.btn--danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(217, 79, 79, 0.35);
}
.btn--danger:hover { background: rgba(217, 79, 79, 0.08); }

.btn--block { width: 100%; margin-top: 8px; }
.btn--sm { padding: 8px 14px; font-size: 0.85rem; }
.btn--lg { padding: 17px 34px; font-size: 1.08rem; }

.navbar__cta { padding: 11px 20px; font-size: 0.92rem; }
/* نسخه‌ی داخلِ منوی همبرگری — روی دسکتاپ دیده نمی‌شه (رول نمایشش توی مدیا کوئری) */
.navbar__link--in-menu { display: none; }
.navbar__actions { display: flex; align-items: center; gap: 10px; }
.navbar__account { padding: 9px 16px; font-size: 0.88rem; white-space: nowrap; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding: 56px 8px 40px;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero__title {
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  margin-bottom: 12px;
}
.hero__subtitle {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.hero--compact { padding: 40px 8px 8px; }
.hero__blob {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 320px;
  background: radial-gradient(closest-side, rgba(47, 134, 255, 0.16), transparent 70%);
  z-index: 0;
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 24px;
}
.card__header { margin-bottom: 20px; }
.card__header--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card--thanks { text-align: center; }
.card--login { max-width: 470px; margin: 64px auto; }

/* کارت‌های تکیِ صفحه‌های کم‌محتوا (تأیید، پرداخت، تشکر) — بدون این، حالا که main
   تمام‌عرضه، تا ۱۰۴۰ پیکسل کش می‌اومدن. */
.card--confirm, .card--thanks { max-width: 680px; margin-left: auto; margin-right: auto; }

/* صفحه‌ی ورود ادمین کمی بزرگ‌تر از فرم‌های ورود کاربرهاست (صفحه‌ی خالیه و نوار بالا نداره) */
.card--login-admin {
  max-width: 510px;
  margin: 96px auto;
  padding: 44px 40px;
}
.card--login-admin .card__header { margin-bottom: 26px; }
.card--login-admin h2 { font-size: 1.5rem; }
.card--login-admin .muted { font-size: 1rem; }
.card--login-admin label { font-size: 1rem; }
.card--login-admin input { padding: 14px 16px; font-size: 1.02rem; }
.card--login-admin .btn { padding: 15px 22px; font-size: 1.05rem; margin-top: 14px; }
@media (max-width: 560px) {
  .card--login-admin { margin: 48px auto; padding: 32px 22px; }
}

/* ---------------- Contact page ---------------- */
main:has(.contact-grid) { max-width: 1040px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  align-items: start;
}
.card--info { position: sticky; top: 20px; }
.social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--blue-050);
  color: var(--navy-900);
  margin-bottom: 16px;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.social-link:hover { box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.social-link__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-link strong { display: block; font-size: 0.95rem; }
.social-link__handle { display: block; font-size: 0.85rem; color: var(--ink-soft); direction: ltr; text-align: right; }
.contact-note { margin-top: 4px; font-size: 0.85rem; }

/* ---------------- Forms ---------------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row .field { margin-bottom: 0; }

label { font-weight: 600; font-size: 0.92rem; color: var(--navy-900); }
.req { color: var(--danger); }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  font-family: var(--font);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-050);
}

.password-field { position: relative; }
.password-field input[type="password"],
.password-field input[type="text"] {
  padding-left: 44px;
}
.password-toggle {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.password-toggle:hover { color: var(--navy-900); background: var(--blue-050); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle__icon-closed { display: none; }
.password-toggle.is-visible .password-toggle__icon-open { display: none; }
.password-toggle.is-visible .password-toggle__icon-closed { display: block; }

input[type="date"] {
  color-scheme: light;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }
select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%234a5468' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 34px;
}

/* شماره تلفن به‌صورت LTR تایپ می‌شه، پس کد کشور باید سمت چپِ باکسِ ورودی
   بشینه (شبیه فرمت بین‌المللی +98 912 345 6789) — به همین خاطر row-reverse. */
.phone-input { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
.phone-input__prefix {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* دراپ‌داونِ انتخاب کشور — جایگزینِ برچسبِ ثابتِ «+۹۸» قبلی، تا کاربر بتونه
   کد هر کشوری رو انتخاب کنه، نه فقط ایران. */
.phone-input__country {
  flex: 0 0 auto;
  max-width: 128px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.phone-input input { flex: 1; direction: ltr; text-align: right; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.checkbox-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--blue-600); flex-shrink: 0; }

.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ---------------- Flash messages ----------------
   به‌صورت toast شناور روی صفحه نمایش داده می‌شن (نه داخل جریان عادی صفحه)،
   تا هیچ فاصله‌ای بین نوار بالا و محتوای بعدش (مثل هیروی باهم‌بر) ایجاد نکنن،
   و بعد از چند ثانیه خودکار محو می‌شن. موقعیت دقیق (زیر نوار بالا) با
   flash.js تنظیم می‌شه. */
.flash-wrap {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 480px);
  margin: 0;
  pointer-events: none;
}
/* شیشه‌ی ماتِ خاکستری (مثلِ اعلان‌های iOS و کارتِ اعلانِ زنده‌ی کلاب): رنگ‌های زیرش محو از پشتش دیده می‌شن؛
   نوعِ پیام با یه دایره‌ی رنگی و آیکون (تیکِ سبز / علامتِ قرمز) مشخصه، نه رنگِ کلِ کادر */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 20px;
  font-size: 0.92rem; font-weight: 600; line-height: 1.7; color: #17212b;
  background: rgba(214, 217, 223, .58);
  -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%);
  border: .5px solid rgba(255, 255, 255, .35);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .06);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px);
  animation: flash-in 0.3s cubic-bezier(.2, .9, .25, 1.1) forwards;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .flash { background: rgba(232, 234, 238, .97); }
}
.flash__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.flash--success .flash__icon { background: #17a568; box-shadow: 0 2px 6px rgba(23, 165, 104, .35); }
.flash--error .flash__icon { background: #d94f4f; box-shadow: 0 2px 6px rgba(217, 79, 79, .35); }
.flash__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.flash__close {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent;
  color: rgba(23, 33, 43, .5); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s;
}
.flash__close:hover { background: rgba(255, 255, 255, .45); color: #17212b; }
.flash.is-leaving { animation: flash-out 0.35s ease forwards; }
@keyframes flash-in { to { opacity: 1; transform: translateY(0); } }
@keyframes flash-out { to { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .flash { animation-duration: .01s; }
}
.inline-error {
  background: #fdecec; color: #a33; border: 1px solid #f6c9c9;
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 12px;
}

/* ---------------- Contact summary ---------------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.summary-grid--thanks { grid-template-columns: repeat(2, 1fr); margin: 20px 0 24px; text-align: right; }
.summary-label { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 4px; }
.link-edit { color: var(--blue-600); font-weight: 700; font-size: 0.9rem; }

/* ---------------- Confirm / session summary page ---------------- */
.close-link {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.1rem;
  transition: background 0.12s ease, color 0.12s ease;
}
.close-link:hover { background: var(--bg); color: var(--navy-900); }

.spec-list { display: flex; flex-direction: column; }
.spec-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
}
.spec-label { font-weight: 700; color: var(--navy-900); white-space: nowrap; font-size: 0.94rem; }
.spec-fill { flex: 1; border-bottom: 1px dotted var(--border); margin-bottom: 5px; min-width: 20px; }
.spec-value { color: var(--ink-soft); white-space: nowrap; font-size: 0.94rem; }

.price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue-050);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 20px 0 24px;
  font-weight: 700;
  color: var(--navy-900);
}
.price-box strong { color: var(--blue-600); font-size: 1.05rem; }

.confirm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.confirm-actions .btn { flex: 0 0 auto; }

/* ---------------- Payment / checkout page ---------------- */
.section-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 8px 0 14px;
}

.gateway-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  .gateway-grid { grid-template-columns: 1fr; }
}

.gateway-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.gateway-option--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gateway-option--active {
  border-color: var(--blue-600);
  background: var(--blue-050);
}

.gateway-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  flex: 0 0 auto;
}
.gateway-option--disabled .gateway-icon { color: var(--ink-faint); }
.gateway-option--active .gateway-icon { color: var(--blue-600); }

.gateway-name { font-weight: 700; font-size: 0.9rem; color: var(--navy-900); }
.gateway-option--disabled .gateway-name { color: var(--ink-soft); }

.gateway-badge {
  position: absolute;
  top: -9px;
  inset-inline-end: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.gateway-check {
  position: absolute;
  top: -9px;
  inset-inline-end: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.payment-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 20px;
}

/* ---------------- Jalali calendar ---------------- */
.jalali-calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: #fbfcfe;
}
.jalali-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.jalali-calendar__label { font-weight: 700; color: var(--navy-900); }
.cal-nav {
  background: none;
  border: none;
  color: var(--blue-600);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.cal-nav:hover { background: var(--blue-050); }
.cal-nav:disabled { color: var(--ink-faint); cursor: not-allowed; }

.jalali-calendar__weekdays,
.jalali-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}
.jalali-calendar__weekdays span {
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding-bottom: 6px;
}
.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #fff;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s ease;
}
.cal-day:hover:not(.is-disabled) { border-color: var(--blue-400); }
.cal-day.is-disabled { color: var(--ink-faint); background: #f1f3f8; cursor: not-allowed; }
.cal-day.is-empty { visibility: hidden; }
.cal-day.is-today { border-color: var(--blue-400); font-weight: 700; }
.cal-day.is-selected {
  background: linear-gradient(95deg, var(--navy-900), var(--blue-600));
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}

/* ---------------- Time slots ---------------- */
.time-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.time-slot {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.12s ease;
}
.time-slot:hover { border-color: var(--blue-400); }
.time-slot.is-selected {
  background: linear-gradient(95deg, var(--navy-900), var(--blue-600));
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}

/* ---------------- Thanks ---------------- */
.thanks-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}

/* ---------------- Homepage: steps / FAQ / about ---------------- */
.section-title {
  font-size: 1.2rem;
  margin: 44px 0 18px;
}

.steps-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.step-number {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  font-weight: 800;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.step-body h3 { font-size: 1rem; margin-bottom: 4px; }
.step-body p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 20px;
  background: var(--surface);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--ink-soft);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--ink-soft); font-size: 0.92rem; padding-bottom: 16px; margin: 0; }

.about-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}
.about-card p { color: var(--ink-soft); }
.about-card__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.about-card__link { color: var(--blue-600); font-weight: 700; font-size: 0.92rem; }
.about-card__phone-note { font-size: 0.88rem; }
.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  background: var(--surface);
}
.social-icon:hover { background: var(--blue-050); color: var(--blue-600); }

/* ---------------- Homepage: hero ---------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 44px;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--blue-600) 55%, var(--blue-400) 100%);
}
.home-hero__glow {
  position: absolute;
  top: -140px;
  right: 6%;
  width: 420px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(90, 166, 255, 0.35), transparent 70%);
  pointer-events: none;
}
.home-hero__center {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-hero__title {
  color: #fff;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.35;
  margin-bottom: 14px;
}
.home-hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.9;
  max-width: 620px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .home-hero__title { white-space: nowrap; }
}

.home-hero__decor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 230px;
  z-index: 2;
  pointer-events: none;
}
.home-hero__decor--left { left: 2%; }
.home-hero__decor--right { right: 2%; }

.home-hero__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(5, 15, 35, 0.28);
  padding: 14px 18px;
}
.home-hero__card strong { display: block; color: var(--navy-900); font-size: 0.92rem; }
.home-hero__card span { display: block; color: var(--ink-soft); font-size: 0.78rem; margin-top: 2px; }
.home-hero__card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-hero__card--main {
  top: 16%;
  left: 0;
  transform: rotate(-4deg);
}
.home-hero__card--plane {
  bottom: 18%;
  left: 46px;
  padding: 12px;
  transform: rotate(9deg);
}
.home-hero__card--plane svg { color: var(--blue-500); }
.home-hero__card--check {
  top: 22%;
  right: 0;
  transform: rotate(5deg);
}
.home-hero__card--check svg { color: var(--success); flex: 0 0 auto; }
.home-hero__card--check span {
  font-size: 0.82rem;
  color: var(--navy-900);
  font-weight: 600;
  margin: 0;
}
.home-hero__card--doc {
  bottom: 16%;
  right: 46px;
  padding: 12px;
  transform: rotate(-8deg);
}
.home-hero__card--doc svg { color: var(--blue-600); }

@media (max-width: 1180px) {
  .home-hero__decor { display: none; }
}

@media (max-width: 860px) {
  .home-hero { padding: 40px 24px; }
  .home-hero__title { white-space: normal; }
  .home-hero__subtitle { max-width: 100%; }
}

/* ---------------- Homepage: pricing ---------------- */
.pricing-section { margin-top: 44px; }
main > .pricing-section:first-child { margin-top: 56px; }
.pricing-intro { color: var(--ink-soft); margin-top: -10px; margin-bottom: 24px; max-width: 640px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* --- بنر تخفیف ویژه‌ی افتتاحیه --- */
.deals-banner {
  display: flex;
  align-items: stretch;
  gap: 24px;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 8px;
}
.deals-banner__side {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 24px;
}
.deals-banner__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.deals-banner__title { color: #fff; font-size: 1.05rem; margin-bottom: 2px; }
.deals-banner__subtitle { color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; margin-bottom: 14px; }

.deals-banner__timer { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px 9px;
  min-width: 42px;
}
.timer-unit__value { font-weight: 800; font-size: 1.05rem; color: #fff; }
.timer-unit__label { font-size: 0.65rem; color: rgba(255, 255, 255, 0.8); }
.timer-sep { color: rgba(255, 255, 255, 0.6); font-weight: 800; }

.deals-banner__cards { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1040px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .deals-banner { flex-direction: column; padding: 22px; }
  .deals-banner__side {
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 0;
    padding-bottom: 20px;
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center;
}
.pricing-card--featured {
  border: 1.5px solid var(--blue-500);
  box-shadow: 0 16px 40px rgba(31, 111, 235, 0.14);
  position: relative;
}
.pricing-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pricing-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.price-discount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.price-discount__old {
  font-size: 0.88rem;
  color: var(--ink-faint);
  text-decoration: line-through;
}
.price-discount__badge {
  background: var(--danger);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-card__price {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 14px;
}
.pricing-card__price span { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.pricing-card__desc { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 20px; }

.pricing-card__features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.pricing-card__features svg { flex: 0 0 auto; margin-top: 2px; color: var(--success); }

.pricing-card .btn { margin-top: auto; white-space: nowrap; }

/* ---------------- Study path pages (e.g. masters in Germany) ---------------- */
.doc-section .muted { margin-bottom: 18px; }
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .doc-grid { grid-template-columns: 1fr; }
}
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.doc-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.doc-item h3 { font-size: 0.98rem; margin-bottom: 4px; }
.doc-item p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0; }

.age-info { margin: 44px 0 24px; }
.age-info h2 { font-size: 1.2rem; }
.age-info p { color: var(--ink-soft); margin-bottom: 0; }

/* ---------------- Document writing page ---------------- */
.pricing-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .pricing-grid--3 { grid-template-columns: 1fr; }
}

/* خدمتی که هنوز فعال نشده — کم‌رنگ و غیرقابل‌کلیک */
.pricing-card--soon { opacity: 0.55; }
.pricing-card__price--soon { color: var(--ink-faint); }
.is-disabled { pointer-events: none; cursor: default; }

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .reason-grid { grid-template-columns: 1fr; }
}
.reason-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 18px;
}
.reason-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blue-050);
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.reason-card h3 { font-size: 0.98rem; margin-bottom: 6px; }
.reason-card p { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 0; }

/* ---------------- About page ---------------- */
.about-block p { color: var(--ink-soft); }

.founders-intro {
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 24px;
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .founders-grid { grid-template-columns: 1fr; }
}

.founder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.founder-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.founder-photo {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  margin: 0 auto 20px;
  display: block;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.founder-card:hover .founder-photo {
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--shadow-card);
}
@media (max-width: 480px) {
  .founder-photo { width: 160px; height: 160px; }
}
.founder-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.founder-role { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; margin-bottom: 0; }

.value-grid, .why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 520px) {
  .value-grid, .why-grid { grid-template-columns: 1fr; }
}

.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.value-card h3 { font-size: 0.98rem; margin: 10px 0 4px; }
.value-card p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0; }

.value-icon, .why-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.why-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.why-card h3 { font-size: 0.96rem; margin-bottom: 4px; }
.why-card p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0; }

.about-cta { text-align: center; }
.about-cta .btn { margin-top: 6px; }

/* ---------------- Auth (login / OTP / dashboard) ---------------- */
.card--auth { text-align: center; }
.card--auth .field, .card--auth .form-row { text-align: right; }

.auth-icon-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-title { font-size: 1.15rem; margin-bottom: 6px; }
.auth-subtitle { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 22px; }
/* خط‌های کمکی زیر فرم‌های ورود/ثبت‌نام (رمزم را فراموش کرده‌ام، ثبت‌نام و ...) */
.auth-alt-line {
  margin: 14px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.auth-alt-line + .btn { margin-top: 14px; }

.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.otp-box {
  width: 48px;
  height: 54px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--navy-900);
}
.otp-box:focus { border-color: var(--blue-600); outline: none; box-shadow: 0 0 0 3px var(--blue-050); }

.otp-resend { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 18px; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--blue-600);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

.card--dashboard { max-width: 480px; margin: 40px auto; text-align: center; }
.dashboard-header {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: right;
  margin-bottom: 24px;
}
.dashboard-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dashboard-header h2 { font-size: 1.05rem; margin-bottom: 2px; }

.dashboard-empty {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  margin-bottom: 20px;
}
.dashboard-empty p { color: var(--ink-soft); margin-bottom: 16px; }

.dashboard-logout { color: var(--ink-faint); font-size: 0.86rem; }
.dashboard-logout:hover { color: var(--navy-900); }

/* ---------------- Dashboard (sidebar layout) ---------------- */
/* داشبورد به سبک اپلیکیشن‌های معمول: نوار کناری چسبیده به لبه‌ی صفحه و تمام‌قد */
/* به‌جای فرض کردن یه عدد ثابت برای ارتفاع نوار بالا (که بسته به مرورگر/رندر فونت کمی فرق می‌کنه
   و باعث یه گپ خالی ته صفحه می‌شد)، بدنه‌ی صفحه رو فلکس-ستونی می‌کنیم تا main دقیقاً باقی‌مونده‌ی
   ارتفاع صفحه رو (هر چقدر که نوار بالا واقعاً باشه) پر کنه. */
body:has(.dash-layout) {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.dash-layout) .site-footer { display: none; }
main:has(.dash-layout) {
  max-width: 100%;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dash-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  height: 100%;
}

.dash-sidebar {
  flex: 0 0 260px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 24px 22px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dash-user {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  box-sizing: border-box;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  /* ارتفاع این بخش عمداً با هدر ستون‌های کناری (لیست گفتگو/گفتگوی فعال) هم‌اندازه‌ست
     تا با احتساب padding-top سایدبار (24px)، خط جداکننده‌ی هر سه ستون هم‌راستا بشه */
}
.dash-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dash-user h3 { font-size: 0.94rem; margin-bottom: 2px; }
.dash-user .muted { font-size: 0.8rem; margin-bottom: 0; overflow-wrap: anywhere; }
.dash-user__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #157a4d;
  vertical-align: middle;
  margin-inline-start: 3px;
  cursor: default;
}

/* تولتیپ سبک و سریع (به‌جای title پیش‌فرض مرورگر که دیر ظاهر می‌شه) — برای
   نشان‌های کوچیک مثل احراز هویت که خودشون متن ندارن و توضیح لازم دارن */
.bar-tooltip { position: relative; }
.bar-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%) translateY(4px);
  background: var(--navy-900);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(11, 28, 58, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 60;
}
.bar-tooltip:hover::after,
.bar-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0);
}

.dash-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.dash-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease;
}
.dash-nav__item:hover { background: var(--bg); color: var(--navy-900); }
.dash-nav__item.is-active { background: var(--blue-050); color: var(--blue-600); }
.dash-nav__icon { display: inline-flex; flex: 0 0 auto; }

.dash-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 0.86rem;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.dash-logout:hover { color: var(--danger); }

/* صفحه‌ی چت: نوار کناری داشبورد به‌صورت پیش‌فرض کاملاً جمع‌شده و هیچی ازش دیده نمی‌شه
   (نه حتی یه نوار باریک) — به‌جاش یه دایره‌ی پروفایل تو نوار بالای صفحه (navbar) هست که
   باهاش می‌شه این ستون رو کشویی باز/بسته کرد؛ وقتی باز می‌شه دقیقاً مثل حالت همیشگیِ
   سایدبار می‌مونه. */
.dash-layout--chat .dash-sidebar {
  flex-basis: 0;
  width: 0;
  padding: 0;
  border-left-width: 0;
  overflow: hidden;
  transition: flex-basis 0.28s ease, width 0.28s ease, padding 0.28s ease, border-left-width 0.28s ease;
}
.dash-layout--chat .dash-sidebar.is-open {
  flex-basis: 260px;
  width: 260px;
  padding: 24px 22px;
  border-left-width: 1px;
}
.dash-layout--chat .dash-sidebar .dash-nav,
.dash-layout--chat .dash-sidebar .dash-logout {
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.dash-layout--chat .dash-sidebar.is-open .dash-nav,
.dash-layout--chat .dash-sidebar.is-open .dash-logout {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease 0.08s;
}
/* عکس و اسم پروفایل تو صفحه‌ی چت دیگه بالای همین ستون تکرار نمی‌شه — چون همون‌ها
   الان کنار دکمه‌ی بازوبسته‌کردن، تو نوار بالای صفحه نشون داده می‌شن */
.dash-layout--chat .dash-sidebar .dash-user { display: none; }

/* دایره‌ی پروفایل توی نوار بالای صفحه، مخصوص صفحه‌ی چت — همون دایره‌ای که قبلاً بالای
   ستون سمت راست بود، الان یه‌کم فاصله از لبه‌ی راستِ navbar داره (نه کاملاً چسبیده) و
   کلیک روش سایدبار رو کشویی باز/بسته می‌کنه. آیکون فلشِ کنارش هم نشون می‌ده که کلیک
   روش یه منو باز می‌کنه. */
.navbar__chat-sidebar-trigger {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  color: var(--ink-faint);
  /* دکمه‌های HTML به‌صورت پیش‌فرض فونتِ رابط کاربریِ خودِ مرورگر رو استفاده می‌کنن، نه
     فونتِ صفحه (Vazirmatn) که روی html/body ست شده — این باعث می‌شد اسمِ کنارِ عکس یه
     فونتِ کاملاً متفاوت و نچسب داشته باشه. با ست‌کردنِ صریحش این ارثیه شکسته می‌شه. */
  font-family: var(--font);
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar__chat-sidebar-trigger:hover { background: var(--bg); color: var(--ink-soft); }
.navbar__chat-sidebar-trigger .dash-avatar { width: 46px; height: 46px; flex: 0 0 auto; }
.navbar__chat-sidebar-trigger-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.88rem;
}
.navbar__chat-sidebar-trigger-arrow { display: inline-flex; flex: 0 0 auto; }
/* برای اینکه دایره‌ی گنده‌تر، اسم کنارش و فلشِ کنارش با لوگوی برند قاطی نشن، وقتی این
   دکمه هست یه‌کم فضای خالیِ بیشتر سمت راستِ navbar__inner رزرو می‌کنیم تا محتوا (لوگو و ...) عقب‌تر بره */
.navbar__inner--has-chat-trigger { padding-right: 230px; }

.dash-content {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
  /* توضیح: توی صفحاتِ dir="rtl"، مرورگر به‌صورت پیش‌فرض اسکرول‌بارِ عمودی رو
     سمتِ چپ می‌ذاره (چون جهتِ inline از راست شروع می‌شه). برای اینکه اسکرول‌بار
     سمتِ راستِ صفحه (کنارِ نوارِ کناری) بمونه، خودِ این باکس رو ltr می‌کنیم — که
     اسکرول‌بارش رو می‌بره سمتِ راست — و جهتِ rtl رو دوباره روی بچه‌های مستقیمش
     برمی‌گردونیم تا چیدمان و جهتِ متن عوض نشه. */
  direction: ltr;
}
.dash-content > * { direction: rtl; }
.dash-content__head { margin-bottom: 20px; }
.dash-content__head h1 { font-size: 1.3rem; }
.dash-content__head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* وقتی فقط دکمه‌ای توی این ردیف مونده (بدون عنوان)، دکمه سمت مقابل خودش (چپ) بمونه */
.dash-content__head--end { justify-content: flex-end; }

.dash-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.dash-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dash-summary-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dash-summary-card h3 { font-size: 0.94rem; margin-bottom: 4px; }
.dash-summary-card .muted { font-size: 0.85rem; margin-bottom: 6px; }

.dash-cta-card {
  background: var(--blue-050);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}
.dash-cta-card p { margin-bottom: 0; font-weight: 600; color: var(--navy-900); }

/* --- Resume form --- */
.resume-section { margin-bottom: 20px; }
.resume-section .card__header h2 { font-size: 1.02rem; margin-bottom: 0; }
/* یادداشت ثابت بالای فرم‌ها. از .flash استفاده نمی‌کنیم چون اون یک توست شناوره. */
.form-note {
  background: var(--blue-050);
  border: 1px solid #d5e6ff;
  color: var(--navy-800);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

.field-hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: -2px; }
.field-hint--inline { font-weight: 400; margin-top: 0; }
.field-hint--inline:not([hidden]) { display: inline; }
.field-hint--warn { color: var(--danger); }
.bar-verify-selfie-hint { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.bar-verify-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }

.radio-row { display: flex; gap: 20px; margin-top: 4px; }
.radio-option { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.94rem; color: var(--ink); }
.radio-option input { width: auto; }

.lang-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.lang-row .field { margin-bottom: 0; }
.lang-row__remove {
  width: 36px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-faint);
  font-size: 1.1rem;
  cursor: pointer;
}
.lang-row__remove:hover { color: var(--danger); border-color: var(--danger); }

/* --- ردیف‌های تکرارشونده‌ی فرم‌های نگارش مدارک (تحصیلات، مقالات، سوابق کاری و ...) --- */
.repeat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.repeat-row__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.repeat-row__fields .field { margin-bottom: 0; }
.repeat-row__fields .field--wide { grid-column: 1 / -1; }
.repeat-row__remove {
  width: 36px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-faint);
  font-size: 1.1rem;
  cursor: pointer;
}
.repeat-row__remove:hover { color: var(--danger); border-color: var(--danger); }
.repeat-add { margin-bottom: 18px; }

/* --- Profile view / edit --- */
.profile-view__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.profile-view__row:last-child { border-bottom: none; }
.profile-view__label { color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }
.profile-view__value { font-weight: 600; color: var(--navy-900); }

.profile-edit__actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---------------- Consultation choice cards ---------------- */
.consultation-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.consultation-status p { margin-bottom: 0; }

.consultation-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.consultation-choice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}
.consultation-choice-card--soon { opacity: 0.82; }
.consultation-choice-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.consultation-choice-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.consultation-choice-card p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 20px; flex: 1 1 auto; }

/* ---------------- Consultation wizard ---------------- */
.wizard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.wizard-tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  /* بدون این، مرورگر فونت پیش‌فرض خودش رو روی <button> می‌ذاره و با بقیه‌ی صفحه فرق می‌کنه */
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline-start: 7px;
}
.wizard-tab:hover { color: var(--navy-900); }
.wizard-tab.is-active { background: var(--blue-050); color: var(--blue-600); border-color: var(--blue-500); }
/* شماره‌ی هر مرحله داخل یک دایره‌ی کوچک، جدا از عنوان */
.wizard-tab__num {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.wizard-tab.is-active .wizard-tab__num { background: var(--blue-600); color: #fff; }

.wizard-card { padding: 28px; }

.level-panel {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.level-panel__title { font-size: 0.98rem; margin-bottom: 12px; }
.grad-detail { margin-top: 12px; }

.checkbox-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.checkbox-pill input { accent-color: var(--blue-600); }
.checkbox-pill:has(input:checked) { background: var(--blue-050); border-color: var(--blue-500); color: var(--blue-600); }

.pill-toggle { display: flex; gap: 10px; margin-top: 6px; }
.pill-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.pill-toggle input { accent-color: var(--blue-600); }
.pill-toggle label.is-checked,
.pill-toggle label:has(input:checked) { background: var(--blue-050); border-color: var(--blue-500); color: var(--blue-600); }

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* --- جایزه و تخفیف --- */
.gift-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.gift-card__body h2 { font-size: 1.05rem; margin-bottom: 6px; }
.gift-card__body p { margin-bottom: 0; }
.gift-card .btn { flex: 0 0 auto; }

.gift-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.gift-result--won {
  background: #e9f9f1;
  border-color: #bfeed6;
}
.gift-result--empty {
  background: var(--bg);
}
.gift-result__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.gift-result__body h3 { font-size: 1rem; margin-bottom: 6px; }
.gift-result__body p { margin-bottom: 6px; }
.gift-code {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  background: #fff;
  border: 1px dashed var(--success);
  color: #157a4d;
  border-radius: 10px;
  padding: 8px 16px;
}

.gift-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.gift-code-row--table { margin: 0; gap: 6px; }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.copy-btn:hover { background: var(--blue-050); border-color: var(--blue-500); color: var(--blue-600); }
.copy-btn.is-copied { background: #e9f9f1; border-color: #bfeed6; color: #157a4d; }
.copy-btn--sm { padding: 4px 8px; border-radius: 6px; }

@media (max-width: 860px) {
  body:has(.dash-layout) { display: block; height: auto; overflow: visible; }
  body:has(.dash-layout) .site-footer { display: block; }
  main:has(.dash-layout) { height: auto; overflow: visible; flex: none; }
  .dash-layout { flex-direction: column; min-height: auto; height: auto; }
  .dash-sidebar {
    position: static;
    width: 100%;
    flex-basis: auto;
    height: auto;
    overflow-y: visible;
    border-left: none;
    border-bottom: 1px solid var(--border);
  }
  .dash-content { width: 100%; height: auto; overflow-y: visible; padding: 24px 20px 40px; }
  .dash-summary-grid { grid-template-columns: 1fr; }
  .lang-row { grid-template-columns: 1fr; }
  .lang-row__remove { width: 100%; }
  .consultation-choice-grid { grid-template-columns: 1fr; }
  .wizard-card { padding: 20px 16px; }
  .gift-card { flex-direction: column; align-items: stretch; text-align: center; }
  .gift-card .btn { width: 100%; }
}

/* ---------------- Admin ---------------- */
.admin-wrap { max-width: 100%; }
/* پنلِ ادمین جدول‌های پهن داره و نوارِ بالاش هم تب‌های هر خدمت رو جا می‌ده، پس
   از بقیه‌ی سایت پهن‌تره؛ عرضِ محتوا و نوار یکیه تا لبه‌هاشون هم‌تراز بمونن. */
main:has(.admin-wrap) { max-width: 1280px; }

/* صفحه‌ی چتِ پشتیبانیِ ادمین: برخلافِ بقیه‌ی صفحاتِ ادمین که عادی اسکرول می‌خورن،
   این صفحه (مثلِ صفحه‌ی چتِ خودِ باهم‌بر که bar-chat-shell ازش می‌آد) باید کلِ ارتفاعِ
   باقی‌مونده‌ی صفحه (بعد از navbar) رو بگیره تا لیست/ترد بتونن خودشون جدا اسکرول
   بخورن، نه کلِ صفحه. با همون تکنیکِ body:has(.dash-layout) بالاتر. */
body:has(.admin-chat-page) {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.admin-chat-page) .site-footer { display: none; }
main:has(.admin-chat-page) {
  max-width: 100%;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.admin-chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.admin-chat-page .dash-layout--chat { flex: 1 1 auto; min-height: 0; height: auto; }

/* ---------- نوارِ بالای پنل ادمین: منوی «خدمات» ---------- */
.admin-nav-start { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-services__trigger {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--navy-900);
  position: relative;
}
.admin-services__trigger:hover,
.admin-services.is-open .admin-services__trigger { border-color: var(--blue-400); background: var(--blue-050); }
.admin-services__label { color: var(--ink-faint); font-weight: 600; }
.admin-services__current { font-weight: 800; color: var(--blue-600); }
.admin-services__dot {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px #fff;
}
.admin-services__menu { min-width: 320px; padding: 8px; gap: 4px; }
.admin-services__title { font-size: 0.78rem; font-weight: 800; color: var(--ink-faint); padding: 4px 8px 6px; }
.admin-services__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: var(--ink);
  transition: background 0.12s ease;
}
.admin-services__item:hover { background: var(--bg); }
.admin-services__item.is-current { background: var(--blue-050); }
.admin-services__item.is-current strong { color: var(--blue-600); }
.admin-services__icon { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; flex: 0 0 38px; }
.admin-services__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.admin-services__text strong { font-size: 0.94rem; color: var(--navy-900); }
.admin-services__text small { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.6; }
@media (max-width: 640px) {
  .admin-services__label { display: none; }
  .admin-services__menu { min-width: 0; }
}

/* ---------- تب‌های خدمتِ فعلی، داخلِ خودِ نوارِ بالا ----------
   ترتیب (راست به چپ): لوگو و منوی «خدمات» ← تب‌ها ← «خروج». تب‌ها هرچقدر جا باشه
   می‌گیرن و اگه جا کم بیاد افقی اسکرول می‌خورن (بدونِ نوارِ اسکرولِ نمایان)؛ توی
   عرض‌های کمتر، کلِ ردیفِ تب‌ها می‌ره خطِ دوم — ولی همچنان داخلِ همون نوارِ سفید. */
.navbar--admin .navbar__inner {
  max-width: 1280px;
  flex-wrap: nowrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar--admin .admin-nav-start { flex: 0 0 auto; }
.admin-nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.admin-nav-tabs::-webkit-scrollbar { display: none; }
.admin-nav-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-nav-tab:hover { background: var(--bg); color: var(--navy-900); }
.admin-nav-tab.is-active { background: var(--blue-050); color: var(--blue-600); }
/* صفحه‌ی چت تمام‌عرضه، پس نوارش هم تمام‌عرض می‌شه تا لوگو و «خروج» با لبه‌های چت هم‌تراز باشن */
body:has(.admin-chat-page) .navbar--admin .navbar__inner { max-width: none; }
@media (max-width: 1100px) {
  .navbar--admin .navbar__inner { flex-wrap: wrap; row-gap: 8px; }
  .navbar--admin .admin-nav-tabs {
    order: 3;
    flex: 1 1 100%;
    margin: 0 -20px;
    padding: 2px 20px 0;
  }
}
@media (max-width: 640px) {
  .navbar--admin .navbar__inner { padding: 8px 16px; gap: 10px; }
  .navbar--admin .admin-nav-tabs { margin: 0 -16px; padding: 2px 16px 0; }
  .admin-nav-tab { padding: 7px 11px; font-size: 0.84rem; }
}

/* سرِ لیستِ گفتگوهای چتِ پشتیبانیِ ادمین: عنوان + آمار (به‌جای یه ردیفِ جدا بالای صفحه) */
.admin-chat-list-head {
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-chat-list-head__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.admin-chat-list-head__stats .stat-pill { padding: 4px 10px; font-size: 0.76rem; }

.tab-badge {
  background: #fff4e0;
  color: #a5690a;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}

/* ---------- منوی حسابِ ادمین (سمتِ چپِ نوار) ---------- */
.admin-account { flex: 0 0 auto; margin-inline-start: auto; }
.admin-account__trigger { padding: 5px 8px 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.admin-account__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--navy-900); font-size: 0.88rem; }
.admin-account__menu { right: auto; left: 0; min-width: 240px; padding: 8px; }
.admin-account__head { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.admin-account__head strong { color: var(--navy-900); font-size: 0.95rem; }
.admin-account__head small { color: var(--ink-faint); font-size: 0.78rem; }
.admin-account__item { padding: 9px 10px; border-radius: 8px; font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
.admin-account__item:hover { background: var(--blue-050); color: var(--blue-600); }
.admin-account__item--danger { color: var(--danger); border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; }
.admin-account__item--danger:hover { background: #fdeaea; color: var(--danger); }
.admin-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy-900); color: #fff; font-weight: 800; font-size: 0.85rem;
}
.admin-avatar--soft { background: var(--blue-050); color: var(--blue-600); }
.admin-avatar--lg { width: 64px; height: 64px; font-size: 1.6rem; }
.admin-services--home .admin-services__label { display: inline !important; color: var(--navy-900); font-weight: 700; }
@media (max-width: 640px) {
  .admin-account__name { display: none; }
  .admin-account__trigger { padding: 4px 6px; }
}

/* ---------- پیشخوان و صفحه‌های حساب (پیشوندِ adm-) ---------- */
.adm-subtitle { margin: 4px 0 0; font-size: 0.9rem; }
.adm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 18px 20px; }
.adm-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.adm-card__head h3 { margin: 0; font-size: 1.02rem; color: var(--navy-900); }
.adm-card__head p { margin: 4px 0 0; font-size: 0.82rem; }
.adm-section-title { font-size: 1.1rem; color: var(--navy-900); margin: 8px 0 12px; }
.adm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.adm-link { color: var(--blue-600); font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.adm-link:hover { text-decoration: underline; }
.adm-pill-ok { background: #e9f9f1; color: #157a4d; }
.adm-pill-action { display: inline-flex; align-items: center; gap: 6px; }
.adm-pill-action:hover { background: var(--blue-600); color: #fff; }
.adm-note { margin: 12px 0 0; font-size: 0.76rem; color: var(--ink-faint); line-height: 1.8; }

.adm-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.adm-service-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.adm-service-card__head { display: flex; align-items: center; gap: 10px; }
.adm-service-card__icon { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; }
.adm-service-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-service-card__title h3 { margin: 0; font-size: 1rem; color: var(--navy-900); }
.adm-pending { align-self: flex-start; background: #fff4e0; color: #a5690a; font-size: 0.72rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.adm-pending--ok { background: #e9f9f1; color: #157a4d; }
.adm-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.adm-todo__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 0.86rem; color: var(--ink-faint); }
.adm-todo__row:hover { background: var(--bg); color: var(--navy-900); }
.adm-todo__count { font-weight: 800; min-width: 24px; text-align: center; }
.adm-todo__row.is-hot { color: var(--navy-900); font-weight: 600; }
.adm-todo__row.is-hot .adm-todo__count { background: #fff4e0; color: #a5690a; border-radius: 999px; padding: 1px 8px; }
.adm-service-card__stats { display: flex; flex-wrap: wrap; gap: 4px 14px; border-top: 1px dashed var(--border); padding-top: 10px; font-size: 0.8rem; color: var(--ink-faint); }
.adm-service-card__stats strong { color: var(--navy-900); }

.adm-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.adm-kpi { display: flex; flex-direction: column; gap: 4px; transition: border-color 0.12s ease, transform 0.12s ease; }
.adm-kpi:hover { border-color: var(--blue-400); transform: translateY(-1px); }
.adm-kpi__label { font-size: 0.84rem; color: var(--ink-soft); font-weight: 700; }
.adm-kpi__value { font-size: 1.9rem; line-height: 1.2; color: var(--navy-900); font-weight: 800; }
.adm-kpi__sub { font-size: 0.78rem; color: var(--ink-faint); }
.adm-delta { font-weight: 800; color: var(--ink-soft); }
.adm-delta--up { color: #157a4d; }
.adm-delta--down { color: #b23a3a; }

.adm-stats-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.adm-stats-grid > *, .adm-kpi-grid > * { min-width: 0; }
.adm-chart-card { grid-row: span 2; display: flex; flex-direction: column; }
.adm-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex: 0 0 auto; }
.adm-seg__btn { padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.adm-seg__btn.is-active { background: var(--surface); color: var(--blue-600); box-shadow: 0 1px 4px rgba(11, 28, 58, 0.1); }
.adm-chart { flex: 1; display: flex; flex-direction: column; min-height: 260px; padding: 0 18px; overflow: hidden; }
.adm-chart__bars {
  flex: 1; display: flex; align-items: flex-end; gap: 3px; min-height: 220px;
  padding-top: 20px; border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(to top, transparent 0, transparent 54px, var(--border) 54px, var(--border) 55px);
}
.adm-chart--dense .adm-chart__bars { gap: 1px; }
.adm-chart__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; position: relative; }
.adm-chart__bar { width: 100%; max-width: 26px; min-height: 0; background: linear-gradient(to top, var(--blue-600), var(--blue-400)); border-radius: 5px 5px 2px 2px; transition: opacity 0.12s ease; }
.adm-chart__col:hover .adm-chart__bar { opacity: 0.75; }
.adm-chart__col.is-today .adm-chart__bar { background: linear-gradient(to top, var(--amber-600), var(--amber-400)); }
.adm-chart__num { font-size: 0.66rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 3px; }
.adm-chart__axis { display: flex; gap: 3px; }
.adm-chart--dense .adm-chart__axis { gap: 1px; }
.adm-chart__tick { flex: 1; min-width: 0; font-size: 0.68rem; color: var(--ink-faint); text-align: center; white-space: nowrap; overflow: visible; padding-top: 6px; }
/* تیکِ امروز (آخرین ستون، سمتِ چپ) به‌جای بیرون‌زدن از کادر، به سمتِ داخل سرریز می‌شه */
.adm-chart__tick:last-child { display: flex; justify-content: flex-end; }
.adm-chart__tick:first-child { display: flex; justify-content: flex-start; }
.adm-chart__empty { text-align: center; margin: 10px 0 0; font-size: 0.85rem; }

.adm-active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-active__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; background: var(--bg); text-align: center; }
.adm-active__item:hover { background: var(--blue-050); }
.adm-active__item strong { font-size: 1.5rem; color: var(--navy-900); }
.adm-active__item span { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.adm-active__item small { font-size: 0.72rem; color: var(--ink-faint); }

.adm-usage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-usage__row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; }
.adm-usage__row:hover { background: var(--bg); }
.adm-usage__label { font-size: 0.86rem; font-weight: 700; color: var(--navy-900); }
.adm-usage__track { height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.adm-usage__fill { display: block; height: 100%; border-radius: 999px; background: var(--blue-500); min-width: 2px; }
.adm-usage__fill--bar { background: var(--amber-500); }
.adm-usage__fill--arz { background: #10a37f; }
.adm-usage__fill--club { background: #2aabee; }
.adm-usage__num { font-size: 0.86rem; font-weight: 800; color: var(--navy-900); white-space: nowrap; }
.adm-usage__num small { color: var(--ink-faint); font-weight: 600; }
.adm-usage__extra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.8rem; color: var(--ink-soft); }
.adm-usage__extra a:hover { color: var(--blue-600); }

.adm-recent-card { grid-column: 1 / -1; }
.adm-recent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.adm-recent li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-recent__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-recent__text strong { font-size: 0.88rem; color: var(--navy-900); }
.adm-recent__text bdi { font-size: 0.76rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.adm-recent__time { font-size: 0.74rem; color: var(--ink-faint); white-space: nowrap; }

/* لیستِ کاربران */
.adm-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin-bottom: 14px; }
.adm-filterbar__search { flex: 1 1 240px; position: relative; display: flex; align-items: center; }
.adm-filterbar__search svg { position: absolute; right: 12px; color: var(--ink-faint); pointer-events: none; }
.adm-filterbar__search input { padding: 9px 36px 9px 12px; font-size: 0.9rem; }
.adm-filterbar select { width: auto; flex: 0 1 auto; padding: 9px 10px; font-size: 0.85rem; }
.adm-filterbar__actions { display: flex; gap: 6px; }
.adm-user-cell { display: flex; align-items: center; gap: 10px; }
.adm-user-cell > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.adm-user-cell__email { flex-basis: 100%; font-size: 0.78rem; color: var(--ink-faint); text-align: right; }
.adm-td-start { text-align: right !important; }
.adm-td-wrap { white-space: normal; max-width: 280px; }
.adm-chip { display: inline-block; padding: 2px 8px; margin: 1px 0 1px 3px; border-radius: 999px; background: var(--bg); color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; border: 1px solid var(--border); }
.adm-chip--warn { background: #fff4e0; color: #a5690a; border-color: transparent; }
.adm-chip--role { background: var(--blue-050); color: var(--blue-600); border-color: transparent; }
.adm-chip--owner { background: var(--navy-900); color: #fff; border-color: transparent; }
.adm-chip--apply { background: var(--blue-050); color: var(--blue-600); border-color: transparent; }
.adm-chip--bar { background: var(--amber-050); color: var(--amber-600); border-color: transparent; }
.adm-chip--arz { background: #e6f7f1; color: #0b7a5e; border-color: transparent; }
.adm-chip--club { background: #f0f9fe; color: #187bb3; border-color: transparent; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.adm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.adm-pager__btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 0.85rem; color: var(--navy-900); }
.adm-pager__btn:hover { border-color: var(--blue-400); color: var(--blue-600); }
.adm-pager__info { font-size: 0.85rem; color: var(--ink-soft); }
.adm-row-muted td { opacity: 0.6; }

/* پروفایل */
.adm-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.adm-profile-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.adm-profile-card__top h2 { margin: 0; font-size: 1.2rem; color: var(--navy-900); }
.adm-profile-card__top p { margin: 2px 0 0; font-size: 0.85rem; }
.adm-dl { margin: 0; display: flex; flex-direction: column; }
.adm-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 0.88rem; }
.adm-dl dt { color: var(--ink-faint); font-weight: 600; }
.adm-dl dd { margin: 0; color: var(--navy-900); text-align: left; }
.adm-perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-perm-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.adm-perm-list li.is-on { background: #f1fbf6; }
.adm-perm-list li.is-off { opacity: 0.55; }
.adm-perm-list li > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.adm-perm-list strong { font-size: 0.9rem; color: var(--navy-900); }
.adm-perm-list small { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.7; }
.adm-perm-list__mark { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; background: var(--bg); color: var(--ink-faint); }
.adm-perm-list li.is-on .adm-perm-list__mark { background: #17a568; color: #fff; }

/* فرمِ ادمین */
.adm-form { display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.adm-form__group { border: 0; padding: 0 0 16px; margin: 0 0 8px; border-bottom: 1px solid var(--border); min-width: 0; }
.adm-form__group legend { font-weight: 800; color: var(--navy-900); margin-bottom: 12px; padding: 0; font-size: 1rem; }
.adm-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.adm-form__actions { display: flex; gap: 10px; padding-top: 6px; }
.adm-role-options, .adm-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 10px; }
.adm-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 400; transition: border-color 0.12s ease, background 0.12s ease; }
.adm-option:hover { border-color: var(--blue-400); }
.adm-option:has(input:checked) { border-color: var(--blue-500); background: var(--blue-050); }
.adm-option input { margin-top: 4px; width: auto; flex: 0 0 auto; accent-color: var(--blue-600); }
.adm-option > span { display: flex; flex-direction: column; gap: 2px; }
.adm-option strong { font-size: 0.92rem; color: var(--navy-900); }
.adm-option small { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.7; }
/* با «مدیرِ کل» همه‌ی دسترسی‌ها خودکار داده می‌شه، پس تیک‌ها بی‌معنی‌ان */
.adm-form:has(input[name="role"][value="superadmin"]:checked) .adm-perms { opacity: 0.4; pointer-events: none; }
.field-error { color: var(--danger); font-size: 0.8rem; margin: 2px 0 0; font-weight: 600; }
.adm-legend { margin-top: 16px; }
.adm-legend h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--navy-900); }
.adm-legend ul { margin: 0; padding-inline-start: 18px; font-size: 0.84rem; color: var(--ink-soft); line-height: 2; }

.adm-empty-state { text-align: center; max-width: 460px; margin: 60px auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.adm-empty-state__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--blue-050); color: var(--blue-600); display: flex; align-items: center; justify-content: center; }
.adm-empty-state h1, .adm-empty-state h2 { margin: 8px 0 0; font-size: 1.3rem; color: var(--navy-900); }
.adm-empty-state__actions { display: flex; gap: 10px; margin-top: 10px; }

@media (max-width: 980px) {
  .adm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-stats-grid, .adm-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-chart-card { grid-row: auto; }
  .adm-recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .adm-kpi-grid { gap: 10px; }
  .adm-kpi__value { font-size: 1.5rem; }
  .adm-card { padding: 14px; }
  .adm-chart__num { display: none; }
  .adm-chart__tick { font-size: 0.6rem; }
  .adm-chart { padding: 0 12px; }
  .adm-recent { grid-template-columns: 1fr; }
  .adm-filterbar select { flex: 1 1 45%; }
  .adm-filterbar__actions { flex: 1 1 100%; }
  .adm-filterbar__actions .btn { flex: 1; }
}

.message-cell { white-space: normal; max-width: 320px; }

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 16px;
}
.admin-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stat-pill {
  background: var(--blue-050);
  color: var(--blue-600);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.stat-pill--new { background: #fff4e0; color: #a5690a; }

.admin-filters { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-verify-guide {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 14px;
}
.filter-tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  background: #fff;
}
.filter-tab.is-active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  box-shadow: var(--shadow-soft);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; white-space: nowrap; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--ink-faint); font-weight: 700; font-size: 0.8rem; }
.admin-table tbody tr:hover { background: var(--bg); }
.empty-row { text-align: center; color: var(--ink-faint); padding: 40px !important; }
/* توجه: display:flex مستقیم روی <td> نذار — چون تویِ table-cell باعث میشه سلول
   با ارتفاعِ ردیف (وقتی ردیفِ کناری بلندتره، مثلاً وضعیتِ «توافق‌شده» دو خطیه) هم‌راستا
   نشه و خط افقیِ زیرِ جدول دقیقاً همون‌جا بریده/جابه‌جا به‌نظر برسه. برای همین فلکس رو
   بردیم روی یه div داخلیِ .bar-table-actions-row و خودِ <td> رو دست‌نخورده (table-cell) نگه داشتیم. */
.bar-saved-listing__actions { white-space: nowrap; }
.bar-table-actions-row { display: flex; align-items: center; gap: 8px; }
.bar-inline-form { display: inline-flex; }

.admin-id-thumb {
  display: inline-block;
  width: 64px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.admin-id-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-id-note { white-space: normal; max-width: 220px; font-size: 0.78rem; margin: 4px 0 0; }
.admin-listing-reject-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); max-width: 440px; }
.admin-reject-details { display: inline-block; margin-inline-start: 6px; position: relative; }
.admin-reject-details summary { list-style: none; cursor: pointer; }
.admin-reject-details summary::-webkit-details-marker { display: none; }
.admin-reject-form {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  display: flex;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px;
  white-space: nowrap;
}
.admin-reject-form input[type="text"] { width: 200px; }

/* --- نمایش پاسخ‌های سفارش نگارش مدارک در پنل ادمین --- */
.json-tree { list-style: none; margin: 0; padding: 0 14px 0 0; }
.json-tree .json-tree { border-right: 1px solid var(--border); margin: 4px 0; }
.json-tree li { padding: 3px 0; font-size: 0.9rem; }
.json-key { color: var(--ink-faint); font-weight: 700; font-size: 0.82rem; }
.json-value { color: var(--ink); }
.json-dump {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 0.8rem;
  line-height: 1.7;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.doc-status-form { display: flex; align-items: flex-end; gap: 12px; margin-top: 18px; }
.doc-status-form .field { margin-bottom: 0; min-width: 200px; }
.doc-json-actions { display: flex; align-items: center; gap: 8px; }

.status-badge { padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.status-badge--new { background: #fff4e0; color: #a5690a; }
.status-badge--contacted { background: #e9f9f1; color: #157a4d; }
.status-badge--pending { background: #fff4e0; color: #a5690a; }
.status-badge--approved { background: #e9f9f1; color: #157a4d; }
.status-badge--matched { background: var(--blue-050); color: var(--blue-600); }
.status-badge--rejected { background: #fdeaea; color: #b23a3a; }
.status-badge--closed { background: var(--bg); color: var(--ink-faint); }

/* ---------------- Footer ---------------- */
.site-footer {
  flex-shrink: 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.82rem;
  padding: 24px 20px 40px;
}

/* باهم‌بر — به‌جای تک‌خط کپی‌رایت قبلی، فوتر کامل‌تر با برند، توضیح کوتاه و لینک‌های سریع */
.bar-footer {
  text-align: initial;
  padding: 32px 20px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.bar-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
}
.bar-footer__brand { max-width: 420px; }
.bar-footer__logo {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--bar-ink);
  margin-bottom: 6px;
}
.bar-footer__tagline {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}
.bar-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.bar-footer__links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bar-ink);
  text-decoration: none;
}
.bar-footer__links a:hover { color: var(--amber-600); }
.bar-footer__bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 0 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
@media (max-width: 640px) {
  .bar-footer__inner { flex-direction: column; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .card--info { position: static; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-grid--thanks { grid-template-columns: 1fr; }
  .card { padding: 20px; }
  /* نوار بالای باهم‌اپلای روی موبایل به یک ردیف جمع می‌شه: لوگو + حساب کاربری +
     دکمه‌ی منو. لینک‌ها به یک پنل بازشونده زیر همون ردیف منتقل می‌شن (کلاس
     is-nav-open روی خود هدر).

     همه‌ی این رول‌ها عمداً به .navbar--collapsible محدودن: نوار باهم و باهم‌بر
     همین کلاس‌های .navbar__links رو دارن ولی دکمه‌ی همبرگری ندارن، پس اگه
     محدود نبود لینک‌هاشون روی موبایل مخفی می‌شد بدون هیچ راهی برای بازکردن. */
  .navbar--collapsible .navbar__inner { padding: 9px 16px; gap: 10px; }
  .navbar--collapsible .navbar__toggle { display: inline-flex; order: 3; }
  .navbar--collapsible .navbar__brand-group { order: 1; flex: 1 1 auto; min-width: 0; gap: 6px; }
  .navbar--collapsible .navbar__actions { order: 2; }
  .navbar--collapsible .navbar__logo { width: 32px; height: 32px; }
  .navbar--collapsible .navbar__brand-text { font-size: 1rem; }
  .navbar--collapsible .navbar__hub-logo { height: 18px; }
  .navbar--collapsible .navbar__account { padding: 8px 12px; }

  .navbar--collapsible .navbar__links {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .navbar--collapsible.is-nav-open .navbar__links { display: flex; }
  /* فقط تریگرِ داخل پنل («خدمات ما») تمام‌عرض می‌شه — نه دراپ‌داونِ حساب کاربری
     که توی .navbar__actions می‌مونه و باید همون دکمه‌ی کوچیکِ گرد بمونه. */
  .navbar--collapsible .navbar__links .navbar__link,
  .navbar--collapsible .navbar__links .nav-dropdown__trigger { white-space: nowrap; padding: 11px 12px; }
  .navbar--collapsible .navbar__links .nav-dropdown__trigger { width: 100%; justify-content: space-between; }

  /* باهم‌بر: دکمه‌ی نارنجیِ «ثبت آگهی» توی نوار جا نمی‌شه، پس روی موبایل مخفی
     می‌شه و نسخه‌ی لینکی‌اش داخل منوی همبرگری ظاهر می‌شه. */
  .navbar--collapsible .navbar__cta { display: none; }
  .navbar--collapsible .navbar__links .navbar__link--in-menu { display: block; }

  /* روی موبایل، نوار بالا به چند ردیف می‌شکنه و دکمه‌ی «خدمات ما» دیگه لبه‌ی
     ثابتی نداره — قبلاً منو نسبت به همون دکمه جا می‌گرفت و بسته به اینکه دکمه
     کجای صفحه بود، از لبه‌ی راست صفحه بیرون می‌زد (این باگ همون چیزیه که تو
     اسکرین‌شات دیده می‌شه). حالا به‌جای دکمه، نسبت به کل نوار (که position:
     sticky داره و همیشه به‌اندازه‌ی صفحه‌ست) جا می‌گیره، پس همیشه داخل صفحه می‌مونه. */
  .nav-dropdown { position: static; }
  .nav-dropdown__menu {
    left: 16px;
    right: 16px;
    min-width: 0;
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ============================================================
   باهم — صفحه‌ی هاب سوپراپ
   ============================================================ */
.navbar--hub .navbar__inner,
.navbar--bar .navbar__inner { justify-content: space-between; }
/* قبلاً position: relative بود که با اسکرول از بالای صفحه بیرون می‌رفت؛ مثل
   بقیه‌ی نوارهای سایت (.navbar پایه) الان sticky شد تا هیچ‌وقت با اسکرول محو
   نشه و لینک‌هاش (آگهی‌ها، درباره‌ی ما و...) همیشه در دسترس بمونن. */
.navbar--bar { position: sticky; top: 0; }

/* توی نوار باهم‌بر، گروه برند+لینک‌ها (سمت راست) باید کاملاً چسبیده به لبه‌ی راست بمونه و
   گروه اکشن‌ها (سمت چپ) کاملاً چسبیده به لبه‌ی چپ — بدون رشد لینک‌ها به وسط، margin-inline-start:auto
   روی اکشن‌ها کل فضای خالی رو می‌بلعه و اون رو تا لبه‌ی چپ هول می‌ده */
.navbar--bar .navbar__links { flex: 0 1 auto; }
.navbar--bar .navbar__actions { margin-inline-start: auto; }

.hub-logo-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600) 50%, var(--amber-500) 50%);
  flex-shrink: 0;
}
.navbar__brand--hub { gap: 10px; }
.navbar__brand-text--hub {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy-900);
}
.navbar__logo--hub {
  height: 34px;
  width: auto;
  display: block;
}

.navbar__brand-group { display: flex; align-items: center; gap: 10px; }
.navbar__hub-link {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink-soft);
  padding: 6px 4px;
  border-radius: 8px;
  transition: color 0.12s ease, background 0.12s ease;
}
.navbar__hub-link:hover { color: var(--navy-900); background: var(--bg); }
.navbar__hub-link--logo { display: inline-flex; align-items: center; padding: 4px; }
.navbar__hub-logo { height: 22px; width: auto; display: block; }
.navbar__bar-logo { height: 32px; width: auto; display: block; }
.navbar__brand-sep { color: var(--border); font-weight: 400; }
.navbar__brand--bar { gap: 8px; }
.navbar__brand-accent--bar { color: var(--amber-500); }
.navbar__brand--arz { gap: 8px; }
.navbar__brand-accent--arz { color: var(--emerald-500); }

.hub-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 20px 40px;
  text-align: center;
}
.hub-hero__logo {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
/* شعار باهم، بین لوگو و تیتر اصلی */
.hub-hero__tagline {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--blue-600);
  margin: 0 0 10px;
}
.hub-hero__title {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
/* هر تیکه (قبل و بعد br) توی یه خط بمونه و نشکنه */
.hub-hero__subtitle { color: var(--ink-soft); font-size: 1.02rem; max-width: 920px; margin: 0 auto; }
@media (min-width: 1024px) {
  .hub-hero__subtitle { white-space: nowrap; }
}

/* چهار خدمت (اپلای، بر، ارز، کلاب) → شبکه‌ی ۲×۲ روی دسکتاپ */
.hub-tiles {
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 20px 72px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.hub-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hub-tile--apply:hover,
.hub-tile--bar:hover,
.hub-tile--arz:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.hub-tile--apply:hover { border-color: var(--blue-400); }
.hub-tile--bar:hover { border-color: var(--amber-400); }
.hub-tile--arz:hover { border-color: var(--emerald-400); }

.hub-tile__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.hub-tile--apply .hub-tile__icon { background: var(--blue-050); color: var(--blue-600); }
.hub-tile--bar .hub-tile__icon { background: var(--amber-050); color: var(--amber-600); }
.hub-tile__icon--ghost { background: var(--bg); color: var(--ink-faint); }
/* آیکونِ عکسی (لوگوی باهم‌بر) به‌جای SVG خطی، توسط object-fit توی همون باکس گرد جا می‌شه */
.hub-tile__icon--img { padding: 6px; }
.hub-tile__icon-img { width: 100%; height: 100%; object-fit: contain; }

.hub-tile__title { font-size: 1.2rem; margin-bottom: 2px; }
.hub-tile__desc { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 4px; }
.hub-tile__cta { font-weight: 700; font-size: 0.92rem; margin-top: auto; }
.hub-tile--apply .hub-tile__cta { color: var(--blue-600); }
.hub-tile--bar .hub-tile__cta { color: var(--amber-600); }

/* تایل «باهم‌ارز»: یه کارتِ کاملِ هم‌شکلِ باهم‌اپلای/باهم‌بره؛ خودِ آیکون یه
   اپ‌آیکونِ کامل با پس‌زمینه‌ی خودشه، پس قابِ رنگیِ معمولِ بقیه‌ی تایل‌ها رو
   لازم نداره. رنگِ تمِ این تایل سبزه (رنگِ خودِ برندِ باهم‌ارز). */
.hub-tile--arz .hub-tile__icon { background: transparent; }
.hub-tile__icon--arz { width: 60px; height: 60px; }
.hub-tile--arz .hub-tile__cta { color: var(--emerald-600); }

/* تایلِ «باهم کلاب» — رنگِ برندش آبیِ آسمانیِ تلگرامیه (#2AABEE) */
.hub-tile--club:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #6cc4f1; }
.hub-tile--club .hub-tile__icon { background: transparent; }
.hub-tile__icon--club { width: 58px; height: 58px; padding: 2px; }
.hub-tile--club .hub-tile__cta { color: #187bb3; }

/* نشانِ «به‌زودی» — گوشه‌ی بالا-چپِ کارت، مثل بقیه‌ی نشان‌های گوشه‌ای سایت،
   با رنگ قرمز که واضح باشه این خدمت هنوز فعال نیست */
.hub-tile__soon-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

/* وقتی یکی از کلاب/ارز خاموشه (CLUB_ENABLED / ARZ_ENABLED) سه خدمت می‌مونه → چیدمانِ سه‌ستونه */
.hub-tiles--three { max-width: 980px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .hub-tiles { grid-template-columns: 1fr 1fr; }
  .hub-tiles--three .hub-tile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hub-hero { padding: 44px 20px 28px; }
  .hub-hero__title { font-size: 1.5rem; }
  .hub-tiles { grid-template-columns: 1fr; }
}

/* ---------------- حساب من (باهم) ---------------- */
.hub-page-head { max-width: 900px; margin: 0 auto; padding: 40px 20px 8px; }
.hub-page-head h1 { margin-bottom: 4px; }
.hub-page-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hub-account-wrap { max-width: 900px; margin: 0 auto; padding: 12px 20px 0; }
.hub-account-wrap .card { margin-bottom: 12px; }

.hub-account-note { font-size: 0.8rem; margin: 0 0 20px; }

/* ---------------- منوی حساب کاربری در نوار باهم ---------------- */
.nav-dropdown__trigger--account { white-space: nowrap; }

/* دکمه‌ی حساب کاربری در نوار باهم‌بر — فقط آیکون آدمک (بدون اسم)، با کلیک منو باز می‌شه */
.navbar--bar .nav-dropdown__trigger--account { padding: 4px 8px; }

/* منوی حساب کاربری در نوار باهم‌بر — بزرگ‌تر، با آیکون کنار هر مورد و خط جداکننده‌ی بین ردیف‌ها */
.nav-dropdown__menu--account {
  min-width: 270px;
  padding: 4px 16px;
  gap: 0;
}
/* دکمه‌ی حساب کاربری آخرین آیتمِ سمت چپِ نواره. منوی پایه با right:0 باز می‌شه،
   یعنی به سمت چپ کشیده می‌شه؛ روی پنجره‌های باریک (وقتی دیگه حاشیه‌ای بین
   navbar__inner و لبه‌ی پنجره نمونده) از کادر می‌زنه بیرون و متنش بریده می‌شه.
   این‌جا از لبه‌ی چپِ خود دکمه باز می‌شه و به سمت راست رشد می‌کنه تا همیشه داخل
   صفحه بمونه. زیر ۶۴۰px دست نمی‌زنیم، چون اون‌جا منو تمام‌عرضه (left/right: 16px). */
@media (min-width: 641px) {
  .nav-dropdown__menu--account { left: 0; right: auto; }
}
.nav-dropdown__menu--account > *:not(:last-child) { border-bottom: 1px solid var(--border); }
.nav-dropdown__menu--account .nav-dropdown__title,
.nav-dropdown__menu--account .nav-dropdown__item {
  margin-right: 0;
  border-radius: 0;
}
.nav-dropdown__title--account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 2px;
  font-size: 1rem;
}
.nav-dropdown__title--account svg { flex-shrink: 0; color: var(--ink-faint); transition: transform 0.12s ease; }
.nav-dropdown__title--account:hover svg { transform: translateX(-2px); }
.nav-dropdown__item--icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
}
.nav-dropdown__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-faint);
}
.nav-dropdown__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-dropdown__trigger:hover .nav-dropdown__avatar,
.nav-dropdown.is-open .nav-dropdown__avatar {
  background: var(--blue-050);
  color: var(--blue-600);
}
body.theme-bar .nav-dropdown__trigger:hover .nav-dropdown__avatar,
body.theme-bar .nav-dropdown.is-open .nav-dropdown__avatar {
  background: var(--amber-050);
  color: var(--amber-600);
}

/* ---------------- درباره‌ی ما (باهم) ---------------- */
.hub-about-block { max-width: 760px; margin: 0 auto 24px; }
.hub-about-block h2 { margin-bottom: 12px; }
.hub-about-block p { color: var(--ink-soft); margin-bottom: 12px; }
.hub-about-block p:last-child { margin-bottom: 0; }

.hub-account-logout { margin: 0 0 64px; }

/* ============================================================
   باهم‌بر — صفحه‌ی معرفی
   ============================================================ */
/* main به‌صورت پیش‌فرض حداکثر ۱۰۸۰px عرض داره (تعریفِ عمومیِ main بالای فایل)؛
   فقط برای صفحه‌ی اصلیِ باهم‌بر (که section.bar-hero توش هست) این محدودیت رو
   بازتر می‌کنیم تا بخش‌های زیرِ هدر (نشان‌های اعتماد، «چطور کار می‌کنه») هم به
   همون عرضِ هدر برسن و باکس‌هاشون بهتر دیده بشن. سایر صفحات باهم‌بر (لیست
   آگهی‌ها، چت، داشبورد و...) که bar-hero ندارن، تحت تأثیر قرار نمی‌گیرن. */
main:has(.bar-hero) { max-width: 1220px; }
.bar-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 40px;
  padding: 64px 24px;
  text-align: center;
  background: linear-gradient(125deg, #e0480a 0%, #f2871f 55%, #ffc94d 100%);
  box-shadow: 0 24px 48px rgba(224, 72, 10, 0.28);
}
.bar-hero__glow {
  position: absolute;
  top: -140px;
  left: 8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(255, 220, 150, 0.5), transparent 70%);
  pointer-events: none;
}
.bar-hero__center { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; }
.bar-hero__title { color: #fff; font-size: 1.7rem; line-height: 1.55; margin-bottom: 12px; }
/* هر تیکه (قبل و بعد br) توی یه خط بمونه و نشکنه */
.bar-hero__subtitle { color: rgba(255, 255, 255, 0.88); font-size: 1rem; max-width: 1130px; margin-inline: auto; }
@media (min-width: 1024px) {
  .bar-hero__subtitle { white-space: nowrap; }
}

.bar-hero .btn--bar { background: #fff; color: var(--amber-600); box-shadow: none; }
.bar-hero .btn--bar:hover { background: #fff6ec; box-shadow: none; }
.bar-hero .btn--secondary { background: rgba(255, 255, 255, 0.16); color: #fff; }
.bar-hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.26); }

.bar-hero__decor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 230px;
  z-index: 2;
  pointer-events: none;
}
.bar-hero__decor--left { left: 2%; }
.bar-hero__decor--right { right: 2%; }

.bar-hero__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(90, 30, 5, 0.28);
  padding: 14px 18px;
  text-align: right;
}
.bar-hero__card strong { display: block; color: var(--bar-ink); font-size: 0.92rem; }
.bar-hero__card span { display: block; color: var(--ink-soft); font-size: 0.78rem; margin-top: 2px; }
.bar-hero__card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bar-hero__card--main {
  top: 14%;
  left: 0;
  transform: rotate(-4deg);
}
.bar-hero__card--travel {
  bottom: 20%;
  left: 46px;
  padding: 12px;
  transform: rotate(9deg);
}
.bar-hero__card--travel svg { color: var(--amber-500); }
.bar-hero__card--check {
  top: 18%;
  right: 0;
  transform: rotate(5deg);
}
.bar-hero__card--check svg { color: var(--success); flex: 0 0 auto; }
.bar-hero__card--check span {
  font-size: 0.82rem;
  color: var(--bar-ink);
  font-weight: 600;
  margin: 0;
}
.bar-hero__card--pin {
  bottom: 18%;
  right: 46px;
  padding: 12px;
  transform: rotate(-8deg);
}
.bar-hero__card--pin svg { color: var(--rust-600); }

@media (max-width: 1180px) {
  .bar-hero__decor { display: none; }
}

.bar-trust {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.bar-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--bar-ink);
  box-shadow: var(--shadow-soft);
}
.bar-trust__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .bar-trust { flex-direction: column; align-items: stretch; }
  .bar-trust__item { justify-content: flex-start; }
}

.bar-how { max-width: 1180px; margin: 0 auto; padding: 32px 20px; }
.bar-how__steps {
  display: grid;
  /* ۲ ستون در ۲ ردیف (به‌جای یه ردیفِ ۴تاییِ کشیده) — با ۴ مرحله، جمع‌وجورتر
     و خواناتره */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.bar-how__step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}
.bar-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
  font-weight: 800;
  margin-bottom: 12px;
}
.bar-how__step h3 { font-size: 1.02rem; margin-bottom: 6px; }

.bar-faq { max-width: 780px; margin: 0 auto; padding: 8px 20px 56px; }
.bar-faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.bar-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 20px;
}
.bar-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--bar-ink);
  cursor: pointer;
  list-style: none;
}
.bar-faq__item summary::-webkit-details-marker { display: none; }
.bar-faq__chevron { flex: none; color: var(--amber-500); transition: transform 0.15s ease; }
.bar-faq__item[open] .bar-faq__chevron { transform: rotate(180deg); }
.bar-faq__item p { padding-bottom: 16px; margin: -4px 0 0; }

.bar-waitlist { max-width: 640px; margin: 0 auto; padding: 24px 20px 72px; }
.bar-waitlist__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px;
}
.bar-waitlist__title { font-size: 1.3rem; margin-bottom: 6px; }
.bar-waitlist__form { margin-top: 18px; }
.bar-waitlist__form input:focus { border-color: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-050); }
.bar-waitlist__submit {
  width: 100%;
  background: linear-gradient(95deg, var(--amber-600), var(--amber-500));
  color: #fff;
  box-shadow: 0 10px 24px rgba(217, 103, 12, 0.28);
}
.bar-waitlist__submit:hover { box-shadow: 0 12px 28px rgba(217, 103, 12, 0.36); }

.bar-role-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bar-role-options--row { flex-direction: row; flex-wrap: wrap; }
.bar-role-options--row .bar-role-option { flex: 1 1 160px; justify-content: center; }
.bar-role-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.bar-role-option:has(input:checked) { border-color: var(--amber-500); background: var(--amber-050); }
.bar-role-option input { accent-color: var(--amber-600); width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 860px) {
  .bar-how__steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bar-hero { padding: 40px 20px 16px; }
  .bar-hero__title { font-size: 1.35rem; }
  .bar-waitlist__card { padding: 24px 18px; }
}

/* ---------------- باهم‌بر — دکمه‌ی برند و صفحات آگهی/گفتگو ---------------- */
.btn--bar {
  background: linear-gradient(95deg, var(--amber-600), var(--amber-500));
  color: #fff;
  box-shadow: 0 10px 24px rgba(217, 103, 12, 0.28);
}
.btn--bar:hover { box-shadow: 0 12px 28px rgba(217, 103, 12, 0.36); }

.bar-hero__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.bar-page-head { max-width: 1080px; margin: 0 auto; padding: 40px 20px 8px; }
.bar-page-head h1 { margin-bottom: 4px; }
.bar-page-head .btn { margin-top: 14px; }

.bar-about-block { max-width: 760px; margin: 20px auto 64px; }
.bar-about-block h2 { margin-bottom: 12px; }
.bar-about-block p { color: var(--ink-soft); margin-bottom: 12px; }
.bar-about-block p:last-child { margin-bottom: 0; }

/* ---------------- پنل جستجو و فیلتر آگهی‌ها ---------------- */
.bar-search-panel {
  max-width: 1080px;
  margin: 0 auto 8px;
  padding: 18px 20px 0;
}
.bar-search-panel--top { padding-top: 40px; }

/* باکس جستجو — مستقل و جدا از باکس فیلترها، درست بالای اون */
.bar-search-box-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  padding: 6px 6px 6px 20px;
  margin-bottom: 18px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.bar-search-box-wrap:focus-within { border-color: var(--amber-400); box-shadow: 0 0 0 4px var(--amber-050); }
.bar-search-box {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.bar-search-box svg {
  position: absolute;
  right: 0;
  color: var(--ink-faint);
  pointer-events: none;
}
.bar-search-box input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 28px 10px 0;
  font-size: 1rem;
  font-family: var(--font);
  color: var(--ink);
  outline: none;
  box-shadow: none;
}
.bar-search-panel__submit { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
/* دکمه‌ی جستجو مشکی باشه (نه نارنجی)، چون نارنجی با تمِ رنگیِ خودِ آگهی‌ها (که حالا آبی/نارنجی هستن) تداخل پیدا می‌کنه */
.bar-search-panel__submit.btn--bar {
  background: var(--bar-ink);
  box-shadow: 0 10px 24px rgba(36, 26, 18, 0.28);
}
.bar-search-panel__submit.btn--bar:hover { box-shadow: 0 12px 28px rgba(36, 26, 18, 0.36); }

/* باکس فیلترها — کارت جدا زیر باکس جستجو */
.bar-filter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
}

.bar-role-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bar-role-tabs .filter-tab {
  cursor: pointer;
  font-family: var(--font);
}
.bar-role-tabs .filter-tab.is-active { background: var(--bar-ink); border-color: var(--bar-ink); color: #fff; }

.bar-search-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.bar-search-panel__grid .field { margin-bottom: 0; }
.bar-search-panel__hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }

.bar-filter-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.bar-filter-card__footer-actions { display: flex; align-items: center; gap: 16px; }
/* دکمه‌ی «اعمال فیلتر» هم به همون دلیل مشکی شد */
.bar-filter-card__footer-actions .btn--bar {
  background: var(--bar-ink);
  box-shadow: 0 10px 24px rgba(36, 26, 18, 0.28);
}
.bar-filter-card__footer-actions .btn--bar:hover { box-shadow: 0 12px 28px rgba(36, 26, 18, 0.36); }
.bar-search-panel__sort { margin-bottom: 0; min-width: 180px; }

.bar-results-bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 20px 16px;
  display: flex;
  align-items: center;
}
.bar-results-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* مشکی به‌جای نارنجی، تا با تمِ رنگیِ آگهی‌ها تداخل نداشته باشه */
  background: rgba(36, 26, 18, 0.07);
  color: var(--bar-ink);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 600;
}
.bar-results-count strong { font-size: 0.98rem; }

.bar-listing-list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.bar-listing-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  /* عمداً overflow نداره: تولتیپ نشان «احراز هویت‌شده» باید بتونه از بالای
     ردیف بیرون بزنه، وگرنه با overflow:hidden نصفه بریده می‌شد. برای همین
     گردیِ گوشه‌های باکسِ کناری (که پس‌زمینه‌ش فرق داره) رو دستی با
     border-radius میدیم، نه با کلیپ‌کردنِ کل ردیف. */
}
.bar-listing-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--amber-400); }
.bar-listing-row--sender:hover { border-color: var(--blue-400); }
.bar-listing-group { display: flex; flex-direction: column; }
.bar-listing-row__info { position: relative; display: block; flex: 1 1 auto; min-width: 0; padding: 20px 22px; }
.bar-listing-card__badges,
.bar-listing-detail__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bar-listing-card__badges .bar-listing-card__role,
.bar-listing-detail__badges .bar-listing-card__role { margin-bottom: 0; }
.bar-listing-card__role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.bar-listing-card__role svg { flex: none; }
/* تمِ فرستنده آبیه (هم‌رنگ با عکسِ کنارِ آگهیش)، تمِ مسافر همون کهربایی/نارنجیِ برندِ باهم‌بره */
.bar-listing-card__role--sender { background: var(--blue-050); color: var(--blue-600); }
.bar-listing-card__role--carrier { background: var(--amber-050); color: var(--amber-600); }

/* نشان احراز هویت */
.bar-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e9f9f1;
  color: #157a4d;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.bar-verified-badge svg { flex: none; }
.bar-verified-badge--lg { font-size: 0.9rem; padding: 7px 16px; }
/* ردیف آگهی: عنوان مسیر، برچسب‌های اطلاعاتی و توضیح، با ارتفاع یکسان برای همه‌ی ردیف‌ها */
.bar-listing-row__route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.05rem;
  margin: 2px 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-listing-row__route svg { flex: none; color: var(--amber-500); }
.bar-listing-row__route--sender svg { color: var(--blue-500); }
.bar-listing-row__meta { display: flex; flex-wrap: wrap; gap: 8px; min-height: 24px; margin-bottom: 12px; }
.bar-listing-row__desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: calc(1.6em * 2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bar-listing-row__published {
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin: 8px 0 0;
}
/* ردیفِ پایینِ کارتِ آگهی: زمانِ انتشار سمتِ راست، تعدادِ بازدید همیشه چسبیده
   به گوشه‌ی چپ (با margin-inline-start: auto)، حتی وقتی زمانِ انتشار نیست */
.bar-listing-row__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.bar-listing-row__footer .bar-listing-row__published { margin: 0; }
.bar-listing-row__views {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  flex: 0 0 auto;
  white-space: nowrap;
}
.bar-listing-row__views svg { flex: none; }
/* همون خطِ «فلان وقت پیش منتشر شده» ولی برای تعدادِ بازدید، توی صفحه‌ی جزئیاتِ آگهی */
.bar-listing-detail__views { margin-top: -8px; }
.bar-listing-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: var(--bg);
  border-radius: 999px;
  padding: 3px 10px;
}
.bar-listing-card__tag--price {
  color: var(--amber-600);
  background: var(--amber-050);
  font-weight: 700;
}
/* روی آگهیِ فرستنده (که عکس و بجِ نقشش آبیه)، تگِ قیمت هم به‌جای کهربایی، آبی می‌شه */
.bar-listing-card__tag--price-sender {
  color: var(--blue-600);
  background: var(--blue-050);
}
/* باکس کناری (CTA) قبلاً فقط پس‌زمینه‌ی خاکستری ساده داشت؛ حالا تصویر تزئینی
   پشتش هست (با گرادیانِ کهربایی روش تا متن/دکمه خوانا بمونه) — دو نوع آگهی
   (فرستنده/مسافر) هرکدوم عکس مخصوص خودشون رو دارن. خودِ عکس‌ها مربعن، پس
   باکس هم با aspect-ratio: 1/1 همیشه دقیقاً مربع می‌مونه (عرضش خودکار برابرِ
   ارتفاعِ ردیف می‌شه) — این‌جوری با «cover» هیچ‌وقت از بالا/پایین یا
   چپ/راستِ عکس چیزی بریده نمی‌شه، چون نسبتِ باکس دقیقاً با نسبتِ عکس یکیه.
   max-width هم فقط برای جلوگیری از خیلی‌پهن‌شدنِ باکس توی ردیف‌هایی با
   توضیحِ خیلی بلنده. */
.bar-listing-row__side {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  min-width: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 14px 20px;
  background:
    linear-gradient(165deg, rgba(180, 79, 15, 0.22) 0%, rgba(242, 135, 31, 0.1) 55%, rgba(255, 255, 255, 0.05) 100%),
    url("/static/img/bar-cta-sender.jpg") center / cover no-repeat;
  /* صفحه RTLه، پس این باکس همیشه سمت چپِ ردیفه؛ گردیِ گوشه‌های چپ رو خودمون
     می‌دیم تا با گردیِ کارت ست بشه */
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.bar-listing-row__side--carrier {
  background:
    linear-gradient(165deg, rgba(180, 79, 15, 0.22) 0%, rgba(242, 135, 31, 0.1) 55%, rgba(255, 255, 255, 0.05) 100%),
    url("/static/img/bar-cta-carrier.jpg") center / cover no-repeat;
}

/* نشان امتیاز روی گوشه‌ی بالا-چپِ همین باکس تصویردار می‌شینه */
.bar-listing-row__rating-corner {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.bar-listing-row__rating-corner .bar-rating-badge { box-shadow: var(--shadow-soft); background: #fff; }

/* ردیف دکمه‌های بیضی‌شکل زیر هر آگهی: ذخیره (راست) / ارسال درخواست (وسط) /
   مشاهده‌ی آگهی (چپ) — کاملاً بیرون از باکسِ سفیدِ آگهی و بدون قاب/پس‌زمینه‌ی
   خودشون، فقط سه‌تا دکمه‌ی شناور زیر کارت. با ظاهر یکسانِ bar-pill-btn، بدون
   رنگ نارنجی، هرکدوم دقیقاً یک‌سوم عرض. کلیک روی کل کارت دیگه به صفحه‌ی آگهی
   نمی‌ره — فقط همین دکمه‌ی «مشاهده آگهی». */
.bar-listing-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}
.bar-listing-actions > * { flex: 1 1 0; min-width: 0; }
.bar-listing-actions .bar-pill-btn {
  background: #1d2848;
  border: 1px solid #1d2848;
  color: #fff;
  backdrop-filter: none;
}
.bar-listing-actions .bar-pill-btn:hover { background: #2a3760; border-color: #2a3760; }
.bar-save-btn__icon--filled { display: none; }
.bar-save-btn.is-saved { background: #fff; border-color: #1d2848; color: #1d2848; }
.bar-save-btn.is-saved:hover { background: #f3f4f8; }
.bar-save-btn.is-saved .bar-save-btn__icon--outline { display: none; }
.bar-save-btn.is-saved .bar-save-btn__icon--filled { display: block; }

/* صفحه‌بندی لیست آگهی‌ها */
.bar-pagination {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bar-pagination__pages { display: flex; align-items: center; gap: 6px; }
.bar-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
a.bar-pagination__btn:hover { border-color: var(--amber-400); color: var(--amber-600); }
.bar-pagination__btn.is-active { background: var(--amber-500); border-color: var(--amber-500); color: #fff; }
.bar-pagination__btn--nav { padding: 0 16px; }
.bar-pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.bar-pagination__ellipsis { color: var(--ink-faint); padding: 0 4px; }

.bar-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-soft);
}
.bar-empty .btn { margin-top: 14px; }

/* حالت خالی مستقل (نه داخل گرید) — مثلاً وقتی هنوز هیچ آگهی‌ای ثبت نشده */
.bar-empty-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 64px 24px;
  text-align: center;
}
.bar-empty-card__title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 20px; }

/* ---------------- مودال «ارسال درخواست» سریع ---------------- */
.bar-quick-contact-modal[hidden] { display: none; }
.bar-quick-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bar-quick-contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 18, 0.5);
}
.bar-quick-contact-modal__box {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
  max-width: 420px;
  width: 100%;
  animation: modal-pop 0.18s ease;
}
@keyframes modal-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.bar-quick-contact-modal__close {
  position: absolute;
  top: 12px;
  left: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.bar-quick-contact-modal__box h3 { margin-bottom: 4px; }
#quick-contact-route { margin-bottom: 16px; }
body.modal-open { overflow: hidden; }

.bar-form-card {
  max-width: 1180px;
  margin: 16px auto 64px;
  padding: 0;
}
/* توی داشبورد فرم ثبت آگهی نیازی به وسط‌چین شدن و محدودیت عرض معمولی نداره؛
   این نسخه‌ی عریض تقریباً کل عرض ستون داشبورد رو پر می‌کنه. */
.bar-form-card.bar-form-card--wide {
  max-width: 1800px;
  margin-inline: 0;
}
.bar-form-card form,
.bar-form-card__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px;
}
.bar-form-card__box h3 { margin-bottom: 12px; }
.bar-form-card__intro { margin: 0 0 20px; }
/* فرم به‌صورت ستونی می‌مونه، ولی دکمه‌ی ارسال حتی توی فرم عریض هم روی عرض
   راحت خودش می‌مونه، نه اینکه تا آخر عرض فرم کش بیاد */
.bar-form-card form { display: flex; flex-direction: column; }
.bar-form-card form > .btn { align-self: flex-start; }
/* ردیفِ پایینِ فرم: دکمه‌ی ارسال یه طرف، توضیح کوتاه هم روبروش (طرف مقابل) */
.bar-form-card__footer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.bar-form-card__footer .btn { margin-top: 6px; }
.bar-form-card__note { font-size: 0.82rem; margin: 0; }

/* وضعیت احراز هویت */
.bar-verify-status {
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
}
.bar-verify-status--approved { background: #e9f9f1; }
.bar-verify-status--pending { background: #fff4e0; }
.bar-verify-status--rejected { background: #fdeaea; }
.bar-verify-status .status-badge,
.bar-verify-status .bar-verified-badge { margin-bottom: 8px; }
.bar-verify-status p { margin: 0; }
.bar-verify-status p + p { margin-top: 6px; }

.bar-verify-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 0 0 16px;
}
.bar-verify-summary dt { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 2px; }
.bar-verify-summary dd { margin: 0; font-weight: 600; }

.bar-listing-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* پروفایلِ عمومیِ یه کاربر — وقتی از توی چت روی اسم/عکسِ طرفِ مقابل کلیک می‌شه */
.bar-public-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 24px;
}
.bar-public-profile__avatar { width: 84px; height: 84px; margin-bottom: 6px; }
.bar-public-profile__avatar svg { width: 36px; height: 36px; }
.bar-public-profile__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.2rem;
  margin: 0;
}
.bar-public-profile__rating { margin: 4px 0; }
.bar-public-profile__joined { margin: 0; }
.bar-listing-detail__route { margin: 8px 0 4px; }
.bar-listing-detail__price { color: var(--amber-600); font-weight: 700; }
.bar-listing-detail__price--sender { color: var(--blue-600); }
.bar-listing-detail__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 20px 0;
}
.bar-listing-detail__card h3 { font-size: 0.95rem; margin-bottom: 4px; }
.bar-listing-detail__owner-box,
.bar-listing-detail__contact-card {
  background: var(--amber-050);
  border: 1px solid rgba(217, 103, 12, 0.18);
  border-radius: var(--radius-md);
  padding: 20px;
}
.bar-listing-detail__contact-card h3 { margin-bottom: 10px; }

/* بنرِ وضعیت روی صفحه‌ی جزئیاتِ آگهی — فقط برای خودِ صاحبِ آگهی نمایش داده می‌شه،
   وقتی آگهیش هنوز تأیید نشده (در انتظار)، رد شده، یا بسته‌شده. برای ردشده، دلیلِ
   نوشته‌شده‌ی ادمین هم همین‌جا کامل نمایش داده می‌شه. */
.bar-listing-detail__status-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 4px 0 20px;
  font-size: 0.9rem;
  line-height: 1.9;
}
.bar-listing-detail__status-banner svg { flex: 0 0 auto; margin-top: 2px; }
.bar-listing-detail__status-banner strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.bar-listing-detail__status-banner--pending { background: #fff4e0; color: #a5690a; }
.bar-listing-detail__status-banner--rejected { background: #fdeaea; color: #b23a3a; }
.bar-listing-detail__status-banner--closed { background: var(--bg); color: var(--ink-faint); }

/* ---------------- صفحه‌ی پیام‌ها — چت دوستونه (لیست چپ، گفتگو راست) ---------------- */
.dash-content--flush { padding: 0; overflow: hidden; }

.bar-chat-shell {
  /* مستقل از راست‌به‌چپ کلی سایت: لیست گفتگوها سمت چپ می‌مونه، خود گفتگو سمت راست */
  direction: ltr;
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  opacity: 1;
  transition: opacity 0.12s ease;
  /* بک‌گراند چت: کل فضای بین نوار بالا و ستون داشبورد رو می‌پوشونه (بدون تکرار، پوشش‌دهنده) */
  background-image: url('../img/bar-chat-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* هنگام سوییچ بین گفتگوها با جاوااسکریپت (bar_chat.js) برای جلوگیری از پرش/شوک بصری */
.bar-chat-shell--fading { opacity: 0; }

.bar-chat-list {
  direction: rtl;
  flex: 0 0 400px;
  /* کارت شناور: از هر چهار طرف (از جمله نوار بالا و ستون گفتگو) کمی فاصله داره و گوشه‌هاش خمیده‌ست؛
     از بالا و چپ (سمتِ نوارِ بالایی و لبه‌ی چپِ صفحه) عمداً فاصله‌ی کمتری داره تا بهشون نزدیک‌تر باشه،
     ولی صفر نیست که بک‌گراندِ پشتش هم یه‌کم از اون طرف‌ها معلوم بمونه */
  margin: 6px 14px 14px 6px;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.bar-chat-list__head {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 18px 20px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bar-chat-list__head h2 { font-size: 1.05rem; margin: 0; text-align: center; }

/* دسته‌بندی گفتگوها: پیام‌هایی که خودم فرستادم / پیام‌هایی که به آگهی‌های من رسیده */
/* بخش پایینی همون باکس «پیام‌ها»ست (بدون خط جدا از عنوان)؛ خط جداکننده فقط زیر همین تب‌ها، قبل از لیست گفتگوها */
/* حالا فقط دو تبِ «پیام‌های من»/«آگهی‌های من» اینجان (تبِ پشتیبانی رفته پایینِ
   باکس، bar-chat-support-slot)؛ هرکدوم نصفِ عرضِ ردیف رو پر می‌کنه (flex:1 1 0).
   پدینگِ بالا هم عمداً کمه — فاصله‌ی این ردیف تا سرچ‌باکسِ بالاش کم بمونه. */
.bar-chat-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 4px 14px 16px;
  border-bottom: 1px solid var(--border);
}
.bar-chat-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 7px 4px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bar-chat-tab__label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bar-chat-tab svg { flex: 0 0 auto; }
.bar-chat-tab:hover { border-color: var(--amber-400); color: var(--amber-600); }
.bar-chat-tab.is-active {
  border-color: transparent;
  background: linear-gradient(100deg, #b85c2c, #cd7844);
  color: #fff;
  box-shadow: 0 4px 12px rgba(120, 63, 27, 0.25);
}
.bar-chat-tab__count {
  font-size: 0.68rem;
  opacity: 0.85;
}

.bar-chat-list__items { flex: 1 1 auto; overflow-y: auto; }
.bar-chat-list__empty { padding: 32px 20px; text-align: center; font-size: 0.88rem; }

/* سرچ‌بار پایین ستون گفتگوها؛ برای پیدا کردن گفتگو با اسم طرف یا مسیر آگهی */
.bar-chat-search {
  flex: 0 0 auto;
  position: relative;
  padding: 12px 14px 6px;
}
.bar-chat-search__icon {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
/* سلکتور نسبی (.bar-chat-search .bar-chat-search__input) که تخصصی‌ترش می‌کنه تا رو قانون
   عمومی input[type="text"] (که با گردی و پدینگ خودش تداخل داره) قطعاً غالب بشه */
.bar-chat-search .bar-chat-search__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: #f8f6f1;
  border-radius: 999px;
  padding: 9px 40px 9px 16px;
  font-size: 0.82rem;
  font-family: var(--font);
  color: var(--ink);
  /* کلِ .bar-chat-shell چپ‌به‌راسته؛ سرچ‌باکس باید مثلِ بقیه‌ی سایت از راست تایپ بشه */
  direction: rtl;
  text-align: right;
}
.bar-chat-search__input::placeholder { color: var(--ink-faint); }
/* باکس‌های تایپِ چت (پیام، کپشنِ عکس، گزارش، پاسخِ پشتیبانی) dir="auto" دارن تا متنِ
   فارسی راست‌به‌چپ و متنِ انگلیسی چپ‌به‌راست تایپ بشه؛ ولی وقتی خالی‌ان، مرورگر جهت رو
   چپ‌به‌راست حساب می‌کنه (و کلِ .bar-chat-shell هم چپ‌به‌راسته)، پس متنِ پیش‌فرضِ فارسی
   («پیامتون رو بنویسید…») سمتِ چپ می‌افتاد. تا وقتی خالی‌ان، راست‌به‌چپ باشن. */
.bar-chat-shell textarea:placeholder-shown,
.bar-chat-shell input[type="text"]:placeholder-shown,
.chat-send-modal textarea:placeholder-shown {
  direction: rtl;
  text-align: right;
}
.bar-chat-search .bar-chat-search__input:focus {
  outline: none;
  border-color: var(--amber-400);
  box-shadow: none;
}

/* اسلاتِ دکمه‌ی «درخواست‌های پشتیبانی» — قبلاً یکی از سه‌تا تبِ بالا بود، الان
   تنها و به‌صورت تمام‌عرض ته‌ی ستونِ گفتگوها نشسته (دقیقاً همون جایی که قبلاً
   سرچ‌بار بود)، با یه خط جداکننده از لیستِ بالاش. */
.bar-chat-support-slot {
  flex: 0 0 auto;
  padding: 12px 14px;
}
.bar-chat-support-slot .bar-chat-tab {
  width: 100%;
  padding: 9px 4px;
}
.bar-chat-item.is-hidden { display: none; }

.bar-chat-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.bar-chat-item:hover { background: var(--bg); }
.bar-chat-item.is-active { background: var(--amber-050); }
.bar-chat-item__avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.92rem;
}
.bar-chat-item.is-active .bar-chat-item__avatar { background: var(--amber-600); color: #fff; }
.bar-chat-item__body { min-width: 0; flex: 1 1 auto; }
.bar-chat-item__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bar-chat-item__row strong { min-width: 0; flex: 1 1 auto; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* خط پایین باکس: خلاصه‌ی آخرین پیام (قابل کوتاه‌شدن) + زمان/تاریخ ثابت، گوشه‌ی راست */
.bar-chat-item__meta { display: flex; align-items: baseline; gap: 8px; }
.bar-chat-item__time {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--ink-faint);
  /* ساعت یا تاریخِ فارسی (مثلِ «۲ مهر») — راست‌به‌چپ تا ترتیبش برعکس نشه */
  direction: rtl;
  unicode-bidi: isolate;
}
/* تیکِ «ارسال شد / دیده شد» کنارِ زمان، فقط زیرِ گفتگوهایی که آخرین پیامشون رو خودمون
   فرستادیم — یک تیک تا وقتی طرفِ مقابل ندیده، دو تیکِ رنگی وقتی که دیده باشه */
.bar-chat-item__ticks {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.bar-chat-item__ticks--sent { color: var(--ink-faint); }
.bar-chat-item__ticks--seen { color: var(--amber-600); }
/* روبه‌روی اسم شخص، توی همون خط، با فونت کوچیک‌تر */
.bar-chat-item__route {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* پیش‌نمایش آخرین پیام: کمی محوتر از قبل، که واضح باشه یه جزئیات فرعیه نه محتوای اصلی */
.bar-chat-item__preview { flex: 1 1 auto; min-width: 0; display: block; font-size: 0.83rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-chat-item__unread {
  /* تعداد پیام‌های خونده‌نشده‌ی همین گفتگو، سمت چپ باکس، هم‌ردیف با خط پیش‌نمایش (نه اسم/مسیر) که اورلپ نشه */
  position: absolute;
  left: 16px;
  bottom: 14px;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(100deg, #b85c2c, #cd7844);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(120, 63, 27, 0.25);
}

.bar-chat-main {
  direction: rtl;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bar-chat-main__head {
  flex: 0 0 auto;
  /* باریک‌تر از قبل: اسم و درباره‌ی آگهی رو هم‌ردیف می‌کنیم تا یه خط جا بگیرن */
  height: 60px;
  box-sizing: border-box;
  margin: 14px 14px 0 14px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* سفیدِ ماتِ نیمه‌شفاف، هم‌ظاهر با دکمه‌ی گردِ «رفتن به پایین» — بک‌گراندِ چت
     (تصویرِ تزئینی) از پشتش کمی دیده می‌شه، نه یه رنگِ توپرِ کِرِمی */
  border: 1px solid rgba(255, 255, 255, 0.7);
  /* هم‌اندازه‌ی گردی باکس تایپ (کاملاً کپسولی) */
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}
/* اسم و آواتارِ طرفِ مقابل، هر دو با هم، توی یه دکمه‌ی بیضی‌شکلِ یکپارچه —
   دقیقاً هم‌ظاهر با دکمه‌ی «درباره‌ی آگهی» — تا هر دو لینکِ هدر یه‌جور و
   متمایز از بقیه‌ی نوار دیده بشن. */
.bar-chat-main__identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 16px 5px 5px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(16, 24, 43, 0.06);
  color: inherit;
  transition: background 0.15s ease;
}
.bar-chat-main__identity:hover { background: rgba(255, 255, 255, 0.8); }
.bar-chat-main__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  /* جای عکس پروفایل کاربر — فعلاً حرف اول اسم، بعداً با آواتار واقعی جایگزین میشه */
}
.bar-chat-main__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
}
.bar-chat-main__identity-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}
.bar-chat-main__info {
  min-width: 0;
  flex: 1 1 auto;
  /* اسم و درباره‌ی آگهی هم‌ردیف، توی یه خط؛ اسم سمت راست می‌مونه و بیضیِ
     درباره‌ی آگهی، به‌جای پرکردنِ کل فضای باقی‌مونده، جمع‌وجور تا انتهای
     دیگه‌ی نوار هل داده می‌شه */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* وضعیتِ طرفِ مقابل، جلوی اسمش تو هدرِ گفتگو: در حال تایپ / آنلاین / چند وقت پیش
   آنلاین بود — جایگزینِ نمره‌ای که قبلاً اینجا نشون داده می‌شد */
.bar-chat-peer-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  /* قبلاً --ink-faint خیلی کم‌رنگ بود و متنِ «چند وقت پیش آنلاین بوده» به‌سختی
     خونده می‌شد؛ یه پله پررنگ‌تر شد */
  color: var(--ink-soft);
  vertical-align: middle;
}
.bar-chat-peer-status--online { color: var(--success); }
.bar-chat-peer-status--online::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.bar-chat-peer-status--typing { color: var(--amber-600); font-weight: 600; }
.bar-chat-main__route {
  /* دیگه کشیده نمی‌شه که کل فضای خالیِ نوار رو پر کنه؛ فقط به‌اندازه‌ی متنِ
     خودش (با یه سقف) جا می‌گیره و مثل یه دکمه‌ی بیضی‌شکلِ جمع‌وجور می‌شینه */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 16px;
  /* هم‌رنگ و هم‌جنسِ خودِ نوارِ سفیدِ ماتِ هدر، فقط یه‌کم متمایزتر تا شکلِ
     دکمه/بیضی داشته باشه */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(16, 24, 43, 0.06);
  transition: background 0.15s ease;
  /* هیچ رنگِ مخصوصِ لینکی نداره — دقیقاً هم‌رنگِ متنِ معمولیِ هدره (نه آبی،
     نه هیچ رنگِ متمایزِ دیگه) */
  color: inherit;
}
.bar-chat-main__route:hover { background: rgba(255, 255, 255, 0.8); }
.bar-chat-back-link {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.bar-chat-main__thread {
  flex: 1 1 auto;
  overflow-y: auto;
  /* بک‌گراند چت از پشتش دیده می‌شه، حباب‌های پیام روش شناورن */
  background: transparent;
  /* ترفند: خود این باکس LTR می‌شه تا اسکرول‌بارش سمت راست بیفته (نه چپ مثل بقیه‌ی سایت)،
     و محتوای داخلش دوباره RTL می‌شه تا چینش پیام‌ها درست بمونه */
  direction: ltr;
}
.bar-chat-main__thread-inner {
  direction: rtl;
  min-height: 100%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.bar-chat-main__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  text-align: center;
  padding: 20px;
}
.bar-chat-main__empty-pill {
  display: inline-block;
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
@media (max-width: 420px) {
  .bar-chat-main__empty-pill { white-space: normal; max-width: 90%; }
}

.bar-thread__bubble {
  position: relative;
  max-width: 66%;
  padding: 10px 14px;
  /* گردی بیشتر از قبل */
  border-radius: 24px;
  font-size: 0.92rem;
}
.bar-thread__bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bar-thread__bubble-image-link { display: block; position: relative; }
.bar-thread__bubble-image {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: 18px;
  cursor: zoom-in;
}
.bar-thread__bubble-image-link + p { margin-top: 8px; }
/* حباب‌های حاوی عکس: حاشیه‌ی بالا/راست/چپ خیلی نازک، مثل قاب دور عکس */
.bar-thread__bubble--media { padding: 4px; }
.bar-thread__bubble--media p { margin: 8px 8px 0; }
.bar-thread__bubble--media > .bar-thread__time { margin: 4px 8px 2px; }
/* وقتی متنی همراه عکس نیست، حاشیه‌ی پایین هم به همون اندازه‌ی بقیه (۴px) می‌مونه؛
   زمان پیام به‌جای خط جدا، روی خود عکس (گوشه‌ی پایین‌راست) می‌شینه */
.bar-thread__time--overlay {
  position: absolute;
  bottom: 8px;
  right: 10px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  opacity: 1;
}
.bar-thread__bubble--own {
  /* راست، چون فرستنده‌ی پیام خودمونیم؛ فقط گوشه‌ی پایین‌راست تیز و مربعی، بقیه گوشه‌ها گرد */
  align-self: flex-start;
  /* نارنجی متین‌تر و مات‌تر، به‌جای گرادیان روشن قبلی */
  background: linear-gradient(100deg, #b85c2c, #cd7844);
  color: #fff;
  border-bottom-right-radius: 0;
}
.bar-thread__bubble--other {
  /* چپ، پیام طرف مقابل؛ فقط گوشه‌ی پایین‌چپ تیز و مربعی، بقیه گوشه‌ها گرد */
  align-self: flex-end;
  background: #f8f6f1;
  border: 1px solid var(--border);
  border-bottom-left-radius: 0;
}
.bar-thread__time {
  display: block;
  font-size: 0.7rem;
  opacity: 0.75;
  margin-top: 4px;
  /* همیشه گوشه‌ی پایین‌چپ خود حباب، مستقل از جهت متن */
  direction: ltr;
  text-align: left;
}

/* وضعیتِ «ارسال شد / دیده شد» زیرِ آخرین پیامِ ارسالیِ خودمون — مثل تلگرام/اینستا،
   فقط زیرِ آخرین پیام (نه همه‌ی پیام‌ها)، و فقط وقتی خودمون فرستنده‌ی اون پیامیم */
.bar-thread__receipt {
  align-self: flex-start;
  margin-top: -4px;
  padding: 0 6px;
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* جداکننده‌ی تاریخ، وسط‌چین بالای هر روز جدید */
.bar-thread__date-sep {
  align-self: center;
  margin: 6px 0 10px;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(20, 35, 20, 0.42);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  /* متنِ فارسی («۲ مهر» / «۲۴ سپتامبر» / «امروز») — راست‌به‌چپ، وگرنه چون کلِ
     .bar-chat-shell چپ‌به‌راسته، ترتیبِ عدد و ماه برعکس («مهر ۲») نمایش داده می‌شه */
  direction: rtl;
  unicode-bidi: isolate;
}

.bar-thread__form-bar {
  flex: 0 0 auto;
  padding: 14px 24px;
  /* بک‌گراند چت از پشتش هم دیده می‌شه؛ فقط خود باکس تایپ کارت شناوره، نه کل نوار */
  background: transparent;
  /* برای اینکه دکمه‌ی «رفتن به پایین» بتونه نسبت به همین نوار جاگیری بشه */
  position: relative;
}

/* دکمه‌ی گرد شناور «رفتن به پایین گفتگو»: بالای دکمه‌ی ارسال، گوشه‌ی پایین-راست ناحیه‌ی چت.
   پیش‌فرض محو/غیرقابل‌کلیکه؛ وقتی رو به بالا اسکرول می‌کنیم با کلاس is-visible ظاهر می‌شه. */
.bar-chat-scroll-bottom {
  position: absolute;
  bottom: 100%;
  right: 24px;
  margin-bottom: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 5;
}
.bar-chat-scroll-bottom.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.bar-chat-scroll-bottom:hover { background: rgba(255, 255, 255, 0.78); }
.bar-chat-scroll-bottom svg { pointer-events: none; }
.bar-thread__form {
  /* دراز: کل عرض نوار پایین رو می‌گیره؛ عرضش (ارتفاعش) هم‌اندازه‌ی دکمه‌ی ارساله */
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
}
.bar-thread__form textarea {
  flex: 1;
  resize: none;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 12px 18px;
  line-height: 1.4;
  border-radius: 999px;
  overflow-y: auto;
  /* همون سفیدِ ماتِ نیمه‌شفاف که نوارِ بالای گفتگو و دکمه‌ی «رفتن به پایین» دارن،
     به‌جای پس‌زمینه‌ی توپرِ کِرِمیِ قبلی */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
}
.bar-thread__send {
  /* دکمه‌ی ارسال: جدا از باکس تایپ ولی نزدیکش (gap بالا)، سمت راست باکس، گرد و با آیکون */
  order: -1;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  /* هم‌رنگ حباب پیام خودمون: نارنجی متین‌تر و مات‌تر */
  background: linear-gradient(100deg, #b85c2c, #cd7844);
  box-shadow: 0 6px 16px rgba(120, 63, 27, 0.24);
}
.bar-thread__send:hover { box-shadow: 0 8px 20px rgba(120, 63, 27, 0.32); }
.bar-thread__send svg { transform: scaleX(-1); }

/* دکمه‌ی گرد ضمیمه‌کردن عکس: سمت چپ باکس تایپ (آخرین المان، دورتر از دکمه‌ی ارسال) */
.bar-thread__attach {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  /* هم‌رنگ با تکست‌باکس و نوار بالای گفتگو: سفیدِ ماتِ نیمه‌شفاف */
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.bar-thread__attach:hover { border-color: var(--amber-400); color: var(--amber-600); }
.bar-thread__attach svg { pointer-events: none; }

/* ---------------- پیامِ صوتی (ویس) ----------------
   دکمه‌ی میکروفون وقتی باکسِ تایپ خالیه جای دکمه‌ی ارسال میاد (کلاس‌های has-voice/is-empty
   رو bar_chat.js می‌ذاره، فقط اگه مرورگر ضبطِ صدا رو پشتیبانی کنه). */
.bar-thread__mic { color: #fff; }
.bar-thread__mic[hidden] { display: none; }
.bar-thread__form.has-voice.is-empty button[type="submit"].bar-thread__send { display: none; }
.bar-thread__form.has-voice:not(.is-empty) .bar-thread__mic { display: none; }

/* نوارِ ضبط، جای فرمِ تایپ */
.bar-thread__form-bar.is-recording .bar-thread__form { display: none; }
.chat-recorder {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.chat-recorder .chat-recorder__send { order: 0; color: #fff; }
.chat-recorder__pill {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
  color: var(--ink);
}
.chat-recorder__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0392b;
  animation: chat-recorder-pulse 1.1s ease-in-out infinite;
}
.chat-recorder--stopped .chat-recorder__dot,
.chat-recorder--retry .chat-recorder__dot { animation: none; background: var(--ink-faint); }
@keyframes chat-recorder-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.chat-recorder__time {
  flex: 0 0 auto;
  direction: ltr;
  min-width: 38px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.92rem;
}
.chat-recorder__wave {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  color: #b85c2c;
}
.chat-recorder__wave span {
  flex: 0 0 3px;
  height: calc(3px + var(--v, 0) * 0.7px);
  border-radius: 1.5px;
  background: currentColor;
  transition: height 0.08s linear;
}
body.theme-arz .chat-recorder__wave { color: var(--emerald-600); }
.chat-recorder--live .chat-recorder__wave { display: flex; }
.chat-recorder--live:not(.chat-recorder--retry) .chat-recorder__hint { display: none; }
.chat-recorder--retry .chat-recorder__wave { flex: 0 1 120px; opacity: 0.6; }
.chat-recorder__hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.chat-recorder--retry .chat-recorder__hint { color: #c0392b; }
.chat-recorder__cancel {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-recorder__cancel:hover { background: rgba(224, 57, 43, 0.1); color: #c0392b; }

/* پخش‌کننده‌ی ویس داخلِ حباب */
.bar-thread__bubble--voice { min-width: 250px; }
.chat-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.chat-voice__play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: linear-gradient(100deg, #b85c2c, #cd7844);
  color: #fff;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.chat-voice__play:active { transform: scale(0.94); }
.bar-thread__bubble--own .chat-voice__play { background: #fff; color: #b85c2c; }
.chat-voice.is-loading .chat-voice__play { opacity: 0.7; }
.chat-voice__icon-pause { display: none; }
.chat-voice.is-playing .chat-voice__icon-play { display: none; }
.chat-voice.is-playing .chat-voice__icon-pause { display: block; }
.chat-voice__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-voice__track {
  position: relative;
  height: 26px;
  cursor: pointer;
}
/* شکلِ موج: هر <span> یه ستون؛ ارتفاعش از --v (۰ تا ۳۱). صفر = یه نقطه‌ی کوچیک روی خطِ پایه
   (همون نقطه‌چینِ بخش‌های ساکت) */
.chat-voice__wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1px;
  padding-bottom: 2px;
  color: rgba(16, 24, 43, 0.22);
}
.chat-voice__wave span {
  flex: 0 0 3px;
  height: calc(2px + var(--v, 0) * 0.7px);
  border-radius: 1.5px;
  background: currentColor;
}
/* لایه‌ی «پخش‌شده»: همون ستون‌ها با رنگِ پررنگ، فقط تا جایی که پخش شده دیده می‌شه */
.chat-voice__wave--played {
  color: #b85c2c;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.bar-thread__bubble--own .chat-voice__wave { color: rgba(255, 255, 255, 0.45); }
.bar-thread__bubble--own .chat-voice__wave--played { color: #fff; }
body.theme-arz .chat-voice__wave--played { color: var(--emerald-600); }
body.theme-arz .bar-thread__bubble--own .chat-voice__wave--played { color: #fff; }
.chat-voice__time {
  font-size: 0.72rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
body.theme-arz .chat-voice__play { background: linear-gradient(100deg, var(--emerald-600), var(--emerald-400)); }
body.theme-arz .bar-thread__bubble--own .chat-voice__play { background: #fff; color: var(--emerald-600); }

/* ---------------- پنجره‌های عکسِ چت (داخلِ همین صفحه، روی بقیه‌ی صفحه‌ی تارشده) ----------------
   هر دو مستقیم داخلِ body ساخته می‌شن (bar_chat.js)، نه داخلِ شلِ چت:
   .chat-lightbox   -> نمایشِ بزرگِ عکسِ یه پیام؛ با ضربدر، کلیک بیرونِ عکس یا Esc بسته می‌شه
   .chat-send-modal -> پیش‌نمایشِ بزرگِ عکسِ انتخاب‌شده قبل از ارسال + نوشتنِ کپشن */
html.chat-media-open { overflow: hidden; }
/* input ِ انتخابِ عکسِ چت (bar_chat.js) — بیرون از شل و نامرئی؛ فقط با دکمه‌ی سنجاق باز می‌شه.
   display:none نیست چون بعضی مرورگرها (Safari قدیمی) کلیکِ برنامه‌ای روی اون رو نادیده می‌گیرن */
.chat-image-picker {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chat-media-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: chat-media-fade 0.16s ease-out;
}
.chat-media-overlay[hidden] { display: none; }
.chat-media-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 14, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@keyframes chat-media-fade { from { opacity: 0; } to { opacity: 1; } }

.chat-media-overlay__close,
.chat-send-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-media-overlay__close {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.chat-media-overlay__close:hover { background: rgba(255, 255, 255, 0.28); }

.chat-lightbox__img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  cursor: default;
  animation: chat-media-zoom 0.18s ease-out;
}
@keyframes chat-media-zoom { from { transform: scale(0.96); } to { transform: scale(1); } }

.chat-send-modal__box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: chat-media-zoom 0.18s ease-out;
}
.chat-send-modal__head {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 12px;
}
.chat-send-modal__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.chat-send-modal__close {
  width: 36px;
  height: 36px;
  background: #f3f1ec;
  color: var(--ink);
}
.chat-send-modal__close:hover { background: #e8e5de; }
.chat-send-modal__media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ec;
}
.chat-send-modal__media img {
  display: block;
  max-width: 100%;
  max-height: min(60vh, 520px);
  object-fit: contain;
}
.chat-send-modal__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px;
}
.chat-send-modal .chat-send-modal__caption {
  flex: 1 1 auto;
  min-height: 0;
  height: 44px;
  max-height: 120px;
  padding: 11px 16px;
  border-radius: 22px;
  background: #f8f6f1;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: none;
}
.chat-send-modal .chat-send-modal__send {
  /* پنجره راست‌به‌چپه؛ order: -1 یعنی اولین آیتم = سمتِ راستِ باکسِ کپشن */
  order: -1;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: #fff;
}
.chat-send-modal.is-sending .chat-send-modal__send { opacity: 0.6; cursor: progress; }
.chat-send-modal.is-sending .chat-send-modal__media img { opacity: 0.7; }

/* نشان میانگین امتیاز کاربر (کنار اسمش تو هدر چت، آگهی، و کارت لیست آگهی‌ها) —
   بدون پس‌زمینه‌ی نارنجیِ توپر؛ فقط دورش هم‌رنگ قاب کارته. عدد امتیاز نارنجی،
   «/۵» مشکی، یه خط نازک خاکستری جداکننده، و زیرش تعداد نظرها محو و ریز. */
.bar-rating-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  white-space: nowrap;
  vertical-align: middle;
}
/* روی برچسبِ آگهیِ فرستنده، امتیازِ کاربر هم آبی می‌شه (هم‌رنگ با تمِ فرستنده) */
.bar-rating-badge--sender .bar-rating-badge__score { color: var(--blue-600); }
/* برچسبِ کوچیکِ بالای عدد، تا مشخص باشه این امتیازِ خودِ کاربره، نه امتیازِ آگهی */
.bar-rating-badge__label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--ink-faint);
  margin-bottom: 1px;
}
.bar-rating-badge__row { display: flex; align-items: baseline; gap: 4px; }
.bar-rating-badge__score {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--amber-600);
}
.bar-rating-badge__scale {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bar-ink);
}
.bar-rating-badge__divider {
  width: 22px;
  height: 1px;
  background: var(--border);
  margin: 4px 0 3px;
}
.bar-rating-badge__reviews {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink-faint);
}

/* نشان امتیاز از ردیف بج‌ها بیرون اومده و شناور، گوشه‌ی بالا-چپ همون باکس
   محتوای آگهی (نه کل ردیف) — شبیه نشان امتیاز روی گوشه‌ی کارت‌های فیلم/محصول. */
.bar-listing-row__rating-corner {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.bar-listing-row__rating-corner .bar-rating-badge { box-shadow: var(--shadow-soft); background: #fff; }

/* ردیف دکمه‌های بیضی‌شکل زیر نوار مشخصات فرد: مسدودکردن، انتخاب طرف توافق (وسط)، گزارش —
   هر سه هم‌شکل و هم‌رنگ (خاکستری مات و کمی شفاف)، هر کدوم دقیقاً یک‌سوم عرض ردیف */
.bar-chat-actions-row {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 10px 14px 0;
  padding: 0 6px;
}
.bar-chat-actions-row > * { flex: 1 1 0; min-width: 0; }
.bar-pill-btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  border: 1px solid rgba(30, 37, 48, 0.55);
  background: rgba(30, 37, 48, 0.55);
  backdrop-filter: blur(2px);
  color: #fff;
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 0.78rem;
  line-height: 1.3;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s ease;
}
.bar-pill-btn:hover { background: rgba(30, 37, 48, 0.72); }
.bar-pill-btn svg { flex: none; }
.bar-pill-btn--static { cursor: default; opacity: 0.6; }
.bar-pill-btn--static:hover { background: rgba(30, 37, 48, 0.55); }

/* ردیفِ اکشنِ چتِ پشتیبانی (فقط یه دکمه‌ی «بررسی شد»/«بازگشایی») — شبیهِ ظاهرِ
   bar-pill-btn بالا ولی بدونِ قانونِ کشیده‌شدنِ bar-chat-actions-row (که برای وقتیه
   ۲-۳ دکمه هم‌ردیفن و هرکدوم دقیقاً یک‌سوم/نصفِ عرض می‌گیرن)؛ اینجا فقط یه دکمه‌ی
   تنهاست که نباید کل عرضِ ردیف رو بگیره. */
.bar-support-actions-row { flex: 0 0 auto; display: flex; gap: 8px; margin: 10px 14px 0; padding: 0 6px; }
.bar-support-actions-row .bar-pill-btn { width: auto; }

/* نوار وضعیت معامله بعد از توافق: نشان + امتیازدهی */
.bar-thread__deal-bar--matched {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 10px 18px;
  border-radius: 14px;
  background: #e9f9f1;
  border: 1px solid #cdeee0;
}
.bar-thread__deal-badge { font-size: 0.82rem; font-weight: 600; color: #157a4d; }
.bar-thread__deal-rated { font-size: 0.82rem; color: var(--ink-soft); }
.bar-stars { color: #d9a308; letter-spacing: 1px; }

/* فرم امتیازدهی با ستاره: دکمه‌ها بدون قاب، فقط خود ستاره پررنگ می‌شه.
   ترتیبِ دکمه‌ها توی HTML از ۵ به ۱ هست (برعکسِ ترتیبِ نمایش) و با
   row-reverse دوباره به ترتیبِ درستِ ۱ تا ۵ نمایش داده می‌شه؛ همین
   برعکس‌بودن باعث می‌شه با ترکیبِ hover + ~ (سلکتورِ خواهر-و-برادرهای
   بعدی)، هاور رفتن روی هر ستاره، اون ستاره و همه‌ی ستاره‌های قبلش
   (تا همون امتیاز) رو هم‌زمان روشن کنه، نه فقط خودش رو. */
.bar-star-form { display: flex; align-items: center; gap: 8px; }
.bar-star-form__label { font-size: 0.82rem; color: var(--ink-soft); }
.bar-star-form__stars { display: flex; flex-direction: row-reverse; gap: 2px; }
.bar-star-form__stars button {
  border: none;
  background: none;
  padding: 2px;
  font-size: 1.2rem;
  line-height: 1;
  color: #d9d4c8;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}
.bar-star-form__stars button:hover,
.bar-star-form__stars button:hover ~ button,
.bar-star-form__stars button:focus-visible,
.bar-star-form__stars button:focus-visible ~ button {
  color: #d9a308;
}
.bar-star-form__stars button:hover,
.bar-star-form__stars button:focus-visible { transform: scale(1.15); }

/* بنر «این آگهی بسته شده»، جایگزین کادر تایپ وقتی گفتگو غیرفعاله */
.bar-thread__locked-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 24px 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 0.82rem;
  text-align: center;
}

/* نشان‌گذاری گفتگوهای بسته‌شده/طرف‌توافق‌شده تو لیست گفتگوها */
.bar-chat-item--locked { opacity: 0.6; }
.bar-chat-item__deal-tag { font-size: 0.78rem; }

.bar-my-listing__match-note { display: block; margin-top: 4px; font-size: 0.76rem; }

/* ---------------- مودال «گزارش کاربر» ---------------- */
.bar-report-modal[hidden] { display: none; }
.bar-report-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bar-report-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 18, 0.5);
}
.bar-report-modal__box {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
  max-width: 420px;
  width: 100%;
  animation: modal-pop 0.18s ease;
}
.bar-report-modal__close {
  position: absolute;
  top: 12px;
  left: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.bar-report-modal__box h3 { margin-bottom: 16px; }
.bar-report-modal__box .field { margin-bottom: 14px; }

@media (max-width: 1000px) {
  .bar-search-panel__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .bar-listing-row { flex-direction: column; }
  .bar-listing-row__side {
    flex: none;
    /* روی موبایل ردیف ستونیه، پس باکس عرضِ کاملِ ردیف رو می‌گیره و به‌خاطرِ
       aspect-ratio: 1/1 (که از رولِ اصلی به ارث می‌رسه)، ارتفاعش خودکار با
       همون عرض برابر می‌شه — یعنی این‌جا هم دقیقاً مربع می‌مونه و کراپ نداره */
    max-width: none;
    min-width: 0;
    border-inline-start: none;
    border-top: 1px solid var(--border);
    padding: 12px 22px;
    /* توی حالت ستونی، این باکس پایینِ کارته: فقط گوشه‌های پایین باید گرد بمونن */
    border-top-left-radius: 0;
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .bar-listing-actions { flex-wrap: wrap; }
  .bar-listing-actions > * { flex: 1 1 40%; }
}
@media (max-width: 640px) {
  .bar-thread__bubble { max-width: 88%; }
  .bar-search-box-wrap { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: 10px; }
  .bar-search-box { padding: 0 4px; }
  .bar-search-panel__submit { width: 100%; }
  .bar-search-panel__grid { grid-template-columns: 1fr; }
  .bar-role-tabs { justify-content: center; }
  .bar-filter-card__footer { flex-direction: column; align-items: stretch; }
  .bar-filter-card__footer-actions { flex-direction: column-reverse; align-items: stretch; }
  .bar-listing-row__info { padding: 16px 16px 14px; }
  .bar-pagination__btn--nav { padding: 0 10px; }
}

/* ============================================================
   قلمروی رنگی باهم‌بر — هیچ آبیِ باهم‌اپلای اینجا استفاده نشه
   ============================================================ */
body.theme-bar h1,
body.theme-bar h2,
body.theme-bar h3 { color: var(--bar-ink); }

body.theme-bar input[type="text"]:focus,
body.theme-bar input[type="tel"]:focus,
body.theme-bar input[type="email"]:focus,
body.theme-bar input[type="date"]:focus,
body.theme-bar select:focus,
body.theme-bar textarea:focus {
  /* قبلاً نارنجیِ پررنگ (amber-500) با هالوی توپر بود که چشم‌آزار و شبیه هشدار/خطا
     به نظر می‌رسید؛ همون رنگِ مات‌ترِ برندِ باهم‌بر (که تو حبابِ پیام و دکمه‌ی
     ارسال هست) با یه سایه‌ی کم‌رنگ‌تر و شفاف، ظاهرِ آروم‌تر و شیک‌تری می‌ده */
  border-color: #cd7844;
  box-shadow: 0 0 0 3px rgba(205, 120, 68, 0.18);
}

/* ورودی جستجوی بالای لیست آگهی‌ها خودش border ندازه (شفافه) و حلقه‌ی focus
   واقعی روی wrapperِ بیضی‌شکل (.bar-search-box-wrap:focus-within) نشون داده می‌شه؛
   بدون این override، استایل focus عمومیِ بالا یه باکس مربعیِ کوچیک دور خودِ
   input می‌کشید که از گوشه‌های گرد wrapper بیرون می‌زد. */
body.theme-bar .bar-search-box input:focus {
  border-color: transparent;
  box-shadow: none;
}

/* دکمه‌ی ثانویه‌ی باهم‌بر: قبلاً کهربایی بود و دقیقاً هم‌رنگ دکمه‌ی اصلی می‌شد؛
   الان طرح خطی و تیره داره تا با دکمه‌ی اصلیِ کهربایی تضاد و تنوع رنگی داشته باشه. */
body.theme-bar .btn--secondary {
  background: #fff;
  color: var(--bar-ink);
  border: 1.5px solid var(--bar-ink);
}
body.theme-bar .btn--secondary:hover { background: var(--bar-ink); color: #fff; }

/* فرم‌های ورود/ثبت‌نام (login, verify, complete_profile) صفحه‌ی مشترک بین همه‌ی
   زیرمجموعه‌هان، پس رنگشون همیشه آبیِ باهم‌اپلای بود؛ وقتی از باهم‌بر شروع می‌شن
   (site_section روی "bar" میره) باید کهربایی باشن. */
body.theme-bar .card--auth .btn--primary {
  background: linear-gradient(95deg, var(--amber-600), var(--amber-500));
  box-shadow: 0 10px 24px rgba(217, 103, 12, 0.28);
}
body.theme-bar .card--auth .btn--primary:hover { box-shadow: 0 12px 28px rgba(217, 103, 12, 0.36); }
body.theme-bar .auth-icon { background: var(--amber-050); color: var(--amber-600); }
body.theme-bar .otp-box:focus { border-color: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-050); }

body.theme-bar .link-btn { color: var(--amber-600); }

body.theme-bar .navbar__hub-link:hover { color: var(--bar-ink); }

body.theme-bar .navbar__link.is-active { color: var(--amber-600); background: var(--amber-050); }

body.theme-bar .nav-dropdown__item:hover { background: var(--amber-050); color: var(--amber-600); }

body.theme-bar .dash-avatar { background: var(--amber-050); color: var(--amber-600); }
body.theme-bar .dash-nav__item.is-active { background: var(--amber-050); color: var(--amber-600); }
body.theme-bar .dash-logout:hover { color: var(--danger); }

/* ---------------- داشبورد باهم‌بر ---------------- */
.bar-dash-profile {
  max-width: 1180px;
  margin: 0 auto 20px;
}
.bar-dash-profile .dash-content__head { margin-bottom: 16px; }
.bar-dash-profile .resume-section { margin-bottom: 0; }

.bar-dash-grid {
  max-width: 1180px;
  margin: 20px auto 64px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.bar-dash-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.bar-dash-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--amber-400); }
.bar-dash-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.bar-dash-card h3 { font-size: 1rem; margin-bottom: 4px; }
.bar-dash-card .muted { font-size: 0.85rem; margin: 0; }
.bar-dash-card__badge {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--amber-500);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
}
.bar-dash-card--verified .bar-dash-card__icon { background: #e9f9f1; color: #157a4d; }
.bar-dash-card--verified { border-color: #b9e8cc; }

@media (max-width: 640px) {
  .bar-dash-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1500px) {
  .bar-dash-profile, .bar-dash-grid, .bar-form-card, .bar-verify-status { max-width: 1320px; }
}
@media (max-width: 700px) {
  .bar-form-card { padding: 0 20px; }
}

/* توی موبایل، صفحه‌ی پیام‌ها ارتفاع ثابت خودشو نگه می‌داره تا هم لیست هم گفتگو قابل اسکرول باشن.
   این بلوک عمداً آخر فایل اومده تا روی تعریف‌های پایه‌ی بالاتر (با specificity یکسان) اولویت داشته باشه. */
@media (max-width: 860px) {
  .dash-content--flush { height: 72vh; overflow: hidden; padding: 0; }
  .bar-chat-shell { flex-direction: column; }
  .bar-chat-list { margin: 5px 10px 10px 5px; }
  .bar-chat-main__head { margin: 10px 10px 0 10px; }
  .bar-chat-shell:not(.bar-chat-shell--has-active) .bar-chat-list { flex: 1 1 auto; }
  .bar-chat-shell:not(.bar-chat-shell--has-active) .bar-chat-main { display: none; }
  .bar-chat-shell.bar-chat-shell--has-active .bar-chat-list { display: none; }
  .bar-chat-back-link { display: inline-flex; }
  .bar-thread__bubble { max-width: 86%; }

  /* روی صفحه‌ی چت، لینک‌های عادیِ ناوبار (آگهی‌ها/درباره‌ی ما) و اکشن‌های حساب
     (دکمه‌ی ثبت‌آگهی + دراپ‌داونِ حساب) با آیتم‌های همون سایدبارِ کشویی که با
     کلیک روی پروفایل باز می‌شه یکی‌ان؛ توی موبایل مخفی می‌شن تا با دایره‌ی
     پروفایلِ گوشه‌ی راست روی هم نیفتن و نوارِ بالا توی یه خط جا بشه. */
  .navbar__inner--has-chat-trigger .navbar__links,
  .navbar__inner--has-chat-trigger .navbar__actions {
    display: none;
  }
  /* اسمِ کنارِ عکسِ پروفایل هم توی این عرضِ کم حذف می‌شه، فقط خودِ دایره و فلش
     می‌مونه؛ بنابراین فضای رزروشده برای این دکمه هم خیلی کمتر از حالتِ دسکتاپ
     کافیه (به‌جای ۲۳۰px) */
  .navbar__chat-sidebar-trigger-name { display: none; }
  .navbar__inner--has-chat-trigger { padding-right: 90px; }

  /* وقتی همون سایدبار با کلیک روی پروفایل باز می‌شه، به‌جای فشرده‌شدنِ کنارِ
     چت (که قبلاً می‌شد)، کل عرض رو می‌گیره و چت موقتاً مخفی می‌شه — یعنی فقط
     همون باکسِ کناری دیده می‌شه */
  .dash-layout--chat:has(.dash-sidebar.is-open) .dash-content--flush {
    display: none;
  }
  .dash-layout--chat .dash-sidebar.is-open {
    width: 100%;
    flex-basis: 100%;
  }

  /* ردیفِ دکمه‌های گزارش/مسدودکردن (و در صورت وجود، انتخاب‌طرفِ‌توافق): توی این
     عرضِ کم، به‌جای زیرِ هم چیدنِ کاملِ همه (که برای همین دو دکمه بی‌فایده بود)،
     هر خط رو تا جایی که جا داره پر می‌کنیم — با دو دکمه هر دو کنار هم توی یه
     ردیف می‌مونن؛ اگه سه‌تا باشه، دوتای اول کنار هم و سومی (چون تنهاست) خودش
     تمام عرضِ ردیفِ بعدی رو می‌گیره */
  .bar-chat-actions-row { flex-wrap: wrap; }
  .bar-chat-actions-row > * { flex: 1 1 150px; min-width: 140px; }
  .bar-pill-btn { font-size: 0.74rem; padding: 8px 8px; }

  /* صفحه‌ی چت توی موبایل هم باید دقیقاً مثل دسکتاپ توی یه صفحه‌ی ثابت (بدون
     اسکرولِ کل صفحه) بمونه: نه فوتر پایین صفحه دیده بشه، نه با اسکرول یه فضای
     خالی زیرِ چت بیفته. ریست عمومیِ موبایلِ بالاتر (که body/main رو به حالتِ
     معمولیِ صفحه برمی‌گردونه) برای صفحاتِ دیگه‌ی داشبورد لازمه، ولی برای همینِ
     صفحه‌ی چت به‌طور اختصاصی، حالتِ ثابت (100vh) رو برمی‌گردونیم. */
  body:has(.dash-layout--chat) {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body:has(.dash-layout--chat) .site-footer { display: none; }
  main:has(.dash-layout--chat) {
    height: auto;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
  }
  .dash-layout--chat { flex-direction: row; height: 100%; min-height: 0; }
  .dash-content--flush { height: 100%; }

  /* نوارِ بالای صفحه‌ی گفتگو (دکمه‌ی بازگشت + اسم/عکسِ طرفِ مقابل + دکمه‌ی
     درباره‌ی آگهی) توی این عرضِ کم باید همیشه توی یه خط بمونه و بزرگ‌تر نشه؛
     برای همین یه ارتفاعِ ثابت و کوچیک‌تر می‌ذاریم (به‌جای اجازه‌دادن به رشدِ
     ارتفاع) و محتوای داخلش رو جمع‌وجورتر می‌کنیم: متنِ «بازگشت» حذف می‌شه (فقط
     فلش می‌مونه)، وضعیتِ آنلاین/تایپ مخفی می‌شه، و اسم/مسیر با سقفِ کوچیک‌تری
     بریده می‌شن. */
  .bar-chat-main__head {
    height: 48px;
    overflow: hidden;
    padding: 0 12px;
    gap: 6px;
  }
  .bar-chat-back-link__text { display: none; }
  .bar-chat-peer-status { display: none; }
  .bar-chat-main__identity { padding: 4px 10px 4px 4px; }
  .bar-chat-main__avatar { width: 24px; height: 24px; font-size: 0.72rem; }
  .bar-chat-main__name { font-size: 0.82rem; max-width: 88px; }
  .bar-chat-main__route {
    max-width: 40%;
    font-size: 0.7rem;
    padding: 6px 10px;
  }
}

/* ---------------- پروفایل باهم‌بر (نمایش و آپلود عکس پروفایل) ---------------- */
.dash-user--link {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
  cursor: pointer;
  margin: -6px -8px 12px;
  padding: 6px 8px;
  width: calc(100% + 16px);
  box-sizing: border-box;
}
.dash-user--link:hover { background: var(--bg); }
.dash-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.profile-view__avatar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.profile-view__avatar-row strong { font-size: 1.05rem; }

.avatar-upload { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.avatar-upload__preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.avatar-upload__remove { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }

/* ---------------- دکمه‌های شناور ثابت پایین صفحه (پیام‌ها + پشتیبانی) — همه‌ی صفحات باهم‌بر ---------------- */
/* باز/بسته‌شدن با کلاس is-open از جاوااسکریپت (کلیک روی دکمه)، نه هاور؛
   پوزیشن ثابت روی رَپره، نه خود دکمه، چون پاپ‌آور هم داخل همین رپر قرار می‌گیره */
.bar-fab-wrap {
  position: fixed;
  bottom: 20px;
  z-index: 400;
}
.bar-chat-fab-wrap { left: 20px; }
.bar-support-fab-wrap { right: 20px; }

/* توی صفحاتی که سایدبار داشبورد دارن (ستون ۲۶۰px سمت راست)، دکمه‌ی پشتیبانی نباید روی خود
   سایدبار بشینه؛ به‌جاش بیرون از سایدبار و چسبیده به لبه‌ی چپش قرار می‌گیره */
body:has(.dash-sidebar) .bar-support-fab-wrap { right: calc(260px + 20px); }

@media (max-width: 860px) {
  /* زیر این عرض، سایدبار بالای محتوا میاد (ستونی نیست)، پس دیگه هم‌پوشانی‌ای نیست */
  body:has(.dash-sidebar) .bar-support-fab-wrap { right: 20px; }
}
@media (max-width: 640px) {
  .bar-chat-fab-wrap { left: 14px; bottom: 14px; }
  .bar-support-fab-wrap,
  body:has(.dash-sidebar) .bar-support-fab-wrap { right: 14px; bottom: 14px; }
}

.bar-fab-trigger {
  position: relative;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bar-fab-trigger:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
  .bar-fab-trigger { width: 50px; height: 50px; }
}

/* نشان تعداد پیام‌های خونده‌نشده روی گوشه‌ی آیکون شناور پیام‌ها */
.bar-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #e0432c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  .bar-fab-badge { top: -2px; right: -2px; min-width: 18px; height: 18px; line-height: 18px; font-size: 0.64rem; }
}

.bar-chat-fab {
  background: linear-gradient(95deg, var(--amber-600), var(--amber-500));
  box-shadow: 0 10px 24px rgba(217, 103, 12, 0.35);
}
.bar-chat-fab:hover { box-shadow: 0 14px 30px rgba(217, 103, 12, 0.42); }

.bar-support-fab {
  background: linear-gradient(95deg, #6a5bd0, #4f7fe6);
  box-shadow: 0 10px 24px rgba(79, 68, 208, 0.35);
}
.bar-support-fab:hover { box-shadow: 0 14px 30px rgba(79, 68, 208, 0.42); }

/* پاپ‌آور هر دو دکمه؛ کاملاً CSS-محور تا باز/بسته‌شدن نرم و بدون پرش باشه */
.bar-fab-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  width: 320px;
  max-width: calc(100vw - 40px);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.bar-chat-fab-popover { left: 0; transform-origin: bottom left; }
.bar-support-fab-popover { right: 0; transform-origin: bottom right; }
.bar-fab-wrap.is-open .bar-fab-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.bar-fab-popover__card {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.bar-fab-popover__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.bar-fab-popover__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  background: var(--bg);
  color: var(--ink-soft);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.bar-fab-popover__close:hover { background: var(--amber-050); color: var(--amber-600); }
.bar-fab-popover__footer-link {
  flex: 0 0 auto;
  display: block;
  text-align: center;
  padding: 11px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber-600);
  border-top: 1px solid var(--border);
  transition: background 0.12s ease;
}
.bar-fab-popover__footer-link:hover { background: var(--bg); }
.bar-chat-fab-preview__tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
}
.bar-chat-fab-preview__tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bar-chat-fab-preview__tab svg { flex: 0 0 auto; }
.bar-chat-fab-preview__tab:hover { border-color: var(--amber-400); color: var(--amber-600); }
.bar-chat-fab-preview__tab.is-active {
  border-color: transparent;
  background: linear-gradient(100deg, #b85c2c, #cd7844);
  color: #fff;
}
.bar-chat-fab-preview__tab.is-active:hover { color: #fff; border-color: transparent; }
/* لیست فقط داخل خودش رو اسکرول می‌کنه؛ direction عمداً ltr شده که اسکرول‌بار سمت راست بشینه
   (چون کل صفحه dir="rtl" هست و پیش‌فرض مرورگرها اسکرول‌بار رو توی راست‌به‌چپ سمت چپ می‌ذارن)،
   و روی هر آیتم دوباره rtl می‌کنیم که چیدمان داخلیش (آواتار/متن) درست بمونه */
.bar-chat-fab-preview__list {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 340px;
  direction: ltr;
}
.bar-chat-fab-preview__list > * { direction: rtl; }
.bar-chat-fab-preview__list .bar-chat-item { padding: 12px 14px; }

/* ---------------- باکس شناور پشتیبانی ---------------- */
.bar-support-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.bar-support-panel__step {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.bar-support-panel__step[hidden] { display: none; }
.bar-support-panel__hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px 16px;
  text-align: center;
}
.bar-support-panel__hero-icon {
  color: #6a5bd0;
  opacity: 0.9;
}
.bar-support-panel__hero-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}
.bar-support-panel__topics {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  /* direction عمداً ltr شده که اسکرول‌بار سمت راست بشینه (چون کل صفحه rtl هست)؛
     روی هر آیتم دوباره rtl می‌کنیم که متن و چیدمانش درست بمونه */
  direction: ltr;
}
.bar-support-panel__topics > * { direction: rtl; }
.bar-support-panel__topic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.82rem;
  text-align: right;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.bar-support-panel__topic:hover { background: var(--bg); }
.bar-support-panel__topic svg { flex: 0 0 auto; color: var(--ink-faint); transform: scaleX(-1); }

.bar-support-panel__step--form { padding: 16px; gap: 12px; }
.bar-support-panel__back {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.bar-support-panel__back:hover { color: var(--amber-600); }
.bar-support-panel__topic-title {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
.bar-support-panel__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-support-panel__form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--ink);
  resize: vertical;
}
.bar-support-panel__form textarea:focus { outline: none; border-color: var(--amber-400); }
.bar-support-panel__error { font-size: 0.78rem; color: #c0392b; }

.bar-support-panel__step--done {
  align-items: center;
  text-align: center;
  padding: 26px 18px;
  gap: 6px;
}
.bar-support-panel__done-icon { color: #2e9e5b; margin-bottom: 4px; }
.bar-support-panel__done-title { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.bar-support-panel__done-text { font-size: 0.8rem; margin-bottom: 10px; }


/* ---------------- پرداخت کارت‌به‌کارت و رسیدها ---------------- */
.pay-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 18px;
}
.pay-card__hint { color: var(--ink-soft); font-size: 0.92rem; }
.pay-card__amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 12px;
}
.pay-card__amount strong { font-size: 1.1rem; color: var(--navy-900); }
.pay-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.pay-card__label { color: var(--ink-soft); font-size: 0.88rem; min-width: 84px; }
.pay-card__number {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--navy-900);
}
.pay-card__owner { font-weight: 700; color: var(--navy-900); }
.pay-card__note { color: var(--ink-soft); font-size: 0.85rem; margin: 10px 0 0; }

.pay-card__amount-value { display: flex; align-items: baseline; gap: 8px; }
.pay-card__amount-old { color: var(--ink-faint); font-size: 0.88rem; }

.pay-card__promo { padding: 10px 0; border-bottom: 1px dashed var(--border); margin-bottom: 4px; }
.pay-card__promo label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 6px; }
.pay-card__promo-row { display: flex; gap: 8px; }
.pay-card__promo-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.92rem;
  background: var(--surface);
}
.pay-card__promo--applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--navy-900);
}
.pay-card__promo-badge {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 999px;
  margin-inline-start: 4px;
}

.form-note--warning { background: #fff4e0; border-color: #f6ddb4; color: #8a5a06; }

.pay-status--verified strong { color: var(--success); }
.pay-status--unchecked strong { color: #a5690a; }

.receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.receipt-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.receipt-card__head h3 { font-size: 1rem; margin-bottom: 4px; }
.receipt-card__head p { margin-bottom: 2px; font-size: 0.85rem; }
.receipt-card__image {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: 12px;
}
.receipt-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-card__actions input[type="text"] { flex: 1 1 160px; }

.status-badge--invalid { background: #fdecec; color: #a33; }

/* وضعیت پرداخت در فهرست سفارش‌ها */
.status-badge--pay-no_receipt { background: var(--bg); color: var(--ink-faint); }
.status-badge--pay-unchecked { background: #fff4e0; color: #a5690a; }
.status-badge--pay-verified { background: #e9f9f1; color: #157a4d; }
.status-badge--pay-invalid { background: #fdecec; color: #a33; }

/* ---------------- موبایل: بخش‌های پرداخت، رسید و فرم‌های نگارش مدارک ---------------- */
@media (max-width: 640px) {
  /* شماره‌ی ۱۶ رقمی کارت روی عرض موبایل جا نمی‌شه؛ کل ردیف می‌شکنه و شماره
     تمام‌عرض و کمی کوچک‌تر نمایش داده می‌شه تا قابل خوندن و کپی‌کردن بمونه. */
  .pay-card { padding: 16px; }
  .pay-card__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .pay-card__label { min-width: 0; }
  .pay-card__number {
    font-size: 1.02rem;
    letter-spacing: 0.04em;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    word-break: break-all;
  }
  .pay-card__row .copy-btn { align-self: center; }
  .pay-card__amount { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pay-card__promo-row { flex-direction: column; }
  .pay-card__promo--applied { flex-direction: column; align-items: flex-start; }

  /* کارت‌های رسید در پنل ادمین: یک‌ستونه و دکمه‌های اقدام زیر هم */
  .receipt-grid { grid-template-columns: 1fr; }
  .receipt-card__head { flex-direction: column; gap: 8px; }
  .receipt-card__actions { flex-direction: column; align-items: stretch; }
  .receipt-card__actions .btn { width: 100%; }
  .receipt-card__actions input[type="text"] { flex: 1 1 auto; width: 100%; }

  /* ردیف‌های تکرارشونده‌ی فرم رزومه/انگیزه‌نامه: هر فیلد تمام‌عرض */
  .repeat-row { grid-template-columns: 1fr; }
  .repeat-row__fields { grid-template-columns: 1fr; }
  .repeat-row__remove { width: 100%; height: 38px; }

  /* تب‌های مرحله‌ای فرم‌ها کمی جمع‌وجورتر تا تعداد کمتری خط اشغال کنن */
  .wizard-tab { padding: 8px 12px; font-size: 0.8rem; }
  .wizard-card { padding: 18px 14px; }

  /* یادداشت‌های بالای فرم و کارت قیمت‌ها */
  .form-note { padding: 10px 12px; font-size: 0.86rem; }
  .pricing-card { padding: 24px 18px; }
}

/* ============================================================
   رنگ‌های پایه‌ی باهم‌ارز — سبز/زمردی (اصلی) و طلایی (نقشِ خرید)
   ============================================================ */
:root {
  --emerald-600: #0f7a5c;
  --emerald-500: #159c73;
  --emerald-400: #49bea3;
  --emerald-050: #e8f7f2;
  --gold-600: #a9790f;
  --gold-500: #c99525;
  --gold-400: #dab35c;
  --gold-050: #fbf3e2;
  --arz-ink: #12231f;
  /* رنگِ مکملِ سبز برای دکمه‌های زیرِ آگهی — چون بقیه‌ی صفحه (بج‌ها، حاشیه‌ها،
     دکمه‌ی اصلی) پر از طیفِ سبزه، این دکمه‌ها با یه بنفش/زرشکیِ ملایم و شیک
     (مکملِ سبز روی چرخه‌ی رنگ) خودشون رو نشون می‌دن، نه اینکه توی سبز گم بشن. */
  --arz-accent: #6b3f63;
  --arz-accent-hover: #82527a;
  --arz-accent-soft: #f5eef3;
}

/* ============================================================
   باهم‌ارز — صفحه‌ی اصلی (هیرو، نشان‌های اعتماد، چطور کار می‌کنه، سوالات)
   ============================================================ */
main:has(.arz-hero) { max-width: 1220px; }
.arz-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 40px;
  padding: 64px 24px;
  text-align: center;
  background: linear-gradient(125deg, #0b4a3a 0%, #159c73 55%, #6cd4b3 100%);
  box-shadow: 0 24px 48px rgba(11, 74, 58, 0.28);
}
.arz-hero__center { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; }
.arz-hero__title { color: #fff; font-size: 1.7rem; line-height: 1.55; margin-bottom: 12px; }
.arz-hero__subtitle { color: rgba(255, 255, 255, 0.88); font-size: 1rem; max-width: 1130px; margin-inline: auto; }
@media (min-width: 1024px) {
  .arz-hero__subtitle { white-space: nowrap; }
}
.arz-hero .btn--arz { background: #fff; color: var(--emerald-600); box-shadow: none; }
.arz-hero .btn--arz:hover { background: #eefdf8; box-shadow: none; }
.arz-hero .btn--secondary { background: rgba(255, 255, 255, 0.16); color: #fff; }
.arz-hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.26); }
.arz-hero__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.arz-trust {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.arz-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--arz-ink);
  box-shadow: var(--shadow-soft);
}
.arz-trust__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--emerald-050);
  color: var(--emerald-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .arz-trust { flex-direction: column; align-items: stretch; }
  .arz-trust__item { justify-content: flex-start; }
}

.arz-how { max-width: 1180px; margin: 0 auto; padding: 32px 20px; }
.arz-how__steps {
  display: grid;
  /* فقط ۳ مرحله‌ست (نه ۴ تا مثل باهم‌بر)، پس توی یه ردیف کنار هم جا می‌شن */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.arz-how__step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}
.arz-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--emerald-050);
  color: var(--emerald-600);
  font-weight: 800;
  margin-bottom: 12px;
}
.arz-how__step h3 { font-size: 1.02rem; margin-bottom: 6px; }
@media (max-width: 860px) {
  .arz-how__steps { grid-template-columns: 1fr; }
}

.arz-faq { max-width: 780px; margin: 0 auto; padding: 8px 20px 56px; }
.arz-faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.arz-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 20px;
}
.arz-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--arz-ink);
  cursor: pointer;
  list-style: none;
}
.arz-faq__item summary::-webkit-details-marker { display: none; }
.arz-faq__chevron { flex: none; color: var(--emerald-500); transition: transform 0.15s ease; }
.arz-faq__item[open] .arz-faq__chevron { transform: rotate(180deg); }
.arz-faq__item p { padding-bottom: 16px; margin: -4px 0 0; }

.arz-role-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.arz-role-options--row { flex-direction: row; flex-wrap: wrap; }
.arz-role-options--row .arz-role-option { flex: 1 1 160px; justify-content: center; }
.arz-role-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.arz-role-option:has(input:checked) { border-color: var(--emerald-500); background: var(--emerald-050); }
.arz-role-option input { accent-color: var(--emerald-600); width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 640px) {
  .arz-hero { padding: 40px 20px 16px; }
  .arz-hero__title { font-size: 1.35rem; }
}

/* ---------------- باهم‌ارز — دکمه‌ی برند و صفحه‌ی سرِ داشبورد ---------------- */
.btn--arz {
  background: linear-gradient(95deg, var(--emerald-600), var(--emerald-500));
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 122, 92, 0.28);
}
.btn--arz:hover { box-shadow: 0 12px 28px rgba(15, 122, 92, 0.36); }

.arz-page-head { max-width: 1080px; margin: 0 auto; padding: 40px 20px 8px; }
.arz-page-head h1 { margin-bottom: 4px; }
.arz-page-head .btn { margin-top: 14px; }

.navbar--arz .navbar__inner { justify-content: space-between; }
.navbar--arz { position: sticky; top: 0; }
.navbar--arz .navbar__links { flex: 0 1 auto; }
.navbar--arz .navbar__actions { margin-inline-start: auto; }

/* ---------------- پنل جستجو و فیلتر آگهی‌های ارز ---------------- */
.arz-search-panel {
  max-width: 1320px;
  margin: 0 auto 8px;
  padding: 18px 20px 0;
}
.arz-search-panel--top { padding-top: 40px; }

.arz-search-box-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  padding: 6px 6px 6px 20px;
  margin-bottom: 18px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.arz-search-box-wrap:focus-within { border-color: var(--emerald-400); box-shadow: 0 0 0 4px var(--emerald-050); }
.arz-search-box {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.arz-search-box svg {
  position: absolute;
  right: 0;
  color: var(--ink-faint);
  pointer-events: none;
}
.arz-search-box input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 28px 10px 0;
  font-size: 1rem;
  font-family: var(--font);
  color: var(--ink);
  outline: none;
  box-shadow: none;
}
.arz-search-panel__submit { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
.arz-search-panel__submit.btn--arz {
  background: var(--arz-ink);
  box-shadow: 0 10px 24px rgba(18, 35, 31, 0.28);
}
.arz-search-panel__submit.btn--arz:hover { box-shadow: 0 12px 28px rgba(18, 35, 31, 0.36); }

.arz-filter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
}

.arz-role-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.arz-role-tabs .filter-tab {
  cursor: pointer;
  font-family: var(--font);
}
.arz-role-tabs .filter-tab.is-active { background: var(--arz-ink); border-color: var(--arz-ink); color: #fff; }

.arz-search-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.arz-search-panel__grid .field { margin-bottom: 0; }
.arz-search-panel__hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }

.arz-filter-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.arz-filter-card__footer-actions { display: flex; align-items: center; gap: 16px; }
.arz-filter-card__footer-actions .btn--arz {
  background: var(--arz-ink);
  box-shadow: 0 10px 24px rgba(18, 35, 31, 0.28);
}
.arz-filter-card__footer-actions .btn--arz:hover { box-shadow: 0 12px 28px rgba(18, 35, 31, 0.36); }
.arz-search-panel__sort { margin-bottom: 0; min-width: 180px; }

.arz-results-bar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 20px 16px;
  display: flex;
  align-items: center;
}
.arz-results-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(18, 35, 31, 0.07);
  color: var(--arz-ink);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 600;
}
.arz-results-count strong { font-size: 0.98rem; }

/* ---------------- فهرست آگهی‌های ارز (بدون تصویرِ تزئینیِ کناری) ----------------
   دوتا آگهی توی هر ردیف، با گرید (نه flex) تا عرضِ دو ستون همیشه دقیقاً مساوی
   بمونه — حتی اگه توضیحِ یه آگهی خیلی بلندتر از اون‌یکی باشه. */
.arz-listing-list {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* row-gap از column-gap بیشتره — چون دکمه‌های زیرِ هر آگهی الان نصفشون از
     پایینِ کارت بیرون می‌زنه (توضیح داخلِ .arz-listing-actions)، این فاصله‌ی
     اضافه جلوی برخوردِ بصریِ دکمه‌ها با کارتِ ردیفِ بعدی رو می‌گیره. */
  gap: 44px 24px;
  align-items: stretch;
}
.arz-listing-row {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.arz-listing-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--blue-400); }
.arz-listing-row--buy:hover { border-color: var(--emerald-400); }
/* هر آگهی (کارت + دکمه‌های زیرش) یه خانه‌ی گرید — height:100% تا اگه توضیحِ
   آگهیِ کناری‌ش بلندتر بود، کارتِ کوتاه‌تر هم تا همون ارتفاع کش بیاد و ردیف
   هم‌تراز بمونه. */
.arz-listing-group { display: flex; flex-direction: column; height: 100%; }
/* پدینگِ پایین عمداً بیشتر از بقیه‌ی جهت‌هاست — فضای خالی برای اینکه دکمه‌های
   شناور (arz-listing-actions) که نصفشون روی لبه‌ی کارت می‌شینه، روی متنِ
   توضیحات/فوتر ننشینه. */
.arz-listing-row__info { position: relative; display: block; flex: 1 1 auto; min-width: 0; padding: 20px 22px 38px; }

.arz-listing-card__badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.arz-listing-card__badges .arz-listing-card__role { margin-bottom: 0; }
.arz-listing-card__badges .arz-listing-card__mine { margin-bottom: 0; }
.arz-listing-card__role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.arz-listing-card__role svg { flex: none; }
/* تمِ خرید سبز/زمردیه (رنگِ اصلیِ برندِ باهم‌ارز)، تمِ فروش آبی */
.arz-listing-card__role--buy { background: var(--emerald-050); color: var(--emerald-600); }
.arz-listing-card__role--sell { background: var(--blue-050); color: var(--blue-600); }

/* برچسبِ «آگهی شما» — وقتی صاحبِ آگهی داره لیستِ عمومی رو می‌بینه، همون آگهیِ
   خودش رو هم (مثلِ بقیه‌ی کاربرها) می‌بینه، فقط با این بج مشخص می‌شه که مالِ
   خودشه. برای اینکه هر کارتِ آگهی فقط یه رنگ داشته باشه (نه چندتا رنگِ قاطی)،
   رنگِ این بج هم دقیقاً از همون تمِ نقشِ آگهی (سبزِ خرید / آبیِ فروش) پیروی
   می‌کنه، نه یه رنگِ جداگانه. */
.arz-listing-card__mine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: var(--blue-050);
  color: var(--blue-600);
}
.arz-listing-row--buy .arz-listing-card__mine { background: var(--emerald-050); color: var(--emerald-600); }
.arz-listing-card__mine svg { flex: none; }

/* نشانِ «احراز هویت‌شده» هم توی آگهی‌ها به‌جای رنگِ سبزِ ثابتِ سراسری‌ش
   (bar-verified-badge پایه، که توی بقیه‌ی جاهای سایت مثلِ نوارِ داشبورد همون
   سبزِ همیشگی رو داره)، رنگِ تمِ نقشِ همون آگهی (سبزِ خرید / آبیِ فروش) رو
   می‌گیره — تا هر کارت/صفحه‌ی آگهی فقط با یه رنگ دیده بشه. */
.arz-listing-row .bar-verified-badge,
.arz-listing-detail__hero-badges .bar-verified-badge {
  background: var(--blue-050);
  color: var(--blue-600);
}
.arz-listing-row--buy .bar-verified-badge,
.arz-listing-detail__hero-badges--buy .bar-verified-badge {
  background: var(--emerald-050);
  color: var(--emerald-600);
}

/* کارتِ امتیازِ کاربر، گوشه‌ی بالا-چپِ کارتِ آگهی — سمتِ چپ انتخاب شده تا با
   بجِ نوعِ ارز و متنِ عنوان که سمتِ راستِ کارت (شروعِ خط توی RTL) هستن قاطی نشه. */
.arz-listing-row__rating-corner {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.arz-listing-row__rating-corner .bar-rating-badge { box-shadow: var(--shadow-soft); background: #fff; }
/* امتیازِ کاربر هم مثلِ نشانِ احرازهویت، از رنگِ ثابتِ کهربایی‌ش بیرون میاد و
   رنگِ تمِ نقشِ همون آگهی رو می‌گیره — تا هر کارت فقط با یه رنگ دیده بشه. */
.arz-listing-row .bar-rating-badge .bar-rating-badge__score { color: var(--blue-600); }
.arz-listing-row--buy .bar-rating-badge .bar-rating-badge__score { color: var(--emerald-600); }

.arz-listing-row__headline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.05rem;
  margin: 2px 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arz-listing-row__headline svg { flex: none; color: var(--blue-500); }
.arz-listing-row__headline--buy svg { color: var(--emerald-500); }
.arz-listing-row__meta { display: flex; flex-wrap: wrap; gap: 8px; min-height: 24px; margin-bottom: 12px; }
.arz-listing-row__desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: calc(1.6em * 2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arz-listing-row__published {
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin: 8px 0 0;
}
.arz-listing-row__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.arz-listing-row__footer .arz-listing-row__published { margin: 0; }
.arz-listing-row__views {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  flex: 0 0 auto;
  white-space: nowrap;
}
.arz-listing-row__views svg { flex: none; }
.arz-listing-detail__views { margin-top: -8px; }

.arz-listing-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: var(--bg);
  border-radius: 999px;
  padding: 3px 10px;
}
.arz-listing-card__tag--rate {
  color: var(--blue-600);
  background: var(--blue-050);
  font-weight: 700;
}
.arz-listing-card__tag--rate-buy {
  color: var(--emerald-600);
  background: var(--emerald-050);
}

/* ردیفِ دکمه‌های زیرِ هر آگهی — عیناً مکانیزمِ bar-pill-btn/bar-save-btn، فقط اینجا
   به‌جای دکمه‌ی بیضی‌شکلِ متن‌دار، فقط آیکون (دایره‌ی کوچیک) نشون داده می‌شه؛ متنِ
   هرکدوم (برای صفحه‌خوان و موتورهای جستجو) با .sr-only توی DOM می‌مونه ولی مخفیه،
   و به‌جاش یه تولتیپِ hover (همون bar-tooltip که برای نشانِ احرازهویت هم استفاده
   شده) توضیح می‌ده هر دکمه چیه. */
/* دکمه‌ها دیگه زیرِ کارت نیستن — داخلِ خودِ arz-listing-row (که position:relative
   داره) روی لبه‌ی پایینش سوار می‌شن: نصفِ بالاییِ هر دکمه روی کارت و نصفِ
   پایینی‌ش بیرونِ کارت. هالوی هم‌رنگِ پس‌زمینه‌ی صفحه (box-shadow با var(--bg))
   دورِ هر دکمه، دقیقاً جایی که روی کارت می‌افته، یه بریدگیِ دایره‌ای/تورفتگی
   ایجاد می‌کنه — انگار دکمه توی یه گودیِ گرد نشسته. */
.arz-listing-actions {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  z-index: 3;
}
.arz-listing-actions > * { flex: 0 0 auto; min-width: 0; }
.arz-listing-actions .bar-pill-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--arz-accent);
  border: 1px solid var(--arz-accent);
  color: #fff;
  backdrop-filter: none;
  box-shadow: 0 0 0 5px var(--bg), 0 0 4px 6px var(--bg);
}
.arz-listing-actions .bar-pill-btn:hover { background: var(--arz-accent-hover); border-color: var(--arz-accent-hover); }
.arz-listing-actions .bar-save-btn.is-saved { background: #fff; border-color: var(--arz-accent); color: var(--arz-accent); }
.arz-listing-actions .bar-save-btn.is-saved:hover { background: var(--arz-accent-soft); }

/* صفحه‌بندی لیست آگهی‌ها */
.arz-pagination {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.arz-pagination__pages { display: flex; align-items: center; gap: 6px; }
.arz-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
a.arz-pagination__btn:hover { border-color: var(--emerald-400); color: var(--emerald-600); }
.arz-pagination__btn.is-active { background: var(--emerald-500); border-color: var(--emerald-500); color: #fff; }
.arz-pagination__btn--nav { padding: 0 16px; }
.arz-pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.arz-pagination__ellipsis { color: var(--ink-faint); padding: 0 4px; }

/* ---------------- صفحه‌ی جزئیات آگهی ارز ---------------- */
.arz-listing-detail__container {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.arz-listing-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}
.arz-listing-detail__back svg { transform: scaleX(-1); }
.arz-listing-detail__back:hover { color: var(--emerald-600); }
.arz-listing-detail__container .bar-listing-detail__status-banner { margin: 0; }

.arz-listing-detail__hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 26px 28px;
}
.arz-listing-detail__hero-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.arz-listing-detail__hero-badges .arz-listing-card__role { margin-bottom: 0; }
.arz-listing-detail__title { margin: 0 0 10px; font-size: 1.5rem; }
.arz-listing-detail__hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.arz-listing-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.arz-listing-detail__rate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--blue-050);
}
.arz-listing-detail__rate-banner--buy { background: var(--emerald-050); }
.arz-listing-detail__rate-value { font-size: 1.05rem; font-weight: 700; color: var(--blue-600); }
.arz-listing-detail__rate-banner--buy .arz-listing-detail__rate-value { color: var(--emerald-600); }
.arz-listing-detail__rate-tag {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue-600);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 4px 12px;
}
.arz-listing-detail__rate-banner--buy .arz-listing-detail__rate-tag { color: var(--emerald-600); }

.arz-listing-detail__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px 28px;
}
.arz-listing-detail__card h3 { font-size: 0.95rem; margin: 0 0 6px; }
.arz-listing-detail__card h3 + p { margin-top: 0; }
.arz-listing-detail__card p { color: var(--ink-soft); line-height: 1.9; }
.arz-listing-detail__card h3 ~ h3 { margin-top: 18px; }

.arz-listing-detail__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.arz-detail-stat { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.arz-detail-stat__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--emerald-050);
  color: var(--emerald-600);
}
.arz-detail-stat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arz-detail-stat__label { font-size: 0.78rem; color: var(--ink-faint); }
.arz-detail-stat__value { font-size: 0.95rem; font-weight: 600; color: var(--ink); }

.arz-listing-detail__contact-card {
  background: var(--emerald-050);
  border-color: rgba(15, 122, 92, 0.18);
}
.arz-listing-detail__contact-card h3 { margin-bottom: 10px; }
.arz-listing-detail__contact-card .btn { margin-top: 10px; }

@media (max-width: 560px) {
  .arz-listing-detail__container { padding: 20px 16px 48px; gap: 16px; }
  .arz-listing-detail__hero,
  .arz-listing-detail__card { padding: 20px; }
  .arz-listing-detail__stats { grid-template-columns: 1fr; }
  .arz-listing-detail__rate-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 860px) {
  .arz-role-tabs { justify-content: center; }
  .arz-filter-card__footer { flex-direction: column; align-items: stretch; }
  .arz-filter-card__footer-actions { flex-direction: column-reverse; align-items: stretch; }
  .arz-listing-list { grid-template-columns: 1fr; }
  .arz-listing-row__info { padding: 16px 16px 34px; }
  .arz-pagination__btn--nav { padding: 0 10px; }
}

/* ============================================================
   قلمروی رنگی باهم‌ارز — هیچ آبی/نارنجیِ بخش‌های دیگه اینجا استفاده نشه
   ============================================================ */
body.theme-arz h1,
body.theme-arz h2,
body.theme-arz h3 { color: var(--arz-ink); }

body.theme-arz input[type="text"]:focus,
body.theme-arz input[type="tel"]:focus,
body.theme-arz input[type="email"]:focus,
body.theme-arz input[type="date"]:focus,
body.theme-arz input[type="number"]:focus,
body.theme-arz select:focus,
body.theme-arz textarea:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px var(--emerald-050);
}

body.theme-arz .arz-search-box input:focus {
  border-color: transparent;
  box-shadow: none;
}

body.theme-arz .btn--secondary {
  background: #fff;
  color: var(--arz-ink);
  border: 1.5px solid var(--arz-ink);
}
body.theme-arz .btn--secondary:hover { background: var(--arz-ink); color: #fff; }

/* فرم‌های ورود/ثبت‌نام مشترک، وقتی از باهم‌ارز شروع می‌شن (site_section روی "arz") سبز می‌شن */
body.theme-arz .card--auth .btn--primary {
  background: linear-gradient(95deg, var(--emerald-600), var(--emerald-500));
  box-shadow: 0 10px 24px rgba(15, 122, 92, 0.28);
}
body.theme-arz .card--auth .btn--primary:hover { box-shadow: 0 12px 28px rgba(15, 122, 92, 0.36); }
body.theme-arz .auth-icon { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .otp-box:focus { border-color: var(--emerald-500); box-shadow: 0 0 0 3px var(--emerald-050); }

body.theme-arz .link-btn { color: var(--emerald-600); }

body.theme-arz .navbar__hub-link:hover { color: var(--arz-ink); }

body.theme-arz .navbar__link.is-active { color: var(--emerald-600); background: var(--emerald-050); }

body.theme-arz .nav-dropdown__item:hover { background: var(--emerald-050); color: var(--emerald-600); }

body.theme-arz .dash-avatar { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .profile-avatar-lg { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .dash-nav__item.is-active { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .dash-logout:hover { color: var(--danger); }

/* فوتر باهم‌ارز — همون قالبِ فوترِ کاملِ باهم‌بر، فقط رنگش سبز */
.arz-footer {
  text-align: initial;
  padding: 32px 20px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.arz-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
}
.arz-footer__brand { max-width: 420px; }
.arz-footer__logo {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--arz-ink);
  margin-bottom: 6px;
}
.arz-footer__tagline {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}
.arz-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.arz-footer__links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--arz-ink);
  text-decoration: none;
}
.arz-footer__links a:hover { color: var(--emerald-600); }
.arz-footer__bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 0 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
@media (max-width: 640px) {
  .arz-footer__inner { flex-direction: column; }
}

/* ---------------- داشبورد باهم‌ارز ---------------- */
.arz-dash-profile {
  max-width: 1180px;
  margin: 0 auto 20px;
}
.arz-dash-profile .dash-content__head { margin-bottom: 16px; }
.arz-dash-profile .resume-section { margin-bottom: 0; }

.arz-dash-grid {
  max-width: 1180px;
  margin: 20px auto 64px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.arz-dash-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.arz-dash-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--emerald-400); }
.arz-dash-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--emerald-050);
  color: var(--emerald-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.arz-dash-card h3 { font-size: 1rem; margin-bottom: 4px; }
.arz-dash-card .muted { font-size: 0.85rem; margin: 0; }

@media (max-width: 640px) {
  .arz-dash-grid { grid-template-columns: 1fr; }
}

/* ---------------- درباره‌ی باهم‌ارز ---------------- */
.arz-about-block { max-width: 760px; margin: 20px auto 64px; }
.arz-about-block h2 { margin-bottom: 12px; }
.arz-about-block p { color: var(--ink-soft); margin-bottom: 12px; }
.arz-about-block p:last-child { margin-bottom: 0; }

/* ---------------- چت + پشتیبانیِ باهم‌ارز ----------------
   کلاس‌های bar-chat-*, bar-thread-*, bar-fab-* عیناً (بدون تغییر) توی قالب‌ها و
   جاوااسکریپتِ باهم‌ارز هم استفاده می‌شن (همون الگویی که برای بقیه‌ی این پروژه هم
   جواب داده) — رنگِ نارنجیِ پیش‌فرضشون اینجا با رنگِ سبزِ باهم‌ارز جایگزین می‌شه.
   دکمه‌ی شناورِ پشتیبانی (بنفش/آبی) و بج‌ها عمداً دست‌نخورده می‌مونن، چون رنگِ
   پشتیبانی مستقل از برندِ هر بخشه. */
body.theme-arz .bar-chat-tab:hover { border-color: var(--emerald-400); color: var(--emerald-600); }
body.theme-arz .bar-chat-tab.is-active {
  background: linear-gradient(100deg, var(--emerald-600), var(--emerald-400));
  box-shadow: 0 4px 12px rgba(15, 122, 92, 0.25);
}
body.theme-arz .bar-chat-search .bar-chat-search__input:focus { border-color: var(--emerald-400); }
body.theme-arz .bar-chat-item.is-active { background: var(--emerald-050); }
body.theme-arz .bar-chat-item__avatar { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .bar-chat-item.is-active .bar-chat-item__avatar { background: var(--emerald-600); color: #fff; }
body.theme-arz .bar-chat-item__ticks--seen { color: var(--emerald-600); }
body.theme-arz .bar-chat-main__avatar { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .bar-chat-peer-status--typing { color: var(--emerald-600); }
body.theme-arz .bar-thread__bubble--own {
  background: linear-gradient(100deg, var(--emerald-600), var(--emerald-400));
}
body.theme-arz .bar-thread__send {
  background: linear-gradient(100deg, var(--emerald-600), var(--emerald-400));
  box-shadow: 0 6px 16px rgba(15, 122, 92, 0.24);
}
body.theme-arz .bar-thread__send:hover { box-shadow: 0 8px 20px rgba(15, 122, 92, 0.32); }
body.theme-arz .bar-thread__attach:hover { border-color: var(--emerald-400); color: var(--emerald-600); }

body.theme-arz .bar-chat-fab {
  background: linear-gradient(95deg, var(--emerald-600), var(--emerald-500));
  box-shadow: 0 10px 24px rgba(15, 122, 92, 0.35);
}
body.theme-arz .bar-chat-fab:hover { box-shadow: 0 14px 30px rgba(15, 122, 92, 0.42); }
body.theme-arz .bar-fab-popover__close:hover { background: var(--emerald-050); color: var(--emerald-600); }
body.theme-arz .bar-fab-popover__footer-link { color: var(--emerald-600); }
body.theme-arz .bar-chat-fab-preview__tab:hover { border-color: var(--emerald-400); color: var(--emerald-600); }
body.theme-arz .bar-chat-fab-preview__tab.is-active {
  background: linear-gradient(100deg, var(--emerald-600), var(--emerald-400));
}

/* ---------------- ویزارد دومرحله‌ایِ ثبتِ آگهیِ باهم‌ارز ----------------
   شمارنده‌ی بالای فرم (۲ دایره + یه خط‌رابط) و کارت‌های انتخابیِ بزرگ/جمع‌وجورِ
   رادیویی (نوعِ آگهی، روشِ معامله، زمانِ انجامِ معامله) — همه با رنگِ سبزِ باهم‌ارز. */
/* این فرم به‌جای نسخه‌ی عریضِ داشبورد (bar-form-card--wide که برای فرم‌های
   یک‌ستونیِ باهم‌بر مناسبه)، عرضِ جمع‌وجورترِ خودشو داره — وگرنه فیلدهایی مثل
   نوع ارز یا نرخِ پیشنهادی توی عرضِ کاملِ داشبورد الکی کشیده می‌شدن. */
.arz-wizard-card { max-width: 640px; margin-inline: auto; }

.arz-wizard-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 26px;
}
.arz-wizard-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.arz-wizard-progress__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.92rem;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--ink-faint);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.arz-wizard-progress__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  transition: color 0.15s ease;
}
.arz-wizard-progress__step.is-active .arz-wizard-progress__circle {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
  color: #fff;
}
.arz-wizard-progress__step.is-active .arz-wizard-progress__label { color: var(--emerald-600); }
.arz-wizard-progress__step.is-done .arz-wizard-progress__circle {
  background: var(--emerald-050);
  border-color: var(--emerald-500);
  color: var(--emerald-600);
}
.arz-wizard-progress__step.is-done .arz-wizard-progress__label { color: var(--ink); }
.arz-wizard-progress__line {
  width: 90px;
  max-width: 18vw;
  height: 2px;
  background: var(--border);
  margin: 16px 6px 0;
  transition: background 0.15s ease;
}
.arz-wizard-progress__line.is-done { background: var(--emerald-500); }

.arz-wizard-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.arz-choice-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.arz-choice-cards--lg .arz-choice-card { flex: 1 1 160px; padding: 13px 16px; justify-content: flex-start; }
.arz-choice-cards--compact .arz-choice-card { flex: 1 1 130px; }
.arz-choice-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.arz-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.arz-choice-card:has(input:checked) { border-color: var(--emerald-500); background: var(--emerald-050); color: var(--emerald-600); }
.arz-choice-card:hover { border-color: var(--emerald-400); }

/* آیکونِ هر کارتِ انتخابی، به‌جای یه svg شناور، توی یه دایره‌ی رنگی («نشان») —
   وقتی گزینه انتخاب می‌شه، دایره خودش پر از رنگِ سبز می‌شه و آیکون سفید می‌شه،
   که خیلی واضح‌تر از فقط تغییرِ رنگِ خطِ آیکونه. */
.arz-choice-card__icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--emerald-050);
  color: var(--emerald-600);
  transition: background 0.12s ease, color 0.12s ease;
}
.arz-choice-card__icon-badge--sm { width: 30px; height: 30px; }
.arz-choice-card:has(input:checked) .arz-choice-card__icon-badge {
  background: var(--emerald-600);
  color: #fff;
}

/* نسخه‌ی ساده‌ترِ کارتِ انتخابی («نوعِ آگهی») — یه چک‌باکسِ واقعی به‌جای نشانِ
   دایره‌ای‌ِ آیکون‌دار، برای وقتی که فقط باید بینِ دو گزینه انتخاب کرد. */
.arz-choice-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--border);
  background: #fff;
  color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.arz-choice-card:has(input:checked) .arz-choice-card__check {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
  color: #fff;
}
.arz-choice-card--checkbox:hover .arz-choice-card__check { border-color: var(--emerald-400); }

.arz-amount-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.arz-amount-row .field { flex: 1 1 200px; margin-bottom: 0; }
.arz-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-bottom: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.arz-checkbox-inline input { accent-color: var(--emerald-600); width: 16px; height: 16px; }

.arz-rate-type-toggle { display: flex; gap: 8px; margin-top: 8px; }
.arz-rate-type-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.arz-rate-type-toggle input { accent-color: var(--emerald-600); }
.arz-rate-type-toggle label:has(input:checked) { border-color: var(--emerald-500); background: var(--emerald-050); color: var(--emerald-600); }

.arz-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .arz-wizard-progress__step { min-width: 84px; }
  .arz-wizard-progress__line { width: 40px; }
  .arz-wizard-footer { flex-direction: column-reverse; align-items: stretch; }
}

/* ---------------- دکمه‌ی «ورود با گوگل» (صفحه‌های ورود/ثبت‌نامِ همه‌ی بخش‌ها) ----------------
   ظاهر طبقِ راهنمای برندِ گوگل: زمینه‌ی سفید، حاشیه‌ی خاکستری، لوگوی رنگیِ G */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-weight: 700;
  box-shadow: none;
}
.btn-google:hover { background: #f8faff; border-color: #c6cbd1; color: #1f1f1f; }
.btn-google svg { flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--ink-faint); font-size: 0.82rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* =====================================================

   Impressum (/impressum و /club/impressum) — مثلِ صفحه‌ی Impressum ِ ردیت: نوارِ رنگیِ عنوان، انتخابگرِ
   صفحه‌های حقوقی کنارِ متن، و متن به دو زبان (آلمانیِ چپ‌به‌راست + ترجمه‌ی فارسی) بدونِ کارت و با فاصله‌ی زیاد
   ============================================================ */
.legal-page { max-width: 1040px; margin: 24px auto 64px; padding: 0 16px; }
.legal-hero {
  display: flex; align-items: center; gap: 22px;
  padding: 34px 40px; border-radius: var(--radius-lg, 20px);
  background: var(--blue-500, #2f86ff); color: #fff;
}
.legal-hero--club { background: #187bb3; }
.legal-hero__icon { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 20px; background: #fff; padding: 8px; object-fit: contain; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
body .legal-hero .legal-hero__title { margin: 0; font-size: 2.6rem; line-height: 1.2; font-weight: 900; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: right; }
.legal-hero__sub { margin: 6px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 0.98rem; }

.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; margin-top: 36px; align-items: start; }
.legal-layout__body { min-width: 0; max-width: 680px; }

/* انتخابگرِ صفحه‌های حقوقی (قرصِ «Impressum ▾» ِ ردیت) */
.legal-switch { position: relative; }
.legal-switch summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 8px 20px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--surface, #fff); color: var(--ink); font-weight: 800; cursor: pointer;
}
.legal-switch summary::-webkit-details-marker { display: none; }
.legal-switch summary:focus-visible { outline: 2px solid var(--blue-500, #2f86ff); outline-offset: 2px; }
.legal-switch[open] summary svg { transform: rotate(180deg); }
.legal-switch__menu {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 30px rgba(11, 28, 58, 0.12);
}
.legal-switch__menu a { padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 600; }
.legal-switch__menu a:hover { background: var(--bg); }
.legal-switch__menu a[aria-current="page"] { color: var(--blue-500, #2f86ff); font-weight: 800; }

.legal-lang { font-size: 1.05rem; line-height: 1.95; color: var(--ink); }
.legal-lang[dir="ltr"] { text-align: left; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.legal-lang + .legal-lang { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border); }
.legal-lang__label { margin: 0 0 18px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.legal-lang__label small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.legal-lang p { margin: 0 0 26px; }
.legal-lang a { color: var(--blue-500, #2f86ff); overflow-wrap: anywhere; }
.legal-lang a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-address { font-weight: 600; }
.legal-lang--fa .legal-address { text-align: right; }
.legal-hero--club ~ .legal-layout .legal-lang a,
.legal-hero--club ~ .legal-layout .legal-switch__menu a[aria-current="page"] { color: #187bb3; }

.legal-page__notice {
  padding: 14px 16px; border-radius: var(--radius-md, 12px);
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; line-height: 1.9;
}

@media (max-width: 760px) {
  .legal-page { margin-top: 12px; }
  .legal-hero { padding: 24px 20px; gap: 16px; }
  .legal-hero__icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
  body .legal-hero .legal-hero__title { font-size: 2rem; }
  .legal-layout { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .legal-lang { font-size: 1rem; }
  .legal-lang p { margin-bottom: 20px; }
}

=======
/* ---------------- باهم‌اپلای — کشورهای مقصد (صفحه‌ی اصلی + فرمِ رزرو) ---------------- */
.country-flag { width: 34px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(11, 28, 58, 0.12); flex: none; display: block; }

.apply-countries { max-width: 1120px; margin: 44px auto 0; }
.apply-countries__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.apply-country-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.apply-country-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--blue-400); }
.apply-country-card__head { display: flex; align-items: center; gap: 12px; }
.apply-country-card__head .country-flag { width: 44px; }
.apply-country-card__head h3 { margin: 0; font-size: 1.25rem; }
.apply-country-card p { color: var(--ink-soft); margin: 0; line-height: 1.8; }
.apply-guide {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-050), #f5f9ff);
  border: 1px solid #d6e6ff;
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.apply-guide:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--blue-400); }
.apply-guide__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--surface);
  color: var(--blue-600);
  box-shadow: 0 4px 12px rgba(31, 111, 235, .12);
}
.apply-guide__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.apply-guide__text strong { font-size: 1.02rem; }
.apply-guide__text span { color: var(--ink-soft); font-size: 0.88rem; }
.apply-guide__arrow {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-weight: 700;
  transition: transform .2s ease;
}
.apply-guide:hover .apply-guide__arrow { transform: translateX(-4px); }

.country-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.country-choice__option { position: relative; cursor: pointer; font-weight: 600; }
.country-choice__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.country-choice__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.country-choice__option:hover .country-choice__card { border-color: var(--blue-400); }
.country-choice__option input:checked + .country-choice__card {
  border-color: var(--blue-600);
  background: var(--blue-050);
  box-shadow: 0 0 0 3px var(--blue-050);
}
.country-choice__option input:focus-visible + .country-choice__card { box-shadow: 0 0 0 3px var(--blue-400); }

@media (max-width: 640px) {
  .apply-countries__grid { grid-template-columns: 1fr; }
  .apply-countries { margin-top: 32px; }
}

/* پرداخت مدارک: کادر «ویرایش اطلاعات سفارش» تا قبل از تأیید رسید */
.order-edit-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--blue-050);
  border: 1px solid #d6e6ff;
}
.order-edit-box p { margin: 4px 0 0; }
.order-edit-box .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .order-edit-box { flex-direction: column; align-items: stretch; text-align: center; }
}

/* خطای زنده‌ی فرم‌های چندمرحله‌ای (consultation_wizard.js) */
.field.has-error input,
.field.has-error select:not(.phone-input__country),
.field.has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 53, 69, .12); }
.field.has-error > label { color: var(--danger); }

/* حریمِ خصوصی و شرایطِ استفاده (partials/privacy_content.html و terms_content.html): متنِ بلندِ فارسی با تیتر و فهرست */
.legal-doc h2 { margin: 34px 0 12px; font-size: 1.18rem; font-weight: 800; color: var(--ink); }
.legal-doc h3 { margin: 22px 0 8px; font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul { margin: 0 0 18px; padding-inline-start: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc .legal-doc__updated { color: var(--ink-faint); font-size: .9rem; }

/* ======================= باهم کلاب: متنِ کاربر ======================= */
/* ---------- ترتیبِ کلمه‌های متنِ کاربر (عنوان، متن، نظر، گزینه‌ی نظرسنجی، …) ----------
   دقیقاً مثلِ کادرِ تایپ (و تلگرام): ترتیبِ کلمه‌های هر خط از اولین حرفش میاد، پس «Hausartz انتخاب» همون‌طور
   دیده می‌شه که موقعِ نوشتن دیده می‌شد. چینش ولی از dir (فیلترِ club_dir) میاد: هر متنی که حرفِ فارسی داره
   راست‌چینه، فقط‌لاتین چپ‌چین. :where تا کلاس‌هایی که text-align ِ خودشون رو دارن (مثلاً وسط‌چین) برنده بمونن.
   اینجا (نه club.css) چون صفحه‌ی گزارش‌های کلاب توی پنلِ ادمین هم ازش استفاده می‌کنه. */
[data-bidi] { unicode-bidi: plaintext; }
:where([data-bidi][dir="rtl"]) { text-align: right; }