/* --- Vazirmatn variable (وزن 300 تا 900) --- */

/* fallback های استاتیک (درصورت نبود variable) */
@font-face{
  font-family: 'Vazirmatn';
  src: url('/static/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Vazirmatn';
  src: url('/static/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* استفاده عمومی در بدنه */
body{
  font-family: Vazirmatn, IRANSans, system-ui, Segoe UI, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  
}


/* اعداد یکدست و مناسب جدول‌ها */
*{ font-variant-numeric: tabular-nums; }


/* ===== Theme tokens ===== */
:root{
  --bg:#ffffff; --card:#ffffff; --text:#0b1220; --muted:#6b7280;
  --line:#e5e7eb; --accent:#16a34a; --accent-2:#ffd166;
}
.theme-dark{
  --bg:#111315; --card:#1a1d21; --text:#e9edf2; --muted:#9aa4b2;
  --line:#2a2f36; --accent:#22c55e; --accent-2:#ffd54a;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{direction:rtl;background:var(--bg);color:var(--text);
     font-family:IRANSans,Vazirmatn,system-ui,Segoe UI,Arial,sans-serif}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
        padding:12px 14px;background:#060606;color:#fff}
.topbar-title{margin:0;font-size:18px}
.icon-btn{background:transparent;border:0;color:inherit;font-size:18px;cursor:pointer}

/* ===== Update strip ===== */
.update-strip{display:flex;gap:6px;align-items:center;justify-content:center;padding:8px 12px;
              border-bottom:1px dashed var(--line);color:var(--muted);font-size:13px}

/* ===== Panels / lists ===== */
.main{padding:8px 10px 76px}
.panel[hidden]{display:none}
.list{display:flex;flex-direction:column;gap:10px;margin-top:8px}

/* ===== CARD — [Flag | Title | Price] ===== */
.list-item{
  display:grid;
  grid-template-columns: 48px 1fr minmax(90px,max-content);  /* پرچم | عنوان | قیمت */
  align-items:center;
  gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}

/* Flag (سمت راست در RTL) */
.li-flag{grid-column:1;justify-self:center}
.flag{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}

/* Title (وسط) */
.li-titlebox{grid-column:2;display:flex;flex-direction:column;gap:2px;min-width:0}
.li-title{margin:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Price (چپ کارت) */
.li-pricebox{
  grid-column:3;justify-self:end;
  display:flex;align-items:baseline;gap:8px;
  white-space:nowrap;font-variant-numeric:tabular-nums
}
.price-tmn{font-weight:800}
.price-unit{font-size:12px;color:var(--muted)}

/* ===== Bottom tabs ===== */
.bottombar{position:fixed;bottom:0;left:0;right:0;background:#121212;
           display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px 10px;z-index:50}
.nav-btn{display:flex;align-items:center;justify-content:center;padding:8px 6px;border-radius:10px;
         color:#fff;text-decoration:none;cursor:pointer;border:1px solid rgba(255,255,255,0)}
.nav-btn.active{background:#ffda00;color:#000;font-weight:800}

/* ===== Helpers ===== */
.loading{margin:12px 8px;color:var(--muted);font-size:13px}
.error{margin:12px 8px;color:#ff6b6b;font-size:13px}

/* ===== Mobile tweaks ===== */
@media (max-width:520px){
  .list-item{grid-template-columns:40px 1fr minmax(80px,max-content);gap:10px;padding:8px 10px}
  .flag{width:32px;height:32px}
}


.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.nav-btn.active {
  color: #000;
}


/* kill old floating tabs */
.floating-tabs { display: none !important; }

/* ====== Home (quick) ====== */

/* شبکه 2×2 کارت‌های سریع */
.home-quick-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin:8px 0 12px;
}

/* کارت سریع: [پرچم | عنوان | قیمت] */
.quick-card{
  display:grid;
  grid-template-columns: 36px 1fr auto;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
}

.quick-flag{
  width:28px; height:28px; border-radius:50%;
  object-fit:cover; border:1px solid var(--line);
  justify-self:center;
}

.quick-title{
  display:flex; flex-direction:column;
  min-width:0;
}
.quick-title strong{
  font-size:14px; line-height:1.1;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.quick-title span{
  font-size:11px; color:var(--muted);
}

.quick-price{
  display:flex; align-items:baseline; gap:6px;
  white-space:nowrap; justify-self:end;
}
.quick-price b{
  font-weight:800; font-variant-numeric:tabular-nums;
}
.quick-price span{ font-size:12px; color:var(--muted); }

/* ====== Coins compact table ====== */
.coins-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.coins-head{
  font-weight:700; font-size:13px; color:var(--muted);
  padding:8px 12px; border-bottom:1px solid var(--line);
}
.coins-list{ display:flex; flex-direction:column; }
.coin-row{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  align-items:center; gap:8px;
  padding:10px 12px;
  text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line);
}
.coin-row:last-child{ border-bottom:0; }

.coin-icon{
  width:22px; height:22px; border-radius:50%;
  object-fit:cover; border:1px solid var(--line);
  justify-self:center;
}
.coin-title strong{
  font-size:13px; line-height:1.1;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.coin-price{
  display:flex; align-items:baseline; gap:6px;
  white-space:nowrap; justify-self:end;
}
.coin-price b{ font-weight:800; font-variant-numeric:tabular-nums; }
.coin-price span{ font-size:12px; color:var(--muted); }

/* موبایل خیلی کوچک: کمی جمع‌تر */
@media (max-width:380px){
  .quick-card{ padding:8px 10px; }
  .coin-row{ padding:8px 10px; }
  .quick-price b, .coin-price b{ font-size:13px; }
}

/* حالت 3 ستون برای 6 کارت */
.grid-3cols{
  grid-template-columns: repeat(3, 1fr);
}


/* --- Home: 2-column grid for 4 currencies --- */
.home-quick-grid{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.grid-2cols{ grid-template-columns:repeat(2,1fr); }

.quick-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.quick-flag{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;border:1px solid var(--line);flex:0 0 auto;
}
.quick-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quick-title strong{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick-title span{ font-size:12px; color:var(--muted); }
.quick-price{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.quick-price b{ font-weight:800; }

/* --- Gold 18k: full-width card under the grid --- */
.gold-wide-card{
  display:block;
  margin-top:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
}
.gold-wide-inner{
  display:grid;
  grid-template-columns:48px 1fr max-content;
  align-items:center;
  gap:12px;
  padding:12px 14px;
}
.gold-icon{
  width:40px;height:40px; border-radius:10px; object-fit:cover; border:1px solid var(--line);
}
.gold-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gold-title strong{ font-size:15px; }
.gold-title span{ font-size:12px; color:var(--muted); }
.gold-price{ justify-self:end; display:flex; align-items:center; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.gold-price b{ font-weight:800; }

/* --- Responsive: روی گوشی هنوز بدون اسکرول --- */
@media (max-width:520px){
  .grid-2cols{ grid-template-columns:1fr 1fr; } /* همونه؛ دوتایی می‌مونه */
  .quick-flag{ width:32px;height:32px; }
  .gold-wide-inner{ grid-template-columns:40px 1fr max-content; gap:10px; }
}

/* گرید ارزها */
.home-quick-grid{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.grid-2cols{ grid-template-columns:repeat(2,1fr); }

.quick-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
}
.quick-flag{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;border:1px solid var(--line);
}
.quick-title{ display:flex; flex-direction:column; gap:2px; }
.quick-title strong{ font-size:15px; }
.quick-title span{ font-size:12px; color:var(--muted); }
.quick-price{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.quick-price b{ font-weight:800; }

/* طلای 18 عیار */
.gold-wide-card{
  display:block;
  margin-top:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
}
.gold-wide-inner{
  display:grid;
  grid-template-columns:48px 1fr max-content;
  align-items:center;
  gap:12px;
  padding:12px 14px;
}
.gold-icon{
  width:40px;height:40px; border-radius:10px; object-fit:cover; border:1px solid var(--line);
}
.gold-title{ display:flex; flex-direction:column; gap:2px; }
.gold-title strong{ font-size:15px; }
.gold-title span{ font-size:12px; color:var(--muted); }
.gold-price{ justify-self:end; display:flex; align-items:center; gap:6px; }

/* لیست سکه‌ها */
.coin-list-card{
  margin-top:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 14px;
}
.coin-list-title{
  margin:0 0 8px 0;
  font-size:14px;
  color:var(--muted);
}
.coin-list{
  list-style:none;
  padding:0;margin:0;
}
.coin-list li{
  display:grid;
  grid-template-columns:28px 1fr max-content max-content;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
}
.coin-list li:last-child{ border-bottom:none; }
.coin-list img{
  width:24px;height:24px; object-fit:cover;
}
.coin-name{ font-size:14px; }
.coin-price{ font-weight:800; font-variant-numeric:tabular-nums; }
.coin-unit{ font-size:12px; color:var(--muted); }


/* === Flash on price change === */
@keyframes flashUp {
  0% { background: rgba(34,197,94,0.25); }
  100% { background: transparent; }
}
@keyframes flashDown {
  0% { background: rgba(239,68,68,0.25); }
  100% { background: transparent; }
}
.flash-up   { animation: flashUp 1.2s ease; border-radius: 8px; }
.flash-down { animation: flashDown 1.2s ease; border-radius: 8px; }

/* مطمئن شو قیمت‌ها روی یک خط و تراز اعداد خوبه */
.price-dyn{ font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Tabs visibility: ensure only active panel is shown --- */

/* — تیترهای داخل تب‌ها جمع‌وجور — */
.panel h2,
.panel h3 {
  font-size: 14px;      /* از 18–22 میاریم 14px */
  font-weight: 700;
  margin: 6px 0 8px;    /* فاصله‌ها کم‌تر */
  line-height: 1.4;
  color: var(--muted);  /* ملایم‌تر برای مزاحم نبودن */
}

/* اگر فقط «عنوان لیست سکه‌ها» بزرگه */
.coin-list-title {
  font-size: 13px;
  font-weight: 700;
  margin: 4px 0 6px;
  color: var(--muted);
}

/* عنوان آیتم‌ها تو کارت‌ها (مثل li-title) خیلی چشم‌گیر نباشه */
.li-title {
  font-size: 13px;      /* قبلاً 15px بود */
  font-weight: 600;     /* کمی نرم‌تر */
  color: var(--text);
  margin: 0;
}

/* زیرعنوان‌ها (کد ارز، نماد) خیلی ریز و کم‌رنگ */
.li-sub {
  font-size: 11px;
  color: var(--muted);
}

/* اگه جایی واقعاً نمی‌خوای تیتر دیده بشه ولی برای دسترسی لازمه: */
.panel .panel-title--visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* فقط h2 های بالای لیست داخل تب‌ها رو مخفی کن */
.panel > h2:first-child {
    display: none !important;
}


/* ===== Drawer (منوی همبرگری) ===== */
.drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 90;
}
.drawer{
  position: fixed; top: 0; bottom: 0; right: 0; /* سمت راست برای RTL */
  width: min(88vw, 380px);
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(0,0,0,.25);
  z-index: 99;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.drawer.open{ transform: translateX(0); }

.drawer-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.drawer-header h2{ margin: 0; font-size: 18px; color: var(--accent); }

.drawer-content{ padding: 12px 14px; overflow: auto; }
.drawer-section + .drawer-section{ margin-top: 16px; }
.drawer-section h3{ margin: 0 0 10px 0; font-size: 15px; }

.contact-list{ margin: 0; padding: 0 18px; color: var(--text); }
.contact-list li{ margin: 6px 0; }
.contact-list a{ color: inherit; text-decoration: underline; }

.store-row{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; align-items: center;
}
.store{
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px;
}
.store img{ width: 32px; height: 32px; object-fit: contain; }

@media (max-width:520px){
  .store-row{ grid-template-columns: repeat(2, 1fr); }
}

/* وقتی منو بازه، اسکرول بادی قفل بشه (اختیاری) */
.body-lock { overflow: hidden; }


.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 16px;
  background:#111315;
  color:#fff;
}

.menu-btn {
  font-size:20px;
  cursor:pointer;
}

.tabs {
  display:flex;
  justify-content:space-around;
  background:#1a1d25;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.tab-btn {
  flex:1;
  text-align:center;
  padding:8px 0;
  color:#ccc;
  text-decoration:none;
  border:none;
  background:none;
  cursor:pointer;
}
.tab-btn.active {
  color:#fff;
  border-bottom:2px solid #0a6;
}

/* --- Link reset across the app (no blue, no underline) --- */
a, a:visited { color: inherit !important; text-decoration: none !important; }
a:hover, a:focus, a:active { text-decoration: none !important; outline: none; }

/* لیست‌های ما (index و تب‌ها) */
.list a.list-link,
.coin-list-card a,
.topbar a,
.drawer-content a,
.header a {
  text-decoration: none !important;
}

/* برای اطمینان از رنگ سفید در حالت تیره (در صورت نیاز) */
.theme-dark a,
.theme-dark .list a,
.theme-dark .coin-list-card a { color: var(--text, #fff) !important; }

.nav-tab {
  color: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nav-tab.active {
  color: black;
}

.bottombar .nav-btn { color:#fff !important; }
.bottombar .nav-btn.active {
  background:#fff !important;
  color:#000 !important;
}
.bottombar .nav-btn.active .nav-icon {
  filter: brightness(0) saturate(100%) !important;
}