/* ==========================================================================
   ۲۴ کلاب — سیستم طراحی «بازار»
   --------------------------------------------------------------------------
   انضباط بصری از Linear: بوم تیره، سطوح نیمه‌شفاف، خطوط مویی، یک رنگ تأکید.
   پالت از بازار ایرانی: زعفرانی (طلا)، فیروزه‌ای (کاشی)، آجری (خشت).

   قاعده: هیچ سایه‌ای وجود ندارد. عمق با «پله‌های روشنایی» ساخته می‌شود.
   ========================================================================== */

/* ---------- فونت، میزبانی‌شده روی همین سرور (بدون CDN خارجی) ---------- */
@font-face {
  font-family: Vazirmatn;
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- سطوح: مشکیِ گرم، نه آبی ---------- */
  --bg: #0a0a09;
  --bg2: #121211;
  --card: rgba(255, 255, 255, .025);
  --card2: rgba(255, 255, 255, .05);
  --card3: rgba(255, 255, 255, .075);

  /* ---------- خطوط: مویی و نیمه‌شفاف ---------- */
  --border: rgba(255, 255, 255, .07);
  --border2: rgba(255, 255, 255, .12);

  /* ---------- متن ---------- */
  --fg: #f2f0ea;
  --muted: #a3a096;
  --faint: #6e6b63;

  /* ---------- زعفرانی: رنگ اصلی ---------- */
  --accent: #e0a83c;
  --accent-dim: rgba(224, 168, 60, .10);
  --accent-line: rgba(224, 168, 60, .30);
  --accent-ink: #14100a;

  /* ---------- فیروزه‌ای: خرید / موفقیت ---------- */
  --buy: #3fb8af;
  --buy-dim: rgba(63, 184, 175, .10);
  --buy-line: rgba(63, 184, 175, .30);

  /* ---------- فروش = همان زعفرانی (رنگ برند) ---------- */
  --sell: #e0a83c;
  --sell-dim: var(--accent-dim);
  --sell-line: var(--accent-line);

  /* ---------- آجری: خطر ---------- */
  --danger: #c9603f;
  --danger-dim: rgba(201, 96, 63, .10);
  --danger-line: rgba(201, 96, 63, .32);

  --ok: var(--buy);

  /* ---------- شعاع گوشه‌ها: منظم و جمع‌وجور ---------- */
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --radius: var(--r-md);
  --shadow: none;

  --line: 1.75;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: var(--line);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

/* در خط فارسی، فاصله‌گذاری منفی حروف را به هم می‌چسباند — پس هرگز اعمال نمی‌شود.
   سلسله‌مراتب فقط با وزن، اندازه و رنگ ساخته می‌شود. */
h1, h2, h3, .brand, .offer-title { letter-spacing: 0; }

a { color: var(--accent); text-decoration: none; }
/* فقط فاصلهٔ افقی — تا padding-bottom تعریف‌شده روی main را پاک نکند.
   (.wrap یک کلاس است و از main قوی‌تر؛ اگر padding کامل بدهیم،
    فاصلهٔ پایین صفحه صفر می‌شود و آخرین کارت زیر نوار پایین گم می‌شود.) */
.wrap { max-width: 780px; margin: 0 auto; padding-inline: 14px; }

::selection { background: var(--accent-line); color: var(--fg); }

/* نوار اسکرول نازک، همرنگ محیط */
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- هدر ---------- */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 9, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.top-in {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; max-width: 780px; margin: 0 auto;
}
.brand { font-weight: 700; font-size: 17px; }
.brand span { color: var(--accent); }
.top-in .spacer { flex: 1; }

.chip {
  background: var(--card2); border: 1px solid var(--border); color: var(--muted);
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  white-space: nowrap; font-weight: 500;
}
.chip.gold {
  color: var(--accent); border-color: var(--accent-line);
  background: var(--accent-dim); font-weight: 600;
}

/* ---------- بدنه ---------- */
main { padding: 16px 0 calc(104px + env(safe-area-inset-bottom)); }

h1 { font-size: 21px; font-weight: 700; line-height: 1.35; margin: 4px 0 14px; }
h2 { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 20px 0 9px; }
h3 { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 14px 0 7px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap2 { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- کارت: شیشه‌ای، بدون سایه ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 15px;
  margin-bottom: 12px;
}
.card.tight { padding: 11px 13px; }
.card.click { display: block; color: inherit; transition: background .15s, border-color .15s; }
.card.click:active { transform: none; background: var(--card2); border-color: var(--border2); }
.card.hl { border-color: var(--accent-line); background: var(--accent-dim); }

.offer-head { display: flex; align-items: flex-start; gap: 9px; }
.offer-title { font-weight: 600; font-size: 15.5px; flex: 1; line-height: 1.5; }

.badge {
  font-size: 11.5px; padding: 2px 8px; border-radius: var(--r-sm);
  white-space: nowrap; font-weight: 600; border: 1px solid transparent;
}
.badge.buy { background: var(--buy-dim); color: var(--buy); border-color: var(--buy-line); }
.badge.sell { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); }
.badge.gray { background: var(--card2); color: var(--muted); border-color: var(--border); }
.badge.gold { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); }
.badge.red { background: var(--danger-dim); color: var(--danger); border-color: var(--danger-line); }

.kv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px; font-size: 13.5px; }
.kv div { color: var(--muted); }
.kv b { color: var(--fg); font-weight: 600; }

/* ---------- فرم ---------- */
label { display: block; font-size: 13px; color: var(--muted); margin: 13px 0 5px; font-weight: 500; }
input[type=text], input[type=password], input[type=number], input[type=tel], select, textarea {
  width: 100%; padding: 11px 13px;
  border-radius: var(--r);
  background: var(--bg2); border: 1px solid var(--border); color: var(--fg);
  font-family: inherit; font-size: 15px; line-height: 1.6;
  transition: border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-line); background: var(--card);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 84px; resize: vertical; }
input[type=file] { color: var(--muted); font-size: 13px; }
select { appearance: none; background-image: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- دکمه ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--card2); color: var(--fg);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
  width: 100%;
}
.btn:active { opacity: .8; }
.btn.primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); font-weight: 700;
}
.btn.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn.danger { background: var(--danger-dim); color: var(--danger); border-color: var(--danger-line); }
.btn.ok { background: var(--buy-dim); color: var(--buy); border-color: var(--buy-line); }
.btn.sm { padding: 8px 13px; font-size: 13.5px; width: auto; border-radius: var(--r-sm); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { width: auto; flex: 1; }

/* چیپ فیلتر */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a, .chips button {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 13px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-weight: 500; transition: .15s;
}
.chips a.on, .chips button.on {
  background: var(--accent-dim); border-color: var(--accent-line);
  color: var(--accent); font-weight: 600;
}

/* ---------- هشدار ---------- */
.flash { border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; font-size: 14px; border: 1px solid transparent; }
.flash.ok { background: var(--buy-dim); border-color: var(--buy-line); color: var(--buy); }
.flash.err { background: var(--danger-dim); border-color: var(--danger-line); color: var(--danger); }
.flash.info { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }

/* ---------- نوار پایین ---------- */
nav.bottom {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 50;
  background: rgba(10, 10, 9, .88);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-in { display: flex; max-width: 780px; margin: 0 auto; }
.nav-in a {
  flex: 1; text-align: center; padding: 9px 2px 11px; color: var(--faint);
  font-size: 11px; font-weight: 500;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  position: relative; transition: color .15s;
}
.nav-in a i { font-size: 19px; font-style: normal; line-height: 1; }
.nav-in a.on { color: var(--accent); font-weight: 600; }
.nav-in a .dot {
  position: absolute; top: 6px; inset-inline-start: 50%; margin-inline-start: 10px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; line-height: 17px; border-radius: 9px; padding: 0 4px;
}

/* ---------- گفتگو ---------- */
.msgs {
  min-height: 180px; padding: 6px 0 8px;
  max-height: 58vh; overflow-y: auto; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
@supports (height: 100dvh) { .msgs { max-height: 58dvh; } }

.msg {
  max-width: 82%; margin: 7px 0; padding: 10px 13px;
  border-radius: var(--r-lg); font-size: 14.5px; word-wrap: break-word;
  border: 1px solid transparent;
}
.msg .who { font-size: 11.5px; color: var(--faint); margin-bottom: 3px; font-weight: 500; }
.msg .t { font-size: 10.5px; color: var(--faint); text-align: left; margin-top: 3px; }
.msg.them {
  background: var(--card2); border-color: var(--border);
  border-start-start-radius: var(--r-sm);
}
.msg.mine {
  background: var(--buy-dim); border-color: var(--buy-line);
  margin-inline-start: auto; border-start-end-radius: var(--r-sm);
}
.msg.sys, .msg.admin {
  max-width: 100%; margin-inline: auto; text-align: center;
  background: var(--accent-dim); border-color: var(--accent-line);
  color: var(--accent); font-size: 13px;
}
.msg img { max-width: 100%; border-radius: var(--r); margin-top: 6px; }

.composer {
  position: fixed; bottom: calc(60px + env(safe-area-inset-bottom));
  inset-inline: 0; z-index: 45;
  background: rgba(10, 10, 9, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border); padding: 9px 14px;
}
.composer form { max-width: 780px; margin: 0 auto; }
.composer-in { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-height: 46px; max-height: 120px; }
.composer .btn { width: 52px; height: 46px; padding: 0; border-radius: var(--r); }

/* ---------- جدول ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.tbl th { color: var(--faint); font-weight: 500; font-size: 12.5px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--card); }
.scroll-x { overflow-x: auto; }

/* ---------- تب‌ها ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: 0 0 auto; padding: 8px 15px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 500;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
}
.tabs a.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 700;
}

/* ---------- لندینگ ---------- */
.hero { padding: 44px 0 10px; text-align: center; }
.hero h1 { font-size: 32px; font-weight: 700; line-height: 1.3; margin: 8px 0; }
.hero p { color: var(--muted); margin: 0 0 24px; }
.feat { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; }
.feat .ic { font-size: 21px; width: 30px; text-align: center; }
.feat b { display: block; margin-bottom: 2px; font-weight: 600; }
.feat p { margin: 0; color: var(--muted); font-size: 13.5px; }

.empty { text-align: center; padding: 44px 16px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 8px; opacity: .6; }

.stars { color: var(--accent); letter-spacing: 1px; }
.rate-row { display: flex; gap: 7px; justify-content: center; margin: 14px 0 6px; }
.rate-row button {
  background: transparent; border: 1px solid var(--border2); color: var(--faint);
  font-size: 21px; width: 48px; height: 48px; border-radius: var(--r);
  cursor: pointer; transition: color .12s, background .12s, border-color .12s, transform .12s;
}
.rate-row button:hover { border-color: var(--accent-line); color: var(--accent); }
.rate-row button.on {
  background: var(--accent-dim); border-color: var(--accent-line);
  color: var(--accent); transform: scale(1.04);
}
.rate-row button:active { transform: scale(.96); }

/* کارت امتیازدهی — کارت اصلی صفحهٔ گفتگوی بسته */
.card.rate-card {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-dim), transparent 70%);
}
.card.rate-card .btn { margin-top: 2px; }

.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* ---------- صفحهٔ گفتگو: جا برای composer ثابت ---------- */
.chat-main { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }

/* ---------- جعبهٔ «رد با دلیل» در پنل مدیر ---------- */
details.rejbox { margin-top: 11px; border-top: 1px solid var(--border); padding-top: 11px; }
details.rejbox > summary {
  cursor: pointer; font-size: 13.5px; color: var(--danger); font-weight: 600;
  list-style: none; padding: 4px 0;
}
details.rejbox > summary::-webkit-details-marker { display: none; }
details.rejbox > summary::before { content: "▸ "; }
details.rejbox[open] > summary::before { content: "▾ "; }
details.rejbox textarea { margin-top: 8px; min-height: 72px; }
details.rejbox .chip { font-family: inherit; cursor: pointer; }

/* دلیل رد که به کاربر نشان داده می‌شود */
.reason-box {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r); font-size: 13px;
  background: var(--danger-dim); border: 1px solid var(--danger-line); color: var(--danger);
}

/* ---------- قیمت با حروف ---------- */
.words {
  display: none; margin-top: 6px; font-size: 12.5px; line-height: 1.6;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 6px 10px;
}

/* ---------- عکس کنار آفر در فهرست‌ها ---------- */
.card.offer-row { display: flex; gap: 12px; align-items: flex-start; }
.card.offer-row .offer-main { flex: 1; min-width: 0; }
.card.offer-row .thumb {
  flex: 0 0 auto; width: 86px; height: 86px; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--bg2);
}
.card.offer-row .thumb.pdf {
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
@media (max-width: 380px) {
  .card.offer-row .thumb { width: 68px; height: 68px; }
}

/* ================================================================ تیکت پشتیبانی */
.ticket-msgs { max-height: none; overflow: visible; padding: 12px 0 2px; }

/* پیام پشتیبانی: حباب واقعی، نه متن وسط‌چین سیستمی */
.ticket-msgs .msg.admin {
  max-width: 82%; margin-inline: 0 auto; text-align: start;
  background: var(--buy-dim); border-color: var(--buy-line);
  color: var(--fg); font-size: 14.5px;
  border-start-start-radius: var(--r-sm);
}
.ticket-msgs .msg.admin .who { color: var(--buy); }

.ticket-msgs .msg .shot {
  display: block; max-width: 100%; max-height: 320px; object-fit: cover;
  border-radius: var(--r); margin-top: 8px; border: 1px solid var(--border);
}

.attach {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 7px 11px; border-radius: var(--r); font-size: 12.5px;
  background: var(--card2); border: 1px solid var(--border); color: var(--fg);
}
.attach:hover { border-color: var(--accent-line); color: var(--accent); }

/* نشانگر تیکت تازه روی آیتم نوار پایین */
.nav-in a .dot { top: 4px; }

/* ================================================================ اعلان و تازه‌سازی */
.chip.bell { position: relative; padding-inline: 10px; }
.chip .dot {
  position: absolute; top: -3px; inset-inline-end: -4px;
  min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; text-align: center;
}

.row.between { display: flex; justify-content: space-between; align-items: center; }
.ok-text { color: var(--buy); }
.err-text { color: var(--danger); }

.notif .n-title { font-weight: 600; font-size: 14.5px; color: var(--fg); }
.notif.un { border-inline-start: 3px solid var(--accent); }

/* نوار «آفر تازه» در بازار — جای رفرش دستی */
.fresh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px; padding: 10px 13px; border-radius: var(--r-md);
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: 13.5px;
}
.fresh button {
  flex: none; padding: 6px 13px; border-radius: var(--r); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 0; font: inherit; font-weight: 700;
}