/* ============================================================
   عطايا — طبقة الرموز (Tokens)
   هوية: «زجاج وضفيرة» — زجاج الاسكرينة + نحاس السلك.
   ============================================================ */
:root{
  /* --- ألوان أساسية --- */
  --ink:#0B0E14;         /* حبر: زجاج الشاشة وهي مقفولة */
  --glass:#F2F5F7;       /* زجاج: سطح بارد مش كريمي */
  --volt:#0047F0;        /* كهربا: الإجراء الأساسي فقط */
  --copper:#C2410C;      /* نحاس: قلب السلك = علامة الجملة */
  /* --- دلالية --- */
  --ok:#0F7B5F;          /* متاح / مدفوع */
  --warn:#8A5A00;        /* هامش ضيق */
  --danger:#B3123B;      /* تحت سعر الجملة */

  /* أسطح الوضع النهاري الساطع: تباين عالي، مش رمادي باهت */
  --bg:#FFFFFF;
  --surface:var(--glass);
  --surface-2:#E4E9ED;
  --line:#C3CCD4;
  --line-strong:#8A97A3;
  --text:var(--ink);
  --text-2:#3C4855;
  --text-3:#5C6875;
  --on-volt:#FFFFFF;
  --on-danger:#FFFFFF;   /* نص فوق سطح الخطر */
  --on-warn:#FFFFFF;     /* نص فوق شريط التحذير */

  /* --- سلّم الخطوط (مضبوط على الصغير) --- */
  --f-9:11px; --f-10:12px; --f-11:13px; --f-12:14px;
  --f-13:16px; --f-14:18px; --f-15:21px; --f-16:25px; --f-17:31px; --f-18:38px;
  --lh-tight:1.15; --lh:1.55;
  --w-reg:400; --w-mid:500; --w-semi:600; --w-bold:700;

  /* --- مسافات: مضاعفات 4 --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px;

  /* --- زوايا متدرّجة حسب حجم العنصر --- */
  --r-chip:6px; --r-field:10px; --r-card:14px; --r-panel:20px; --r-sheet:26px; --r-pill:999px;

  /* --- 3 مستويات ظل (ملوّنة بالحبر، مش رمادي واحد) --- */
  --sh-1:0 1px 0 rgba(11,14,20,.10);
  --sh-2:0 4px 14px -6px rgba(11,14,20,.28);
  --sh-3:0 18px 44px -14px rgba(11,14,20,.42);

  /* --- مدد الحركة --- */
  --t-fast:110ms; --t-mid:200ms; --t-slow:320ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* --- كثافة العرض --- */
  --row-h:64px;    /* مريح للموبايل */
  --tap:44px;
  --nav-h:60px;
  --font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --font-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
:root[data-density="compact"]{ --row-h:44px; }

/* الوضع الليلي */
:root[data-mode="night"]{
  --bg:#070910;
  --surface:#0E131C;
  --surface-2:#18202C;
  --line:#28323F;
  --line-strong:#4A5765;
  --text:#F2F5F7;
  --text-2:#C3CCD4;
  --text-3:#93A0AC;
  --volt:#5B8CFF;
  --copper:#E4762F;
  --ok:#2ED39F;
  --warn:#E0A32E;
  --danger:#FF6584;
  --on-volt:#06090F;
  --on-danger:#2B0410;
  --on-warn:#1F1503;
  --sh-1:0 1px 0 rgba(0,0,0,.6);
  --sh-2:0 4px 14px -6px rgba(0,0,0,.7);
  --sh-3:0 18px 44px -14px rgba(0,0,0,.85);
}

/* ============================================================
   الأساس
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-ar); font-size:var(--f-13); line-height:var(--lh);
  font-weight:var(--w-reg);
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);font-weight:var(--w-bold);letter-spacing:-.01em}
h1{font-size:var(--f-17)} h2{font-size:var(--f-15)} h3{font-size:var(--f-14)} h4{font-size:var(--f-13)}
p{margin:0 0 var(--s3)}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
ul{margin:0;padding-inline-start:var(--s5)}
:focus-visible{outline:3px solid var(--volt);outline-offset:2px;border-radius:var(--r-chip)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* الأرقام والأكواد: معزولة الاتجاه وجدولية */
.n,.code,.en{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate; display:inline-block;
  letter-spacing:-.02em;
}
.code{font-size:var(--f-10);color:var(--text-3);background:var(--surface-2);
  padding:1px 5px;border-radius:var(--r-chip);font-weight:var(--w-mid)}

/* ضفيرة السلك: الجرأة الوحيدة في النظام. علامة «جملة». */
.braid{
  background-image:repeating-linear-gradient(135deg,
    var(--copper) 0 2px, transparent 2px 6px);
}
.hr{height:1px;background:var(--line);border:0;margin:var(--s5) 0}
.hr-braid{height:4px;border:0;margin:var(--s6) 0;border-radius:2px;opacity:.85}

/* ============================================================
   المكوّنات
   ============================================================ */
/* أزرار */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);min-width:var(--tap);padding:0 var(--s5);
  border:1px solid transparent;border-radius:var(--r-field);
  font-size:var(--f-13);font-weight:var(--w-semi);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
  background:var(--surface-2);color:var(--text);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--volt);color:var(--on-volt)}
.btn--danger{background:var(--danger);color:var(--on-danger)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn--quiet{background:transparent;color:var(--text-2)}
.btn--lg{min-height:56px;font-size:var(--f-14);padding:0 var(--s6);border-radius:var(--r-card)}
.btn--sm{min-height:var(--tap);font-size:var(--f-11);padding:0 var(--s3)}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.is-loading{color:transparent;position:relative}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--on-volt);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* حقول */
.field{display:block;margin-bottom:var(--s4)}
.field__label{display:block;font-size:var(--f-11);font-weight:var(--w-semi);color:var(--text-2);margin-bottom:var(--s1)}
.input{
  width:100%;min-height:var(--tap);font-size:var(--f-13); /* ≥16px فعلي على الموبايل */
  padding:var(--s2) var(--s3);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-field);
}
.input::placeholder{color:var(--text-3)}
.input--search{min-height:56px;font-size:var(--f-14);font-weight:var(--w-semi);
  border-width:2px;border-color:var(--ink);border-radius:var(--r-card);
  padding-inline-start:var(--s12);padding-inline-end:var(--s12)}
:root[data-mode="night"] .input--search{border-color:var(--line-strong)}
.field.is-error .input{border-color:var(--danger);border-width:2px}
.field__err{display:flex;gap:var(--s1);align-items:center;font-size:var(--f-11);color:var(--danger);font-weight:var(--w-semi);margin-top:var(--s1)}

/* شارات الحالة */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px var(--s2);
  border-radius:var(--r-chip);font-size:var(--f-10);font-weight:var(--w-semi);
  border:1px solid var(--line);background:var(--surface)}
.badge--ok{color:var(--ok);border-color:currentColor;background:transparent}
.badge--low{color:var(--warn);border-color:currentColor;background:transparent}
.badge--out{color:var(--danger);border-color:currentColor;background:transparent}
.badge--whole{color:var(--copper);border-color:currentColor;background:transparent;
  padding-inline-start:var(--s4);position:relative;overflow:hidden}
.badge--whole::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:8px;
  background-image:repeating-linear-gradient(135deg,currentColor 0 2px,transparent 2px 5px)}
.badge--og{color:var(--ink);background:#F2C94C;border-color:#8A6D00;font-weight:var(--w-bold)}
:root[data-mode="night"] .badge--og{color:#1A1405}
.badge--copy{color:var(--text-2);background:transparent;border-style:dashed;border-color:var(--line-strong)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* بطاقة */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4)}
.card--flat{background:transparent}
.card--raise{background:var(--bg);box-shadow:var(--sh-2)}

/* صف بيعة / صف منتج */
.row{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:start;
  min-height:var(--row-h);padding:var(--s2) var(--s3);
  background:transparent;border:0;border-bottom:1px solid var(--line);
}
.row:active{background:var(--surface)}
.row__main{flex:1 1 auto;min-width:0}
.row__name{font-weight:var(--w-semi);font-size:var(--f-12);
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.row__meta{display:flex;align-items:center;gap:var(--s2);font-size:var(--f-10);color:var(--text-3);margin-top:2px;flex-wrap:wrap}
.row__price{flex:0 0 auto;text-align:end;font-family:var(--font-num);font-weight:var(--w-bold);
  font-size:var(--f-14);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.row__sub{display:block;font-size:var(--f-10);color:var(--text-3);font-weight:var(--w-reg)}
.row--wholesale{box-shadow:inset 3px 0 0 var(--copper)}

/* بطاقة منتج (واجهة العميل) */
.pcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column}
.pcard__img{aspect-ratio:1;background:var(--surface-2);display:grid;place-items:center;position:relative}
.pcard__glyph{font-size:var(--f-18);opacity:.5}
.pcard__body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.pcard__name{font-size:var(--f-12);font-weight:var(--w-semi);line-height:1.35}
.pcard__price{font-family:var(--font-num);font-size:var(--f-15);font-weight:var(--w-bold);
  direction:ltr;unicode-bidi:isolate;display:inline-block}
.pcard.is-out{opacity:.62}
.pcard.is-out .pcard__img::after{content:"خلص";position:absolute;inset-block-end:var(--s2);inset-inline-start:var(--s2);
  background:var(--ink);color:#fff;font-family:var(--font-ar);font-size:var(--f-10);
  padding:2px var(--s2);border-radius:var(--r-chip);font-weight:var(--w-semi)}

/* سلة */
.cart-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:var(--s3);
  transform:translateY(120%);transition:transform var(--t-mid) var(--ease);
}
.cart-bar.is-on{transform:translateY(0)}

/* لوحة أرقام */
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.pad button{min-height:56px;border-radius:var(--r-field);border:1px solid var(--line);
  background:var(--surface);font-family:var(--font-num);font-size:var(--f-16);font-weight:var(--w-semi)}
.pad button:active{background:var(--surface-2)}

/* جدول يتحوّل بطاقات */
.tbl{width:100%;border-collapse:collapse;font-size:var(--f-11)}
.tbl th{text-align:start;font-size:var(--f-10);color:var(--text-3);font-weight:var(--w-semi);
  padding:var(--s2) var(--s2);border-bottom:1px solid var(--line-strong);white-space:nowrap}
.tbl td{padding:var(--s2);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:end}
.tbl-cards{display:none;flex-direction:column;gap:var(--s2)}
.tcard{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3);background:var(--surface)}
.tcard__top{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.tcard__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s3);margin-top:var(--s2)}
.tcard__k{font-size:var(--f-10);color:var(--text-3)}
.tcard__v{font-family:var(--font-num);font-size:var(--f-11);direction:ltr;unicode-bidi:isolate;font-weight:var(--w-semi)}

/* بطاقات مؤشرات */
.kpis{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3);background:var(--surface)}
.kpi__k{font-size:var(--f-10);color:var(--text-3);font-weight:var(--w-semi)}
.kpi__v{font-family:var(--font-num);font-size:var(--f-16);font-weight:var(--w-bold);
  direction:ltr;unicode-bidi:isolate;display:block;margin-top:2px}
.kpi--hero{background:var(--ink);color:#F2F5F7;border-color:var(--ink)}
.kpi--hero .kpi__k{color:#93A0AC}

/* تنبيهات */
.alert{display:flex;gap:var(--s3);padding:var(--s3);border-radius:var(--r-card);
  border:1px solid currentColor;font-size:var(--f-11);font-weight:var(--w-mid);align-items:flex-start}
.alert b{font-weight:var(--w-bold)}
.alert--danger{color:var(--danger)}
.alert--warn{color:var(--warn)}
.alert--info{color:var(--volt)}
.alert__body{color:var(--text)}

/* شرائح / فلاتر */
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding-block:var(--s1);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:transparent;font-size:var(--f-11);font-weight:var(--w-semi)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
:root[data-mode="night"] .chip.is-on{background:var(--text);color:var(--bg)}

/* مفتاح قطاعي/جملة — محسوس */
.seg{display:flex;gap:0;border:2px solid var(--ink);border-radius:var(--r-field);overflow:hidden;background:var(--bg)}
:root[data-mode="night"] .seg{border-color:var(--line-strong)}
.seg button{flex:1;min-height:var(--tap);border:0;background:transparent;
  font-weight:var(--w-bold);font-size:var(--f-12);position:relative}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
:root[data-mode="night"] .seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.seg button[data-tier="wholesale"][aria-pressed="true"]{background:var(--copper);color:#fff}

/* نافذة تأكيد + لوح سفلي */
.scrim{position:fixed;inset:0;background:rgba(7,9,16,.6);z-index:50;opacity:0;visibility:hidden;
  transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid)}
.scrim.is-on{opacity:1;visibility:visible}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--bg);
  border-top-left-radius:var(--r-sheet);border-top-right-radius:var(--r-sheet);
  padding:var(--s4) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 24px);overflow:auto;box-shadow:var(--sh-3);
  transform:translateY(101%);transition:transform var(--t-slow) var(--ease);visibility:hidden}
.sheet.is-on{transform:translateY(0);visibility:visible}
.sheet__grip{width:44px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto var(--s4)}
.modal{position:fixed;inset-inline:var(--s4);top:12vh;z-index:60;background:var(--bg);
  border-radius:var(--r-panel);padding:var(--s5);box-shadow:var(--sh-3);max-width:420px;margin:0 auto;
  opacity:0;visibility:hidden;transform:scale(.96);transition:all var(--t-mid) var(--ease)}
.modal.is-on{opacity:1;visibility:visible;transform:scale(1)}

/* رسائل عابرة */
.toasts{position:fixed;inset-inline:0;bottom:calc(var(--s16) + env(safe-area-inset-bottom));z-index:70;
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;pointer-events:none;padding:0 var(--s4)}
.toast{background:var(--ink);color:#F2F5F7;padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  font-size:var(--f-11);font-weight:var(--w-semi);box-shadow:var(--sh-2);
  animation:toastin var(--t-mid) var(--ease)}
:root[data-mode="night"] .toast{background:var(--surface-2);border:1px solid var(--line)}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}}

/* حالات */
.state{text-align:center;padding:var(--s10) var(--s5);color:var(--text-2)}
.state__glyph{font-size:var(--f-17);opacity:.45}
.state__t{font-weight:var(--w-bold);font-size:var(--f-13);color:var(--text);margin-top:var(--s2)}
.state__d{font-size:var(--f-11);margin-top:var(--s1)}
.skel{background:var(--surface-2);border-radius:var(--r-chip);height:12px;
  animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.skel-row{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);border-bottom:1px solid var(--line)}

/* شريط «مفيش نت» — ثابت مش عابر */
.offline{display:none;align-items:center;gap:var(--s2);background:var(--warn);color:var(--on-warn);
  padding:var(--s2) var(--s4);font-size:var(--f-11);font-weight:var(--w-semi)}
:root[data-net="off"] .offline{display:flex}
:root[data-net="off"] .net-only{opacity:.4;pointer-events:none}

/* مسار زمني للحركة على الصنف */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding-inline-start:var(--s6);padding-block:var(--s2);
  border-inline-start:2px solid var(--line);margin-inline-start:5px}
.tl li::before{content:"";position:absolute;inset-inline-start:-7px;top:18px;
  width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong)}
.tl li.is-key::before{background:var(--volt);border-color:var(--volt)}
.tl__t{font-size:var(--f-11);font-weight:var(--w-semi)}
.tl__d{font-size:var(--f-10);color:var(--text-3)}

/* ============================================================
   الهيكل
   ============================================================ */
.appbar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.appbar__in{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:var(--w-bold);font-size:var(--f-14)}
.brand__mark{width:28px;height:28px;border-radius:8px;background:var(--ink);position:relative;overflow:hidden;flex:0 0 auto}
.brand__mark::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,var(--copper) 0 2px,transparent 2px 7px);opacity:.9}
:root[data-mode="night"] .brand__mark{background:#141B26}
.spacer{flex:1}
.iconbtn{min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-field);border:1px solid var(--line);
  background:transparent;display:grid;place-items:center;font-size:var(--f-12)}
.wrap{max-width:1180px;margin:0 auto;padding:var(--s4) var(--s4) var(--s16)}
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:35;background:var(--bg);
  border-top:1px solid var(--line);display:flex;
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;min-height:var(--tap);border:0;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:var(--f-9);font-weight:var(--w-semi);color:var(--text-3);padding:var(--s2) 0}
.tabbar button[aria-selected="true"]{color:var(--volt)}
.tabbar button[aria-selected="true"]::before{content:"";position:absolute;top:0;width:28px;height:3px;
  background:var(--volt);border-radius:0 0 3px 3px}
.tabbar button{position:relative}
.screen{display:none}
.screen.is-on{display:block}
.sec{margin-bottom:var(--s10)}
.sec__h{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.sec__n{font-family:var(--font-num);font-size:var(--f-10);color:var(--copper);font-weight:var(--w-bold)}
.muted{color:var(--text-2);font-size:var(--f-11)}
.grid2{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pgrid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.swatches{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sw{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.sw__c{height:56px}
.sw__t{padding:var(--s2);font-size:var(--f-10)}
.sw__t b{display:block;font-size:var(--f-11)}
.only-mobile{display:none}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.inline{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* الجداول → بطاقات على الموبايل */
@media (max-width:640px){
  .tbl-wrap{display:none}
  .tbl-cards{display:flex}
  .only-mobile{display:block}
  .wrap{padding:var(--s3) var(--s3) calc(var(--s16) + var(--s8))}
  h1{font-size:var(--f-16)}
}
@media print{.appbar,.tabbar,.cart-bar,.scrim,.sheet,.toasts{display:none!important}}

/* ============================================================
   طلبات الويب — تبويب الفولفيلمنت (Phase 3)
   ============================================================ */
.tab-switch{display:flex;gap:var(--s2);margin-inline:var(--s2)}
.orders-screen{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.orders-screen--readonly{align-items:center;text-align:center;padding-top:var(--s8)}
.orders-alert{background:var(--warn);color:#fff;padding:var(--s3);border-radius:var(--r-card);
  font-weight:var(--w-bold);text-align:center}
.orders-list{display:flex;flex-direction:column;gap:var(--s3)}
.order-card{border:2px solid var(--line);border-radius:var(--r-card);padding:var(--s3);
  background:var(--surface);display:flex;flex-direction:column;gap:var(--s2)}
.order-card--visual-escalation{border-color:var(--warn)}
.order-card--owner-escalation{border-color:var(--danger);box-shadow:0 0 0 2px var(--danger) inset}
.order-card__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.order-card__id{font-weight:var(--w-bold)}
.order-card__total{font-weight:var(--w-bold)}
.order-card__status{font-size:var(--f-11);color:var(--text-2)}
.order-card__actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.badge--danger{color:#fff;background:var(--danger);border-color:var(--danger)}
.order-card__customer{display:flex;justify-content:space-between;align-items:center;font-size:var(--f-11)}
.order-card__contact-links{display:flex;gap:var(--s2)}
.order-card__call{color:var(--copper);text-decoration:none;font-weight:var(--w-bold)}
.order-card__whatsapp{color:#25d366;text-decoration:none;font-weight:var(--w-bold)}
.order-card__payment{font-size:var(--f-11);color:var(--text-2)}

/**
 * عطايا — طبقة CSS خاصة بصفحات المتجر العام (SSR). بتستخدم نفس رموز نظام
 * التصميم الأصلي (--ink, --copper, --r-card...) من styles.css اللي جواها،
 * مش تصميم جديد منفصل.
 */

.store-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3, 12px) var(--s4, 16px);
  border-bottom: 2px solid var(--ink, #0B0E14);
}
.store-logo { font-weight: 800; font-size: 20px; color: var(--ink, #0B0E14); text-decoration: none; }
.store-cart-link { text-decoration: none; color: var(--ink, #0B0E14); font-weight: 600; }
.store-main { max-width: 720px; margin: 0 auto; padding: var(--s4, 16px); min-height: 60vh; }
.store-footer { text-align: center; padding: var(--s4, 16px); color: var(--muted, #6b7280); font-size: 13px; }

.catalogue h1, .product-page h1, .checkout-page h1, .track-page h1 { margin: 0 0 12px; font-size: 22px; }

.store-search {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 16px;
  border: 2px solid var(--ink, #0B0E14); border-radius: var(--r-field, 12px); font-size: 16px;
}

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.product-card {
  display: block; padding: 12px; border: 1px solid var(--line, #E2E8F0); border-radius: var(--r-card, 14px);
  text-decoration: none; color: var(--ink, #0B0E14); background: var(--surface, #fff);
}
.product-card__name { font-weight: 600; margin-bottom: 6px; }
.product-card__price { font-weight: 800; }
.product-card__compat { font-size: 12px; color: var(--muted, #6b7280); margin-top: 4px; }

.product-page__price { font-size: 26px; font-weight: 800; margin: 8px 0; }
.product-page__compat { color: var(--muted, #6b7280); margin-bottom: 8px; }
.product-page__store-only {
  margin-top: 16px; padding: 14px; border-radius: var(--r-card, 14px);
  background: var(--surface-2, #F2F5F7); text-align: center;
}

.cart-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cart-line { display: grid; grid-template-columns: 1fr 60px 80px 32px; gap: 8px; align-items: center; }
.cart-remove { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--danger, #DC2626); }
.checkout-total { font-weight: 800; font-size: 18px; margin: 12px 0; }

#checkout-form label { display: block; margin-bottom: 12px; font-weight: 600; }
#checkout-form input, #checkout-form select {
  display: block; width: 100%; box-sizing: border-box; padding: 10px; margin-top: 4px;
  border: 2px solid var(--ink, #0B0E14); border-radius: var(--r-field, 12px); font-size: 15px;
}

.track-card {
  padding: 16px; border-radius: var(--r-card, 14px); background: var(--surface-2, #F2F5F7);
  margin-bottom: 16px;
}
.track-card__id { font-weight: 700; }
.track-card__status { font-size: 18px; font-weight: 800; margin: 6px 0; }