/* ════════════════════════════════════════════════════════════
   المنيو العام (menu-public) — طبقة التصفّح فقط
   تُحمَّل بعد main-menu.css فتبني على نفس رموز الثيم (--surface-*,
   --gold-*, --text-*) وتتبع الوضعين الفاتح والداكن تلقائيًا.
   محتواها: بطاقات الحقائق (أيقونات أولًا) داخل لوح التفاصيل، وتعديلات
   صغيرة بعد إزالة أزرار الطلب والسلة.
   ════════════════════════════════════════════════════════════ */

/* وضع المعاينة داخل لوحة menu-admin: اللغة والثيم تُضبط من اللوحة نفسها */
html.is-preview .top-controls { display: none; }

/* البطاقة كلها تفتح التفاصيل — لا زر إضافة بجانب السعر */
.dish-card { cursor: pointer; }
.dish-card-foot { justify-content: flex-start; }

/* لوح التفاصيل بلا تذييل طلب: مسافة سفلية مريحة للتمرير */
.dish-panel-scroll { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }

/* ── بطاقات الحقائق: الحدة / الحساسية / المرافقات ──
   لا تُرسم البطاقة إلا إذا كان للطبق بيانات لها؛ main-menu.js يخفي
   الباقي بـ[hidden] ويضبط data-count بعدد الظاهر منها فتتوزّع الشبكة
   بلا فجوات. data-count="0" يعني إخفاء القسم كاملًا. */
.dish-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.dish-facts[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dish-facts[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

/* display:grid/flex أقوى من [hidden] الافتراضية — نصرّح بالإخفاء */
.dish-facts[hidden],
.dish-fact[hidden] { display: none; }

.dish-fact {
  min-height: 98px;
  padding: 12px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  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-fact.is-spice {
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 106, 56, .13), transparent 70%),
    var(--surface-1);
}

.dish-fact.is-allergens {
  background:
    linear-gradient(145deg, rgba(230, 126, 34, .10), transparent 70%),
    var(--surface-1);
  border-color: rgba(230, 126, 34, .28);
}

/* بطاقة وحيدة تملأ العرض: صف أفقي أنظف من صندوق عريض ونص صغير وسطه */
.dish-facts[data-count="1"] .dish-fact {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  text-align: start;
}

.dish-facts[data-count="1"] .fact-icons {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

/* العنوان والتعليق سطر واحد في الصف الأفقي — الأيقونات وحدها تلتفّ */
.dish-facts[data-count="1"] .fact-title,
.dish-facts[data-count="1"] .fact-caption { white-space: nowrap; }

.fact-title {
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.dish-fact.is-allergens .fact-title { color: #c56d2e; }
html[data-theme="dark"] .dish-fact.is-allergens .fact-title { color: #f0b357; }

.fact-icons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}

.fact-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 40px;
  max-width: 76px;
}

.fact-emoji {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .14));
}

.fact-icon small {
  color: var(--text-primary);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.fact-peppers {
  display: flex;
  justify-content: center;
  gap: 2px;
  direction: ltr;
}

.fact-peppers .menu-spice-pepper {
  width: 20px;
  height: 20px;
  font-size: 17px;
}

.fact-caption {
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 900;
}

@media (max-width: 559px) {
  .dish-facts,
  .dish-facts[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
  }
  .dish-facts[data-count="1"] { grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
  .dish-fact {
    min-height: 0;
    padding: 10px 8px;
    border-radius: 14px;
  }
  /* بثلاث بطاقات: الحدة صف كامل أفقي، والحساسية والمرافقات جنبًا إلى
     جنب. ببطاقتين يكفي عمودان متساويان بلا تمديد يترك فجوة. */
  .dish-facts[data-count="3"] .dish-fact.is-spice {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    text-align: start;
  }
  /* الأيقونات تتقلّص داخل الصف — بـflex:none كانت تدفع التعليق خارج البطاقة */
  .dish-facts[data-count="3"] .dish-fact.is-spice .fact-icons {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }
  .dish-facts[data-count="3"] .dish-fact.is-spice .fact-title,
  .dish-facts[data-count="3"] .dish-fact.is-spice .fact-caption { white-space: nowrap; }
  .fact-emoji { font-size: 21px; }
}

@media (min-width: 760px) {
  .dish-facts { gap: 12px; }
  .fact-emoji { font-size: 26px; }
}

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

   pointer-events:none تجعل الصورة غير قابلة للاستهداف بالمؤشر: لا قائمة
   سياق، لا سحب، ولا فتح مباشر بالنقر. النقر يصل إلى البطاقة الأب فتفتح
   تفاصيل الطبق كالمعتاد، وتأثيرات المرور مبنية على .dish-card:hover لا
   على الصورة، فلا يتأثر شيء. touch-callout يلغي نافذة «حفظ الصورة»
   بالضغط المطوّل على iOS/Safari. */
.dish-photo,
.dish-hero-img,
.dish-ph-logo {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* الحاويات تستقبل الحدث حين تتخطّاه المتصفحات إلى الأب — نُلغي عندها
   نافذة الحفظ والتحديد أيضًا، مع إبقاء النقر (فتح الطبق) والتمرير. */
.dish-card-media,
.dish-hero,
.dish-ph {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}