/* ══════════════════════════════════════════════════════════
   كوجك · موقع أسعار الذهب
   الهوية: خلفية كريمية «الصالون الدافئ» + كحلي + ذهبي
   ══════════════════════════════════════════════════════════ */

:root{
  --navy:#2A323E;  --navy-2:#232A36;  --navy-3:#303949;
  --gold:#C9AE7E;  --gold-lt:#E0C79F; --gold-md:#B79B6B; --gold-dk:#7A6438;
  --cream:#FAF9F5; --cream-2:#FBF9F5;
  --sand:#E7E0D3;  --sand-2:#efe7da;  --sand-3:#e0d8c8;
  --line:#eadfce;  --line-2:#f0eadd;
  --tobacco:#9A9284; --slate:#5b6472; --slate-2:#4A5361;
  --wine:#8E3B46;
  --up:#2f7048;  --up-bg:#e0efe2;  --up-dk:#8fd6a8;
  --dn:#8E3B46;  --dn-bg:#f7e4e6;  --dn-dk:#e9a3ac;

  --ar:'Tajawal',system-ui,sans-serif;
  --lt:'Jost',system-ui,sans-serif;

  --r-sm:9px; --r-md:14px; --r-lg:18px; --r-pill:24px;
  --pad:48px;
  --hdr-h:71px;
}

*,*::before,*::after{box-sizing:border-box}

/* أي عنصر عليه display في كلاس يتغلّب على [hidden] من متصفّح المستخدم،
   فيبقى ظاهراً رغم إخفائه بـJS. هذه القاعدة تُغلق باب هذا الخطأ كلياً. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 14px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font-family:var(--ar);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--wine);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3{margin:0;font-weight:300;line-height:1.2}
p{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* الإزاحة خارج الشاشة بالـtransform لا بـ-9999px — الأخيرة تُنتج تمريراً أفقياً في RTL */
.skip{
  position:absolute;inset-inline-start:0;top:0;z-index:99;
  background:var(--navy);color:var(--cream);padding:10px 18px;
  transform:translateY(-200%);transition:transform .15s;
}
.skip:focus{transform:translateY(0);color:var(--cream)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--gold-dk);outline-offset:2px;border-radius:4px;
}

/* ── الشريط المتحرك ─────────────────────────────────────── */
.ticker{background:var(--navy);overflow:hidden;padding:12px 0;position:relative}
.ticker__track{
  display:flex;align-items:center;gap:40px;white-space:nowrap;width:max-content;
  font:500 13px var(--lt);direction:ltr;
  /* قيمة مبدئية فقط — app.js يحسب المدة من عرض الشريط ليثبت
     السرعة (≈72px/s) بدل المدة، وإلا تباطأ الشريط كلما زادت العناصر */
  animation:ktick 20s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.tkr{display:flex;align-items:center;gap:8px}
.tkr__n{color:#8b95a3}
.tkr__v{color:var(--cream)}
.tkr__c.up{color:var(--up-dk)} .tkr__c.down{color:var(--dn-dk)} .tkr__c.flat{color:#8b95a3}
/* الاتجاه من اليسار إلى اليمين — يوافق قراءة الصفحة العربية */
@keyframes ktick{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ── الترويسة (لاصقة) ───────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:20;
  background:rgba(251,249,245,.92);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.hdr__right{display:flex;align-items:center;gap:10px;flex:none}
.logo{display:flex;align-items:center;gap:10px;flex:none;direction:ltr}
.logo img{height:34px;width:auto}
.logo .logo__word{height:15px}
.logo__tag{
  font:500 12px var(--ar);color:var(--gold-dk);border-inline-start:1px solid var(--sand-3);
  padding-inline-start:10px;margin-inline-start:2px;direction:rtl;
}

.live{
  display:flex;align-items:center;gap:10px;background:var(--cream-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;
  font:400 13px var(--ar);color:var(--slate);flex:none;
}
.live__dot{width:9px;height:9px;border-radius:50%;background:#3a7d54;flex:none}
.live__dot::after{content:'';display:block;width:100%;height:100%;border-radius:50%;background:inherit;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.live.is-stale .live__dot{background:var(--gold-md)}
.live.is-stale .live__dot::after{animation:none}
@media (prefers-reduced-motion:reduce){.live__dot::after{animation:none}}

/* ── العنوان ────────────────────────────────────────────── */
.pagehead{text-align:center;padding-top:44px}
.eyebrow{font:500 12px var(--lt);letter-spacing:.34em;color:var(--gold-md);text-transform:uppercase}
.eyebrow--gold{color:var(--gold)}
.pagehead h1{font:300 44px var(--ar);margin-top:12px}
.pagehead__sub{font:400 14px var(--ar);color:var(--slate);margin-top:4px}
/* التاريخ الهجري يلي الميلادي مباشرة بنبرة أهدأ قليلاً */
.hijri{color:var(--gold-dk);white-space:nowrap}
.hijri::before{content:'·';color:var(--tobacco);margin-inline-end:6px}

/* السطر الإنجليزي المائل — توقيع الاتجاه «الافتتاحية» في الهوية */
.script{font:italic 400 20px 'Cormorant Garamond',serif;color:#9a8f78;margin-top:4px}
.script--lg{font-size:30px;margin-top:8px}

/* فاصل بمعيّن — من مكتبة الفواصل: خط 1px + معيّن 6px ذهبي */
.rule{display:flex;align-items:center;justify-content:center;margin:16px 0 12px}
.rule span{width:160px;height:1px;background:var(--gold-lt);position:relative;opacity:.75}
.rule span::after{
  content:'';position:absolute;inset-inline-start:50%;top:-3px;
  width:6px;height:6px;margin-inline-start:-3px;
  background:var(--gold-lt);transform:rotate(45deg);
}

/* ── أقسام ──────────────────────────────────────────────── */
.sec{margin-bottom:44px}
.sec__head{margin-bottom:18px}
.sec__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sec__head .eyebrow{font-size:11px;letter-spacing:.3em}
.sec__head h2{font:300 28px var(--ar);color:var(--navy);margin-top:8px}
.sec__head .script{font-size:17px;margin-top:2px}
.sec__head p{font:400 13px var(--ar);color:var(--tobacco);margin-top:6px}

/* ── بطاقات عامة ────────────────────────────────────────── */
.card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.card--note{background:var(--sand-2);border-color:var(--sand-3)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.card__head--tight{margin-bottom:10px;align-items:baseline}
.card__title{font:500 17px var(--ar);color:var(--navy)}
.card__sub{font:400 13px var(--ar);color:var(--tobacco)}
.fineprint{font:400 12px var(--ar);color:var(--tobacco);margin-top:12px}

.btn{
  display:inline-block;border:0;border-radius:8px;padding:12px 24px;
  font:500 14px var(--ar);text-align:center;transition:filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn--wine{background:var(--wine);color:#fff}
.btn--wine:hover{color:#fff}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{color:var(--navy)}
.btn--full{width:100%;padding:14px}
.btn--gold[disabled]{opacity:.6;cursor:progress}

.chip{display:inline-block;font:600 12px var(--lt);padding:5px 11px;border-radius:20px;direction:ltr}
.chip--up{background:var(--up-bg);color:var(--up)}
.chip--down{background:var(--dn-bg);color:var(--dn)}
.chip--flat{background:var(--sand-2);color:var(--slate)}
.chip--text{background:none;padding:0}
.chip--text.chip--up{color:var(--up)} .chip--text.chip--down{color:var(--dn)} .chip--text.chip--flat{color:var(--tobacco)}

/* رمز الريال — على يسار الرقم **دائماً**.
   ترتيب الـDOM وحده لا يكفي: حاويات الأرقام تحتاج direction:ltr لتُقرأ صحيحة،
   وهذا يقلب الرمز يميناً. فنغلّف الاثنين في inline-flex مضبوط على ltr
   والرمز أوّل عنصر — فيستقرّ يساراً مهما كان اتجاه ما حوله. */
.mny{
  display:inline-flex;align-items:baseline;gap:3px;
  direction:ltr;white-space:nowrap;
}
.riyal{height:.78em;width:auto;display:inline-block;vertical-align:-.02em;opacity:.85;flex:none}
/* الرمز المفرد داخل نصّ (كتسمية حقل) يحتاج مسافة يدوية — داخل .mny يتكفّل gap */
label .riyal{margin-inline-start:3px}
/* داخل الجداول نصغّره قليلاً حتى لا تزدحم الخلايا */
.tbl .riyal{height:.66em;opacity:.55}
.tbl--sm .riyal{height:.62em;opacity:.5}
.hrow__v .riyal{height:.66em;opacity:.5}
.lrow__v .riyal{height:.8em}
.krow__sell .riyal,.total .riyal{opacity:1}

/* ── الأونصة + الرسم ────────────────────────────────────── */
.hero{display:grid;grid-template-columns:.85fr 1fr;gap:26px;margin:26px 0 44px;align-items:stretch}

.spot{
  background:var(--navy);border-radius:var(--r-lg);padding:32px;
  display:flex;flex-direction:column;justify-content:center;
}
.spot__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.spot__eyebrow{font:400 12px var(--lt);letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.spot__label{font:400 14px var(--ar);color:#aab1bc;margin-top:8px}

/* شارة حالة السوق */
.mkt{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font:500 12px var(--ar);padding:5px 12px;border-radius:20px;
  border:1px solid transparent;
}
.mkt i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.mkt--open{background:rgba(58,125,84,.2);color:#8fd6a8;border-color:rgba(143,214,168,.3)}
.mkt--closed{background:rgba(255,255,255,.06);color:#9aa4b1;border-color:rgba(255,255,255,.12)}
.mkt--closed i{background:none;border:1.5px solid currentColor}
/* نسخة الترويسة على خلفية كريمية */
.mkt--hdr.mkt--open{background:var(--up-bg);color:var(--up);border-color:#c8e2ce}
.mkt--hdr.mkt--closed{background:var(--sand-2);color:var(--slate);border-color:var(--sand-3)}

.spot__basis{font:400 12px var(--ar);color:#7d8794}
.spot__mkt{font:400 12px var(--ar);color:var(--gold-lt);margin-top:10px}
.spot__mkt[hidden]{display:none}
.spot__price{display:flex;align-items:flex-end;gap:12px;margin-top:12px;direction:ltr}
.spot__price span{font:600 52px/1 var(--lt);color:var(--cream)}
.spot__price small{font:400 16px var(--lt);color:#aab1bc;padding-bottom:6px}
.spot__meta{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.spot__meta .chip--up{background:rgba(58,125,84,.22);color:var(--up-dk)}
.spot__meta .chip--down{background:rgba(142,59,70,.28);color:var(--dn-dk)}
.spot__meta .chip--flat{background:rgba(255,255,255,.08);color:#aab1bc}
.spot__abs{font:400 13px var(--lt);color:#aab1bc;direction:ltr}
.spot__rule{height:1px;background:#3a4453;margin:22px 0}
.spot__hl{display:flex;justify-content:space-between;gap:12px;font:400 13px var(--ar);color:#aab1bc}
.spot__hl b{color:var(--gold-lt);font-weight:500;direction:ltr;display:inline-block}
.spot__note{font:400 12px var(--ar);color:#8b95a3;margin-top:12px}
.spot__note b{color:#aab1bc;font-weight:500;direction:ltr;display:inline-block}

.chartcard{display:flex;flex-direction:column;padding:24px 26px}
.segs{display:flex;gap:4px;background:var(--sand-2);border-radius:10px;padding:4px;flex:none}
.segs button{background:none;border:0;font:500 12px var(--ar);color:var(--slate);padding:6px 13px;border-radius:7px;transition:.15s}
.segs button.is-on{background:var(--navy);color:var(--gold-lt)}
.segs button:not(.is-on):hover{color:var(--navy)}

/* ── الرسم البياني ──────────────────────────────────────── */
.chart{
  position:relative;flex:1;min-height:220px;touch-action:pan-y;
  --c-line:var(--gold-dk);        /* لون المنحنى — يتبدّل حسب الاتجاه */
}
.chart[data-dir="up"]{--c-line:#2f7048}
.chart[data-dir="down"]{--c-line:#8E3B46}
.chart svg{width:100%;height:100%;min-height:220px;display:block;direction:ltr}

.chart__grid{stroke:var(--line);stroke-width:1}
.chart__ylab{
  font:500 10.5px var(--lt);fill:var(--tobacco);text-anchor:end;
  letter-spacing:.02em;
}
#chartLine{fill:none;stroke:var(--c-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart__dot{fill:var(--c-line);stroke:var(--cream-2);stroke-width:2}
/* الخط المرجعي: إغلاق الجلسة السابقة */
.chart__ref{stroke:var(--gold-md);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.chart__mark{fill:none;stroke:var(--c-line);stroke-width:1.5;opacity:.65}
.chart__mlab{font:500 10px var(--lt);fill:var(--tobacco)}

.chart__cursor line{stroke:var(--navy);stroke-width:1;opacity:.28;stroke-dasharray:3 3}
.chart__cursor circle{fill:var(--navy);stroke:var(--cream-2);stroke-width:2.5}
.chart__cursor[hidden]{display:none}

.chart__tip{
  position:absolute;z-index:3;pointer-events:none;
  background:var(--navy);color:var(--cream);border-radius:8px;padding:7px 11px;
  box-shadow:0 8px 20px -8px rgba(42,50,62,.55);white-space:nowrap;
}
.chart__tip[hidden]{display:none}
.chart__tip b{display:block;font:700 14px var(--ar);color:var(--gold-lt);direction:ltr}
.chart__tip span{display:block;font:400 11px var(--ar);color:#9aa2ad;margin-top:1px}

.chart.is-empty svg{opacity:.2}
.chart__empty{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;
  font:400 13px var(--ar);color:var(--tobacco);text-align:center;padding:0 20px;
}
.chart__empty[hidden]{display:none} /* لازم: display في الكلاس يتغلّب على [hidden] */
.chart__alt{
  background:none;border:1px solid var(--sand-3);border-radius:var(--r-pill);
  padding:7px 18px;font:500 12px var(--ar);color:var(--wine);transition:.15s;
}
.chart__alt:hover{background:var(--wine);color:#fff;border-color:var(--wine)}
.chart__alt[hidden]{display:none}
.chart__axis{
  display:flex;justify-content:space-between;font:400 11px var(--lt);
  color:var(--tobacco);margin:8px 10px 0 52px;direction:ltr;min-height:16px;
}

/* مبدّل عيار الرسم */
.chart__karats{display:flex;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.chart__karats button{
  flex:1;background:none;border:1px solid var(--sand-3);border-radius:var(--r-sm);
  padding:8px 0;font:600 12px var(--lt);color:var(--slate);transition:.15s;
}
.chart__karats button.is-on{background:var(--navy);color:var(--gold-lt);border-color:var(--navy)}
.chart__karats button:not(.is-on):hover{border-color:var(--gold-md);color:var(--navy)}

/* الفترة المخصّصة */
.crange{margin-bottom:14px}
.crange[hidden]{display:none}
.crange__row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.crange__f{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px}
.crange__f span{font:500 12px var(--ar);color:var(--slate)}
.crange__f input{
  background:#fff;border:1px solid var(--sand-3);border-radius:var(--r-sm);
  padding:10px 12px;font:500 13px var(--lt);color:var(--navy);outline:none;
  width:100%;direction:ltr;
}
.crange__f input:focus{border-color:var(--gold-md)}
.crange__go{flex:none;padding:10px 22px;font-size:13px}
.crange__err{font:400 12px var(--ar);color:var(--wine);margin-top:7px;min-height:16px}

/* ملخّص الفترة */
.csum{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--sand-2);border-radius:var(--r-md);padding:10px 14px;margin-bottom:14px;
}
.csum[hidden]{display:none}
.csum__main{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.csum__l{font:400 12px var(--ar);color:var(--slate)}
.csum__abs{font:600 12px var(--lt);color:var(--slate);direction:ltr}
.csum__hl{display:flex;gap:16px;font:400 12px var(--ar);color:var(--tobacco)}
.csum__hl b{font:600 13px var(--lt);color:var(--navy);direction:ltr;display:inline-block}

/* ── جدول العيارات ──────────────────────────────────────── */
.ktable{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ktable__head,.krow{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center}
.ktable__head{padding:16px 26px;background:var(--sand-2);font:500 13px var(--ar);color:var(--gold-dk)}
.krow{padding:18px 26px;border-top:1px solid var(--line-2)}
.krow:hover{background:#fdfcf9}
.krow__id{display:flex;align-items:center;gap:12px}
.kbadge{
  width:34px;height:34px;border-radius:50%;background:var(--sand-2);flex:none;
  display:flex;align-items:center;justify-content:center;font:600 12px var(--lt);color:var(--gold-dk);
}
.kbadge--sm{width:28px;height:28px;font-size:10px;display:inline-flex;vertical-align:middle;margin-inline-end:4px}
.krow__ar{font:500 15px var(--ar)}
.krow__pure{font:400 11px var(--lt);letter-spacing:.1em;color:var(--gold-md)}
.krow__sell{font:700 20px var(--ar);color:var(--navy)}

/* ── جداول عامة ─────────────────────────────────────────── */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream-2)}
.card .tblwrap{border:0;border-radius:0;background:none;margin-inline:-4px}
.tbl{font:400 14px var(--ar);min-width:520px}
.tbl thead th{
  background:var(--sand-2);color:var(--gold-dk);font:500 13px var(--ar);
  padding:14px 18px;text-align:start;white-space:nowrap;
}
.card .tbl thead th{background:none;border-bottom:1px solid var(--line);padding:8px 10px}
.tbl tbody th{font:500 14px var(--ar);color:var(--navy);text-align:start;padding:14px 18px;white-space:nowrap}
.tbl tbody th small{display:block;font:400 11px var(--ar);color:var(--tobacco)}
.tbl tbody td{
  padding:14px 18px;font:600 15px var(--lt);color:var(--navy);
  direction:ltr;text-align:start;white-space:nowrap;
}
.tbl tbody tr+tr th,.tbl tbody tr+tr td{border-top:1px solid var(--line-2)}
.tbl__big{font-size:14px;color:var(--slate)}
.tbl--sm{min-width:420px;font-size:13px}
.tbl--sm tbody th{padding:9px 10px;font-size:12px}
.tbl--sm tbody td{padding:9px 10px;font-size:13px}
.tbl--sm thead th{padding:8px 10px;font-size:12px}
.tbl tbody tr.is-today th,.tbl tbody tr.is-today td{background:var(--sand-2)}
.tbl tbody tr.is-today th{color:var(--gold-dk)}

/* ── قوائم السبائك ──────────────────────────────────────── */
.list{display:flex;flex-direction:column}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line-2)}
.lrow:first-child{border-top:0}
.lrow__n{font:400 14px var(--ar);color:var(--slate)}
.lrow__n small{display:block;font:400 11px var(--ar);color:var(--tobacco)}
.lrow__v{font:600 15px var(--lt);color:var(--navy);direction:ltr;white-space:nowrap}
.lrow__v .riyal{height:.8em}

/* ── إحصاءات (الفضة) ────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.stat--muted{background:var(--sand-2);border-color:var(--sand-3)}
.stat__l{display:block;font:400 13px var(--ar);color:var(--tobacco)}
.stat__v{display:block;font:700 26px var(--ar);color:var(--navy);margin-top:6px;direction:ltr;text-align:start}
.stat__note{display:block;font:400 11px var(--ar);color:var(--tobacco);margin-top:4px}

/* ── الحاسبات ───────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field__label{font:500 13px var(--ar);color:var(--navy)}
.field input{
  background:#fff;border:1px solid var(--sand-3);border-radius:var(--r-sm);
  padding:13px 15px;font:500 15px var(--lt);color:var(--navy);outline:none;width:100%;
}
.field input:focus{border-color:var(--gold-md)}

.pills{display:flex;gap:6px}
.pills button{
  flex:1;text-align:center;border:1px solid var(--sand-3);background:#fff;color:var(--slate);
  border-radius:var(--r-sm);padding:13px 0;font:600 13px var(--lt);transition:.15s;
}
.pills button.is-on{background:var(--navy);color:var(--gold-lt);border-color:var(--navy)}
.pills--dark button{background:#1c222c;border-color:#4a5568;color:#cfd4db;padding:10px 0;font-size:12px}
.pills--dark button.is-on{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.pills--sm{flex:none;background:var(--cream-2);border-radius:var(--r-sm)}
.pills--sm button{flex:none;padding:8px 14px;font-size:12px}

.total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--navy);border-radius:var(--r-md);padding:20px 24px;margin-top:18px;
}
.total span{font:400 14px var(--ar);color:#aab1bc}
.total strong{font:700 28px var(--ar);color:var(--gold-lt);direction:ltr}
.total .riyal{height:.62em;vertical-align:.04em;margin-inline-start:4px}
.total--zakat.is-below{background:var(--sand-2)}
.total--zakat.is-below span{color:var(--slate)}
.total--zakat.is-below strong{color:var(--gold-dk)}

.zres{margin-top:18px;border-top:1px solid var(--line-2)}
.zres__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.zres__row span{font:400 13px var(--ar);color:var(--slate)}
.zres__row b{font:600 15px var(--lt);color:var(--navy);direction:ltr}

.steps{margin:12px 0 0;padding-inline-start:20px;font:400 14px/1.9 var(--ar);color:var(--slate)}
.steps li{margin-bottom:4px}
.steps b{color:var(--navy);font-weight:500}

/* ── السجل ──────────────────────────────────────────────── */
.hrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line-2)}
.hrow__d{font:400 13px var(--ar);color:var(--slate);width:84px;flex:none}
.hrow__bar{flex:1;height:8px;background:var(--sand-2);border-radius:5px;overflow:hidden}
.hrow__bar i{display:block;height:100%;border-radius:5px;background:var(--gold);transition:width .4s}
.hrow__bar i[data-dir="down"]{background:#d9a7ae}
.hrow__v{font:600 14px var(--lt);width:66px;text-align:start;direction:ltr}
.hrow__c{font:600 11px var(--lt);width:58px;text-align:start;direction:ltr}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo--wide{grid-template-columns:.8fr 1.2fr}
/* أبناء الشبكة افتراضهم min-width:auto فيتمدّدون لعرض الجدول الداخلي
   ويكسرون الصفحة أفقياً — نجبرهم على الانكماش ليتولّى .tblwrap التمرير. */
.duo>*,.hero>*,.stats>*{min-width:0}

/* ── تنبيه السعر ────────────────────────────────────────── */
.alert{
  background:var(--navy);border-radius:var(--r-lg);padding:34px 36px;margin-bottom:44px;
  display:grid;grid-template-columns:1fr 400px;gap:34px;align-items:center;
}
.alert h2{font:300 32px var(--ar);color:var(--cream);margin:12px 0 8px}
.alert p{font:400 14px/1.85 var(--ar);color:#aab1bc;max-width:440px}
.alert__perks{display:flex;gap:14px;margin-top:16px;font:400 12px var(--ar);color:#8b95a3;flex-wrap:wrap}
.alert__form{
  background:var(--navy-2);border:1px solid #3a4453;border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:12px;
}
.alert__form label,.alert__form .field__label{font:500 12px var(--ar);color:var(--gold-lt)}
.alert__form input{background:#1c222c;border:1px solid #4a5568;border-radius:var(--r-sm);padding:12px 14px;font:500 15px var(--lt);color:#fff}
.alert__form input::placeholder{color:#6b7482}
.alert__form input:focus{border-color:var(--gold)}
.alert__form input.is-bad{border-color:var(--dn-dk)}
.alert__form .riyal{height:.86em;vertical-align:-.04em}
/* الحاوية ltr ليستقرّ +966 على اليسار ويليه الرقم — كما يُكتب الجوال فعلاً */
.phone{display:flex;gap:8px;direction:ltr}
/* مفتاح الدولة حقل قابل للكتابة مع اقتراحات (datalist) */
.alert__form input.phone__cc{
  width:82px;flex:none;text-align:left;padding:12px 10px;
  font:500 13px var(--lt);color:#cfd4db;
}
.alert__form input.phone__cc:focus{border-color:var(--gold);color:#fff}
.phone input{flex:1;text-align:left}
.alert__msg{font:400 13px var(--ar);min-height:20px;color:#aab1bc}
.alert__msg.is-ok{color:var(--up-dk)}
.alert__msg.is-bad{color:var(--dn-dk)}

/* ── تأكيد تفعيل التنبيه ────────────────────────────────── */
.adone{
  background:var(--navy-2);border:1px solid #3a4453;border-radius:16px;
  padding:30px 24px 24px;text-align:center;
}
.adone[hidden]{display:none}

.adone__tick{
  width:58px;height:58px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(58,125,84,.22);border:1px solid rgba(143,214,168,.35);
  color:var(--up-dk);
}
.adone__t{font:700 20px var(--ar);color:var(--cream)}
.adone__s{font:400 13px/1.85 var(--ar);color:#9aa2ad;margin-top:8px}

.adone__box{
  background:#1c222c;border:1px solid #3a4453;border-radius:var(--r-md);
  padding:6px 16px;margin-top:20px;text-align:start;
}
.adone__row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid #2c3542;
}
.adone__row:first-child{border-top:0}
.adone__row span{font:400 13px var(--ar);color:#9aa2ad}
.adone__row b{font:600 14px var(--lt);color:var(--gold-lt)}
.adone__row .riyal{height:.72em;opacity:.9}
/* حالة «تحقّق الآن» — لا فرق مطلوب */
.adone__row.is-met b{color:var(--up-dk)}

.adone__again{
  width:100%;margin-top:18px;padding:13px;
  background:none;border:1px solid #4a5568;border-radius:10px;
  font:500 14px var(--ar);color:var(--cream);transition:.15s;
}
.adone__again:hover{background:#1c222c;border-color:var(--gold-md);color:var(--gold-lt)}

/* ── الأسئلة ────────────────────────────────────────────── */
.faq{padding-bottom:44px}
.faq__head{text-align:center;margin-bottom:22px}
.faq__head h2{font:300 30px var(--ar);margin-top:8px}
.faq__list{max-width:800px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font:500 15px var(--ar);color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq__sign{position:relative;width:14px;height:14px;flex:none}
.faq__sign::before,.faq__sign::after{
  content:'';position:absolute;background:#b7ac97;inset-block-start:6px;inset-inline-start:0;
  width:14px;height:2px;transition:transform .2s;
}
.faq__sign::after{transform:rotate(90deg)}
.faq details[open] .faq__sign::after{transform:rotate(0)}
.faq details p{font:400 14px/1.9 var(--ar);color:var(--slate);padding:0 4px 16px}

/* ── حالة الخطأ ─────────────────────────────────────────── */
.errbox{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 32px;text-align:center;margin:26px 0 44px}
.errbox__t{font:500 20px var(--ar);color:var(--navy)}
.errbox p{font:400 14px var(--ar);color:var(--slate);margin:8px 0 20px}

/* ── الدعوة + الفوتر ────────────────────────────────────── */
.cta{background:var(--navy)}
.cta__in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-block:30px}
.cta__t{font:300 24px var(--ar);color:var(--cream)}
.cta__s{font:400 13px var(--ar);color:#aab1bc;margin-top:4px}
.cta .btn{padding:14px 32px}

/* الفوتر — نفس بنية الفوتر المعتمد في دليل الهوية:
   كحلي · شعار أفقي صغير يمين · ثلاثة أعمدة · شريط سفلي بطرق الدفع.
   بلا زخارف إضافية — «الفخامة من الانضباط لا من الكثرة». */
.ftr{background:var(--navy);color:#cfd4db;padding-block:60px 26px}
.ftr__top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}

.ftr__brand{max-width:290px}
/* fit-content ضروري: بدونه يتمدّد الغلاف لكامل العرض فينزاح الشعار
   إلى يسار الكتلة بدل بدايتها (اليمين في RTL) */
.ftr__logo{display:flex;align-items:center;direction:ltr;gap:11px;width:fit-content}
.ftr__logo img{height:30px;width:auto}
.ftr__logo img+img{height:14px}
.ftr__brand p{font:400 14px/1.9 var(--ar);color:#9aa2ad;margin-top:16px}
.ftr__social{display:flex;gap:10px;margin-top:18px}
.ftr__social a{
  width:36px;height:36px;border:1px solid #3a4453;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#9aa2ad;transition:.15s;
}
.ftr__social a:hover{border-color:var(--gold-md);color:var(--gold-lt);background:rgba(201,174,126,.08)}

/* ── أزرار التطبيق ──────────────────────────────────────── */
.ftr__apps{display:flex;flex-direction:column;gap:9px;max-width:200px}
.appbtn{
  display:flex;align-items:center;gap:10px;
  border:1px solid #3a4453;border-radius:10px;padding:8px 13px;
  color:#cfd4db;transition:.15s;
}
a.appbtn:hover{border-color:var(--gold-md);background:rgba(201,174,126,.08);color:var(--gold-lt)}
/* «قريباً»: غير قابل للنقر وبنبرة أهدأ حتى لا يبدو رابطاً معطّلاً */
.appbtn.is-soon{cursor:default;opacity:.62;border-style:dashed}
.appbtn__ic{flex:none;display:flex;color:var(--gold-md)}
.appbtn.is-soon .appbtn__ic{color:#7f8996}
.appbtn__t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.appbtn__t small{font:400 10px var(--ar);color:#8b95a3}
.appbtn__t b{font:500 13px var(--lt);letter-spacing:.01em;white-space:nowrap}

.ftr__cols{display:flex;gap:56px}
.ftr__col{display:flex;flex-direction:column}
.ftr__h{font:500 14px var(--ar);color:var(--gold-lt);margin-bottom:8px}
.ftr__col a{font:400 14px/2.4 var(--ar);color:#cfd4db}
.ftr__col a:hover{color:var(--gold-lt)}

.ftr__aside{max-width:260px}
.ftr__aside p{font:400 13px/1.8 var(--ar);color:#9aa2ad;margin-top:6px}
.ftr__upd{color:#7f8996 !important;font-size:12px !important}

.ftr__bar{
  border-top:1px solid #3a4453;margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.ftr__copy{font:400 12px var(--lt);letter-spacing:.06em;color:#7f8996}
.ftr__pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay{
  display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 10px;
  border:1px solid var(--sand-3);border-radius:6px;background:#fff;
  font:600 10px var(--lt);letter-spacing:.02em;color:var(--navy);
}
.ftr__note{font:400 11px/1.9 var(--ar);color:#6f7a88;margin-top:18px;max-width:880px}

.tabbar{display:none}

/* ══ استجابة ══════════════════════════════════════════════ */

@media (max-width:1080px){
  :root{--pad:32px}
  .hero{grid-template-columns:1fr}
  .spot__price span{font-size:44px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .duo--wide{grid-template-columns:1fr}
}

@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .alert{grid-template-columns:1fr;padding:28px}
  .alert p{max-width:none}

  /* بطاقة مدمجة بدل صفوف الجدول */
  .ktable{border:0;background:none;border-radius:0;overflow:visible}
  .ktable__head{display:none}
  .krow{
    grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px;
    grid-template-areas:'id sell' 'chg chg';
    background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-md);
    margin-bottom:10px;
  }
  .krow:hover{background:var(--cream-2)}
  .krow__id{grid-area:id} .krow__sell{grid-area:sell;text-align:end;font-size:18px}
  .krow__chg{grid-area:chg;padding-inline-start:46px}
}

@media (max-width:760px){
  :root{--pad:18px;--hdr-h:57px}
  body{padding-bottom:66px}

  .hdr__top{padding-block:11px}
  .logo img{height:26px} .logo .logo__word{height:12px}
  .logo__tag{display:none}
  /* على الجوال نكتفي بشارة السوق في الترويسة — نصّ «آخر تحديث» يظهر داخل البطاقة */
  .live{display:none}
  .mkt--hdr{padding:5px 10px;font-size:11px}

  .sec__head--row{align-items:stretch}
  .pills--sm{width:100%}
  .pills--sm button{flex:1}

  /* ── الفوتر على الجوال: كل شيء موسّط وبعروض متساوية ── */
  .ftr{padding-block:40px 20px}
  .ftr__top{flex-direction:column;gap:32px;text-align:center}
  .ftr__brand,.ftr__aside,.ftr__apps{max-width:none}

  .ftr__logo{margin-inline:auto}
  .ftr__social{justify-content:center}

  /* ثلاثة أعمدة في ٣٥٤px تعني ١٠٠px لكل عمود — ضيّقة على العناوين
     العربية. عمودان أوسع، والثالث يمتد تحتهما. */
  .ftr__cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
  .ftr__col:nth-child(3){grid-column:1 / -1}
  .ftr__col a{line-height:2.1;font-size:13px}

  /* زرّا التطبيق بعرض واحد بدل عرضين مختلفين */
  .ftr__apps{display:grid;grid-template-columns:1fr;gap:10px;justify-items:stretch}
  .appbtn{justify-content:center;padding:10px 14px}
  .appbtn__t{text-align:start}

  .ftr__bar{margin-top:30px;flex-direction:column;align-items:center;gap:12px;text-align:center}
  .ftr__note{text-align:center}
  .script--lg{font-size:22px}
  .sec__head .script{font-size:15px}

  .pagehead{padding-top:24px}
  .pagehead h1{font-size:26px}
  .pagehead__sub{font-size:12px}
  .sec{margin-bottom:32px}
  .sec__head h2{font-size:21px}

  .hero{gap:14px;margin:18px 0 28px}
  .spot{padding:22px}
  .spot__price span{font-size:34px}
  .spot__hl{flex-direction:column;gap:4px}
  .chartcard{padding:16px}
  .chart svg,.chart{min-height:140px}
  .card__head{flex-direction:column;align-items:stretch;gap:10px}
  .card__head--tight{flex-direction:row;align-items:baseline}
  .segs{width:100%}
  .segs button{flex:1;padding:7px 0}

  .card{padding:18px}
  .calc{grid-template-columns:1fr}
  .total{padding:15px 18px}
  .total strong{font-size:20px}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:16px}
  .stat__v{font-size:20px}
  .hrow__d{width:64px;font-size:11px}
  .hrow__v{width:56px;font-size:12px}
  .hrow__c{width:0;overflow:hidden}

  .alert h2{font-size:24px}
  .alert__form{padding:18px}
  .faq__head h2{font-size:22px}
  .cta__in{flex-direction:column;text-align:center;padding-block:24px}
  .cta .btn{width:100%}
  .ftr__in{flex-direction:column;align-items:flex-start;gap:14px}

  .tabbar{
    display:flex;justify-content:space-around;position:fixed;inset-inline:0;bottom:0;z-index:30;
    background:var(--cream-2);border-top:1px solid var(--line);
    padding:10px 8px calc(10px + env(safe-area-inset-bottom));
    font:500 10px var(--ar);
  }
  .tabbar a{color:var(--tobacco);text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
  .tabbar i{width:7px;height:7px;border:1.4px solid currentColor;transform:rotate(45deg)}
  .tabbar .is-active{color:var(--wine)}
  .tabbar .is-active i{background:currentColor}
}