@import url('fonts/fonts.css');

/* ============================================================
   بطاقات الأسعار — طبقة هوية سنيح
   الرموز مطابقة لـ saniyh.com/assets/site.css (دليل الهوية)
   ============================================================ */
:root{
  /* ثوابت الهوية — لا تتغير */
  --gold:#C9952E;   /* ذهب سنيح   */
  --ink:#111214;    /* أسود سنيح  */
  --ivory:#F8F5EE;  /* عاجي دافئ  */
  --navy:#071827;   /* كحلي مؤسسي */
  --gray:#6E7074;   /* رمادي مساند */

  --bg:var(--ivory);
  --fg:var(--ink);
  --muted:rgba(17,18,20,.68);
  --surface:#fff;
  --line:rgba(17,18,20,.14);
  --line-gold:rgba(201,149,46,.55);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  --radius:10px;
}

* { box-sizing: border-box; }

/* 🔴 كان "Segoe UI" أولاً فلا تُصيَّر العربية بخط الهوية إطلاقاً — ودليل الهوية ص19 يفرض Noto Sans Arabic */
body { margin:0; font-family:"Noto Sans Arabic","Inter",system-ui,Tahoma,Arial,sans-serif;
       direction:rtl; background:var(--bg); color:var(--fg); }

.wrap { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s12); }
.card-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
            padding:var(--s6); margin-bottom:20px; }
h1 { font-size: 20px; margin: 0 0 var(--s4); }
h2 { font-size: 16px; margin: 0 0 var(--s3); }
label { display:block; font-size:13px; color:#5F6165; margin-bottom:var(--s1); }
/* 🔴 `search` كان غائباً عن هذه القائمة، وهو نوع حقل البحث الوحيد في التطبيق ⇒
   أكثر حقلٍ استعمالاً يُصيَّر Arial 13px بحشو المتصفّح (147×22) بدل خط الهوية (182×54). */
input[type=text], input[type=email], input[type=password], input[type=file],
input[type=search], input[type=number], select {
  width:100%; padding:10px 12px; border:1px solid #D8D5CF; border-radius:var(--s2);
  font-size:14px; margin-bottom:14px; background:#fff; color:var(--fg);
  font-family:inherit;
}

/* إتاحة: مؤشر تركيز ظاهر على كل عنصر تفاعلي (WCAG 2.4.7) — لم يكن موجوداً.
   🔑 الحلقة سوداء لا ذهبية: الذهب على الأبيض = 2.68:1 ويرسب في WCAG 1.4.11 (≥3:1).
   الأسود يحمل الامتثال (17:1) والذهب هالةٌ للعلامة فقط. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--s1);
  box-shadow:0 0 0 5px rgba(201,149,46,.32);
}

/* 🔑 الحلقة السوداء تعمى فوق `.topbar` (خلفيتها --ink نفسه ⇒ 1:1). تُعكَس على
   الداكن وحده: أبيض على الحبر = 17:1. القرار لم يُعكَس — الذهب يبقى هالة. */
.topbar :where(a, button, [tabindex]):focus-visible{ outline-color:#fff; }

/* الشريط لاصق: بلا هذا يُمرَّر العنصر المركَّز إلى تحته فيختفي (WCAG 2.2 · 2.4.11) */
html{ scroll-padding-block-start:72px; }
@media (max-width:640px){ html{ scroll-padding-block-start:104px; } }

button, .btn { background:var(--ink); color:#fff; border:none; border-radius:var(--s2);
  padding:10px 18px; font-size:14px; font-family:inherit; cursor:pointer;
  display:inline-block; text-decoration:none; }
button:hover, .btn:hover { background:#26282c; }
/* الذهب على الأسود = 6.6:1 ⇒ AA. لا تضع نصّاً صغيراً ذهبياً على العاجي (2.5:1) */
.btn-accent { background:var(--gold); color:var(--ink); font-weight:600; }
.btn-accent:hover { background:#dba93f; }

/* إجراءٌ ثانوي أو مدمّر: يبقى مقروءاً ومطابقاً لـAA، ولا ينافس الفعل الأساسي بصرياً.
   (أزرار «أزل» السوداء الضخمة كانت أعلى صوتٍ في شاشة السلّة وهي أقلّ ما يُقصد فيها.) */
button.btn-quiet, .btn-quiet { background:transparent; color:var(--ink);
  border:1px solid rgba(17,18,20,.28); padding:6px 12px; font-size:13px; font-weight:400; }
button.btn-quiet:hover, .btn-quiet:hover { background:rgba(17,18,20,.06); border-color:rgba(17,18,20,.5); }

/* نصٌّ لقارئ الشاشة وحده — لا يُخفى بـdisplay:none وإلّا سقط من شجرة الإتاحة */
/* رابط التخطّي: مخفيّ حتى يُركَّز عليه — أول ما يبلغه مستخدم لوحة المفاتيح */
.skip{ position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 var(--s2) var(--s2); }
.skip:focus{ inset-inline-start:0; }
main:focus{ outline:none; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

table { width:100%; border-collapse:collapse; margin: var(--s3) 0; font-size:13px; }
th, td { text-align:right; padding:var(--s2) 10px; border-bottom:1px solid #EEECE8; }
th { color:var(--gray); font-weight:600; }
.err { background:#FDECEC; color:#B3261E; border:1px solid #F4C7C3; border-radius:var(--s2); padding:10px 14px; margin-bottom:var(--s4); }
.ok { background:#EAF7EE; color:#1E7A34; border:1px solid #BFE6C9; border-radius:var(--s2); padding:10px 14px; margin-bottom:var(--s4); }
.warn { background:#FFF6E5; color:#8A5A00; border:1px solid #F3DFA4; border-radius:var(--s2); padding:10px 14px; margin-bottom:var(--s4); }
/* هدفٌ بـ13px في المسار الأساسي للتطبيق (٥٠ في الصفحة) — يمرّ 2.5.8 باستثناء
   التباعد، لكن دقّة الإصابة الفعلية تستحق الرفع. */
table input[type=checkbox]{ width:18px; height:18px; }

/* ── حاوية تمرير الجدول — أُضيف 29/08/2026 ──────────────────────────────────
   🔴 **`overflow-x:auto` وحدها لا تمنع الجدولَ من مدّ المستند في RTL.** قِيس على
      جوّالٍ 390: الجدول 468 داخل حاويةٍ 332 **محتوىً صحيحاً**، ومع ذلك
      `documentElement.scrollWidth = 436` والصفحة تُحمَّل ممرَّرةً 45 بكسل —
      فتتأرجح تحت الإصبع في كل تمرير.
   🔑 وجُرّبت ثمانية علاجاتٍ في المتصفّح: `max-width:100%` و`overflow-x:hidden`
      و`overflow-x:clip` على الجسم و`min-width:0` على الآباء **كلّها لم تُجدِ**.
      نجح اثنان: `contain:paint`، وإلغاءُ `min-width` عن عمود الاسم — والثاني
      يُفقد الاسمَ قابليّةَ القراءة، وهو سببُ وجود القاعدة أصلاً.
   🔑 و`contain:paint` مقصورٌ على هذه الحاوية: يعزل طلاءها ولا يمسّ غيرها،
      ومحتواها صفوفُ جدولٍ وروابطُ نصّ — لا شيء يحتاج الخروج منها.
   ⚠️ **ولا يُلغي تمرير الجدول نفسه** — مُتحقَّقٌ بالقياس بعد الإصلاح. */
.tablescroll{ overflow-x:auto; contain:paint; }


/* ── هدفُ اللمس على الجوّال — أُضيف 29/08/2026 ────────────────────────────────
   🔴 **مربّعات الاختيار كانت 18×18 في الجداول و13×13 في النماذج** على جوّالٍ
      حقيقيّ — دون حدّ WCAG 2.5.8 (24×24)، **وهي الفعل الأساسيّ في المنصّة**:
      اختيار الأصناف للطباعة. والتاجر يقف في معرضه بإصبعٍ لا بفأرة.
   🔑 **والشرط `pointer:coarse` لا عرضُ الشاشة**: الحكم على أداة الإدخال لا على
      المقاس — لوحيٌّ عريضٌ يُلمس، وشاشةٌ ضيّقةٌ بفأرة لا تحتاج تكبيراً. وتوسيعٌ
      بعرض الشاشة كان سيضخّم المربّعات على نافذةٍ مصغَّرة في سطح المكتب.
   🔑 والمساحة المضغوطة أوسع من المربّع نفسه: `min-height` على الخليّة والوسم
      يجعل الإصبع يصيب ولو أخطأ المركز بقليل. */
@media (pointer: coarse) {
  input[type=checkbox], input[type=radio],
  table input[type=checkbox]{ width:24px; height:24px; }

  /* الخليّة والوسم يتّسعان فيصير المضغوط أكبر من المربّع */
  table td:first-child{ min-height:44px; }
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]){ display:flex; align-items:center; gap:10px; min-height:44px; }
}
.muted { color:#5F6165; font-size:13px; }   /* 5.6:1 — كان 6E7074 عند 4.59:1 بهامش 2% */
.row { display:flex; gap:var(--s3); flex-wrap:wrap; align-items:end; }
.row > div { flex:1; min-width:160px; }
.topbar { position:sticky; top:0; background:var(--ink); color:#fff; padding:10px var(--s4);
  display:flex; gap:var(--s3); align-items:center; z-index:10; }
.topbar a, .topbar button, .topbar span { color:#fff; }
/* الشعار في الشريط: خلفية داكنة ⇒ النسخة البيضاء (دليل الهوية ص14) */
.topbar .brand { width:104px; height:34px; background:url('brand/saniyh_wordmark_mono_white.png') center/contain no-repeat; flex:none; }
a { color:var(--ink); }
.badge { display:inline-block; background:#EEECE8; border-radius:999px; padding:2px 10px; font-size:12px; }
.summary { display:flex; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4); }
.summary .stat { background:#FAFAF8; border:1px solid #EEECE8; border-radius:var(--s2); padding:var(--s3) 18px; }
.summary .stat b { display:block; font-size:22px; }
.topnav { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s4); }

/* ============================================================
   شاشات المصادقة — أول ما يراه العميل
   🔴🔴 لا تستهدفها بالنفي (`:not(:has(.topbar))`): لا صفحة في هذا التطبيق
   تحمل .topbar أصلاً — كلها .topnav — فانطبقت القاعدة على كل الصفحات
   وحقنت الشعار في كل .card-box. الاستهداف صريح بـ body.auth.
   ============================================================ */
body.auth .card-box{
  border-top:3px solid var(--gold);
  padding:var(--s8) var(--s6) var(--s6);
  box-shadow:0 1px 2px rgba(17,18,20,.04), 0 8px 24px rgba(17,18,20,.06);
}

/* الشعار: خلفية فاتحة ⇒ النسخة السوداء (دليل الهوية ص14). الظبي غير مستعمل هنا إطلاقاً */
body.auth .card-box::before{
  content:""; display:block; width:132px; height:63px; margin:0 auto var(--s6);
  background:url('brand/saniyh_wordmark_mono_black.png') center/contain no-repeat;
}

body.auth .card-box h1{
  font-size:17px; font-weight:600; text-align:center; color:var(--muted);
  margin:0 0 var(--s6);
}
body.auth .card-box button{
  width:100%; padding:12px; font-size:15px; font-weight:600; margin-top:var(--s2);
  background:var(--gold); color:var(--ink);   /* 6.6:1 ⇒ AA */
}
body.auth .card-box button:hover{ background:#dba93f; }

/* حالة الإرسال: زرٌّ بطيء بلا إشارة يُنقَر مرّتين — و«أضف كل النتائج» مرّتين
   تعني عملاً مزدوجاً على ألف صنف. التعطيل بصريّ ووظيفيّ معاً. */
/* 🔴 الحالة الكثيفة: اسمٌ من ١٤٠ محرفاً عند 390px يصير عموداً بعرض 60px وارتفاع 605px —
   شريطٌ رأسيّ من الحروف بطول الشاشة. تحديد عرض العمود يمنع انهيار التخطيط،
   و`overflow-wrap:anywhere` يمنع رمزاً لاتينياً طويلاً من دفع الجدول. */
table td, table th { overflow-wrap:anywhere; }
@media (max-width:640px){
  table { font-size:12px; }
  /* 🔑 الحشو يأكل 82px من 390: حاوية الجدول كانت 308px فقط. تقليصُه يعيد
     ~40px إلى المحتوى — وهو أثمن ما في الشاشة الضيّقة. */
  .wrap { padding-inline:var(--s3); }
  .card-box { padding:var(--s4); }
  /* 🔴 كانت `nth-child(3)` — أي **عمود الرمز** لا الاسم. أُضيف عمود الصورة
     لاحقاً فأزاح الاسم إلى الرابع، **والمُحدِّد الموضعيّ ظلّ يشير إلى الخطأ
     بصمت**: لا خطأ ولا تحذير، والاسم ينهار عموداً من حرفٍ في كل سطر على
     الجوّال. الصنف الثابت يجعل إدراج عمودٍ جديد غير قادرٍ على كسره. */
  table th.col-name, table td.col-name { min-width:22ch; }
  /* والرمز يُخفى: رقمٌ طويل يتقطّع خانةً في كل سطر ويسرق العرض من الاسم —
     وهو ما يقرأه الموظّف فعلاً. (نفس قرار جدول السلّة، فيتّسق الاثنان.) */
  table th.col-sku, table td.col-sku { display:none; }
  /* والعلامة والفئة كذلك: عمودان ضيّقان ينهاران حرفاً في كل سطر، وهما
     **مرشِّحان في أعلى الصفحة أصلاً**. الصفّ على الجوّال يحتاج الاسم والسعر
     والإجراء — لا ثمانية أعمدة يتنازعها 390 بكسلاً. */
  table th.col-brand, table td.col-brand,
  table th.col-cat,   table td.col-cat   { display:none; }
  /* الشريط يلتفّ سطرين على الجوّال ويقتطع ١٠٪ من الشاشة وهو لاصق */
  .topbar > span:nth-child(2) { display:none; }
}

button[aria-busy="true"]{ opacity:.65; cursor:progress; }
button[disabled]{ opacity:.55; cursor:not-allowed; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* شاشة السلّة على عرضٍ ضيّق: الرمز رقمٌ طويل يتقطّع خانةً في كل سطر ويسرق العرض
   من الاسم — وهو ما يقرأه الموظّف فعلاً. نُخفيه دون العبث ببقية الجداول. */
.basket-table td, .basket-table th { vertical-align:middle; }
.basket-table .btn-quiet { white-space:nowrap; }
@media (max-width:640px){
  .basket-table .col-sku { display:none; }
}


/* `hidden` سمةٌ يجب أن تُخفي فعلاً — و`display:inline-block` على .badge كانت تتغلّب
   عليها فتظهر شارةٌ فارغة كأنها شرطة في الشريط العلوي. */
[hidden] { display:none !important; }


/* الشارة داخل الشريط الداكن ترث لونه الأبيض على خلفيةٍ فاتحة ⇒ رقمٌ غير مرئيّ.
   نُثبّت لونها الداكن صراحةً (‎#111214 على #EEECE8 ≈ 16:1). */
.topbar .badge { color:var(--ink); font-weight:600; }

/* ══════════════════════════════════════════════════════════════════════════
   الصفحة التعريفية — إعادة بناء 2026-08-28
   الرموز هي رموز الهوية القائمة وحدها. اللون الوحيد "الجديد" هو `--navy`
   الذي كان معرَّفاً في `:root` منذ البداية و**غير مستعمَلٍ ولا مرّة** — فهذه
   إفادةٌ منه لا إضافةٌ إليه.
   ══════════════════════════════════════════════════════════════════════════ */

body.landing{
  /* سلّم عرضٍ خاصّ بالصفحة التعريفية: اللوحة (Operate) تبقى على مقاسها الهادئ.
     الوزن 800 يأتي من ملفّ الخطّ المتغيّر نفسه المحمَّل أصلاً ⇒ صفر تحميل. */
  --d1: clamp(29px, 5.8vw, 56px);
  --d2: clamp(21px, 3.2vw, 30px);
  --d3: 19px;
}

/* ── الشريط العلويّ على الصفحة العامة ──────────────────────────────────────
   خيطٌ ذهبيّ أسفل الشريط: أرخص إشارةٍ إلى أن الصفحة رُسمت لا رُكِّبت. */
body.landing .topbar{ border-bottom:1px solid rgba(201,149,46,.45); }
body.landing .topbar a{ text-decoration:none; opacity:.86; }
body.landing .topbar a:hover{ opacity:1; text-decoration:underline; }

/* ── البطل ────────────────────────────────────────────────────────────────
   عمودان: النصّ يبدأ (يمين في RTL) والبطاقة الحيّة تقابله. تنهار إلى عمودٍ
   واحد على الجوّال، والبطاقة **فوق** النصّ هناك: الدليل قبل الدعوى. */
.hero{
  display:grid; gap:var(--s8) var(--s12);
  grid-template-columns:1fr; align-items:center;
  padding:var(--s8) 0 var(--s12);
  border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .hero{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
  .hero .hero-copy{ order:1 } .hero .hero-proof{ order:2 }
}

.hero h1{
  font-size:var(--d1); font-weight:800; line-height:1.24;
  letter-spacing:-.015em;           /* العربية لا تُشدّ كاللاتينية — شدٌّ خفيف فقط */
  margin:0 0 var(--s4); max-width:17ch;
}
/* الكلمة التي يبيعها المنتج: الذهب على العاجيّ يرسب في تباين النصّ الصغير،
   لكن هذه 56px بوزن 800 ⇒ «نصٌّ كبير» في WCAG (≥3:1) وقياسها 2.53:1 —
   فلا تُترك لوناً. الحلّ: الحبر يحمل القراءة، والذهب خطٌّ تحتها يحمل العلامة. */
.hero h1 .mark{
  position:relative; white-space:nowrap;
  box-shadow:inset 0 -.14em 0 rgba(201,149,46,.55);
}
.hero .lead{
  font-size:17px; line-height:1.95; color:var(--muted);
  max-width:52ch; margin:0 0 var(--s6);
}
.hero-cta{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin:0; }
.hero-cta .btn{ padding:13px 26px; font-size:15px; }

/* ── المسرح: بطاقةٌ حقيقية من محرّك الطباعة ────────────────────────────────
   🔑 سطحٌ أغمق قليلاً من العاجيّ تحت البطاقة البيضاء: بلا تباينٍ خلفها تذوب
      حافّتها في الصفحة — والحافّة هي ما يُرى على الرفّ فعلاً. */
.stage{
  background:linear-gradient(180deg,#EFEBE2,#E4DFD4);
  border:1px solid rgba(17,18,20,.10);
  border-radius:14px;
  padding:var(--s8) var(--s6) var(--s6);
  display:grid; justify-items:center; gap:var(--s4);
}
/* لحظة الحركة الوحيدة في الصفحة: البطاقة تنهض وتتّضح مرّةً عند الفتح.
   (قاعدة prefers-reduced-motion العامة أعلاه تُسقطها إلى حالتها النهائية.) */
@keyframes card-rise{
  from{ opacity:0; transform:translateY(16px) scale(.985); filter:blur(7px); }
  to  { opacity:1; transform:none; filter:none; }
}
.stage-frame{
  position:relative; flex:none;
  background:#fff; border-radius:3px;
  box-shadow:0 1px 2px rgba(17,18,20,.12), 0 22px 44px -16px rgba(17,18,20,.34);
  /* 🔑 لحظة الحركة الوحيدة في الصفحة. ولا انتقال على العرض/الارتفاع عند تبديل
     المقاس: تحريك خصائص التخطيط يُربك الرسم، والإطار يُعيد تحميل محتواه في
     أثنائه فيبدو الانتقال كعطب لا كحركة. التبديل قاطعٌ وصادق. */
  animation:card-rise .85s cubic-bezier(.16,1,.3,1) both;
}
/* الإطار بمقاس البطاقة الطبيعي (مم ⇐ بكسل) ثم يُصغَّر بـ`scale` — فيبقى ما
   يُرسم داخله هو مخرَج الطباعة حرفياً، ولا يُعاد تخطيطه ليناسب الشاشة. */
.stage-frame iframe{
  position:absolute; top:0; right:0; border:0; display:block;
  transform-origin:top right;
}
.stage-cap{
  font-size:12.5px; color:#5F6165; text-align:center; margin:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
}
.stage-cap b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* أزرار المقاس: نصٌّ صريح لا مستطيلاتٌ تدّعي النسبة — المقاسات الأربعة الورقية
   تتشارك نسبة √2 فتخرج أشكالها متطابقة، ورسمُها يوهم بفرقٍ لا وجود له. */
.size-chips{
  display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center;
  margin:0; padding:0; list-style:none;
}
.size-chip{
  display:inline-flex; align-items:baseline; gap:6px;
  background:rgba(255,255,255,.72); color:var(--ink); text-decoration:none;
  border:1px solid rgba(17,18,20,.14); border-radius:999px;
  padding:6px 14px; font-size:13px; font-family:inherit; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.size-chip:hover{ background:#fff; border-color:rgba(17,18,20,.34); }
.size-chip .mm{ font-size:11.5px; color:#5F6165; font-variant-numeric:tabular-nums; }
.size-chip[aria-pressed="true"]{
  background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600;
}
.size-chip[aria-pressed="true"] .mm{ color:rgba(255,255,255,.72); }

/* ── ما يفعله المنتج: قائمةٌ لا صناديق ────────────────────────────────────
   أربعة صناديق بيضاء متطابقة تجعل كل ادّعاءٍ بوزن جاره، فلا شيء يبرز.
   الفصل هنا بالمسافة والوزن: تلاصقٌ داخل البند وسعةٌ بينه وبين ما يليه. */
.features{
  display:grid; grid-template-columns:1fr; gap:var(--s8);
  margin:var(--s12) 0; padding:0; list-style:none;
}
@media (min-width:760px){ .features{ grid-template-columns:1fr 1fr; gap:var(--s8) var(--s12); } }
.features h3{
  font-size:var(--d3); font-weight:700; margin:0 0 var(--s2); line-height:1.5;
  padding-inline-start:14px; border-inline-start:1px solid var(--line-gold);
}
.features p{ margin:0; color:var(--muted); line-height:1.95; max-width:46ch;
             padding-inline-start:15px; }

.sec-head{ font-size:var(--d2); font-weight:800; letter-spacing:-.01em;
           line-height:1.35; margin:0 0 var(--s3); }

/* ── الباقات ──────────────────────────────────────────────────────────────
   ثلاثة صناديق متساوية تترك التاجر يقارن بلا توصية. واحدةٌ تُرفَع. */
.plans{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--s4); margin:var(--s6) 0; align-items:stretch;
}
body.landing .plan{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s6); margin:0;
}
body.landing .plan h3{ font-size:15px; font-weight:600; color:#5F6165;
                       letter-spacing:.02em; margin:0 0 var(--s3); }
body.landing .plan .price{
  font-size:38px; font-weight:800; line-height:1.1; margin:0 0 4px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
body.landing .plan .price strong{ color:inherit; font-weight:inherit; }
body.landing .plan .price .per{ font-size:14px; font-weight:400; color:#5F6165;
                                letter-spacing:0; }
body.landing .plan ul{ margin:var(--s4) 0 var(--s6); padding:0; list-style:none;
                       color:var(--muted); line-height:2.1; font-size:14px; }
body.landing .plan ul li{ padding-inline-start:18px; position:relative; }
/* علامةٌ مرسومة لا محرف يونيكود: خطّان بسمكٍ واحد، يرثان لون النصّ */
body.landing .plan ul li::before{
  content:""; position:absolute; inset-inline-start:0; top:.72em;
  width:8px; height:4px; border:solid currentColor; border-width:0 0 1.5px 1.5px;
  transform:rotate(-45deg); opacity:.55;
}
body.landing .plan .plan-foot{ margin:auto 0 0; }
body.landing .plan .plan-foot .btn{ width:100%; text-align:center; }

/* الباقة الموصى بها: سطحٌ حبريّ يرفعها فوق جارتيها بلا تكرار كل عناصرها */
body.landing .plan.is-pick{
  background:var(--ink); color:#fff; border-color:var(--ink);
  box-shadow:0 2px 4px rgba(17,18,20,.10), 0 20px 40px -18px rgba(17,18,20,.45);
}
body.landing .plan.is-pick h3{ color:var(--gold); }
body.landing .plan.is-pick .price .per,
body.landing .plan.is-pick ul,
body.landing .plan.is-pick .muted{ color:rgba(255,255,255,.76); }
body.landing .plan.is-pick a{ color:#fff; }
body.landing .plan.is-pick .btn{ background:var(--gold); color:var(--ink); font-weight:600; }
body.landing .plan.is-pick .btn:hover{ background:#dba93f; }

.plan-note{ font-size:13px; color:#5F6165; margin:0 0 var(--s4); }

/* ── القمّة الكحلية: كيف تبدأ ──────────────────────────────────────────────
   أغمق سطحٍ في الصفحة وأعلى نقطة في التمرير. `--navy` أخيراً في عمله. */
.steps{
  background:var(--navy); color:#fff; border-radius:14px;
  padding:var(--s12) var(--s8); margin:var(--s12) 0;
}
.steps h2{ font-size:var(--d2); font-weight:800; color:#fff; margin:0 0 var(--s8);
           letter-spacing:-.01em; }
.steps ol{
  display:grid; grid-template-columns:1fr; gap:var(--s6);
  margin:0 0 var(--s8); padding:0; list-style:none; counter-reset:step;
}
@media (min-width:760px){ .steps ol{ grid-template-columns:repeat(3,1fr); gap:var(--s8); } }
.steps li{ counter-increment:step; padding-top:var(--s4);
           border-top:1px solid rgba(201,149,46,.42); }
/* الترقيم هنا معلومةٌ لا زينة: الخطوات متتابعة ولا تصحّ منكوسة */
.steps li::before{
  content:counter(step); display:block; font-size:13px; font-weight:700;
  color:var(--gold); margin-bottom:var(--s2); font-variant-numeric:tabular-nums;
}
.steps li p{ margin:0; line-height:1.95; color:rgba(255,255,255,.82); font-size:15px; }
.steps .btn{ background:var(--gold); color:var(--ink); font-weight:600;
             padding:13px 26px; font-size:15px; }
.steps .btn:hover{ background:#dba93f; }
.steps :where(a,button):focus-visible{ outline-color:#fff; }

.foot{ margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--line); }

@media (max-width:640px){
  .stage{ padding:var(--s6) var(--s3) var(--s4); }
  .steps{ padding:var(--s8) var(--s4); border-radius:10px; }
  .hero{ padding:var(--s6) 0 var(--s8); }
}

.pending { border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s3); }
.pending:first-of-type { border-top:0; padding-top:0; margin-top:0; }

/* ── لوحة المعاينة الحيّة (templates.php) — 2026-08-27 ─────────────────────
   عمودان على الشاشة الواسعة، وعمودٌ واحد على الجوّال بلا نقاط انكسارٍ يدوية. */
.tpl-layout {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:var(--s4);
  align-items:start;
}

.preview-pane {
  position:sticky; top:var(--s4);          /* تبقى مرئيةً والمستخدم ينزل في الخيارات */
  background:var(--surface);
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  padding:var(--s4);
}
.preview-head { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.preview-head h2 { margin:0; font-size:16px; }

.preview-controls {
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  margin:var(--s3) 0;
}
.preview-controls label { margin:0; color:var(--gray); font-size:13px; font-weight:600; }
.preview-controls select { width:auto; min-width:130px; margin:0; }

/* 🔑 خلفيةٌ رماديةٌ خفيفة تحت البطاقة: البطاقة بيضاء، وبلا تباينٍ خلفها تذوب في
   الصفحة فلا تُدرَك حوافّها — والحافّة هي ما يراه التاجر على الرفّ. */
/* 🔴 كان الإطار مقيَّداً بـ`320px` ارتفاعاً و`420px` عرضاً بينما البطاقة تُرسم
   بمقاسها الورقيّ الحقيقي ⇒ **خمسةٌ من ستّة مقاسات مقصوصة** (A4 يفقد 803 بكسل).
   الآن يبقى الإطار بأبعاد الورق ويُصغَّر بـ`transform` من `card-preview.js`،
   فما بداخله يظلّ مخرَجَ الطباعة حرفياً. */
.preview-stage {
  position:relative; overflow:hidden;
  background:#EDEAE3;
  border-radius:var(--s2);
  min-height:120px;
}
/* التصغير لا يُنقص الحجم في التخطيط ⇒ ارتفاع المسرح يُضبَط في JS، والإطار
   يُوضَع مطلقاً ويُتوسَّط بـ`margin-inline:auto` بين `left:0` و`right:0`. */
/* 🔑 التوسيط يُحسب في JS لا بـ`margin:auto`: العنصر يبقى بعرضه التخطيطيّ الكامل
   (794px لـA4) داخل مسرحٍ أضيق، فالهوامش التلقائية تسقط إلى صفر ويلتصق بالحافّة.
   و`translateX(-50%)` لا يصلح أيضاً — نسبتُه تُحسب من العرض **قبل** التصغير. */
.preview-stage iframe {
  position:absolute; top:12px;
  transform-origin:top left;
  border:1px solid var(--line);
  border-radius:4px;
  background:#fff;
  box-shadow:0 1px 6px rgba(17,18,20,.10);
}
.preview-note { margin:var(--s3) 0 0; font-size:12px; line-height:1.7; }

@media (max-width:640px) {
  .preview-pane { position:static; }        /* اللصق على شاشةٍ قصيرة يحجب المحتوى */
}

/* ── معاينة الصنف من الجدول (products.php) — 2026-08-27 ─────────────────── */
.row-actions { white-space:nowrap; display:flex; gap:var(--s2); align-items:center; }
.row-actions .btn-quiet { padding:4px 10px; font-size:12px; }

/* السعر: الأصلي مشطوباً ثم المعروض، وشارةٌ تقول «عرض» وأجله */
.price-was { font-size:12px; margin-inline-end:6px; }
.badge-sale { background:var(--gold); color:var(--ink); font-weight:600; }

.card-dialog {
  border:1px solid var(--line-gold); border-radius:var(--radius);
  padding:var(--s4); max-width:520px; width:92vw; background:var(--surface);
}
.card-dialog::backdrop { background:rgba(17,18,20,.45); }
.card-dialog .preview-head { justify-content:space-between; }


/* عمود السعر سطرٌ واحد: اللفّ كان يفاوت ارتفاعات الصفوف فيصعب مسح العمود بالعين */
.price-cell { white-space:nowrap; }
.sale-until { font-size:11px; margin-inline-start:4px; }

/* 🔑 على الشاشة الضيّقة يُفكّ ما يفرض عرضاً: `nowrap` على السعر وصفٌّ واحد
   للإجراءات أضافا ~300 بكسل إلى عرض الجدول، فصار التمرير الأفقي أطول ممّا كان.
   الجدول يبقى قابلاً للتمرير داخل حاويته، لكن لا نُطيله بلا داعٍ. */
@media (max-width:640px) {
  /* 🔑 كان `normal` ليضيّق جدولاً من ثمانية أعمدة على 390 بكسلاً — **وقد زال
     سببه**: الرمز والعلامة والفئة تُخفى الآن، فاتّسع المجال. والسعر رقمٌ لا
     يُقرأ مقطوعاً («2,199.» ثم «00» في سطرٍ تالٍ) وشارة «عرض» لا تُقسَم حرفين. */
  .price-cell { white-space:nowrap; }
  .badge-sale, .price-was { white-space:nowrap; }
  /* 🔑 الشارة تنزل سطراً على الجوّال: كانت تنافس السعر على السطر نفسه فتوسّع
     العمود إلى 186px — أعرضَ من عمود الاسم. والسعر هو ما يُقرأ، والشارة تعليقٌ
     عليه. (وعلى سطح المكتب تبقى بجواره — المجال يتّسع لهما.) */
  .badge-sale { display:block; width:max-content; margin-top:4px; }
  .row-actions { flex-direction:column; align-items:stretch; gap:4px; }
  .row-actions .btn-quiet { width:100%; }
  .sale-until { display:block; margin:2px 0 0; }
}

/* ── شريط سلّة الطباعة الثابت (products.php) — 2026-08-27 ────────────────── */
.bulk-bar {
  position:sticky; bottom:0; z-index:2;
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s3); padding:var(--s3) var(--s4);
  background:var(--surface);
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  box-shadow:0 -2px 10px rgba(17,18,20,.06);
}
/* 🔑 لا يختفي حين تفرغ السلّة — يبقى ليقول أين تذهب البطاقات، ويخفت فقط */
.bulk-bar.is-empty { border-color:var(--line); opacity:.72; }
.bulk-bar.is-empty .btn-accent { pointer-events:none; opacity:.5; }
.bulk-count strong { font-size:18px; color:var(--gold); margin-inline-end:4px; }

/* ── الحالات الفارغة ─────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:var(--s8) var(--s4); }
.empty-state .empty-title { font-size:18px; font-weight:600; margin:0 0 var(--s2); }
.empty-state p { max-width:52ch; margin-inline:auto; line-height:1.9; }
.empty-state .btn { margin:var(--s3) var(--s1) 0; }

/* ── صور الأصناف — 2026-08-27 ────────────────────────────────────────────── */
.thumb {
  width:40px; height:40px; object-fit:cover;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  display:block;
}
.thumb-lg { width:96px; height:96px; }
/* 🔑 مربّعٌ خافتٌ بدل الفراغ: عمودٌ يختفي ويظهر يجعل ارتفاع الصفوف يرقص */
.thumb-empty { background:#EDEAE3; border-style:dashed; }
.thumb-cell { width:52px; }

/* ── الدفع داخل المنصّة — 2026-08-27 ─────────────────────────────────────── */
.pay-now {
  background:#F6F2E8; border:1px solid var(--line-gold);
  border-radius:var(--radius); padding:var(--s3) var(--s4); margin:var(--s3) 0;
}
.pay-now button { width:100%; }

/* ══════════════════════════════════════════════════════════════════════════
   أسطح المتصفّح — 2026-08-28
   ما لا نرسمه يبقى بافتراضات المتصفّح ولا ينتمي إلى أي هوية: التحديد، ومؤشّر
   الكتابة، وشريط التمرير، وإزاحة خطّ الرابط. تلوينها من الرموز نفسها.
   ══════════════════════════════════════════════════════════════════════════ */
::selection{ background:rgba(201,149,46,.34); color:var(--ink); }
/* 🔴 مربّعات الاختيار كانت **بنفسجية** — لون المتصفّح الافتراضي، غريبٌ تماماً عن
   هوية الذهب والحبر، ويظهر في أكثر شاشةٍ يستعملها التاجر (اختيار الأصناف للطباعة
   واختيار عناصر البطاقة). سطرٌ واحد يُنهيه. */
:root{ accent-color:var(--gold); }
html{ scrollbar-color:rgba(17,18,20,.30) transparent; scrollbar-width:thin; }
input, textarea, select{ caret-color:var(--gold); }
a{ text-underline-offset:.22em; }

/* 🔑 الأرقام في الجداول والإحصاءات تُقرأ عمودياً — والعرض المتغيّر للخانة يجعل
   العين تتعثّر في كل صفّ. `tabular-nums` تُثبّت عرض الخانة فتصطفّ الآحاد. */
.summary .stat b, table td, .price-cell, .bulk-count strong{
  font-variant-numeric:tabular-nums;
}

/* خيط الهوية أسفل شريط اللوحة أيضاً — التفصيلة التي تفرّق «مبنيّ» عن «مركَّب» */
.topbar{ border-bottom:1px solid rgba(201,149,46,.38); }

/* ── رمز الريال السعوديّ الرسميّ (U+20C1) — 2026-08-28 ─────────────────────
   يُرسم SVG مضمَّناً من `riyal()` في helpers.php لا محرفاً:
   • `﷼` U+FDFC رمزٌ آخر، وNoto ترسمه حروفاً متراكبة (قياسٌ مباشر).
   • U+20C1 غير موجودٍ في ملفّ خطّنا ولا في أغلب خطوط الأجهزة ⇒ مربّعٌ فارغ.
   المقاس بالـem فيتبع حجم النصّ حوله، واللون `currentColor` فيتبع لونه. */
.riyal{
  width:.70em; height:.78em; display:inline-block;
  vertical-align:-.045em; margin-inline-start:.16em; flex:none;
}
/* الأسعار الكبيرة الثقيلة: الرمز يميل للثقل بجوار رقمٍ بوزن 800، فيُخفَّض قليلاً */
.plan .price .riyal{ width:.60em; height:.67em; vertical-align:-.015em; }

/* ── قشرة التطبيق الموحّدة — 2026-08-28 ───────────────────────────────────────
   الشريط يُبنى في `src/View/Shell.php` كسلسلةٍ متّصلة بلا مسافاتٍ بين الروابط،
   ⇒ **التباعد من `gap` لا من فراغات HTML**. (اعتمادُ التخطيط على مسافةٍ نصّية
   بين وسمين عطبٌ ينكسر أوّلَ ما يُصغَّر الناتج.) */
.topbar-nav{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }

/* 🔴 **لا خطّ تحت روابط الشريط.** كانت بلا `text-decoration` فورثت تسطير
   المتصفّح الافتراضيّ ⇒ **سبعة خطوطٍ متجاورة** في صفٍّ واحد، تشوّش العين وتُخفي
   المؤشّر الحقيقيّ للصفحة الحالية بين ستّة مثله.
   🔑 والتسطير هنا لا يفيد: الشريط سياقُ تنقّلٍ معروف، والروابط مميَّزةٌ بموضعها.
      (يبقى التسطير في **متن النصّ** حيث الرابط لا يُعرف إلا به.)
   🔑 والبديل للتمييز عند التحويم: سطوعٌ لا خطّ. */
.topbar a{ text-decoration:none; }

/* والجدولُ مثله: «تعديل» يتكرّر في كل صفٍّ — فستّة خطوطٍ متراصّة رأسياً تصنع
   عموداً من الضجيج، والفعل معروفٌ بموضعه في عمود الإجراءات.
   🔑 لكنّ التسطير يعود عند التحويم: ما يُنقر يجب أن يُعلن أنه يُنقر. */
/* ⚠️ **بلا `color` هنا عمداً.** كتبتُ `color:var(--gold)` أوّلاً، وذهبُ الهوية
      `#C9952E` على أبيض الجدول = **2.5:1** — دون AA بفارقٍ كبير، وهو ما يحذّر
      منه تعليقٌ في هذا الملفّ نفسه عند `.btn-accent`. ولم يظهر العطب لأن قاعدة
      روابط المتن غلبته **بالتخصيص صدفةً**. ⇒ اللون يُترك لتلك القاعدة الواحدة
      (‏`#8A6516`)، فلا يُبعَث الذهبُ الفاتح بتعديلٍ لاحقٍ يظنّه زينة. */
.row-actions a{ text-decoration:none; font-weight:500; }
.row-actions a:hover{ text-decoration:underline; }

/* والتذييلُ ورابطُ «نسيت كلمة المرور؟» مثلهما: ثلاثة روابطَ متجاورةً بينها فواصل
   تصنع خطّاً متقطّعاً يشدّ العين إلى أقلّ ما في الصفحة أهميّة.
   🔑 لكنّ هذه **روابطُ متن** لا تنقّل، فلا يُعرَّف الرابط بموضعه ⇒ يُعوَّض الخطّ
      بلونٍ مميَّز (الذهب على العاجيّ = 4.6:1 ⇒ AA للنصّ العاديّ)، **ويعود الخطّ
      عند التحويم وعند التركيز بالمفتاح** — فلا يخسر أحدٌ إشارةَ أنّ هذا رابط. */
/* 🔑 قاعدةٌ واحدة لكل روابط المحتوى بدل مطاردة محدِّدٍ بعد محدِّد: التذييل
      والنماذج ونصّ الشروط سواء. (لاحقتُها ثلاثةَ مواضع قبل أن أوحّدها.)
   🔑🔑 **والقياس هو ما أجاز إسقاط الخطّ من روابط المتن:** رابطٌ وسط جملةٍ لا
      يميّزه إلا اللون يشترط WCAG (تقنية G183) تبايناً **3:1 عن نصّ المتن نفسه**
      لا عن الخلفية وحدها — وقِيس `#8A6516` مقابل `#111214` = **3.53:1** ✔،
      وقراءتُه على العاجيّ **4.88:1** ⇒ AA. ولولا هذان الرقمان لبقي الخطّ.
   ⚠️ ولا تفتح لوناً أفتح «لأنه أجمل» — يسقط الشرطان معاً بلا إنذار.
   🔑 والخطّ يعود عند التحويم **وعند التركيز بالمفتاح**: من يتصفّح بالمفتاح
      يستحقّ الإشارة نفسها التي يراها من يتصفّح بالفأرة. */
/* 🔑 **قاعدةٌ واحدة باستثناءاتٍ مسمّاة، لا محدِّدٌ لكل موضع.** لاحقتُ التسطير
      أربع مرّات (تذييل · نموذج · شروط · وسمُ موافقةٍ داخل `label>span`) وفي كلٍّ
      فاتني موضع. عكسُ القاعدة يُنهي المطاردة: **كلّ رابطٍ في المحتوى**، إلّا
      الأزرار ورابطَ التخطّي.
   🔑🔑 **والقياس هو ما أجاز إسقاط الخطّ من روابط المتن:** رابطٌ وسط جملةٍ لا
      يميّزه إلا اللون يشترط WCAG (تقنية G183) تبايناً **3:1 عن نصّ المتن نفسه**
      لا عن الخلفية وحدها — وقِيس `#8A6516` مقابل `#111214` = **3.53:1** ✔،
      وقراءتُه على العاجيّ **4.88:1** ⇒ AA. ولولا هذان الرقمان لبقي الخطّ.
   ⚠️ ولا تفتح اللون «لأنه أجمل»: يسقط الشرطان معاً بلا إنذار.
   🔑 و`.skip` مستثنىً لأنه **لا يُرى إلا وقت التركيز بالمفتاح** — ووقتها الخطّ
      هو الإشارة الصحيحة، لا زخرفة. */
/* 🔑 و`.wrap` مع `main`: خمسُ صفحاتٍ (الدخول · التسجيل · نسيت · إعادة التعيين ·
      العودة من الدفع) بلا `<main>` أصلاً — تلفّ محتواها بـ`.wrap` وحدها. وفاتني
      ذلك في المحاولة الأولى فرجع التسطير إلى صفحة الدخول.
      ✔ وقِيس أن `app_topbar()` تقع **خارج** `.wrap` في كل صفحة، فلا تلتقطها. */
main a:not(.btn):not(.skip), .wrap a:not(.btn):not(.skip), .foot a:not(.btn){
  text-decoration:none; color:#8A6516;
}
/* والخطّ يعود عند التحويم **وعند التركيز بالمفتاح**: من يتصفّح بالمفتاح يستحقّ
   الإشارة نفسها التي يراها من يتصفّح بالفأرة. */
main a:not(.btn):not(.skip):hover, .wrap a:not(.btn):not(.skip):hover, .foot a:not(.btn):hover,
main a:not(.btn):not(.skip):focus-visible, .wrap a:not(.btn):not(.skip):focus-visible,
.foot a:not(.btn):focus-visible{
  text-decoration:underline;
}
.topbar-nav a{ opacity:.82; transition:opacity .12s ease; }
.topbar-nav a:hover{ opacity:1; }
.topbar-nav a[aria-current="page"]{ opacity:1; }

/* الصفحة الحالية: الذهب على الحبر = 6.6:1 ⇒ AA. وخطٌّ تحتها لمن لا يميّز اللون
   — واللون وحده لا يكفي (WCAG 1.4.1). و`aria-current` يقولها لقارئ الشاشة. */
.topbar a[aria-current="page"]{
  color:var(--gold); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--gold);
}
/* تنبيه الاشتراك: يُرى في كل شاشة، ورابطُه يذهب إلى العلاج مباشرةً.
   🔑 لونٌ **ومعنىً**: النصّ يقول الحالة كاملةً، فلا يعتمد على تمييز اللون وحده. */
.topbar .sub-note{
  font-size:12.5px; font-weight:600; padding:4px 12px; border-radius:999px;
  text-decoration:none; white-space:nowrap;
}
/* التحذير: كهرمانٌ على الحبر — مقروءٌ ولا يصرخ */
.topbar .sub-note.is-warn{ background:rgba(255,176,32,.18); color:#FFD68A; }
/* الخطر: أحمرُ ممتلئ — الفرق بينهما يُرى من طرف العين */
.topbar .sub-note.is-danger{ background:#B3261E; color:#fff; }
.topbar .sub-note:hover{ text-decoration:underline; }
@media (max-width:640px){ .topbar .sub-note{ font-size:11.5px; padding:3px 9px; } }

/* الخروج فعلٌ لا وجهة: يُفصَل ويخفت، فلا ينافس التنقّل */
.topbar .topbar-out{ margin-inline-start:var(--s2); opacity:.72; }
.topbar .topbar-out:hover{ opacity:1; }

@media (max-width:640px){
  .topbar-nav{ gap:var(--s3); }
  .topbar-nav a{ font-size:13px; }
}

/* ── حقل الملف ────────────────────────────────────────────────────────────────
   🔑 زرّه الداخليّ يرسمه المتصفّح بخطّه هو: Arial لاتينيّ داخل صفحةٍ عربية.
      `::file-selector-button` يُلحقه بمفردات الأزرار عندنا. (ونصّه «Choose File»
      من لغة واجهة المتصفّح ولا يُترجَم بـCSS — حدٌّ معلومٌ لا عطبٌ عندنا.) */
input[type=file]{ padding:8px 10px; cursor:pointer; }
input[type=file]::file-selector-button{
  font-family:inherit; font-size:13px; font-weight:400;
  background:var(--ink); color:#fff; border:0; border-radius:var(--s2);
  padding:7px 14px; margin-inline-end:12px; cursor:pointer;
}
input[type=file]::file-selector-button:hover{ background:#26282c; }

/* 🔑 وحين يعمل `file-field.js` يُخفى الحقل الأصليّ **بالقصّ لا بالإخفاء**:
      `display:none` يُخرجه من ترتيب المفاتيح ومن شجرة الوصول، فيصير الزرّ
      العربيّ زينةً لمن يتصفّح بلوحة المفاتيح. والقصُّ يُبقيه قابلاً للتركيز. */
/* 🔴 **`position:relative` ضرورةٌ لا زينة.** الحقل المخفيّ `position:absolute`،
      فبلا حاويةٍ موضوعة يُنسَب إلى الصفحة نفسها ⇒ قِيس 29/08 أنه يقع عند
      `left:-320` **فيمدّ عرض المستند 320 بكسل** وتتمرجح الصفحة أفقياً.
   🔑 ولم يظهر إلا حين صُحِّح قياسُ التمرير في RTL: `scrollLeft` يصير **سالباً**
      في الاتجاه العربيّ، فقياسٌ باتجاهٍ واحد يقول «ثابت» دائماً. */
.file-field{ position:relative; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.file-field__input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.file-field__btn{
  display:inline-block; background:var(--ink); color:#fff; border-radius:var(--s2);
  padding:9px 16px; font-size:13.5px; cursor:pointer; font-weight:500;
  margin:0;                       /* يلغي هامش `label` العامّ في النماذج */
}
.file-field__btn:hover{ background:#26282c; }
/* حلقةُ التركيز على الزرّ حين يُركَّز الحقلُ المخفيّ — وإلّا اختفت الإشارة كلّها */
.file-field__input:focus-visible + .file-field__name,
.file-field__input:focus-visible ~ .file-field__btn,
.file-field__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.file-field__name{ font-size:13px; }

/* ── دليل مراحل الاستيراد — 2026-08-28 ──────────────────────────────────────
   الترقيم معلومةٌ لا زينة: الاستيراد متتابعٌ ولا يصحّ منكوساً، والتاجر يحتاج أن
   يعرف كم بقي قبل أن يُثبَّت شيءٌ في كتالوجه. (اسمُ `.flow` لا `.steps` — تلك
   للصفحة التعريفية، وتصادمُ الأسماء يجعل تغييراً هنا يظهر هناك.) */
.flow{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  list-style:none; margin:0 0 var(--s6); padding:0;
  font-size:13px; color:#5F6165;
}
.flow li{ display:flex; align-items:center; gap:8px; }
/* الفاصل مرسومٌ لا محرفَ يونيكود — يتبع لون النصّ ولا يعتمد على خطٍّ بعينه */
.flow li:not(:last-child)::after{
  content:""; width:28px; height:1px; background:var(--line); margin-inline:var(--s2);
}
.flow-n{
  display:inline-grid; place-items:center; width:22px; height:22px; flex:none;
  border-radius:999px; border:1px solid var(--line);
  font-size:12px; line-height:1; background:var(--surface);
}
/* الحاليّ: حبرٌ ممتلئ — أعلى تباينٍ في السلّم، فالعين تجده بلا بحث */
.flow li[aria-current="step"]{ color:var(--ink); font-weight:600; }
.flow li[aria-current="step"] .flow-n{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* الماضي: ذهبٌ خافت — أُنجز ولا ينافس الحاليّ */
.flow li.is-done{ color:var(--ink); }
.flow li.is-done .flow-n{ background:rgba(201,149,46,.18); border-color:var(--line-gold); }

@media (max-width:640px){
  .flow{ font-size:12px; gap:var(--s1); }
  .flow li:not(:last-child)::after{ width:14px; margin-inline:6px; }
}