/* ═══════════════════════════════════════════════════════════════
   skin-live.css — هوية «نيرو مكس» المرئية   (2026-10-09)
   ───────────────────────────────────────────────────────────────
   طبقة واحدة فوق style.css: تُحمَّل بعده فتعيد تعريف الرموز
   (الألوان والخطوط والانحناءات) وتضيف الجرافيكس. لا تمسّ بنية
   الصفحات ولا جافاسكربت. إزالتها = حذف سطر <link> واحد.

   المرجع: ملف «عزومة نيرو مكس» الذي اختاره الحاج أيمن — رموزه
   منقولة هنا حرفياً ليتطابق المظهر:
     --bg #FFF9F1 · --card #FFF · --ink #3B2414 · --muted #866A54
     --line #F0E1CC · --brand #E0702F · --brand2 #F2B544 · --soft #FDEBD6
     عناوين Reem Kufi · أزرار 14px · بطاقات 20–22px
   ═══════════════════════════════════════════════════════════════ */
@import url('fonts.css');  /* 2026-10-09: الخطوط صارت داخل الموقع — راجع css/fonts.css */

:root{
  /* ── رموز التطبيق، مُعاد توجيهها إلى لوحة «عزومة» ── */
  --bg:#FFF9F1;
  --bg-2:#FDEBD6;
  --ink:#3B2414;
  --ink-2:#FFFFFF;
  --ink-3:#FFF9F1;
  --panel:#FFFFFF;
  --gold:#F2B544;
  --gold-bright:#B4491A;   /* 2026-11-02: كان #E0702F (تباين 3.1) — هو لون نصوص البرتقالي بصفحة الزبون؛ الأزرار والزينة على --brand */
  --cream:#3B2414;          /* لون النص (الاسم تاريخي في style.css) */
  --cream-dim:#866A54;
  --line:#F0E1CC;

  /* ── رموز «عزومة» بأسمائها الأصلية ── */
  --brand:#E0702F;
  --brand2:#F2B544;
  --soft:#FDEBD6;
  --grid:rgba(224,112,47,.09);
  --kufi:"Rakkas","El Messiri",serif;

  /* النص الأبيض على --brand يعطي تبايناً 3.2 فقط، وهو دون معيار
     القراءة (4.5). نُبقي --brand للزينة والمساحات، ونستعمل هذه
     الدرجة الأعمق خلف نصوص الأزرار فقط — الفرق بالعين لا يكاد
     يُرى، والفرق في الشمس كبير. */
  --brand-deep:#C1511C;

  --r-btn:14px;
  --r-card:20px;
  --shadow-card:0 30px 60px -36px rgba(90,45,10,.45);
  --shadow-btn:inset 0 -3px 0 rgba(0,0,0,.12), 0 10px 24px -10px var(--brand);
}

/* الوضع الليلي جاهز لكنه **لا يعمل تلقائياً**: style.css فيه ألوان
   مكتوبة مباشرة (ليست رموزاً) فتنكسر الشاشات لو تبعنا إعداد الجهاز.
   يُفعَّل بإضافة data-theme="dark" على <html> بعد مراجعة كل شاشة. */
/* ───────── زرّ الوضع الليلي (2026-10-10) ─────────
   يُحقن في .topbar من js/theme.js. مقاسه 40×40 لأنه أصغر هدف لمس
   مقبول، وmargin-inline-start:auto يدفعه لطرف الشريط في الاتجاهين
   دون افتراض rtl. */
.nm-theme-btn{
  margin-inline-start:auto; flex:0 0 auto;
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1; cursor:pointer;
  background:transparent; color:inherit;
  border:1px solid currentColor; opacity:0.72;
  transition:opacity .18s ease, transform .18s ease;
}
.nm-theme-btn:hover{ opacity:1; }
.nm-theme-btn:active{ transform:scale(0.92); }
.nm-theme-btn:focus-visible{ outline:2px solid var(--brand2); outline-offset:2px; opacity:1; }
@media (prefers-reduced-motion: reduce){ .nm-theme-btn{ transition:none; } }

/* الترويسة تحتاج flex كي يعمل الدفع للطرف — بعضها ليس كذلك أصلاً. */
.topbar, .help-header{ display:flex; align-items:center; gap:0.6rem; }

html[data-theme="dark"]{
  --bg:#22150B; --bg-2:#3A2614; --panel:#2D1D10; --ink-2:#2D1D10;
  --ink:#F8ECDC; --cream:#F8ECDC; --cream-dim:#CDB295;
  --line:#43301E; --brand:#F3843F; --brand2:#F5C460; --soft:#3A2614;
  --grid:rgba(243,132,63,.10); --brand-deep:#F3843F;
  color-scheme:dark;
}

/* ═══ الخطوط ═══ */
.brand-font,
.topbar .logo,
.brand-hero-title,
.cat-ar,
.sheet-head h2,
.order-number,
.nm-big{
  font-family:var(--kufi) !important;
  font-weight:400 !important;
  letter-spacing:0;
}

/* ═══ الشريط العلوي: زجاجي ضبابي ═══
   بلوك «هوية اللافتة v58» في style.css يفرض الأسود+الذهبي، وبعضه
   بـ !important، فنعيد توجيهه هنا. */
.topbar{
  background:color-mix(in srgb, var(--bg) 82%, transparent) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line) !important;
}
.topbar .logo{ color:var(--brand) !important; font-size:1.9rem; }
.topbar .logo small{ color:var(--cream-dim) !important; }
.topbar > div:last-child{ color:var(--brand) !important; }

/* ═══ شريط الإعلان العلوي (ribbon) ═══ */
.nm-ribbon{
  background:var(--soft); color:var(--cream-dim);
  font-size:0.8rem; font-weight:600; text-align:center;
  padding:0.4rem 1rem; border-bottom:1px solid var(--line);
}

/* ═══ المقدمة: شبكة + بقعة ضوء بدل صورة اللافتة ═══
   الاسم كان مكرراً أربع مرات في أول شاشة: الشريط العلوي، واللافتة
   داخل الصورة، والعنوان الكبير، وبداية السطر الصغير. الآن شبكة
   خفيفة + هالة ذهبية + عنوان واحد، والصور تبدأ فوراً في المنيو. */
.brand-hero{
  position:relative; overflow:hidden;
  min-height:0; display:block; color:var(--cream);
  background:var(--bg) !important;
  border-bottom:1px solid var(--line) !important;
  padding:1.5rem 1.1rem 1.7rem;
}
.brand-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.brand-hero::after{
  content:""; position:absolute; width:560px; height:560px;
  top:-320px; inset-inline-end:-120px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand2) 35%, transparent), transparent 65%);
}
.brand-hero-text{ position:relative; z-index:2; }
.brand-hero-title{
  color:var(--ink) !important; text-shadow:none !important;
  font-size:clamp(2.1rem, 9vw, 3.2rem); line-height:1.12; margin:0.6rem 0 0;
}
.brand-hero-sub{
  color:var(--cream-dim) !important; opacity:1 !important;
  font-size:0.95rem; margin:0.55rem 0 0; max-width:40ch;
}

/* شارة نابضة */
.nm-badge{
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid var(--line); background:var(--panel);
  border-radius:999px; padding:0.25rem 0.8rem 0.3rem;
  font-weight:700; font-size:0.8rem; color:var(--cream);
  box-shadow:0 1px 0 var(--line);
}
.nm-badge i{
  width:8px; height:8px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
  animation:nm-ping 1.6s infinite;
}
@keyframes nm-ping{ 50%{ box-shadow:0 0 0 8px transparent; } }

/* نص بتدرّج متحرّك */
.nm-grad{
  background:linear-gradient(90deg, var(--brand), var(--brand2), var(--brand));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:nm-gm 4s linear infinite;
}
@keyframes nm-gm{ to{ background-position:200% center; } }

/* صف الثقة */
.nm-trust{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.9rem;
  color:var(--cream-dim); font-size:0.78rem; font-weight:600;
}
.nm-trust span::before{ content:"✓ "; color:var(--brand); font-weight:900; }

/* ═══ رؤوس الأقسام ═══ */
.cat-ar{ color:var(--ink); font-size:1.7rem; }
.cat-en{ color:var(--brand-deep); font-weight:700; letter-spacing:0.03em; }
.cat-rule{ background:linear-gradient(90deg, var(--line), transparent 85%); height:1px; }

/* ═══ تبويبات الأقسام ═══ */
.cat-tab{ border-radius:999px; font-weight:700; }
.cat-tab.active{
  background:var(--brand-deep) !important; border-color:var(--brand-deep) !important;
  color:#FFF7EC !important; box-shadow:0 8px 20px -10px var(--brand);
}

/* ═══ بطاقات الأصناف ═══ */
.items-grid .item{
  border-radius:var(--r-card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  background:var(--panel);
}
.items-grid .item-media{ background:var(--soft); }
.items-grid .item-name .ar{ color:var(--ink); }
.items-grid .add-btn{
  background:var(--brand-deep);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), 0 8px 18px -8px var(--brand);
}
.items-grid .add-btn::before{ color:#FFF7EC; }

/* شارات الأصناف — كبسولة ناعمة بدل الأحمر الذي يتنافر مع الجمرة */
.items-grid .badge, .item-media .badge{
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  color:#FFF5E8; border-radius:999px; font-weight:700;
  padding:0.2rem 0.6rem; border:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ═══ الأزرار: 14px بظلّ داخلي + هالة ملوّنة ═══ */
.primary-btn, .secondary-btn{ border-radius:var(--r-btn) !important; }
.primary-btn{
  background:var(--brand-deep) !important; color:#FFF7EC;
  box-shadow:var(--shadow-btn);
  padding:0.85rem; font-size:1rem; font-weight:800;
}
.secondary-btn{ color:var(--brand-deep); border-color:var(--line); background:var(--panel); }
.items-grid .add-btn{ border-radius:50% !important; }

/* ═══ شريط السلة ═══ */
.cart-bar-inner{
  background:linear-gradient(135deg, var(--brand-deep), #A8431A) !important;
  border:none !important; border-radius:18px;
  box-shadow:0 16px 34px -14px rgba(193,81,28,.7);
}
.cart-bar-inner,
.cart-bar-inner .total,
.cart-bar-inner .label{ color:#FFF7EC !important; }
.cart-bar-inner .count{ background:rgba(255,255,255,0.22); color:#fff; }

/* ═══ الأوراق المنسدلة ═══ */
.sheet{ border-radius:24px 24px 0 0; }
.sheet-head{ border-radius:24px 24px 0 0; }
.sheet-head h2{ color:var(--brand-deep); font-size:1.35rem; }

/* ═══ بانر التواصل ═══ */
.contact-banner{ background:var(--ink) !important; }
.contact-banner .contact-banner-link{ color:#F8ECDC !important; }
.contact-social-link{ background:rgba(242,181,68,0.18) !important; color:#F5C460 !important; }

/* ═══ إخفاء بصري مع بقاء النص لجوجل ولقارئات الشاشة ═══ */
.nm-sronly{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

a{ color:var(--brand-deep); }

@media (prefers-reduced-motion: reduce){
  .nm-badge i, .nm-grad{ animation:none !important; }
}

/* ═══ الخطوط المختارة (الحاج أيمن، 2026-10-09) ═══
   العناوين Rakkas والنص Noto Kufi Arabic — اختارهما من مختبر
   الخطوط. style.css يفرض Cairo على <body> وكثير من العناصر تقول
   font-family:inherit، فيكفي تغيير الجذر؛ والحقول والأزرار تُذكر
   صراحةً لأن المتصفّح لا يورّث الخط إليها.
   Rakkas وزنه الوحيد 400 (وهو ثقيل أصلاً)، فأي وزن أعلى يجعل
   المتصفّح يُسمّكه صناعياً فيتلطّخ — لذلك ثُبّت على 400 أعلاه. */
body,
input, select, textarea, button{
  font-family:"Noto Kufi Arabic","Cairo",Tahoma,sans-serif;
}

/* ═══ اللوقو في المقدمة (الحاج أيمن، 2026-10-09) ═══
   فوق الشارة والعنوان. ارتفاع ثابت والعرض تلقائي حفاظاً على نسبته.
   في الوضع الليلي تُستبدَل بالنسخة البيضاء. */
.nm-hero-logo{
  height:56px; width:auto; display:block;
  margin:0 0 0.8rem; max-width:70%;
}
/* ═══════════════════════════════════════════════════════════
   المقدمة: نص حيّ فوق أصناف مفرّغة
   (الحاج أيمن، 2026-10-09: «النص حي فوق خلفية الصور · الصور دمج
   أو شكل متداخل · فرّغ الأصناف» ثم «الأسود قوي جداً وغير متناسق
   مع المنيو»)
   ───────────────────────────────────────────────────────────
   images/hero-mix.jpg = خمسة أصناف حقيقية فُرّغت من خلفياتها
   (شرقي · فحم · شاورما · غربي · بار حلو) رُكّبت متداخلة فوق
   هالة **كريمية** بنفس لون المنيو تحتها، فلا ينقطع البصر بين
   المقدمة وبقية الصفحة. كانت داكنة فظهر التنافر.

   النص يبقى HTML حيّاً — لا مطبوعاً في الصورة: يقرأه جوجل،
   ويكبر مع إعدادات الجوال، ويتغيّر بكلمة بلا تصدير جديد.
   ═══════════════════════════════════════════════════════════ */
.brand-hero{
  background:
    linear-gradient(to bottom,
      rgba(255,249,241,0.88) 0%,
      rgba(255,249,241,0.50) 40%,
      rgba(255,249,241,0.08) 72%,
      rgba(255,249,241,0.00) 100%),
    url("../images/hero-mix.jpg") center / cover no-repeat,
    var(--bg) !important;
  border-bottom:1px solid var(--line) !important;
  padding:1.4rem 1.1rem 1.5rem;
  min-height:250px;
  display:flex; align-items:flex-start;
}
/* الشبكة النقطية والهالة كانتا للخلفية الفارغة — الصورة تغني عنهما */
.brand-hero::before, .brand-hero::after{ display:none !important; }

.brand-hero .brand-hero-text{ width:100%; }
.nm-hero-logo{ height:50px; margin-bottom:0.65rem; }
/* ظلّ أبيض خفيف لا أسود: يفصل النص عن الصورة إن مرّ فوق صنف،
   بلا أن يُدخل لوناً غريباً على الهوية الكريمية. */
.brand-hero-title{
  color:var(--ink) !important;
  text-shadow:0 1px 10px rgba(255,249,241,0.85) !important;
}
.brand-hero-sub{
  color:var(--cream-dim) !important;
  text-shadow:0 1px 8px rgba(255,249,241,0.9);
}
.nm-trust{ color:var(--cream-dim); text-shadow:0 1px 8px rgba(255,249,241,0.9); }

@media (min-width:720px){
  /* على العريض: الأصناف تأخذ مساحتها، والنص يجلس في الركن العلوي
     الأيمن حيث الهالة والفراغ — لا فوق الأكل. */
  .brand-hero{
    min-height:340px; padding:2.2rem 2.4rem;
    background:
      linear-gradient(to left,
        rgba(255,249,241,0.92) 0%,
        rgba(255,249,241,0.62) 36%,
        rgba(255,249,241,0.15) 66%,
        rgba(255,249,241,0.00) 100%),
      url("../images/hero-mix.jpg") center / cover no-repeat,
      var(--bg) !important;
  }
  .brand-hero .brand-hero-text{ max-width:30rem; margin-inline-start:auto; }
}

/* ═══ 🔧 وضوح النص فوق الصورة (الحاج أيمن: «الخط مش باين») ═══
   السبب: كتلة النص أطول من المنطقة الكريمية الفارغة أعلى الصورة،
   فينزل آخرها فوق الأصناف. ثلاث معالجات مجتمعة:
   ١) الحجاب يبقى شبه معتم حتى 62% من الارتفاع ثم ينفتح فجأة،
      فالنص كلّه على كريمي نظيف والأصناف تظهر كاملة تحته.
   ٢) العنوان أكبر وبهالة بيضاء مزدوجة: واحدة ملتصقة تفصل الحرف،
      وواحدة واسعة تُبعد ضجيج الصورة.
   ٣) السطور الصغيرة أغمق — كانت 4.6 وصارت 7+ على معيار القراءة. */
.brand-hero{
  background:
    linear-gradient(to bottom,
      rgba(255,249,241,0.97) 0%,
      rgba(255,249,241,0.93) 38%,
      rgba(255,249,241,0.70) 58%,
      rgba(255,249,241,0.20) 78%,
      rgba(255,249,241,0.00) 100%),
    url("../images/hero-mix.jpg") center / cover no-repeat,
    var(--bg) !important;
}
.brand-hero-title{
  font-size:clamp(2.35rem, 10vw, 3.6rem) !important;
  color:var(--ink) !important;
  text-shadow:
    0 1px 0 rgba(255,249,241,1),
    0 0 16px rgba(255,249,241,0.95) !important;
}
.brand-hero-sub{
  color:#5A4433 !important; font-weight:600;
  text-shadow:0 1px 0 rgba(255,249,241,1), 0 0 12px rgba(255,249,241,0.95);
}
.nm-trust{
  color:#5A4433; font-weight:700;
  text-shadow:0 1px 0 rgba(255,249,241,1), 0 0 12px rgba(255,249,241,0.95);
}
.nm-badge{ box-shadow:0 2px 10px rgba(90,45,10,0.10); }

/* ═══════════════════════════════════════════════════════════
   اللوحة التفاعلية (js/showcase.js)
   «اعمل لوحة تفاعلية متحركة بصور مأكولات» — الحاج أيمن 2026-10-09
   ───────────────────────────────────────────────────────────
   ستّ صور تتبدّل وحدها، وكل واحدة باب لقسمها في المنيو.
   النص بقي فوق على الكريمي، والصور هنا في لوحتها — ففصل
   المقروء عن المرئي، ولا يضيع أحدهما في الآخر.
   ═══════════════════════════════════════════════════════════ */
.nm-show{ padding:0 1.1rem 0.2rem; margin-top:-0.4rem; }
.nm-show-stage{
  position:relative; width:100%; aspect-ratio:3/2;
  border-radius:var(--r-card); overflow:hidden;
  background:var(--soft); border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
@media (min-width:720px){ .nm-show-stage{ aspect-ratio:21/9; } }

/* الشريحة زرّ حقيقي: نُلغي مظهر الزرّ لا وظيفته */
.nm-slide{
  position:absolute; inset:0; margin:0; padding:0; border:0;
  background:none; cursor:pointer; text-align:start;
  opacity:0; visibility:hidden; transition:opacity .7s ease;
}
.nm-slide.is-on{ opacity:1; visibility:visible; }
.nm-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
/* تكبير بطيء جداً أثناء العرض (Ken Burns) — يعطي إحساس الحياة
   بلا حركة تشتّت. يعمل فقط على الشريحة الظاهرة. */
.nm-slide.is-on img{ animation:nm-kb 9s ease-out both; }
@keyframes nm-kb{ from{ transform:scale(1); } to{ transform:scale(1.07); } }

.nm-slide-tag{
  position:absolute; inset-inline:0; bottom:0;
  display:flex; flex-direction:column; gap:0.1rem;
  padding:2.2rem 1rem 0.8rem;
  background:linear-gradient(transparent, rgba(40,22,10,0.82));
  color:#FFF5E8; text-align:start;
}
.nm-slide-tag b{ font-family:var(--kufi); font-weight:400; font-size:1.45rem; line-height:1.2; }
.nm-slide-tag i{ font-style:normal; font-size:0.8rem; opacity:0.92; }

/* شريط التقدّم: يقول للزبون متى تتبدّل الصورة، فلا يظنّ الصفحة
   تقفز من تلقائها. */
.nm-show-bar{
  position:absolute; inset-inline:0; top:0; height:3px;
  background:rgba(255,249,241,0.28); overflow:hidden;
}
.nm-show-bar i{
  display:block; height:100%; width:100%;
  background:var(--brand2); transform-origin:right center;
  animation:nm-prog 4s linear infinite;
}
@keyframes nm-prog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* شرائط المجالات */
.nm-show-chips{ overflow:hidden; padding:0.6rem 0 0.2rem; }
.nm-chips-track{
  display:flex; gap:0.4rem; width:max-content;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.nm-chip{
  flex:0 0 auto; border:1px solid var(--line); background:var(--panel);
  color:var(--cream-dim); border-radius:999px; padding:0.34rem 0.8rem 0.4rem;
  /* 🐛 2026-10-09: كانت font:700 0.78rem var(--body, inherit) — و--body
     غير معرَّف في هذا الملف (هو في banquet.css)، والبديل inherit غير
     صالح داخل اختصار font، فيُلغى **السطر كله** بصمت ويعود الحجم
     إلى 16px. قِستُه فظهر 16 بدل 12.5. خصائص منفصلة لا اختصار. */
  font-weight:700; font-size:0.78rem; font-family:inherit; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.nm-chip.is-on{
  background:var(--brand-deep); border-color:var(--brand-deep); color:#FFF7EC;
  box-shadow:0 6px 16px -8px var(--brand);
}

@media (prefers-reduced-motion: reduce){
  .nm-slide.is-on img{ animation:none; }
  .nm-show-bar i{ animation:none; transform:scaleX(1); }
  .nm-slide{ transition:none; }
}

/* ═══ المقدمة رجعت نظيفة (2026-10-09) ═══
   بعد أن صارت للصور لوحتها الخاصة تحتها، لم يعد هناك سبب لوضع
   صورة خلف النص: كانت تُضعف قراءته («الخط مش باين») وتُكرّر ما
   تقوله اللوحة. المقدمة الآن كريمية بشبكة خفيفة وهالة ذهبية —
   النص يُقرأ بلا أي حيلة، والصور تتكلّم في مكانها. */
.brand-hero{
  background:var(--bg) !important;
  border-bottom:none !important;
  padding:1.3rem 1.1rem 0.9rem;
  min-height:0;
  display:block;
}
.brand-hero::before, .brand-hero::after{ display:block !important; }
.brand-hero-title{ text-shadow:none !important; }
.brand-hero-sub, .nm-trust{ text-shadow:none; }
@media (min-width:720px){
  .brand-hero{ background:var(--bg) !important; min-height:0; padding:1.8rem 2.4rem 1.1rem; }
  .brand-hero .brand-hero-text{ max-width:none; margin-inline-start:0; }
}

/* ═══ 🐛 سبب «الخط مش باين» — وجدته أخيراً ═══
   style.css:2543 يرسم .brand-hero-title بتدرّج **أبيض** مع
   -webkit-text-fill-color:transparent (تأثير ShinyText القديم).
   كان يلمع فوق المقدمة الداكنة؛ وبعدما صارت كريمية صار أبيض على
   كريمي = غير مرئي تقريباً. و-webkit-text-fill-color يتقدّم على
   color، فأي لون أضعه يُتجاهَل. نُلغيه هنا ويبقى اللمعان في
   .nm-grad على الكلمات المميّزة وحدها. */
.brand-hero-title{
  background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  animation:none !important;
  color:var(--ink) !important;
}
.brand-hero-title .nm-grad{ -webkit-text-fill-color:transparent !important; }

/* ═══ اختصار المقدمة (الحاج أيمن: «اختصرها») ═══
   كانت تأخذ 437px قبل أن يرى الزبون أول صنف. كل سطر هنا يقلّصها
   بلا حذف معلومة: لوقو أصغر، عنوان أصغر، مسافات أضيق، وصف الثقة
   في سطر واحد مضغوط. */
.brand-hero{ padding:0.9rem 1.1rem 0.6rem; }
.nm-hero-logo{ height:38px; margin-bottom:0.45rem; }
.nm-badge{ font-size:0.72rem; padding:0.18rem 0.65rem 0.22rem; }
.brand-hero-title{
  font-size:clamp(1.75rem, 7vw, 2.5rem) !important;
  margin:0.35rem 0 0 !important; line-height:1.14;
}
.brand-hero-sub{ font-size:0.84rem; margin:0.3rem 0 0; }
.nm-trust{ margin-top:0.45rem; gap:0.7rem; font-size:0.72rem; }
@media (min-width:720px){
  .brand-hero{ padding:1.2rem 2.4rem 0.7rem; }
  .nm-hero-logo{ height:46px; }
}

/* ═══ الشريط يتحرك (الحاج أيمن: «خلي الشريط اللي تحت الصورة يتحرك») ═══
   يتمركز على المجال الحالي مع كل تبديل بحركة ناعمة، فيبدو حيّاً
   ويبقى قابلاً للضغط — بخلاف الشريط الدوّار بلا توقّف الذي يهرب
   من تحت الإصبع. والشريحة النشِطة تكبر قليلاً فيعرف الزبون أين هو. */
.nm-chips-track{ will-change:transform; }
.nm-chip{ transform:scale(1); transition:background .25s ease, color .25s ease,
          border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.nm-chip.is-on{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .nm-chips-track{ transition:none; }
  .nm-chip{ transition:none; transform:none; }
  .nm-chip.is-on{ transform:none; }
}

/* ═══ شريحة حيّة في اللوحة (2026-10-10) ═══
   الغلاف (poster) هو **أول إطار من المقطع نفسه**، فعنصر الفيديو يعرضه
   قبل التشغيل ويواصل منه عند البدء — الانتقال غير مرئي أصلاً.
   ولهذا لا حاجة لإخفاء/إظهار ولا لتدرّج شفافية: حذفتها بعد أن
   أثبت القياس أنها طبقة متحرّكة بلا فائدة، وكل حركة زائدة شيء
   يمكن أن ينكسر. الصورة تحته تبقى شبكة أمان لو تعذّر الفيديو. */
.nm-slide-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
/* التكبير البطيء للصور الثابتة فقط — الفيديو يتحرّك بنفسه،
   وجمعهما يعطي دوخة. */
.nm-slide.has-video.is-on img{ animation:none; }
/* مع تقليل الحركة: نُخفي الفيديو فتظهر الصورة الثابتة تحته. */
@media (prefers-reduced-motion: reduce){
  .nm-slide-vid{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   إصلاحات الوضع الليلي (2026-10-10)
   ───────────────────────────────────────────────────────────
   بعد تفعيل الوضع الليلي قِسنا تباين كل عنصر نصّي على الصفحة
   الحيّة، فظهرت ثلاث مشاكل حقيقية (وإنذاران كاذبان من القياس
   نفسه: نصّ أبيض فوق طبقة شفّافة بيضاء فوق تدرّج برتقالي —
   الحساب لا يمزج الشفافية، والعين تراه سليماً).
   ═══════════════════════════════════════════════════════════ */

/* ١) شريط التواصل كان يختفي تماماً.
   .contact-banner{ background:var(--ink) } — و--ink رمز نصّ لا
   خلفية: ينقلب في الليلي إلى #F8ECDC فيصير الشريط كريمياً ونصّه
   كريمياً، نسبة 1.00. الخلفية الصحيحة هي رمز اللوح. */
html[data-theme="dark"] .contact-banner{ background:var(--panel) !important; }

/* ٢) النصّ الداكن على البرتقالي الفاتح.
   في النهاري كان --brand-deep #C1511C يحمل الأبيض بنسبة 4.7.
   وفي الليلي صار --brand-deep مساوياً لـ--brand (#F3843F)، فنصّ
   أبيض عليه = 2.4 فقط. الحلّ أن ينقلب النصّ لا الخلفية: داكن
   على البرتقالي الفاتح يعطي 6.5 — وهو نمط الوضع الليلي المعتاد
   أصلاً (نصّ داكن على لون حيوي). */
html[data-theme="dark"] .cat-tab.active,
html[data-theme="dark"] .add-btn,
html[data-theme="dark"] .primary-btn{ color:var(--bg); }

/* ٣) نصّ المقدمة كان بنّياً داكناً (#5A4433) مع هالة بيضاء — وهي
   قيم مكتوبة صراحةً لتُقرأ فوق صورة المدخل الفاتحة. على خلفية
   ليلية تختفي تماماً. نعيدها لرمز النصّ الباهت، ونقلب الهالة من
   بيضاء إلى سوداء كي تفصل النصّ عن الصورة لا عن خلفية غابت. */
html[data-theme="dark"] .brand-hero-sub,
html[data-theme="dark"] .nm-trust{
  color:var(--cream-dim) !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.75) !important;
}

/* ٤) الأبناء داخل الزرّ النشط يحملون لونهم الخاص فلا يرثون إصلاح
   (٢) أعلاه — «الأكثر طلباً» مثلاً span داخل .cat-tab.active. */
html[data-theme="dark"] .cat-tab.active span{ color:var(--bg); }

/* شريحة اللوحة النشطة: نفس علّة (٢) — .nm-chip.is-on خلفيتها
   --brand-deep ونصّها #FFF7EC. في النهاري 4.43 لأن --brand-deep
   داكن، وفي الليلي 2.42 لأنه يساوي --brand الفاتح. */
html[data-theme="dark"] .nm-chip.is-on{ color:var(--bg); }

/* ٥) شارات الأصناف — نفس علّة شريط التواصل تماماً: خلفيتها
   color-mix(... var(--ink) 86% ...) و--ink رمز نصّ. في النهاري
   يعطي بنّياً داكناً فوق صورة الطبق ونصّه كريمي، وفي الليلي ينقلب
   كريمياً فيصير النصّ الكريمي عليه بنسبة 1.08 — أي يختفي.

   والشارة طبقة تعتيم فوق صورة في الوضعين، فخلفيتها يجب أن تبقى
   داكنة دائماً لا أن تتبع رمزاً ينقلب. */
html[data-theme="dark"] .items-grid .badge,
html[data-theme="dark"] .item-media .badge{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
}

/* ───────── وإصلاح لا علاقة له بالوضع الليلي ─────────
   ظهر أثناء القياس: أزرار الاختيار النشطة (صالة/توصيل، طريقة
   الدفع) نصّها أبيض على الذهبي #F2B544 بنسبة **1.83 في الوضعين**
   — أي أنها كانت كذلك في النهاري منذ البداية، وليست من الوضع
   الليلي في شيء.

   و--gold لا ينقلب بين الوضعين، فالنصّ الداكن يصلح للاثنين:
   #3B2414 على #F2B544 يعطي 7.8 بدل 1.83. */
.mode-toggle button.active,
.pay-method-tab.active,
.step-progress .sp-item.current b{ color:#3B2414; }

/* ───────── رمز ₪ (2026-10-10، طلب الحاج أيمن بعد مراجعة القياس) ─────────
   كان color:var(--gold) — ذهبي #F2B544 على بطاقة بيضاء بنسبة 1.83،
   أي أقلّ من نصف الحدّ الأدنى. وهو عطل قديم في الوضع النهاري لا من
   الوضع الليلي.

   الحلّ --cream-dim لا --gold-bright: الأخير لون السعر نفسه، فلو
   أخذه الرمز لتساوى معه بصرياً وضاع التمييز. و--cream-dim رمز النصّ
   الثانوي، يعطي 5.06 على الأبيض، ويقرأ كوحدة عملة هادئة بجانب رقم
   بارز — وهو الترتيب البصري الصحيح أصلاً.

   ولأنه رمز لا لون ثابت فهو ينقلب وحده في الليلي (#CDB295 على لوح
   داكن) بلا قاعدة ثانية. */
.item-price span{ color:var(--cream-dim); }

/* ═══ 🆕 v366 الشريط العلوي = المقدمة (الحاج أيمن، 2026-10-29) ═══
   برتقالي الجمرة الغامق «ككتلة مختلفة»، والكتابة أبيض بظل خفيف بعد «الكتابة
   بطلت واضحة». */
.topbar.nm-tb-hero{
  background:linear-gradient(135deg,#B8461A 0%,#8A3312 100%) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:none !important; padding:18px 18px 16px; align-items:center;
  color:#fff;
}
.nm-tb-hero .nm-tb-text{ flex:1; min-width:0; padding-inline-start:4px; }
.nm-tb-hero .logo{ color:#fff !important; font-size:1.9rem; line-height:1.15; white-space:nowrap; gap:10px; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.nm-tb-hero .logo small{ color:#FFE9D2 !important; font-size:.7rem; }
.nm-tb-slogan{ margin:6px 0 0; font-family:'Noto Kufi Arabic', sans-serif; font-weight:800; font-size:1.25rem; line-height:1.35;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); white-space:nowrap; }
.nm-tb-slogan > span:first-child{ color:#FFD38A; }
.nm-tb-live{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:3px 10px; border-radius:999px;
  font:700 .68rem Almarai, sans-serif; color:#fff; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.3); white-space:nowrap; }
.nm-tb-live i{ width:7px; height:7px; border-radius:50%; background:#FFD38A; box-shadow:0 0 0 3px rgba(255,211,138,.25); }
.nm-tb-hero .nm-theme-btn{ color:#fff; border-color:rgba(255,255,255,.7); opacity:.9; }
/* 🆕 v367 (اقتراح منى: «الكتلة الثابتة تحت»): الشريط البرتقالي ما عاد مثبّتاً — يظهر بأول
   الصفحة ويروح مع النزول، والبحث وشرائح الأقسام هم اللي يلزقوا فوق (كانوا تحته بـ54px). */
.topbar.nm-tb-hero{ position:relative !important; top:auto; }
.search-bar{ top:0 !important; }
.cat-tabs{ top:var(--nm-search-h, 56px) !important; }
@media (min-width:720px){ .topbar.nm-tb-hero{ padding:20px 2.4rem 18px; } .nm-tb-slogan{ font-size:1.45rem; } }

/* 🆕 v366 (الحاج أيمن: «العناوين للوجبات الخط مش واضح») — عناوين الأقسام كانت بخط الرقعة
   (--kufi = Rakkas)، صارت كوفي بولد مقروء. اسم نيرو مكس بالشريط يبقى رقعة. */
.cat-ar, .cat-head h2, .cat-head .cat-ar{ font-family:'Noto Kufi Arabic', sans-serif !important; font-weight:800 !important; }

/* 🆕 v368 (ملاحظة منى عن «الموائمة»): الشرائح والشريط المتحرك كانوا يبينوا مقطوعين على
   الطرف — هم بيتسحّبوا يمين ويسار، فتلاشي خفيف على الطرفين بيوضّح إنه في كمان. وعلى الشاشة
   العريضة المنيو بعرض مريح بالنص بدل ما يمتد على كل الشاشة. */
.cat-tabs, .nm-marquee{
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(to left, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
@media (min-width:900px){
  #menuSections, #searchResults, .search-bar .search-pill, .po-entry{ max-width:1040px; margin-inline:auto; }
  .cat-tabs{ justify-content:center; }
}

/* 🆕 v369 (ملاحظة منى الثانية: «الموائمة مع حجم الشاشة مش زابط … يستخدم clamp»): المقاسات
   صارت تتبع عرض الشاشة — بتصغر على الجوال الصغير وبتكبر على الكبير بحدّين. الشرائح أصغر
   شوي على الجوال فيبين منها أكثر، والباقي يُوصل له من زر «كل الأقسام» بالشريط البرتقالي. */
.cat-tabs{ gap:clamp(.3rem, 1.6vw, .5rem); padding:clamp(.45rem, 2vw, .6rem) clamp(.6rem, 3vw, .9rem); }
.cat-tab{
  font-size:clamp(.74rem, 3.4vw, .9rem) !important;
  min-height:clamp(34px, 9.6vw, 42px);
  padding:clamp(.3rem, 1.4vw, .45rem) clamp(.6rem, 2.8vw, .9rem) clamp(.3rem, 1.4vw, .45rem) clamp(.5rem, 2.4vw, .75rem);
  gap:clamp(.25rem, 1.2vw, .35rem);
}
.cat-tab .cat-icon{ width:clamp(16px, 5vw, 22px); height:clamp(16px, 5vw, 22px); }
.nm-marquee{ font-size:clamp(.72rem, 3.2vw, .88rem); }
.nm-tb-hero .logo{ font-size:clamp(1.45rem, 7vw, 1.9rem); }
.nm-tb-slogan{ font-size:clamp(1rem, 5vw, 1.25rem); }
.search-pill input{ font-size:clamp(.82rem, 3.8vw, 1rem); }
.cat-head .cat-ar, .cat-ar{ font-size:clamp(1.45rem, 7vw, 2.2rem); }

/* ═══ 🆕 2026-11-02 فحص Impeccable للمنيو (الحاج أيمن: «اهتمامنا اليوم على الديزين») — صفحات الزبون فقط ═══
   1) الأسعار: البرتقالي #E0702F على الكريمي تباينه 3.1 (المطلوب 4.5) فبيصعب يقرأ بالشمس.
      --brand-ink نفس البرتقالي أغمق درجة (5.1 على الكريمي) للنص بس؛ الأزرار والزينة بتضل --brand. */
:root{ --brand-ink:#B4491A; }
.item-price, .cart-row .line-total, .sheet-head h2{ color:var(--brand-ink) !important; }
/* 2) النصوص اللي الزبون بيختار منها كانت 10.5–11 بكسل: صارت 12 على الأقل. */
.mode-choice button small, .pay-timing button small, .po-entry button small, .po-entry a.po-hall small,
.wa-choice small, .field label .en, .nm-badge, .nm-trust{ font-size:max(0.75rem, 12px); }
.nm-tb-live{ font-size:.75rem; }
/* الشريط المتحرك (أسماء الأصناف) بنفس درجة النص الأغمق */
.nm-marquee-item{ color:var(--brand-ink) !important; }
/* 3) لمعة زر السلة والزر الأساسي: كانت تعيد كل 4 ثواني للأبد؛ صارت مرتين عند الظهور ثم تهدأ. */
.cart-bar-inner::after, .primary-btn:not(:disabled)::after{ animation-iteration-count:2 !important; }

/* ═══ 🆕 2026-11-02 الفحص النقدي لخطوات الطلب ═══
   1) زرّا «اطلب بصوتك» والواتساب العائمين كانوا يغطّوا السلة والدفع (الإجمالي، رقم الحساب، رسالة الخطأ) — بيختفوا والسلة/الخطوات مفتوحة.
   2) زر «نسخ» جنب رقم الحساب والـIBAN (js/checkout-steps.js). */
body:has(.overlay.open) #nm-voice-btn, body:has(.overlay.open) #nm-wa-fab{ display:none !important; }
.payment-info .pay-details div{ align-items:center; }
.payment-info .pay-details b{ flex:1; text-align:left; }
.payment-info .copy-btn{ flex:none; min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--brand-ink); font:inherit; font-weight:700; font-size:.8rem; cursor:pointer; }

/* ═══ 🆕 2026-11-02 الفحص النقدي لخطوات الطلب: أهداف لمس أكبر ورسالة الخطأ أوضح (صفحات الزبون بس) ═══ */
.sheet-head .close-btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; }
.cart-row .qty-stepper button{ min-width:40px; min-height:40px; font-size:1.1rem; }
.overlay input[type="checkbox"]{ width:22px; height:22px; flex:none; }
#checkoutError{ font-size:.92rem; font-weight:700; padding:.55rem .7rem; border-radius:12px; background:#FDECEC; }