/* ===================== اكسب أوردر — التصميم ===================== */
:root{
  --green:#0d5c3f; --green-2:#0f7a52; --green-soft:#e7f3ee;
  --gold:#c8901f; --gold-soft:#fbf3e0;
  --ink:#16201c; --muted:#6b7c75; --line:#e3eae7;
  --bg:#f3f6f4; --card:#ffffff; --red:#c0392b; --blue:#2563eb;
  --r:18px; --r-sm:12px;
  --shadow:0 2px 10px rgba(13,92,63,.06);
  --shadow-lg:0 12px 40px rgba(13,92,63,.16);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{color-scheme:light}
html,body{height:100%}
body{
  font-family:'Cairo',"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);
  overscroll-behavior-y:none;
}
#app{max-width:480px;margin:0 auto;height:100vh;height:100svh;position:relative;overflow:hidden;background:var(--bg);box-shadow:0 0 60px rgba(0,0,0,.08)}
/* 🆕 ---------- استجابة لمقاسات الشاشة الأكبر (تابلت/كمبيوتر) ----------
   التصميم الأساسي متعمول كـ"كارت موبايل" ضيق. على الشاشات الأوسع
   كده بيفضل شريط ضيق وسط مساحة فاضية كبيرة، فبنوسّع الحاوية تدريجياً
   مع الشبكة (catalog) بتاخد أعمدة أكتر تلقائياً — شوف .catalog تحت. */
@media (min-width:700px){
  #app{max-width:720px}
}
@media (min-width:1000px){
  #app{max-width:1080px}
}
@media (min-width:1300px){
  #app{max-width:1280px}
}
.hidden{display:none!important}
.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;opacity:1;visibility:visible;transition:opacity .22s ease}
/* 🆕 بدل ما الشاشة تختفي فجأة (display:none)، بتتلاشى بنعومة — وده
   بيخلي التنقل بين المتجر/السلة/الطلبات/الحساب يحس بسلاسة بدل ما
   يبان "قافز" أو خشن. visibility بتتأخر لحد ما التلاشي يخلص عشان
   الشاشة المختفية متاخدش أي ضغطات وهي بتختفي. */
.screen.hidden{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
/* 🆕 التبويبات السفلية بقت ثابتة دايماً (زي سِنِد) وفوق كل الشاشات.
   كل شاشة (ما عدا الدخول) بتنتهي فوق الشريط مباشرة عشان محتواها
   ما يتغطّاش وراه. */
#mainScreen,#cartScreen,#ordersScreen,#notifsScreen,#accountScreen,#moreScreen{bottom:calc(80px + var(--safe-b))}

/* ---- أزرار عامة ---- */
.btn-primary{background:var(--green);color:#fff;border:none;border-radius:14px;padding:15px;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;transition:.15s}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{background:#b8c7c1;cursor:default}
.block{width:100%}
.icon-btn{background:var(--green-soft);color:var(--green);border:none;width:40px;height:40px;border-radius:12px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ===================== تسجيل الدخول ===================== */
.login{background:linear-gradient(160deg,var(--green),#0a4631);align-items:center;justify-content:center;padding:24px;color:#fff}
.login-card{background:var(--card);color:var(--ink);width:100%;max-width:380px;border-radius:24px;padding:32px 26px;box-shadow:var(--shadow-lg)}
.logo-mark{font-size:34px;font-weight:900;color:var(--green);text-align:center;letter-spacing:-.5px}
.logo-mark span{color:var(--gold);margin-right:6px}
.login-sub{text-align:center;color:var(--muted);margin:6px 0 26px;font-size:14px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:600}
.fld input{width:100%;padding:14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;background:#fafcfb;transition:.15s}
.fld input:focus{outline:none;border-color:var(--green);background:#fff}
.fld select{width:100%;padding:14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;background:#fafcfb;color:var(--ink);transition:.15s;-webkit-appearance:menulist;appearance:menulist}
.fld select:focus{outline:none;border-color:var(--green);background:#fff}
.fld select option{color:#16201c;background:#fff}
.fld textarea{width:100%;padding:14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;background:#fafcfb;transition:.15s;resize:vertical}
.fld textarea:focus{outline:none;border-color:var(--green);background:#fff}

/* 🆕 نسيت كلمة السر — صندوق صغير يظهر تحت خانة الباسورد */
.forgot-box{background:#f7faf9;border:1px solid var(--line);border-radius:12px;padding:14px;margin:4px 0 16px}
.forgot-box p{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.forgot-box textarea{width:100%;padding:10px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;resize:vertical;margin-bottom:8px}

/* 🆕 صندوق تعليمات لما الموقع يترفض/يفشل وقت التسجيل */
.location-error-box{background:#fdeceb;border:1.5px solid #f3c6c2;border-radius:12px;padding:14px;margin:6px 0 16px;text-align:right}
.location-error-box .le-title{font-size:13.5px;font-weight:800;color:#a8362b;margin-bottom:8px;display:block}
.location-error-box ol{margin:0 0 10px;padding-right:18px;font-size:12.5px;color:#7a3530;line-height:1.9}
.location-error-box .le-retry{width:100%;background:#c0392b;color:#fff;border:none;border-radius:10px;padding:10px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer}
.location-error-box .le-retry:active{transform:scale(.98)}

/* 🆕 شاشة حسابي */
.acc-info{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-bottom:18px}
.acc-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:14px;color:var(--muted)}
.acc-row:not(:last-child){border-bottom:1px solid var(--line)}
.acc-row b{color:var(--ink);font-size:14.5px}
.acc-section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
/* 🆕 قسم اقتراح صنف جديد — لمسة ذهبية خفيفة تميّزه */
.acc-section.suggest-section{background:var(--gold-soft);border-color:#eddcae}
.acc-section h3{font-size:15px;margin:0 0 14px}
.login-note{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}

/* 🆕 شاشة اختيار نوع المستخدم (جديد / حالي) */
.user-type-choice{display:flex;flex-direction:column;gap:12px}
.user-type-btn{display:flex;align-items:center;gap:14px;width:100%;background:#fafcfb;border:1.5px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;font-family:inherit;text-align:right;transition:.15s}
.user-type-btn:hover,.user-type-btn:active{border-color:var(--green);background:var(--green-soft)}
.user-type-btn .ut-ic{font-size:26px;flex-shrink:0}
.user-type-btn .ut-txt{display:flex;flex-direction:column;gap:2px}
.user-type-btn .ut-txt b{font-size:15px;color:var(--ink)}
.user-type-btn .ut-txt small{font-size:12px;color:var(--muted)}
.back-link{background:none;border:none;color:var(--green);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;padding:0 0 16px;display:block}
.back-link.inline{display:inline;padding:0;text-decoration:underline}
.warn-note{color:#b9821f!important}

/* 🆕 بوكس "أهلاً تاني" للعميل اللي عنده حساب بالفعل */
.returning-box{display:flex;align-items:center;gap:11px;background:var(--green-soft);border:1.5px solid var(--green);border-radius:13px;padding:13px 14px;margin-bottom:14px}
.returning-ic{font-size:24px;flex-shrink:0}
.returning-box b{display:block;font-size:14px;color:var(--green-2)}
.returning-box small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.login-foot{position:absolute;bottom:20px;font-size:12px;color:rgba(255,255,255,.6)}

/* ===================== الشريط العلوي ===================== */
.appbar{background:var(--green);color:#fff;padding:12px 16px;border-radius:0 0 18px 18px;box-shadow:var(--shadow)}
.appbar-row{display:flex;align-items:center;justify-content:space-between}
.appbar-actions{display:flex;gap:8px}
.greet{display:flex;flex-direction:column;line-height:1.2}
.greet small{font-size:11px;opacity:.85}
.greet strong{font-size:17px;font-weight:800}
.cart-btn{position:relative;background:rgba(255,255,255,.16);border:none;color:#fff;width:40px;height:40px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cart-btn em{position:absolute;top:-5px;left:-5px;background:var(--gold);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-style:normal}
/* 🆕 شارة النقاط بتنبض لو فيه مكافأة مستحقة، عشان تلفت نظر العميل */
.cart-btn em.due{background:#e63946;animation:badgePulse 1.4s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.searchbar{margin-top:10px;background:#fff;border-radius:13px;padding:9px 14px;display:flex;align-items:center;gap:9px;color:var(--muted)}
/* 🆕 زرار المساعد الذكي 🤖 مدمج جوه نفس مربع البحث الأبيض القديم،
   بدل ما يكون مربع منفصل بستايل مختلف */
.ai-inline-btn{background:var(--green-soft);border:none;border-radius:9px;width:32px;height:32px;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0}
.ai-chips{display:flex;gap:7px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chip{flex-shrink:0;white-space:nowrap;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
/* نتايج المساعد الذكي جوه الكتالوج */
.ai-results-banner{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--green-soft);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--green-2);margin-bottom:4px}
.ai-results-banner button{background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:11.5px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;flex-shrink:0}
.searchbar input{border:none;outline:none;flex:1;font-size:15px;font-family:inherit;background:transparent;color:var(--ink)}

/* 🆕 ---- الهيدر القابل للطي (appbar + البانرات) ----
   وانت بتسكرول لتحت، الهيدر بيختفي بانيميشن ناعم عشان يوفّر مساحة
   أكبر للتصفح، وتابات الفئات (اللي جايه بعده في الترتيب) بتترفع
   تلقائي تحتل مكانه فوق. وانت بتسكرول لفوق تاني بيرجع يظهر.
   بنستخدم حيلة grid-template-rows (1fr ↔ 0fr) بدل max-height عشان
   الانيميشن يبقى دقيق مع أي محتوى متغيّر الطول (البانرات بتظهر/
   تختفي ديناميكياً) من غير ما نحتاج نحسب الارتفاع بالجافاسكريبت. */
/* 🆕 الهيدر بقى عنصر عادي جوه منطقة السكرول — بيختفي/يظهر بسكرول
   المتصفح الطبيعي نفسه (أنعم حاجة ممكنة تقنيًا)، من غير أي أنيميشن
   يدوي أو JS بيتابع كل حركة سكرول. */
.collapsible-header{background:var(--bg)}
/* لمسة بصرية بسيطة وقت ما التابات بتلزق في سقف الشاشة مكان الهيدر */
.cats.stuck{box-shadow:0 3px 10px rgba(13,92,63,.1)}

/* ---- الفئات ---- */
/* 🆕 شريط تابات الفئات — sticky أصلية (بدل ما كنا بنتابعها بـJS مع كل
   حركة سكرول). أول ما تعدّي الهيدر أثناء السكرول، بتلزق في سقف
   الشاشة تلقائي وبراحة تامة، لأنها سكرول متصفح حقيقي مش أنيميشن. */
.cats{display:flex;gap:9px;padding:14px 16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;background:var(--bg);position:sticky;top:0;z-index:15;box-shadow:0 2px 8px rgba(13,92,63,.06)}
.cats::-webkit-scrollbar{display:none}
.cats button{white-space:nowrap;flex-shrink:0;background:var(--card);border:1.5px solid var(--line);color:var(--muted);padding:9px 17px;border-radius:22px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.cats button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 🆕 شريط الشركات (المستوى التاني تحت الفئات): أصغر شوية وبلون أخضر
   للنشط عشان التسلسل يبقى واضح — فئة (غامق) ← شركة (أخضر) */
.cats.companies{padding:0 16px 8px;top:54px;z-index:14}
.cats.companies button{padding:7px 14px;font-size:12.5px;border-radius:18px;background:#f0f5f2}
.cats.companies button.on{background:var(--green);color:#fff;border-color:var(--green)}

/* 🆕 الحاوية اللي بتلف كل حاجة قابلة للسكرول (الصفحة الرئيسية + الفئات
   + شبكة المنتجات) — دي بقت هي اللي بتسكرول بدل ما شبكة المنتجات
   لوحدها تسكرول، عشان لو محتوى الصفحة الرئيسية طويل يفضل ممكن توصله
   بالسكرول وميتقفلش برا الشاشة. */
.scroll-area{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column}
/* 🆕 مهم جدًا: من غير كده، عناصر زي شريط التابات ممكن تتزنق (flex-shrink
   افتراضي 1) لو المحتوى الكلي جوه منطقة السكرول طويل — بنمنع الانضغاط
   خالص، المفروض العناصر تتسكرول عادي مش تتزنق. */
.scroll-area > *{flex-shrink:0}

/* ---- شبكة المنتجات (تصميم جديد من الصفر) ----
   🆕 بقت CSS Grid بدل flex-wrap بعرض ثابت 50% — كده عدد الأعمدة
   بيزيد تلقائي مع اتساع الشاشة (2 في الموبايل، وأكتر في التابلت/
   الكمبيوتر) من غير ما نحتاج نغيّر عرض كل كارت يدوي. */
.catalog{padding:8px 4px 130px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:flex-start}
@media (min-width:560px){ .catalog{grid-template-columns:repeat(3,1fr)} }
@media (min-width:820px){ .catalog{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1080px){ .catalog{grid-template-columns:repeat(5,1fr)} }
@media (min-width:1300px){ .catalog{grid-template-columns:repeat(6,1fr)} }
.card-item{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden}
/* 🆕 صنفين جنب بعض في كل صف دايماً — حتى الصنف اللي بيتباع كرتونة
   (has-pack) بقى بنفس عرض النص (50%) بدل ما ياخد الصف كامل، وبس
   عناصر التحكم (كرتونة/قطعة) بقت مرتبة تحت بعض في مساحة أضيق. */
.card-item.has-pack{display:block}
.card-item.has-pack .card-pic{width:100%;height:92px;border-radius:14px 14px 0 0;border-bottom:1px solid var(--line);border-left:none}
.card-item.has-pack .card-info{padding:10px}
.card-item .card-pic{height:92px;background:#f4f7f6;border-radius:14px 14px 0 0;border-bottom:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-item .card-pic span.pic-circle{width:70px;height:70px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:38px}
.card-item .card-pic img{width:100%;height:100%;object-fit:contain;padding:6px}
.card-item .card-flag{position:absolute;top:7px;right:7px;background:var(--gold);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:18px}
.card-item .card-info{padding:10px}
.card-item .card-name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.35;display:block;min-height:32px}
.card-item .card-price{display:block;color:var(--red);font-weight:900;font-size:15px;margin:5px 0 9px}
.card-item .card-price em{color:var(--muted);font-weight:400;font-size:10px;font-style:normal}
/* 🆕 السعر القديم قبل الخصم — مشطوب وباهت جنب السعر الحالي */
.card-item .old-price{color:#b3bdb8;font-weight:600;font-size:12px;text-decoration:line-through;margin-left:6px}
.card-item .card-pack{display:inline-block;background:var(--green-soft);color:var(--green);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:7px;margin-bottom:6px}
.add-btn{width:100%;background:var(--green-soft);color:var(--green);border:none;padding:10px;border-radius:11px;font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.15s}
.add-btn:active{transform:scale(.97)}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--green);border-radius:11px;overflow:hidden}
.stepper button{background:rgba(255,255,255,.18);color:#fff;border:none;width:38px;height:38px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.stepper b{color:#fff;font-weight:800;font-size:15px}
/* 🆕 خانة الكمية بقت قابلة للكتابة المباشرة (مش رقم ثابت بس) — كبّرناها
   شوية عشان يبقى أسهل يدوس عليها ويكتب فيها بإيده. */
.stepper-input{background:transparent;border:none;color:#fff;font-weight:800;font-size:17px;text-align:center;width:40px;min-width:40px;padding:0;-moz-appearance:textfield}
.stepper-input::-webkit-outer-spin-button,.stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-input:focus{outline:2px solid rgba(255,255,255,.6);outline-offset:-2px;border-radius:4px}

/* 🆕 التحكم المزدوج (كرتونة + قطعة مفردة) — بقى مضغوط أكتر عشان
   يتظبط في نص الكارت (صنفين في الصف) */
/* 🆕 كرتونة و قطعة مفردة جمب بعض (صف واحد) بدل تحت بعض — أوضح للعميل
   إنهم بديلين لنفس الصنف مش خطوتين متتاليتين */
/* 🆕 بوكسات "كرتونة / علبة مفردة" — تصميم عمودي مريح:
   السطر الأول: اسم الوحدة (يمين) + سعرها (شمال) في نفس السطر.
   السطر التاني: الستيبر (− العدد +) بعرض البوكس كامل، بأزرار كبيرة
   مريحة للإبهام والخانة في النص قابلة للكتابة. كده مفيش أي التفاف
   نص غريب ولا عناصر بتخرج برة حدود الكارت مهما كان عرض الشاشة. */
.pack-order{display:flex;flex-direction:column;gap:6px;width:100%}
/* 🆕 صف أفقي مدمج: الاسم والسعر متراصّين فوق بعض على اليمين (سطرين
   صغار)، والستيبر على الشمال بحجم متوسط مريح — كده ارتفاع كل بوكس
   نص اللي كان، والكارت كله بقى أقصر بشكل ملحوظ من غير ما نضحّي
   بسهولة الدوس أو الكتابة في الخانة. */
.pack-row{display:flex;flex-direction:column;gap:6px;background:#f4f8f6;border:1px solid var(--line);border-radius:12px;padding:8px 9px;width:100%;box-sizing:border-box;overflow:hidden}
.pack-row-head{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;width:100%;flex-wrap:wrap}
.pack-name{font-size:12.5px;color:var(--ink);font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.pack-emoji{flex-shrink:0}
.pack-price{font-size:11px;color:var(--muted);font-weight:600;text-align:left;white-space:nowrap}
.pack-price b{color:var(--red);font-size:12px}
.stepper.s{border-radius:10px;flex-shrink:0}
.stepper.s button{width:32px;height:32px;font-size:16px}
.stepper.s .stepper-input{font-size:15px;width:34px;min-width:34px}
.pack-total{width:100%;font-size:11px;color:var(--red);font-weight:800;background:var(--green-soft);border-radius:9px;padding:6px 8px;text-align:center;margin-top:1px;box-sizing:border-box}
.pack-stepper{width:100%;flex-shrink:0;justify-content:space-between}
.pack-stepper button{width:34px;height:32px;font-size:17px;flex-shrink:0}
.pack-stepper .stepper-input{width:34px;min-width:34px;flex:none;font-size:15px}

/* 🆕 نسخة مصغّرة من بوكسات "كرتونة/علبة مفردة" خاصة بشاشة السلة —
   في السلة العميل عايز يشوف كل أصنافه مرة واحدة من غير ما يعمل
   سكرول كتير، فالبوكسات هنا أصغر وأكثر إحكامًا من نسخة صفحة المتجر
   (اللي فضلت كبيرة عشان سهولة الدوس وقت الإضافة الأولى للسلة). */
.cart-item.pack .pack-order{gap:4px}
.cart-item.pack .pack-row{flex-direction:row;align-items:center;justify-content:space-between;padding:4px 7px;gap:6px;border-radius:9px}
.cart-item.pack .pack-row-head{flex-direction:column;align-items:flex-start;gap:0;width:auto}
.cart-item.pack .pack-name{font-size:10.5px}
.cart-item.pack .pack-price{font-size:9px;text-align:right}
.cart-item.pack .pack-stepper{width:auto;flex-shrink:0}
.cart-item.pack .pack-stepper button{width:23px;height:23px;font-size:13px}
.cart-item.pack .pack-stepper .stepper-input{width:24px;min-width:24px;flex:none;font-size:12.5px}
.cart-item.pack .pack-total{font-size:10px;padding:4px 7px}
.cart-item.pack .em{font-size:26px}
.cart-item.pack .em img{width:26px;height:26px}
.cart-item.pack .info .n{font-size:12.5px}
.cart-item.pack .info .p{font-size:11px}
.out{text-align:center;color:var(--red);font-size:12px;font-weight:700;padding:10px;background:#fbeae8;border-radius:11px}
/* 🆕 حجز صنف نافد من المخزون */
.out-reserve{display:flex;flex-direction:column;gap:6px}
.out-reserve .out{padding:7px;border-radius:9px 9px 0 0;margin-bottom:0}
.reserve-row{display:flex;gap:6px;align-items:center}
.reserve-row .stepper.s{flex-shrink:0}
.reserve-btn{flex:1;background:var(--gold-soft);color:#8a6d24;border:1.5px dashed #eddcae;border-radius:11px;padding:9px 8px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 20px;font-size:15px}

/* 🆕 ---- الاقتراحات الذكية (بتظهر فوق شريط السلة/التبويبات لما
   العميل يضيف صنف جديد) ----
   🆕 اتصممت من الأول عشان تبقى خفيفة على العين: صف مضغوط (مش كروت
   كبيرة)، لون واحد بس هو الأخضر (للسعر ولزرار الإضافة بس)، وباقي
   العناصر بدرجات محايدة (أبيض/رمادي فاتح) عشان الاقتراح ميزاحمش
   المنتجات نفسها بصرياً ولا يحس العميل بدوشة ألوان. */
.suggest-box{position:absolute;left:14px;width:52%;min-width:200px;bottom:calc(74px + var(--safe-b));background:var(--gold-soft);border:1px solid #eddcae;border-radius:14px;padding:8px 9px 9px;box-shadow:0 6px 20px rgba(13,92,63,.12);z-index:9;animation:suggestIn .18s ease;touch-action:none}
.suggest-box.dragging{box-shadow:0 14px 34px rgba(13,92,63,.28);opacity:.96}
@keyframes suggestIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.suggest-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;padding:0 2px;cursor:move}
.suggest-head b{font-size:11px;color:var(--muted);font-weight:700}
.suggest-close{background:#fff;border:1.5px solid var(--line);width:26px;height:26px;border-radius:50%;color:var(--ink);font-size:16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.suggest-close:active{transform:scale(.9)}
.suggest-list{display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-left:2px;margin-left:-2px}
.suggest-item{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:5px 6px}
.suggest-pic{width:32px;height:32px;flex-shrink:0;background:var(--bg);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden}
.suggest-pic img{width:100%;height:100%;object-fit:cover}
.suggest-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px}
.suggest-name{font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.suggest-price{font-size:11px;font-weight:800;color:var(--red);flex-shrink:0}
.suggest-add{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--green);background:#fff;color:var(--green);font-size:15px;font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0}
.suggest-add:active{transform:scale(.9)}
.suggest-add.added{background:var(--green);color:#fff;font-size:12px}

/* ===================== الشيت (السلة/الطلبات) ===================== */
.sheet{background:var(--bg);z-index:20}
.sheet-head{background:var(--card);padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:18px;font-weight:800}
.sheet-body{flex:1;overflow-y:auto;padding:14px}
.sheet-foot{background:var(--card);border-top:1px solid var(--line);padding:10px 16px calc(10px + var(--safe-b))}

/* عنصر في السلة */
.cart-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;display:flex;gap:10px;align-items:center;margin-bottom:8px}
.cart-item .em{font-size:34px}
.cart-item .info{flex:1;min-width:0}
.cart-item .info .n{font-size:14px;font-weight:600}
.cart-item .info .p{color:var(--red);font-weight:700;font-size:13px;margin-top:3px}
.cart-item .qty{display:flex;align-items:center;gap:9px}
.cart-item .qty button{width:34px;height:34px;border:1.5px solid var(--line);background:var(--card);border-radius:9px;cursor:pointer;font-size:18px;color:var(--green)}
.cart-item .qty .stepper-input{color:var(--ink);font-size:16px;width:36px;min-width:36px}
.cart-item .qty .stepper-input:focus{outline:2px solid var(--green);outline-offset:1px;border-radius:4px}
/* 🆕 زرار مسح الصنف بالكامل من السلة — أخر عنصر في الصف (يبان في
   الطرف الشمال بصرياً بسبب RTL) عشان العميل يقدر يشيل صنف اختاره
   غلط من غير ما يدوس على − كذا مرة (خصوصاً لو كرتونة بكمية كبيرة). */
.cart-item .cart-del{flex-shrink:0;background:#fdeceb;color:var(--red);border:none;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s}
.cart-item .cart-del:active{transform:scale(.92);background:#f8dbd8}

.sum-line{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.sum-line.total{font-size:16px;font-weight:900;color:var(--ink);margin:6px 0 8px}
/* 🆕 إشعار ميعاد زيارة المنطقة في السلة قبل تأكيد الطلب */
.visit-schedule-notice{background:var(--gold-soft);color:#8a6d24;border-radius:11px;padding:11px 13px;font-size:12.5px;line-height:1.7;margin-bottom:12px;text-align:center}
.visit-schedule-notice b{color:#6b5316}
.visit-next-line{margin-top:6px;padding-top:6px;border-top:1px dashed #e0c98a;font-size:13.5px;font-weight:700;color:#0d5c3f}
.visit-next-line b{color:#0d5c3f}

/* نجاح الطلب */
.order-success{text-align:center;padding:36px 20px 24px}

/* 🆕 ---------- عجلة المكافآت ---------- */
.wheel-cta{background:linear-gradient(135deg,var(--gold) 0%,#e0a83a 100%);margin-top:10px}
.wheel-stage{position:relative;width:240px;height:240px;margin:0 auto}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:26px;color:var(--red);z-index:3;line-height:1}
.wheel-dial{position:relative;width:100%;height:100%;border-radius:50%;border:5px solid #fff;box-shadow:0 4px 24px rgba(0,0,0,.25);cursor:pointer;transition:transform 4s cubic-bezier(.17,.67,.16,.99)}
.wheel-dial.spinning{cursor:default}
.wheel-label{position:absolute;top:50%;left:50%;width:90px;margin-left:-45px;text-align:center;font-size:10.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;transform-origin:center}
.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:24px;z-index:2}
.wheel-won{font-size:16px;font-weight:900;color:var(--green-2);background:var(--green-soft);border-radius:12px;padding:12px;animation:fadeIn .3s ease}
.success-check{width:88px;height:88px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:popIn .4s}
.success-check svg{width:44px;height:44px}
@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.order-success h2{font-size:22px}
.order-success p{color:var(--muted);margin-top:8px;font-size:14px}

/* بطاقة طلب + تتبع */
.order-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.order-card .oc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.order-card .oc-id{font-weight:800;font-size:15px}
.order-card .oc-meta{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.order-card .oc-items{font-size:13px;color:var(--ink);background:#f7faf9;border-radius:10px;padding:10px 12px;margin-bottom:12px;line-height:1.7}
.status-pill{font-size:12px;font-weight:800;padding:5px 13px;border-radius:20px}
.status-pill.new{background:var(--gold-soft);color:var(--gold)}
.status-pill.prep{background:#dbe9ff;color:var(--blue)}
.status-pill.way{background:#e3e0ff;color:#5b4bd6}
.status-pill.done{background:var(--green-soft);color:var(--green)}
.status-pill.cancelled{background:#fdeceb;color:#c0392b}
.status-pill.gold{background:var(--gold-soft);color:#8a6d24}

.track{margin-top:6px}
.track .step{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:18px}
.track .step:last-child{padding-bottom:0}
.track .dot{width:24px;height:24px;border-radius:50%;background:var(--line);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;z-index:1;font-weight:800}
.track .step.done .dot{background:var(--green)}
.track .step.active .dot{background:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.track .step:not(:last-child)::before{content:'';position:absolute;top:24px;right:11px;width:2px;height:calc(100% - 24px);background:var(--line)}
.track .step.done::before{background:var(--green)}
.track .tx b{font-size:13.5px;font-weight:700}
.track .tx p{font-size:12px;color:var(--muted);margin-top:1px}

/* ===================== شريط التنقل السفلي ===================== */
/* 🆕 شريط تبويبات سفلي شيك بلون البراند — عائم وبحواف مدوّرة،
   والتبويب النشط بيتحدد بكبسولة فاتحة واضحة. */
.tabbar{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--safe-b));height:64px;background:linear-gradient(135deg,var(--green),var(--green-2));border:none;border-radius:22px;display:flex;align-items:center;justify-content:space-around;padding:0 2px;z-index:30;box-shadow:0 8px 30px rgba(13,92,63,.35)}

/* 🆕 زرار عائم لإعادة آخر طلب — بيظهر بس لو عند العميل طلب سابق،
   وبيتحرك بحركة نبض خفيفة عشان يلفت النظر من غير ما يكون مزعج. */
/* 🆕 الحاوية الخارجية بتتحرك بالسحب (JS بيحدّث left/top مباشرة عليها) */
.reorder-fab{position:absolute;left:16px;top:50%;width:54px;height:54px;z-index:60;touch-action:none}
.reorder-fab.dragging{animation:none!important;transition:none!important}
/* الزرار الدائري نفسه (فاتح البوب أب) */
.reorder-fab-btn{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--gold) 0%,#e0a83a 100%);border:none;box-shadow:0 6px 18px rgba(200,144,31,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:reorderFabBounce 2.2s ease-in-out infinite}
.reorder-fab.dragging .reorder-fab-btn{animation:none}
.reorder-fab-ic{font-size:24px;line-height:1;pointer-events:none}
/* زرار الإغلاق الصغير — دايرة صغيرة في ركن الزرار الرئيسي */
.reorder-fab-close{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--muted);font-size:13px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.15)}
@keyframes reorderFabBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(255,255,255,.7);cursor:pointer;font-family:inherit;font-size:10px;font-weight:700;position:relative;padding:8px 1px;border-radius:16px;transition:.18s;white-space:nowrap}
.tab svg{width:20px;height:20px;transition:.18s}
.tab.on{color:#fff;background:rgba(255,255,255,.18)}
.tab.on svg{transform:translateY(-1px) scale(1.05)}
.tab-badge{position:absolute;top:2px;left:calc(50% - 20px);background:var(--gold);color:#fff;font-size:9.5px;font-style:normal;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* 🆕 شاشة "المزيد" */
.more-store{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.more-store-ic{font-size:30px}
.more-store b{display:block;font-size:16px;color:var(--ink)}
.more-store small{color:var(--muted);font-size:13px}
.more-list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.more-item{width:100%;display:flex;align-items:center;gap:14px;padding:16px;background:none;border:none;border-bottom:1px solid var(--line);font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;text-align:right}
.more-item:last-child{border-bottom:none}
.more-item:active{background:#f3f6f4}
.more-item-ic{font-size:20px}
.more-item-tx{flex:1}
.more-item-ar{color:var(--muted);font-size:20px;transform:scaleX(-1)}
.more-item.danger{color:var(--red)}

/* ===================== التوست ===================== */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:12px;font-weight:700;font-size:14px;z-index:200;opacity:0;transition:.3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.empty-state{text-align:center;color:var(--muted);padding:70px 24px}
.empty-state .big{font-size:54px;margin-bottom:14px}
.empty-state h3{font-size:17px;color:var(--ink);margin-bottom:6px}

/* ===== عروض الكميات ===== */
.promo-badge{background:var(--gold-soft);color:var(--gold);font-size:11px;font-weight:800;padding:5px 8px;border-radius:8px;margin:6px 0;text-align:center}
.promo-line{font-size:11.5px;color:var(--green-2);font-weight:700;margin-top:4px}
.cart-pack-note{font-size:11px;color:var(--muted);margin-top:3px}

/* ===== 🆕 بانر عروض الفاتورة (تصميم جديد منفصل) ===== */
.ip-banner{padding:14px 0 4px}
.ip-track{display:flex;gap:12px;overflow-x:auto;padding:0 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ip-track::-webkit-scrollbar{display:none}
.ip-card{
  flex:0 0 86%;scroll-snap-align:start;border-radius:18px;padding:18px 20px;
  background:linear-gradient(135deg,#1a2e4a 0%,#0d1b30 100%);
  color:#fff;position:relative;overflow:hidden;min-height:96px;
  box-shadow:0 8px 24px rgba(13,27,48,.25);
}
.ip-card::after{content:'';position:absolute;left:-20px;bottom:-30px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);border-radius:50%}
.ip-card-tag{display:inline-block;background:rgba(255,255,255,.16);font-size:11px;font-weight:800;
  padding:4px 11px;border-radius:20px;margin-bottom:8px}
.ip-card-title{font-size:16px;font-weight:800;margin-bottom:5px}
.ip-card-desc{font-size:13px;color:#cdd9ec;line-height:1.5}

/* خط عرض الفاتورة في ملخص السلة — لون مميز يفرّقه عن خصومات الكمية */
.invoice-promo-line{color:#1a2e4a;font-weight:800;background:#eef3fb;padding:8px 10px;border-radius:10px;margin:4px 0!important}

/* ===== 🆕 صور المنتجات الحقيقية (لو متاحة) — بديل الإيموجي ===== */

.cart-item .em img{width:34px;height:34px;object-fit:cover;border-radius:8px}

/* ===== 🆕 البانر الدعائي (صور قابلة للضغط) =====
   بانر أفقي قصير بنسبة ثابتة (زي بانرات تطبيقات التسوق المعروفة):
   ارتفاعه محدود وصغير، مش بياخد طول الشاشة، والصورة بتتقص عليه
   بشكل نظيف (cover) بدل ما تطول وتزحم التابات اللي تحته. */
/* بانر لازق في حواف الشاشة، ارتفاع صغير ثابت، والصورة بتتمطّ تملا البوكس */
.pb-wrap{padding:8px 14px 0;margin:0;max-height:150px;overflow:hidden;transition:max-height .12s linear,opacity .1s linear}
/* 🆕 حالة الطي وقت السكرول لتحت — بيتطوى بسلاسة ويرجع لما يطلع لفوق */
.pb-wrap.pb-collapsed{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
/* 🆕 البانرات جوه صفحة العروض: كل بانر بياخد عرض كامل وتحت بعض */
.offers-banner{flex:0 0 100%;width:100%;border-radius:14px;overflow:hidden;background:#eef3f0;border:none;padding:0;cursor:pointer;display:block}
.offers-banner img{width:100%;height:auto;max-height:220px;object-fit:contain;display:block}
.pb-track{display:flex;gap:0;overflow-x:auto;padding:0;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:flex-start}
.pb-track::-webkit-scrollbar{display:none}
.pb-slide{flex:0 0 100%;scroll-snap-align:start;border:none;padding:0;cursor:pointer;border-radius:14px;overflow:hidden;background:#eef3f0;display:block}
/* 🆕 ارتفاع ثابت وصغير دايمًا (مش متغيّر حسب أبعاد الصورة المرفوعة) —
   الصورة بتتقص بشكل نظيف (cover) تملا البوكس، بدل ما صورة طولية
   (بورتريه) تاخد مساحة كبيرة وتزحم باقي الصفحة. */
.pb-slide img{width:100%;height:130px;object-fit:cover;display:block;border-radius:0}
.pb-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.pb-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.2s}
.pb-dot.on{background:var(--green);width:18px;border-radius:4px}

/* ===== 🆕 بانر تثبيت التطبيق (PWA) ===== */
.install-banner{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--green-soft);
  margin:12px 14px 0;padding:12px 14px;border-radius:14px;box-shadow:var(--shadow)}
.install-ic{font-size:26px;flex-shrink:0}
.install-txt{flex:1;min-width:0}
.install-txt b{font-size:13.5px;display:block}
.install-txt small{font-size:11.5px;color:var(--muted);display:block;margin-top:2px}
.install-btn{background:var(--green);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;flex-shrink:0}
.install-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;flex-shrink:0;padding:0 2px}

/* 🆕 أصناف الطلب الجديد القابلة للتعديل (مسح صنف قبل التجهيز) */
.oc-items-edit{margin:8px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.oc-item-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px}
.oc-item-row:last-of-type{border-bottom:none}
.oc-item-nm{flex:1;color:var(--ink)}
.oc-item-pr{color:var(--red);font-weight:800;font-size:12.5px;white-space:nowrap}
.oc-item-del{background:#fdeceb;color:#c0392b;border:none;width:32px;height:32px;border-radius:9px;font-size:14px;cursor:pointer;flex-shrink:0}
.oc-item-pending-del{font-size:10.5px;color:#8a6d24;background:var(--gold-soft);border-radius:8px;padding:5px 8px;flex-shrink:0;white-space:nowrap}
.oc-item-del:active{transform:scale(.93)}
.oc-edit-hint{font-size:11.5px;color:var(--muted);padding:8px 12px;margin:0;background:#f7faf9}
.cancel-order-btn{width:100%;margin-top:10px;background:#fdeceb;color:#c0392b;border:1.5px solid #f3c6c2;border-radius:12px;padding:11px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;transition:.15s}
.cancel-order-btn:active{transform:scale(.98)}

/* ===== 🆕 طلباتي: قائمة مختصرة + تفاصيل بالضغط (أكورديون) ===== */
.order-card.compact{padding:0;overflow:hidden}
.oc-summary{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:none;padding:14px;cursor:pointer;font-family:inherit;text-align:right}
.oc-sum-right{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.oc-sum-meta{font-size:11.5px;color:var(--muted)}
.oc-sum-left{display:flex;align-items:center;gap:8px}
.oc-sum-total{font-size:14.5px;font-weight:900;color:var(--red)}
.oc-chev{font-size:10px;color:var(--muted)}
.order-card.compact.open{border-color:var(--green)}
.oc-details{padding:0 14px 14px;border-top:1px dashed var(--line)}
.oc-details .oc-items-edit{margin-top:12px}
.oc-item-pack,.oc-item-promo{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px}
.oc-item-promo{color:var(--gold)}
.oc-money{background:#f7faf9;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-top:10px;font-size:13px}
.oc-money-row{display:flex;justify-content:space-between;padding:3px 0}
.oc-money-row.total{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px;font-size:14.5px}
.oc-money-row.total b{color:var(--red)}
.oc-delivery{background:var(--green-soft);color:var(--green-2);font-size:13px;font-weight:700;border-radius:11px;padding:10px 12px;margin-top:10px;line-height:1.9}

/* ===================== 🆕 الصفحة الرئيسية ===================== */
#homeSections{padding:0 14px}
.home-section{margin-bottom:18px}
.home-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.home-section-head h3{margin:0;font-size:15px;font-weight:900;color:var(--ink)}

/* 🆕 ---------- قسم "🛒 لازم تطلب النهاردة" ---------- */
.due-today-section{background:linear-gradient(180deg,#fff 0%,#f7faf9 100%);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 2px 10px rgba(13,92,63,.06)}
.due-today-section .home-section-head{margin-bottom:2px}
.due-today-sub{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.6}
.due-today-list{display:flex;flex-direction:column;gap:10px}
.due-today-card{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:10px;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.due-today-pic{width:64px;height:64px;flex-shrink:0;background:#f4f8f6;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.due-today-pic img{width:100%;height:100%;object-fit:cover}
.due-today-pic .pic-circle{font-size:28px}
.due-today-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.due-today-name{font-size:13.5px;font-weight:800;color:var(--ink)}
.due-today-meta{font-size:11px;color:var(--muted)}
.due-today-msg{font-size:11px;color:var(--gold);font-weight:700;background:var(--gold-soft);border-radius:8px;padding:4px 8px;display:inline-block;width:fit-content;margin-top:2px}
.due-today-controls{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.due-today-stepper{width:auto;flex-shrink:0}
.due-today-stepper button{width:28px;height:28px;font-size:15px}
.due-today-stepper .stepper-input{width:30px;min-width:30px;font-size:13px}
.due-today-add{flex:1;min-width:100px;padding:8px 10px;font-size:12.5px;border-radius:10px}
.due-today-showall{width:100%;background:none;border:1.5px dashed var(--line);color:var(--green-2);font-weight:800;font-size:12.5px;padding:10px;border-radius:12px;margin-top:10px;cursor:pointer;font-family:inherit}
.due-today-addall{margin-top:12px}

/* 🆕 زرار "🏆 ترتيب محلك" المضغوط بالصفحة الرئيسية — بيفتح بوب أب
   بالتفاصيل الكاملة بدل ما ياخد مساحة كبيرة في الصفحة */
.shop-rank-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:linear-gradient(135deg,#1b3a2e 0%,#136b4a 100%);border:none;border-radius:14px;padding:12px 14px;color:#fff;cursor:pointer;font-family:inherit;text-align:right}
.shop-rank-btn .srb-left{display:flex;align-items:center;gap:9px}
.shop-rank-btn .srb-ic{font-size:22px}
.shop-rank-btn .srb-txt{display:flex;flex-direction:column;gap:1px}
.shop-rank-btn .srb-txt b{font-size:13.5px}
.shop-rank-btn .srb-txt small{font-size:10.5px;opacity:.85}
.shop-rank-btn .srb-right{display:flex;align-items:center;gap:6px}
.shop-rank-btn .srb-rank{font-size:17px;font-weight:900;color:var(--gold)}
.shop-rank-btn .srb-arrow{font-size:16px;opacity:.85}

/* 🆕 ---------- كارت "🏆 ترتيب محلك" ---------- */
.shop-rank-card{background:linear-gradient(135deg,#1b3a2e 0%,#0d5c3f 55%,#136b4a 100%);border-radius:18px;padding:18px 16px;color:#fff;box-shadow:0 6px 20px rgba(13,92,63,.3)}
.shop-rank-head{font-size:14px;font-weight:800;opacity:.9;margin-bottom:8px}
.shop-rank-num{font-size:30px;font-weight:900;display:flex;align-items:baseline;gap:8px}
.shop-rank-num small{font-size:12.5px;font-weight:600;opacity:.75}
.shop-rank-msg{font-size:12.5px;line-height:1.7;opacity:.95;margin:10px 0 4px;background:rgba(255,255,255,.12);border-radius:10px;padding:8px 10px}
.shop-rank-bar{height:8px;background:rgba(255,255,255,.22);border-radius:6px;overflow:hidden;margin:12px 0 8px}
.shop-rank-bar span{display:block;height:100%;background:var(--gold);border-radius:6px;transition:width .3s ease}
.shop-rank-percentile{font-size:12.5px;font-weight:700;opacity:.95;margin-bottom:14px}
.shop-rank-tips-btn{width:100%;background:#fff;color:var(--green-2);border:none;border-radius:12px;padding:11px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.shop-rank-wait{font-size:12.5px;line-height:1.8;opacity:.9;margin-top:6px}

/* 🆕 قائمة "حواليك في الترتيب" — أسماء بس، من غير أي فلوس أو تفاصيل */
.shop-rank-nearby{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.shop-rank-nearby-title{font-size:11.5px;font-weight:700;opacity:.85;margin-bottom:6px}
.shop-rank-nearby-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-top:1px solid rgba(255,255,255,.12)}
.shop-rank-nearby-row:first-of-type{border-top:none}
.shop-rank-nearby-row span:first-child{opacity:.7;font-weight:700;flex-shrink:0}
.shop-rank-nearby-row.me{font-weight:900;color:var(--gold)}

/* بوب أب نصائح تحسين الترتيب */
.rank-tips-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.rank-tip-row{display:flex;align-items:center;gap:12px;background:#f7faf9;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--ink)}
.rank-tip-ic{font-size:20px;flex-shrink:0}

/* 🆕 قسم "منتجات مميزة" — نفس شبكة كروت المتجر العادية بالظبط (عمودين) */
.featured-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media (min-width:560px){ .featured-grid{grid-template-columns:repeat(3,1fr)} }

/* 🆕 قسم "الأقسام" — كروت مربعة كبيرة بصورة تمثيلية، زي تطبيقات
   السوبرماركت الكبيرة، بدل ما الفئة تبقى بس اسم في شريط. */
.cat-tiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
/* 🆕 شارة "قريباً" على كارت القسم بالأقسام */
.cat-tile.soon .cat-tile-pic{opacity:.6;position:relative}
.cat-tile-soon-badge{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:10px;white-space:nowrap}
/* 🆕 شارة "🕒" على تاب الفئة في الشريط لو حالته قريباً */
.cats button.soon{opacity:.65}
.cat-tile-pic{width:100%;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.cat-tile-pic img{width:100%;height:100%;object-fit:contain}
.cat-tile-emoji{font-size:34px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cat-tile-name{font-size:12.5px;font-weight:800;color:var(--ink);text-align:center;line-height:1.3}
.home-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.home-scroll::-webkit-scrollbar{display:none}

/* 🆕 بوكس النقط بقى زرار صغير — يفتح بوب أب فيه التفاصيل كاملة
   (نفس تصميم loyalty-card القديم بيتستخدم جوه البوب أب) */
.loyalty-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);border:none;border-radius:14px;padding:12px 14px;color:#fff;cursor:pointer;font-family:inherit;text-align:right}
.loyalty-btn .lb-left{display:flex;align-items:center;gap:9px}
.loyalty-btn .lb-ic{font-size:22px}
.loyalty-btn .lb-txt{display:flex;flex-direction:column;gap:1px}
.loyalty-btn .lb-txt b{font-size:13.5px}
.loyalty-btn .lb-txt small{font-size:10.5px;opacity:.85}
.loyalty-btn .lb-right{display:flex;align-items:center;gap:6px}
.loyalty-btn .lb-points{font-size:17px;font-weight:900}
.loyalty-btn .lb-arrow{font-size:16px;opacity:.85}

/* بطاقة تفاصيل نقاط الولاء — بتتعرض جوه البوب أب */
.loyalty-card{background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);border-radius:16px;padding:16px;color:#fff}
.loyalty-top{display:flex;justify-content:space-between;align-items:center}
.loyalty-tier{display:flex;align-items:center;gap:10px}
.loyalty-ic{font-size:28px}
.loyalty-tier b{display:block;font-size:14px}
.loyalty-tier small{display:block;font-size:11px;opacity:.85}
.loyalty-points{text-align:left}
.loyalty-points b{font-size:22px;display:block}
.loyalty-points small{font-size:11px;opacity:.85}
.loyalty-progress{margin-top:12px}
.loyalty-bar{height:7px;background:rgba(255,255,255,.25);border-radius:5px;overflow:hidden;margin-bottom:6px}
.loyalty-bar span{display:block;height:100%;background:var(--gold);border-radius:5px}
.loyalty-progress small{font-size:11px;opacity:.9}
.loyalty-tiers-list{margin-top:14px;background:#fff;border-radius:14px;padding:6px 14px}
.loyalty-tier-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.loyalty-tier-row:last-child{border-bottom:none}
.loyalty-tier-row .lt-ic{font-size:20px}
.loyalty-tier-row .lt-txt{flex:1;display:flex;flex-direction:column}
.loyalty-tier-row .lt-txt b{font-size:13px;color:var(--ink)}
.loyalty-tier-row .lt-txt small{font-size:11px;color:var(--muted)}
.loyalty-tier-row.current{background:var(--green-soft);border-radius:10px;padding-left:8px;padding-right:8px}

/* 🆕 مكافأة مستحقة (كل 1000 نقطة) — تنبيه بارز جوه بوب أب النقاط،
   وبريق خفيف على زرار النقاط بالصفحة الرئيسية لما يكون فيه مكافأة */
.loyalty-btn.has-reward{background:linear-gradient(135deg,var(--gold) 0%,#e0a83a 100%);animation:rewardPulse 1.6s ease-in-out infinite}
@keyframes rewardPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,144,31,.35)}50%{box-shadow:0 0 0 8px rgba(200,144,31,0)}}
.reward-due-box{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--gold-soft);border:1.5px solid #eddcae;border-radius:14px;padding:14px;margin-top:12px}
.reward-due-box .rd-txt{display:flex;flex-direction:column;gap:2px}
.reward-due-box .rd-txt b{font-size:13.5px;color:#8a6d24}
.reward-due-box .rd-txt small{font-size:11px;color:#a3893f}
.reward-progress-box{text-align:center;color:var(--muted);font-size:12px;margin-top:10px;padding:8px}
.reward-claims-list{background:#fff;border-radius:14px;padding:4px 14px}
.rc-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.rc-row:last-child{border-bottom:none}
.rc-row small{color:var(--muted);font-size:11px}

/* عروض اليوم */
.deal-card{flex:0 0 190px;background:#fff;border:1.5px solid #f3c9c2;border-radius:14px;padding:12px;cursor:pointer;box-shadow:0 2px 8px rgba(192,57,43,.08)}
.deal-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.deal-badge{background:#c0392b;color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:8px}
.deal-countdown{font-size:11px;font-weight:800;color:#c0392b}
.deal-title{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:4px}
.deal-gift{font-size:11px;color:var(--gold);font-weight:700;margin-bottom:6px}
.deal-thumbs{display:flex;gap:5px}
.deal-thumb{width:28px;height:28px;background:#f4f8f6;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}
.deal-thumb-more{width:28px;height:28px;background:#fdeceb;color:#c0392b;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}

/* إعادة آخر طلب — بقت زرار واحد مضغوط، دوسة واحدة تحمّل الأصناف */
.reorder-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;text-align:right;transition:.15s}
.reorder-btn:active{transform:scale(.98);background:var(--green-soft)}
.reorder-btn .rb-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.reorder-btn .rb-ic{font-size:20px;flex-shrink:0}
.reorder-btn .rb-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.reorder-btn .rb-items{font-size:12.5px;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reorder-btn .rb-meta{font-size:11px;color:var(--muted)}
.reorder-btn .rb-cta{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--green-2);background:var(--green-soft);padding:8px 14px;border-radius:10px}

/* الإشعارات */
.notif-list{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.notif-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.notif-row.read{opacity:.55}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}
.notif-read-btn{font-size:11px;font-weight:800;color:var(--green-2);background:var(--green-soft);padding:5px 10px;border-radius:10px;flex-shrink:0;white-space:nowrap}
.notif-row:last-child{border-bottom:none}
.notif-ic{font-size:18px}
.notif-txt{font-size:12.5px;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.notif-txt small{color:var(--muted);font-size:10.5px}

/* كارت مصغّر (الأكثر مبيعاً / المفضلة) */
.mini-card{flex:0 0 108px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:8px;position:relative}
.mini-fav{position:absolute;top:6px;left:6px;background:rgba(255,255,255,.9);border:none;width:24px;height:24px;border-radius:50%;font-size:12px;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.mini-pic{height:64px;background:#f4f7f6;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:6px;cursor:pointer;overflow:hidden}
.mini-pic img{width:100%;height:100%;object-fit:cover}
.mini-name{font-size:11px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.4;height:30px;overflow:hidden}
.mini-price{font-size:12px;font-weight:900;color:var(--red);cursor:pointer;margin-top:3px}

/* زرار القلب على كارت الصنف الرئيسي */
.card-fav{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);border:none;width:30px;height:30px;border-radius:50%;font-size:14px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center}

/* ===================== 🆕 بوب أب عام (Modal) ===================== */
.modal-overlay{position:fixed;inset:0;background:rgba(10,20,16,.5);display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:fadeIn .2s ease}

/* 🆕 بوب أب إعلاني كامل الشاشة — بيظهر فوق كل حاجة (حتى فوق المودالات
   العادية)، صورة تملأ الشاشة بعرضها وطولها، مع زرار "×" واضح للإغلاق. */
/* 🆕 البوب أب بقى بنسبة ~70% من مساحة الشاشة بدل ما يغطّيها بالكامل —
   خلفية شبه شفافة حواليه (زي أي بوب أب عادي)، والصورة نفسها بتتوسّط
   وتحافظ على نسبتها الطبيعية (من غير قص) جوه المساحة المتاحة. زرار
   الإغلاق ملاصق لركن البوب أب نفسه، مش ركن الشاشة كلها. */
.popup-ad-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;animation:fadeIn .25s ease;padding:5vh 5vw}
.popup-ad-box{position:relative;max-width:90vw;max-height:90vh;display:flex}
.popup-ad-img{max-width:90vw;max-height:90vh;width:auto;height:auto;object-fit:contain;cursor:pointer;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.4);display:block}
.popup-ad-close{position:absolute;top:-14px;left:-14px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);border:none;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.3)}
@media (min-width:700px){ .modal-overlay{align-items:center;padding:20px} }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{position:relative;background:var(--bg);width:100%;max-width:480px;max-height:82vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:22px 16px calc(20px + var(--safe-b));animation:slideUp .28s cubic-bezier(.22,.9,.32,1)}
@media (min-width:700px){ .modal-box{max-width:600px;border-radius:20px;margin-bottom:20px} }
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:12px;left:12px;background:#fff;border:1px solid var(--line);color:var(--ink);width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.modal-title{font-size:16.5px;font-weight:900;color:var(--ink);margin:0 40px 16px 0}

/* 🆕 بوب أب "المفضلة" — بيتفتح من زرار القلب في الهيدر */
.fav-modal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:700px){ .fav-modal-grid{grid-template-columns:repeat(4,1fr)} }
.fav-modal-grid .mini-card{flex:none;width:auto}
.fav-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 10px;color:var(--muted)}
.fav-empty{font-size:40px}
.fav-empty p{font-size:14px;font-weight:800;color:var(--ink);margin:10px 0 4px}
.fav-empty small{font-size:12px;color:var(--muted)}

/* 🆕 بوب أب "كل أصناف الشركة دي" — تصميم مصغّر جدًا يتحمّل يعرض
   20-30 صنف مرة واحدة من غير سكرول كتير: 3 أعمدة على الموبايل،
   صورة صغيرة، اسم سطر واحد، وعناصر تحكم مصغّرة لأقصى درجة ممكنة. */
.company-modal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
@media (min-width:560px){ .company-modal-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:700px){ .company-modal-grid{grid-template-columns:repeat(5,1fr)} }
.company-modal-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;display:flex;flex-direction:column;gap:3px}
.cm-pic{width:100%;aspect-ratio:1;background:#f4f8f6;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cm-pic img{width:100%;height:100%;object-fit:cover}
.cm-pic .pic-circle{font-size:22px}
.cm-name{font-size:10px;font-weight:700;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-price{font-size:10.5px;font-weight:900;color:var(--red)}
.cm-action{margin-top:1px}
.cm-action .add-btn{width:100%;padding:5px 4px;font-size:10.5px;border-radius:8px}
.cm-action .stepper{width:100%}
.cm-action .stepper button{width:22px;height:22px;font-size:13px}
.cm-action .stepper .stepper-input{font-size:11px;width:22px;min-width:22px}
.cm-action .out{font-size:9.5px;padding:5px 2px}
/* بوكسات كرتونة/علبة جوه بوب أب الشركة — أصغر نسخة موجودة في التطبيق */
.cm-action .pack-order{gap:3px}
.cm-action .pack-row{padding:2px 4px;gap:3px;border-radius:6px}
.cm-action .pack-name{font-size:9px}
.cm-action .pack-price{font-size:8px}
.cm-action .pack-price b{font-size:8.5px}
.cm-action .pack-stepper button{width:19px;height:19px;font-size:11px}
.cm-action .pack-stepper .stepper-input{width:18px;min-width:18px;font-size:10px}
.cm-action .pack-total{font-size:8px;padding:3px 4px}

/* 🆕 بوب أب "آخر طلب لك" — قائمة الأصناف قبل الإضافة للسلة */
.lo-list{background:#fff;border-radius:14px;padding:4px 12px;margin-top:4px}
.lo-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.lo-row:last-child{border-bottom:none}
.lo-em{font-size:22px;flex-shrink:0}
.lo-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lo-txt b{font-size:13px;color:var(--ink)}
.lo-txt small{font-size:11px;color:var(--muted)}
.lo-pr{font-size:13px;font-weight:800;color:var(--red);flex-shrink:0}
.lo-total{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-top:10px;background:var(--green-soft);border-radius:12px;font-size:14px;font-weight:700;color:var(--ink)}
.lo-total b{color:var(--red);font-size:16px}