/* ==================================================================
   هدر یکپارچه — لوگو + نوار ناوبری + ورود، همه در یک ردیف
   ⚠️ این فایل بعد از theme-pages.css لود می‌شود و نوار قدیمیِ دو‌ردیفه را
      به حالت درون‌هدر (inline) تبدیل می‌کند.
   ================================================================== */
.public-page .header-inner--single {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

/* برند کمی جمع‌وجورتر تا فضا برای منو باز شود */
.public-page .header-inner--single .brand { flex: 0 0 auto; }
.public-page .header-inner--single .brand h1 { font-size: 1.02rem; }
.public-page .header-inner--single .brand p { font-size: .74rem; }

/* نوار ناوبری داخل هدر: بدون پستو، بدون پس‌زمینهٔ جدا، چسبیده به مرکز */
.public-page .main-nav--inline {
  position: static;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex: 1 1 auto;
  min-width: 0;
}
.public-page .main-nav--inline .main-nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: auto;
  padding: 0;
  gap: 0;
}
.public-page .main-nav--inline .nav-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.public-page .main-nav--inline .nav-list::-webkit-scrollbar { display: none; }
.public-page .main-nav--inline .nav-item > a,
.public-page .main-nav--inline .nav-drop-toggle {
  padding: 7px 11px;
  font-size: 12.8px;
}
.public-page .main-nav--inline .nav-item > a { border-radius: 8px; }

/* سمت چپ: زبان + ورود */
.public-page .nav-right { flex: 0 0 auto; gap: 8px; }
.public-page .nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 12.8px;
  font-weight: 700;
  background: #262a44;
  border: 1px solid rgba(93, 102, 162, .85);
  color: #fff;
}
.public-page .nav-login-btn:hover { background: #fff; color: #000; border-color: #fff; }
.public-page .nav-drop-sep {
  height: 1px; margin: 5px 8px;
  background: rgba(255, 255, 255, .14);
  list-style: none;
}

/* زیرمنوی ورود کمی پهن‌تر (آیتم‌های بیشتر) */
.public-page #drop-login { min-width: 268px; }

/* ---------- موبایل: منو زیر برند می‌رود، قابل اسکرول ---------- */
@media (max-width: 900px) {
  .public-page .header-inner--single { flex-wrap: wrap; gap: 10px; }
  .public-page .main-nav--inline { order: 3; flex: 1 1 100%; }
  .public-page .main-nav--inline .nav-list { flex-wrap: wrap; }
  .public-page .nav-right { margin-right: auto; }
  .public-page .main-nav--inline .nav-item > a,
  .public-page .main-nav--inline .nav-drop-toggle { padding: 6px 9px; font-size: 12.5px; }
  .public-page .nav-lang { min-height: 32px; }
  .public-page #drop-login { min-width: 240px; }
}

@media (max-width: 480px) {
  .public-page .header-inner--single .brand h1 { font-size: .95rem; }
  .public-page .header-inner--single .brand p { display: none; }
  .public-page .brand-logo { height: 42px; width: auto; max-width: 150px; }
}

/* ==================================================================
   ⚠️ تله: صفت `hidden` توسط `.user-nav { display: flex }` باطل می‌شود
   → دو لینک خالی «خانه» به‌صورت نامرئی در هدر می‌مانند و کلیک‌پذیرند.
   راه‌حل: با !important خنثی کن.
   ================================================================== */
.public-page #user-nav[hidden],
.public-page #hamburger[hidden] { display: none !important; }

/* ==================================================================
   اصلاح تراز: «ورود» و «انتخاب زبان» هم‌مرکز و هم‌ارتفاع
   ── علت باگ: برچسب <label> پیش‌فرض margin-bottom:10px و
      <select> پیش‌فرض margin-top:6px داشت → مرکزها ۵px اختلاف.
   ================================================================== */
.public-page .nav-right { align-items: center; }

.public-page .nav-lang {
  margin: 0 !important;
  height: 38px;
  min-height: 38px;
  padding: 0 11px;
  box-sizing: border-box;
  line-height: 1;
}
.public-page .nav-lang select {
  margin: 0 !important;
  height: auto;
  min-height: 0;
  padding: 0 2px;
  line-height: 1;
  box-sizing: content-box;
}
.public-page .nav-lang i { line-height: 1; }

.public-page .nav-login-btn,
.public-page .nav-user-btn {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.public-page .nav-login-btn i,
.public-page .nav-user-btn i.nav-caret { line-height: 1; }
.public-page #drop-login,
.public-page #drop-user { top: calc(100% + 6px); }

/* ==================================================================
   دکمهٔ کاربر وارد‌شده (نام در هدر)
   ================================================================== */
.public-page .nav-user-btn {
  gap: 9px;
  padding: 0 11px 0 9px;
  text-align: right;
}
.public-page .nav-user-avatar {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11.5px;
  flex: 0 0 auto;
}
.public-page .nav-user-info {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; max-width: 170px;
}
.public-page .nav-user-name {
  font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
.public-page .nav-user-role { font-size: 10.5px; opacity: .8; }
.public-page .nav-user-btn .nav-caret { font-size: 9.5px !important; opacity: .7; }

/* سرِ منوی کاربر: نام + نقش/موبایل */
.public-page .nav-drop-head {
  padding: 9px 12px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.public-page .nav-drop-head .nd-name { font-size: 13px; font-weight: 700; color: #fff; }
.public-page .nav-drop-head .nd-meta { font-size: 11px; color: var(--muted); }

@media (max-width: 900px) {
  .public-page .nav-user-info { max-width: 110px; }
  .public-page .nav-user-name { max-width: 110px; }
}
@media (max-width: 480px) {
  .public-page .nav-user-info { display: none; }
  .public-page .nav-user-btn { padding: 0 9px; }
}

/* ==================================================================
   هدر موبایل — کمپکت و آیکونی (الگوی SET Online موبایل)
   ── مرجع: نوار باریک ~۴۴-۵۲px، لوگو + آیکون‌ها در یک ردیف، بدون ردیف دوم
   ── وضعیت قبل: هدر در موبایل ۱۹۵px (برند + دو ردیف نوار) → خیلی بلند
   ================================================================== */
@media (max-width: 900px) {

  /* ---------- نوار هدر: باریک، چسبان ---------- */
  .public-page .site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: auto;
    background: #141623;   /* 🔷 پُر — هماهنگ با پس‌زمینهٔ لوگو */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .public-page .header-inner,
  .public-page .header-inner--single {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 52px;
    height: auto;
  }

  /* ---------- برند: لوگو + عنوان در یک ردیف ---------- */
  .public-page .brand {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }
  .public-page .brand-logo {
    height: 32px;
    width: auto;
    max-width: 120px;
    flex: 0 0 auto;
    object-fit: contain;
  }
  .public-page .brand-badge {
    font-size: 19px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    flex: 0 0 auto;
  }
  .public-page .brand h1#site-title {
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .public-page .brand #site-subtitle { display: none; }

  /* ---------- سمت چپ (زبان + ورود) در همان ردیف برند ---------- */
  .public-page .nav-right {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
  }
  /* زبان فقط آیکون */
  .public-page .nav-lang { padding: 0; min-width: 0; }
  .public-page .nav-lang select {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0;
    color: transparent;
    background-position: center;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 7px;
    appearance: none;
    -webkit-appearance: none;
  }
  .public-page .nav-lang i {
    position: absolute;
    font-size: 15px;
    pointer-events: none;
  }
  .public-page .nav-lang { position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .public-page .nav-lang select option { font-size: 13px; color: #fff; background: #141623; }

  .public-page .nav-login-btn,
  .public-page .nav-user-btn {
    height: 34px;
    min-height: 0;
    padding: 0 10px;
    font-size: 12.5px;
    border-radius: 7px;
  }
  .public-page .nav-user-btn .nav-user-role { display: none; }
  .public-page .nav-user-btn .nav-user-name { max-width: 84px; }

  /* ---------- نوار ناوبری: ردیف دوم باریک با آیکون+متن کوچک، اسکرول افقی ---------- */
  .public-page .main-nav,
  .public-page .main-nav--inline {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    height: auto;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .public-page .nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 5px 2px 4px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .public-page .nav-list::-webkit-scrollbar { display: none; }
  .public-page .nav-item { flex: 0 0 auto; }
  .public-page .nav-item > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 11px;
    font-size: 10.5px;
    line-height: 1.15;
    white-space: nowrap;
    border-radius: 7px;
    border-bottom: 0;
    min-width: 54px;
  }
  .public-page .nav-item > a i { font-size: 16px; }
  .public-page .nav-item.active > a {
    background: rgba(93, 102, 162, .32);
    color: #fff;
    border-bottom: 0;
  }
  .public-page .nav-item > a .live-dot { width: 7px; height: 7px; }

  /* منوهای کشویی تمام‌عرض در موبایل */
  .public-page .nav-drop {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
    max-width: none;
    margin-top: 2px;
  }
}

/* موبایل کوچک */
@media (max-width: 420px) {
  .public-page .brand h1#site-title { font-size: 13px; }
  .public-page .brand-logo { height: 28px; width: auto; max-width: 110px; }
  .public-page .nav-item > a { padding: 6px 9px; min-width: 48px; font-size: 10px; }
  .public-page .nav-item > a i { font-size: 15px; }
}

/* ⚠️ رفع: قواعد پایه (.header-inner {flex-direction:column} و .nav-list {flex-wrap:wrap})
   نوار موبایل را به ۲ ردیف می‌شکستند (۱۰۱px) → هدر ۱۹۲px می‌شد.
   مدیا کوئری زیر با اولویت بالاتر آن‌ها را بازنویسی می‌کند. */
@media (max-width: 900px) {
  .public-page .header-inner.header-inner--single {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .public-page nav.main-nav .nav-list,
  .public-page .main-nav--inline .nav-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .public-page nav.main-nav .nav-item,
  .public-page .main-nav--inline .nav-item {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
  /* نوار ناوبری تمام عرض در ردیف سوم */
  .public-page nav.main-nav {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 3 !important;
  }
  /* برند و ورود در ردیف اول */
  .public-page .brand { order: 1 !important; }
  .public-page .nav-right { order: 2 !important; flex: 1 1 auto !important; justify-content: flex-end; }
}

/* ⚠️ برند (۲۱۶px) + ورود (۳۴px) در ۳۹۰px جا نمی‌شدند → به دو ردیف می‌رفتند.
   رفع: برند کشسان (flex:1 1 0) با min-width:0 تا کوچک شود، و عنوان کوتاه‌تر. */
@media (max-width: 900px) {
  .public-page .header-inner {
    align-items: center;
    gap: 6px 8px;
  }
  .public-page .brand {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .public-page .brand > div { min-width: 0; overflow: hidden; }
  .public-page .brand h1#site-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .public-page .nav-right {
    flex: 0 0 auto !important;
    justify-content: flex-end;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  /* در صفحه‌های کوچک عنوان سایت کوتاه‌تر (زیرنویس پنهان است) */
  .public-page .brand h1#site-title { font-size: 13px; }
  .public-page .brand-logo { height: 27px; width: auto; max-width: 105px; }
  .public-page .brand { gap: 6px; }
  .public-page .nav-login-btn { padding: 0 8px; font-size: 12px; }
  .public-page .nav-lang select { width: 30px; height: 30px; border-radius: 6px; }
  .public-page .nav-login-btn, .public-page .nav-user-btn { height: 30px; }
}

/* ⚠️ چرا برند و ورود در یک ردیف جا نمی‌شدند:
   .header-inner با flex-wrap کار می‌کند، ولی .nav-right با min-content بزرگ
   به ردیف بعد می‌افتد (برند ۲۱۶px + ورود ۱۱۰px + فاصله > ۳۹۰px).
   رفع قطعی: .nav-right را مطلق در همان ردیف برند قرار می‌دهیم و به برند
   padding-right می‌دهیم تا زیر آن نرود. */
@media (max-width: 900px) {
  .public-page .header-inner {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
  }
  .public-page .nav-right {
    position: absolute !important;
    top: 6px;
    left: 10px;
    right: auto;
    order: 0 !important;
    z-index: 5;
    height: 38px;
    display: flex;
    align-items: center;
  }
  /* برند زیر دکمه‌ها نرود → فاصلهٔ چپ به‌اندازهٔ عرض دکمه‌ها */
  .public-page .brand {
    order: 1 !important;
    flex: 1 1 auto !important;
    padding-left: 118px;
    min-width: 0 !important;
  }
  .public-page nav.main-nav {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* دکمهٔ کاربر ثبت‌شده ممکن است پهن‌تر باشد */
  .public-page .nav-user-btn .nav-user-name { max-width: 78px; }
}
@media (max-width: 480px) {
  .public-page .brand { padding-left: 104px; }
  .public-page .nav-right { height: 34px; top: 8px; }
}

/* ⚠️ نامترازی: آیتم «پخش زنده» ۳۷px و بقیه ۴۴px بودند (چون به‌جای آیکون،
   نقطهٔ قرمز دارد) → ۴px اختلاف در تراز. رفع: ارتفاع ثابت برای همه. */
@media (max-width: 900px) {
  .public-page .nav-list { align-items: stretch; }
  .public-page .nav-item { display: flex; align-items: stretch; }
  .public-page .nav-item > a,
  .public-page .nav-item > a.nav-live {
    height: 46px;
    min-height: 46px;
    justify-content: center;
    align-items: center;
  }
  .public-page .nav-item > a .live-dot {
    /* نقطهٔ قرمز جای آیکون — همان ارتفاع بصری */
    display: block;
    flex: 0 0 auto;
    margin-bottom: 2px;
  }
  /* آیکون «پخش زنده» اگر بود، همان اندازهٔ بقیه */
  .public-page .nav-item > a.nav-live i { font-size: 16px; }
}

/* ==================================================================
   دکمهٔ همبرگری موبایل (#nav-burger)
   ── در موبایل: نوار ناوبری به یک پنل کشویی تبدیل می‌شود و با همبرگر باز/بسته می‌شود
   ── در دسکتاپ: همبرگر پنهان و نوار به‌شکل قبلی (کنار لوگو)
   ================================================================== */

/* پیش‌فرض (دسکتاپ): همبرگر پنهان */
.public-page .nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s ease, border-color .15s ease;
}
.public-page .nav-burger:hover { background: rgba(93, 102, 162, .45); border-color: rgba(255, 255, 255, .35); }
.public-page .nav-burger.is-open { background: rgba(93, 102, 162, .6); border-color: rgba(255, 255, 255, .4); }

@media (max-width: 900px) {
  /* همبرگر نمایان */
  .public-page .nav-burger { display: inline-flex; }
  .public-page .nav-burger[hidden] { display: none !important; }

  /* نوار ناوبری: پنل کشویی تمام‌عرض زیر هدر */
  .public-page nav.main-nav,
  .public-page .main-nav--inline {
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    /* بسته: جمع‌شده */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .22s ease, opacity .18s ease, visibility .18s;
    border-top: 0;
    margin: 0;
    padding: 0;
  }
  /* باز: پنل کشویی */
  .public-page #site-header.nav-open nav.main-nav,
  .public-page #site-header.nav-open .main-nav--inline {
    max-height: 60vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 4px;
  }

  /* آیتم‌ها: عمودی، تمام‌عرض، آیکون کنار متن (نه بالای آن) */
  .public-page #site-header.nav-open .nav-list,
  .public-page nav.main-nav .nav-list {
    flex-wrap: wrap !important;
    flex-direction: column;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 6px 10px 8px;
    gap: 2px;
  }
  .public-page nav.main-nav .nav-item {
    flex: 0 0 auto !important;
    width: 100%;
    display: block;
    white-space: normal;
  }
  .public-page nav.main-nav .nav-item > a {
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: center;
    gap: 11px;
    height: auto !important;
    min-height: 0 !important;
    width: 100%;
    padding: 11px 13px !important;
    font-size: 13.5px !important;
    border-radius: 8px;
    text-align: right;
    white-space: normal;
  }
  .public-page nav.main-nav .nav-item > a i { font-size: 17px !important; width: 20px; text-align: center; }
  .public-page nav.main-nav .nav-item.active > a {
    background: rgba(93, 102, 162, .3);
    color: #fff;
  }

  /* ⚠️ در حالت بسته، آیتم‌ها بیرون پنل نباید اسکرول/کلیک بگیرند */
  .public-page #site-header:not(.nav-open) nav.main-nav .nav-item { visibility: hidden; }
  .public-page #site-header.nav-open nav.main-nav .nav-item { visibility: visible; }

  /* لوگو در ردیف اول کنار همبرگر و ورود بماند */
  .public-page .brand { padding-left: 0; padding-right: 76px; margin-left: auto; }
}
@media (max-width: 480px) {
  .public-page .brand { padding-right: 68px; }
  .public-page .nav-burger { width: 30px; height: 30px; font-size: 14px; }
}

/* ⚠️ اصلاح: آیتم اول پنل (y=46) زیر نوار برند می‌افتاد چون پنل از y=38 شروع می‌شد
   و آیتم‌ها از بالای پنل می‌چسبیدند. رفع: فاصلهٔ بالای لیست. */
@media (max-width: 900px) {
  .public-page #site-header.nav-open nav.main-nav .nav-list,
  .public-page #site-header.nav-open .main-nav--inline .nav-list {
    padding-top: 10px !important;
  }
  .public-page nav.main-nav .nav-list { gap: 3px; }
  /* پنل: بدون اسکرول داخلی اضافی، ارتفاع به محتوا */
  .public-page #site-header.nav-open nav.main-nav,
  .public-page #site-header.nav-open .main-nav--inline {
    max-height: none;
  }
}

/* ==================================================================
   تنظیم کامل چیدمان هدر موبایل (RTL: راست = شروع)
   ── چیدمان هدف (الگوی SET Online موبایل):
        [☰]  [🌐][ورود]        [لوگو + عنوان]
        راست ←                 ← چپ
      یعنی: همبرگر در راست‌ترین نقطه، سپس زبان و ورود، و برند در سمت چپ.
   ── مشکل قبل: nav-right با position:absolute در «left:10px» بود و همبرگر
      داخلش اول آمده بود → همبرگر سمت چپ می‌افتاد.
   ================================================================== */
@media (max-width: 900px) {

  /* هدر: یک ردیف با چیدمان راست‌به‌چپ منظم */
  .public-page .header-inner {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    min-height: 52px;
  }

  /* برند: سمت چپ (در RTL آخرین عنصر) */
  .public-page .brand {
    order: 3 !important;
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-end;
    gap: 7px;
  }
  /* در RTL، برند متن راست‌چین با لوگو سمت راستِ خودش */
  .public-page .brand > div { min-width: 0; text-align: right; }
  .public-page .brand h1#site-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13.5px;
    white-space: nowrap;
  }

  /* دکمه‌ها: سمت راست (اول در RTL) */
  .public-page .nav-right {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    height: auto !important;
    min-width: 0;
  }

  /* ترتیب داخل nav-right: همبرگر راست‌ترین → زبان → ورود */
  .public-page #nav-burger { order: 1; }
  .public-page .nav-lang   { order: 2; }
  .public-page #nav-login-wrap { order: 3; }

  /* اندازه‌های هماهنگ و هم‌ارتفاع (۳۲px) */
  .public-page .nav-burger,
  .public-page .nav-lang select,
  .public-page .nav-lang,
  .public-page .nav-login-btn,
  .public-page .nav-user-btn {
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 14px;
  }
  .public-page .nav-lang { width: 32px; position: relative; }
  .public-page .nav-lang select { width: 32px; height: 32px; }
  .public-page .nav-login-btn { padding: 0 10px !important; width: auto !important; font-size: 12.5px; gap: 5px; }
  .public-page .nav-login-btn #nav-login-label { display: inline; }
  .public-page .nav-user-btn { padding: 0 9px !important; width: auto !important; }

  /* نوار ناوبری: ردیف دوم، تمام‌عرض */
  .public-page nav.main-nav,
  .public-page .main-nav--inline {
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* موبایل کوچک */
@media (max-width: 400px) {
  .public-page .brand h1#site-title { font-size: 12.5px; }
  .public-page .brand-logo { height: 25px; width: auto; max-width: 96px; }
  .public-page .brand-badge { height: 25px; width: 25px; line-height: 25px; font-size: 16px; }
  .public-page .nav-burger,
  .public-page .nav-lang, .public-page .nav-lang select { width: 30px; height: 30px; }
  .public-page .nav-login-btn { font-size: 12px; padding: 0 8px !important; }
  .public-page .nav-login-btn #nav-login-label { display: none; }   /* فقط آیکون */
}

/* ⚠️ رفع: .nav-right عرض ۳۷۰px (کل عرض) گرفته بود چون #user-nav مخفی داخلش
   با عرض کامل رندر می‌شد و برند را به ردیف دوم می‌راند (هدر ۸۶px).
   راه‌حل: عرض nav-right به محتوا (fit-content) و پنهان‌کردن قطعی عناصر مخفی. */
@media (max-width: 900px) {
  .public-page .nav-right {
    width: auto !important;
    max-width: fit-content;
    flex: 0 0 auto !important;
  }
  /* ⚠️ display:none برای عناصر مخفی هدر (نه فقط hidden) تا عرض نگیرند */
  .public-page #user-nav[hidden],
  .public-page #hamburger[hidden],
  .public-page #nav-dashboard.hidden,
  .public-page #admin-entry.hidden,
  .public-page #nav-register.hidden,
  .public-page .user-nav[hidden] {
    display: none !important;
  }
  .public-page .nav-right > .user-nav,
  .public-page .nav-right > button[hidden] {
    display: none !important;
  }
  /* برند: بدون تأثیر از عرض nav-right */
  .public-page .brand {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }
}

/* ⚠️ نقطهٔ شکست در ۸۶۱px: مدیا کوئری (max-width:860px) خاموش می‌شد ولی عرض
   برای نوار افقی کافی نبود → هدر به ۱۱۱px و دو ردیف می‌رفت.
   رفع: آستانهٔ موبایل به ۹۰۰px بالا برده شد (پوشش تبلت عمودی هم). */
@media (min-width: 861px) and (max-width: 900px) {
  /* همان رفتار موبایل تا ۹۰۰px */
  .public-page .nav-burger { display: inline-flex; }
  .public-page .header-inner { flex-wrap: nowrap !important; justify-content: space-between; }
  .public-page .brand { order: 3 !important; flex: 1 1 0 !important; min-width: 0 !important; }
  .public-page .nav-right { order: 1 !important; position: static !important; width: auto !important; }
  .public-page nav.main-nav, .public-page .main-nav--inline {
    order: 4 !important; flex: 0 0 100% !important; width: 100% !important;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .22s ease, opacity .18s ease, visibility .18s;
  }
  .public-page #site-header.nav-open nav.main-nav,
  .public-page #site-header.nav-open .main-nav--inline {
    max-height: none; opacity: 1; visibility: visible;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .public-page nav.main-nav .nav-list {
    flex-direction: column; flex-wrap: wrap !important;
    overflow: visible !important; padding: 10px 10px 8px; gap: 3px;
  }
  .public-page nav.main-nav .nav-item { width: 100%; }
  .public-page nav.main-nav .nav-item > a {
    flex-direction: row !important; justify-content: flex-start;
    height: auto !important; min-height: 0 !important; width: 100%;
    padding: 11px 13px !important; font-size: 13.5px !important; gap: 11px;
  }
  .public-page #site-header:not(.nav-open) nav.main-nav .nav-item { visibility: hidden; }
  .public-page #site-header.nav-open nav.main-nav .nav-item { visibility: visible; }
}
/* در دسکتاپ واقعی (۹۰۱px+) همبرگر پنهان */
@media (min-width: 901px) {
  .public-page .nav-burger { display: none !important; }
}

/* ==================================================================
   انتخابگر زبان (الگوی مرجع SET Online: ۲۰ زبان با پرچم)
   ── مرجع: <select class="selectpicker" data-width="fit"> با data-thumbnail پرچم
   ── بومی: منوی کشویی سفارشی با پرچم SVG (بدون CDN — سرور فیلترشده)
   ================================================================== */

.public-page .nav-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.public-page .nav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.public-page .nav-lang-btn:hover { background: rgba(93, 102, 162, .4); border-color: rgba(255, 255, 255, .35); }
.public-page .nav-lang-btn .nav-caret { font-size: 10px; opacity: .75; }

/* پرچم کوچک در دکمه */
.public-page .nav-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  flex: 0 0 auto;
}
.public-page .nav-flag[class*="flag-"] { background-image: var(--f); }

/* منوی کشویی زبان */
.public-page .nav-lang-drop {
  max-height: 62vh;
  overflow-y: auto;
  min-width: 208px;
  padding: 6px 0;
}
.public-page .nav-lang-drop::-webkit-scrollbar { width: 6px; }
.public-page .nav-lang-drop::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.public-page .nav-lang-drop .lang-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.4;
  text-transform: none;
  position: relative;
}
.public-page .nav-lang-drop .lang-item:hover { background: rgba(93, 102, 162, .35); }
.public-page .nav-lang-drop .lang-item.is-active {
  background: rgba(93, 102, 162, .28);
  font-weight: 700;
}
.public-page .nav-lang-drop .lang-check { margin-right: auto; font-size: 11px; color: #7fe4b3; }
.public-page .nav-lang-drop .lang-name { flex: 1 1 auto; }
.public-page .nav-lang-drop .lang-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  flex: 0 0 auto;
}

/* موبایل: دکمه فقط پرچم */
@media (max-width: 900px) {
  .public-page .nav-lang-btn { height: 32px; padding: 0 8px; gap: 4px; }
  .public-page .nav-lang-name { display: none; }
  .public-page .nav-lang-btn .nav-caret { display: none; }
  .public-page .nav-lang-drop {
    position: fixed;
    top: 58px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 70vh;
  }
}

/* ---------- پرچم‌های زبان (SVG محلی — بدون CDN) ---------- */
.public-page .flag-ir { --f: url("/static/flags/ir.svg"); }
.public-page .flag-en { --f: url("/static/flags/en.svg"); }
.public-page .flag-sa { --f: url("/static/flags/sa.svg"); }
.public-page .flag-cz { --f: url("/static/flags/cz.svg"); }
.public-page .flag-de { --f: url("/static/flags/de.svg"); }
.public-page .flag-es { --f: url("/static/flags/es.svg"); }
.public-page .flag-fr { --f: url("/static/flags/fr.svg"); }
.public-page .flag-hr { --f: url("/static/flags/hr.svg"); }
.public-page .flag-is { --f: url("/static/flags/is.svg"); }
.public-page .flag-it { --f: url("/static/flags/it.svg"); }
.public-page .flag-hu { --f: url("/static/flags/hu.svg"); }
.public-page .flag-nl { --f: url("/static/flags/nl.svg"); }
.public-page .flag-pl { --f: url("/static/flags/pl.svg"); }
.public-page .flag-ru { --f: url("/static/flags/ru.svg"); }
.public-page .flag-si { --f: url("/static/flags/si.svg"); }
.public-page .flag-tr { --f: url("/static/flags/tr.svg"); }
.public-page .flag-cn { --f: url("/static/flags/cn.svg"); }
.public-page .flag-gr { --f: url("/static/flags/gr.svg"); }
.public-page .flag-rs { --f: url("/static/flags/rs.svg"); }
.public-page .flag-ro { --f: url("/static/flags/ro.svg"); }
.public-page .nav-lang-btn .nav-flag { background-image: var(--f); }

/* ---------- باز/بسته شدن منوی زبان (کلاس .open روی والد) ---------- */
.public-page .nav-lang .nav-lang-drop {
  display: none;
}
.public-page .nav-lang.open .nav-lang-drop {
  display: block;
}
/* پرچم داخل دکمهٔ زبان (کلاس flag-X روی خود اسپن) */
.public-page .nav-lang-btn .nav-flag { background-image: var(--f); }


/* ⚠️ رفع: پرچم‌ها رندر نمی‌شدند چون background-image تنظیم نشده بود.
   متغیر --f با کلاس flag-X ست می‌شود، ولی باید در background-image استفاده شود. */
.public-page .nav-flag,
.public-page .lang-flag {
  background-image: var(--f, none) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.public-page .nav-lang-btn .nav-flag { width: 20px; height: 14px; }
.public-page .nav-lang-drop .lang-flag { width: 22px; height: 15px; }


/* ══════════════════════════════════════════════════════════════════════════
   🔷 شکل لوگوی هدر — مربع / دایره / مستطیل (بدون فشردگی)
   🖐️ خواستهٔ کاربر: «اگر مربع بود مربع، اگر دایره بود دایره،
      اگر مستطیل بود همان شکل — الان دایره نمایش میدهد»
   🔬 ریشه: width اجباری باعث فشرده‌شدن مستطیل و دیده‌شدن دایره می‌شد.
   ══════════════════════════════════════════════════════════════════════════ */
.public-page .brand-logo {
  width: auto !important;      /* 🔑 هرگز عرض تحمیل نکن */
  height: 34px;
  max-width: 170px;
  object-fit: contain;         /* بدون کشیدگی */
  flex: 0 0 auto;
  display: block;
}
/* مستطیل افقی — مثل IRAN SPORT DATA */
.public-page .brand-logo.shape-wide { max-width: 190px; }
/* مربع — بدون گردی اضافه */
.public-page .brand-logo.shape-square { max-width: 170px; }
/* دایره — فقط اگر خود لوگو دایره است */
.public-page .brand-logo.shape-circle { max-width: 170px; }

@media (max-width: 900px) {
  .public-page .brand-logo { height: 30px; max-width: 150px; }
  .public-page .brand-logo.shape-wide { max-width: 165px; }
}
@media (max-width: 560px) {
  .public-page .brand-logo { height: 27px; max-width: 130px; }
  .public-page .brand-logo.shape-wide { max-width: 145px; }
}
@media (max-width: 400px) {
  .public-page .brand-logo { height: 24px; max-width: 115px; }
  .public-page .brand-logo.shape-wide { max-width: 128px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🔷 ابعاد هوشمند لوگوی هدر — بر اساس نسبت واقعی فایل
   🖐️ «ابعاد لوگو که بارگذاری میشه رو در نظر بگیر که به هدر بخوره»
   🔬 پس‌زمینهٔ لوگو با هدر یکی است (#141623) ⇒ مرز دیده نمیشود
   ══════════════════════════════════════════════════════════════════════════ */
.public-page .site-header { background: #141623; }

.public-page .brand-logo {
  width: auto !important;       /* 🔑 هرگز عرض تحمیل نکن */
  height: var(--logo-h, 34px);
  max-width: var(--logo-maxw, 180px);
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
  /* 🔷 پس‌زمینهٔ شفاف ⇒ رنگ هدر از پشت دیده میشود (یکدست) */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* 🔷 تنظیمات اجباری: هیچ قاعدهٔ دیگری عرض ندهد */
.public-page .brand .brand-logo { width: auto !important; }

/* مستطیل افقی (مثل IRAN SPORT DATA) */
.public-page .brand-logo.shape-wide { --logo-maxw: 195px; }
/* مربع */
.public-page .brand-logo.shape-square { --logo-maxw: 175px; }
/* دایره */
.public-page .brand-logo.shape-circle { --logo-maxw: 175px; }

@media (max-width: 900px) {
  .public-page .brand-logo { --logo-h: 31px; }
  .public-page .brand-logo.shape-wide { --logo-maxw: 170px; }
}
@media (max-width: 560px) {
  .public-page .brand-logo { --logo-h: 28px; }
  .public-page .brand-logo.shape-wide { --logo-maxw: 150px; }
}
@media (max-width: 400px) {
  .public-page .brand-logo { --logo-h: 25px; }
  .public-page .brand-logo.shape-wide { --logo-maxw: 130px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🔷 حذف کادر لوگو + همپوشانی کامل با هدر
   🖐️ «دورش یه کادر داره باید حذف بشه و شکل همپوشانی با هدر داشته باشه»
   🔬 ریشه: border: 1px solid rgba(255,255,255,.1) روی .brand-logo
   ══════════════════════════════════════════════════════════════════════════ */
.public-page .brand-logo,
.public-page .brand .brand-logo,
.public-page .site-header .brand-logo,
.public-page img.brand-logo {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  mix-blend-mode: normal !important;
  -webkit--webkit-mask-image: none !important;
mask-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  /* 🔷 روی هدر بنشیند */
  vertical-align: middle;
  align-self: center;
}
/* پیش‌نمایش پنل ادمین هم بی‌کادر */
#site-preview-logo.brand-logo,
#tlogo-preview-img.brand-logo {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   🔷 رفع کادر دوگانهٔ زبان در هدر
   🖐️ «تو هدر قسمت زبان دو تا کادر داره درستش کن»
   🔬 دو کادر: .nav-lang (بیرونی) + .nav-lang-btn (داخلی)
   ✅ فقط یک کادر بماند — دکمهٔ داخلی (کلیک‌پذیر)
   ══════════════════════════════════════════════════════════════════════════ */
.public-page .nav-lang,
.public-page .nav-lang-wrap {
  border: 0 !important;                 /* 🔑 کادر بیرونی حذف */
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
  gap: 0;
}

/* تنها کادر — دکمهٔ زبان */
.public-page .nav-lang-btn {
  border: 1px solid rgba(255, 255, 255, .20) !important;
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 9px !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 11px !important;
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.public-page .nav-lang-btn:hover {
  background: rgba(255, 255, 255, .11) !important;
  border-color: rgba(142, 160, 255, .46) !important;
}
/* فلش کوچک */
.public-page .nav-lang-btn > i,
.public-page .nav-lang-btn .fa-chevron-down {
  font-size: 9px;
  opacity: .65;
}
/* پرچم — بدون کادر اضافه */
.public-page .nav-lang-flag {
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
}
/* منوی بازشوی زبان */
.public-page .nav-lang-drop {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 11px !important;
  background: #171a2b !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5) !important;
  overflow: hidden;
}

@media (max-width: 560px) {
  .public-page .nav-lang-btn { height: 31px; min-height: 31px; padding: 0 9px !important; }
}


/* 🔷 حلقهٔ ۱پیکسلی دور پرچم — حذف (کادر دوم به‌نظر می‌رسید) */
.public-page .nav-flag,
.public-page .nav-flag.flag-ir,
.public-page .nav-lang-flag,
.public-page [class*="nav-flag"],
.public-page [class*="flag-"] {
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 2px;
}
/* پرچم داخل دکمه — بدون کادر */
.public-page .nav-lang-btn .nav-flag,
.public-page .nav-lang-btn [class*="flag"] {
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   🔷 رفع منوی زبان — پرچم‌ها + اسکرول
   🖐️ «۲۰ زبان رو نمایش نمیده، اسکرول نمیکنه، پرچم‌ها رو نمایش نمیده»

   🔬 باگ ۱: `.nav-lang-btn .nav-flag` تصویر پس‌زمینه داشت ولی
             `.lang-flag` (آیتم‌های فهرست) نداشت ⇒ پرچم‌ها نامرئی
   🔬 باگ ۲: `overflow-y: hidden` + max-height ⇒ ۲۰۷px محتوا قطع
   ══════════════════════════════════════════════════════════════════════════ */

/* ✅ ۱) پرچم در همهٔ آیتم‌های فهرست */
.public-page .nav-lang-drop .lang-flag,
.public-page .lang-flag,
.public-page .nav-drop .lang-flag {
  background-image: var(--f) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: inline-block !important;
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 2px;
}
/* پرچم دکمهٔ بالا (همیشه دیده شود) */
.public-page .nav-lang-btn .nav-flag,
.public-page .nav-flag {
  background-image: var(--f) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ✅ ۲) اسکرول در منوی زبان */
.public-page .nav-lang-drop,
.public-page #drop-lang {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: min(70vh, 520px) !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 160, 255, .5) transparent;
  -webkit-overflow-scrolling: touch;
}
/* اسکرول‌بار باریک و ملایم */
.public-page .nav-lang-drop::-webkit-scrollbar { width: 6px; }
.public-page .nav-lang-drop::-webkit-scrollbar-track { background: transparent; }
.public-page .nav-lang-drop::-webkit-scrollbar-thumb {
  background: rgba(142, 160, 255, .45);
  border-radius: 3px;
}
.public-page .nav-lang-drop::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 160, 255, .7);
}

/* آیتم‌های فهرست — ارتفاع قابل لمس */
.public-page .nav-lang-drop .lang-item {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
/* سرصفحه چسبان */
.public-page .nav-lang-drop .nav-drop-head {
  position: sticky;
  top: 0;
  z-index: 2;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* جداکننده چسبان زیر سرصفحه */
.public-page .nav-lang-drop .nav-drop-sep {
  position: sticky;
  top: 44px;
  z-index: 2;
}

/* 📱 موبایل: منو تمام‌عرض با اسکرول */
@media (max-width: 900px) {
  .public-page .nav-lang-drop {
    overflow-y: auto !important;
    max-height: 68vh !important;
    -webkit-overflow-scrolling: touch;
  }
  .public-page .nav-lang-drop .lang-flag { width: 20px; height: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🔗 برند (لوگو + عنوان) به‌عنوان لینک — بدون تغییر ظاهر
   🖐️ «روی لوگو یا عنوان کلیک کردم یه تب جدید باز بشه که حکم تب خانه رو داشته باشه»
   ══════════════════════════════════════════════════════════════════════════ */
.public-page a.brand,
.public-page .brand {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .18s;
}
.public-page a.brand:hover { opacity: .88; }
.public-page a.brand:active { opacity: .76; }
.public-page a.brand * { text-decoration: none !important; }
.public-page a.brand h1,
.public-page a.brand #site-title,
.public-page a.brand #site-subtitle { cursor: pointer; }

/* 🗑️ override هدر صفحهٔ فرود حذف شد — هدر همهٔ صفحات یکسان است */

/* 🎯 عرض ثابت — همیشه فضا برای نوار اسکرول (هم‌ترازی همهٔ صفحات) */
html { scrollbar-gutter: stable; overflow-y: scroll; }


/* ══════════════════════════════════════════════════════════════════════════
   🏆 منوی آبشاری «مسابقات» — هدر عمومی
   🖐️ «یه تب دیگه باز کن به اسم مسابقات ... یه دکمه آبشاری باز بشه»
   ══════════════════════════════════════════════════════════════════════════ */
.nav-item--dd { position: relative; }

.nav-item--dd .nav-dd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; padding: inherit;
  white-space: nowrap;
}
.nav-dd-caret {
  font-size: 9px; opacity: .6;
  transition: transform .18s ease;
}
.nav-item--dd.is-open .nav-dd-caret { transform: rotate(180deg); }
.nav-item--dd.is-open .nav-dd-toggle { color: var(--brand-accent, #df1f26); }

/* ── پنل زیرمنو ── */
.nav-dd-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-start: 0;
  min-width: 232px; margin: 0; padding: 7px;
  list-style: none; z-index: 60;
  background: #fff; border: 1px solid rgba(11, 40, 81, .12);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(11, 40, 81, .16), 0 2px 8px rgba(11, 40, 81, .07);
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .17s ease, transform .17s ease, visibility .17s;
}
.nav-item--dd.is-open .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* پل نامرئی برای پرهیز از بسته شدن هنگام عبور موس */
.nav-dd-menu::before {
  content: ''; position: absolute; top: -11px; inset-inline: 0; height: 11px;
}

.nav-dd-menu li { margin: 0; }
.nav-dd-menu li a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; line-height: 1.5;
  color: rgb(11, 40, 81); text-decoration: none;
  transition: background .13s ease, color .13s ease;
}
.nav-dd-menu li a i { width: 15px; text-align: center; font-size: 12px; opacity: .62; }
.nav-dd-menu li a:hover {
  background: rgba(11, 40, 81, .055); color: rgb(223, 31, 38);
}
.nav-dd-menu li a:hover i { opacity: 1; color: rgb(223, 31, 38); }
.nav-dd-sep {
  height: 1px; margin: 6px 8px;
  background: rgba(11, 40, 81, .1); list-style: none;
}

/* ── موبایل: درون پنل همبرگری، زیرمنو باز (آکاردئون) ── */
@media (max-width: 900px) {
  .nav-item--dd { width: 100%; }
  .nav-item--dd .nav-dd-toggle {
    display: flex; justify-content: space-between; width: 100%;
    padding: 12px 14px; border-radius: 10px;
  }
  .nav-dd-menu {
    position: static; min-width: 0; width: 100%;
    margin-top: 4px; padding: 5px 0 5px 12px;
    background: rgba(11, 40, 81, .03);
    border: 0; border-inline-start: 2px solid rgba(11, 40, 81, .14);
    border-radius: 0;
    box-shadow: none;
    opacity: 1; visibility: hidden;
    max-height: 0; overflow: hidden;
    transform: none; transition: max-height .22s ease, visibility .22s;
  }
  .nav-item--dd.is-open .nav-dd-menu {
    visibility: visible; max-height: 400px;
  }
  .nav-dd-menu li a { padding: 9px 10px; font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🔧 رفع نهایی منوی آبشاری — specificity حداکثری + رفع overflow
   🖐️ «وقتی روش میری یه دکمه آبشاری باز بشه»
   🔬 تله‌های اندازه‌گیری‌شده:
      · .nav-list { overflow: auto } ⇒ زیرمنو بریده می‌شد
      · .nav-list li { height: 35px !important } ⇒ top: calc(100%+10px)=45px
      · opacity: 0 باقی می‌ماند (قاعدهٔ مخالف برنده بود)
   ══════════════════════════════════════════════════════════════════════════ */

/* ۱) رفع overflow والد — زیرمنو باید بیرون بریزد */
body.public-page.landing-page #site-header .nav-list:has(.nav-item--dd),
body.public-page.landing-page #site-header .nav-list {
  overflow: visible !important;
}
#site-header .nav-list { overflow: visible !important; }
.main-nav--inline, .main-nav { overflow: visible !important; }

/* ۲) زیرمنو — قاعدهٔ قطعی با specificity حداکثری */
body.public-page.landing-page #site-header .nav-item--dd .nav-dd-menu,
body.public-page #site-header .nav-item--dd .nav-dd-menu,
#site-header .nav-item--dd .nav-dd-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  inset-inline-start: 0 !important;
  min-width: 236px !important;
  margin: 0 !important; padding: 7px !important;
  list-style: none !important;
  z-index: 90 !important;
  background: #fff !important;
  border: 1px solid rgba(11, 40, 81, .13) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(11, 40, 81, .17), 0 2px 8px rgba(11, 40, 81, .08) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-7px) !important;
  transition: opacity .17s ease, transform .17s ease, visibility .17s !important;
}

/* ۳) حالت باز — باید بر همه چیز غلبه کند */
body.public-page.landing-page #site-header .nav-item--dd.is-open .nav-dd-menu,
body.public-page #site-header .nav-item--dd.is-open .nav-dd-menu,
#site-header .nav-item--dd.is-open .nav-dd-menu,
#site-header .nav-item--dd:hover .nav-dd-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ۴) ارتفاع li — اجازهٔ ریزش زیرمنو */
body.public-page.landing-page #site-header .nav-list > li.nav-item--dd {
  height: auto !important; min-height: 35px !important; max-height: none !important;
  overflow: visible !important;
}
body.public-page.landing-page #site-header .nav-item--dd .nav-dd-toggle {
  height: 35px !important; min-height: 35px !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: none !important; border: 0 !important; cursor: pointer !important;
  font: inherit !important; color: inherit !important; padding: 0 10px !important;
  white-space: nowrap !important;
}

/* ۵) آیتم‌های زیرمنو */
body.public-page.landing-page #site-header .nav-dd-menu > li { height: auto !important; max-height: none !important; }
body.public-page.landing-page #site-header .nav-dd-menu > li > a {
  display: flex !important; align-items: center !important; gap: 9px !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  padding: 9px 12px !important; border-radius: 9px !important;
  font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.5 !important;
  color: rgb(11, 40, 81) !important; text-decoration: none !important;
  white-space: nowrap !important;
}
body.public-page.landing-page #site-header .nav-dd-menu > li > a:hover {
  background: rgba(11, 40, 81, .06) !important; color: rgb(223, 31, 38) !important;
}
body.public-page.landing-page #site-header .nav-dd-menu > li > a i {
  width: 15px !important; font-size: 12px !important; opacity: .6 !important; text-align: center !important;
}
body.public-page.landing-page #site-header .nav-dd-menu .nav-dd-sep {
  height: 1px !important; margin: 6px 8px !important;
  background: rgba(11, 40, 81, .1) !important; padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   🔤 تب «مسابقات» — هم‌اندازه و هم‌فونت با بقیهٔ تب‌های هدر
   🖐️ «فونت و اندازه مسابقات تو هدر رو مثل بقیه کن»

   🔬 اندازه‌گیری مرجع (بقیهٔ تب‌ها):
        a: fs=12.8px · fw=600 · padding=7px 11px · height=35px · Vazirmatn
      منوی آبشاری ما (نادرست):
        button: fs=13.5px · fw=500 · padding=9px 12px · height=38px   🔴

   ✅ دکمه باید دقیقاً مثل <a> تب‌های دیگر باشد (فقط یک <button> است)
   ══════════════════════════════════════════════════════════════════════════ */
body.public-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle,
body.public-page.landing-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle,
#site-header .nav-list > li.nav-item--dd > .nav-dd-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  /* 📏 اندازه‌ها — عیناً مثل بقیهٔ تب‌ها */
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 7px 11px !important;
  box-sizing: border-box !important;

  /* 🔤 فونت — عیناً مثل بقیهٔ تب‌ها */
  font-family: inherit !important;
  font-size: 12.8px !important;
  font-weight: 600 !important;
  /* 🔤 ارتفاع خط = همان تب‌های دیگر (18.2857px = 1.4286 × 12.8) */
  line-height: 1.4286 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  background: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* 🎯 آیکون و فلش — هم‌اندازه با آیکون بقیه */
body.public-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle > i,
body.public-page.landing-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle > i,
#site-header .nav-list > li.nav-item--dd > .nav-dd-toggle > i {
  font-size: 13px !important;
  width: 14px !important;
  text-align: center !important;
  opacity: .75 !important;
}
/* فلش کوچک (caret) */
body.public-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle > .nav-dd-caret,
#site-header .nav-list > li.nav-item--dd > .nav-dd-toggle > .nav-dd-caret {
  width: auto !important;
  font-size: 9px !important;
  opacity: .55 !important;
}

/* 🎨 هاور/باز — مثل بقیهٔ تب‌ها */
body.public-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle:hover,
body.public-page.landing-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle:hover {
  color: rgb(223, 31, 38) !important;
}
body.public-page #site-header .nav-list > li.nav-item--dd.is-open > .nav-dd-toggle,
body.public-page.landing-page #site-header .nav-list > li.nav-item--dd.is-open > .nav-dd-toggle {
  color: rgb(223, 31, 38) !important;
}

/* 📱 موبایل — هم‌خوان با بقیه (پنل همبرگری) */
@media (max-width: 900px) {
  body.public-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle,
  body.public-page.landing-page #site-header .nav-list > li.nav-item--dd > .nav-dd-toggle {
    width: 100% !important;
    height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    border-radius: 8px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   🎨 یکسان‌سازی رنگ منوهای آبشاری هدر (ورود · کاربر · مسابقات)
   🖐️ «آبشاریش رنگش فرق داره و همخوانی نداره»

   🔬 ریشه: .nav-drop bg=rgb(28,29,38) **تیره** بود، ولی آیتم‌ها
            color:rgb(11,40,81) **تیره** ⇒ متن روی زمینهٔ تیره نامرئی!
   ✅ اصل: زمینهٔ روشن (کارت سفید) + متن navy + hover ملایم
   ══════════════════════════════════════════════════════════════════════════ */
#site-header .nav-drop,
#site-header ul.nav-drop,
body.public-page #site-header .nav-drop,
body.public-page.landing-page #site-header .nav-drop {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(11, 40, 81, .10) !important;
  border-radius: 13px !important;
  padding: 7px !important;
  box-shadow:
    0 1px 2px rgba(11, 40, 81, .05),
    0 12px 30px -12px rgba(11, 40, 81, .18),
    0 34px 60px -30px rgba(50, 50, 93, .28) !important;
  min-width: 232px !important;
  z-index: 95 !important;
}
/* آیتم‌ها */
#site-header .nav-drop > li,
#site-header .nav-drop li { list-style: none !important; margin: 0 !important; }
#site-header .nav-drop > li > a,
#site-header .nav-drop li > a,
body.public-page #site-header .nav-drop li > a,
body.public-page.landing-page #site-header .nav-drop li > a {
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 10px 12px !important; border-radius: 9px !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important;
  color: rgb(11, 40, 81) !important; text-decoration: none !important;
  background: transparent !important;
  transition: background .14s ease, color .14s ease !important;
  white-space: nowrap !important;
}
#site-header .nav-drop li > a i {
  width: 15px !important; font-size: 12px !important; text-align: center !important;
  color: rgba(11, 40, 81, .5) !important; opacity: 1 !important;
}
#site-header .nav-drop li > a:hover {
  background: rgba(11, 40, 81, .055) !important;
  color: rgb(223, 31, 38) !important;
}
#site-header .nav-drop li > a:hover i { color: rgb(223, 31, 38) !important; }

/* جداکننده و سرصفحهٔ منوی کاربر */
#site-header .nav-drop .nav-drop-sep,
#site-header .nav-drop .nav-drop-head {
  border-color: rgba(11, 40, 81, .1) !important;
  color: rgba(11, 40, 81, .55) !important;
}
#site-header .nav-drop .nav-drop-head .nd-name { color: rgb(11, 40, 81) !important; font-weight: 700 !important; }
#site-header .nav-drop .nav-drop-head .nd-meta { color: rgba(11, 40, 81, .55) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   🔐 دکمهٔ ورود هدر — هم‌خانواده با تم روشن
   🖐️ «دکمه ورود رنگش با بقیه صفحه فرق داره»

   🔬 ریشه: .nav-login-btn bg=rgb(38,42,68) تیره  ولی  color=rgb(11,40,81) navy
            ⇒ متن روی زمینهٔ تیره **نامرئی** (تضاد ~۱:۱)
   ✅ راه‌حل: زمینهٔ روشن با قاب navy + متن navy (هم‌خانوادهٔ پنجرهٔ زبان/آواتار)
   + ترکیب hover ملایم، مطابق بقیهٔ عناصر هدر
   ══════════════════════════════════════════════════════════════════════════ */
#site-header .nav-login-btn,
body.public-page #site-header .nav-login-btn,
body.public-page.landing-page #site-header .nav-login-btn,
#site-header .nav-user-btn,
body.public-page #site-header .nav-user-btn {
  background: rgba(11, 40, 81, .045) !important;
  background-image: none !important;
  color: rgb(11, 40, 81) !important;
  border: 1px solid rgba(11, 40, 81, .16) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  height: 38px !important;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-size: 12.8px !important; font-weight: 700 !important; line-height: 1 !important;
  transition: all .16s ease !important;
}
#site-header .nav-login-btn i,
#site-header .nav-login-btn .nav-caret,
#site-header .nav-user-btn i { color: inherit !important; opacity: .72 !important; }
#site-header .nav-login-btn:hover,
#site-header .nav-user-btn:hover {
  background: rgba(11, 40, 81, .085) !important;
  border-color: rgba(11, 40, 81, .3) !important;
  color: rgb(223, 31, 38) !important;
}
#site-header .nav-login-wrap.open .nav-login-btn,
#site-header .nav-login-wrap.open .nav-user-btn {
  background: linear-gradient(145deg, #16325f, #0b2851) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(11, 40, 81, .45) !important;
}
#site-header .nav-login-wrap.open .nav-login-btn i,
#site-header .nav-login-wrap.open .nav-login-btn .nav-caret { color: #fff !important; opacity: .9 !important; }

/* 🎯 نوار بالای منو — هم‌رنگ نوار کارت ورود */
#site-header .nav-drop::before {
  content: ''; position: absolute; top: 0; inset-inline: 14px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #df1f26 0%, #6a5cff 50%, #0080ff 100%);
}
#site-header .nav-drop { position: absolute !important; }


/* ══════════════════════════════════════════════════════════════════════════
   🔬 رفع نهایی: قاعدهٔ `#site-header * { color: navy !important }`
      در landing.css:896 روی فرزندان دکمه (آیکون/فلش) هم اعمال می‌شد
      ⇒ در حالت باز (زمینهٔ navy) متن/فلش navy می‌ماند و **نامرئی** می‌شد.
   ✅ specificity بالاتر + !important  (۳ بار قید والد)
   ══════════════════════════════════════════════════════════════════════════ */
#site-header .nav-login-wrap.open .nav-login-btn,
#site-header .nav-login-wrap.open .nav-login-btn *,
#site-header .nav-login-wrap.open .nav-login-btn i,
body.public-page #site-header .nav-login-wrap.open .nav-login-btn,
body.public-page #site-header .nav-login-wrap.open .nav-login-btn *,
body.public-page.landing-page #site-header .nav-login-wrap.open .nav-login-btn,
body.public-page.landing-page #site-header .nav-login-wrap.open .nav-login-btn *,
body.public-page.landing-page #site-header .nav-login-wrap.open .nav-login-btn i,
body.public-page.landing-page #site-header .nav-login-btn:hover,
body.public-page.landing-page #site-header .nav-login-btn:hover * {
  color: #ffffff !important;
}
/* زمینهٔ دکمه */
body.public-page.landing-page #site-header .nav-login-wrap.open .nav-login-btn,
body.public-page #site-header .nav-login-wrap.open .nav-login-btn,
#site-header .nav-login-wrap.open .nav-login-btn {
  background: linear-gradient(145deg, #16325f, #0b2851) !important;
  background-image: linear-gradient(145deg, #16325f, #0b2851) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(11, 40, 81, .45) !important;
}
/* حالت عادی — پس‌زمینهٔ روشن (خنثی‌کردن قرمزِ landing.css:42) */
body.public-page.landing-page #site-header .nav-login,
body.public-page.landing-page #site-header .nav-login-btn {
  background: rgba(11, 40, 81, .045) !important;
  background-image: none !important;
  color: rgb(11, 40, 81) !important;
  border: 1px solid rgba(11, 40, 81, .16) !important;
}
body.public-page.landing-page #site-header .nav-login *,
body.public-page.landing-page #site-header .nav-login-btn * {
  color: rgb(11, 40, 81) !important;
}
body.public-page.landing-page #site-header .nav-login-btn:hover,
body.public-page.landing-page #site-header .nav-login-btn:hover * {
  color: rgb(223, 31, 38) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   🔬 رفع آخرین تضاد: دکمهٔ ورود هدر در حالت «باز»
      🔬 ریشه: قاعدهٔ `#site-header * { color: navy !important }` (landing.css:896)
              روی فرزندان (span برچسب) رنگ navy را تحمیل می‌کرد،
              حتی وقتی `.open` زمینهٔ navy را ست می‌کرد ⇒ متن **نامرئی** (۱.۱۵:۱)
      ✅ با قید مستقیم روی فرزندان + !important رفع شد
   ══════════════════════════════════════════════════════════════════════════ */
body.public-page.landing-page #site-header .nav-login-wrap.open #nav-login,
body.public-page.landing-page #site-header .nav-login-wrap.open #nav-login-label,
body.public-page.landing-page #site-header .nav-login-wrap.open #nav-login *,
body.public-page.landing-page #site-header .nav-login-wrap.open .nav-login-caret,
body.public-page #site-header .nav-login-wrap.open #nav-login,
body.public-page #site-header .nav-login-wrap.open #nav-login-label,
body.public-page #site-header .nav-login-wrap.open #nav-login *,
#site-header .nav-login-wrap.open #nav-login,
#site-header .nav-login-wrap.open #nav-login-label,
#site-header .nav-login-wrap.open #nav-login > span,
#site-header .nav-login-wrap.open #nav-login .nav-caret {
  color: #ffffff !important;
}
#site-header .nav-login-wrap.open #nav-login .nav-caret { opacity: .9 !important; }

/* 🔁 همان منطق برای دکمهٔ کاربر (آواتار) در حالت باز */
body.public-page.landing-page #site-header .nav-login-wrap.open #nav-user,
body.public-page.landing-page #site-header .nav-login-wrap.open #nav-user *,
body.public-page #site-header .nav-login-wrap.open #nav-user,
body.public-page #site-header .nav-login-wrap.open #nav-user *,
#site-header .nav-login-wrap.open #nav-user,
#site-header .nav-login-wrap.open #nav-user * {
  color: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   🔐 دکمهٔ ورود هدر — عیناً هم‌اندازه/هم‌فونت با تب‌های ناوبری
   🖐️ «دکمه ورودش با بقیه دکمه‌های هدر سایت فرق میکنه»

   🔬 اندازه‌گیری (قبل):
        دکمهٔ ورود:  ff=Kanit     lh=12.8px   h=38 rad=10 pad=0 14   ls=0.2px  fw=700(/login)
        تب ناوبری:   ff=Vazirmatn lh=18.29px  h=35 rad=8  pad=7 11   ls=normal fw=600
   ✅ هدف: همان Vazirmatn · 12.8px · 600 · h=35 · rad=8 · pad=7px 11px · lh=18.2857
   ══════════════════════════════════════════════════════════════════════════ */
#site-header .nav-login-btn,
#site-header .nav-user-btn,
body.public-page #site-header .nav-login-btn,
body.public-page #site-header .nav-user-btn,
body.public-page.landing-page #site-header .nav-login,
body.public-page.landing-page #site-header .nav-login-btn {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  /* 🔤 همان تایپوگرافی تب‌های ناوبری */
  font-family: Vazirmatn, system-ui, sans-serif !important;
  font-size: 12.8px !important;
  font-weight: 600 !important;
  line-height: 1.4286 !important;      /* = 18.2857px */
  letter-spacing: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
#site-header .nav-login-btn i,
#site-header .nav-login-btn .nav-caret,
#site-header .nav-user-btn i,
#site-header .nav-user-btn .nav-caret {
  font-size: 11px !important;
  line-height: 1 !important;
  color: inherit !important;
}
/* 📱 موبایل — هم‌ارتفاع با بقیه */
@media (max-width: 900px) {
  #site-header .nav-login-btn, #site-header .nav-user-btn,
  body.public-page #site-header .nav-login-btn, body.public-page #site-header .nav-user-btn {
    height: 34px !important; min-height: 34px !important; max-height: 34px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   🔽 منوی آبشاری «ورود» — باز شدن داخل کادر (رفع بریدگی)
   🖐️ «ما یه دکمه ورود داریم که بصورت آبشاری باید باشه — درستش کن»

   🔬 ریشهٔ باگ (اندازه‌گیری CDP):
        دکمهٔ ورود در هدر سمت **چپ** است:  x=129..192
        منو ۲۳۲px با `right:0` (تراز به راست دکمه) ⇒ چپ = 192-232 = **-40**
        ⇒ منو ۴۰px بیرون کادر سمت چپ **بریده** می‌شد!

        (در /login دکمه x=203 بود ⇒ چپ=33 ⇒ تصادفاً سالم)
        (در موبایل هم پنل ستونی است ولی منو نسبت به دکمه تراز می‌شد)

   ✅ راه‌حل: منو به سمت **راست** دکمه باز شود (left:0) — در هر دو صفحه داخل کادر می‌ماند
        + سقف عرض تا هرگز از کادر بیرون نزند
   ══════════════════════════════════════════════════════════════════════════ */
#site-header .nav-login-wrap > .nav-drop,
#site-header .nav-login-wrap > ul.nav-drop,
body.public-page #site-header .nav-login-wrap > .nav-drop,
body.public-page.landing-page #site-header .nav-login-wrap > .nav-drop {
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 6px) !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}
/* 📱 موبایل — تمام‌عرض داخل پنل همبرگری */
@media (max-width: 900px) {
  #site-header .nav-login-wrap > .nav-drop,
  body.public-page #site-header .nav-login-wrap > .nav-drop {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    margin: 6px 0 2px !important;
    box-shadow: none !important;
  }
  #site-header .nav-login-wrap { width: 100% !important; }
}

/* 🔽 منوی آبشاری «کاربر» (وقتی وارد شده) — همان قاعده */
#site-header .nav-login-wrap > #drop-user {
  left: 0 !important; right: auto !important;
  max-width: calc(100vw - 24px) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   📱 رفع موبایل: منوی آبشاری ورود در قالب صفحهٔ فرود بریده می‌شد
   🔬 ریشه: `.public-page .nav-drop { position:fixed; left:8px; right:8px }` در موبایل
            وجود دارد، ولی منوی ورود با `left:0` و تراز به دکمه ترکیب می‌شد
            ⇒ x=-224 (بیرون کادر سمت چپ)
   ✅ منو تمام‌عرض عمودی داخل پنل همبرگری (position:static)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.public-page.landing-page #site-header .nav-login-wrap,
  body.public-page #site-header .nav-login-wrap,
  #site-header .nav-login-wrap {
    width: 100% !important;
    position: relative !important;
    display: block !important;
  }
  /* ✅ الگوی کارآمد بقیهٔ منوها در موبایل: fixed با فاصلهٔ ۸px از دو طرف
     (قبلاً `position:static; width:100%` کار نکرد چون والد ۱۷۲px بود ⇒ x=-100) */
  body.public-page.landing-page #site-header .nav-login-wrap > .nav-drop,
  body.public-page.landing-page #site-header #drop-login,
  body.public-page #site-header .nav-login-wrap > .nav-drop,
  body.public-page #site-header #drop-login,
  #site-header .nav-login-wrap > .nav-drop,
  #site-header #drop-login {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   🖥️📱 رفع «دو کادر» دور دکمهٔ ورود هدر
   🖐️ «تو هدر گوشی و هم تو هدر دسکتاپ دکمه ورود دو تا کادر داره»

   🔬 اندازه‌گیری CDP:
      دسکتاپ:  #nav-lang   → 98×35 · border 1px rgba(11,40,81,.1)   ← کادر زبان
               #nav-login  → 63×35 · border 1px rgba(11,40,81,.16)  ← کادر ورود
               ⇒ دو کادر کنار هم، هم‌رنگ ولی یکی «کادر زبان» است
      موبایل:  #nav-lang-wrap → **14×35** (باریک!) · border 1px · radius 10px
               #nav-login     → 34×35 · border 1px
               ⇒ کادر باریکِ خالی کنار دکمه = «کادر دوم» 🟥

   ✅ رفع:
      ۱) در موبایل کادر زبان را به عرض کامل/معنادار برگردان (نه ۱۴px خالی)
      ۲) قاعدهٔ تکراریِ من که `border` را روی nav-lang-wrap می‌گذاشت، حذف شود
         (کادر زبان در landing.css به `.nav-lang` (بیرونی) منتقل شده بود —
          من دوباره روی `nav-lang-wrap` گذاشتم ⇒ کادر تکراری)
   ══════════════════════════════════════════════════════════════════════════ */
#site-header .nav-lang-wrap,
#site-header .nav-lang {
  box-sizing: border-box !important;
  min-width: 78px !important;
}
/* 📱 موبایل — عرض معنادار + هم‌ارتفاع با دکمهٔ ورود */
@media (max-width: 900px) {
  #site-header .nav-lang-wrap,
  body.public-page #site-header .nav-lang-wrap,
  body.public-page.landing-page #site-header .nav-lang-wrap {
    width: auto !important;
    min-width: 46px !important;
    max-width: none !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  #site-header .nav-lang, #site-header .nav-lang-btn { height: 34px !important; }
  #site-header .nav-lang-btn { min-width: 44px !important; padding: 0 8px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🔲 رفع نهایی «دو کادر» — یکدست‌سازی کادر زبان و دکمهٔ ورود
   🖐️ «تو هدر گوشی و هم تو هدر دسکتاپ دکمه ورود دو تا کادر داره»

   🔬 نقشهٔ عناصر ناحیهٔ x=121..263 (CDP):
        #nav-login      → 63×35 @(129,13)  · border 1px rgba(11,40,81,.16)  ← ورود
        #nav-lang-wrap  → 98×35 @(200,13)  · border 1px rgba(11,40,81,.1)   ← زبان
      ① هر دو کادر ۱px · ولی ضخامت/رنگ متفاوت ⇒ چشم «دو کادر جدا» می‌بیند
      ② در موبایل `.nav-lang-wrap` به **۱۴px** جمع می‌شد ⇒ کادر باریکِ خالی
      ③ فاصلهٔ صفر بین دو کادر ⇒ بصری مثل یک کادر شکسته

   ✅ رفع: هر دو یک قاب، یک ارتفاع، یک radius + فاصلهٔ ۶px بین‌شان
   ══════════════════════════════════════════════════════════════════════════ */
/* 🔬 اندازه‌گیری پیکسلی: قاب دکمهٔ ورود روشنایی=212 (rgba .16)
      ولی قاب کادر زبان روشنایی=233 (rgba .10) ⇒ **دو رنگ متفاوت** ⇒ چشم دو کادر می‌بیند
   ✅ یکدست: هر دو با همان قاب دکمهٔ ورود  */
body.public-page.landing-page #site-header .nav-lang,
body.public-page.landing-page #site-header .nav-lang-wrap,
body.public-page #site-header .nav-lang-wrap,
#site-header .nav-lang,
#site-header .nav-lang-wrap,
#site-header .nav-login-btn,
#site-header .nav-user-btn,
body.public-page #site-header .nav-lang,
body.public-page.landing-page #site-header .nav-login-btn {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(11, 40, 81, .16) !important;
  border-radius: 8px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  box-sizing: border-box !important;
}
/* فاصلهٔ ۶px بین کادر زبان و دکمهٔ ورود (نه چسبیده) */
#site-header .nav-right, #site-header .nav-login-wrap { gap: 6px !important; }
#site-header .nav-login-wrap { margin-inline-start: 6px !important; }
/* 📱 موبایل — کادر زبان عرض معنادار، هر دو هم‌اندازه */
@media (max-width: 900px) {
  #site-header .nav-lang-wrap, #site-header .nav-lang,
  body.public-page #site-header .nav-lang-wrap,
  body.public-page.landing-page #site-header .nav-lang {
    width: auto !important;
    min-width: 52px !important;
    max-width: 52px !important;
    overflow: hidden !important;
  }
  #site-header .nav-lang-name { display: none !important; }
  #site-header .nav-lang-btn { padding: 0 6px !important; gap: 4px !important; justify-content: center !important; }
}


/* 🔲 کادر زبان — قاب فقط روی ظرف بیرونی (.nav-lang)، دکمهٔ داخلی بی‌قاب */
body.public-page.landing-page #site-header .nav-lang-btn,
body.public-page #site-header .nav-lang-btn,
#site-header .nav-lang-btn,
#site-header .nav-lang .nav-drop-toggle {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 7px !important;
  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;
  box-sizing: border-box !important;
}