/* Tebsher (تبشر) — ordering on the website, the customer app's screens 1:1 on mobile.
   Tokens from bq-panel.css · components mirror docs/design-reference/customer (05…47).
   Mobile (<768px): full app shell — app bar, bottom tab bar, sheets, sticky bars.
   Desktop: the public site header/footer with the same screen centred (--ap-w).
   UI design & front-end: Marhaba Programming Co. · mrhbaa.com */
:root{--ap-w:480px;--ap-tab-h:72px;--ap-bar-h:60px;--safe-b:env(safe-area-inset-bottom,0px)}
/* أنصاف أقطار التصميم المعتمد حرفيًّا (:root في ملفات التصميم · BqRadius):
   8 · 12 · 16 · 20 · 28 · 999 — لا قيمٌ مرتجلة. ما في التصميم رقمًا صريحًا
   (مربّع الأيقونة 13، الحقل 15، بلاطة الصورة 18، الورقة 26) يبقى كما هو. */
body.app-shell{--r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:20px;--r-xl:28px;--r-full:999px}
body.app-shell{background:var(--canvas);color:var(--ink-900);font-family:var(--font-head);-webkit-font-smoothing:antialiased}
body.app-shell main{min-height:60vh}
.ap{position:relative;width:100%;max-width:var(--ap-w);margin-inline:auto;background:var(--canvas);min-height:calc(100vh - var(--head-h));display:flex;flex-direction:column}
.ap.wide{--ap-w:760px}
.ap.full{--ap-w:1240px;background:transparent}
.ap.white{background:#fff}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap}
.t-xs{font-size:12px;color:var(--ink-400);font-weight:500;line-height:1.5}
.t-sm{font-size:13px;color:var(--ink-600);font-weight:500;line-height:1.5}
.t-rg{font-size:14px;color:var(--ink-500);line-height:1.8}
.t-md{font-size:14px;font-weight:700;color:var(--ink-900);line-height:1.5}
.h1{font-size:28px;font-weight:700;line-height:1.3;color:var(--ink-900)}
.h2{font-size:21px;font-weight:700;line-height:1.3;color:var(--ink-900)}
.h3{font-size:16px;font-weight:700;line-height:1.4;color:var(--ink-900)}
.muted{color:var(--ink-400)}
.brand{color:var(--brand-700)}
.go{color:var(--go-600)}
.rd{color:var(--rd-600)}
.row{display:flex;align-items:center;gap:12px;min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;min-width:0}
.grow{flex:1;min-width:0}
/* مقاس أيقونات الـsprite يُكتب مرّةً واحدة في bq-panel.css (svg.i ·
   svg.i.sm · svg.i.xs · svg.i.lg · svg.i.fill) وهي محمَّلة قبل هذه
   الورقة في كل صفحات الموقع. كانت هنا نسخةٌ ثانية بأحجامٍ مختلفة
   (22/18/15/28) لا تعمل أبدًا لأنّ محدِّد اللوحة `svg.i` أعلى
   خصوصيةً من `.i` — فحُذفت كي لا يُظنّ أنّ تعديلها يغيّر شيئًا. */
.i.fill{stroke:none}
.flip{transform:scaleX(-1)}
[dir=ltr] .flip{transform:none}
/* سهم الرجوع يُرسم «‹» في الشيفرة ويُقلب في الإنجليزية وحدها — ولا
   يُضاف إليه «flip» وإلا انقلب مرّتين وأشار للجهة الخطأ بالعربية */
[dir=ltr] .i.back{transform:scaleX(-1)}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}

/* ---------- App bar (appbar) ---------- */
.ap-bar{height:var(--ap-bar-h);flex:0 0 var(--ap-bar-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;gap:8px}
.ap-bar .ttl{font-size:17px;font-weight:700;color:var(--ink-900);flex:1;text-align:center}
.ap-bar .sp{width:38px;flex:0 0 38px}
.ap-bar .sub{font-size:11.5px;color:var(--ink-400);font-weight:500;max-width:100%}
.iconbtn{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--brand-50);border:1px solid var(--line);color:var(--ink-700);cursor:pointer;position:relative;transition:background .15s}
.iconbtn:hover{background:var(--brand-100)}
.iconbtn.lg{width:42px;height:42px;flex-basis:42px}
.iconbtn.glass{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28);color:#fff}
.iconbtn.solid{background:#fff;box-shadow:var(--sh-2);border-color:transparent}
.iconbtn .dot{position:absolute;top:8px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;background:#D64545;border:1.5px solid #fff}
/* نقطة ‎.badge::before‎ في لوحة التحكّم لا تخصّ عدّاد السلة */
.iconbtn .badge::before{display:none}
.iconbtn .badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--brand-700);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ---------- Bottom tab bar (tabbar) ---------- */
.ap-tabbar{display:none;position:fixed;bottom:0;inset-inline:0;height:calc(var(--ap-tab-h) + var(--safe-b));padding:8px 10px var(--safe-b);background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(74,63,51,.10);z-index:40;align-items:flex-start}
.ap-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12.5px;font-weight:600;color:#8B8175;text-decoration:none}
.ap-tabbar a .ti{width:58px;height:32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;position:relative}
.ap-tabbar a.on{color:#4A3F33}
.ap-tabbar a.on .tl{font-weight:800}
.ap-tabbar a.on .ti{background:#EFE6DA;color:#6E5F4E}
.ap-tabbar .cnt{position:absolute;top:-3px;inset-inline-end:8px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-full);background:var(--brand-700);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff}

/* ---------- Cards & rows ---------- */
.ap-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-1);padding:14px 15px}
.ap-card.tight{padding:2px 15px}
.ap-list>.ap-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.ap-list>.ap-item:last-child{border-bottom:0}
.ap-row-form{display:contents}
.ap-list>.ap-row-form>.ap-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.ap-list>.ap-row-form:last-child>.ap-item{border-bottom:0}
/* مربّع الأيقونة في صفوف الدفع (22 · _IconRow): 40×40 بنصف قطر 13، خلفية الهوية الفاتحة وأيقونة 19 بلون الهوية؛ والأخضر للمجدول والاستلام */
.ico-tile{width:40px;height:40px;flex:0 0 40px;border-radius:13px;background:var(--brand-100);color:var(--brand-700);display:inline-flex;align-items:center;justify-content:center}
.ico-tile .i{width:19px;height:19px}
.ico-tile.go{background:var(--go-100);color:var(--go-700)}
.ap-item .ic{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--canvas);color:var(--brand-700);display:flex;align-items:center;justify-content:center}
.ap-item .ic.go{background:var(--go-100);color:var(--go-600)}
.ap-item .ic.am{background:var(--am-100);color:var(--am-600)}
.ap-item .chev{color:var(--ink-200)}
.ap-item.danger .t-md{color:var(--rd-600)}
.ap-item.danger .ic{background:var(--rd-100);color:var(--rd-600)}
/* فاصلٌ نحيل — باسمٍ خاصٍّ بالتطبيق: الصنف العامّ `divider` في
   bq-panel.css فاصلُ نصٍّ بخطّين زائفين (::before/::after) وكان
   يرسمهما داخل هذا الخطّ. */
.ap-divider{height:1px;background:var(--line)}
.dash{height:1px;background-image:repeating-linear-gradient(to left,var(--line-2) 0 6px,transparent 6px 12px)}
.pad{padding:14px 18px 0}
.scroll{display:flex;flex-direction:column;gap:12px;padding:14px 18px 24px}
/* display:block شرطٌ لا زينة: الصندوق السطريّ لا يأخذ عرضًا ولا ارتفاعًا
   ولا يقصّ — فكانت صورة الصنف مربّعة الأركان وتمطّ سطرها (منيو المتجر) */
.thumb{display:block;border-radius:var(--r-md);background:var(--brand-200);overflow:hidden;flex:0 0 auto;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
img.broken{visibility:hidden}
.thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--brand-600)}
.avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand-400),var(--brand-600));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;overflow:hidden;flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- Buttons · chips · pills · fields ---------- */
.ap-btn{height:54px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-head);font-size:16px;font-weight:700;border:0;cursor:pointer;padding:0 18px;text-decoration:none;transition:transform .15s,filter .15s;width:100%}
.ap-btn:active{transform:scale(.985)}
.ap-btn[disabled],.ap-btn.loading{opacity:.6;pointer-events:none}
.ap-btn.primary{background:var(--brand-700);color:#fff;box-shadow:0 6px 18px rgba(110,95,78,.28)}
.ap-btn.go{background:var(--go-600);color:#fff;box-shadow:0 6px 18px rgba(18,115,79,.26)}
.ap-btn.ghost{background:var(--brand-100);color:var(--brand-800)}
.ap-btn.out{background:#fff;border:1.5px solid var(--line-2);color:var(--ink-700)}
.ap-btn.light{background:#fff;color:var(--go-700)}
.ap-btn.glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.ap-btn.sm{height:40px;border-radius:var(--r-sm);font-size:14px;padding:0 16px;width:auto}
.ap-btn.xs{height:34px;border-radius:10px;font-size:12.5px;padding:0 12px;width:auto}
.ap-btn.split{justify-content:space-between}
.ap-btn .cnt{background:rgba(255,255,255,.22);border-radius:var(--r-full);padding:2px 9px;font-size:12px}
.link{color:var(--brand-700);font-weight:700;font-size:13px;background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
/* «الاتجاهات» في الاستلام الشخصي خضراء (22b · 27d · 35): «.go» وحدها
   لا تكفي — «.link» بعدها في الملف فتغلبها بنفس الأولوية. */
.link.go{color:var(--go-700)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{height:34px;border-radius:var(--r-full);padding:0 14px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--ink-600);white-space:nowrap;flex:0 0 auto;cursor:pointer;text-decoration:none;font-family:inherit}
.chip.on{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:700;white-space:nowrap}
.pill.go{background:var(--go-100);color:var(--go-700)}.pill.am{background:var(--am-100);color:var(--am-600)}
.pill.rd{background:var(--rd-100);color:var(--rd-600)}.pill.br{background:var(--brand-100);color:var(--brand-800)}
.pill.in{background:var(--in-100);color:var(--in-600)}.pill.xs{height:20px;font-size:10px;padding:0 8px}
.ap-field{height:50px;border-radius:15px;border:1.5px solid var(--line-2);background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;font-size:14px;color:var(--ink-900);font-family:var(--font-head)}
.ap-field:focus-within{border-color:var(--brand-600);box-shadow:0 0 0 4px rgba(139,123,104,.12)}
.ap-field input,.ap-field textarea,.ap-field select{border:0;outline:0;background:transparent;flex:1;min-width:0;font:inherit;color:inherit;height:100%}
.ap-field input::placeholder,.ap-field textarea::placeholder{color:var(--ink-400)}
.ap-field.area{height:auto;padding:12px 14px;align-items:flex-start}
.ap-field.area textarea{resize:none;min-height:64px;line-height:1.7}
.ap-field .ico{color:var(--brand-700)}
.ap-field.sm{height:46px;font-size:13px}
.ap-field.err{border-color:var(--rd-600)}
.ap-error{color:var(--rd-600);font-size:12.5px;font-weight:600;margin-top:8px;display:none}
.ap-error.on{display:block}
.ap-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);font-size:12.5px;line-height:1.7}
.ap-note.soft{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--ink-500)}
.ap-note.go{background:var(--go-100);border:1px solid #CFE6D9;color:var(--go-700)}
.ap-note.am{background:var(--am-100);border:1px solid #F3DDBE;color:var(--am-700)}
.ap-note.rd{background:var(--rd-100);border:1px solid #F3CACA;color:var(--rd-700)}
.ap-note.in{background:var(--in-100);border:1px solid #CFDDEC;color:var(--in-700)}
.radio{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--ink-200);display:flex;align-items:center;justify-content:center;flex:0 0 21px}
.radio.on{border-color:var(--brand-700)}
.radio.on::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--brand-700)}
.check{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--ink-200);background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 21px;color:#fff}
.check.on{background:var(--brand-700);border-color:var(--brand-700)}
.check svg{display:none}.check.on svg{display:block}
.stepper{display:inline-flex;align-items:center;gap:4px;background:var(--canvas);border:1px solid var(--line);border-radius:14px;padding:5px;flex:0 0 auto}
.stepper button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--brand-700);display:flex;align-items:center;justify-content:center;cursor:pointer}
.stepper button.plus{background:var(--brand-700);color:#fff;border-color:var(--brand-700)}
/* «.stepper» اسمٌ عند الاثنين: في bq-panel.css شريطُ خطواتٍ رمادي
   (.stepper span{flex:1;height:4px;background:var(--line-2)}) يخصّ
   نموذج التسجيل، وهنا عدّادُ الكمية. و«span» في القاعدة تلك يصيب
   رقم الكمية <span class="q num">: ما لم يعلنه «.stepper .q» صراحةً
   كان يأتي منها — فيصير الرقم شرطةً رماديةً بعلوّ 4px ويهبط الرقم
   تحت خطّ الزرّين. نعلن هنا كل ما تلمسه تلك القاعدة (الارتفاع
   والخلفية والانحناء والمرونة) فلا يبقى لها أثر. */
.stepper .q{width:30px;height:auto;flex:0 0 auto;background:none;border-radius:0;text-align:center;font-weight:700;font-size:15px;line-height:1}
.stepper.sm{border-radius:11px;padding:3px}.stepper.sm button{width:28px;height:28px;border-radius:var(--r-xs)}.stepper.sm .q{width:26px;font-size:13px}
.seg{display:flex;gap:4px;padding:4px;border-radius:15px;background:var(--brand-100)}
.seg button{flex:1;height:40px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--ink-400);font-family:inherit;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.seg button.on{background:#fff;color:var(--ink-900);box-shadow:var(--sh-1)}
.bars{display:flex;gap:4px}
.bars i{flex:1;height:5px;border-radius:4px;background:var(--line-2)}
.bars i.done{background:var(--go-600)}.bars i.now{background:#E0892F}
/* رقم الطلب للاستلام الشخصي (27d): ما يعرضه العميل للكاشير — أكبر
   شيء في الشاشة، فهو كلّ ما يحتاجه عند المنضدة. */
.pickup-code{background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--sh-3);padding:18px 16px;text-align:center;margin-top:12px}
.pickup-code .no{display:block;font-size:40px;font-weight:800;color:#0C5F42;letter-spacing:1px;margin-top:4px;direction:ltr}
.code-boxes{display:flex;gap:5px;direction:ltr}
.code-boxes b{width:34px;height:40px;border-radius:10px;background:#fff;border:1px solid #CFE6D9;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:var(--go-700)}

/* ---------- Sticky bottom bar & sheets ---------- */
/* The cart / pay bar is seen the moment an item is added — never after a scroll.
   It was position:sticky, and sticky inside the desktop card (overflow:hidden)
   simply fell to the bottom of a long menu. Fixed to the viewport at every
   width, the width of the screen column, above the tab bar and the safe area. */
.ap-sticky{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--ap-w);z-index:35;background:#fff;border-top:1px solid var(--line);padding:14px 18px calc(14px + var(--safe-b));box-shadow:0 -10px 30px rgba(74,63,51,.16)}
.ap-sticky.hide{display:none}
.ap.has-sticky{padding-bottom:calc(92px + var(--safe-b))}
.ap.has-tabs.has-sticky .ap-sticky{bottom:calc(var(--ap-tab-h) + var(--safe-b))}
.ap.has-tabs.has-sticky{padding-bottom:calc(var(--ap-tab-h) + 92px + var(--safe-b))}
.ap-overlay{position:fixed;inset:0;background:rgba(23,19,16,.5);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.ap-overlay.on{opacity:1;pointer-events:auto}
.ap-sheet{position:fixed;bottom:0;left:50%;transform:translate(-50%,105%);width:100%;max-width:var(--ap-w);max-height:92vh;background:#fff;border-radius:26px 26px 0 0;box-shadow:0 -6px 24px rgba(74,63,51,.1);z-index:70;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.ap-sheet.on{transform:translate(-50%,0)}
.ap-sheet .grab{width:42px;height:4px;border-radius:4px;background:var(--line-2);margin:12px auto 4px;flex:0 0 auto}
.ap-sheet .body{overflow-y:auto;padding:8px 20px 20px;flex:1}
/* flex:0 0 auto — الشريط السفليّ لا ينكمش مهما طال المحتوى فوقه (تصميم 11) */
.ap-sheet .foot{flex:0 0 auto;padding:14px 20px calc(14px + var(--safe-b));border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(74,63,51,.1);background:#fff}
.ap-sheet .hero{height:220px;background:var(--brand-200);position:relative;border-radius:26px 26px 0 0;overflow:hidden;flex:0 0 auto}
.ap-sheet .hero img{width:100%;height:100%;object-fit:cover}
.ap-sheet .hero .x{position:absolute;top:14px;inset-inline-start:14px}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.opt-row:last-child{border-bottom:0}
.opt-row .price{font-size:13px;font-weight:600;color:var(--brand-900)}
.opt-row .price.zero{color:var(--ink-300)}
/* التنبيه السفلي كما في التطبيق (showBqToast · 09b): شريطٌ داكن #171310 بزوايا 16،
   دائرةٌ ملوّنة بالنبرة فيها الأيقونة، عنوانٌ وسطرٌ تحته، وزرّ إجراءٍ («تراجع») —
   لا شريطٌ أخضر أو أحمر بنصٍّ وحده. يطفو فوق شريط السلة والتبويبات. */
.ap-toast{position:fixed;left:50%;bottom:calc(12px + var(--safe-b));transform:translate(-50%,8px);max-width:calc(var(--ap-w) - 36px);width:calc(100% - 36px);background:#171310;color:#fff;padding:12px 14px;border-radius:var(--r-md);box-shadow:0 10px 26px rgba(0,0,0,.3);z-index:99;display:flex;align-items:center;gap:11px;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;text-align:start}
.ap-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ap-toast .ic{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:flex;align-items:center;justify-content:center;background:var(--go-600);color:#fff}
.ap-toast .ic .i{width:17px;height:17px}
.ap-toast.err .ic{background:var(--rd-600)}
.ap-toast.am .ic{background:var(--am-600)}
.ap-toast.info .ic{background:var(--in-600,#2563EB)}
.ap-toast .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-toast .tt{font-size:13.5px;font-weight:700;line-height:1.5}
.ap-toast .st{font-size:12px;color:rgba(255,255,255,.72);line-height:1.5;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-toast .act{flex:0 0 auto;height:32px;padding:0 12px;border-radius:var(--r-xs);background:rgba(255,255,255,.14);color:#fff;border:0;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
body:has(.ap.has-sticky) .ap-toast{bottom:calc(96px + var(--safe-b))}
body:has(.ap.has-tabs) .ap-toast{bottom:calc(var(--ap-tab-h) + 12px + var(--safe-b))}
body:has(.ap.has-tabs.has-sticky) .ap-toast{bottom:calc(var(--ap-tab-h) + 96px + var(--safe-b))}

/* ---------- Home (05) ---------- */
.ap-home-head{padding:12px 20px 14px;background:#fff;border-bottom:1px solid var(--line)}
.ap-home-head .addr{display:flex;align-items:center;gap:5px;color:var(--brand-700);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;text-align:start}
.ap-home-head .addr span{font-size:15px;font-weight:700;color:var(--ink-900)}
.ap-search{height:48px;border-radius:15px;border:1px solid var(--line);background:var(--canvas);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--ink-400);font-size:14px;text-decoration:none;margin-top:13px}
.ap-search input{border:0;background:transparent;flex:1;font:inherit;outline:0;color:var(--ink-900)}
.ap-sec{padding:16px 0 0}
.ap-sec .head{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:12px}
/* .rail نفسه معرَّفٌ في bq-web.css (الشريط مكوّنٌ مشترك مع الرئيسية العامّة) — هنا هوامش الشاشة فقط */
.ap .rail{padding:0 20px 12px}
.cat-tile{position:relative;flex:0 0 176px;width:176px;height:132px;border-radius:22px;overflow:hidden;background:#8B7B68;box-shadow:0 7px 12px -7px rgba(74,63,51,.34);color:#fff;text-decoration:none;display:block}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,13,.9) 4%,rgba(20,16,13,.34) 52%,rgba(20,16,13,.04) 100%)}
.cat-tile .t{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;z-index:1}
.cat-tile .t b{font-size:16.5px;font-weight:700}
.cat-tile .t small{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.78);margin-top:4px}
.cat-tile .off{position:absolute;top:10px;inset-inline-end:10px;z-index:1;background:#C2410C;color:#fff;height:23px;border-radius:var(--r-full);padding:0 9px;font-size:10.5px;font-weight:700;display:flex;align-items:center}
/* نقاط المؤشّر تحت شريط الأقسام (05): النقطة الحاليّة شرطةٌ عريضة. */
.rail-dots{display:flex;gap:6px;justify-content:center;margin-top:2px;padding-bottom:4px}
.rail-dots i{width:4px;height:4px;border-radius:3px;background:#DED5C8;transition:width .2s}
.rail-dots i.on{width:18px;background:var(--brand-600)}

/* بطاقة العرض (05): لافتةٌ مرصوصة لا سطرًا — «انسخ الكود» ظاهرٌ بنصّه. */
.promo{margin:4px 20px 0;border-radius:var(--r-lg);background:#6E5F4E;color:#fff;padding:14px 16px;overflow:hidden;position:relative;isolation:isolate;box-shadow:0 14px 22px -12px rgba(74,63,51,.45)}
/* الصورة خلف النصّ وتدرّجٌ من الطرف كما في 05: rgba(38,31,25,.93) → rgba(64,54,44,.35) */
.promo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.promo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(38,31,25,.93),rgba(64,54,44,.35))}
[dir=ltr] .promo::before{background:linear-gradient(90deg,rgba(38,31,25,.93),rgba(64,54,44,.35))}
.promo .pill{background:rgba(255,255,255,.2);color:#fff;font-size:10.5px;height:22px}
.promo b{font-size:18.5px;font-weight:700;display:block;margin-top:8px;line-height:1.4}
.promo small{font-size:12px;color:rgba(255,255,255,.75);display:block;margin-top:5px}
.promo .code{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand-900);height:34px;border-radius:var(--r-full);padding:0 15px;font-size:12.5px;font-weight:700;border:0;cursor:pointer;font-family:inherit}
.promo .code .num{letter-spacing:1.5px}

/* زرّ السلة الطافي فوق شريط التبويبات في الرئيسية (shell_screen.dart) */
.fab-cart{position:fixed;inset-inline-end:16px;bottom:calc(var(--ap-tab-h) + 14px + var(--safe-b));z-index:46;display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 18px;border-radius:var(--r-full);background:var(--brand-700);color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 22px rgba(74,63,51,.34)}
.fab-cart .ic{position:relative;display:flex;align-items:center}
.fab-cart .cnt{position:absolute;top:-7px;inset-inline-end:-9px;min-width:18px;height:18px;border-radius:var(--r-full);background:#fff;color:var(--brand-800);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px}
.ap-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px;gap:8px}
.ap-empty .ic{width:92px;height:92px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ap-empty h2{font-size:19px;font-weight:700}
.ap-empty p{font-size:13.5px;color:var(--ink-500);line-height:1.8;max-width:300px}
.ap-empty .ap-btn{margin-top:12px;width:auto;min-width:200px}
.outside-bar{margin:12px 18px 0;padding:11px 13px;border-radius:14px;background:var(--am-100);border:1px solid #F3DDBE;color:var(--am-700);font-size:12.5px;font-weight:600;display:flex;gap:9px;align-items:flex-start;line-height:1.6}

/* ---------- Store (09 · 12) ---------- */
.sh-cover{height:238px;position:relative;background:var(--brand-700);border-radius:0 0 var(--r-xl) var(--r-xl);overflow:hidden}
.sh-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,11,.55),rgba(23,19,16,.2) 50%,rgba(23,19,16,.3))}
.sh-cover .top{position:absolute;top:14px;inset-inline:18px;display:flex;justify-content:space-between;z-index:1}
.sh-head{margin:-52px 18px 0;position:relative;z-index:2}
.sh-logo{width:60px;height:60px;flex:0 0 60px;border-radius:19px;border:1px solid var(--line-2);background:var(--brand-200);overflow:hidden}
.sh-logo img{width:100%;height:100%;object-fit:cover}
.sh-stats{display:flex;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.sh-stats>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.sh-stats>div+div{border-inline-start:1px solid var(--line)}
.sh-stats .v{font-size:14.5px;font-weight:700;color:var(--ink-900);display:flex;align-items:center;gap:4px}
.sh-stats .v .star{color:var(--am-600)}
.sh-promo{display:flex;gap:8px;align-items:center;margin-top:12px;padding:10px 12px;background:var(--am-100);border-radius:13px;color:#8A5A12;font-size:13px;font-weight:600}
.sh-tabs{position:sticky;top:0;z-index:25;background:var(--canvas);padding:12px 18px 10px;box-shadow:0 10px 18px -16px rgba(74,63,51,.5)}
.sh-tabs .chips .chip{height:33px;font-size:12.5px}
/* أقسام متجر الشبكة (12 · 12b): صورٌ مدوّرة بأسمائها لا أزرارًا نصّية
   — فمتجر البقالة والصيدلية والهدايا يُتصفّح بالصورة كما في التطبيق. */
.sh-tabs.cats{padding:12px 16px 8px}
.sh-cats{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.sh-cats::-webkit-scrollbar{display:none}
.sh-cats .cat{flex:0 0 74px;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;cursor:pointer}
.sh-cats .cat .fr{width:66px;height:66px;border-radius:21px;padding:2px;border:2px solid transparent;background:var(--canvas)}
.sh-cats .cat .thumb{width:100%;height:100%;border-radius:17px;background:var(--brand-200)}
.sh-cats .cat .lb{font-size:11px;line-height:1.35;font-weight:600;color:var(--ink-500);text-align:center}
.sh-cats .cat.on .fr{border-color:var(--brand-700)}
.sh-cats .cat.on .lb{font-weight:800;color:var(--brand-900)}
.sh-find{display:flex;align-items:center;gap:10px;height:42px;margin-top:12px;padding:0 14px;border-radius:var(--r-md);background:var(--canvas);border:1.5px solid var(--line);color:var(--ink-400);font-size:13px;font-family:var(--font-head)}
.sh-find:focus-within{border-color:var(--brand-600);background:#fff}
.sh-find input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:inherit;color:var(--ink-900);height:100%}
.sh-find input::placeholder{color:var(--ink-400)}
/* صفحة المتجر: الجوال تطبيقٌ حرفًا بحرف — الغلاف شفّاف فتتدفّق البطاقة
   تحت الصورة؛ والعمود الجانبيّ وبطاقاته لا وجود لها أصلًا. */
.ap.shop-store{--ap-w:760px}
.sh-side{display:contents}
.sh-rail{display:none}
.sh-app,.sh-sum,.sh-where{display:none}
.menu-sec{padding:0 18px;scroll-margin-top:118px}
.menu-sec h2{font-size:16px;font-weight:700;margin:14px 2px 8px;display:flex;align-items:center;gap:8px}
.menu-sec h2 small{font-size:12px;color:var(--ink-400);font-weight:600}
.p-list{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-1);padding:2px 15px}
.p-row{display:flex;gap:12px;padding:13px 0;align-items:flex-start;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:start;background:none;border-inline:0;border-top:0;font-family:inherit;color:inherit}
.p-row:last-child{border-bottom:0}
.p-row .nm{font-size:15px;font-weight:700;color:var(--ink-900);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.p-row .ds{font-size:12px;color:var(--ink-400);line-height:1.6;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-row .pr{display:flex;align-items:center;gap:8px;margin-top:5px}
.p-row .pr b{font-size:14.5px;color:var(--brand-900)}
.p-row .pr s{font-size:12px;color:var(--ink-300)}
.p-row .im{position:relative;flex:0 0 82px;width:82px;height:82px}
.p-row .im .thumb{width:82px;height:82px;border-radius:18px}
.p-add{position:absolute;bottom:-8px;inset-inline-end:-8px;min-width:34px;height:34px;border-radius:var(--r-sm);background:var(--brand-700);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(110,95,78,.35);font-size:14px;font-weight:800;gap:4px;padding:0 8px}
[dir=ltr] .p-add{left:auto;right:-8px}
.p-add.in{background:var(--go-600);box-shadow:0 4px 12px rgba(18,115,79,.35)}
.p-add.in small{font-size:11px;font-weight:700}
/* بطاقة الشبكة (12 · 12b) — بقالة وصيدلية وهدايا وورود.
   ليست بطاقة المطعم في شبكة: الصورة فوق بعلوّ ثابت والشارة في
   ركنها، ثم الاسم في سطرين، ثم سطر الحجم/الوحدة، ثم السعر، ثم زرّ
   «أضف» بعرض البطاقة كلّه في أسفلها — كما في التطبيق حرفًا بحرف
   (_GridCard في store_screen.dart) و12-market.html. */
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.p-card{background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--sh-1);padding:9px;cursor:pointer;text-align:start;font-family:inherit;color:inherit;display:flex;flex-direction:column}
.p-card .im{position:relative;height:108px;flex:0 0 108px}
.p-card .thumb{width:100%;height:108px;border-radius:13px;background:#F3EEE6}
/* الشارة في ركن الصورة العلويّ (الجهة الأولى في اتجاه القراءة) */
.p-card .im .off-tag{position:absolute;top:7px;inset-inline-start:7px;font-size:9.5px;z-index:1}
.p-card .nm{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink-900);margin-top:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-card .sub{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-card .pr{display:flex;align-items:center;gap:6px;margin:7px 0 9px}
.p-card .pr b{font-size:14px;color:var(--brand-900)}
.p-card .pr s{font-size:11.5px;color:var(--ink-400)}
/* «أضف» بعرض البطاقة، ومُلصَقٌ بأسفلها فتستوي البطاقات في الصفّ */
.p-card .cta{margin-top:auto;height:34px;flex:0 0 34px;border-radius:11px;background:var(--brand-100);color:var(--brand-900);display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:700}
.p-card .cta.in{background:var(--go-600);color:#fff}
.off-tag{background:#C2410C;color:#fff;height:20px;border-radius:var(--r-full);padding:0 8px;font-size:10px;font-weight:700;display:inline-flex;align-items:center}
.closed-bar{margin:12px 18px 0;padding:12px 14px;border-radius:var(--r-md);background:var(--rd-100);border:1px solid #F3CACA;color:var(--rd-700);font-size:13px;font-weight:600;line-height:1.6}

/* ---------- Cart (15) · Checkout (22) ---------- */
.cart-line{display:flex;gap:12px;padding:13px 0;align-items:flex-start;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-line .thumb{width:62px;height:62px;border-radius:var(--r-md)}
.totals .between{padding:6px 0;font-size:13px;color:var(--ink-600);font-weight:500}
.totals .between .v{color:var(--ink-700)}
.totals .total{font-size:15.5px;font-weight:700;color:var(--ink-900)}
.totals .total .v{font-size:18px;color:var(--brand-900)}
.pay-opt{display:flex;align-items:center;gap:11px;padding:13px;border-radius:15px;border:1.5px solid var(--line);background:#fff;margin-bottom:9px;cursor:pointer}
.pay-opt.on{border-color:var(--brand-700);background:var(--brand-50)}
.pay-opt.off{opacity:.55}
.pay-opt .logo{width:38px;height:28px;border-radius:7px;background:var(--brand-100);display:flex;align-items:center;justify-content:center;color:var(--brand-700);font-size:9.5px;font-weight:700;flex:0 0 38px}
.sched-day{margin-top:14px}
.sched-day .d{font-size:13px;font-weight:700;margin-bottom:8px}
.sched-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sched-slots button{height:40px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:#fff;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-700);cursor:pointer}
.sched-slots button.on{border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-900)}

/* ---------- Login (18 · 19 · 20) ----------
   لوحةٌ داكنة ثم بطاقةٌ بيضاء تعلوها — مقاييس AuthScaffold في تطبيق
   العميل (widgets/auth_hero.dart) حرفًا: حشوة اللوحة 22، الشعار 60،
   العنوان 25px/800 بارتفاع سطر 1.5، الميزات مربّعاتٌ شفّافة 15px،
   انحناء 30 أسفل اللوحة، والبطاقة ترتفع 30 بهامش 16 وحشوة 18/16. */
/* ما تحت البطاقة لون الصفحة لا أبيض — كما في Scaffold(canvas) بالتطبيق */
.auth{padding:0 0 40px;background:transparent;flex:1}
.auth-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 30px 30px;background:var(--brand-950)}
.auth-hero .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 68%}
/* تدرّج الهوية فوق الصورة: ‎#2E271F ← #4A3F33 ← #2E271F‎ */
.auth-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(46,39,31,.9),rgba(74,63,51,.78) 55%,rgba(46,39,31,.95))}
.auth-hero .in{padding:26px 22px 56px}
.auth-hero .top{display:flex;align-items:center;gap:10px}
.auth-hero .glass-back{width:40px;height:40px;flex:0 0 40px;border-radius:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.auth-hero .glass-back:hover{background:rgba(255,255,255,.24)}
.auth-hero .logo{height:60px;width:auto}
.auth-hero .pill{margin-inline-start:auto;flex:0 0 auto;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:6px 12px;white-space:nowrap}
.auth-hero .hd{margin-top:20px;font-family:var(--font-head);font-size:25px;font-weight:800;line-height:1.5;color:#fff}
.auth-hero .feats{display:flex;gap:8px;margin-top:16px}
.auth-hero .feats > span{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:15px;background:rgba(255,255,255,.1);color:#fff;text-align:center}
.auth-hero .feats b{max-width:100%;font-size:11.5px;font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* خطوة الرمز والاسم: بلا ميزاتٍ كما في التطبيق — ولوحةٌ أقصر */
.auth-hero.lean .feats{display:none}
.auth-hero.lean .in{padding-bottom:48px}
.auth-card{position:relative;z-index:1;margin:-30px 16px 0;padding:18px 16px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 28px rgba(74,63,51,.12),0 2px 7px rgba(74,63,51,.06)}
.auth-card h2{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.2px;color:var(--ink-900)}
.auth-card section[data-step=phone] h2{font-size:15px;font-weight:600;letter-spacing:0}
.auth-card section[data-step=phone] h2 + .t-rg{margin-top:4px}
.auth-card h2 + .t-rg{margin-top:10px}
.auth-card .ap-error{margin-top:10px}
.auth-card .ap-btn{margin-top:16px}
.auth-card section[data-step=otp] .ap-btn{margin-top:24px}
.auth-card .ap-note{margin-top:20px;font-size:11.5px}
.auth-card .resend{margin-top:20px;text-align:center;font-size:13.5px;color:var(--ink-400)}
.auth-card .resend b{color:var(--brand-700)}
/* «tel» لا «phone»: الصنف .phone في bq-panel.css هو إطار جوالٍ تجريبيّ
   (width:260px · aspect-ratio · ظلّ · margin auto)، وكان يسرق حقل رقم
   الجوال في صفحة الدخول فيخرج ضيّقًا في المنتصف بظلٍّ غريب. */
.auth .ap-field.tel{height:58px;font-size:17px;direction:ltr;justify-content:flex-start;margin-top:14px}
.auth .ap-field.tel .cc{color:var(--ink-500);font-weight:600;display:flex;align-items:center;gap:8px}
/* العلم 26×18 بالشهادة والسيف — لا مستطيلٌ أخضر أصمّ (SaudiFlag في التطبيق) */
.auth .ap-field.tel .cc i{width:26px;height:18px;flex:0 0 26px;border-radius:3px;background:#165D31;display:inline-flex;align-items:center;justify-content:center}
.auth .ap-field.tel .cc i svg{width:22px;height:14px;fill:none;stroke:#fff;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.auth .ap-field.tel .vl{width:1px;height:24px;background:var(--line-2)}
.auth .ap-field.tel input{font-weight:600;letter-spacing:1px;font-size:17px}
.auth .ap-field:not(.tel){margin-top:14px}
.otp{display:flex;gap:12px;margin-top:30px;direction:ltr;justify-content:center}
.otp input{width:66px;height:74px;border-radius:18px;border:1.5px solid var(--line-2);background:var(--brand-50);text-align:center;font-size:27px;font-weight:600;color:var(--ink-800);outline:0;font-family:inherit}
.otp input:focus,.otp input.on{border-color:var(--brand-600)}
.otp.otp-6{gap:8px}.otp.otp-6 input{width:46px;height:60px;font-size:22px;border-radius:14px}
/* الرمز مُلئ تلقائيًا (بلا مزوّد رسائل) — سطرٌ صغير محايد كإشعار الملء من الرسالة */
.otp-auto{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;color:var(--go-700);font-size:12.5px;font-weight:600}
.otp-auto .i{color:var(--go-600)}
.otp-auto.hide{display:none}
.agree{display:flex;gap:10px;margin-top:14px;align-items:flex-start;cursor:pointer}

/* ---------- Success (26) ---------- */
.ap.success{background:linear-gradient(165deg,#17916B,#0B5239);color:#fff;min-height:calc(100vh - var(--head-h));position:relative;overflow:hidden}
.ap.success .ring{position:absolute;top:80px;left:50%;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.ap.success .mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 30px 20px;text-align:center;position:relative}
.ap.success .mark{width:104px;height:104px;border-radius:50%;background:#fff;color:#12734F;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.ap.success h1{font-size:26px;font-weight:700;color:#fff;margin-top:24px}
.ap.success p{font-size:14px;color:rgba(255,255,255,.8);margin-top:10px;line-height:1.8}
.ap.success .box{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:16px 20px;margin-top:26px;width:100%}
.ap.success .box .between{font-size:12.5px;color:rgba(255,255,255,.72)}
.ap.success .box .between b{font-size:15px;color:#fff}
.ap.success .box .hr{height:1px;background:rgba(255,255,255,.14);margin:12px 0}
.ap.success .foot{padding:0 26px 40px;position:relative}
.ap.success .foot .ap-btn+.ap-btn{margin-top:10px}
.ap.success .foot p{text-align:center;margin-top:13px;font-size:12.5px;color:rgba(255,255,255,.74)}
.ap.success .foot p b{color:#fff;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ---------- Tracking (29) ---------- */
.ap.track{background:#E7E0D5}
.track-map{position:relative;height:56vh;min-height:360px;background:#E7E0D5;overflow:hidden}
.track-map .gmap{position:absolute;inset:0}
.track-map .fake{position:absolute;inset:0;background-image:linear-gradient(rgba(122,107,88,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(122,107,88,.13) 1px,transparent 1px);background-size:46px 46px}
.track-map .fake i{position:absolute;background:#F7F3EC;box-shadow:0 0 0 1px rgba(122,107,88,.1)}
.track-map .top{position:absolute;top:12px;inset-inline:18px;display:flex;justify-content:space-between;z-index:2}
.track-map .eta{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:#171310;color:#fff;border-radius:var(--r-full);padding:10px 18px;font-size:13px;font-weight:700;box-shadow:0 8px 20px rgba(23,19,16,.28);z-index:2;white-space:nowrap}
.mk{width:36px;height:36px;border-radius:50%;border:4px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mk.store{background:var(--brand-700)}.mk.home{background:var(--in-600)}.mk.driver{background:var(--go-600);width:42px;height:42px}
.track-sheet{background:#fff;border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:3;padding:14px 20px 26px;box-shadow:0 -6px 24px rgba(74,63,51,.1)}
.track-sheet .grab{width:42px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 12px}
.driver-box{display:flex;align-items:center;gap:12px;margin-top:17px;padding:12px;background:var(--brand-50);border-radius:17px;border:1px solid var(--brand-100)}
.code-box{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;background:var(--go-100);border-radius:var(--r-md);border:1px solid #CFE6D9}
.code-box .ic{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-sm);background:var(--go-600);color:#fff;display:flex;align-items:center;justify-content:center}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:6px}
.timeline .st{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.timeline .st .dot{width:12px;height:12px;border-radius:50%;background:var(--line-2);margin-top:5px;flex:0 0 12px;position:relative}
.timeline .st.done .dot{background:var(--go-600)}
.timeline .st.now .dot{background:#E0892F;box-shadow:0 0 0 4px rgba(224,137,47,.2)}
.timeline .st .t-md{font-size:13.5px}
.timeline .st.todo .t-md{color:var(--ink-400);font-weight:600}

/* ---------- Orders (33) · Account (38) · Wallet (42) ---------- */
.ord-card{display:flex;align-items:center;gap:10px}
.ord-card .thumb{width:42px;height:42px;border-radius:13px}
.ord-drv{display:flex;align-items:center;gap:9px;margin-top:9px;padding:8px 10px;background:#F6FBF8;border-radius:var(--r-sm);border:1px solid #CFE6D9;font-size:12px;color:var(--go-700)}
.acc-avatar-pick{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.acc-avatar-pick .avatar.big{width:84px;height:84px;border-radius:50%;font-size:26px;background:var(--brand-100);color:var(--brand-900);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800}
.acc-avatar-pick .avatar.big img{width:100%;height:100%;object-fit:cover}
.acc-avatar-pick .cam{position:absolute;top:58px;inset-inline-start:calc(50% - 44px);width:28px;height:28px;border-radius:50%;background:var(--brand-700);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.acc-head{background:linear-gradient(160deg,#8B7B68,#5C4F40);padding:18px 20px 46px;border-radius:0 0 30px 30px;color:#fff}
.acc-head .nm{font-size:17px;font-weight:700}
.acc-head .ph{font-size:12.5px;color:rgba(255,255,255,.72)}
.acc-head .avatar{width:58px;height:58px;border-radius:19px;border:2px solid rgba(255,255,255,.55);background:#CFC7BC;font-size:20px}
.acc-stats{margin:-32px 18px 0;position:relative;z-index:2;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-3);padding:16px 14px;display:flex}
.acc-stats>a,.acc-stats>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:inherit}
.acc-stats>*+*{border-inline-start:1px solid var(--line)}
.acc-stats .v{font-size:16px;font-weight:700;color:var(--brand-900)}
.acc-stats .v.am{color:var(--am-600)}
.wallet-card{background:linear-gradient(135deg,#6E5F4E,#3A3129);color:#fff;border-radius:22px;padding:20px;position:relative;overflow:hidden}
.wallet-card small{font-size:12.5px;color:#E3D7C7}
.wallet-card b{font-size:32px;font-weight:800;display:block;margin-top:6px}
.wallet-card .sar{font-size:14px;font-weight:600;margin-inline-start:6px}
.tx{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tx:last-child{border-bottom:0}
.tx .ic{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.tx .ic.plus{background:var(--go-100);color:var(--go-600)}.tx .ic.minus{background:var(--rd-100);color:var(--rd-600)}
.tx .amt{font-weight:800;font-size:14px}
.tx .amt.plus{color:var(--go-600)}.tx .amt.minus{color:var(--ink-900)}
.notif{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start;text-decoration:none;color:inherit}
.notif:last-child{border-bottom:0}
.notif .ic{width:40px;height:40px;border-radius:13px;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;flex:0 0 40px;overflow:hidden}
.notif .ic img{width:100%;height:100%;object-fit:cover}
.notif.unread .t-md::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#D64545;margin-inline-end:6px;vertical-align:middle}
.addr-card{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.addr-card:last-child{border-bottom:0}
.addr-card .ic{width:40px;height:40px;border-radius:13px;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.addr-card .acts{display:flex;gap:10px;margin-top:8px}
.coupon{display:flex;gap:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;margin-bottom:10px}
.coupon .l{flex:0 0 92px;background:var(--brand-700);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;text-align:center}
.coupon .l b{font-size:13px;letter-spacing:.5px}
.coupon .r{flex:1;padding:12px 14px}
.coupon.off{opacity:.55}

/* ---------- Address map (21) ---------- */
.addr-map{position:relative;height:46vh;min-height:300px;background:#E7E0D5;overflow:hidden}
.addr-map .gmap{position:absolute;inset:0}
.addr-map .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}
.addr-map .pin .lbl{padding:7px 12px;border-radius:var(--r-sm);background:#171310;color:#fff;font-size:11.5px;font-weight:700;margin-bottom:6px;white-space:nowrap}
.addr-map .pin .pn{width:44px;height:44px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--brand-700);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(74,63,51,.35)}
.addr-map .pin .pn i{width:15px;height:15px;border-radius:50%;background:#fff}
.addr-map .top{position:absolute;top:14px;inset-inline:16px;display:flex;gap:10px;align-items:center;z-index:3}
.addr-map .loc{position:absolute;bottom:40px;inset-inline-end:16px;z-index:3}
.addr-sheet{background:#fff;border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:3;padding:14px 18px 24px;box-shadow:0 -6px 24px rgba(74,63,51,.1)}
.addr-sheet .grab{width:42px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 12px}
/* ثلاثة حقول في سطرٍ واحد على كل عرض — شبكةٌ لا صفٌّ مرن، فلا تنزل
   «شقة» سطرًا تحت «مبنى» على شاشةٍ ضيّقة (تصميم 21). */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.three .ap-field{flex:1;padding:0 10px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld .lb{font-size:11.5px;font-weight:700;color:var(--ink-500);padding-inline-start:3px;display:block}
.fld .lb .opt{font-weight:600;color:var(--ink-400)}
.fld .ap-field{width:100%}
.addr-hint{font-size:11.5px;line-height:1.7;color:var(--ink-400);margin-top:6px;padding-inline-start:3px}

/* ---------- Mobile = the app ---------- */
@media (max-width:767px){
  body.app-shell .w-header,body.app-shell .site-foot,body.app-shell .w-footer,body.app-shell footer{display:none!important}
  body.app-shell{padding-bottom:0}
  .ap{max-width:none;min-height:100vh;min-height:100dvh}
  .ap.has-tabs{padding-bottom:calc(var(--ap-tab-h) + var(--safe-b))}
  .ap-tabbar{display:flex}
  .ap-sheet{max-width:none}
  .ap.success{min-height:100vh;min-height:100dvh}
  .ap.track .track-map{height:52vh}
  .ap-sticky{max-width:none;border-radius:0}

}
/* ---------- Desktop = site layout + app screen centred ---------- */
@media (min-width:768px){
  body.app-shell main{padding:28px 20px 56px;background:var(--surface-2)}
  /* overflow:clip not hidden — «hidden» makes .ap a scroll container, and every
     position:sticky inside it (cart bar, category tabs) stops sticking */
  .ap{border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-2);overflow:clip;min-height:0}
  .ap.full{border:0;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
  .ap.success{border-radius:var(--r-xl);min-height:640px}
  .ap-bar{position:static}
  /* شريط القسم على سطح المكتب بطاقةٌ بزوايا 20 كبطاقة رأس الرئيسية — لا شريطٌ مربّع الأركان */
  .ap.full .ap-bar{border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:8px}
  .ap-sticky{border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--line);border-bottom:0}
  .sh-tabs{top:var(--head-h)}
  .menu-sec{scroll-margin-top:calc(var(--head-h) + 86px)}
  .ap-sheet{border-radius:26px;bottom:auto;top:50%;transform:translate(-50%,-45%);opacity:0;max-height:88vh;pointer-events:none;transition:transform .2s,opacity .2s}
  .ap-sheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .ap-sheet .foot{border-radius:0 0 26px 26px}
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap.full .st-grid{padding:0}
  .ap.full .rail{padding-inline:0}
  .ap.full .ap-sec .head{padding-inline:0}
  .ap.full .ap-home-head{border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:8px}
  .ap.full .promo,.ap.full .outside-bar{margin-inline:0}
  .p-grid{grid-template-columns:repeat(3,1fr)}
  .track-map{height:420px}
  .addr-map{height:380px}
}
/* ---------- Desktop store page: a wide professional layout, not a stretched phone ----------
   غلافٌ عريض، ثم عمودان: المنيو بشبكةٍ واسعة وصورٍ كبيرة، وعمودٌ جانبيٌّ
   ملتصقٌ فيه بطاقة المتجر والسلّة الحيّة و«اطلب من التطبيق» — فلا يحتاج
   أحدٌ تمريرًا ليرى سلّته ولا ليبدّل القسم. */
@media (min-width:1200px){
  .ap.full .st-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .ap.shop-store{
    --ap-w:1180px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 348px;
    grid-template-areas:"cover cover" "alerts side" "menu side";
    column-gap:26px;
    align-items:start;
    padding-bottom:44px;
  }
  .ap.shop-store.has-sticky{padding-bottom:44px}
  .ap.shop-store>.sh-cover{grid-area:cover;height:320px;border-radius:0}
  .ap.shop-store>.sh-alerts{grid-area:alerts;padding-inline-start:26px}
  .ap.shop-store>.sh-menu{grid-area:menu;min-width:0;padding-inline-start:26px}
  /* العمود يلتصق تحت رأس الموقع؛ والرفع فوق الغلاف على الغلاف نفسه لا
     على البطاقة — وإلا اختفى أعلى البطاقة خلف الرأس عند الالتصاق.
     وإن طال العمود عن الشاشة مرّر داخله، فيبقى زرّ الدفع في المرأى. */
  .ap.shop-store>.sh-side{grid-area:side;display:block;position:sticky;top:calc(var(--head-h) + 16px);margin-top:-74px;padding:0 0 10px;padding-inline-end:26px;max-height:calc(100vh - var(--head-h) - 34px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .ap.shop-store .sh-head{margin:0}
  .ap.shop-store .sh-head .ap-card{border-radius:22px}
  .ap.shop-store .sh-rail{display:block}
  /* السلّة في العمود تُغني عن الشريط العائم */
  .ap.shop-store .ap-sticky{display:none}
  .ap.shop-store .sh-tabs{margin-inline:-26px;padding-inline:26px;background:rgba(246,242,236,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .ap.shop-store .sh-tabs .chips .chip{height:40px;font-size:14px;padding:0 17px}
  .ap.shop-store .menu-sec{padding:0}
  .ap.shop-store .menu-sec h2{font-size:21px;margin:22px 2px 12px}
  .ap.shop-store .closed-bar,.ap.shop-store .outside-bar{margin-inline:0}
  /* صورٌ أكبر وشبكةٌ أوسع */
  .ap.shop-store .p-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .ap.shop-store .p-card{padding:12px;border-radius:var(--r-lg)}
  .ap.shop-store .p-card .nm{font-size:14.5px}
  .ap.shop-store .p-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;padding:6px 20px}
  .ap.shop-store .p-row{padding:16px 0}
  .ap.shop-store .p-row .im{flex:0 0 104px;width:104px;height:104px}
  .ap.shop-store .p-row .im .thumb{width:104px;height:104px}
  .ap.shop-store .p-row .nm{font-size:16px}
  .ap.shop-store .p-row .ds{font-size:12.5px}

  /* بطاقات العمود الجانبيّ */
  .sh-sum,.sh-where{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:15px 16px;margin-top:14px}
  .sh-sum:has([data-cart-bar]:not(.hide)){border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-100),var(--sh-1)}
  .sh-sum .hd{display:flex;align-items:center;justify-content:space-between}
  .sh-sum .ln{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-600)}
  .sh-sum .ln .v{font-size:17px;font-weight:800;color:var(--ink-900)}
  .sh-sum .mt{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px 6px 6px;color:var(--brand-600)}
  .sh-sum .other{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);color:var(--ink-600)}
  .sh-sum .other b{color:var(--ink-900)}
  .sh-sum .other .t-xs{margin-top:4px}
  .sh-sum .mt .hide,.sh-sum .hide{display:none}
  .sh-app{display:block;background:var(--espresso,#1E1915);color:#fff;border-radius:var(--r-lg);padding:16px 14px;margin-top:14px;text-align:center}
  .sh-app p{color:#CFC4B6;font-size:12.5px;line-height:1.8;margin-top:5px}
  .sh-app .w-qr{margin:14px auto 0;background:#fff;border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-600);font-size:11.5px;max-width:190px}
  .sh-app .w-qr svg{width:104px;height:104px}
  .sh-app .stores{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .sh-app .stores .store-btn{justify-content:center;background:rgba(255,255,255,.08)}
}
@media (prefers-reduced-motion:reduce){
  .ap-sheet,.ap-overlay,.ap-toast,.ap-btn{transition:none}
}
/* «ترتيب: الأقرب إليك» (07): قائمةٌ أصلية بمظهر النصّ العريض والسهم */
.sort-pick{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23171310' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E") no-repeat left center;padding:2px 0 2px 20px;font:inherit;font-size:13px;font-weight:700;color:var(--brand-700);cursor:pointer}
html[dir=ltr] .sort-pick{background-position:right center;padding:2px 20px 2px 0}