/* ════════════════════════════════════════════════════════════
   شاشة المنيو — قصر اليمن
   منيو رقمي بلا كاميرا: يمرّر طبيعيًا مع المستند (انظر shared/base.css).
   الطبقات (z-index): 0 الخلفية · 3 الزخرفة · 70 الشريط العلوي ·
   90 خلفية لوح تفاصيل الطبق (تدرّج، المنيو يبقى مرئيًا خلفها) ·
   95 لوح تفاصيل الطبق (Bottom Sheet) · 96 معاينة ثلاثية الأبعاد ·
   100 مبدّل اللغة (يبقى قابلًا للاستخدام فوق اللوح)
   ════════════════════════════════════════════════════════════ */

.menu-screen {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-dark);
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--gold-ink) / 0.12), transparent 40%),
    radial-gradient(circle at 12% 85%, rgba(140, 90, 35, 0.14), transparent 42%),
    linear-gradient(180deg, var(--page-grad-1) 0%, var(--page-grad-2) 48%, var(--page-grad-3) 100%);
}

.pattern-strip {
  position: fixed;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 38px;
  background-image: url("../../assets/images/pattern.png");
  background-repeat: repeat-x;
  background-size: auto 38px;
  opacity: 0.12;
  pointer-events: none;
}

.pattern-top    { top: 0; }
.pattern-bottom { bottom: 0; }


/* ── الشريط العلوي ── */

.menu-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  /* العمود الثالث بعرض 128px (لا 44px) ليحجز فعليًا مساحة مبدّل اللغة
     العائم فوقه (position:fixed مستقل)، فلا يتمدّد شعار/عنوان العمود
     الأوسط تحته ويتصادم معه. */
  grid-template-columns: 44px 1fr 128px;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
  background: linear-gradient(180deg, var(--topbar-scrim-1) 0%, var(--topbar-scrim-2) 78%, transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--gold-border);
  color: var(--gold-2);
  box-shadow: var(--shadow-soft);
  transition: background var(--transition), border-color var(--transition);
}

.menu-back-btn { font-size: 28px; line-height: 1; grid-column: 1; grid-row: 1; justify-self: start; }

.menu-topbar-brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* الشعار هو العنصر المرئي الوحيد في هذه الخلية — العنوان النصي (h1) أصبح
   sr-only (انظر main-menu.html) فيبقى متاحًا لقارئ الشاشة ولتحديث اللغة
   دون أن ينازع الشعار على المساحة الضيقة بين زر الرجوع ومبدّل اللغة. */
.menu-topbar-logo {
  height: 34px;
  width: auto;
  transition: filter var(--transition);
}

/* ملف الشعار مرسوم بحبر أبيض/كريمي ثابت — نفس معالجة welcome.css */
:root:not([data-theme="dark"]) .menu-topbar-logo {
  filter: brightness(0) opacity(0.82);
}

/* العمود الثالث (44px) يبقى محجوزًا فارغًا فقط ليتوسّط العنوان بصريًا —
   مبدّل اللغة عنصر مستقل (position:fixed) لا جزء من هذه الشبكة، انظر
   .language-switcher أدناه. لا حاجة لعكس grid-column يدويًا في RTL: الشبكة
   ترث direction:rtl من html[dir="rtl"] فتُعيد ترقيم أعمدتها تلقائيًا (عمود 1
   يصبح الأقصى يمينًا) فينتقل زر الرجوع لليمين من تلقاء نفسه. يبقى فقط عكس
   اتجاه سهم الرجوع نفسه (شكل "‹" يجب أن يشير نحو معنى "رجوع" في الاتجاهين). */
html[dir="rtl"] .menu-back-btn { font-size: 30px; transform: scaleX(-1); }


/* ── مجموعة التحكم العلوية (ثيم + لغة) — نفس المكوّن حرفيًا من
   calibrate.css/welcome.css (نُقل كما هو). الفرق الوحيد اللازم: z-index
   أعلى هنا لأن main-menu فيها طبقات إضافية (اللوح السفلي وخلفيته) لا توجد
   في الشاشات الأخرى، فيجب أن تبقى قابلة للاستخدام حتى واللوح مفتوح. ── */

.top-controls {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: calc(env(safe-area-inset-right, 0px) + 20px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100dvw - 40px);
}

html[dir="rtl"] .top-controls {
  right: auto;
  left: calc(env(safe-area-inset-left, 0px) + 20px);
}

.theme-toggle {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--gold-border);
  color: var(--gold-2);
  font-size: 17px;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--transition), border-color var(--transition);
}

.theme-toggle:active { transform: scale(0.93); }

.language-switcher {
  display: flex;
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--gold-border);
  padding: 3px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  transition: background var(--transition), border-color var(--transition);
}

.language-option {
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.language-option:active {
  transform: scale(0.95);
}

.language-option.active {
  background: linear-gradient(135deg, var(--gold-4), var(--gold-3), var(--gold-2));
  color: white;
  box-shadow: 0 4px 12px rgba(197, 138, 62, 0.3);
}


/* ── المحتوى القابل للتمرير ── */

.menu-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) 16px
           calc(env(safe-area-inset-bottom, 0px) + 40px);
}

/* شريط السلة ثابت فوق المحتوى — نزيد الحشوة السفلية عند ظهوره فقط،
   حتى لا يغطّي آخر صفّ من البطاقات ولا يترك فراغًا حين تكون السلة فارغة */
body.has-cart .menu-content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
}

/* ── البحث ── */

.menu-search { margin-bottom: 14px; }

.menu-search input {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--card-radius-pill);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  border: 1px solid rgb(var(--gold-ink) / 0.18);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.menu-search input::placeholder { color: var(--text-secondary); opacity: 0.75; }
.menu-search input:focus-visible { border-color: rgb(var(--gold-ink) / 0.55); }

/* ── شريط الأصناف ── */

.cat-rail {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cat-rail::-webkit-scrollbar { display: none; }

.cat-chip {
  flex: none;
  padding: 8px 15px;
  border-radius: var(--card-radius-pill);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: rgb(var(--gold-ink) / 0.07);
  border: 1px solid rgb(var(--gold-ink) / 0.16);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.cat-chip:hover { border-color: rgb(var(--gold-ink) / 0.36); }

.cat-chip.is-active {
  color: var(--bg-dark);
  font-weight: 800;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  border-color: transparent;
  box-shadow: 0 4px 14px rgb(var(--gold-ink) / 0.24);
}


/* ════════════════════════════════════════════════════════════
   شبكة الأطباق — بطاقتان في الصف على الموبايل
   ════════════════════════════════════════════════════════════ */

.cat-heading {
  margin: 16px 2px 8px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cat-heading:first-child { margin-top: 0; }

/* #dishGrid نفسه ليس شبكة — مجرّد حاوية بعرض كامل تُكدّس بداخلها أزواج
   (عنوان قسم + .cat-group) بالتدفق العادي. .cat-group وحدها هي شبكة
   البطاقات الفعلية؛ لو كان dishGrid أيضًا grid بنفس الأعمدة، كل .cat-group
   كانت تُعامَل كخلية واحدة داخل شبكته الخارجية فتنكمش لعرض عمود واحد فقط
   (نصف الشاشة تقريبًا) بدل أن تمتد بعرض كامل. */
.dish-grid {
  width: 100%;
}

.cat-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* align-items:start (لا الافتراضي stretch) يجعل ارتفاع كل بطاقة تابعًا
     لمحتواها هي فقط، لا لأطول بطاقة في صفّها — فبطاقة مشروب قصيرة الوصف
     لا "تُمطّط" لتطابق جارتها الأطول، ولا يظهر فراغ داخلي غير متّسق. */
  align-items: start;
  gap: 12px;
  width: 100%;
}

@media (min-width: 640px) {
  .cat-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .cat-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* بطاقة الطبق — البطاقة كلها سطح واحد، لكنها ليست زرًّا واحدًا:
   منطقة التفاصيل (.dish-open) زر يملأ البطاقة، وفوقه زر الإضافة السريعة
   (.qa) في طبقة أعلى. زر داخل زر HTML غير صالح، لذا الحاوية <article>. */
.dish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius-lg);
  /* overflow مرئي عمدًا — نفس أسلوب بطاقات المنيو في لوحة التحكم: صورة
     الطبق (خلفيتها شفافة أصلًا) تُتاح لها البروز فوق حواف إطارها بدل
     القصّ الحادّ على حدود مربّعة، لإحساس بالعمق. راجع .dish-card-media. */
  overflow: visible;
  text-align: start;
  background: var(--surface-1);
  border: 1px solid rgb(var(--gold-ink) / 0.12);
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.dish-card:hover,
.dish-card:focus-within {
  background: rgb(var(--gold-ink) / 0.08);
  border-color: rgb(var(--gold-ink) / 0.32);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  /* الصورة البارزة تعلو بطاقات الصفّ التالي أثناء المرور بدل أن تُقصّ خلفها */
  z-index: 2;
}

/* الضغط يُغرز البطاقة قليلًا — نفس إحساس الضغط في بنّاء طلبات لوحة التحكم */
.dish-card:active { transform: translateY(-1px) scale(0.985); }

/* البطاقة في السلة: حافة ذهبية صريحة تُميّزها في الشبكة بلمحة */
.dish-card.is-in {
  border-color: rgb(var(--gold-ink) / 0.55);
  background: rgb(var(--gold-ink) / 0.1);
}

.dish-card.is-unavailable { opacity: 0.5; pointer-events: none; }

/* زر فتح التفاصيل — يملأ البطاقة (الصورة + النص) بلا خلفية خاصة به.
   flex:1 يجعله يبتلع الارتفاع الزائد حين تمدّد الشبكة البطاقة لتساوي
   جارتها، فيبقى صفّ السعر أسفلها تمامًا في كل الحالات. */
.dish-open {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.dish-open:focus-visible { outline: 2px solid rgb(var(--gold-ink) / 0.6); outline-offset: -2px; }

/* صورة الطبق — إطار 4:3 ثابت الأبعاد لكل بطاقة (بصورة أو ببليس هولدر،
   راجع .dish-ph تحت)، فتبقى الشبكة متّسقة الارتفاع بصرف النظر عمّا إذا
   كانت الصورة موجودة. object-fit:contain (لا cover) لأن الصور مقصوصة
   الخلفية (شفافة) أصلًا — نفس أسلوب بطاقات لوحة التحكم بالضبط، والتكبير
   الخفيف + overflow:visible يتيحان للطبق "الخروج" قليلًا من حدود إطاره. */
.dish-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: visible;
  border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0;
  background: linear-gradient(155deg,
    rgb(var(--gold-ink) / 0.16), rgb(var(--gold-ink) / 0.05));
}

/* زوايا ذهبية زخرفية دقيقة — لمسة "إطار" أنيقة بلا حدّ سميك، مستوحاة من
   بطاقات لوحة التحكم (بند التفاصيل الزخرفية). */
.dish-card-media::before,
.dish-card-media::after,
.dish-hero::before,
.dish-hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  pointer-events: none;
  border: 1.5px solid rgb(var(--gold-ink) / 0.45);
}
.dish-card-media::before,
.dish-hero::before {
  top: 9px; inset-inline-start: 9px;
  border-inline-end: none; border-bottom: none;
  border-start-start-radius: 5px;
}
.dish-card-media::after,
.dish-hero::after {
  bottom: 9px; inset-inline-end: 9px;
  border-inline-start: none; border-top: none;
  border-end-end-radius: 5px;
}

.dish-card-media img.dish-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.08);
  opacity: 0;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(58, 36, 21, 0.24));
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] .dish-card-media img.dish-photo { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }

.dish-card-media img.dish-photo.is-loaded { opacity: 1; }

/* رفع + تكبير خفيفان عند المرور بالمؤشر فقط — الأجهزة اللمسية تبقى ثابتة
   تمامًا (لا حدث hover حقيقي عليها أصلًا، لكن الاستثناء صريح تحسّبًا) */
@media (hover: hover) and (pointer: fine) {
  .dish-card:hover .dish-card-media img.dish-photo.is-loaded {
    transform: scale(1.13) translateY(-3px);
  }
}

/* بليس هولدر قصر اليمن — بنفس أبعاد إطار الصورة العادية بالضبط (أساس
   الاتساق المطلوب)، ظاهر افتراضيًا ويختفي فقط حين تُحمَّل صورة حقيقية
   بنجاح، عبر محدّد شقيق CSS بلا أي منطق JS. مصدر الصورة نفسه (imageUrl
   أو assets/menu-images/{id}) يبقى متّصلًا ديناميكيًا ببيانات الطبق —
   هذا العنصر شعار واجهة ثابت، لا بيانات طبق. */
.dish-ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  transition: opacity 0.25s ease;
}

img.is-loaded ~ .dish-ph { opacity: 0; }

.dish-ph-logo { width: 32%; max-width: 60px; opacity: 0.3; }

html:not([data-theme="dark"]) .dish-ph-logo { filter: brightness(0) opacity(0.2); }
html[data-theme="dark"] .dish-ph-logo { opacity: 0.22; }

.badge-3d {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 4;
  padding: 3px 8px;
  border-radius: var(--card-radius-pill);
  color: var(--bg-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.badge-soldout {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 4;
  padding: 3px 9px;
  border-radius: var(--card-radius-pill);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: rgba(58, 36, 21, 0.85);
}

.dish-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 13px 9px;
  flex: 1 1 auto;
  /* اسم سطر + وصف سطرين تقريبًا — يمنح كل بطاقات الشبكة نفس الإحساس
     بالاتساق بصرف النظر عن طول نصّ جارتها في نفس الصفّ */
  min-height: 78px;
}

.dish-card-body h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
}

.dish-card-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* صفّ السعر + الإضافة — صفّ عادي في تدفّق البطاقة، لا طبقة مطلقة فوقها.
   الطبقة المطلقة كانت تتراكب مع منطقة فتح التفاصيل في البطاقات القصيرة
   (الأطباق بلا صورة) فيسرق زرّ الكمية ضغطةً مقصودة للتفاصيل.
   .dish-open المرن يدفع هذا الصفّ إلى الأسفل، فتبقى الأزرار متحاذية عبر
   الشبكة بلا أي تراكب. */
.dish-card-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 13px 12px;
}

.dish-card-price {
  color: var(--gold-2);
  font-size: 14px;
  font-weight: 800;
  unicode-bidi: isolate;
}

/* زر الإضافة السريعة — إضافة مباشرة بلا فتح التفاصيل */
.qa {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--bg-dark);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  border: 0;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgb(var(--gold-ink) / 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.qa:hover { transform: scale(1.08); }
.qa:active { transform: scale(0.9); }
.qa:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* بعد الإضافة يتحوّل مكان الـ+ إلى تحكّم كمية − ١ + */
.card-step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--card-radius-pill);
  background: var(--surface-3);
  border: 1px solid rgb(var(--gold-ink) / 0.4);
}

.card-step button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--gold-2);
  background: none;
  border: 0;
  border-radius: 50%;
  transition: background 0.18s ease;
}

.card-step button:hover { background: rgb(var(--gold-ink) / 0.16); }
.card-step button:active { transform: scale(0.88); }

.card-step b {
  min-width: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  unicode-bidi: isolate;
}

/* ارتجافة تأكيد قصيرة عند الإضافة — الـFeedback السريع المطلوب */
@keyframes yp-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.yp-pop { animation: yp-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1); }

.list-state {
  margin: 20px 0 4px;
  color: var(--text-secondary);
  font-size: 12.5px;
  text-align: center;
}

.list-state:empty { display: none; }


/* ════════════════════════════════════════════════════════════
   لوح تفاصيل الطبق — لوح سفلي فوق المنيو (Bottom Sheet)، لا صفحة مستقلة.
   المنيو يبقى مرئيًا خلف اللوح عبر dish-panel-backdrop (تدرّج، لا خلفية
   مصمتة) — اللوح نفسه لا يمتد لأعلى الشاشة فيبقى شريط من المنيو مكشوفًا
   دائمًا فوقه.
   ════════════════════════════════════════════════════════════ */

.dish-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--overlay-soft) 55%,
    var(--overlay-strong) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 360ms;
}

.dish-panel-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dish-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  /* يترك شريطًا من المنيو مكشوفًا فوق اللوح دائمًا، بصرف النظر عن الطول */
  max-height: calc(100dvh - 110px);
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius-xl) var(--card-radius-xl) 0 0;
  background: var(--bg-dark);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 360ms;
}

.dish-panel.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.dish-panel-handle {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 64px;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}

.dish-panel-handle-bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--on-surface-subtle);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.dish-panel-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--gold-2);
  font-size: 24px;
  line-height: 1;
  background: var(--surface-3);
  border: 1px solid var(--gold-border);
  cursor: pointer;
}

.dish-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
}

/* ── Hero ──
   نفس منطق بطاقة الشبكة بالضبط: contain (لا cover) لأن الصور مقصوصة
   الخلفية، overflow:visible ليخرج الطبق قليلًا عن حدود إطاره، وبليس
   هولدر بنفس الأبعاد حين لا توجد صورة. لا تدرّج قاتم فوق الصورة — لا نصّ
   يقع فوقها أصلًا (الاسم والوصف أسفلها في .dish-body)، فالصورة تبقى
   واضحة التفاصيل ومهيمنة بصريًا كما هو مطلوب. */
.dish-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: visible;
  background: linear-gradient(155deg,
    rgb(var(--gold-ink) / 0.16), rgb(var(--gold-ink) / 0.05));
  border-bottom: 1px solid rgb(var(--gold-ink) / 0.14);
}

.dish-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.06);
  opacity: 0;
  z-index: 2;
  filter: drop-shadow(0 10px 20px rgba(58, 36, 21, 0.26));
  transition: opacity 0.35s ease;
}

html[data-theme="dark"] .dish-hero-img { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)); }

.dish-hero-img.is-loaded { opacity: 1; }

.dish-hero .dish-ph-logo { max-width: 96px; }

.dish-hero-badge {
  position: absolute;
  bottom: 14px;
  inset-inline-start: 16px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: var(--card-radius-pill);
  color: var(--bg-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

/* ── جسم اللوح ── */

.dish-body {
  padding: 18px 20px 8px;
}

.dish-body .eyebrow {
  margin-bottom: 4px;
  color: var(--gold-2);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.dish-body h2 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
}

.dish-description {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
}

.dish-price {
  display: block;
  margin-bottom: 14px;
  color: var(--gold-2);
  font-size: 20px;
  font-weight: 800;
}

/* خيارات الحجم / الطهي */
.dish-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* display:flex له نفس خصوصية [hidden] الافتراضية من المتصفح، والأنماط
   المؤلَّفة تتغلب على أنماط المتصفح دائمًا — فيبقى العنصر ظاهرًا رغم hidden
   ما لم نرفع الخصوصية صراحةً هنا. */
.dish-variants[hidden] { display: none; }

.variant-chip {
  padding: 7px 13px;
  border-radius: var(--card-radius-pill);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  background: rgb(var(--gold-ink) / 0.08);
  border: 1px solid rgb(var(--gold-ink) / 0.18);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.variant-chip.is-active {
  color: var(--bg-dark);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  border-color: transparent;
}

/* ── شبكة المعلومات ── وقت التحضير / الحرارة / السعرات فقط — الحساسية
   لها قسم شرائح مستقل أدناه (قائمة لا قيمة رقمية واحدة). كل خلية تُخفى
   بـ[hidden] من main-menu.js حين حقلها فارغ في لوحة التحكم، فالشبكة
   تعرض ١ إلى ٣ خلايا بعرض متساوٍ — لا خلايا شبح فارغة أبدًا. */

.dish-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.dish-info-grid[hidden] { display: none; }

/* خلفية أغمق قليلًا من سطح اللوح + حدّ أوضح، حتى تُقرأ بوضوح لا كخلفية
   شبه شفافة تكاد تندمج بالسطح خلفها. */
.dish-info {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: var(--card-radius-md);
  background: rgb(var(--gold-ink) / 0.13);
  border: 1px solid rgb(var(--gold-ink) / 0.26);
}

.dish-info[hidden] { display: none; }

.info-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 800;
}

.clock-icon {
  border: 1px solid rgb(var(--gold-ink) / 0.55);
  border-radius: 50%;
}

.clock-icon::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 7px;
  left: 10px;
  top: 4px;
  background: var(--gold-2);
  border-radius: 2px;
}

.clock-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 1px;
  left: 10px;
  top: 11px;
  background: var(--gold-2);
  border-radius: 2px;
  transform: rotate(28deg);
  transform-origin: left center;
}

.pepper-icon::before {
  content: "";
  display: block;
  width: 8px;
  height: 15px;
  border-radius: 8px 8px 10px 10px;
  background: linear-gradient(180deg, #f6c08d, #c96d45);
  transform: rotate(28deg);
  box-shadow: 0 0 8px rgb(var(--gold-ink) / 0.28);
}

.pepper-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 4px;
  top: 1px;
  right: 4px;
  border-top: 2px solid #ddb06a;
  border-radius: 50%;
  transform: rotate(-20deg);
}

.kcal-icon {
  font-size: 8px;
  letter-spacing: 0;
  border: 1px solid rgb(var(--gold-ink) / 0.36);
  border-radius: 50%;
}

/* التسمية والقيمة كلاهما بحبر داكن أساسي (لا --text-secondary الباهت) —
   الوضوح هنا أهم من التمايز الهرمي بين تسمية وقيمة، فكلاهما معلومة مهمة
   يقرأها العميل بسرعة (حساسية، وقت تحضير…). */
.info-label {
  color: var(--text-primary);
  opacity: 0.75;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
}

.dish-info small {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

/* ── قوائم معلومات إضافية (مكوّنات / حساسية) ── شرائح للقراءة فقط، بلا
   صندوق حدودي يشبه حقل إدخال (بند: لا يجب أن يبدو الأمر قابلًا للتحرير) —
   عنوان صغير فوق صفّ شرائح، تمامًا كأسلوب .dish-variants الأعلى. */
.meta-block { margin-bottom: 16px; }
.meta-block[hidden] { display: none; }

.meta-block-title {
  margin: 0 0 8px;
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--card-radius-pill);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  background: rgb(var(--gold-ink) / 0.1);
  border: 1px solid rgb(var(--gold-ink) / 0.2);
  unicode-bidi: isolate;
}

/* شرائح الحساسية بلمسة تحذيرية دافئة تُميّزها فورًا عن شرائح المكوّنات
   المحايدة — معلومة سلامة، لا مجرّد وصف. */
.meta-block.is-warn .chip {
  color: #a5341f;
  background: rgba(230, 126, 34, 0.14);
  border-color: rgba(230, 126, 34, 0.34);
}

html[data-theme="dark"] .meta-block.is-warn .chip { color: #f6c08d; }

.dish-ar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

/* نفس ملاحظة .dish-variants[hidden] أعلاه في الملف */
.dish-ar-actions[hidden] { display: none; }




/* ── شاشات قصيرة ── */

@media (max-height: 720px) {
  .dish-body h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .dish-panel,
  .dish-panel-backdrop,
  .dish-card,
  .order-sheet,
  .order-sheet-backdrop,
  .cart-bar,
  .yp-ar { transition-duration: 0.01ms; }
  .yp-pop { animation: none; }
}


/* ════════════════════════════════════════════════════════════
   الطلب — ملاحظة الطبق، تذييل اللوح، شريط السلة، لوح الطلب
   كلها مبنية على رموز الثيم نفسها (--gold-*/--surface-*) فتتبع
   الوضعين الفاتح والداكن ومبدّل اللغة بلا قواعد خاصة.
   ════════════════════════════════════════════════════════════ */

/* ── ملاحظة للمطبخ داخل تفاصيل الطبق ── */

.dish-note-block {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dish-note-block label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.dish-note-block input,
.os-field input,
.os-field select,
.cart-line-note {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13.5px;
  background: var(--surface-2);
  border: 1px solid rgb(var(--gold-ink) / 0.2);
  border-radius: var(--card-radius-md);
  outline: none;
  transition: border-color var(--transition);
}

.dish-note-block input::placeholder,
.os-field input::placeholder,
.cart-line-note::placeholder { color: var(--text-secondary); opacity: 0.7; }

.dish-note-block input:focus-visible,
.os-field input:focus-visible,
.os-field select:focus-visible,
.cart-line-note:focus-visible { border-color: rgb(var(--gold-ink) / 0.6); }

/* ── تذييل لوح التفاصيل: الكمية + الإضافة ── */

.dish-panel-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--bg-dark);
  border-top: 1px solid rgb(var(--gold-ink) / 0.18);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.16);
}

.qty-step {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--card-radius-pill);
  background: var(--surface-2);
  border: 1px solid rgb(var(--gold-ink) / 0.28);
}

.qty-step button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--gold-2);
  background: none;
  border: 0;
  border-radius: 50%;
  transition: background 0.18s ease;
}

.qty-step button:hover { background: rgb(var(--gold-ink) / 0.16); }
.qty-step button:active { transform: scale(0.88); }

.qty-step b {
  min-width: 26px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  unicode-bidi: isolate;
}

.add-to-cart {
  flex: 1 1 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
}

.atc-total {
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(0, 0, 0, 0.22);
  unicode-bidi: isolate;
}

/* ── شريط السلة الثابت ── */

.cart-bar {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 80;
  max-width: 620px;
  margin: 0 auto;
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--bg-dark);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  border: 0;
  border-radius: var(--card-radius-pill);
  box-shadow: 0 10px 30px rgb(var(--gold-ink) / 0.42), var(--shadow-soft);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.cart-bar[hidden] { display: none; }
.cart-bar:hover { transform: translateY(-2px); }
.cart-bar:active { transform: translateY(0) scale(0.985); }

.cb-badge {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--gold-1);
  background: rgba(38, 22, 10, 0.86);
  border-radius: var(--card-radius-pill);
  unicode-bidi: isolate;
}

.cb-text { flex: 1 1 auto; text-align: start; }
.cb-total { flex: none; unicode-bidi: isolate; }

/* ── لوح الطلب (السلة → البيانات → المراجعة → التأكيد) ── */

.order-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--overlay-strong);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
}

.order-sheet-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.order-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 105;
  max-width: 620px;
  margin: 0 auto;
  max-height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  border: 1px solid rgb(var(--gold-ink) / 0.18);
  border-bottom: 0;
  border-radius: var(--card-radius-xl) var(--card-radius-xl) 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 340ms;
}

.order-sheet.is-visible { visibility: visible; transform: translateY(0); }

.order-sheet-head {
  flex: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgb(var(--gold-ink) / 0.16);
}

.order-sheet-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.os-back,
.os-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--gold-2);
  background: var(--surface-2);
  border: 1px solid rgb(var(--gold-ink) / 0.22);
  border-radius: 50%;
}

.os-back[hidden] { visibility: hidden; display: grid; } /* يحفظ مكان العمود */
html[dir="rtl"] .os-back { transform: scaleX(-1); }

.order-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 4px;
}

.order-sheet-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-top: 1px solid rgb(var(--gold-ink) / 0.16);
}

.order-sheet-foot:empty { display: none; }

.os-primary,
.os-secondary {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  border-radius: var(--card-radius-md);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.os-primary {
  color: var(--bg-dark);
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  border: 0;
  box-shadow: 0 8px 22px rgb(var(--gold-ink) / 0.36);
}

.os-secondary {
  color: var(--gold-2);
  background: var(--surface-2);
  border: 1px solid rgb(var(--gold-ink) / 0.28);
}

.os-primary:active,
.os-secondary:active { transform: scale(0.985); }

/* الزر المعطّل أثناء الإرسال — يمنع الإرسال المكرر بصريًا وفعليًا */
.os-primary:disabled,
.os-secondary:disabled { opacity: 0.55; cursor: progress; }

/* ── سطر داخل السلة ── */

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 11px 12px;
  margin-bottom: 9px;
  background: var(--surface-1);
  border: 1px solid rgb(var(--gold-ink) / 0.14);
  border-radius: var(--card-radius-md);
}

.cl-main { min-width: 0; }

.cl-name {
  display: block;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.cl-unit {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11.5px;
  unicode-bidi: isolate;
}

.cl-sum {
  color: var(--gold-2);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.cl-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cl-del {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid rgb(var(--gold-ink) / 0.18);
  border-radius: 50%;
  transition: color var(--transition), border-color var(--transition);
}

.cl-del:hover { color: #c0392b; border-color: rgba(192, 57, 43, 0.5); }

.cart-line-note {
  grid-column: 1 / -1;
  height: 38px;
  font-size: 12.5px;
}

/* ── حقول الخطوة الثانية (الاسم والطاولة) ── */

.os-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.os-field label {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.os-hint {
  margin: -6px 0 14px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
}

.os-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: #a5341f;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(192, 57, 43, 0.12);
  border: 1px solid rgba(192, 57, 43, 0.34);
  border-radius: var(--card-radius-sm);
}

html[data-theme="dark"] .os-error { color: #ff9c85; }

.os-empty {
  margin: 26px 0;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

/* ── المراجعة والإجمالي ── */

.os-review {
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-1);
  border: 1px solid rgb(var(--gold-ink) / 0.14);
  border-radius: var(--card-radius-md);
}

.os-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}

.os-row span:first-child { color: var(--text-secondary); }
.os-row span:last-child { color: var(--text-primary); font-weight: 700; unicode-bidi: isolate; }

.os-row.is-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgb(var(--gold-ink) / 0.2);
  font-size: 15px;
}

.os-row.is-total span:last-child { color: var(--gold-2); font-weight: 900; }

.os-review-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgb(var(--gold-ink) / 0.16);
  font-size: 13px;
}

.os-review-item:last-child { border-bottom: 0; }
.os-review-item .ri-name { color: var(--text-primary); font-weight: 700; min-width: 0; }
.os-review-item .ri-note {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
}
.os-review-item .ri-qty {
  flex: none;
  color: var(--gold-2);
  font-weight: 800;
  unicode-bidi: isolate;
}

.os-sec-title {
  margin: 4px 0 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ── شاشة النجاح ── */

.os-success { text-align: center; padding: 12px 0 4px; }

.os-success .tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--bg-dark);
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  border-radius: 50%;
  box-shadow: 0 10px 28px rgb(var(--gold-ink) / 0.4);
  animation: yp-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.os-success h3 {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 19px;
  font-weight: 800;
}

.os-success .os-sub {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.os-order-no {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 18px;
  color: var(--gold-2);
  font-size: 20px;
  font-weight: 900;
  background: var(--surface-1);
  border: 1px solid rgb(var(--gold-ink) / 0.28);
  border-radius: var(--card-radius-pill);
  unicode-bidi: isolate;
}

.os-warn {
  margin: 0 0 12px;
  color: #b1600f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

html[data-theme="dark"] .os-warn { color: #f0b357; }

/* ── تنبيه عائم قصير (تمت الإضافة) ── */

.yp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  z-index: 120;
  transform: translate(-50%, 14px);
  max-width: min(90vw, 380px);
  padding: 11px 18px;
  color: var(--bg-dark);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  border-radius: var(--card-radius-pill);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* لوح الطلب يشغل أسفل الشاشة، فالتنبيه ينتقل إلى الأعلى بدل أن يغطّي
   زرّ «متابعة الطلب» — أهم زر في الشاشة لا يصحّ حجبه ولو لثانية. */
body.order-open .yp-toast {
  bottom: auto;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  transform: translate(-50%, -14px);
}
body.order-open .yp-toast.is-visible { transform: translate(-50%, 0); }

/* ── تابلت وكمبيوتر ── */

@media (min-width: 640px) {
  .dish-card-body h3 { font-size: 15px; }
  .dish-card-price { font-size: 15px; }
  .qa { width: 38px; height: 38px; font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════
   UI/UX REFRESH 2026-08 — Customer Menu
   المصدر البصري: apps/shared/tokens.css + بطاقات Admin Menu.
   هذا القسم متعمّد أن يكون في نهاية الملف ليعمل كطبقة ترقية بصرية
   من دون كسر منطق السلة/Firestore/AR الموجود مسبقًا.
   ════════════════════════════════════════════════════════════ */

/* ── ربط هوية لوحة التحكم بالمنيو ── */
.menu-screen {
  overflow-x: clip;
  color: var(--yp-text-0);
  font-family: var(--yp-font-body);
  background: var(--yp-bg-1);
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  background: var(--yp-page-bg);
}

.menu-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--yp-pattern);
  background-repeat: repeat;
  background-size: 110px 110px;
  opacity: var(--yp-pattern-opacity);
  pointer-events: none;
}

.pattern-strip { display: none; }

/* ── Top bar: أخف، أقرب لزجاج لوحة التحكم ── */
.menu-topbar {
  grid-template-columns: 48px 1fr 142px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px;
  background: linear-gradient(180deg,
    rgb(250 245 232 / .82) 0%,
    rgb(250 245 232 / .54) 70%,
    transparent 100%);
  border-bottom: 1px solid rgb(var(--yp-gold-rgb) / .08);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

html[data-theme="dark"] .menu-topbar {
  background: linear-gradient(180deg,
    rgb(18 8 4 / .88) 0%,
    rgb(18 8 4 / .58) 70%,
    transparent 100%);
}

.icon-btn,
.theme-toggle,
.language-switcher {
  background: var(--yp-surface-glass);
  border-color: var(--yp-surface-glass-border);
  box-shadow: var(--yp-surface-glass-shadow);
  backdrop-filter: var(--yp-glass-blur);
  -webkit-backdrop-filter: var(--yp-glass-blur);
}

.icon-btn,
.theme-toggle { color: var(--yp-gold-500); }

.menu-topbar-logo { height: 36px; }

.language-option {
  color: var(--yp-text-2);
  min-height: 34px;
  padding: 7px 11px;
}

.language-option.active {
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
  box-shadow: 0 5px 14px rgb(var(--yp-gold-rgb) / .22), var(--yp-inner-light);
}

/* ── مساحة المحتوى: تستفيد من الكمبيوتر بدل عمود ضيق في المنتصف ── */
.menu-content {
  max-width: 1180px;
  padding: calc(env(safe-area-inset-top, 0px) + 86px) 22px
           calc(env(safe-area-inset-bottom, 0px) + 50px);
}

body.has-cart .menu-content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 118px);
}

/* البحث + الأقسام سطح واحد sticky: خطوة واحدة واضحة قبل الأطباق */
.menu-nav-surface {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  z-index: var(--yp-z-sticky);
  margin: 0 0 24px;
  padding: 10px;
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-xl);
  background: var(--yp-surface-glass);
  box-shadow: var(--yp-shadow-sm), var(--yp-inner-light);
  backdrop-filter: var(--yp-glass-blur);
  -webkit-backdrop-filter: var(--yp-glass-blur);
}

.menu-search {
  position: relative;
  margin: 0 0 9px;
}

.menu-search-icon {
  position: absolute;
  inset-inline-start: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--yp-gold-500);
  pointer-events: none;
}

.menu-search-icon svg { width: 100%; height: 100%; display: block; }

.menu-search input {
  height: 46px;
  padding-inline: 44px 16px;
  color: var(--yp-text-0);
  font-size: 13.5px;
  font-weight: 600;
  background: rgb(var(--yp-gold-rgb) / .045);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-pill);
  box-shadow: var(--yp-inner-light);
}

.menu-search input::placeholder { color: var(--yp-text-2); opacity: .82; }
.menu-search input:focus-visible {
  background: rgb(var(--yp-gold-rgb) / .075);
  border-color: var(--yp-line-strong);
  box-shadow: var(--yp-glow-gold);
}

.cat-rail {
  gap: 7px;
  margin: 0;
  padding: 0 2px 1px;
  scroll-snap-type: x proximity;
}

.cat-chip {
  min-height: 36px;
  padding: 7px 14px;
  scroll-snap-align: center;
  color: var(--yp-text-2);
  font-size: 12px;
  font-weight: 700;
  background: var(--yp-glass-soft);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-pill);
  transition: transform var(--yp-dur-fast) var(--yp-ease-out),
              border-color var(--yp-dur-fast),
              background var(--yp-dur-fast), color var(--yp-dur-fast);
}

.cat-chip:hover {
  transform: translateY(var(--yp-lift-hover-sm));
  color: var(--yp-text-0);
  border-color: var(--yp-line-strong);
}

.cat-chip.is-active {
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
  border-color: transparent;
  box-shadow: 0 5px 14px rgb(var(--yp-gold-rgb) / .22), var(--yp-inner-light);
}

/* ── أقسام + شبكة: 2 / 3 / 4 فقط، بلا خمسة أعمدة مزدحمة ── */
.dish-grid { scroll-margin-top: 165px; }

.cat-heading {
  margin: 26px 4px 12px;
  color: var(--yp-gold-700);
  font-family: var(--yp-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.cat-heading::after {
  content: "";
  display: inline-block;
  width: 52px;
  height: 1px;
  margin-inline-start: 10px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgb(var(--yp-gold-rgb) / .5), transparent);
}

.cat-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

@media (min-width: 700px) {
  .cat-group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
}

@media (min-width: 1040px) {
  .cat-group { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; }
}

/* ── بطاقة الطبق الجديدة ──
   الطبق هو البطل بصريًا؛ المستطيل الزجاجي الصغير خلف الجزء السفلي فقط.
   لا "صندوق أبيض" طويل حول الصورة، ولا ضغط للمشروبات/الوصف. */
.dish-card {
  isolation: isolate;
  min-width: 0;
  min-height: 278px;
  padding-top: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.dish-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 6px;
  top: 112px;
  bottom: 0;
  border: 1px solid var(--yp-line);
  border-radius: var(--yp-radius-lg);
  background: var(--yp-surface-glass);
  box-shadow: var(--yp-shadow-sm), var(--yp-inner-light);
  backdrop-filter: var(--yp-glass-blur);
  -webkit-backdrop-filter: var(--yp-glass-blur);
  transition: transform var(--yp-dur-base) var(--yp-ease-out),
              border-color var(--yp-dur-base), box-shadow var(--yp-dur-base);
}

.dish-card:hover,
.dish-card:focus-within {
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover::before,
  .dish-card:focus-within::before {
    transform: translateY(var(--yp-lift-hover-sm));
    border-color: var(--yp-line-strong);
    box-shadow: var(--yp-shadow), 0 0 24px rgb(var(--yp-gold-rgb) / .10), var(--yp-inner-light);
  }
}

.dish-card:active { transform: scale(.992); }

.dish-card.is-in::before {
  border-color: var(--yp-line-strong);
  box-shadow: var(--yp-shadow-sm), var(--yp-glow-gold), var(--yp-inner-light);
}

.dish-card.is-unavailable { opacity: .52; }

.dish-open {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.dish-card-media {
  height: 154px;
  aspect-ratio: auto;
  margin: 0 8px -16px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  border: 0;
}

/* إطار الزوايا يمسك الطبق بصريًا من دون أن يحاصره */
.dish-card-media::before,
.dish-card-media::after {
  width: 18px;
  height: 18px;
  border-color: rgb(var(--yp-gold-rgb) / .58);
}

.dish-card-media::before { top: 9px; inset-inline-start: 5px; }
.dish-card-media::after  { bottom: 15px; inset-inline-end: 5px; }

.dish-card-media img.dish-photo {
  transform: scale(1.10) translateY(-2px);
  filter: drop-shadow(0 13px 16px rgba(95, 50, 25, .23));
  transition: opacity .28s ease,
              transform var(--yp-dur-slow) var(--yp-ease-out),
              filter var(--yp-dur-slow) var(--yp-ease-out);
}

html[data-theme="dark"] .dish-card-media img.dish-photo {
  filter: drop-shadow(0 13px 18px rgba(0, 0, 0, .48));
}

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover .dish-card-media img.dish-photo.is-loaded {
    transform: scale(1.16) translateY(-9px);
    filter: drop-shadow(0 18px 20px rgba(95, 50, 25, .28));
  }
  html[data-theme="dark"] .dish-card:hover .dish-card-media img.dish-photo.is-loaded {
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .56));
  }
}

.dish-ph {
  inset: 14px 22px 22px;
  border-radius: var(--yp-radius-md);
  background: var(--yp-glass-soft);
  border: 1px dashed var(--yp-line-soft);
}

.dish-ph-logo {
  width: 36%;
  max-width: 74px;
  opacity: .28;
}

/* AR = أيقونة وظيفة حقيقية، وليست كلمة عائمة فقط */
.badge-3d,
.dish-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
  border: 1px solid rgb(255 255 255 / .24);
  box-shadow: 0 5px 14px rgb(var(--yp-gold-rgb) / .26), var(--yp-inner-light);
}

.badge-3d {
  top: 8px;
  inset-inline-end: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--yp-radius-pill);
  font-size: 10px;
}

.badge-3d svg,
.dish-hero-badge svg { width: 15px; height: 15px; display: block; }

.badge-soldout {
  top: 8px;
  inset-inline-start: 6px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--yp-radius-pill);
  background: rgb(63 35 16 / .84);
  backdrop-filter: blur(10px);
}

.dish-card-body {
  position: relative;
  z-index: 2;
  min-height: 82px;
  gap: 5px;
  padding: 22px 18px 7px;
}

.dish-card-body h3 {
  color: var(--yp-text-0);
  font-family: var(--yp-font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dish-card-body p {
  color: var(--yp-text-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.52;
  -webkit-line-clamp: 2;
}

.dish-card-foot {
  position: relative;
  z-index: 2;
  min-height: 50px;
  gap: 10px;
  padding: 4px 18px 12px;
}

.dish-card-price {
  color: var(--yp-gold-700);
  font-size: 15px;
  font-weight: 900;
}

.qa {
  width: 38px;
  height: 38px;
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
  box-shadow: 0 5px 13px rgb(var(--yp-gold-rgb) / .26), var(--yp-inner-light);
}

.card-step {
  min-height: 38px;
  padding: 2px;
  background: var(--yp-glass-soft);
  border-color: var(--yp-line);
}

.card-step button { color: var(--yp-gold-700); }
.card-step b { color: var(--yp-text-0); }

/* ════════════════════════════════════════════
   تفاصيل الطبق — Desktop dialog صغير / Mobile bottom sheet
   ════════════════════════════════════════════ */
.dish-panel-backdrop {
  background: var(--yp-scrim);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.dish-panel {
  background: var(--yp-surface-glass);
  border: 1px solid var(--yp-line);
  box-shadow: var(--yp-shadow), var(--yp-inner-light);
  backdrop-filter: var(--yp-glass-blur);
  -webkit-backdrop-filter: var(--yp-glass-blur);
}

.dish-panel-scroll {
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--yp-gold-rgb) / .35) transparent;
}

.dish-panel-scroll::-webkit-scrollbar { width: 6px; height: 0; }
.dish-panel-scroll::-webkit-scrollbar-thumb {
  background: rgb(var(--yp-gold-rgb) / .32);
  border-radius: 999px;
}
.dish-panel-scroll::-webkit-scrollbar-track { background: transparent; }

.dish-panel-close {
  color: var(--yp-gold-700);
  background: var(--yp-surface-glass);
  border-color: var(--yp-line);
  box-shadow: var(--yp-shadow-sm), var(--yp-inner-light);
  backdrop-filter: var(--yp-glass-blur);
  -webkit-backdrop-filter: var(--yp-glass-blur);
}

.dish-hero {
  min-width: 0;
  height: min(34dvh, 270px);
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--yp-glass-soft);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-xl);
}

.dish-hero::before,
.dish-hero::after {
  width: 20px;
  height: 20px;
  border-color: rgb(var(--yp-gold-rgb) / .55);
}

.dish-hero-img {
  transform: scale(1.02);
  filter: drop-shadow(0 16px 22px rgba(95, 50, 25, .24));
}

html[data-theme="dark"] .dish-hero-img {
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .52));
}

.dish-hero-badge {
  bottom: 14px;
  inset-inline-start: 14px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: var(--yp-radius-pill);
  font-size: 11px;
}

.dish-body {
  min-width: 0;
  padding: 17px 18px 10px;
}

.dish-body .eyebrow {
  color: var(--yp-gold-700);
  font-size: 10.5px;
  font-weight: 800;
}

.dish-body h2 {
  color: var(--yp-text-0);
  font-family: var(--yp-font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  line-height: 1.25;
}

.dish-description {
  max-width: 62ch;
  color: var(--yp-text-2);
  font-size: 13px;
  line-height: 1.65;
}

.dish-price {
  color: var(--yp-gold-700);
  font-size: 20px;
  font-weight: 900;
}

.variant-chip {
  color: var(--yp-text-1);
  background: var(--yp-glass-soft);
  border-color: var(--yp-line-soft);
}
.variant-chip.is-active {
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
}

/* الأيقونات تعود كـSVG واضحة؛ نوقف أشكال CSS القديمة كي لا تتراكب */
.clock-icon::before,
.clock-icon::after,
.pepper-icon::before,
.pepper-icon::after { display: none; }

.clock-icon,
.kcal-icon { border: 0; }

.info-icon {
  width: 28px;
  height: 28px;
  color: var(--yp-gold-700);
}

.info-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.dish-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 16px;
}

.dish-info {
  min-width: 0;
  min-height: 92px;
  gap: 5px;
  padding: 12px 8px;
  background: var(--yp-glass-soft);
  border: 1px solid var(--yp-line);
  border-radius: var(--yp-radius-md);
  box-shadow: var(--yp-inner-light);
}

.info-label {
  color: var(--yp-text-2);
  opacity: 1;
  font-size: 9.5px;
  font-weight: 800;
}

.dish-info small {
  color: var(--yp-text-0);
  font-size: 12.5px;
  font-weight: 900;
}

.meta-block {
  margin-bottom: 15px;
  padding: 12px;
  background: rgb(var(--yp-gold-rgb) / .035);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-md);
}

.meta-block-title {
  color: var(--yp-gold-700);
  font-size: 10.5px;
  font-weight: 800;
}

.chip {
  color: var(--yp-text-1);
  background: var(--yp-glass-soft);
  border-color: var(--yp-line-soft);
}

.meta-block.is-warn {
  background: var(--yp-danger-bg);
  border-color: var(--yp-danger-bd);
}

.meta-block.is-warn .chip {
  color: var(--yp-danger);
  background: rgb(255 255 255 / .16);
  border-color: var(--yp-danger-bd);
}

.dish-ar-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 2px;
}

.dish-note-block { margin-top: 14px; }
.dish-note-block label { color: var(--yp-text-2); font-weight: 700; }

.dish-note-block input,
.os-field input,
.os-field select,
.cart-line-note {
  color: var(--yp-text-0);
  background: rgb(var(--yp-gold-rgb) / .045);
  border-color: var(--yp-line-soft);
  border-radius: var(--yp-radius-md);
}

.dish-note-block input::placeholder,
.os-field input::placeholder,
.cart-line-note::placeholder { color: var(--yp-text-2); }

.dish-panel-foot {
  gap: 10px;
  background: color-mix(in srgb, var(--yp-bg-2) 78%, transparent);
  border-top-color: var(--yp-line-soft);
  box-shadow: 0 -12px 30px rgba(95, 50, 25, .10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="dark"] .dish-panel-foot {
  background: rgb(18 8 4 / .82);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .22);
}

.qty-step {
  background: var(--yp-glass-soft);
  border-color: var(--yp-line);
}
.qty-step button { color: var(--yp-gold-700); }
.qty-step b { color: var(--yp-text-0); }

.add-to-cart,
.os-primary {
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
  box-shadow: 0 8px 22px rgb(var(--yp-gold-rgb) / .25), var(--yp-inner-light);
}

/* على الكمبيوتر: نافذة تفاصيل لا تتجاوز الشاشة ولا تأخذ عرضها كاملًا */
@media (min-width: 760px) {
  .dish-panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: min(960px, calc(100vw - 72px));
    max-height: min(760px, calc(100dvh - 96px));
    border-radius: var(--yp-radius-xl);
    transform: translate(-50%, calc(50% + 28px)) scale(.985);
    opacity: 0;
    transition: transform var(--yp-dur-slow) var(--yp-ease-spring),
                opacity var(--yp-dur-base), visibility var(--yp-dur-slow);
  }

  .dish-panel.is-visible {
    transform: translate(-50%, 50%) scale(1);
    opacity: 1;
  }

  .dish-panel-handle { display: none; }

  .dish-panel-scroll {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
    align-items: start;
    gap: 20px;
    padding: 20px 20px 16px;
  }

  .dish-hero {
    position: sticky;
    top: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: start;
  }

  .dish-body { padding: 12px 10px 4px 0; }
  html[dir="rtl"] .dish-body { padding: 12px 0 4px 10px; }

  .dish-panel-close {
    top: 12px;
    inset-inline-end: 12px;
  }

  .dish-panel-foot {
    padding-inline: 20px;
    border-radius: 0 0 var(--yp-radius-xl) var(--yp-radius-xl);
  }
}

/* موبايل: Bottom sheet مضغوط وصورة ليست نصف الشاشة */
@media (max-width: 759px) {
  .menu-content { padding-inline: 12px; }
  .menu-nav-surface {
    top: calc(env(safe-area-inset-top, 0px) + 68px);
    margin-inline: -2px;
    padding: 8px;
    border-radius: var(--yp-radius-lg);
  }

  .dish-panel {
    max-height: min(88dvh, 760px);
    border-radius: var(--yp-radius-xl) var(--yp-radius-xl) 0 0;
    border-bottom: 0;
  }

  .dish-panel-scroll {
    max-width: none;
    padding: 50px 12px 18px;
  }

  .dish-hero {
    width: 100%;
    height: min(30dvh, 230px);
    margin: 0 auto;
  }

  .dish-body { padding: 15px 4px 4px; }
  .dish-body h2 { font-size: 22px; }
  .dish-ar-actions { grid-template-columns: 1fr; }

  .dish-panel-close { top: 9px; inset-inline-end: 12px; }
  .dish-panel-handle { top: 8px; }
}

/* بطاقة موبايل أصغر لكن ما تزال غير مزدحمة */
@media (max-width: 520px) {
  .cat-group { gap: 16px 8px; }

  .dish-card {
    min-height: 250px;
  }

  .dish-card::before {
    inset-inline: 3px;
    top: 96px;
    border-radius: var(--yp-radius-md);
  }

  .dish-card-media {
    height: 132px;
    margin-inline: 2px;
    margin-bottom: -14px;
  }

  .dish-card-body {
    min-height: 80px;
    padding: 20px 12px 6px;
  }

  .dish-card-body h3 { font-size: 13.5px; }
  .dish-card-body p { font-size: 10.5px; -webkit-line-clamp: 2; }

  .dish-card-foot {
    min-height: 48px;
    padding: 3px 12px 10px;
  }

  .dish-card-price { font-size: 13.5px; }
  .qa { width: 34px; height: 34px; font-size: 20px; }

  .dish-info-grid { gap: 6px; }
  .dish-info { min-height: 86px; padding: 10px 5px; }
  .info-label { font-size: 8.5px; }
  .dish-info small { font-size: 11.5px; }
}

/* ── السلة / checkout بنفس سطح لوحة التحكم ── */
.cart-bar {
  max-width: 650px;
  min-height: 58px;
  color: var(--yp-on-gold);
  background: var(--yp-gold-fill);
  box-shadow: 0 12px 30px rgb(var(--yp-gold-rgb) / .30), var(--yp-inner-light);
}

.cb-badge {
  color: var(--yp-gold-100);
  background: rgb(63 35 16 / .88);
}

.order-sheet-backdrop {
  background: var(--yp-scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.order-sheet {
  background: var(--yp-surface-glass);
  border-color: var(--yp-line);
  box-shadow: var(--yp-shadow), var(--yp-inner-light);
  backdrop-filter: var(--yp-glass-blur);
  -webkit-backdrop-filter: var(--yp-glass-blur);
}

.order-sheet-head,
.order-sheet-foot { border-color: var(--yp-line-soft); }
.order-sheet-head h2 { color: var(--yp-text-0); }

.os-back,
.os-close,
.os-secondary {
  color: var(--yp-gold-700);
  background: var(--yp-glass-soft);
  border-color: var(--yp-line);
}

.cart-line,
.os-review {
  background: var(--yp-glass-soft);
  border-color: var(--yp-line-soft);
}

/* كل الحوارات تمنع أي scrollbar أفقي غير مقصود */
.dish-panel,
.order-sheet,
.yp-ar,
.dish-panel-scroll,
.order-sheet-scroll {
  overflow-x: hidden;
}


/* ════════════════════════════════════════════════════════════
   UI/UX REFRESH V2 — 2026-08-25
   ملاحظات العميل: توحيد مساحة الصورة والكرت، تفاصيل ثابتة، صور السلة،
   هيدر/فوتر أوضح، وتحسين نعومة تحميل الصور.
   ════════════════════════════════════════════════════════════ */

/* هيدر متماسك وشعار أوضح */
.menu-topbar {
  min-height: 78px;
  grid-template-columns: 52px minmax(0, 1fr) 158px;
  padding: calc(env(safe-area-inset-top, 0px) + 9px) 18px 9px;
  background: color-mix(in srgb, var(--yp-bg-2) 78%, transparent);
  border-bottom: 1px solid var(--yp-line-soft);
  box-shadow: 0 8px 28px rgb(95 50 25 / .06);
}
html[data-theme="dark"] .menu-topbar {
  background: rgb(18 8 4 / .82);
  box-shadow: 0 8px 28px rgb(0 0 0 / .16);
}

.menu-topbar-brand {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 56px;
}

.menu-topbar-logo {
  width: auto;
  height: 48px;
  max-width: 150px;
  object-fit: contain;
}

.menu-brand-subtitle {
  color: var(--yp-gold-700);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
}

.top-controls {
  top: calc(env(safe-area-inset-top, 0px) + 16px);
}

.menu-content {
  padding-top: calc(env(safe-area-inset-top, 0px) + 100px);
}

.menu-nav-surface {
  top: calc(env(safe-area-inset-top, 0px) + 86px);
}

/* البطاقة: مساحة الميديا = نفس عرض المستطيل الزجاجي بالضبط */
.dish-card {
  min-height: 282px;
  padding-top: 0;
}

.dish-card::before {
  inset-inline: 0;
  top: 118px;
}

.dish-open { width: 100%; }

.dish-card-media {
  width: 100%;
  height: 162px;
  margin: 0 0 -18px;
}

.dish-card-media::before { inset-inline-start: 0; }
.dish-card-media::after  { inset-inline-end: 0; }

/* زاوية الإطار السفلية تقع رياضيًا داخل نطاق البطاقة الزجاجية
   (::before تبدأ عند top:118px، بينما الزاوية تقع عند ~129px ضمن صورة
   ارتفاعها 162px) — فتظهر وكأنها "مقتحمة" على كرت الاسم/الوصف بدل أن
   تبقى ملاصقة لإطار الصورة وحده. الصورة نفسها يصحّ أن تتجاوز حدودها
   (التصميم المقصود)، لكن علامة الزاوية الزخرفية يجب أن تبقى خارج حدود
   كرت الاسم تمامًا؛ الأبسط والأثبت (بلا تنسيق أرقام هشّ بين قاعدتين) هو
   الاكتفاء بزاوية واحدة أعلى الصورة (آمنة دائمًا، بعيدة عن أي تراكب). */
.dish-card-media::after { display: none; }

.dish-ph {
  inset: 5px 0 20px;
  width: auto;
  border-radius: var(--yp-radius-lg);
}

.dish-card-body {
  padding-inline: 17px;
}

/* أُلغيت (V5): كانت تُبقي شبكة التفاصيل والمكوّنات والحساسية ظاهرة حتى
   بلا بيانات، فتُعرض "غير محدد بعد" في خمسة صناديق فارغة تدفع زر الطلب
   خارج شاشة الهاتف. الآن يُخفي fillDishPanel() ما لا قيمة له فعلًا،
   ويجب أن يحترم [hidden] هنا.
.dish-info-grid[hidden],
.dish-info[hidden],
#ingredientsBlock[hidden],
#allergyNote[hidden] {
  display: grid;
}
*/

.dish-info-grid {
  margin-top: 12px;
}

.chip.is-placeholder {
  color: var(--yp-text-2);
  background: transparent;
  border-style: dashed;
  opacity: .76;
}

.meta-block.is-warn .chip.is-placeholder {
  color: var(--yp-text-2);
  background: transparent;
  border-color: var(--yp-line-soft);
}

/* نافذة التفاصيل: عمود النص يستفيد من المساحة الموجودة تحت الاسم والوصف */
@media (min-width: 760px) {
  .dish-panel {
    width: min(920px, calc(100vw - 72px));
    max-height: min(720px, calc(100dvh - 90px));
  }

  .dish-panel-scroll {
    grid-template-columns: minmax(0, .94fr) minmax(390px, 1.06fr);
  }

  .dish-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .dish-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* صور السلة والمراجعة */
.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas:
    "media main sum"
    "media controls controls"
    "note note note";
  align-items: center;
  gap: 10px 12px;
}

.cl-media {
  grid-area: media;
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-md);
  background: var(--yp-glass-soft);
}

.cl-media .cl-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  opacity: 0;
  transition: opacity .18s ease;
}

.cl-media .cl-img.is-loaded { opacity: 1; }
.cl-media .dish-ph {
  inset: 0;
  border: 0;
  border-radius: inherit;
}
.cl-media .dish-ph-logo { max-width: 42px; }
.cl-media .cl-img.is-loaded ~ .dish-ph { opacity: 0; visibility: hidden; }

.cl-main { grid-area: main; }
.cl-sum { grid-area: sum; }
.cl-controls { grid-area: controls; justify-self: end; }
.cart-line-note { grid-area: note; width: 100%; }

.os-review-item.has-media {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.os-review-item.has-media .cl-media {
  width: 54px;
  height: 54px;
}

.os-review-item.has-media .ri-name { min-width: 0; }
.os-review-item.has-media .ri-qty { white-space: nowrap; }

/* فوتر بسيط ومتناسق مع الهوية */
.menu-footer {
  margin: 56px auto 8px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--yp-text-2);
  border-top: 1px solid var(--yp-line-soft);
}

.menu-footer-logo {
  width: auto;
  height: 36px;
  object-fit: contain;
  opacity: .74;
}

:root:not([data-theme="dark"]) .menu-footer-logo {
  filter: brightness(0) opacity(.62);
}

.menu-footer-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  line-height: 1.5;
}

.menu-footer-copy strong {
  color: var(--yp-text-0);
  font-family: var(--yp-font-display);
}

.menu-footer-dot { color: var(--yp-gold-500); }

@media (max-width: 759px) {
  .menu-topbar {
    min-height: 70px;
    grid-template-columns: 44px minmax(0, 1fr) 132px;
    padding-inline: 12px;
  }

  .menu-topbar-logo { height: 40px; max-width: 126px; }
  .menu-brand-subtitle { font-size: 7.5px; }
  .top-controls { top: calc(env(safe-area-inset-top, 0px) + 13px); }
  .menu-content { padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }
  .menu-nav-surface { top: calc(env(safe-area-inset-top, 0px) + 75px); }

  .cart-line {
    grid-template-columns: 62px minmax(0, 1fr) auto;
  }
  .cl-media { width: 62px; height: 62px; }

  .menu-footer {
    margin-top: 40px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .dish-card::before { inset-inline: 0; top: 98px; }
  .dish-card-media { width: 100%; height: 136px; margin-inline: 0; }
  .dish-ph { inset-inline: 0; }

  .cart-line {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "media main"
      "media sum"
      "controls controls"
      "note note";
  }
  .cl-media { width: 58px; height: 58px; }
  .cl-sum { justify-self: start; }
  .cl-controls { justify-self: stretch; justify-content: space-between; }
}


/* ════════════════════════════════════════════════════════════
   MENU REFRESH V3 — 2026-08-25
   توحيد الخلفية + Pattern/Placeholder المشتركين مع تطبيق الويتر
   + إزالة إطار الصورة القديم + شريط اسم/طاولة واضح.
   ════════════════════════════════════════════════════════════ */

/* الخلفية ثابتة مهما تغيّر الفلتر أو قصر المحتوى */
html,
body {
  min-height: 100%;
  background: var(--yp-bg-1);
}

body {
  min-height: 100dvh;
}

.menu-screen {
  min-height: 100dvh;
  background: var(--yp-page-bg);
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--yp-page-bg);
}

.menu-backdrop::before {
  background-image: url("../../assets/pattern.webp");
  background-repeat: repeat;
  background-size: 172px 172px;
  background-position: 20px 18px;
  opacity: .045;
}

html[data-theme="dark"] .menu-backdrop::before {
  opacity: .032;
}

/* استغلال أفضل للشاشات الواسعة */
.menu-content {
  max-width: 1360px;
}

/* ── شريط بيانات العميل والطاولة ── */
.menu-order-context {
  width: 100%;
  min-height: 52px;
  margin: -8px 0 22px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--yp-text-1);
  font-family: inherit;
  text-align: start;
  background: color-mix(in srgb, var(--yp-surface-glass) 78%, transparent);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-lg);
  box-shadow: var(--yp-shadow-sm), var(--yp-inner-light);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  cursor: pointer;
  transition: transform var(--yp-dur-fast) var(--yp-ease-out),
              border-color var(--yp-dur-fast),
              box-shadow var(--yp-dur-fast);
}

.menu-order-context:hover {
  transform: translateY(-1px);
  border-color: var(--yp-line-strong);
  box-shadow: var(--yp-shadow), var(--yp-inner-light);
}

.moc-status,
.moc-details,
.moc-chip {
  display: inline-flex;
  align-items: center;
}

.moc-status {
  flex: none;
  gap: 8px;
  color: var(--yp-gold-700);
  font-size: 12px;
  font-weight: 900;
}

.moc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yp-gold-500);
  box-shadow: 0 0 0 4px rgb(var(--yp-gold-rgb) / .10);
}

.moc-details {
  min-width: 0;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.moc-chip {
  min-height: 32px;
  gap: 6px;
  padding: 5px 10px;
  color: var(--yp-text-2);
  font-size: 11.5px;
  font-weight: 700;
  background: rgb(var(--yp-gold-rgb) / .045);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-pill);
}

.menu-order-context.has-name .moc-chip:first-child,
.menu-order-context.has-table .moc-chip:nth-child(2) {
  color: var(--yp-text-0);
  background: rgb(var(--yp-gold-rgb) / .075);
}

.moc-chip svg {
  width: 16px;
  height: 16px;
  color: var(--yp-gold-600);
}

.moc-edit {
  color: var(--yp-gold-600);
  font-size: 22px;
  line-height: 1;
}

html[dir="rtl"] .moc-edit {
  transform: scaleX(-1);
}

/* ── صورة الطبق: لا زوايا ذهبية، بل Glass plate هادئ خلف الطبق ── */
.dish-card-media::after {
  display: none !important;
}

.dish-card-media::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 82%;
  height: 72%;
  transform: translate(-50%, -44%);
  border: 1px solid rgb(var(--yp-gold-rgb) / .10);
  border-radius: 26px;
  background: linear-gradient(145deg,
    rgb(255 255 255 / .22),
    rgb(var(--yp-gold-rgb) / .035));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .34),
    0 10px 26px rgb(95 50 25 / .055);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

html[data-theme="dark"] .dish-card-media::before {
  background: linear-gradient(145deg,
    rgb(255 255 255 / .035),
    rgb(var(--yp-gold-rgb) / .05));
  border-color: rgb(var(--yp-gold-rgb) / .12);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .04),
    0 10px 28px rgb(0 0 0 / .16);
}

.dish-card-media img.dish-photo {
  z-index: 2;
}

/* Placeholder المشترك مع الويتر — Watermark خفيف جدًا */
.dish-ph {
  inset: 10px 8% 22px;
  z-index: 1;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: rgb(var(--yp-gold-rgb) / .025);
}

.dish-ph-logo {
  width: 78%;
  max-width: 132px;
  opacity: .115;
  filter: saturate(.72);
}

html:not([data-theme="dark"]) .dish-ph-logo {
  filter: saturate(.66);
  opacity: .10;
}

html[data-theme="dark"] .dish-ph-logo {
  filter: saturate(.58) brightness(.82);
  opacity: .075;
}

/* الـHero يستخدم نفس الفكرة دون الإطار الزخرفي القديم */
.dish-hero::before,
.dish-hero::after {
  display: none !important;
}

.dish-hero {
  background:
    radial-gradient(circle at 50% 45%, rgb(var(--yp-gold-rgb) / .07), transparent 62%),
    var(--yp-glass-soft);
  border-color: var(--yp-line-soft);
}

.dish-hero .dish-ph {
  inset: 8%;
  border-radius: var(--yp-radius-xl);
}

.dish-hero .dish-ph-logo {
  width: 64%;
  max-width: 220px;
  opacity: .09;
}

/* Grid أكثر امتلاءً بصريًا من دون زيادة عدد الأعمدة */
@media (min-width: 1040px) {
  .cat-group {
    gap: 30px 24px;
  }

  .dish-card {
    min-height: 300px;
  }

  .dish-card-media {
    height: 178px;
  }

  .dish-card::before {
    top: 130px;
  }

  .dish-card-body {
    padding-top: 26px;
  }
}

/* موبايل: الشريط يبقى بسيطًا ولا يزاحم المنيو */
@media (max-width: 640px) {
  .menu-order-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
  }

  .moc-details {
    width: 100%;
    justify-content: flex-start;
  }

  .moc-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .moc-edit {
    margin-inline-start: auto;
  }

  .menu-backdrop::before {
    background-size: 154px 154px;
    opacity: .04;
  }
}


/* ════════════════════════════════════════════════════════════
   MENU REFRESH V4 — orderly dish cards + persistent sent order
   ════════════════════════════════════════════════════════════ */

/* الشبكة: كل البطاقات مصطفة فعليًا داخل نفس الصف ولا صور تطفو خارجها */
.cat-group {
  align-items: stretch;
}

.dish-card {
  min-height: 0 !important;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--yp-line) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--yp-surface-glass) 88%, transparent) !important;
  box-shadow: 0 10px 28px rgb(95 50 25 / .07), var(--yp-inner-light) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dish-card::before {
  display: none !important;
}

.dish-card:hover,
.dish-card:focus-within {
  transform: translateY(-2px) !important;
  border-color: var(--yp-line-strong) !important;
  box-shadow: 0 16px 34px rgb(95 50 25 / .10), var(--yp-inner-light) !important;
}

.dish-open {
  flex: 1 1 auto;
  height: 100%;
}

/* مساحة الصورة أصبحت جزءًا من الكرت نفسه — لا negative margin ولا تراكب */
.dish-card-media {
  width: 100% !important;
  height: 174px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 44%, rgb(var(--yp-gold-rgb) / .075), transparent 58%),
    rgb(var(--yp-gold-rgb) / .018) !important;
  border-bottom: 1px solid var(--yp-line-soft) !important;
}

.dish-card-media::before,
.dish-card-media::after {
  display: none !important;
}

.dish-card-media img.dish-photo {
  inset: 8px 10px 5px !important;
  width: calc(100% - 20px) !important;
  height: calc(100% - 13px) !important;
  object-fit: contain;
  transform: scale(.96) !important;
  filter: drop-shadow(0 10px 13px rgba(95, 50, 25, .20)) !important;
}

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover .dish-card-media img.dish-photo.is-loaded {
    transform: scale(1.015) translateY(-2px) !important;
    filter: drop-shadow(0 13px 16px rgba(95, 50, 25, .24)) !important;
  }
}

html[data-theme="dark"] .dish-card-media img.dish-photo {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .42)) !important;
}

/* Placeholder هادئ جدًا وفي المنتصف */
.dish-ph {
  inset: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.dish-ph-logo {
  width: 50% !important;
  max-width: 118px !important;
  opacity: .075 !important;
  filter: saturate(.55) !important;
}

html:not([data-theme="dark"]) .dish-ph-logo {
  opacity: .065 !important;
  filter: saturate(.45) !important;
}

html[data-theme="dark"] .dish-ph-logo {
  opacity: .055 !important;
  filter: saturate(.5) brightness(.8) !important;
}

.dish-card-body {
  min-height: 92px;
  padding: 16px 16px 7px !important;
}

.dish-card-foot {
  min-height: 50px;
  padding: 5px 16px 14px !important;
}

/* الكمبيوتر: مقاس ثابت مرتب، بدون تضخيم الصورة خارج البطاقة */
@media (min-width: 1040px) {
  .dish-card-media {
    height: 184px !important;
  }

  .dish-card {
    min-height: 0 !important;
  }
}

/* موبايل */
@media (max-width: 520px) {
  .dish-card-media {
    height: 142px !important;
  }

  .dish-card-body {
    min-height: 86px;
    padding: 14px 11px 6px !important;
  }

  .dish-card-foot {
    padding: 4px 11px 11px !important;
  }
}

/* ── الطلب الذي تم إرساله: يبقى ظاهرًا حتى بعد إغلاق نافذة النجاح ── */
.sent-order-banner {
  width: 100%;
  margin: -8px 0 24px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: var(--yp-text-0);
  border: 1px solid rgb(var(--yp-gold-rgb) / .24);
  border-radius: var(--yp-radius-lg);
  background:
    linear-gradient(135deg,
      rgb(var(--yp-gold-rgb) / .10),
      rgb(var(--yp-gold-rgb) / .035)),
    var(--yp-surface-glass);
  box-shadow: var(--yp-shadow-sm), var(--yp-inner-light);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sent-order-banner[hidden] {
  display: none !important;
}

.sob-check {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--yp-on-gold);
  font-size: 18px;
  font-weight: 900;
  background: var(--yp-gold-fill);
  box-shadow: 0 5px 14px rgb(var(--yp-gold-rgb) / .22), var(--yp-inner-light);
}

.sob-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sob-copy strong {
  color: var(--yp-text-0);
  font-size: 13px;
  font-weight: 900;
}

.sob-copy span {
  color: var(--yp-text-2);
  font-size: 11.5px;
  font-weight: 700;
}

.sob-add-more {
  min-height: 38px;
  padding: 7px 13px;
  border-radius: var(--yp-radius-pill);
  color: var(--yp-on-gold);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  background: var(--yp-gold-fill);
  border: 0;
  box-shadow: 0 5px 14px rgb(var(--yp-gold-rgb) / .20), var(--yp-inner-light);
  cursor: pointer;
}

.sob-add-more:active {
  transform: scale(.97);
}

@media (max-width: 640px) {
  .sent-order-banner {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .sob-check {
    width: 36px;
    height: 36px;
  }

  .sob-add-more {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════
   MENU REFRESH V5 — stronger placeholder + floating dish image
   + exact sent-order item summary
   ════════════════════════════════════════════════════════════ */

/* البليس هولدر أصبح أوضح قليلًا، لكن ما يزال Watermark هادئًا */
.dish-ph-logo {
  opacity: .16 !important;
}

html:not([data-theme="dark"]) .dish-ph-logo {
  opacity: .145 !important;
  filter: saturate(.58) !important;
}

html[data-theme="dark"] .dish-ph-logo {
  opacity: .12 !important;
  filter: saturate(.55) brightness(.88) !important;
}

.dish-hero .dish-ph-logo {
  opacity: .13 !important;
}

html:not([data-theme="dark"]) .dish-hero .dish-ph-logo {
  opacity: .12 !important;
}

html[data-theme="dark"] .dish-hero .dish-ph-logo {
  opacity: .10 !important;
}

/* الصورة تبقى مرتبطة بمساحة الميديا، لكنها تتجاوز حدودها للأعلى والجوانب
   لإحساس العمق من دون النزول فوق اسم الطبق */
.dish-card {
  overflow: visible !important;
}

.dish-card-media {
  overflow: visible !important;
  isolation: isolate;
}

.dish-card-media img.dish-photo {
  inset: 0 4px 7px !important;
  width: calc(100% - 8px) !important;
  height: calc(100% - 7px) !important;
  transform-origin: center bottom;
  transform: scale(1.12) translateY(-8px) !important;
  z-index: 3 !important;
}

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover .dish-card-media img.dish-photo.is-loaded {
    transform: scale(1.18) translateY(-12px) !important;
  }
}

/* لمنع صورة بطاقة من الاختباء خلف البطاقة المجاورة */
.dish-card:hover,
.dish-card:focus-within {
  z-index: 6;
}

/* على الموبايل نخفف البروز قليلًا */
@media (max-width: 520px) {
  .dish-card-media img.dish-photo {
    transform: scale(1.08) translateY(-6px) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .dish-card:hover .dish-card-media img.dish-photo.is-loaded {
      transform: scale(1.12) translateY(-8px) !important;
    }
  }
}

/* تفاصيل الطلب المرسل داخل البانر */
.sob-items {
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  line-height: 1.45;
}

.sob-items:empty {
  display: none;
}

.sob-items-label {
  color: var(--yp-gold-700);
  font-size: 10.5px;
  font-weight: 900;
  margin-inline-end: 2px;
}

.sob-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 3px 8px;
  color: var(--yp-text-1);
  font-size: 10.5px;
  font-weight: 700;
  background: rgb(var(--yp-gold-rgb) / .065);
  border: 1px solid var(--yp-line-soft);
  border-radius: var(--yp-radius-pill);
}

.sob-item-chip b {
  color: var(--yp-gold-700);
  font-weight: 900;
}


/* ════════════════════════════════════════════════════════════
   Customer menu detail refresh — يحافظ على شكل الكروت والـBottom Sheet
   ويجعل معلومات الطبق أوضح مثل لوحة الإدارة.
   ════════════════════════════════════════════════════════════ */

/* مؤشر حدة صغير فوق صورة الكرت، بدون تغيير بنية البطاقة أو سلوك الضغط */
.dish-card-spice{
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  z-index:4;
  min-width:34px;
  height:28px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:var(--card-radius-pill);
  color:#d96a38;
  background:color-mix(in srgb, var(--surface-3) 88%, #d96a38 12%);
  border:1px solid rgba(217,106,56,.30);
  box-shadow:0 3px 10px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.dish-card-spice .menu-spice-pepper{
  width:15px;
  height:15px;
  font-size:12px;
  opacity:1;
}
.dish-card-spice b{
  color:var(--text-primary);
  font-size:10px;
  font-weight:900;
  line-height:1;
}

/* إذا كان الطبق نفد، ننقل وسم النفاد قليلًا حتى لا يتزاحم مع الحدة */
.dish-card-spice + .badge-soldout{
  top:42px;
}

/* شبكة المعلومات داخل كرت التفاصيل: أوضح وأقرب لبطاقات الداشبورد */
.dish-info-grid{
  gap:10px;
  margin:16px 0 18px;
}
.dish-info{
  min-height:98px;
  padding:13px 10px 12px;
  border-radius:16px;
  background:
    linear-gradient(145deg, rgb(var(--gold-ink) / .10), transparent 72%),
    var(--surface-1);
  border:1px solid rgb(var(--gold-ink) / .22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.dish-info .info-icon{
  width:30px;
  height:30px;
  color:var(--gold-2);
}
.dish-info .info-icon svg{
  width:26px;
  height:26px;
}
.info-label{
  color:var(--text-secondary);
  opacity:1;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.45px;
}
.dish-info small{
  color:var(--text-primary);
  font-size:12px;
  font-weight:900;
}

/* مستوى الحدة: 5 أيقونات + رقم المستوى بدل Medium/Hot */
#spiceInfo{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(217,106,56,.13), transparent 70%),
    var(--surface-1);
}
#spiceInfo .info-icon{
  color:#d96a38;
}
#spiceValue{
  width:100%;
}
.menu-spice-level{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.menu-spice-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  direction:ltr;
}
/* إيموجي الفلفل — نفس معاملة لوحة الإدارة: grayscale للمطفأ، ألوانه
   الطبيعية للمُفعّل. */
.menu-spice-pepper{
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  font-size:13px;
  line-height:1;
  filter:grayscale(1);
  opacity:.3;
}
.menu-spice-pepper.is-active{
  filter:none;
  opacity:1;
}
.menu-spice-level b{
  color:var(--text-primary);
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}

/* المكونات والحساسية كأقسام أوضح داخل كرت التفاصيل */
.meta-block{
  margin:0 0 14px;
  padding:13px 14px;
  border:1px solid rgb(var(--gold-ink) / .16);
  border-radius:16px;
  background:var(--surface-1);
}
.meta-block-title{
  margin-bottom:9px;
  color:var(--gold-2);
  font-size:10px;
  font-weight:850;
  letter-spacing:.9px;
}
.meta-block .chip{
  min-height:30px;
  padding:6px 11px;
  background:var(--surface-2);
  border-color:rgb(var(--gold-ink) / .20);
}
.meta-block.is-warn{
  background:linear-gradient(145deg, rgba(230,126,34,.08), transparent 70%),var(--surface-1);
  border-color:rgba(230,126,34,.25);
}
.meta-block.is-warn .meta-block-title{
  color:#c56d2e;
}

/* الهيرو والتفاصيل تبقى بنفس أسلوب الصفحة الحالي لكن بترتيب بصري أنظف */
.dish-body{
  padding-top:20px;
}
.dish-body .eyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 9px;
  margin-bottom:7px;
  border-radius:999px;
  background:rgb(var(--gold-ink) / .09);
  border:1px solid rgb(var(--gold-ink) / .14);
}
.dish-description{
  max-width:58ch;
  line-height:1.65;
}
.dish-price{
  margin-top:2px;
  font-size:22px;
}

/* الموبايل: يبقى كل شيء خفيف ولا يغيّر نمط الكروت */
@media (max-width:420px){
  .dish-info-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .dish-info{
    min-height:92px;
    padding:11px 6px;
  }
  .menu-spice-pepper{
    width:13px;
    height:13px;
    font-size:11px;
  }
  .menu-spice-icons{
    gap:1px;
  }
  .menu-spice-level b{
    font-size:9px;
  }
}


/* ════════════════════════════════════════════════════════════
   UI/UX REFRESH V4 — 2026-08-30
   ترحيب إلزامي + هيدر أخف + لغات رأسية + مراجعة طلب مدمجة وواضحة.
   ════════════════════════════════════════════════════════════ */

/* الهيدر: الشعار في المنتصف، الرجوع في طرف، والثيم/اللغة في طرف واحد صغير. */
.menu-topbar {
  min-height: 70px;
  grid-template-columns: 46px minmax(0, 1fr) 94px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
}
.menu-topbar-logo {
  height: 42px;
  max-width: 138px;
}
.menu-brand-subtitle {
  font-size: 7.5px;
}
.top-controls {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  inset-inline-end: 12px;
  inset-inline-start: auto;
  width: 88px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
}
.theme-toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

/* اللغة: زر واحد فقط في الوضع العادي؛ الضغط عليه يفتح القائمة إلى الأسفل. */
.language-switcher {
  position: relative;
  width: 40px;
  min-width: 40px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  overflow: visible;
  border-radius: 14px;
  background: var(--yp-surface-glass, var(--surface-3));
  border: 1px solid var(--yp-line, var(--gold-border));
  box-shadow: var(--yp-shadow-sm, var(--shadow-soft));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.language-option {
  display: none;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.language-option.active {
  display: inline-flex;
  order: -1;
}
.language-switcher.is-open {
  padding-bottom: 4px;
}
.language-switcher.is-open .language-option {
  display: inline-flex;
}

.menu-content {
  padding-top: calc(env(safe-area-inset-top, 0px) + 90px);
}
.menu-nav-surface {
  top: calc(env(safe-area-inset-top, 0px) + 76px);
}

/* بيانات العميل والطاولة تصبح منطقتين واضحتين جنب بعض بدل شريط طويل مبهم. */
.menu-order-context {
  min-height: 0;
  margin: -6px 0 18px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  border-radius: 22px;
}
.moc-status {
  width: 100%;
  justify-content: flex-start;
  padding-inline: 4px;
  font-size: 10.5px;
}
.moc-details {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 24px;
  align-items: stretch;
  gap: 8px;
}
.moc-chip {
  min-width: 0;
  min-height: 64px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  border-radius: 17px;
  font-size: 11px;
  line-height: 1.25;
  background: rgb(var(--yp-gold-rgb, 221 176 106) / .055);
}
.moc-chip svg {
  width: 18px;
  height: 18px;
}
.moc-edit {
  align-self: center;
  justify-self: center;
}

/* أسعار الثيم الفاتح: بني/برونزي داكن بدل ذهبي فاتح فوق البيج. */
:root:not([data-theme="dark"]) .dish-card-price,
:root:not([data-theme="dark"]) .dish-price,
:root:not([data-theme="dark"]) .cl-unit,
:root:not([data-theme="dark"]) .cl-sum,
:root:not([data-theme="dark"]) .ri-qty,
:root:not([data-theme="dark"]) .os-row.is-total span:last-child {
  color: #6a3e18 !important;
}
:root:not([data-theme="dark"]) .dish-card-price {
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(106, 62, 24, .075);
  border: 1px solid rgba(106, 62, 24, .12);
}

/* لوح الطلب: مساحة أقل، محتوى أهم، وصور أكبر في المراجعة. */
.order-sheet {
  width: min(100%, 640px);
  max-height: min(90dvh, 760px);
}
.order-sheet-head {
  min-height: 54px;
  padding: 8px 12px;
}
.order-sheet-scroll {
  padding: 11px 13px 10px;
}
.order-sheet-foot {
  padding: 10px 13px calc(env(safe-area-inset-bottom, 0px) + 10px);
  gap: 8px;
}
.os-sec-title {
  margin: 8px 2px 7px;
}

/* اسم العميل والطاولة في المراجعة: بطاقتان متساويتان جنبًا إلى جنب. */
.os-customer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}
.os-summary-card {
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: var(--yp-glass-soft, var(--surface-1));
  border: 1px solid var(--yp-line-soft, rgb(var(--gold-ink) / .14));
  border-radius: 17px;
}
.os-summary-label {
  color: var(--yp-text-2, var(--text-secondary));
  font-size: 9.5px;
  font-weight: 800;
}
.os-summary-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--yp-text-0, var(--text-primary));
  font-size: 13px;
  font-weight: 900;
}

/* أصناف المراجعة كشبكة كروت؛ الصورة الآن جزء أساسي وليست أيقونة صغيرة. */
.os-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.os-review-grid .os-review-item.has-media {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "name"
    "qty";
  align-content: start;
  gap: 7px;
  border: 1px solid var(--yp-line-soft, rgb(var(--gold-ink) / .14));
  border-radius: 17px;
  background: var(--yp-glass-soft, var(--surface-1));
}
.os-review-grid .os-review-item.has-media .cl-media {
  grid-area: media;
  width: 100%;
  height: auto;
  aspect-ratio: 1.35 / 1;
  border-radius: 13px;
}
.os-review-grid .os-review-item.has-media .cl-img {
  object-fit: contain;
  padding: 2px;
}
.os-review-grid .os-review-item.has-media .ri-name {
  grid-area: name;
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  text-align: start;
}
.os-review-grid .os-review-item.has-media .ri-qty {
  grid-area: qty;
  justify-self: start;
  font-size: 11px;
}
.os-review-total {
  margin-top: 9px;
  padding: 0 12px;
  background: var(--yp-glass-soft, var(--surface-1));
  border: 1px solid var(--yp-line-soft, rgb(var(--gold-ink) / .14));
  border-radius: 15px;
}
.os-review-total .os-row.is-total {
  margin-top: 0;
  border-top: 0;
  padding: 10px 0;
}

@media (max-width: 420px) {
  .menu-topbar {
    grid-template-columns: 42px minmax(0, 1fr) 90px;
    min-height: 66px;
  }
  .menu-topbar-logo { height: 38px; max-width: 120px; }
  .menu-content { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
  .menu-nav-surface { top: calc(env(safe-area-inset-top, 0px) + 71px); }
  .moc-chip { min-height: 60px; font-size: 10.5px; }
  .os-review-grid { gap: 7px; }
  .os-review-grid .os-review-item.has-media { padding: 7px; }
}


/* ════════════════════════════════════════════════════════════
   V5 — MOBILE FIRST  (2026-08-30)
   الطبقة الأخيرة في هذا الملف: تُثبّت المقياس على الهاتف أولًا
   (320 → 430) ثم تُوسّعه للتابلت والكمبيوتر، ولا تمسّ أي منطق.

   ما تعالجه، بالترتيب الذي ظهرت به المشكلات على 390×844:
   • ٤٥٪ من أول شاشة كانت "كروم" قبل أول طبق (هيدر ٧٣ + بحث/أصناف ١١٣
     + شريط الزبون ١١٠ = ٣٧٨px). هنا تنزل إلى ~٢٤٠px.
   • شريط بيانات الزبون كان بطاقتين رأسيتين بارتفاع ١١٠px لمعلومة
     سطر واحد ⇒ صار شريطًا أفقيًا واحدًا.
   • سطر السلة كان يتمدد لأربعة صفوف وزر الحذف يقفز إلى الطرف المقابل
     ⇒ صار صفًّا واحدًا مضغوطًا.
   • أسعار الثيم الفاتح: ذهبي فاتح فوق بيج ⇒ برونزي داكن يمرّ AA.
   • زر AR كان ذهبيًا مملوءًا ينافس «إضافة إلى السلة» ⇒ إجراء ثانوي.
   ════════════════════════════════════════════════════════════ */

/* ── ١) الشريط العلوي: أخفّ وأقصر، ويبقى الشعار مقروءًا ── */
.menu-topbar {
  min-height: 56px;
  grid-template-columns: 40px minmax(0, 1fr) 84px;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px;
}
.menu-topbar-brand { min-height: 0; }
.menu-topbar-logo { height: 34px; max-width: 116px; }
.menu-brand-subtitle {
  font-size: 7px;
  letter-spacing: 1.4px;
  opacity: .78;
}
.menu-back-btn,
html[dir="rtl"] .menu-back-btn { font-size: 24px; }
.icon-btn { width: 40px; height: 40px; }

.top-controls {
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  inset-inline-end: 10px;
  width: auto;
  gap: 6px;
}
.theme-toggle,
.language-switcher {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 12px;
}
.language-switcher { height: auto; }
.language-option {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 9.5px;
}

/* المحتوى يبدأ تحت الشريط الثابت مباشرة — الرقمان مشتقّان من ارتفاع
   الهيدر أعلاه، وأي تغيير فيه يجب أن يتبعه هنا. */
.menu-content {
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  padding-inline: 12px;
}
.menu-nav-surface {
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  margin: 0 0 10px;
  padding: 7px;
  border-radius: 20px;
}
.menu-search { margin: 0 0 7px; }
.menu-search input {
  min-height: 42px;
  font-size: 13px;
}
.cat-rail { gap: 6px; }
.cat-chip {
  min-height: 34px;
  padding: 0 13px;
  font-size: 12px;
}

/* ── ٢) شريط الزبون/الطاولة: سطر واحد، لا بطاقتان ── */
.menu-order-context {
  min-height: 44px;
  margin: 0 0 12px;
  padding: 5px 6px 5px 12px;
  display: flex;
  /* صريح: طبقة موبايل أقدم في هذا الملف تجعله عمودًا (flex-direction:
     column)، وهي التي كانت ترفعه إلى ٧١px لمعلومة سطر واحد. */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: var(--card-radius-pill);
}
html[dir="rtl"] .menu-order-context { padding: 5px 12px 5px 6px; }
.moc-status {
  flex: 0 0 auto;
  width: auto;
  padding-inline: 0;
  gap: 6px;
  font-size: 10px;
  white-space: nowrap;
}
.moc-details {
  flex: 1 1 auto;
  width: auto;              /* يلغي width:100% الذي كان يكسر الصف */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.moc-edit { margin-inline-start: 0; }
.moc-chip {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 4px 10px;
  flex-direction: row;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--card-radius-pill);
}
.moc-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moc-chip svg { flex: none; width: 14px; height: 14px; }
.moc-edit { flex: none; font-size: 17px; opacity: .55; }

/* ٣٢٠px: عنوان الحالة يفقد نصّه ويبقى نقطته فقط، فلا يُقصّ اسم الزبون */
@media (max-width: 359px) {
  .moc-status span:not(.moc-dot) { display: none; }
}

/* ── ٣) بطاقة الطبق: أقصر، والسعر وزر الإضافة أول ما تراه العين ── */
@media (max-width: 640px) {
  .cat-heading {
    margin: 14px 0 8px;
    font-size: 13px;
  }
  .cat-group { gap: 12px 8px; }

  /* !important هنا ليس زينة: القواعد المقابلة في الطبقات الأقدم من هذا
     الملف مكتوبة بـ!important، ولا يمكن تجاوزها بترتيب المصدر وحده. */
  .dish-card { min-height: 0; }
  .dish-card-media { height: 128px !important; }
  .dish-card-body {
    min-height: 0 !important;
    padding: 15px 10px 4px !important;
    gap: 3px;
  }
  .dish-card-body h3 {
    font-size: 13px;
    line-height: 1.35;
  }
  .dish-card-body p {
    font-size: 10.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    opacity: .85;
  }
  .dish-card-foot {
    min-height: 44px;
    padding: 3px 10px 9px !important;
  }
  .dish-card-price {
    font-size: 14px;
    font-weight: 900;
  }
  /* منطقة لمس مريحة رغم صِغر الشكل: الزر ٣٦px مرئي، والهالة تُكمله ٤٤px */
  .qa {
    position: relative;
    width: 36px;
    height: 36px;
    font-size: 21px;
  }
  .qa::after {
    content: "";
    position: absolute;
    inset: -4px;
  }
  .card-step { min-height: 36px; }
  .card-step button { width: 32px; height: 32px; }
}

/* ── ٤) الثيم الفاتح: تباين الأسعار والنصوص فوق البيج ── */
:root:not([data-theme="dark"]) .dish-card-body p,
:root:not([data-theme="dark"]) .dish-description {
  color: #6B4A30;          /* ≥ 4.5:1 فوق الكريمي — أغمق من --text-secondary */
  opacity: 1;
}
:root:not([data-theme="dark"]) .cat-heading,
:root:not([data-theme="dark"]) .meta-block-title,
:root:not([data-theme="dark"]) .os-sec-title {
  color: #8A5A22;
}
:root:not([data-theme="dark"]) .dish-card-body h3 { color: #35200F; }
:root:not([data-theme="dark"]) .cb-total,
:root:not([data-theme="dark"]) .cb-text { color: var(--yp-on-gold); }

/* ── ٥) لوح تفاصيل الطبق: مساحة أقل، وترتيب أوضح ── */
@media (max-width: 759px) {
  .dish-panel { max-height: min(92dvh, 820px); }
  .dish-panel-scroll { padding: 44px 12px 14px; }
  .dish-hero { height: min(26dvh, 200px); }
  .dish-body { padding: 12px 2px 2px; }
  .dish-body h2 { font-size: 20px; line-height: 1.3; }
  .dish-description { font-size: 12.5px; margin-bottom: 8px; }
  .dish-price { font-size: 20px; }
  .dish-variants { gap: 6px; margin-bottom: 12px; }
  .variant-chip { min-height: 36px; font-size: 11.5px; padding: 0 11px; }

  .dish-info-grid { gap: 6px; margin: 12px 0 12px; }
  .dish-info { min-height: 78px; padding: 9px 5px 8px; border-radius: 14px; }
  .dish-info .info-icon { width: 24px; height: 24px; }
  .dish-info .info-icon svg { width: 21px; height: 21px; }

  /* المكوّنات/الحساسية: صندوق فارغ بارتفاع ٩٠px لقيمة "غير محدد بعد"
     كان يدفع زر الطلب خارج الشاشة. يبقى القسم ظاهرًا، لكن مضغوطًا. */
  .meta-block { margin: 0 0 8px; padding: 9px 11px; border-radius: 13px; }
  .meta-block-title { margin-bottom: 6px; font-size: 9.5px; }
  .meta-block .chip { min-height: 26px; padding: 4px 9px; font-size: 11px; }
  .chip-row { gap: 5px; }

  .dish-note-block { margin-top: 10px; }
  .dish-note-block input { min-height: 42px; }
}

/* ── ٦) الـ3D/AR: إجراء ثانوي واحد، لا يزاحم زر الطلب ── */
.dish-ar-actions {
  display: block;
  margin: 12px 0 4px;
}
.dish-ar-actions[hidden] { display: none; }

/* لون مميّز عمدًا (تركوازي لا ذهبي): علامة النسخة الجديدة — زر بلونه
   الذهبي القديم يعني أن الجوال يعرض كاشًا قديمًا. */
.dish-ar-btn {
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  cursor: pointer;
  color: #E8FFFB;
  background: linear-gradient(135deg, #0E7490, #0F766E);
  border: 1px solid rgb(45 212 191 / .55);
  border-radius: 15px;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.dish-ar-btn .ar-btn-copy b { color: #F0FDFA; }
.dish-ar-btn .ar-btn-copy small { color: rgb(204 251 241 / .82); }
.dish-ar-btn .ar-btn-icon { color: #99F6E4; }
.dish-ar-btn:hover { filter: brightness(1.08); }
.dish-ar-btn:active { transform: scale(.99); }
.dish-ar-btn:focus-visible { outline: 2px solid #2DD4BF; outline-offset: 2px; }

.ar-btn-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--yp-gold-500);
  background: rgb(var(--yp-gold-rgb, 221 176 106) / .13);
  border: 1px solid rgb(var(--yp-gold-rgb, 221 176 106) / .24);
}
.ar-btn-icon svg { width: 19px; height: 19px; }

.ar-btn-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ar-btn-copy b {
  font-size: 13px;
  font-weight: 800;
  color: var(--yp-text-0, var(--text-primary));
}
.ar-btn-copy small {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--yp-text-2, var(--text-secondary));
}
.ar-btn-go {
  flex: none;
  font-size: 20px;
  line-height: 1;
  opacity: .5;
}
html[dir="rtl"] .ar-btn-go { transform: scaleX(-1); }

/* ── ٧) عارض الطبق (3D + AR): انتقل إلى ../../ar/ar.css (.yp-ar) ── */

/* ── ٨) سطر السلة: ثلاثة صفوف واضحة بدل تكديس متداخل ──
   الاسم والسعر أعلى، التحكم في صفّ واحد أفقي تحته، والملاحظة أسفلهما.
   (كان زر الحذف يهبط وحده تحت عدّاد الكمية بجانب المجموع فيبدو كأنه
   يخصّ السعر لا الصنف.) */
.cart-line {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "media main sum"
    "media ctrl ctrl"
    "note  note note";
  align-items: center;
  gap: 6px 10px;
  padding: 9px 10px;
}
.cl-media {
  width: 48px;
  height: 48px;
  align-self: start;
  border-radius: 12px;
}
.cl-media .dish-ph-logo { max-width: 26px; }
.cl-main {
  grid-area: main;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cl-name { font-size: 12.5px; line-height: 1.35; }
.cl-unit { font-size: 10.5px; }
.cl-sum {
  grid-area: sum;
  align-self: center;
  justify-self: end;
  font-size: 13.5px;
  font-weight: 900;
  white-space: nowrap;
}
.cl-controls {
  grid-area: ctrl;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.cl-controls .qty-step { min-height: 34px; }
.cl-controls .qty-step button { width: 30px; height: 30px; }
.cl-del { width: 30px; height: 30px; font-size: 13px; }
.cart-line-note { min-height: 36px; font-size: 11.5px; }

/* ── ٩) المراجعة: صفوف مقروءة بدل كروت ضخمة ── */
.os-review-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}
.os-review-grid .os-review-item.has-media {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas: "media name qty";
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
}
.os-review-grid .os-review-item.has-media .cl-media {
  width: 46px;
  height: 46px;
  aspect-ratio: auto;
  border-radius: 11px;
}
.os-review-grid .os-review-item.has-media .ri-name { font-size: 12.5px; }
.os-review-grid .os-review-item.has-media .ri-qty {
  justify-self: end;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.os-customer-grid { gap: 8px; margin-bottom: 9px; }
.os-summary-card { min-height: 58px; padding: 8px; }
.os-summary-card strong { font-size: 12.5px; }

/* ── ١٠) تذييل لوح الطبق وأزرار الطلب: مقاسات لمس مريحة ── */
.dish-panel-foot { gap: 8px; padding: 9px 12px calc(env(safe-area-inset-bottom, 0px) + 9px); }
.qty-step { min-height: 46px; }
.qty-step button { width: 38px; height: 38px; }
.add-to-cart { min-height: 48px; font-size: 14px; }
.os-primary, .os-secondary { min-height: 48px; font-size: 14px; }
.cart-bar { min-height: 54px; }

/* «حفظ التعديل»: نفس الزر لكن بنبرة أهدأ — الصنف موجود أصلًا في الطلب،
   فالفعل تعديل لا إضافة. */
.add-to-cart.is-editing {
  background: transparent;
  color: var(--yp-gold-500);
  border: 1.5px solid var(--yp-gold-500);
  box-shadow: none;
}
.add-to-cart.is-editing .atc-total { opacity: .8; }

/* ── ١١) تابلت وكمبيوتر: نفس النظام، مقاس أكبر ── */
@media (min-width: 640px) {
  .menu-topbar {
    min-height: 68px;
    grid-template-columns: 46px minmax(0, 1fr) 110px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 10px;
  }
  .menu-topbar-logo { height: 40px; max-width: 140px; }
  .menu-content { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); padding-inline: 20px; }
  .menu-nav-surface { top: calc(env(safe-area-inset-top, 0px) + 70px); padding: 10px; }
  .top-controls { top: calc(env(safe-area-inset-top, 0px) + 14px); inset-inline-end: 18px; }
  .theme-toggle, .language-switcher { flex-basis: 40px; width: 40px; min-width: 40px; height: 40px; }
  .language-switcher { height: auto; }
  .menu-order-context { min-height: 48px; margin-bottom: 16px; }
  .moc-chip { font-size: 12px; min-height: 34px; }
  .cat-chip { min-height: 38px; font-size: 13px; }
  .os-review-grid .os-review-item.has-media { padding: 9px 11px; }
}

@media (min-width: 1040px) {
  .menu-content { max-width: 1180px; }
  .dish-ar-btn { max-width: 420px; }
}

/* شاشات قصيرة (هاتف أفقي / 320×568): لا يبتلع الهيرو نصف اللوح */
@media (max-height: 680px) {
  .dish-hero { height: min(22dvh, 150px); }
  .dish-panel-scroll { padding-top: 40px; }
}

/* ── ١٢) إنفاذ [hidden] ──
   طبقات سابقة في هذا الملف تُعطي display لعناصر بمحدّد صنف (‏.dish-info،
   .dish-hero-badge …). محدّد الصنف أقوى من [hidden] في ورقة المتصفّح
   الافتراضية، فيبقى العنصر ظاهرًا رغم ضبط element.hidden = true من
   الجافاسكربت. أثره الملموس: شارة AR كانت تظهر فوق صورة كل طبق ولو لم
   يكن له نموذج إطلاقًا، وخلايا "وقت التحضير/الحرارة/السعرات" كانت تبقى
   صناديق فارغة. */
.dish-info-grid[hidden],
.dish-info[hidden],
.meta-block[hidden],
.dish-variants[hidden],
.dish-ar-actions[hidden],
.dish-hero-badge[hidden],
.badge-3d[hidden],
.dish-description[hidden],
.sent-order-banner[hidden],
.cart-bar[hidden] {
  display: none !important;
}

/* ── ١٣) ٣٢٠px: زر الإضافة لا ينكسر ثلاثة أسطر بجانب عدّاد الكمية ── */
@media (max-width: 359px) {
  .dish-panel-foot { gap: 6px; padding-inline: 10px; }
  .qty-step { min-height: 44px; }
  .qty-step button { width: 34px; height: 34px; }
  .qty-step b { min-width: 18px; font-size: 13px; }
  .add-to-cart {
    padding-inline: 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .add-to-cart .atc-total { font-size: 12px; }
  .cat-chip { padding: 0 11px; font-size: 11.5px; }
  .dish-card-media { height: 116px !important; }
  .dish-card-body h3 { font-size: 12.5px; }
  .dish-card-body p { -webkit-line-clamp: 2; font-size: 10px; }
  .cl-controls { gap: 6px; }
}

/* ── زر تحديث الجلسة في شريط الأدوات العلوي ── */
.refresh-btn{
  width:38px; height:38px;
  display:grid; place-items:center;
  padding:0; cursor:pointer;
  color:var(--text-primary);
  background:var(--surface-2);
  border:1px solid var(--gold-border);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
  transition:transform .14s ease, background .18s ease;
}
.refresh-btn svg{ width:19px; height:19px; }
.refresh-btn:hover{ background:var(--surface-3); }
.refresh-btn:active{ transform:rotate(-90deg); }