/* ─── BAZAR AL-DHAFER — STORE CSS v2.1 ─────────────────────
   Colors: #004225 | #F5F5DC | #FFB000 | #FFCF9D
   Default: LIGHT MODE
──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;900&family=Vazirmatn:wght@300;400;500;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── CSS VARIABLES — LIGHT MODE (DEFAULT) ──────────────── */
:root {
  --P1: #004225;  --P2: #005a30;  --P3: #007540;
  --G1: #FFB000;  --G2: #FFC533;  --G3: #FFCF9D;
  --CREAM: #F5F5DC;

  /* LIGHT (default) */
  --BG:  #F5F5DC;  --BG2: #FFFEF5;
  --SF:  #FFFFFF;  --SF2: #F0EFE0;
  --TX:  #1A2A1E;  --TX2: #4A6A50;
  --BD:  #C8D8C0;  --SH:  rgba(0,66,37,.10);
  --CARD-BG: #FFFFFF;
  --CARD-BORDER: #D8E8D0;
  --CARD-SHADOW: 0 4px 20px rgba(0,66,37,.08);
  --CARD-SHADOW-HOVER: 0 12px 36px rgba(0,66,37,.16);

  --RED:  #E53935;
  --BLUE: #1565C0;
  --rad:  18px;
  --rad-sm: 12px;
}

/* ─── DARK MODE ──────────────────────────────────────────── */
body.dark {
  --BG:  #0A1A0E;  --BG2: #0F2416;
  --SF:  #162E1C;  --SF2: #1C3A22;
  --TX:  #F0F0E8;  --TX2: #90A890;
  --BD:  #1A3020;  --SH:  rgba(0,0,0,.5);
  --CARD-BG: #162E1C;
  --CARD-BORDER: #1E3A24;
  --CARD-SHADOW: none;
  --CARD-SHADOW-HOVER: 0 12px 36px rgba(0,0,0,.5);
}

body, html {
  background: var(--BG); color: var(--TX);
  font-family: 'Tajawal', sans-serif;
  direction: rtl; overflow-x: hidden; min-height: 100vh;
  transition: background .3s, color .3s;
  width: 100%;
  max-width: 100%;
}

/* منع الفراغ الجانبي على iPhone: المحتوى الرئيسي لا يتجاوز عرض الشاشة
   ويحترم الـ safe-area الجانبي (landscape notch) دون إزاحة */
.mc {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
@media(max-width:767px){
  .mc {
    width: 100%;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}
body.lang-fa { font-family: 'Vazirmatn','Tahoma',sans-serif; line-height:1.85; }
.fa { font-family: 'Amiri', serif; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--BG); }
::-webkit-scrollbar-thumb { background: var(--P2); border-radius: 4px; }

/* ─── LOADER ─────────────────────────────────────────────── */
#root-loader {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:100vh; background:var(--BG);
}
.loader-ring {
  width:70px; height:70px; border-radius:50%;
  border:4px solid var(--SF2); border-top-color:var(--G1);
  animation:spin .8s linear infinite; margin-bottom:20px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }
@keyframes pG      { 0%,100%{box-shadow:0 0 0 0 rgba(0,66,37,.3);}50%{box-shadow:0 0 0 18px rgba(0,66,37,0);} }
@keyframes flt     { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }
@keyframes mIn     { from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);} }
@keyframes bkIn    { from{opacity:0;}to{opacity:1;} }
@keyframes shimmer { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }

.afu  { animation:fadeUp .5s ease forwards; }
.afu1 { animation:fadeUp .5s .1s ease both; }
.afu2 { animation:fadeUp .5s .2s ease both; }
.afu3 { animation:fadeUp .5s .3s ease both; }
.fl   { animation:flt 3s ease-in-out infinite; }

/* ─── GRADIENT TEXT ──────────────────────────────────────── */
.gTxt {
  background:linear-gradient(135deg,#FFB000,#CC8800,#FFB000);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.gTxt-green {
  background:linear-gradient(135deg,#004225,#005a30);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  background:linear-gradient(135deg,#004225,#005a30);
  color:#fff;font-weight:700;border:none;cursor:pointer;
  transition:all .3s;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary:hover {
  background:linear-gradient(135deg,#005a30,#007540);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,66,37,.35);
}
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.5;cursor:not-allowed;transform:none; }

.btn-outline {
  background:transparent;border:2px solid var(--P1);
  color:var(--P1);cursor:pointer;transition:all .3s;font-family:inherit;
}
body.dark .btn-outline { color:#4CAF50;border-color:#4CAF50; }
.btn-outline:hover { background:rgba(0,66,37,.08);transform:translateY(-1px); }

.btn-gold {
  background:linear-gradient(135deg,#FFB000,#CC8800);
  color:#1A2A1E;font-weight:700;border:none;cursor:pointer;
  transition:all .3s;font-family:inherit;
}
.btn-gold:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,176,0,.3); }

.btn-ghost { background:none;border:none;cursor:pointer;color:var(--TX2);transition:color .2s;font-family:inherit; }
.btn-ghost:hover { color:var(--TX); }

/* ─── CARD — IMPROVED ────────────────────────────────────── */
.card {
  background:var(--CARD-BG);
  border:1px solid var(--CARD-BORDER);
  border-radius:var(--rad);
  box-shadow:var(--CARD-SHADOW);
  transition:all .35s cubic-bezier(.25,.8,.25,1);
}
.card-hover:hover {
  box-shadow:var(--CARD-SHADOW-HOVER);
  transform:translateY(-6px);
  border-color:rgba(0,66,37,.3);
}
body.dark .card-hover:hover {
  border-color:rgba(0,66,37,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
body.light .card { background:#fff; }

/* ─── PRODUCT CARD ───────────────────────────────────────── */
.prod-card {
  overflow:hidden;cursor:pointer;position:relative;
  border-radius:var(--rad)!important;
  transition:transform .3s ease, box-shadow .3s ease;
}
@media(max-width:600px){
  .prod-card { border-radius:14px!important; }
  .prod-card:active { transform:scale(.97); }
  /* تطابق زوايا الصورة مع زوايا الكارت */
  .prod-img-wrap { border-radius:14px 14px 0 0 !important; }
  .prod-img-wrap img { border-radius:14px 14px 0 0 !important; }
}
.prod-img-wrap {
  overflow:hidden;position:relative;
  height:190px;border-radius:var(--rad) var(--rad) 0 0;
  background:linear-gradient(145deg,var(--SF),var(--SF2));
}
/* Square on mobile */
@media(max-width:600px){
  .prod-img-wrap {
    height:auto !important;
    aspect-ratio:1/1;
    width:100%;
  }
  .prod-img-wrap .prod-img {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .prod-img-wrap .prod-img-skeleton {
    position:absolute !important;
    inset:0 !important;
  }
}
.prod-img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.prod-card:hover .prod-img { transform:scale(1.07); }
.prod-img-skeleton {
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--SF) 25%,var(--SF2) 50%,var(--SF) 75%);
  background-size:400% 100%;animation:shimmer 1.5s infinite;
}
/* Badge NEW */
.prod-badge-new {
  position:absolute;top:12px;right:12px;z-index:2;
  background:linear-gradient(135deg,#004225,#005a30);
  color:#fff;font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:20px;
  box-shadow:0 2px 8px rgba(0,66,37,.3);
}
/* Badge DISCOUNT */
.prod-badge-discount {
  position:absolute;top:12px;left:52px;z-index:2;
  background:linear-gradient(135deg,#E53935,#C62828);
  color:#fff;font-size:11px;font-weight:900;
  padding:4px 10px;border-radius:20px;
  box-shadow:0 2px 8px rgba(229,57,53,.35);
}
/* Fav btn */
.prod-fav-btn {
  position:absolute;top:12px;left:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s;backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.prod-body { padding:12px 14px 14px; }
.prod-name { transition:color .2s; }
.prod-card:hover .prod-name { color:var(--P1) !important; }
body.dark .prod-card:hover .prod-name { color:#4CAF50 !important; }
.prod-name { font-size:13px;font-weight:600;line-height:1.5;margin-bottom:6px;min-height:36px; }

/* Price with original price */
.prod-price-wrap { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.prod-price { color:var(--G1);font-weight:800;font-size:16px;letter-spacing:-0.3px; }
.prod-price-old { color:var(--TX2);font-size:12px;text-decoration:line-through; }
.prod-pts   { color:var(--P2);font-size:11px;margin-top:3px; }
body.dark .prod-pts { color:#4CAF50; }
.stars { color:var(--G1);font-size:12px;letter-spacing:1px; }

/* ─── INPUT ──────────────────────────────────────────────── */
.inp {
  background:var(--SF);border:1.5px solid var(--BD);
  border-radius:var(--rad-sm);color:var(--TX);
  padding:13px 16px;width:100%;
  font-family:inherit;font-size:15px;
  transition:all .3s;outline:none;
}
.inp:focus { border-color:var(--P2);box-shadow:0 0 0 3px rgba(0,66,37,.12); }
.inp::placeholder { color:var(--TX2); }
select.inp option { background:var(--SF);color:var(--TX); }
.inp[readonly] { opacity:.7;cursor:not-allowed;background:var(--SF2); }
.inp-icon { position:relative; }
.inp-icon .inp { padding-right:46px; }
.inp-icon .icon { position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--TX2);pointer-events:none; }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.sidebar {
  position:fixed;top:0;right:0;width:270px;height:100vh;
  background:var(--BG2);border-left:1px solid var(--BD);
  z-index:100;overflow-y:auto;display:flex;flex-direction:column;
  transition:background .3s,border-color .3s;
  box-shadow:-4px 0 24px rgba(0,66,37,.06);
}
body.dark .sidebar { box-shadow:none; }

/* ارتفاع موحّد لرأس القائمة الجانبية والهيدر العلوي ليتطابق الخطّان */
:root { --dsk-header-h: 92px; }
.sidebar-head {
  height: var(--dsk-header-h);
  box-sizing: border-box;
  padding: 0 18px;
  border-bottom: 1px solid var(--BD);
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
}

/* ─── Desktop Header (fixed, all pages) ─── */
.dsk-header {
  position: fixed;
  top: 0;
  right: 270px; /* يبدأ من حافة القائمة الجانبية */
  left: 0;
  z-index: 99;
  height: var(--dsk-header-h);
  box-sizing: border-box;
  background: var(--BG2);
  border-bottom: 1px solid var(--BD);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 12px rgba(0,66,37,.05);
  transition: background .3s, border-color .3s, top .3s ease;
}
.dsk-header-spacer { height: var(--dsk-header-h); flex-shrink: 0; }
body.dark .dsk-header { box-shadow: 0 2px 12px rgba(0,0,0,.25); }
/* عند ظهور بانر التثبيت ينزل الهيدر أسفله */
body.has-install-banner .dsk-header { top: var(--install-banner-h); }

/* عناوين الصفحات الداخلية: تظهر على الموبايل فقط، لأن الهيدر العلوي
   في الحاسبة يعرض اسم الصفحة (تفادياً للتكرار) */
@media(min-width:768px){
  .mob-only-title { display: none !important; }
}

/* App Bar (mobile) — fixed sticky always visible */
.appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  background: var(--BG2);
  border-bottom: 1px solid var(--BD);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* الارتفاع: محتوى 42px + 12px أعلى/أسفل = 66px، + safe-area للـ notch في iPhone */
  box-sizing: border-box;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px rgba(0,66,37,.08);
  transition: background .3s, border-color .3s, top .3s ease;
  /* منع الارتجاج */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
body.dark .appbar { box-shadow: 0 2px 12px rgba(0,0,0,.3); }

/* ─── عند ظهور بانر تثبيت التطبيق ─── */
/* البانر ثابت أعلى الشاشة، فننزّل الأبار أسفله ونكبّر الفراغ التعويضي.
   ارتفاع البانر ≈ safe-area-top + 56px */
:root { --install-banner-h: calc(env(safe-area-inset-top, 0px) + 56px); }
body.has-install-banner .appbar {
  top: var(--install-banner-h);
  /* البانر نفسه يحترم الـ notch، فالأبار يحتاج padding علوي عادي فقط */
  padding-top: 12px;
}
body.has-install-banner .appbar-spacer {
  height: calc(66px + var(--install-banner-h));
}

/* على الحاسبة/التاب: القائمة الجانبية والمحتوى ينزلان أسفل البانر */
body.has-install-banner .sidebar {
  top: var(--install-banner-h);
  height: calc(100vh - var(--install-banner-h));
}
@media(min-width:768px){
  body.has-install-banner .mc {
    margin-top: var(--install-banner-h);
  }
}

.bnav {
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(245,245,220,.97);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--BD);
  z-index:100;
  /* منع الارتجاج على Android/iOS عند اختفاء شريط العنوان */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  /* ملاصق للأسفل تماماً؛ الـ padding فقط يرفع المحتوى فوق home-indicator في iPhone */
  bottom:0;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body.dark .bnav {
  background:rgba(10,26,14,.97);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
}

@media(min-width:768px) { .mob{display:none!important;} .dsk{display:flex!important;} .mc{margin-right:270px;} }
@media(max-width:767px) { .mob{display:flex!important;} .dsk{display:none!important;} .mc{margin-right:0!important;} }

.pg { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.pg > * { min-width: 0; }
@media(min-width:768px) { .pg{grid-template-columns:repeat(2,1fr);gap:16px;} }
@media(min-width:1024px){ .pg{grid-template-columns:repeat(4,1fr);} }

/* ─── STATUS / CHIPS ─────────────────────────────────────── */
.badge-dot { position:absolute;top:-4px;right:-4px;width:17px;height:17px;background:#E53935;border-radius:50%;border:2px solid var(--BG2);font-size:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700; }
.chip { padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block; }
.chip-green { background:rgba(0,66,37,.12);color:var(--P1); }
.chip-gold  { background:rgba(255,176,0,.15);color:#8A5E00; }
.chip-blue  { background:rgba(21,101,192,.12);color:var(--BLUE); }
.chip-red   { background:rgba(229,57,53,.12);color:var(--RED); }
body.dark .chip-green { background:rgba(0,66,37,.2);color:#4CAF50; }
body.dark .chip-gold  { background:rgba(255,176,0,.15);color:#FFB000; }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-bg {
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:200;display:flex;align-items:flex-end;justify-content:center;
  animation:bkIn .2s ease;
}
@media(min-width:600px){ .modal-bg{align-items:center;} }
.modal {
  background:var(--BG2);border-radius:24px 24px 0 0;
  padding:28px;width:100%;max-width:500px;
  animation:mIn .3s ease;border:1px solid var(--BD);
  max-height:90vh;overflow-y:auto;
}
@media(min-width:600px){ .modal{border-radius:24px;} }

/* ─── SLIDER ─────────────────────────────────────────────── */
.slider-wrap {
  border-radius:18px;
  overflow:hidden;position:relative;
  height:200px;margin:14px 16px;
  box-shadow:0 10px 36px rgba(0,66,37,.22);
  border:1px solid rgba(255,255,255,.07);
}
body.dark .slider-wrap { box-shadow:0 10px 36px rgba(0,0,0,.5); }
.slide {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:22px 24px 22px 28px;
  transition:opacity .6s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
/* Fade in animation */
.slide[style*="opacity: 1"], .slide[style*="opacity:1"] {
  animation:slideIn .4s ease;
}
@keyframes slideIn { from{transform:scale(.98);opacity:.7} to{transform:scale(1);opacity:1} }
.slide-dot {
  height:7px;border-radius:4px;cursor:pointer;
  transition:all .4s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
@media(max-width:600px){
  .slider-wrap { height:190px; margin:12px; }
  .slide { padding:18px 20px; }
}

/* ─── LANG BUTTON ────────────────────────────────────────── */
.lbtn { display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--SF);border:2px solid var(--BD);border-radius:var(--rad-sm);padding:12px 16px;cursor:pointer;transition:all .3s;font-family:inherit; }
.lbtn:hover,.lbtn.act { border-color:var(--P2);background:rgba(0,66,37,.08);transform:translateY(-2px);box-shadow:0 5px 18px rgba(0,66,37,.15); }

/* ─── TOGGLE ─────────────────────────────────────────────── */
.tog { width:50px;height:27px;border-radius:14px;border:none;cursor:pointer;position:relative;transition:background .3s; }
.knob { width:21px;height:21px;border-radius:50%;background:white;position:absolute;top:3px;transition:all .3s;box-shadow:0 1px 4px rgba(0,0,0,.25); }

/* ─── DARK TOGGLE in sidebar/appbar ─────────────────────── */
.dark-toggle-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-top:1px solid var(--BD);
}
.dark-toggle-label { display:flex;align-items:center;gap:8px;color:var(--TX2);font-size:14px; }

/* ─── TOAST ──────────────────────────────────────────────── */
.toast {
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#004225,#005a30);
  color:#fff;padding:13px 28px;border-radius:14px;z-index:400;
  font-family:inherit;font-size:14px;font-weight:600;
  box-shadow:0 8px 28px rgba(0,66,37,.35);white-space:nowrap;
  animation:fadeUp .3s ease;
}

/* ─── NOTIF PANEL ────────────────────────────────────────── */
.notif-panel {
  position:absolute;top:52px;left:8px;width:340px;max-width:calc(100vw - 16px);
  max-height:75vh;overflow-y:auto;
  background:var(--BG2);border:1px solid var(--BD);
  border-radius:18px;box-shadow:0 12px 40px rgba(0,66,37,.15);
  z-index:150;
}
body.dark .notif-panel { box-shadow:0 12px 40px rgba(0,0,0,.5); }
.notif-panel button { -webkit-tap-highlight-color:rgba(0,66,37,.15);touch-action:manipulation; }
@media(max-width:600px){
  .notif-panel { width:calc(100vw - 16px); left:8px; right:8px; }
}

/* ─── PATTERN BG ─────────────────────────────────────────── */
.isl-bg {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='rgba(0,66,37,0.06)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ─── DETAIL IMAGE ───────────────────────────────────────── */
.detail-img-wrap { margin:16px;border-radius:var(--rad);overflow:hidden;height:290px;position:relative;border:1px solid var(--BD);box-shadow:var(--CARD-SHADOW); }
.detail-img { width:100%;height:100%;object-fit:cover;display:block; }

/* ─── CAT PILL ───────────────────────────────────────────── */
.cat-pill {
  flex-shrink:0;border-radius:18px;
  padding:14px 16px;cursor:pointer;
  text-align:center;min-width:84px;
  transition:all .35s cubic-bezier(.25,.8,.25,1);
  border:1px solid transparent;
  box-shadow:var(--CARD-SHADOW);
}
.cat-pill:hover { transform:translateY(-5px); }

/* ─── PROFILE CARD ───────────────────────────────────────── */
.profile-card { border-radius:var(--rad);padding:22px;margin-bottom:18px;position:relative;overflow:hidden;border:1px solid rgba(0,66,37,.2); }
body:not(.dark) .profile-card { background:linear-gradient(135deg,#E8F2E0,#F5F5DC); }
body.dark .profile-card { background:linear-gradient(135deg,#0F2416,#081A0E); }

/* ─── EMPTY STATE ────────────────────────────────────────── */
.empty-state {
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:65vh;gap:18px;padding:24px;text-align:center;
}
.empty-state-icon { font-size:72px;opacity:.3; }
.empty-state-title { color:var(--TX2);font-size:18px;font-weight:600; }
.empty-state-sub { color:var(--TX2);font-size:14px;opacity:.7; }

/* ─── PAY OPTION ─────────────────────────────────────────── */
.pay-option { flex:1;padding:14px;border-radius:var(--rad-sm);cursor:pointer;text-align:center;border:2px solid var(--BD);transition:all .3s; }
.pay-option.selected { border-color:var(--P2);background:rgba(0,66,37,.06);box-shadow:0 4px 14px rgba(0,66,37,.1); }
body.dark .pay-option.selected { background:rgba(0,66,37,.12); }

/* ─── SIDEBAR DARK TOGGLE (desktop) ─────────────────────── */
.sidebar-footer {
  padding:14px 18px;border-top:1px solid var(--BD);
  display:flex;flex-direction:column;gap:10px;
}

/* ─── SECTION HEADER ─────────────────────────────────────── */
.section-header {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.section-title { color:var(--TX);font-size:17px;font-weight:700; }
.section-link  { color:var(--P2);font-size:13px;cursor:pointer;font-weight:600;transition:opacity .2s; }
.section-link:hover { opacity:.7; }
body.dark .section-link { color:#4CAF50; }

@media(max-width:400px) { .pg{grid-template-columns:repeat(2,1fr);gap:10px;} }

/* ═══════════════════════════════════════════════════════════════
   PHASE 2 — Vendors & Wholesale UI
═══════════════════════════════════════════════════════════════ */

/* --- Wholesale badge on product cards --- */
.prod-badge-wholesale {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #FF6F00, #FF8F00);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(255, 111, 0, 0.4);
  z-index: 2;
  font-family: inherit;
}

/* --- Vendor link below product name on PCard --- */
.prod-vendor-link {
  display: inline-block;
  background: rgba(0, 66, 37, 0.07);
  border: 1px solid rgba(0, 66, 37, 0.15);
  color: #004225;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 6px;
  transition: all 0.2s;
}
.prod-vendor-link:hover {
  background: rgba(0, 66, 37, 0.15);
  transform: translateY(-1px);
}
body.dark .prod-vendor-link {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.25);
  color: #4CAF50;
}

/* --- Companies grid --- */
.vendors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
@media (max-width: 600px) {
  .vendors-grid { grid-template-columns: 1fr; }
}

/* --- Vendor card --- */
.vendor-card {
  background: var(--SF);
  border: 1px solid var(--BD);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vendor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 66, 37, 0.12);
  border-color: rgba(0, 66, 37, 0.3);
}
.vendor-card-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vendor-card-hdr img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
}
.vendor-logo-fallback {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #004225, #005a30);
  color: #FFB000;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  flex-shrink: 0;
}
.vendor-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--TX);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-card-type {
  display: inline-block;
  background: rgba(255, 176, 0, 0.12);
  color: #B8860B;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
body.dark .vendor-card-type {
  background: rgba(255, 176, 0, 0.18);
  color: #FFB000;
}
.vendor-card-desc {
  color: var(--TX2);
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vendor-card-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px dashed var(--BD);
  flex-wrap: wrap;
}
.vendor-card-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vc-stat-num {
  font-size: 16px;
  font-weight: 700;
  color: #004225;
}
body.dark .vc-stat-num { color: #4CAF50; }
.vc-stat-lbl {
  font-size: 10px;
  color: var(--TX2);
}
.vc-gov {
  margin-right: auto;
  font-size: 11px;
  color: var(--TX2);
}

/* --- Vendor page hero --- */
.btn-back-vendor {
  background: var(--SF);
  border: 1px solid var(--BD);
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--TX);
  margin-bottom: 14px;
  transition: all 0.2s;
}
.btn-back-vendor:hover { background: rgba(0, 66, 37, 0.08); }

.vendor-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0, 66, 37, 0.06), rgba(255, 176, 0, 0.04));
  border: 1px solid var(--BD);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}
body.dark .vendor-hero {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(255, 176, 0, 0.05));
}
.vendor-hero-logo, .vendor-hero-logo-fb {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  flex-shrink: 0;
  object-fit: cover;
}
.vendor-hero-logo-fb {
  background: linear-gradient(135deg, #004225, #005a30);
  color: #FFB000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
}
.vendor-hero-type {
  display: inline-block;
  background: rgba(255, 176, 0, 0.15);
  color: #B8860B;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  font-weight: 600;
}
body.dark .vendor-hero-type {
  background: rgba(255, 176, 0, 0.22);
  color: #FFB000;
}
.vendor-desc-card {
  background: var(--SF);
  border: 1px solid var(--BD);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.vendor-desc-card p {
  color: var(--TX2);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* --- ProductDetail vendor link --- */
.prod-detail-vendor {
  background: linear-gradient(135deg, rgba(0, 66, 37, 0.08), rgba(0, 66, 37, 0.04));
  border: 1px solid rgba(0, 66, 37, 0.2);
  color: #004225;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
}
.prod-detail-vendor:hover {
  background: linear-gradient(135deg, rgba(0, 66, 37, 0.15), rgba(0, 66, 37, 0.08));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 66, 37, 0.15);
}
body.dark .prod-detail-vendor {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.06));
  border-color: rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

/* --- Wholesale info card --- */
.wholesale-info {
  background: linear-gradient(135deg, rgba(255, 111, 0, 0.07), rgba(255, 143, 0, 0.04));
  border: 1px solid rgba(255, 111, 0, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.wh-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FF6F00, #FF8F00);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.wh-line {
  color: var(--TX2);
  font-size: 13px;
  margin: 4px 0 0 0;
}
.wh-line b {
  color: #FF6F00;
  font-weight: 700;
}
body.dark .wh-line b { color: #FFB300; }

/* ═══════════════════════════════════════════════════════════════
   MATERIAL SYMBOLS — Flutter-style icons
═══════════════════════════════════════════════════════════════ */
.msi {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.msi.msi-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.msi.msi-bold { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24; }

/* أيقونة فئة في الـ Home */
.cat-pill .msi { 
  font-size: 30px; 
  color: #004225;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
body.dark .cat-pill .msi { color: #4CAF50; }

/* أيقونة في بطاقة المنتج */
.prod-vendor-link .msi { font-size: 13px; vertical-align: middle; }

/* أيقونة كبيرة (Hero) */
.icon-hero { font-size: 48px; }
.icon-lg { font-size: 32px; }
.icon-md { font-size: 24px; }
.icon-sm { font-size: 18px; }
.icon-xs { font-size: 14px; }

/* ═══ iOS Safe Area Insets ══════════════════════════════ */
/* ملاحظة: الأبار نفسه يتعامل مع safe-area-inset-top عبر padding-top الخاص به.
   تطبيقه على كل .mob يسبب فراغاً مزدوجاً غير منتظم على iPhone. */
.mob-header { padding-top: env(safe-area-inset-top, 0px); }
.bnav { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* تعويض الـ AppBar الثابت — الصفحات تبدأ من تحته */
.mob-page-content {
  padding-top: calc(66px + env(safe-area-inset-top, 0px));
}
.appbar-spacer {
  height: calc(66px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
}

/* App içeriğinin üstündeki boşluk için */
.app-content-top {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Notch/Dynamic Island protection */
@supports (padding-top: env(safe-area-inset-top)) {
  .mob-header { padding-top: env(safe-area-inset-top); }
  .bnav { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ─── بطاقة المنتج — زر الإضافة الممتد ──────────────── */
.prod-add-btn {
  width:100%;
  padding:9px 0;
  border-radius:0 0 var(--rad) var(--rad);
  border:none;
  background:linear-gradient(135deg,#004225,#00642a);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:opacity .2s, filter .2s;
  font-family:inherit;
}
.prod-add-btn:hover { filter:brightness(1.1); }
.prod-add-btn:disabled { opacity:.4; cursor:not-allowed; }
@media(max-width:600px){
  .prod-add-btn { border-radius:0 0 14px 14px; }
}

/* ════════════════════════════════════════════════════════════
   PCARD — بطاقة المنتج الاحترافية
════════════════════════════════════════════════════════════ */
.pcard {
  position: relative;
  background: var(--SF);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.25,.8,.25,1),
              box-shadow .28s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 2px 10px rgba(0,66,37,.08), 0 1px 3px rgba(0,0,0,.06);
  border: 1px solid rgba(0,66,37,.07);
  min-width: 0;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,66,37,.18), 0 4px 12px rgba(0,0,0,.1);
}
.pcard:active { transform: scale(.97); }
@media(max-width:600px){
  .pcard { border-radius:16px; }
  .pcard:active { transform:scale(.96); }
}

/* ── منطقة الصورة ── */
.pcard-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, var(--SF), var(--SF2));
  flex-shrink: 0;
  border-radius: 18px 18px 0 0;
}
@media(max-width:600px){
  .pcard-img-wrap { border-radius: 16px 16px 0 0; }
}
.pcard-img-wrap .prod-img-wrap {
  border-radius: 0 !important;
  height: 100% !important;
}
.pcard-img-wrap img { transition: transform .5s ease; border-radius: 0 !important; }
.pcard:hover .pcard-img-wrap img { transform: scale(1.06); }

/* تدرج سفلي خفيف على الصورة */
.pcard-img-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(0,0,0,.22), transparent);
  pointer-events: none;
}

/* نفاذ المخزون */
.pcard-oos {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  letter-spacing: .5px;
}

/* الشارات */
.pcard-badges {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 5px; z-index: 2;
}
.pcard-badge {
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 20px;
  line-height: 1.4; letter-spacing: .3px;
}
.pcard-badge-new {
  background: linear-gradient(135deg,#004225,#00603a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,66,37,.35);
}
.pcard-badge-off {
  background: linear-gradient(135deg,#E53935,#C62828);
  color: #fff;
  box-shadow: 0 2px 8px rgba(229,57,53,.35);
}

/* زر المفضلة */
.pcard-fav {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: transform .2s, background .2s;
}
.pcard-fav:hover { transform: scale(1.15); }

/* ── جسم الكارت ── */
.pcard-body {
  padding: 12px 13px 13px;
  display: flex; flex-direction: column; flex: 1;
}

/* اسم المنتج */
.pcard-name {
  font-size: 13px; font-weight: 600;
  line-height: 1.55; color: var(--TX);
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  transition: color .2s;
}
.pcard:hover .pcard-name { color: var(--P1); }
body.dark .pcard:hover .pcard-name { color: #4CAF50; }

/* النجوم */
.pcard-stars {
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px;
}
.pcard-rev { font-size: 10px; color: var(--TX2); }

/* صف السعر + النقاط */
.pcard-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 10px;
}
.pcard-price-col { display: flex; flex-direction: column; }

/* السعر */
.pcard-price-wrap {
  display: flex; align-items: baseline; gap: 3px; flex-wrap: nowrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.pcard-price {
  font-size: 17px; font-weight: 800;
  color: var(--P1); line-height: 1;
}
body.dark .pcard-price { color: #4CAF50; }
.pcard-cur {
  font-size: 11px; font-weight: 600;
  color: var(--P1); opacity: .8;
}
body.dark .pcard-cur { color: #4CAF50; }
.pcard-old {
  font-size: 11px; color: var(--TX2);
  text-decoration: line-through;
  display: block; margin-top: 2px;
}

/* النقاط */
.pcard-pts {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,66,37,.08);
  border: 1px solid rgba(0,66,37,.25);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  color: #004225;
  width: fit-content;
  flex-shrink: 0;
}
body.dark .pcard-pts { color: #4CAF50; border-color: rgba(76,175,80,.4); background: rgba(76,175,80,.1); }

/* ── زر الإضافة العريض (أخضر — هوية البازار) ── */
.pcard-cart-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  background: linear-gradient(135deg,#004225,#00603a);
  color: #fff; cursor: pointer;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .2s, box-shadow .2s, opacity .2s, filter .2s;
  box-shadow: 0 4px 14px rgba(0,66,37,.35);
}
.pcard-cart-btn svg { flex-shrink: 0; }
.pcard-cart-btn:hover { filter: brightness(1.1); box-shadow: 0 6px 18px rgba(0,66,37,.45); transform: translateY(-1px); }
.pcard-cart-btn:active { transform: scale(.97); }
.pcard-cart-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }

/* نسخة الضيف — نفس الشكل الأخضر العريض */
.pcard-cart-guest {
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.35;
}

/* Grid عرض الكروت */
.prods-grid .pcard { width: 100%; }

/* ─── منع ارتجاج التاب بار على موبايل ───────────────────── */
#root {
  /* لا transform هنا حتى لا يُكسر position:fixed للـ bnav */
  transform: none !important;
  -webkit-transform: none !important;
}
/* تثبيت ارتفاع التاب بار من خلال CSS variable */
:root {
  --bnav-h: 62px;
}
@supports (height: 100dvh) {
  .bnav {
    /* ملاصق للأسفل؛ الـ safe-area يُعالَج عبر padding-bottom فقط */
    bottom: 0;
  }
}