/* ============================================================
   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: #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, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  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; }

main {
  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); }

/* ---------------- 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--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__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: 420px; margin: 64px auto; }

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

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 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;
}
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px);
  animation: flash-in 0.25s ease forwards;
}
.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); } }
.flash--error { background: #fdecec; color: #a33; border: 1px solid #f6c9c9; }
.flash--success { background: #e9f9f1; color: #157a4d; border: 1px solid #bfeed6; }
.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; }
.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 26px;
}
.home-hero__cta {
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.home-hero__cta:hover { background: #f2f6ff; }

@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%; }
  .home-hero__cta { 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; }

.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); }

.dash-content {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
}
.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; }

.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);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.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-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: 1120px; }

.admin-tabs { display: flex; gap: 4px; margin-top: 24px; border-bottom: 1px solid var(--border); }
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--navy-900); }
.admin-tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.tab-badge {
  background: #fff4e0;
  color: #a5690a;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}

.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; }
.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; }

.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-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--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;
}

/* ---------------- 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; }
  .navbar__links { order: 4; width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 4px; }
  .navbar__link, .nav-dropdown__trigger { white-space: nowrap; }
  .nav-dropdown__menu { right: auto; left: 0; }
}

/* ============================================================
   باهم — صفحه‌ی هاب سوپراپ
   ============================================================ */
.navbar--hub .navbar__inner,
.navbar--bar .navbar__inner { justify-content: space-between; }

/* توی نوار باهم‌بر، گروه برند+لینک‌ها (سمت راست) باید کاملاً چسبیده به لبه‌ی راست بمونه و
   گروه اکشن‌ها (سمت چپ) کاملاً چسبیده به لبه‌ی چپ — بدون رشد لینک‌ها به وسط، 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__brand-sep { color: var(--border); font-weight: 400; }
.navbar__brand--bar { gap: 8px; }
.navbar__brand-accent--bar { color: var(--amber-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: 980px;
  margin: 0 auto;
  padding: 10px 20px 72px;
  display: grid;
  grid-template-columns: repeat(3, 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 {
  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__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--ghost {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  box-shadow: none;
  background: transparent;
}
.hub-tile__desc--ghost { color: var(--ink-faint); font-size: 0.88rem; margin: 0; }

@media (max-width: 860px) {
  .hub-tiles { grid-template-columns: 1fr 1fr; }
  .hub-tile--ghost { display: none; }
}
@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;
}
.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 64px; }
.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; }

/* ============================================================
   باهم‌بر — صفحه‌ی معرفی
   ============================================================ */
.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: 1060px; 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: 1010px; 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: 980px;
  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: 980px; margin: 0 auto; padding: 32px 20px; }
.bar-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 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 {
  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-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(--amber-600); border-color: var(--amber-600); color: #fff; }

.bar-search-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 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-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: var(--amber-050);
  color: var(--amber-600);
  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: 14px;
}
.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__info { 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-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.bar-listing-card__role--sender { background: var(--rust-050); color: var(--rust-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__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-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-row__side {
  flex: 0 0 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
  border-inline-start: 1px solid var(--border);
  /* صفحه RTLه، پس این باکس همیشه سمت چپِ ردیفه؛ چون دیگه کل ردیف overflow:hidden
     نداره، گردیِ گوشه‌های چپ رو خودمون اینجا می‌دیم تا با گردیِ ردیف ست بشه */
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.bar-listing-row__cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; }
.bar-listing-row__cta svg { flex: none; }

/* صفحه‌بندی لیست آگهی‌ها */
.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 form { display: flex; flex-direction: column; }
.bar-form-card form > .btn { align-self: flex-start; }
/* ردیفِ پایینِ فرم: دکمه‌ی ارسال یه طرف، توضیح کوتاه هم روبروش (طرف مقابل) */
.bar-form-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-top: 4px; }
.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-listing-detail__route { margin: 8px 0 4px; }
.bar-listing-detail__price { color: var(--amber-600); font-weight: 700; }
.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; }

/* ---------------- صفحه‌ی پیام‌ها — چت دوستونه (لیست چپ، گفتگو راست) ---------------- */
.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 280px;
  /* کارت شناور: از هر چهار طرف (از جمله نوار بالا و ستون گفتگو) کمی فاصله داره و گوشه‌هاش خمیده‌ست */
  margin: 14px;
  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: #f8f6f1;
}
.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-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 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: 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: 7px 6px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.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;
}
.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-search__input::placeholder { color: var(--ink-faint); }
.bar-chat-search .bar-chat-search__input:focus {
  outline: none;
  border-color: var(--amber-400);
  box-shadow: none;
}
.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);
}
/* روبه‌روی اسم شخص، توی همون خط، با فونت کوچیک‌تر */
.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 var(--border);
  /* هم‌اندازه‌ی گردی باکس تایپ (کاملاً کپسولی) */
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
  background: #f8f6f1;
}
.bar-chat-main__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  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.88rem;
  /* جای عکس پروفایل کاربر — فعلاً حرف اول اسم، بعداً با آواتار واقعی جایگزین میشه */
}
.bar-chat-main__info {
  min-width: 0;
  flex: 1 1 auto;
  /* اسم و درباره‌ی آگهی هم‌ردیف، توی یه خط، تا نوار باریک‌تر بمونه */
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bar-chat-main__head h3 {
  margin: 0;
  flex: 0 1 auto;
  max-width: 55%;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-chat-main__route {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  /* بردنش به سمت چپ باکس، جدا از اسم */
  text-align: left;
}
.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__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;
  direction: ltr;
}

.bar-thread__form-bar {
  flex: 0 0 auto;
  padding: 14px 24px;
  /* بک‌گراند چت از پشتش هم دیده می‌شه؛ فقط خود باکس تایپ کارت شناوره، نه کل نوار */
  background: transparent;
}
.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: #f8f6f1;
  border: 1px solid var(--border);
  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 var(--border);
  background: #f8f6f1;
  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;
}
.bar-thread__attach:hover { border-color: var(--amber-400); color: var(--amber-600); }
.bar-thread__attach svg { pointer-events: none; }

/* پیش‌نمایش عکس انتخاب‌شده، بالای کادر تایپ، قبل از ارسال */
.bar-thread__image-preview:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px;
  border-radius: 14px;
  background: #f8f6f1;
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(16, 24, 43, 0.08);
}
.bar-thread__image-preview img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}
.bar-thread__image-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(16, 24, 43, 0.1);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bar-thread__image-remove:hover { background: rgba(16, 24, 43, 0.18); color: var(--ink); }

/* نشان میانگین امتیاز کاربر (کنار اسمش تو هدر چت، آگهی، و کارت لیست آگهی‌ها) */
.bar-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fff6e0;
  color: #a5690a;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
/* تعداد نظرهایی که میانگین امتیاز ازشون محاسبه شده — کنار نشان امتیاز، محو و کوچیک‌تر */
.bar-rating-count {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
  vertical-align: middle;
}

/* ردیف دکمه‌های بیضی‌شکل زیر نوار مشخصات فرد: مسدودکردن، انتخاب طرف توافق (وسط)، گزارش —
   هر سه هم‌شکل و هم‌رنگ (خاکستری مات و کمی شفاف)، هر کدوم دقیقاً یک‌سوم عرض ردیف */
.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-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; }

/* فرم امتیازدهی با ستاره: دکمه‌ها بدون قاب، فقط خود ستاره پررنگ می‌شه */
.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; 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:focus-visible { color: #d9a308; 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;
    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-row__cta { width: auto; padding-left: 24px; padding-right: 24px; }
}
@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 {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px var(--amber-050);
}

/* ورودی جستجوی بالای لیست آگهی‌ها خودش 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: var(--amber-050); color: var(--amber-600); }
body.theme-bar .btn--secondary:hover { background: #fbe6cc; }

/* فرم‌های ورود/ثبت‌نام (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: 10px; }
  .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%; }
}

/* ---------------- پروفایل باهم‌بر (نمایش و آپلود عکس پروفایل) ---------------- */
.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; }