/* =====================================================================
   MAIN.CSS — Over Sauce Lounge · Premium Design System
   ---------------------------------------------------------------------
   Light-first, premium Saudi ordering experience. Soft neutral surfaces,
   warm-gold brand accent, very soft modern shadows, glassmorphism, 8px
   spacing rhythm. Dark mode is a refined neutral-charcoal variant.
   All class names & DOM hooks preserved — visual layer only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Dark mode (refined neutral charcoal) */
  --ink:            #131316;   /* page background */
  --ink-soft:       #1C1C21;   /* cards / surfaces */
  --panel:          #26262C;   /* secondary surface */
  --parchment:      #FAFAFA;   /* primary text */
  --parchment-dim:  #C9C9D1;   /* secondary text */
  --copper:         #C2871D;   /* brand gold */
  --copper-light:   #E4A93F;   /* gold accent / hover */
  --brass:          #93939C;   /* muted / tertiary text */
  --line:           rgba(255,255,255,0.09);
  --success:        #4FA877;
  --danger:         #E0594A;
  --shadow-card:    0 8px 28px -14px rgba(0,0,0,0.55);
  --shadow-deep:    0 24px 60px -18px rgba(0,0,0,0.62);
  --overlay-scrim:  rgba(8,8,10,0.72);

  /* Type scale */
  --font-display: 'Reem Kufi', 'Tajawal', sans-serif;
  --font-body:    'Cairo', 'Tajawal', sans-serif;

  /* Spacing scale (8px rhythm, 4px sub-steps) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-full: 999px;

  color-scheme: dark;
}

/* Light mode — the premium default experience */
html.light{
  --ink:            #FAFAFA;   /* page background */
  --ink-soft:       #FFFFFF;   /* white cards */
  --panel:          #F4F4F5;   /* light-gray secondary */
  --parchment:      #18181B;   /* almost-black text */
  --parchment-dim:  #52525B;   /* secondary text */
  --copper:         #9C620F;   /* deep brand gold */
  --copper-light:   #BC7E1A;   /* gold accent (legible on white) */
  --brass:          #71717A;   /* muted gray text */
  --line:           rgba(24,24,27,0.07);
  --success:        #2E7D52;
  --danger:         #DC4A3D;
  --shadow-card:    0 2px 8px -3px rgba(24,24,27,0.06), 0 10px 26px -14px rgba(24,24,27,0.10);
  --shadow-deep:    0 8px 24px -10px rgba(24,24,27,0.10), 0 28px 56px -18px rgba(24,24,27,0.16);
  --overlay-scrim:  rgba(20,20,24,0.48);
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
*{ -webkit-tap-highlight-color: transparent; margin: 0; }

html{ scroll-behavior: smooth; }
html[dir="rtl"] body{ direction: rtl; }
html[dir="ltr"] body{ direction: ltr; }

body{
  background-color: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color .4s ease, color .4s ease;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select{ font-family: inherit; color: inherit; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; padding: 0; }

.font-display{ font-family: var(--font-display); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Subtle grain — barely-there texture for depth */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4=");
}
html.light .grain{ mix-blend-mode: overlay; opacity: 0.04; }

::-webkit-scrollbar{ width: 7px; height: 7px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--brass) 45%, transparent); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover{ background: var(--brass); }

.no-scrollbar::-webkit-scrollbar{ display: none; }
.no-scrollbar{ -ms-overflow-style: none; scrollbar-width: none; }

.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only-focusable:not(:focus){ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--copper-light);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.container{ max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5); }
.section{ padding-block: var(--space-16); }
/* أقسام العرض الأفقي (الأكثر طلبًا / الأفضل مبيعًا / مختارة لك):
   مسافة علوية ثابتة ومعتدلة لكل قسم، وصفر أسفله — بهذا تظل المسافات
   صحيحة أيًّا كان الظاهر منها (كانت المسافة مكتوبة يدويًا لكل قسم،
   فلمّا اختفى القسم الأول التصق الذي بعده بالصورة أعلاه). */
.rail-section{ padding-block: var(--space-12) 0 !important; }
.rail-section:last-of-type{ padding-bottom: var(--space-8) !important; }
@media (min-width: 768px){ .section{ padding-block: var(--space-24); } }

.hidden{ display: none !important; }
.flex{ display: flex; }
.grid{ display: grid; }

/* ---------------------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------------------- */
.text-eyebrow{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--copper-light);
  text-transform: uppercase;
}
.h1{ font-family: var(--font-display); font-size: clamp(2.4rem, 8vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--parchment); }
.h2{ font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--parchment); }
.h3{ font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; color: var(--parchment); }
.body-lead{ font-size: 1.05rem; color: var(--parchment-dim); line-height: 1.75; }
.muted{ color: var(--brass); }

.seal-divider{ display: flex; align-items: center; gap: var(--space-4); }
.seal-divider::before, .seal-divider::after{
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---------------------------------------------------------------------
   5. GLASS SURFACES
   --------------------------------------------------------------------- */
.glass{
  background: color-mix(in srgb, var(--ink-soft) 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
}
.glass-strong{
  background: color-mix(in srgb, var(--ink-soft) 90%, transparent);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 28px; border-radius: var(--radius-full);
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .3s, opacity .2s, color .25s;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.95); }
.btn:disabled{ opacity: .55; cursor: not-allowed; transform: none !important; }

.btn-primary{ background: var(--copper); color: #FFF7EC; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--copper) 70%, transparent); }
.btn-primary:hover{ background: var(--copper-light); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--copper) 60%, transparent); transform: translateY(-2px); }

.btn-secondary{
  background: var(--ink-soft); color: var(--parchment); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.btn-secondary:hover{ border-color: color-mix(in srgb, var(--copper) 40%, transparent); transform: translateY(-2px); }

.btn-ghost{ background: transparent; color: var(--copper-light); font-weight: 800; }
.btn-ghost:hover{ text-decoration: underline; text-underline-offset: 3px; }

.btn-sm{ padding: 9px 18px; font-size: 0.85rem; }
.btn-icon{ width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); }

.btn-add.bump, 

.tap-44{ min-width: 44px; min-height: 44px; }

/* ---------------------------------------------------------------------
   7. HEADER
   --------------------------------------------------------------------- */
.site-header{
  position: sticky; inset-inline: 0; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
  /* يمنع تعارض معروف بين position:sticky وbackdrop-filter على Safari/آيفون
     يسبب عدم ثبات الهيدر أثناء التمرير. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.site-header.scrolled{
  box-shadow: var(--shadow-card);
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
}
.header-top{
  max-width: 1200px; margin-inline: auto; padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.logo-mark{
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--copper-light), var(--copper));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  flex-shrink: 0; transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--copper) 60%, transparent);
}
.logo-link:hover .logo-mark{ transform: rotate(-8deg) scale(1.05); }
.logo-text-name{ font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--parchment); line-height: 1.1; white-space: nowrap; }
.logo-text-sub{ font-size: 10px; color: var(--brass); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

.header-search{ position: relative; flex: 1; max-width: 280px; }
.header-search input{
  width: 100%; padding: 11px 42px; border-radius: var(--radius-full);
  background: var(--panel); border: 1px solid var(--line); font-size: 0.9rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.header-search input::placeholder{ color: var(--brass); }
.header-search input:focus{ outline: none; border-color: color-mix(in srgb, var(--copper) 40%, transparent); background: var(--ink-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--copper) 12%, transparent); }
.header-search svg{ position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--brass); pointer-events: none; }
html[dir="rtl"] .header-search svg{ left: 14px; }
html[dir="ltr"] .header-search svg{ right: 14px; }

.icon-btn{
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--panel); border: 1px solid var(--line);
  transition: border-color .25s, transform .25s, background .25s;
  flex-shrink: 0;
}
.icon-btn:hover{ border-color: color-mix(in srgb, var(--copper) 40%, transparent); transform: translateY(-1px); background: var(--ink-soft); }

/* زر إغلاق الشاشات (مودال المنتج + لوحة التحكم): لون ثابت مستقل تمامًا
   عن الوضع الليلي/النهاري — كان يعتمد على متغيّرات تتبدّل مع الثيم فيصير
   أحيانًا فاتحًا على فاتح فيبدو مختفيًا. الآن دائرة داكنة صريحة وأيقونة
   بيضاء في كل الأحوال، مع حجم أكبر يسهل ملاحظته والضغط عليه. */
.modal-header .icon-btn{
  background: #2A2A2E !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  color: #FFFFFF !important;
  width: 40px; height: 40px;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.4);
}
.modal-header .icon-btn svg{ width: 19px; height: 19px; stroke: #FFFFFF; }
.modal-header .icon-btn:hover{ background: var(--copper) !important; border-color: var(--copper) !important; }

.cart-count-badge{
  position: absolute; top: -4px; inset-inline-start: -4px;
  background: var(--copper); color: #fff; font-size: 11px; font-weight: 800;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--copper) 70%, transparent);
}

.theme-track{ position: relative; width: 46px; height: 26px; border-radius: var(--radius-full); background: var(--panel); border: 1px solid var(--line); }
.theme-knob{
  position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--copper); display: flex; align-items: center; justify-content: center; font-size: 11px; color:#fff;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
html.light .theme-knob{ transform: translateX(20px); }
html[dir="rtl"].light .theme-knob{ transform: translateX(-20px); }

.lang-btn{
  font-weight: 800; font-size: 0.8rem; padding: 9px 15px; border-radius: var(--radius-full);
  background: var(--panel); border: 1px solid var(--line); transition: border-color .25s, background .25s;
}
.lang-btn:hover{ border-color: color-mix(in srgb, var(--copper) 40%, transparent); background: var(--ink-soft); }

/* Category nav — premium scroller with circular icon chips */
.category-nav{
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 0;
  position: relative;
}
/* المحتوى يتوسّط على الشاشات العريضة، بينما يبقى الخط الفاصل ممتدًا
   بعرض الهيدر كاملًا (وضع العرض الأقصى على العنصر نفسه كان يقطع الخط). */
@media (min-width: 1240px){
  .category-nav{ padding-inline: calc((100% - 1200px) / 2); }
}

/* زر "كل الأقسام" — ثابت لا ينزلق مع الشريط، يحل مشكلة عدم انتباه
   العميل لوجود أقسام خارج حدود الشاشة. */
.all-cats-btn{
  flex-shrink: 0; margin-inline-start: var(--space-4);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-soft); border: 1px solid var(--line);
  color: var(--copper-light); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.all-cats-btn:hover{ background: var(--copper); border-color: var(--copper); color: #fff; }

/* تدرّج خفيف عند حافة الشريط يوحي بوجود أقسام إضافية للتمرير */
.category-nav::after{
  content: ""; position: absolute; inset-inline-end: 0; top: 0; bottom: 0;
  width: 40px; pointer-events: none;
  /* يطابق شفافية الهيدر تمامًا حتى لا يظهر كشريحة معتمة فوق خلفية شفافة */
  background: linear-gradient(to left, color-mix(in srgb, var(--ink) 78%, transparent), transparent);
}
html[dir="ltr"] .category-nav::after{ background: linear-gradient(to right, color-mix(in srgb, var(--ink) 78%, transparent), transparent); }

/* لوحة كل الأقسام */
.all-cats-scrim{
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.55); display: flex; align-items: flex-start; justify-content: center;
  padding: 80px var(--space-5) var(--space-5);
}
.all-cats-panel{
  width: 100%; max-width: 440px; max-height: 70vh; max-height: 70dvh;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
}
.all-cats-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line); flex-shrink: 0;
  font-size: 1.05rem; color: var(--copper-light);
}
.all-cats-list{ overflow-y: auto; padding: var(--space-3); }

/* معرض العروض — لوحة أوسع تعرض صور العروض كاملة وواضحة */
/* يُعرض متوسّطًا بمسافات متوازنة بدل الالتصاق بأعلى الشاشة، فيستغل
   المساحة الرأسية ويظهر عددًا أكبر من العروض دفعة واحدة. */
#dealsGalleryScrim{ align-items: center; padding: var(--space-5); }
.deals-gallery-panel{
  width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
}
.deals-gallery-list{
  overflow-y: auto; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.deals-gallery-item{
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  cursor: zoom-in; display: block; width: 100%;
}
.deals-gallery-item img{
  width: 100%; height: auto; display: block;
  /* الصورة تظهر بكامل ارتفاعها الطبيعي — أي قص هنا يقتطع السعر أو
     عبارة "اطلب الآن" أسفل البانر وهي أهم ما في العرض. */
  max-height: none; object-fit: contain;
}
/* بطاقة عرض نصية (بلا صورة) داخل المعرض */
.deals-gallery-text{
  border-radius: var(--radius-lg); padding: var(--space-6);
  background: linear-gradient(135deg, #2A2118, #161616); color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.deals-gallery-text h3{ font-size: 1.15rem; margin-bottom: 6px; }
/* بطاقة العرض داخل المعرض: الصورة + أزرار الإجراء أسفلها */
.deals-gallery-card{ display: flex; flex-direction: column; gap: 10px; }
.deal-actions{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.deal-act{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--radius-full);
  font-size: 0.85rem; font-weight: 800; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--parchment);
  text-decoration: none; transition: transform .15s ease, background .2s;
}
.deal-act:active{ transform: scale(0.97); }
.deal-act-book{
  flex: 1; min-width: 130px;
  background: linear-gradient(135deg, #25D366, #1ebe5b); color: #fff; border: none;
}
.deal-act-view{ flex: 1; min-width: 120px; border-color: var(--copper); color: var(--copper-light); }
.deal-act-share{ width: 42px; padding: 10px; flex-shrink: 0; }
.deals-gallery-empty{ text-align: center; color: var(--parchment-dim); padding: var(--space-8) var(--space-4); }
.all-cats-item{
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  padding: 12px var(--space-4); border-radius: var(--radius-md);
  background: transparent; border: none; cursor: pointer;
  color: var(--parchment); font-size: 0.92rem; font-weight: 700; text-align: start;
  transition: background .2s;
}
.all-cats-item:hover{ background: var(--ink-soft); }
.all-cats-item .cat-count{ margin-inline-start: auto; font-size: 0.76rem; color: var(--brass); font-weight: 400; }

.category-scroller{
  flex: 1; padding: var(--space-3) var(--space-5);
  display: flex; gap: var(--space-3); overflow-x: auto;
  scroll-snap-type: x proximity;
  /* يمنع التباس المتصفح بين السحب الأفقي (تصفّح الأقسام) والسكرول
     الرأسي للصفحة أثناء اللمس على الموبايل — يضمن سحب أفقي فقط. */
  touch-action: pan-x;
}
.stamp-pill{
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2);
  padding: 9px 18px 9px 12px; border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 700;
  white-space: nowrap; border: 1px solid var(--line); scroll-snap-align: center;
  background: var(--ink-soft); color: var(--parchment); box-shadow: var(--shadow-card);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, background .35s, box-shadow .35s, color .35s;
}
html[dir="ltr"] .stamp-pill{ padding: 9px 12px 9px 18px; }
.stamp-pill span[aria-hidden="true"]{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; line-height: 1;
  background: color-mix(in srgb, var(--copper) 14%, transparent);
  transition: background .35s, transform .35s;
}
.stamp-pill.active{
  background: linear-gradient(155deg, var(--copper-light), var(--copper) 65%);
  border-color: transparent; color: #FFF7EC;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--copper) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
.stamp-pill.active span[aria-hidden="true"]{ background: rgba(255,255,255,0.24); transform: scale(1.05); }
.stamp-pill:not(.active):hover{ border-color: color-mix(in srgb, var(--copper) 35%, transparent); transform: translateY(-2px); }
.stamp-pill:active{ transform: scale(0.96); }

/* Announcement bar */

@media (max-width: 639px){  }

/* ---------------------------------------------------------------------
   8. HERO — immersive dark image block (theme-independent for contrast)
   --------------------------------------------------------------------- */
.hero{
  position: relative; min-height: 90vh; display: flex; align-items: flex-end; overflow: hidden;
  padding-top: 1.5rem;
  background: #0d0d10;
}
.hero-media{ position: absolute; inset: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.hero-scrim-1{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,12,0.94) 2%, rgba(10,10,12,0.55) 42%, rgba(10,10,12,0.12) 88%); }
.hero-scrim-2{ position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10,10,12,0.55), transparent 45%, rgba(10,10,12,0.30)); }
.hero-content{ position: relative; z-index: 10; max-width: 1200px; margin-inline: auto; padding: 0 var(--space-5) var(--space-20); width: 100%; color: rgba(255,255,255,0.88); }
.hero-content h1, .hero-content .h1{ color: #fff; }
.hero-content .body-lead{ color: rgba(255,255,255,0.82); }
.hero-content .text-eyebrow{ color: #ECBB60; }
.hero-badge{
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; border-radius: var(--radius-full);
  font-size: 0.82rem; font-weight: 800; color: #ECBB60; margin-bottom: var(--space-5);
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px);
}
.hero-dot{ width: 7px; height: 7px; border-radius: 50%; background: #5FC18A; box-shadow: 0 0 0 4px rgba(95,193,138,0.25); animation: pulse-dot 2s ease-in-out infinite; }
.hero-stats{ display: flex; align-items: center; gap: var(--space-3); color: rgba(255,255,255,0.82); font-size: 0.9rem; }
.dust-field{ position: absolute; inset: 0; overflow: hidden; }
.dust{ position: absolute; border-radius: 50%; background: #ECBB60; opacity: .5; pointer-events: none; filter: blur(0.5px); }

/* ---------------------------------------------------------------------
   9. PROMO / FLASH DEALS BANNER
   --------------------------------------------------------------------- */
.promo-strip{ display: flex; gap: var(--space-4); overflow-x: auto; padding-block: var(--space-2); scroll-snap-type: x proximity; }
.promo-card{
  flex-shrink: 0; width: min(360px, 82vw); border-radius: var(--radius-xl); padding: var(--space-6);
  color: #fff; scroll-snap-align: center;
  /* ارتفاع أدنى موحّد (نسبة 16:9 تقريبًا) حتى تتساوى كل البطاقات مهما
     اختلف محتواها — صورة كانت أو نصًا — فيبدو الشريط متناسقًا دائمًا. */
  min-height: min(202px, 46vw);
  background: linear-gradient(135deg, #2A2118, #161616);
  border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.promo-card::before{
  content: ''; position: absolute; top: -50px; inset-inline-end: -50px; width: 170px; height: 170px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--copper) 55%, transparent), transparent 70%);
}
.promo-timer{ display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.promo-timer span{
  background: rgba(0,0,0,0.4); color: #ECBB60; font-weight: 800; font-size: 0.85rem;
  padding: 5px 11px; border-radius: var(--radius-sm); min-width: 40px; text-align: center;
  border: 1px solid rgba(255,255,255,0.10);
}

/* ---------------------------------------------------------------------
   10. PRODUCT CARDS
   --------------------------------------------------------------------- */
.product-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.scroller-grid{ display: flex; gap: var(--space-5); overflow-x: auto; padding-block: var(--space-2); }
.scroller-grid .product-card{ flex-shrink: 0; width: 270px; }

.product-card{
  background: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s;
}
.product-card:hover, .product-card:focus-within{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--copper) 28%, transparent);
  box-shadow: var(--shadow-deep);
}
.product-img-wrap{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--panel); }
.product-img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); opacity: 0; }
.product-img.loaded{ opacity: 1; }
.product-card:hover .product-img{ transform: scale(1.07); }

.product-badges{ position: absolute; top: 12px; inset-inline-end: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 75%; }
.badge{ font-weight: 800; font-size: 11px; letter-spacing: 0.02em; padding: 5px 11px; border-radius: var(--radius-full); box-shadow: 0 4px 12px -3px rgba(0,0,0,0.25); }
.badge-new{ background: linear-gradient(135deg,#34A06A,#1F7A4A); color:#fff; }
.badge-best{ background: linear-gradient(135deg,var(--copper-light),var(--copper)); color:#FFF7EC; }
.badge-top{ background: linear-gradient(135deg,#8E6BC4,#6A4BA0); color:#fff; }

/* إطار صورة شاشة التفاصيل: تُعرض الصورة كاملة بلا قص (object-fit: contain)
   فيرى العميل الطبق بنفس تأطير الكارت تمامًا — كان الإطار العريض يقصّ
   أعلى الصورة وأسفلها فتبدو مكبّرة ومختلفة عمّا رآه في القائمة.
   الخلفية بيضاء ثابتة في الوضعين (فاتح/داكن) لأن صور الأطباق نفسها على
   خلفية بيضاء — فتندمج الجوانب مع الصورة بلا حدٍّ فاصل ظاهر. */
.product-modal-img-wrap{
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.badge-spicy{ background: linear-gradient(135deg,#E25B43,#B83A24); color:#fff; }
.badge-sale{ background: linear-gradient(135deg,#3B82A6,#27607E); color:#fff; }
.badge-outofstock{ background: rgba(0,0,0,0.7); color:#fff; }

.product-body{ padding: var(--space-4); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); }

/* زر "التفاصيل" داخل كارت المنتج — مدخل واضح لشاشة تعريف الطبق */
.product-details-btn{
  margin-top: auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--copper) 35%, transparent);
  background: color-mix(in srgb, var(--copper) 10%, transparent);
  color: var(--copper-light); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
  min-height: 36px;
}
.product-details-btn:hover{
  background: var(--copper); border-color: var(--copper); color: #fff;
}
.product-details-btn svg{ flex-shrink: 0; }
.product-name-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.product-name{ font-weight: 800; color: var(--parchment); font-size: 1rem; line-height: 1.35; }
.product-price-wrap{ display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.product-price{ font-family: var(--font-display); font-weight: 700; color: var(--copper-light); font-size: 1.02rem; }
.product-old-price{ font-size: 0.78rem; color: var(--brass); text-decoration: line-through; }
.product-desc{ color: var(--parchment-dim); font-size: 0.86rem; line-height: 1.6; flex: 1; }
.product-meta{ display: flex; align-items: center; gap: var(--space-3); font-size: 0.76rem; color: var(--brass); }
.rating-stars{ color: var(--copper-light); }

.product-footer{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.qty-stepper{ display: flex; align-items: center; gap: var(--space-1); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 2px; }
.qty-btn{ width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: background .2s, color .2s, transform .15s; min-width: 32px; }
.qty-btn:hover{ background: var(--copper); color: #fff; }
.qty-btn:active{ transform: scale(0.85); }
.qty-value{ width: 26px; text-align: center; font-weight: 700; font-size: 0.85rem; }

/* ---------------------------------------------------------------------
   11. SKELETON / SHIMMER
   --------------------------------------------------------------------- */
.shimmer{
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 55%, var(--ink-soft)) 50%, var(--panel) 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   12. FLOATING CART BUTTON
   --------------------------------------------------------------------- */

html[dir="rtl"] 

html[dir="rtl"] 

/* ---------------------------------------------------------------------
   13. CART DRAWER
   --------------------------------------------------------------------- */
.scrim{ position: fixed; inset: 0; z-index: 60; opacity: 0; pointer-events: none; background: var(--overlay-scrim); transition: opacity .4s ease, backdrop-filter .4s ease; display: flex; align-items: flex-end; justify-content: center; }
.scrim.hidden{ display: none !important; }
/* الحالة النشطة تضمن الظهور دائمًا — كان الاعتماد على display المكتوب inline
   في HTML فقط، وأي تعارض معه كان يترك المودال مخفيًا رغم تنفيذ الكود. */
.scrim.active{ opacity: 1; pointer-events: auto; backdrop-filter: blur(4px); display: flex !important; }
/* إصلاح مؤكَّد بالاختبار الفعلي على متصفح حقيقي: بعض المتصفحات/الإضافات
   كانت لا تُطبّق position:fixed على .scrim بشكل موثوق، فتظهر الشاشة خارج
   حدود العرض. نفرضها بقوة قاطعة — يشمل هذا كل شاشات الموقع ولوحة
   التحكم معًا (كان مقتصرًا على شاشة تفاصيل المنتج فقط سابقًا، فبقيت كل
   نوافذ الأدمن — إضافة فئة، طبق، عرض... إلخ — تعاني من نفس العطل). */
.scrim.active{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}
@media (min-width: 640px){
  .scrim.active{ align-items: center !important; }
  .product-modal-img-wrap{ height: 320px !important; }
}

.drawer{
  position: fixed; top: 0; inset-inline-start: 0; height: 100%; width: 100%; max-width: 430px; z-index: 70;
  background: var(--ink); display: flex; flex-direction: column; box-shadow: var(--shadow-deep);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.drawer.closed{ transform: translateX(-100%); }
html[dir="rtl"] .drawer.closed{ transform: translateX(100%); }

.drawer-header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--line); }
.drawer-body{ flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.drawer-footer{ border-top: 1px solid var(--line); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); background: var(--ink-soft); }

/* قسم اقتراحات "كمّل طلبك" (upsell) */
.upsell-section{ margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.upsell-title{ font-weight: 800; font-size: 0.92rem; color: var(--parchment); margin-bottom: var(--space-3); }
.upsell-row{ display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; }
.upsell-card{ flex: 0 0 auto; width: 104px; background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; position: relative; transition: transform .15s, border-color .15s; }
.upsell-card:hover{ transform: translateY(-2px); border-color: var(--copper); }
.upsell-card img{ width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.upsell-name{ font-size: 0.74rem; color: var(--parchment); text-align: center; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.upsell-price{ font-size: 0.78rem; font-weight: 700; color: var(--copper-light); }
.upsell-plus{ position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--copper); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; }

.cart-remove-btn{ color: var(--brass); transition: color .2s, transform .2s; }
.cart-remove-btn:hover{ color: var(--danger); transform: scale(1.1); }

.empty-state{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12) var(--space-4); gap: var(--space-3); height: 100%; }
.empty-pulse{ animation: empty-pulse 3.4s ease-in-out infinite; }

.summary-line{ display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--brass); }
.summary-total{ display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; color: var(--parchment); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.summary-total span:last-child{ color: var(--copper-light); }

.coupon-row{ display: flex; gap: var(--space-2); }
.coupon-row input{ flex: 1; }

/* ---------------------------------------------------------------------
   14. FORMS
   --------------------------------------------------------------------- */
.field{
  width: 100%; background: var(--ink-soft); border: 1px solid var(--line); color: var(--parchment);
  border-radius: var(--radius-md); padding: 13px 16px; font-size: 0.9rem;
  transition: border-color .25s, box-shadow .25s, background .3s;
}
.field::placeholder{ color: var(--brass); opacity: .9; }
.field:focus{ outline: none; border-color: color-mix(in srgb, var(--copper) 50%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--copper) 14%, transparent); }
.field.invalid{ border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent); }
.field-label{ display: block; font-size: 0.85rem; font-weight: 800; color: var(--parchment); margin-bottom: var(--space-2); }
.field-error{ font-size: 0.76rem; color: var(--danger); margin-top: 6px; }
.field-required{ color: var(--copper-light); }

.choice-pill{ cursor: pointer; }
.choice-pill input{ display: none; }
.choice-pill-box{
  border: 1px solid var(--line); background: var(--ink-soft); border-radius: var(--radius-md);
  padding: 13px; text-align: center; font-size: 0.85rem; font-weight: 700; transition: border-color .2s, background .2s, box-shadow .2s;
}
.choice-pill input:checked + .choice-pill-box{ border-color: var(--copper); background: color-mix(in srgb, var(--copper) 10%, var(--ink-soft)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 12%, transparent); }

.size-options, .extras-options{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.size-pill, .extra-pill{
  border: 1px solid var(--line); border-radius: var(--radius-full); padding: 9px 16px; font-size: 0.82rem; font-weight: 700;
  background: var(--ink-soft); color: var(--parchment-dim); display: inline-block;
}

/* ---------------------------------------------------------------------
   15. MODALS (checkout / product detail)
   --------------------------------------------------------------------- */
.modal-panel{
  width: 100%; overflow-y: hidden;
  /* الارتفاع بوحدة vh كان يتجاوز المساحة المرئية فعليًا على متصفحات
     الموبايل عند ظهور شريط العنوان، فيخرج رأس الشاشة (وزر الإغلاق)
     خارج حدود الشاشة — وهذا سبب "أحيانًا يظهر وأحيانًا يختفي".
     وحدة dvh تراعي شريط العنوان ديناميكيًا، مع vh كبديل للمتصفحات القديمة. */
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--ink);
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
/* رأس الشاشة يبقى مثبّتًا أعلى اللوحة دائمًا — زر الإغلاق (X) في متناول
   المستخدم مهما طال المحتوى أو تغيّر ارتفاع الشاشة. */
#productScrim .modal-header{
  position: sticky; top: 0; z-index: 5;
  background: var(--ink);
}
.modal-panel.modal-sheet{ border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
/* عند نشاط الخلفية، تُعرض لوحة المودال دائمًا في مكانها — ضمان قاطع
   لا يعتمد على أنماط inline قد تُمسح أو تتعارض. */
.scrim.active .modal-panel{ transform: translateY(0) !important; opacity: 1 !important; }
@media (min-width: 640px){
  .modal-panel{ max-width: 500px; border-radius: var(--radius-xl); }
}
.modal-inner{ padding: var(--space-6); }

/* نوافذ لوحة التحكم: المحتوى قد يكون أطول من ارتفاع الشاشة (نموذج العرض
   مثلًا فيه ٦ حقول + رفع صورة + زر حفظ). كانت اللوحة تُخفي ما يزيد عن
   حدودها بلا تمرير، فتُقتطع الحقول السفلية — أشهرها خانة "صورة العرض" —
   ويظنّ صاحب المطعم أنها غير موجودة. نجعل المحتوى قابلًا للتمرير. */
#adminModal{ display: flex; flex-direction: column; }
#adminModal .modal-inner{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 85vh;
  max-height: 85dvh;
}
/* زر الحفظ آخر عنصر في كل نموذج، وكان يقع خارج حدود النافذة في النماذج
   الطويلة فلا يجده صاحب المطعم ويظن أن الحفظ غير موجود. نثبّته أسفل
   النافذة ليبقى في متناوله دائمًا مهما طال النموذج. */
#adminModal .modal-inner .btn-primary[id$="SaveBtn"]{
  position: sticky; bottom: 0; z-index: 3;
  width: 100%; margin-top: var(--space-2);
  box-shadow: 0 -10px 20px -8px var(--ink);
}
.modal-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }

/* بطاقة معلومات المنتج بصفوف منظّمة (تفاصيل الطبق) */
.info-rows-card{ background: var(--ink-soft); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px; }
.info-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: 13px var(--space-5); border-bottom: 1px solid var(--line); }
.info-row-label{ font-size: 0.82rem; color: var(--brass); flex-shrink: 0; white-space: nowrap; padding-top: 2px; }
.info-row-value{ font-size: 0.88rem; color: var(--parchment-dim); text-align: end; line-height: 1.6; }

/* ---------------------------------------------------------------------
   16. SECTIONS — story / stats / reviews / contact
   --------------------------------------------------------------------- */
.story-grid{ display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px){ .story-grid{ grid-template-columns: 1fr 1fr; } }
.story-img{ border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-deep); }
.story-img img{ width: 100%; height: 100%; object-fit: cover; }

.stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (min-width: 768px){ .stats-grid{ grid-template-columns: repeat(4, 1fr); } }
.stat-card{ text-align: center; padding: var(--space-8) var(--space-4); border-radius: var(--radius-lg); background: var(--ink-soft); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s; }
.stat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.stat-number{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--copper-light); }
.stat-label{ font-size: 0.85rem; color: var(--brass); margin-top: 4px; }

.review-grid{ display: flex; gap: var(--space-5); overflow-x: auto; padding-block: var(--space-2); scroll-snap-type: x proximity; }
.review-card{ flex-shrink: 0; width: min(330px, 85vw); background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); scroll-snap-align: center; }
.review-stars{ color: var(--copper-light); font-size: 0.95rem; margin-bottom: var(--space-2); }
.review-text{ font-size: 0.9rem; color: var(--parchment-dim); line-height: 1.7; margin-bottom: var(--space-4); }
.review-author{ display: flex; align-items: center; gap: var(--space-3); }
.review-avatar{ width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(150deg, var(--copper-light), var(--copper)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.9rem; }
.review-name{ font-weight: 800; font-size: 0.88rem; color: var(--parchment); }
.review-item{ font-size: 0.74rem; color: var(--brass); }

.contact-grid{ display: grid; gap: var(--space-5); }
@media (min-width: 768px){ .contact-grid{ grid-template-columns: repeat(3, 1fr); } }
.contact-card{ background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; box-shadow: var(--shadow-card); transition: border-color .25s, transform .25s, box-shadow .25s; }
.contact-card:hover{ border-color: color-mix(in srgb, var(--copper) 30%, transparent); transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.contact-icon{ width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--copper) 12%, var(--ink-soft)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-inline: auto; margin-bottom: var(--space-3); }

.qr-card{ display: flex; align-items: center; gap: var(--space-5); background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); }
.qr-card img, .qr-card svg{ width: 100px; height: 100px; border-radius: var(--radius-sm); background: #fff; padding: 6px; }

/* ---------------------------------------------------------------------
   17. FOOTER
   --------------------------------------------------------------------- */
.site-footer{ border-top: 1px solid var(--line); background: var(--ink-soft); margin-top: var(--space-12); }
.footer-grid{ display: grid; gap: var(--space-8); padding-block: var(--space-16); }
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; } }
.footer-heading{ font-weight: 800; color: var(--parchment); margin-bottom: var(--space-3); }
.footer-list{ display: flex; flex-direction: column; gap: var(--space-2); color: var(--brass); font-size: 0.88rem; }
.social-row{ display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.social-btn{ width: 42px; height: 42px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s; }
.social-btn:hover{ background: var(--copper); color: #fff; transform: translateY(-2px); }

/* شعار اللوجو (صورة) بديل حرف O */
.logo-mark-img{ height: 44px; width: auto; object-fit: contain; display: block; }
.portal-logo-img{ height: 84px; width: auto; object-fit: contain; margin: 0 auto 18px; display: block; }
.login-logo-img{ height: 64px; width: auto; object-fit: contain; margin: 0 auto; display: block; }
@media (max-width: 639px){ .logo-mark-img{ height: 38px; } }

.contact-card-call{ border-color: color-mix(in srgb, var(--copper) 50%, transparent); }
.contact-icon-call{ background: linear-gradient(135deg, var(--copper), var(--copper-light)); color:#fff; }
.call-hint{ display:inline-block; margin-top:8px; font-size:0.72rem; font-weight:700; color:var(--copper-light); }

.promo-card-image{
  padding:0 !important; overflow:hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel);
}
/* الصورة تملأ ارتفاع البطاقة كاملًا وتظهر بالكامل بلا قص، فتتساوى كل
   البطاقات في الارتفاع سواء كانت صورة أو نصًا — وبلا اقتطاع أي كتابة
   على البانر مهما اختلف مقاس الصورة المرفوعة. */
.promo-card-image img{
  width:100%; height:100%; display:block; border-radius:inherit;
  object-fit: contain;
}

.promo-top{ padding-top: var(--space-6); padding-bottom: 0; }
@media (max-width: 639px){ .promo-top{ padding-top: var(--space-5); } }

/* ===== تحسينات كتالوج العرض (Product Catalog) ===== */
.product-card{ transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
@media (hover: hover) and (pointer: fine){
  .product-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.28); border-color: color-mix(in srgb, var(--copper) 45%, transparent); }
  .product-card:hover .product-img{ transform: scale(1.06); }
}
.product-unavailable{ color: var(--danger); font-weight: 700; font-size: 0.82rem; margin-top: 4px; }

/* ===== زرار احجز الآن ===== */
.contact-card-book{ background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; }
.book-now-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; background: linear-gradient(135deg, var(--copper), var(--copper-light)); color: #fff; font-weight: 800; font-size: 0.95rem; text-decoration: none; box-shadow: 0 8px 22px color-mix(in srgb, var(--copper) 40%, transparent); transition: transform .18s ease; }
.book-now-btn:hover{ transform: translateY(-2px); }
/* ملاحظة أعلى المنيو (يحدّدها صاحب المطعم — مثل شمول الأسعار للضريبة) */
.menu-notice{
  font-size: 0.82rem; color: var(--parchment-dim); text-align: center;
  background: var(--ink-soft); border: 1px solid var(--line);
  border-radius: var(--radius-full); padding: 9px 18px;
  margin: 0 auto var(--space-5); max-width: 560px;
}

/* زر العودة لأعلى — يظهر بعد التمرير لأسفل، في الجهة المقابلة لزر الحجز */
.back-to-top{
  position: fixed; inset-inline-end: 20px; z-index: 59;
  /* يراعي شريط الهوم في آيفونات بلا زر هوم — وإلا ركب فوق الشريط السفلي */
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--copper); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, background .2s;
}
.back-to-top.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover{ background: var(--copper-light); }
@media (min-width: 640px){ .back-to-top{ bottom: 28px; } }

.book-now-fab{ position: fixed; inset-inline-start: 20px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: linear-gradient(135deg, #25D366, #1ebe5b); color: #fff; font-weight: 800; font-size: 0.95rem; text-decoration: none; box-shadow: 0 10px 28px rgba(37,211,102,0.45); transition: transform .2s ease; }
.book-now-fab:hover{ transform: scale(1.05); }
@media (min-width: 640px){ .book-now-fab{ bottom: 28px; } }

.promo-card.promo-card-image{ background: var(--panel) !important; padding: 0 !important; }
.promo-card.promo-card-image::before{ display: none !important; content: none !important; }
.promo-card-image img{ width:100%; height:auto; display:block; border-radius:inherit; }

.product-calories{ color: var(--brass); font-size: 0.8rem; font-weight: 700; margin-top: 2px; }

.footer-bottom{ text-align: center; color: var(--brass); font-size: 0.78rem; padding-bottom: var(--space-6); }
/* رابط دخول فريق العمل — نقطة باهتة غير لافتة للعملاء، يكبر قليلاً عند المرور */
.staff-portal-link{ color: var(--brass); opacity: 0.45; padding: 0 6px; font-weight: 900; text-decoration: none; transition: opacity .2s, color .2s; }
.staff-portal-link:hover{ opacity: 1; color: var(--copper-light); }

/* ---------------------------------------------------------------------
   18. TOASTS
   --------------------------------------------------------------------- */
.toast-container{ position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-inline: var(--space-4); width: 100%; max-width: 380px; }
html[dir="rtl"] .toast-container{ transform: translateX(50%); }
@media (min-width: 640px){ .toast-container{ bottom: 32px; } }
.toast{ width: 100%; border-radius: var(--radius-md); padding: 13px 16px; display: flex; align-items: center; gap: var(--space-3); background: var(--ink-soft); border: 1px solid var(--line); box-shadow: var(--shadow-deep); }

/* ---------------------------------------------------------------------
   19. SUCCESS OVERLAY
   --------------------------------------------------------------------- */
.success-overlay{ position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: var(--overlay-scrim); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.success-check{ width: 100px; height: 100px; margin-inline: auto; margin-bottom: var(--space-5); border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--success) 60%, transparent); }

/* ---------------------------------------------------------------------
   20. INSTALL / PWA PROMPT
   --------------------------------------------------------------------- */

@media (min-width: 640px){  }

/* ---------------------------------------------------------------------
   21. CATEGORY CHIP TEXT (name + count)
   --------------------------------------------------------------------- */
.stamp-text{ display: flex; flex-direction: column; line-height: 1.1; gap: 1px; text-align: start; }
.stamp-name{ font-weight: 800; }
.stamp-count{ font-size: 0.7rem; font-weight: 600; color: var(--brass); }
.stamp-pill.active .stamp-count{ color: rgba(255,255,255,0.82); }

/* ---------------------------------------------------------------------
   22. MOBILE BOTTOM NAVIGATION
   --------------------------------------------------------------------- */
.bottom-nav{ display: none; }
.bottom-nav-item{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 2px; border-radius: var(--radius-md); color: var(--brass);
  font-size: 0.66rem; font-weight: 700; transition: color .2s, transform .15s;
}
.bottom-nav-item svg{ width: 23px; height: 23px; transition: stroke-width .2s; }
.bottom-nav-item:active{ transform: scale(0.9); }
.bottom-nav-item.active{ color: var(--copper); }
.bottom-nav-item.active svg{ stroke-width: 2.3; }
.bottom-cart-icon{ position: relative; display: inline-flex; }
.bottom-cart-icon .cart-count-badge{ top: -6px; inset-inline-start: -9px; width: 18px; height: 18px; font-size: 10px; animation: none; }

.bottom-nav-hint{
  position: fixed; bottom: 84px; inset-inline: var(--space-5); z-index: 80;
  background: var(--parchment); color: var(--ink); text-align: center;
  padding: 11px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 800;
  box-shadow: var(--shadow-deep); opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: 420px; margin-inline: auto;
}
.bottom-nav-hint.show{ opacity: 1; transform: translateY(0); }

@media (max-width: 768px){
  .bottom-nav{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 44;
    display: flex; justify-content: space-around; align-items: stretch;
    background: color-mix(in srgb, var(--ink-soft) 90%, transparent);
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px -16px rgba(24,24,27,0.20);
  }
  
  body{ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}
.promo-dot{ width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer; border: none;
  background: color-mix(in srgb, var(--brass) 45%, transparent); transition: width .3s, background .3s; }
.promo-dot.active{ width: 24px; border-radius: var(--radius-full); background: var(--copper); }

/* ---------------------------------------------------------------------
   25. PRODUCT IMAGE LIGHTBOX (تكبير صورة المنتج داخل شاشة التفاصيل)
   --------------------------------------------------------------------- */
.img-lightbox{
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: var(--space-5); background: rgba(8,8,10,0.95); opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.img-lightbox.open{ opacity: 1; pointer-events: auto; }
.img-lightbox img{
  max-width: 100%; max-height: 100%; border-radius: var(--radius-lg); object-fit: contain;
  box-shadow: var(--shadow-deep);
}
.img-lightbox-close{
  position: absolute; top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); inset-inline-end: var(--space-4);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; cursor: pointer;
}
.img-lightbox-close:hover{ background: rgba(255,255,255,0.24); }

/* ---------------------------------------------------------------------
   26. PAYMENT METHOD SELECTOR (checkout)
   --------------------------------------------------------------------- */
.pay-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.pay-grid .choice-pill-box{ padding: 12px 10px; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------------------------------------------------------------------
   27. ORDERS-PAUSED NOTICE BANNER
   --------------------------------------------------------------------- */
.orders-paused-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #B91C1C; color: #fff; text-align: center; font-weight: 800;
  font-size: 0.9rem; padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 22px -8px rgba(0,0,0,0.45);
}
@media (max-width: 768px){ .orders-paused-banner{ bottom: 64px; } }

/* ---------------------------------------------------------------------
   28. TOGGLE SWITCH (admin — pause orders)
   --------------------------------------------------------------------- */
.switch{ position: relative; display: inline-block; width: 54px; height: 30px; flex-shrink: 0; }
.switch input{ opacity: 0; width: 0; height: 0; }
.switch-slider{ position: absolute; cursor: pointer; inset: 0; background: #3a3a3a; border-radius: 30px; transition: background .3s; }
.switch-slider::before{ content: ""; position: absolute; height: 22px; width: 22px; left: 4px; bottom: 4px; background: #fff; border-radius: 50%; transition: transform .3s; }
.switch input:checked + .switch-slider{ background: #B91C1C; }
.switch input:checked + .switch-slider::before{ transform: translateX(24px); }

/* ---------------------------------------------------------------------
   29. NUTRITION & ALLERGENS (product modal)
   --------------------------------------------------------------------- */
.modal-nutrition{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.modal-nutrition.hidden{ display: none; }

.cal-pill{
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 7px 14px;
  background: var(--parchment-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  color: var(--ink);
}
.cal-pill.hidden{ display: none; }

.allergens-block{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.allergens-block.hidden{ display: none; }
.allergens-label{
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 4px;
}
.allergen-chip{
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
  border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 600;
}

/* ---------------------------------------------------------------------
   30. ORDER STATUS BADGES + compact button (admin orders)
   --------------------------------------------------------------------- */
.order-status-badge{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.status-pending          { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.status-confirmed        { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.status-preparing        { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.status-ready            { background: #CCFBF1; color: #0F766E; border-color: #5EEAD4; }
.status-served           { background: #FEF9C3; color: #854D0E; border-color: #FDE047; }
.status-out_for_delivery { background: #EDE9FE; color: #5B21B6; border-color: #C4B5FD; }
.status-delivered        { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.status-completed        { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
.status-cancelled        { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

.btn-xs{ padding: 3px 10px; font-size: 0.76rem; border-radius: 8px; }

/* ---------------------------------------------------------------------
   31. PERMISSIONS GRID (admin roles editor)
   --------------------------------------------------------------------- */
.perm-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.perm-check{
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; cursor: pointer;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
}
.perm-check input{ accent-color: var(--copper); }

/* ---------------------------------------------------------------------
   32. FEATURE FLAGS (hide features the owner switched off)
   --------------------------------------------------------------------- */
body.ff-no-coupons  .coupon-row,
body.ff-no-offers   #promoStrip,
body.ff-no-reviews  #reviewsSection,
body.ff-no-darkmode #themeToggle,
body.ff-no-delivery .ot-delivery { display: none !important; }

/* admin feature rows */
.feature-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px;
}