/* ════════════════════════════════════════════════════════════════
   Goustenu · قالب «صلصال دافئ» (salsal) — المظهر وحده
   ----------------------------------------------------------------
   العقد كاملاً: `apps/menu/templates/CONTRACT.md` (يقفله cores.test.mjs).
   نفس `index.html` ونفس `app.mjs` ونفس المُعرّفات — الفرق CSS خالص.

   المادّة: **كل عنصر قطعة صلصال منفوخة باليد.** ثلاث طبقات لكل قطعة:
     1) ظلّ خارجيّ **مُشبَع بلون القطعة نفسها** — لا رمادي. ظلّ رمادي
        تحت قطعة مرجانية يقرؤه العين «بلاستيك رخيص» فوراً. هذا أهمّ قرار
        في القالب وأكثر ما يُخطئ فيه من يقلّد الصلصال.
     2) بريق داخليّ من الأعلى (الضوء يلمس القمّة المنفوخة).
     3) انطباع داخليّ من الأسفل (القطعة تنحدر بعيداً عن الضوء).

   ⚠️ أربعة قرارات موثَّقة:

   1) **عالَم واحد فاتح — ولا وضع داكن.** سِحر الصلصال في الباستيل
      المضيء؛ و«صلصال داكن» يصير بطاقات مدوّرة بظلال لا تُرى، أي فقدان
      المادّة كلّها مع الاحتفاظ بتكلفتها. فالقالب **يُخفي زرّ الوضع**
      (`.theme-toggle { display: none }`) — واختبار العقد يفرض إحدى
      الحالتين: كتلة داكنة، أو إخفاء الزرّ. زرٌّ ظاهر لا يفعل شيئاً أسوأ
      من غياب الميزة، والإعدام البصريّ يُخرجه من ترتيب الجدولة كذلك.

   2) **لون المطعم هو الصلصال.** `--clay: var(--primary, …)` — والمرجاني
      بديلٌ لا فرض. ومنه تُشتقّ الظلال بـ`color-mix` فتبقى مُشبَعة بلونه
      هو. لكن `--primary` قد يكون أيّ شيء (اختبار القبول يضبط `#00FF00`)،
      فكل نصّ على الصلصال يمرّ بسلّم الإضاءة الثلاثي (أسفل) — ولا يُكتب
      نصٌّ بلون المطعم الخام أبداً.

   3) **الأنصاف كبيرة ومتفاوتة** (38/30/22/16px): الصلصال المشغول باليد
      لا يعطي نفس نصف القُطر لكل قطعة. التفاوت مقصود لا سهو.

   4) **`--ease` مرتدّ** (`cubic-bezier(.34,1.56,.64,1)`): القطعة الطريّة
      تتجاوز هدفها قليلاً ثمّ تستقرّ. يُلغى كلّياً عند
      `prefers-reduced-motion` — الارتداد أوّل ما يزعج في هذه الأوضاع.
   ════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;   /* عالَم واحد — بلا تفاوض */

  /* ─── الأرض والقِطَع ─── */
  --ground: #FBEFE2;
  --tile: #FFFBF6;
  --tile-2: #FDF3E9;

  /* ─── الحبر ─── */
  --ink: #4A3B33;
  --ink-2: #7C685D;
  --ink-3: #A99384;

  /* ─── الصلصال: لون المطعم أوّلاً، والمرجاني بديل ─── */
  --clay: var(--primary, #F2856D);

  /* نصّ/أيقونة بلون الصلصال — سلّم من ثلاث إعلانات لنفس الرمز.
     المحرّك يُهمل ما لا يفهم فيسقط إلى الطبقة الأقدم بلا كسر.
     `color-mix` وحده لا يُنقذ `#00FF00` (≈2.2:1 على أبيض) — ولذلك
     الطبقة الثالثة تسقُف الإضاءة صراحةً. */
  --clay-ink: #B0432A;
  --clay-ink: color-mix(in srgb, var(--clay) 72%, var(--ink));
  --clay-ink: oklch(from var(--clay) min(l, 0.46) c h);

  /* ثانويّة المطعم — للوسوم والتفاصيل الصغيرة */
  --clay-2: var(--secondary, #7FB77E);
  --clay-2-ink: #3F6B3E;
  --clay-2-ink: color-mix(in srgb, var(--clay-2) 72%, var(--ink));
  --clay-2-ink: oklch(from var(--clay-2) min(l, 0.44) c h);

  --on-clay: #FFF8F4;

  /* ألوان الحالة — ثوابت دلاليّة لا تتبع المطعم (أخضر=مفتوح دائماً) */
  --ok: #4E9A57;
  --ok-ink: #2F6B37;
  --warn: #D9705C;
  --warn-ink: #9C3D2B;
  /* أحمر «مغلق» بمادّة الصلصال (2026-08-22) — أدفأ وأقلّ صراخاً من الأحمر
     المعياريّ كي ينتمي إلى الباستيل، وحبرُه غامق ليبلغ التبايُن. */
  --closed: #D65C5C;
  --closed-ink: #97302F;
  --vac: #8B84C4;
  --vac-ink: #514A8C;
  --butter: #F7C453;

  /* ─── الأنصاف: متفاوتة عن قصد ─── */
  --r-xl: 38px;
  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 16px;
  --r-pill: 999px;

  /* ─── ظلال القطعة المحايدة (الأرض/البلاط) ───
     الثلاثيّ: خارجيّ مُشبَع + بريق أعلى + انطباع أسفل. */
  --sh-out: rgba(198, 158, 128, .38);
  --sh-hi: rgba(255, 255, 255, .95);
  --sh-lo: rgba(198, 158, 128, .30);

  --puff:
    0 14px 26px -8px var(--sh-out),
    0 4px 8px -4px var(--sh-out),
    inset 0 8px 12px -6px var(--sh-hi),
    inset 0 -9px 12px -6px var(--sh-lo);

  --puff-sm:
    0 8px 16px -6px var(--sh-out),
    inset 0 5px 8px -4px var(--sh-hi),
    inset 0 -6px 8px -4px var(--sh-lo);

  /* تجويف مضغوط — للحقول وأحواض الأيقونات */
  --press:
    inset 0 7px 12px -3px var(--sh-lo),
    inset 0 -5px 9px -3px var(--sh-hi);

  --u: 8px;
  --maxw: 1120px;
  --nav-h: 3.6rem;
  --ease: cubic-bezier(.34, 1.56, .64, 1);
}

/* ─── الأساس ─── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 14);
  font-family: var(--font-text, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--ground);
  min-height: 100%;
  overflow-x: hidden;   /* الظلال الخارجية لا تفتح شريط تمرير أفقياً */
}

h1, h2, h3 {
  font-family: var(--font-display, var(--font-text, system-ui, sans-serif));
  margin: 0;
  line-height: 1.35;
  font-weight: 700;
}

p { margin: 0; }

img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  font-family: var(--font-text, system-ui, sans-serif);
}

/* كل رقم بعرض ثابت — بلا هذا يهترّ عمود الأسعار عند كل تحديث سلّة */
.dish-price, .cart-btn-total, .cart-row-price, .cart-total-row, .qty-num {
  font-variant-numeric: tabular-nums;
}

/* السبرايت مخفيّ بلا الإعدام البصريّ (يُبطل مراجع <use> في بعض المحرّكات) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ⚠️ يضيفها `app.mjs` ولا يعرّفها — قالب ينساها يُظهر زرّ سلّة فارغة دائماً */
.hidden { display: none !important; }

:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ⚠️ عالَم واحد فاتح ⇒ الزرّ يُخفى (العقد §6). لا تحذف هذا السطر. */
.theme-toggle { display: none; }

/* ════════════════════════════════════════════════
   2. الترويسة — لوح صلصال كبير
   ════════════════════════════════════════════════ */
.header {
  margin: calc(var(--u) * 2) auto calc(var(--u) * 3);
  max-width: var(--maxw);
  background: var(--tile);
  border-radius: var(--r-xl);
  box-shadow: var(--puff);
  padding: calc(var(--u) * 2);
  overflow: hidden;
}

.r-hero {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--press);   /* الصورة **مضغوطة** في اللوح لا نابتة منه */
  margin-bottom: calc(var(--u) * 2);
}
.r-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 34vh;
  object-fit: cover;
}

/* البديل بلا صورة: **كتل صلصال طريّة** لا مستطيل رمادي (مضادّ PRODUCT.md).
   `--seed` (0–24) يكتبها `app.mjs` فتتحرّك مواضع الكتل وأحجامها ⇒ لا
   مطعمان بنفس البديل. الألوان من لون المطعم نفسه، فيبقى البديل هويّةً. */
.r-hero.is-fallback {
  --seed: 0;
  aspect-ratio: 16 / 9;
  max-height: 34vh;
  background-color: var(--tile-2);
  background-image:
    radial-gradient(
      circle at calc(22% + var(--seed) * 2.2%) calc(34% + var(--seed) * 1.1%),
      color-mix(in srgb, var(--clay) 34%, transparent) 0,
      transparent calc(28% + var(--seed) * 0.7%)
    ),
    radial-gradient(
      circle at calc(74% - var(--seed) * 1.4%) calc(66% - var(--seed) * 0.9%),
      color-mix(in srgb, var(--clay-2) 30%, transparent) 0,
      transparent calc(24% + var(--seed) * 0.8%)
    ),
    radial-gradient(
      circle at calc(50% + var(--seed) * 1.6%) calc(14% + var(--seed) * 1.8%),
      color-mix(in srgb, var(--butter) 26%, transparent) 0,
      transparent 20%
    );
}

.r-headwrap {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
  padding: 0 var(--u);
  flex-wrap: wrap;
}

/* الشعار قطعة منفوخة مستقلّة — يبرز من اللوح لا يجلس عليه */
.r-logo {
  width: 68px;
  height: 68px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--tile-2);
  box-shadow: var(--puff-sm);
  flex: none;
}

.r-name {
  font-size: clamp(1.55rem, 5.5vw, 2.35rem);
  color: var(--ink);
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: break-word;   /* اسم من 40 حرفاً لا يفتح تمريراً أفقياً */
}

.r-bio {
  flex: 1 1 100%;
  color: var(--ink-2);
  font-size: .96rem;
  max-width: 44em;
  padding-inline-start: 2px;
}

.r-metarow {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--u);
  margin-top: var(--u);
}

/* العنوان والهاتف: حصاة صغيرة لكل واحد. 44px حدّ اللمس (العقد §7-5). */
.r-link, .r-meta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 calc(var(--u) * 1.75);
  border-radius: var(--r-pill);
  background: var(--tile-2);
  box-shadow: var(--puff-sm);
  color: var(--ink-2);
  font-size: .9rem;
  text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.r-link { color: var(--clay-ink); font-weight: 600; }
.r-link:hover { transform: translateY(-2px); }
.r-link:active { box-shadow: var(--press); transform: none; }

/* ════════════════════════════════════════════════
   3. حالة المطعم — حصاة ملوّنة، وظلّها من لونها
   ------------------------------------------------
   لون الحالة **لا يتبع المطعم**: أخضر=مفتوح وأحمر=مغلق دلالة عامّة،
   ومطعمٌ لونه أحمر لا يجوز أن يعرض «مفتوح» بالأحمر.
   ════════════════════════════════════════════════ */
.status-wrap {
  max-width: var(--maxw);
  margin: 0 auto calc(var(--u) * 3);
  display: flex;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.25);
  border-radius: var(--r-md);
  font-size: .95rem;
  box-shadow:
    0 10px 20px -8px var(--st-sh),
    inset 0 6px 10px -5px rgba(255, 255, 255, .34),
    inset 0 -7px 10px -5px var(--st-sh);
  background: var(--st-bg);
  color: var(--st-ink);
}

.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--st-ink);
  flex: none;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18);
}

.status-title { font-weight: 700; }
.status-detail { color: inherit; opacity: .82; }

/* 🔴 **ممتلئة لا شاحبة** (حكم 2026-08-22: «لون الحالة فاتح») — والتنفيذ
   **داخل نظام هذا القالب** لا بقواعدَ فوقه: قاعدةٌ عامّة بوزن
   `.status-badge.status-open` تدهس مادّته الصلصاليّة. فالمتغيّرات نفسها
   تحمل القيمة الجديدة، ويبقى بريقُه الداخليّ وظلّه الملوَّن كما هما.
   والنسبة `78%` من `MIX.FILL` في `shared/theme-roles.mjs`. */
.status-open {
  --st-bg: color-mix(in srgb, var(--ok) 78%, #000);
  --st-ink: #FFFAF7;
  --st-sh: color-mix(in srgb, var(--ok) 52%, transparent);
}
.status-closed {
  /* بطلبك (2026-08-22): الأحمر للمغلق. كان `--warn` كهرمانيّاً فيُقرأ
     «تنبيه» لا «مغلق» — والزبون يحتاج جواباً لا تحذيراً. */
  --st-bg: color-mix(in srgb, var(--closed) 78%, #000);
  --st-ink: #FFFAF7;
  --st-sh: color-mix(in srgb, var(--closed) 52%, transparent);
}
.status-vacation {
  --st-bg: color-mix(in srgb, var(--vac) 78%, #000);
  --st-ink: #FFFAF7;
  --st-sh: color-mix(in srgb, var(--vac) 52%, transparent);
}

/* توقيع قوالب «موعد»: الحالة تصبغ الصفحة كلّها لا الشارة وحدها.
   مغلق/عطلة ⇒ الغلاف يفقد تشبّعه فيُقرأ «ليس الآن» بلا قراءة نصّ. */
body.s-closed .r-hero img,
body.s-vacation .r-hero img { filter: saturate(.55) brightness(.94); }
body.s-closed .r-hero.is-fallback,
body.s-vacation .r-hero.is-fallback { opacity: .6; }

/* ════════════════════════════════════════════════
   4. شريط الفئات — حصوات في ميزاب
   ════════════════════════════════════════════════ */
.cat-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: var(--u);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--u) calc(var(--u) * 1.5);
  margin: 0 auto calc(var(--u) * 3);
  max-width: var(--maxw);
  min-height: var(--nav-h);
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--ground);
  box-shadow: var(--press);
}
.cat-nav::-webkit-scrollbar { display: none; }

/* `app.mjs` يُخلي الشريط عند فئة واحدة — فارغاً يبقى ميزاباً بلا معنى */
.cat-nav:empty { display: none; }

.cat-chip {
  flex: none;
  min-height: 40px;
  padding: 0 calc(var(--u) * 2);
  border-radius: var(--r-pill);
  background: var(--tile);
  box-shadow: var(--puff-sm);
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s var(--ease), color .2s ease;
}
.cat-chip:hover { transform: translateY(-2px); }

/* المفعَّلة **مضغوطة** لا مرفوعة: الحصاة التي دُفعت في الطين هي المختارة.
   دلالة مادّية بلا حاجة إلى لون وحده — تعمل حتى في `prefers-contrast`. */
.cat-chip.is-active {
  background: var(--tile-2);
  box-shadow: var(--press);
  color: var(--clay-ink);
  transform: none;
}

/* ════════════════════════════════════════════════
   5. المنيو — الفئات
   ════════════════════════════════════════════════ */
.menu { max-width: var(--maxw); margin: 0 auto; }

.cat { margin-bottom: calc(var(--u) * 5); }

/* الشريط لاصق ⇒ بلا هذا يختفي عنوان الفئة تحته عند القفز إليها */
.cat { scroll-margin-top: calc(var(--nav-h) + var(--u) * 2); }

.cat-title {
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 1.5);
}

.cat-dishes {
  display: grid;
  gap: calc(var(--u) * 2);
}

/* ════════════════════════════════════════════════
   6. البطاقة — القطعة الأساسية
   ------------------------------------------------
   ⚠️ ثلاث حالات حصراً، ولا يجتمع صنفان (العقد §4):
     `.dish`              بلا صورة
     `.dish.has-img`      صورة صغيرة جانبية
     `.dish.is-feature`   أوّل طبق ذي صورة في الفئة — صورة عريضة أعلى
   الصنفان `.has-img` و`.is-feature` بنفس الوزن (0,2,0)، فلو اجتمعا
   لتقرّر الفائز بترتيب السطور — ولذلك `app.mjs` يُصدر واحداً فقط.
   ════════════════════════════════════════════════ */
.dish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2);
  background: var(--tile);
  border-radius: var(--r-lg);
  box-shadow: var(--puff);
  transition: transform .25s var(--ease);
}
.dish:hover { transform: translateY(-3px); }

.dish.has-img {
  grid-template-columns: 84px minmax(0, 1fr) auto;
}

.dish.is-feature {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "img  img"
    "info action";
  border-radius: var(--r-xl);
}
.dish.is-feature .dish-thumb { grid-area: img; }
.dish.is-feature .dish-info { grid-area: info; }
.dish.is-feature .dish-action { grid-area: action; }

/* الصورة مضغوطة في القطعة (نفس منطق الغلاف): الطعام محفور في الصلصال */
.dish-thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--press);
  background: var(--tile-2);
}
.dish-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.dish.is-feature .dish-thumb {
  border-radius: var(--r-lg);
  margin-bottom: var(--u);
}
.dish.is-feature .dish-thumb img {
  aspect-ratio: 16 / 9;
  max-height: 240px;
}

.dish-info { min-width: 0; }

/* شبكة لا فلكس: السعر يلتزم حافّة عموده فيبقى مستقيماً بين البطاقات */
.dish-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--u);
}

.dish-name {
  font-family: var(--font-display, var(--font-text, system-ui, sans-serif));
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
}

.dish-price {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--clay-ink);
  white-space: nowrap;
}

.dish-desc {
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.7;
  margin-top: .3rem;
}

.dish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

/* الوسم حصاة صغيرة بلون المطعم الثانوي */
.tag {
  font-size: .76rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--clay-2) 18%, var(--tile));
  color: var(--clay-2-ink);
  box-shadow: var(--puff-sm);
}

.dish-action { display: flex; align-items: center; }

/* ─── الإضافة والكمّية ─── */

/* الزرّ قطعة صلصال بلون المطعم — ينضغط فعلاً عند اللمس (`:active`).
   هذه هي «الاستجابة» في الصلصال: لا تغيير لون بل تغيير عمق. */
.add-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 calc(var(--u) * 2.25);
  border-radius: var(--r-pill);
  background: var(--clay-ink);
  color: var(--on-clay);
  font-weight: 700;
  font-size: .92rem;
  box-shadow:
    0 10px 18px -7px color-mix(in srgb, var(--clay) 55%, transparent),
    inset 0 6px 9px -5px rgba(255, 255, 255, .45),
    inset 0 -7px 10px -5px rgba(0, 0, 0, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.add-btn:hover { transform: translateY(-2px); }
.add-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 6px 10px -3px rgba(0, 0, 0, .28);
}

/* المُبدِّل تجويف واحد وفيه ثلاث خلايا — لا ثلاث قطع منفصلة */
.qty {
  display: grid;
  grid-template-columns: 44px auto 44px;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--tile-2);
  box-shadow: var(--press);
  padding: 3px;
}

.qty-btn {
  min-height: 40px;
  border-radius: 50%;
  color: var(--clay-ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  background: var(--tile);
  box-shadow: var(--puff-sm);
  transition: transform .18s var(--ease);
}
.qty-btn:active { transform: scale(.92); box-shadow: var(--press); }

.qty-num {
  text-align: center;
  font-weight: 700;
  min-width: 2ch;
  color: var(--ink);
}

/* ─── ملاحظات ونهاية الصفحة ─── */
.empty-note {
  color: var(--ink-3);
  text-align: center;
  padding: calc(var(--u) * 5) var(--u);
  font-size: .95rem;
}

.foot {
  max-width: var(--maxw);
  margin: calc(var(--u) * 5) auto 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
  padding-bottom: var(--u);
}

/* ════════════════════════════════════════════════
   7. زرّ السلّة العائم — أكبر قطعة في الصفحة
   ------------------------------------------------
   `env(safe-area-inset-bottom)`: بلا ذلك يقع الزرّ تحت شريط الإيماءات
   في iPhone فيتعذّر لمسه — والمنيو كلّه يُستعمل على الهاتف.
   ════════════════════════════════════════════════ */
.cart-button {
  position: fixed;
  z-index: 40;
  inset-inline: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2 + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 56px;
  padding: 0 calc(var(--u) * 2.5);
  border-radius: var(--r-pill);
  background: var(--clay-ink);
  color: var(--on-clay);
  font-weight: 700;
  box-shadow:
    0 16px 28px -8px color-mix(in srgb, var(--clay) 60%, transparent),
    inset 0 8px 12px -6px rgba(255, 255, 255, .45),
    inset 0 -9px 12px -6px rgba(0, 0, 0, .24);
  transition: transform .22s var(--ease);
}
.cart-button:hover { transform: translateY(-3px); }
.cart-button:active { transform: translateY(1px); }

/* أيقونة السلّة أكبر قليلاً من `.icon` العامّة: هي المقبض الأساسي في
   الصفحة، ويحملها زرّ بارتفاع 56px فتبدو ضامرة بالحجم الافتراضي. */
.cart-icon { width: 1.45rem; height: 1.45rem; }

/* العدّاد قطعة بيضاء مضغوطة داخل الزرّ — تباين بلا لون ثالث */
.cart-badge {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--on-clay);
  color: var(--clay-ink);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .16);
}

.cart-btn-total { margin-inline-start: auto; font-size: .95rem; }

/* ─── الطبقة المعتمة ───
   `visibility` مع `opacity` لا `display`: يحفظ الانتقال ويمنع اللمس معاً. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.backdrop.show { opacity: 1; visibility: visible; }

/* ════════════════════════════════════════════════
   8. الدرج — لوح صلصال ينزلق من الأسفل
   ------------------------------------------------
   ⚠️ **لا الإعدام البصريّ** (العقد §7-7): يُخرج العنصر من الانتقال ومن
   ترتيب الجدولة معاً بلا تدريج. المغلق = `transform` + `visibility`،
   فيبقى الانزلاق مرئيّاً ويبقى محتواه بعيداً عن Tab.
   ════════════════════════════════════════════════ */
.cart-drawer {
  position: fixed;
  z-index: 50;
  inset-inline: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -18px 40px -12px var(--sh-out);
  padding: calc(var(--u) * 2) calc(var(--u) * 2)
           calc(var(--u) * 2 + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%);
  visibility: hidden;
  transition: transform .34s var(--ease), visibility .34s;
}
.cart-drawer.open { transform: none; visibility: visible; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  margin-bottom: calc(var(--u) * 2);
}
.drawer-head h2 { font-size: 1.2rem; color: var(--ink); }

.close-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tile);
  color: var(--ink-2);
  box-shadow: var(--puff-sm);
  transition: transform .18s var(--ease);
}
.close-btn:active { transform: scale(.92); box-shadow: var(--press); }

.cart-list {
  overflow-y: auto;
  display: grid;
  gap: var(--u);
  margin-bottom: calc(var(--u) * 2);
  /* الظلال الخارجية تُقتصّ عند حافّة الصندوق المُمرَّر — هامش يحفظها */
  padding: 4px;
  margin-inline: -4px;
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.5);
  background: var(--tile);
  border-radius: var(--r-md);
  box-shadow: var(--puff-sm);
}

.cart-row-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--u);
  min-width: 0;
}
.cart-row-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: break-word;
}
.cart-row-price { color: var(--clay-ink); font-weight: 700; white-space: nowrap; }

/* المجموع تجويف: القيمة النهائية محفورة لا مرفوعة */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.75) calc(var(--u) * 2);
  border-radius: var(--r-md);
  background: var(--ground);
  box-shadow: var(--press);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ink);
  margin-bottom: calc(var(--u) * 2);
}

/* ─── نموذج الطلب ─── */
.order-form { display: grid; gap: var(--u); }

/* الحقل تجويف مضغوط — الاستعارة الطبيعية للإدخال في مادّة طريّة */
.field {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2);
  border: 0;
  border-radius: var(--r-md);
  background: var(--tile-2);
  box-shadow: var(--press);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-text, system-ui, sans-serif);
}
.field::placeholder { color: var(--ink-3); }
.field:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}
textarea.field { min-height: 80px; resize: vertical; }

/* ارتفاع محفوظ: بلا هذا يقفز الزرّ للأسفل لحظة ظهور الخطأ */
.form-err {
  min-height: 1.3em;
  color: var(--warn-ink);
  font-size: .86rem;
  font-weight: 600;
  padding-inline: var(--u);
}

/* ⚠️ **ليس أخضر واتساب** (مضادّ `PRODUCT.md §3-13`): الزرّ يرسل رسالة
   واتساب، فتقليد لون العلامة يوهم أنّ هذا تطبيقهم. لون المطعم أصدق. */
.send-btn {
  min-height: 52px;
  border-radius: var(--r-pill);
  background: var(--clay-ink);
  color: var(--on-clay);
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow:
    0 14px 24px -8px color-mix(in srgb, var(--clay) 58%, transparent),
    inset 0 7px 11px -6px rgba(255, 255, 255, .45),
    inset 0 -8px 11px -6px rgba(0, 0, 0, .24);
  transition: transform .22s var(--ease);
}
.send-btn:hover { transform: translateY(-2px); }
.send-btn:active { transform: translateY(1px); box-shadow: var(--press); }
.send-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--press);
}

/* ════════════════════════════════════════════════
   9. سطح المكتب
   ------------------------------------------------
   العناصر الخمسة وحدها أبناء الشبكة: `.sprite` مُطلَق، وزرّ الوضع
   (مخفيّ أصلاً) والسلّة والطبقة والدرج `fixed` ⇒ خارج التخطيط.
   ════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body { padding: 0 calc(var(--u) * 4) calc(var(--u) * 14); }

  body {
    max-width: calc(var(--maxw) + var(--u) * 8);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "hero   hero"
      "status menu"
      "nav    menu"
      "foot   foot";
    column-gap: calc(var(--u) * 4);
    align-items: start;
  }
  #header-zone { grid-area: hero; }
  #status-zone { grid-area: status; margin-bottom: calc(var(--u) * 2); }
  #cat-nav { grid-area: nav; }
  #menu-zone { grid-area: menu; }
  .foot { grid-area: foot; }

  .r-name { font-size: 2.5rem; }
  .r-logo { width: 84px; height: 84px; }
  .header { padding: calc(var(--u) * 2.5); }

  /* الميزاب يصير عمودياً لاصقاً: صفّ الحصوات ينزل بمحاذاة المنيو.
     `#menu-zone` يمتدّ على صفَّي status وnav فيطول العمود، وبه تحصل
     `sticky` على مسافة سفر فعليّة (بلا ذلك لا تتحرّك أصلاً). */
  .cat-nav {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    border-radius: var(--r-lg);
    padding: calc(var(--u) * 1.5);
    min-height: 0;
    top: calc(var(--u) * 2);
  }
  .cat-chip { text-align: start; min-height: 44px; }

  .status-badge { flex: 1; }
}

/* عمودان للأطباق حين يتّسع العمود فعلاً */
@media (min-width: 1100px) {
  .cat-dishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 2.5);
  }

  /* البطاقة البارزة تعبر العمودين — وإلّا انكمشت صورتها العريضة إلى نصف
     العرض فذهب سبب وجودها. */
  .dish.is-feature { grid-column: 1 / -1; }
  .dish.is-feature .dish-thumb img { max-height: 320px; }
  .dish.has-img { grid-template-columns: 96px minmax(0, 1fr) auto; }

  /* الدرج يصير لوحاً جانبيّاً على حافّة البداية (اليمين في RTL) */
  .cart-drawer {
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    max-height: none;
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    box-shadow: 18px 0 40px -12px var(--sh-out);
    transform: translateX(101%);
  }
  .cart-drawer.open { transform: none; }

  /* شريط بعرض 1120px مبالغة — أصل الفكرة (أوسع مقبض ممكن) خاصّ بالهاتف */
  .cart-button {
    inset-inline: auto calc(var(--u) * 4);
    bottom: calc(var(--u) * 3);
    min-width: 240px;
  }
}

/* ─── 10. تفضيلات الوصول ─── */

/* الارتداد أوّل ما يزعج هنا: يُلغى الانتقال **والمنحنى** معاً — لا يبقى
   `--ease` مؤثّراً حين تكون المدّة .01ms، لكنّ `scroll-behavior` يبقى
   فيقفز المتصفّح إلى الفئة بلا انزلاق. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .dish:hover, .cart-button:hover, .send-btn:hover,
  .add-btn:hover, .cat-chip:hover, .r-link:hover { transform: none; }
}

/* ⚠️ **الحالة الحرِجة لهذا القالب.** بنيته كلّها ظلال، والظلال أوّل ما
   يغيب في أوضاع التباين العالي ⇒ تصير الصفحة كتلة بيج بلا حدود. فكل
   قطعة تأخذ إطاراً صريحاً بديلاً، والحصاة المضغوطة (الفئة المفعَّلة)
   تُميَّز بإطار سميك لأنّ فرق العمق لا يُرى. */
@media (prefers-contrast: more) {
  .header, .dish, .cart-row, .cat-chip, .r-link, .r-meta,
  .status-badge, .qty, .field, .cart-total-row, .close-btn,
  .cat-nav, .cart-drawer, .r-logo, .tag {
    box-shadow: none;
    border: 1px solid var(--ink-2);
  }
  .cat-chip.is-active { border: 3px solid var(--ink); }
  .add-btn, .send-btn, .cart-button {
    box-shadow: none;
    border: 2px solid var(--ink);
  }
  .r-hero, .dish-thumb { border: 1px solid var(--ink-2); box-shadow: none; }
  .status-dot { box-shadow: none; border: 1px solid var(--ink); }
}

/* ════════════════════════════════════════════════
   رابط المصادر باهتاً (2026-08-22)
   ════════════════════════════════════════════════ */
/* ⚠️ **قواعد الشارة الملوَّنة لا تُلحَق هنا:** هذا القالب يملك نظام حالة
   خاصّاً به (`--st-bg/--st-ink/--st-sh` أعلاه) بمادّته الصلصاليّة، وقواعدُ
   عامّة بوزن `.status-badge.status-open` تدهسه. فالمطلوب (أحمر للمغلق)
   نُفِّذ **داخل نظامه**: `.status-closed` صار يستعمل `--closed` لا `--warn`. */
/* رابط «مصادر الصور»: صغيرٌ باهت لا يُلاحَظ (طلبك).
   ⚠️ **ولا معدوم:** صور الديمو بتراخيص CC BY تُلزِم بالإسناد، والإعدام البصريّ
      أو شفافيّةٌ صفر يُبطِلانه ويصيران خدعةً بصريّة. ولم أُنزِل التبايُن تحت
      حدّ العقد (`CONTRACT §7.5`: 4.5:1) — رابطٌ لا يُقرأ أصلاً إسنادٌ باطل
      قانوناً وخرقٌ لعقدنا معاً. فالإخفاء بالمقاس والوزن لا بالتبايُن. */
.foot .credits-link {
  /* 🔴 طلبك: «مخفيّ جدّاً وغير ملاحظ تماماً». فأُنزِل إلى **حاشية**: سطرٌ
     مستقلّ بأصغر مقاس في السلّم وحبرٍ خفيف بلا زخرفة.
     ⚠️ **ولا معدوم:** صور الديمو بتراخيص CC BY تُلزِم بالإسناد، وإعدامُه (إخفاءً أو شفافيّةَ صفر) يُبطِله ويصير خدعةً بصريّة.
     ⚠️ **والمقاس من السلّم لا رقماً حرّاً** — أمسكه اختبار بند 2.8 حين كتبتُ
        `.58rem`: سلّمٌ فيه استثناءٌ واحد ليس سلّماً. */
  display: block;
  margin-top: .55rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  opacity: .72;
  text-decoration: none;
  font-weight: 400;
}
.foot .credits-link:hover,
.foot .credits-link:focus-visible { color: var(--accent-ink); text-decoration: underline; }

/* ─── لا مستطيل أزرق عند اللمس (طلبك 2026-08-22) ───
   تظليل اللمس الافتراضيّ يرسم مربّعاً شبه شفّاف **فوق** المقبض لحظةَ الضغط،
   فيقطع المادّة المنحوتة ويظهر كعطب. وإزالتُه آمنة هنا لأنّ البديل موجود
   أصلاً: لكل مقبض حالة `:active`/`:hover` تُنقص النتوء — أي أنّ التغذية
   الراجعة **من النمط** لا من طبقة النظام.
   ⚠️ ولا يُمَسّ `:focus-visible`: ذاك للوصول بلوحة المفاتيح، وإسقاطه يعمي
      من لا يستعمل إصبعاً (شرط `CONTRACT §7.5`). */
html { -webkit-tap-highlight-color: transparent; }

/* ════════════════════════════════════════════════
   شرائح الأحجام (بند 3.13) — الشريحة **زرُّ الإضافة نفسه**
   ────────────────────────────────────────────────
   🔵 لماذا في البطاقة لا في مودال: الطلب نقرةٌ واحدة لا ثلاث (افتح ·
   اختر · أضف)، ومودالٌ لكل طبق يحبس التركيز ويُعتِم منيو الغرضُ منه
   التصفّح. والكمّيّة على الشريحة نفسها فيرى الزبون اختياره بلا فتح السلّة.
   ⚠️ و44px حدُّ هدف اللمس (`PRODUCT.md §5`) — شريحةٌ أصغر تُخطئها الإصبع
   في منيو يُقرأ واقفاً. ولا `letter-spacing` (يكسر وصل العربيّة).
   ════════════════════════════════════════════════ */
.dish-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * .75);
  margin-top: var(--u);
}

/* صلصال: بلاطةٌ منتفخة تُضغَط عند الاختيار (لا ظلَّ نقشيّ هنا). */
.size-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .4rem .85rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--clay-ink);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  white-space: nowrap;
  box-shadow: var(--puff-sm);
  cursor: pointer;
  transition: box-shadow .16s ease, transform .16s ease;
}
.size-chip:active { transform: translateY(1px); }
.size-chip.is-on { box-shadow: var(--press); }
.size-name { font-weight: 700; }
.size-price { opacity: .72; font-size: var(--t-xs); }

.size-qty {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .3rem;
  border-radius: var(--r-pill);
  /* ⚠️ مادّة salsal لا تُعرِّف --on-accent: شارةُ سلّتها تستعمل
     --on-clay/--clay-ink، فنتبعها — وإلّا نصٌّ بلا لونٍ محسوم. */
  background: var(--on-clay);
  color: var(--clay-ink);
  font-size: var(--t-xs);
  font-weight: 700;
}

.size-pair { display: inline-flex; align-items: center; gap: .2rem; }
.size-minus {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--tile);
  color: var(--clay-ink);
  font-size: var(--t-lg);
  line-height: 1;
  box-shadow: var(--puff-sm);
  cursor: pointer;
}
.size-minus:active { box-shadow: var(--press); }

/* ════════════════════════════════════════════════
   مبدّل اللغة (بند 2.15) — بمادّة الصلصال، وفي زاوية زرّ الوضع
   ────────────────────────────────────────────────
   ⚠️ هذا القالب فاتحٌ فقط (`dark:false`) فيُخفي `.theme-toggle`
   بـ`display:none` — والمبدّل يرث الصنف، فيجب أن **يُعيد الظهور**
   صريحاً وأن يأخذ الزاوية بلا إزاحةِ زرٍّ لا وجود له.
   ومادّته مادّةُ القالب: `--tile` أرضيّةً و`--puff-sm` نفخةً
   و`--press` عند اللمس — لا `--surface`/`--nm-*` (لا وجود لها هنا).
   ════════════════════════════════════════════════ */
.lang-toggle {
  display: grid;
  place-items: center;
  position: fixed;
  top: max(.7rem, env(safe-area-inset-top));
  inset-inline-end: .7rem;
  z-index: 30;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--ink);
  box-shadow: var(--puff-sm);
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 700;
  /* ⚠️ **لا `direction` هنا.** كانت `direction: ltr` لأجل «FR»، فقلبت معنى
     `inset-inline-end` **لهذا العنصر وحده** (تُحلّ باتّجاه العنصر لا صفحته)
     ⇒ الزرّ يمينَ الشاشة وزرّ الوضع يسارَها. وbidi تعرض المقطع اللاتينيّ
     صحيحاً بلا تدخّل، فالتصريح كان ضرراً بلا مقابل. */
  transition: color .18s ease, box-shadow .18s ease;
}
.lang-toggle:hover { color: var(--clay-ink); }
.lang-toggle:active { box-shadow: var(--press); }