/* ============================================================
   ثيم أورگانك دايت — أخضر الأوراق + زيتوني + عاجي
   الألوان مأخوذة من شعار المطعم (LOGO.jpeg):
   أخضر داكن للورقة والنص · زيتوني فاتح للتمييز · عاجي للخلفية.
   ملاحظة: أسماء المتغيّرات (--gold-*) بقيت كما هي حفاظاً على بنية
   الكود الأصلية، لكن قيمها الآن هي الأخضر الزيتوني للشعار.
   ============================================================ */

:root {
  --brand-900: #10361f;   /* أخضر داكن جداً — أعمق درجة */
  --brand-800: #1f6b3c;   /* أخضر الشعار — لون الهيدر */
  --brand-700: #2a8049;   /* أخضر متوسط */
  --brand-600: #3e9c5d;   /* أخضر فاتح — الأزرار */
  --brand-500: #7bbd93;   /* أخضر باهت */
  --gold-500: #8f9e33;    /* زيتوني الشعار — لون التمييز */
  --gold-400: #a7b54a;    /* زيتوني فاتح */
  --gold-glow: #cfdd97;   /* توهّج زيتوني */

  --cream: #f4f1e6;       /* عاجي — خلفية الصفحة (خلفية قرص الشعار) */
  --paper: #fffefa;       /* أبيض عاجي — خلفية البطاقات */
  --ink: #23301f;         /* لون النص */
  --muted: #7c8a76;       /* نص ثانوي */
  --line: #e2e8d6;        /* لون الحدود */

  --shadow-sm: 0 2px 8px rgba(26,66,42, .08);
  --shadow-md: 0 8px 30px rgba(26,66,42, .14);
  --shadow-lg: 0 20px 60px rgba(26,66,42, .22);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 900px;

  --font: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* أي عنصر يحمل الخاصية hidden يجب أن يختفي فعلاً.
   بدون هذه القاعدة تتغلّب قواعد display الخاصة بالأصناف (مثل .cart-fab
   و .co-line و .order-track) على [hidden] الافتراضي، فتظهر عناصر
   يُفترض أن تكون مخفية (زر السلة الفارغة · سطور الخصم والتوصيل بقيمة 0). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body.intro-open { overflow: hidden; height: 100vh; }

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(143,158,51,.10), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(31,107,60,.08), transparent 55%),
    var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ============================================================
   الهيدر
   ============================================================ */
.hero {
  position: relative;
  background: var(--brand-800);   /* لون واحد ثابت — بدون فيديو أو تدرّج أو أنيميشن */
  color: #fff;
  padding: 34px 0 74px;
  overflow: hidden;
  border-bottom: 4px solid var(--gold-500);
}
.hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.brand-badge {
  width: 78px; height: 78px; flex: none;
  border-radius: 20px;
  background: #fff;
  border: 2px solid rgba(255,255,255,.55);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
}
.brand-badge img { width: 100%; height: 100%; object-fit: cover; }
.brand-text h1 {
  font-family: "El Messiri", var(--font);
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.brand-text .tagline {
  color: var(--gold-glow);
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 600;
  margin-top: 4px;
}
.hero-actions { margin-inline-start: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  padding: 9px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: .2s;
}
.chip:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.chip.solid { background: var(--gold-500); color: var(--brand-900); border-color: transparent; }
.chip.solid:hover { background: var(--gold-400); }

/* ============================================================
   شريط البحث + الفئات
   ============================================================ */
.toolbar {
  position: sticky; top: 0; z-index: 30;
  margin-top: -44px;
}
.toolbar-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px;
}
.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.search input {
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 16px; width: 100%;
  color: var(--ink);
}
.search .ico { color: var(--brand-600); font-size: 18px; }

.cats {
  display: flex; gap: 8px; overflow-x: auto;
  margin-top: 12px; padding-bottom: 4px;
  scrollbar-width: thin;
}
.cats::-webkit-scrollbar { height: 6px; }
.cats::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.cat-pill {
  flex: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-800);
  padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  transition: .18s; white-space: nowrap;
}
.cat-pill:hover { border-color: var(--brand-500); }
.cat-pill.active {
  background: var(--brand-600); color: #fff; border-color: var(--brand-600);
  box-shadow: 0 6px 16px rgba(31,107,60,.32);
}

/* ============================================================
   الأصناف
   ============================================================ */
main { padding: 26px 0 60px; }

.section { margin-bottom: 34px; scroll-margin-top: 130px; }
.section-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.section-head .ico {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff; border-radius: 14px; font-size: 22px;
  box-shadow: var(--shadow-sm);
}
.section-head h2 { font-family: "El Messiri", var(--font); font-size: 24px; font-weight: 700; color: var(--brand-800); }
.section-head .note { font-size: 13px; color: var(--muted); font-weight: 500; }
.section-head .count {
  margin-inline-start: auto;
  background: var(--cream); color: var(--muted);
  font-size: 13px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line);
}

/* ===== شبكة كروت الأطباق (المنيو الاحترافي) ===== */
.items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 620px) { .items { gap: 16px; } }

.dish {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
}
.dish:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #e2e8d0; }
.dish.out { opacity: .62; }
.dish-media {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f6faee, #edf2e2);
  overflow: hidden;
}
.dish-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dish:hover .dish-media img { transform: scale(1.07); }
.dish-out {
  position: absolute; top: 8px; inset-inline-start: 8px;
  background: #c0392b; color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(192,57,43,.35);
}
.dish-info { padding: 11px 13px 4px; flex: 1; }
.dish-name { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.dish-desc {
  font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dish-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 13px 13px; margin-top: auto; flex-wrap: wrap;
}
.dish-price { font-weight: 800; font-size: 16px; color: var(--brand-700); white-space: nowrap; }
.dish-price span { font-size: 11px; color: var(--muted); font-weight: 600; }
.dish-price.free { font-size: 12.5px; color: #a9791b; }
/* الخصومات — شارة وسعر مشطوب */
.dish-disc-badge {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 10px rgba(229,72,77,.35);
}
.dish-price.discounted { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; white-space: normal; }
.dp-old { text-decoration: line-through; color: var(--muted); font-size: 13px; font-weight: 700; }
.dp-new { color: var(--brand-700); font-weight: 800; font-size: 16px; }
.dp-new span { font-size: 11px; color: var(--muted); font-weight: 600; }
.dish-add {
  border: 0; border-radius: 11px; padding: 8px 13px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff; font-family: inherit; font-weight: 800; font-size: 13px; white-space: nowrap;
  box-shadow: 0 6px 15px rgba(31,107,60,.28); transition: transform .15s, box-shadow .15s;
}
.dish-add:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31,107,60,.42); }
.dish-add:active { transform: scale(.94); }
.dish-add.pulse { animation: addPulse .4s ease; }

.item {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.item::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--brand-500), var(--gold-500));
  opacity: 0; transition: opacity .2s;
}
.item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #e2e8d0; }
.item:hover::before { opacity: 1; }
.item.out { opacity: .55; }
.item-thumb {
  width: 90px; height: 90px; flex: none;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #f6faee, #edf2e2);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), var(--shadow-sm);
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.item:hover .item-thumb img { transform: scale(1.07); }
.item-body { flex: 1; min-width: 0; }
.item-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.item-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.item-badge {
  display: inline-block; margin-inline-start: 8px;
  font-size: 11px; font-weight: 700; color: #b02a2a;
  background: #fde8e8; border-radius: 6px; padding: 1px 7px;
}
.item-right { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 96px; }
.price {
  flex: none; text-align: center;
  min-width: 92px;
  background: #f5f9ec;
  border: 1px solid #e4ecd2;
  border-radius: 12px;
  padding: 8px 12px;
}
.add-btn {
  border: 0; border-radius: 10px; padding: 8px 10px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff; font-family: inherit; font-weight: 800; font-size: 13px;
  box-shadow: 0 6px 16px rgba(31,107,60,.28); transition: .15s;
}
.add-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31,107,60,.4); }
.add-btn:active { transform: scale(.96); }
.add-btn.pulse { animation: addPulse .4s ease; }
@keyframes addPulse { 0%{transform:scale(1)} 40%{transform:scale(.9)} 100%{transform:scale(1)} }
.price .num { font-weight: 800; font-size: 18px; color: var(--brand-700); line-height: 1; }
.price .cur { font-size: 11px; color: var(--muted); font-weight: 600; }
.price.free { background: #fff6e0; border-color: #f2e2b8; }
.price.free .num { font-size: 13px; color: #a9791b; }

.empty {
  text-align: center; color: var(--muted); padding: 50px 20px;
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius);
}

/* زر لوحة التحكم أسفل المنيو */
.admin-cta { text-align: center; margin: 40px 0 8px; }
.admin-cta a {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  color: #fff; font-weight: 800; font-size: 16px;
  padding: 14px 28px; border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31,107,60,.32);
  border: 2px solid var(--gold-500);
  transition: .2s;
}
.admin-cta a:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(31,107,60,.42); }
.admin-cta .sub { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; font-weight: 500; }

/* ============================================================
   الفوتر / التواصل
   ============================================================ */
.footer {
  background: linear-gradient(135deg, var(--brand-800), var(--brand-700));
  color: #fff; padding: 40px 0 30px;
  border-top: 4px solid var(--gold-500);
}
.footer h3 { font-size: 20px; margin-bottom: 4px; }
.footer .addr { color: var(--gold-glow); font-size: 14px; }

/* أعلى الفوتر: الهوية + أيقونات التواصل */
.foot-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 24px;
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-logo {
  width: 58px; height: 58px; border-radius: 16px; object-fit: cover;
  border: 2px solid rgba(255,255,255,.35); box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.foot-brand-txt h3 { margin-bottom: 4px; }

/* أيقونات التواصل الاحترافية */
.foot-social { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-soc {
  position: relative; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; transition: .2s; box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.foot-soc svg { width: 24px; height: 24px; }
.foot-soc:hover { transform: translateY(-3px) scale(1.06); }
.foot-soc.whatsapp { background: #25d366; }
.foot-soc.instagram { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf); }
.foot-soc.facebook { background: #1877f2; }
.foot-soc.tiktok { background: #111; }
.fs-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.82); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .18s;
}
.foot-soc:hover .fs-tip { opacity: 1; }

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.contact-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 14px;
  transition: .2s;
}
.contact-card:hover { background: rgba(255,255,255,.20); transform: translateY(-2px); }
.contact-card .ci {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(143,158,51,.22);
}
.contact-card .cl { font-size: 12px; color: var(--gold-glow); }
.contact-card .cv { font-weight: 700; font-size: 15px; direction: ltr; text-align: right; }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15);
}
.copyright { color: rgba(255,255,255,.75); font-size: 13px; }
.foot-links { display: flex; gap: 10px; flex-wrap: wrap; }
.foot-links a {
  color: #fff; font-weight: 700; font-size: 13px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); padding: 8px 14px; border-radius: 999px; transition: .18s;
}
.foot-links a:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

/* زر واتساب عائم */
.fab {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; border: 0;
  display: grid; place-items: center; font-size: 28px;
  box-shadow: 0 10px 30px rgba(37,211,102,.45);
  transition: .2s;
}
.fab:hover { transform: scale(1.08); }

/* ============================================================
   شاشة تحميل
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--cream); transition: opacity .4s;
}
.loader.hide { opacity: 0; pointer-events: none; }
.spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 5px solid #e8ece0; border-top-color: var(--brand-600);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* حالة الاتصال */
.sync-note {
  text-align: center; font-size: 12px; color: var(--muted);
  padding: 8px; margin-top: 8px;
}
.sync-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-inline-end: 5px; }
.sync-dot.on { background: #23a24d; }
.sync-dot.off { background: #d19a1b; }

@media (max-width: 560px) {
  .hero-actions { width: 100%; }
  .price { min-width: 78px; }
}

/* ============================================================
   شاشة الافتتاح السينمائية + الحركات
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--brand-700), var(--brand-900) 70%, #08200f);
  transition: opacity .8s ease, transform .8s cubic-bezier(.6,.05,.2,1), filter .8s ease;
}
.intro.leaving { opacity: 0; transform: scale(1.08); filter: blur(6px); pointer-events: none; }

/* هالات ضوئية عضوية تتنفّس ببطء — بديل الفيديو */
.intro-aurora {
  position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(38% 34% at 22% 24%, rgba(62,156,93,.55), transparent 65%),
    radial-gradient(34% 30% at 80% 20%, rgba(143,158,51,.42), transparent 65%),
    radial-gradient(46% 40% at 62% 82%, rgba(31,107,60,.55), transparent 68%),
    radial-gradient(30% 26% at 14% 78%, rgba(167,181,74,.28), transparent 66%);
  filter: blur(18px);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

/* حبيبات ناعمة تمنع تدرّج الخلفية من الظهور بشكل مسطّح */
.intro-grain {
  position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 2px 3px;
}

/* طبقة تعتيم لضمان وضوح النص */
.intro-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(90% 80% at 50% 35%, transparent, rgba(8,32,16,.58) 75%),
    linear-gradient(180deg, rgba(8,32,16,.5), rgba(8,32,16,.18) 40%, rgba(8,32,16,.72));
}

/* أوراق نباتية تتساقط بهدوء (تُبنى من menu.js) */
.intro-leaves { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.intro-leaves span {
  position: absolute; top: -12vh;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(140deg, rgba(207,221,151,.5), rgba(62,156,93,.16));
  box-shadow: 0 0 18px rgba(207,221,151,.14);
  filter: blur(.3px);
  animation: leafFall linear infinite;
}
@keyframes leafFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: .75; }
  80%  { opacity: .45; }
  100% { transform: translateY(118vh) rotate(420deg); opacity: 0; }
}

/* المحتوى */
/* width:100% ضروري — بدونه يتمدّد المحتوى خارج الشاشة على الجوال */
.intro-content {
  position: relative; z-index: 3; text-align: center; color: #fff;
  padding: 24px 20px; width: 100%; max-width: 640px; margin: 0 auto;
}

.intro-logo {
  position: relative; width: 136px; height: 136px; margin: 0 auto 24px;
  display: grid; place-items: center;
  opacity: 0; animation: introPop 1s .1s cubic-bezier(.2,.8,.2,1.05) forwards;
}
/* توهّج ناعم خلف الشعار */
.intro-logo .halo {
  position: absolute; inset: -34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(207,221,151,.30), transparent 68%);
  filter: blur(6px);
  animation: haloBreath 4.5s ease-in-out infinite;
}
@keyframes haloBreath { 0%,100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }

/* حلقة متقطّعة تدور ببطء — مستوحاة من أقواس الشعار */
.intro-logo .ring-dash {
  position: absolute; inset: -13px; border-radius: 50%;
  border: 1.5px dashed rgba(207,221,151,.42);
  animation: ringSpin 26s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.intro-logo .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(207,221,151,.55);
  box-shadow: 0 0 40px rgba(143,158,51,.35), inset 0 0 30px rgba(143,158,51,.2);
}
.intro-logo .ring::before, .intro-logo .ring::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  animation: ringPulse 3s ease-out infinite;
}
.intro-logo .ring::after { animation-delay: 1.5s; }
@keyframes ringPulse {
  0% { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.intro-logo .mark {
  font-family: "El Messiri", var(--font);
  font-size: 58px; font-weight: 700; color: var(--gold-glow);
  text-shadow: 0 6px 26px rgba(0,0,0,.4);
}
.intro-logo .mark-img {
  width: 118px; height: 118px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.intro-kicker {
  letter-spacing: 8px; font-size: 12px; font-weight: 800;
  color: var(--gold-glow); text-transform: uppercase; margin-bottom: 10px;
  opacity: 0; animation: introUp .8s .5s ease forwards;
}
.intro-title {
  font-family: "El Messiri", var(--font);
  font-size: clamp(38px, 9vw, 74px); font-weight: 700; line-height: 1.1;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
  opacity: 0; animation: introUp .9s .68s cubic-bezier(.2,.7,.2,1) forwards;
}

/* فاصل زخرفي: خطّان رفيعان تتوسّطهما ورقة */
.intro-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 14px auto 0; max-width: 300px;
  opacity: 0; animation: introUp .9s .78s ease forwards;
}
.intro-rule::before, .intro-rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(207,221,151,.65), transparent);
}
.intro-rule .leaf { font-size: 15px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

.intro-tag {
  margin-top: 12px; font-size: clamp(15px, 3.6vw, 19px); font-weight: 500;
  color: rgba(255,255,255,.9);
  opacity: 0; animation: introUp .9s .86s ease forwards;
}

/* مزايا سريعة تحت العنوان */
.intro-feats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  margin-top: 20px;
  opacity: 0; animation: introUp .9s .96s ease forwards;
}
.intro-feats .ifeat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(207,221,151,.30);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92);
  white-space: nowrap;
}
@media (max-width: 440px) {
  .intro-feats { gap: 7px; }
  .intro-feats .ifeat { padding: 7px 10px; font-size: 11.5px; }
  .intro-btn { padding: 16px 32px; font-size: 17px; }
}

.intro-btn {
  position: relative; overflow: hidden; margin-top: 28px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 40px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: #0d2b17; font-family: inherit; font-weight: 800; font-size: 18px;
  cursor: pointer; box-shadow: 0 16px 40px rgba(143,158,51,.4);
  opacity: 0; animation: introUp .9s 1.16s cubic-bezier(.2,.8,.2,1.1) forwards, glowPulse 2.6s 2s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s;
}
.intro-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 52px rgba(143,158,51,.55); }
.intro-btn:active { transform: translateY(0) scale(.99); }
.intro-btn .arrow { font-size: 22px; transition: transform .25s; }
.intro-btn:hover .arrow { transform: translateX(-6px); }
.intro-btn .shine {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); animation: shine 3.2s 2.4s ease-in-out infinite;
}
@keyframes shine { 0% { right: -60%; } 55%,100% { right: 130%; } }
@keyframes glowPulse {
  0%,100% { box-shadow: 0 16px 40px rgba(143,158,51,.4); }
  50% { box-shadow: 0 18px 52px rgba(143,158,51,.6); }
}

.intro-hint {
  margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.75);
  /* flex (وليس inline-flex) كي ينزل في سطر مستقل تحت الزر */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; animation: introUp 1s 1.45s ease forwards;
}
.intro-hint .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-glow); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* إطار زخرفي في الزوايا */
.intro-corner {
  position: absolute; width: 54px; height: 54px; z-index: 2;
  border: 2px solid rgba(207,221,151,.5); opacity: 0; animation: introFade 1.2s 1.4s ease forwards;
}
.intro-corner.tl { top: 26px; right: 26px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.intro-corner.tr { top: 26px; left: 26px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.intro-corner.bl { bottom: 26px; right: 26px; border-left: 0; border-top: 0; border-radius: 0 0 0 14px; }
.intro-corner.br { bottom: 26px; left: 26px; border-right: 0; border-top: 0; border-radius: 0 0 14px 0; }

@keyframes introPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes introUp  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes introFade{ from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   نظام ظهور العناصر عند التمرير (Reveal)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* موجة أسفل الهيدر */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 1;
  background: var(--cream);
  -webkit-mask: radial-gradient(22px at 50% 0, transparent 98%, #000) repeat-x;
  mask: radial-gradient(22px at 50% 0, transparent 98%, #000) repeat-x;
  -webkit-mask-size: 44px 26px; mask-size: 44px 26px;
  display: none;
}

/* حركة دخول المنيو بعد شاشة الافتتاح */
.site { opacity: 1; }
body.entering .site { animation: siteIn .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes siteIn { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro-aurora, .intro-logo .halo, .intro-logo .ring-dash { animation: none; }
  .intro-logo, .intro-kicker, .intro-title, .intro-rule, .intro-tag,
  .intro-feats, .intro-btn, .intro-hint, .intro-corner { animation-duration: .01ms !important; opacity: 1 !important; }
  .intro-btn { animation: none; opacity: 1; }
  .reveal { transition: none; }
  .intro-leaves { display: none; }
}

/* ============================================================
   السلة العائمة + لوحة إتمام الطلب
   ============================================================ */
.cart-fab {
  position: fixed; inset-inline-start: 18px; bottom: 84px; z-index: 45;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--brand-900); border: 0; border-radius: 999px;
  padding: 12px 18px; font-weight: 800; font-size: 15px;
  box-shadow: 0 14px 34px rgba(143,158,51,.5);
  animation: fabIn .35s cubic-bezier(.2,.8,.2,1.1);
}
.cart-fab:hover { transform: translateY(-2px); }
.cart-fab .cf-count {
  background: var(--brand-800); color: #fff; min-width: 22px; height: 22px;
  border-radius: 999px; display: grid; place-items: center; font-size: 13px; padding: 0 5px;
}
@keyframes fabIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(26,66,42,.5); backdrop-filter: blur(3px);
  display: none; opacity: 0; transition: opacity .25s;
}
.drawer-overlay.show { display: block; opacity: 1; }
.drawer {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 100%; max-width: 420px;
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,.3);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer-overlay.show .drawer { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
}
.drawer-head h3 { font-size: 18px; }
.drawer-head .x { background: rgba(255,255,255,.2); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 9px; font-size: 18px; cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.cart-empty { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 20px; line-height: 2; }
.cart-empty small { font-size: 13px; }

.cart-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.cr-thumb {
  flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
  background: var(--cream); display: grid; place-items: center; font-size: 24px;
  border: 1px solid var(--line);
}
.cr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cr-main { flex: 1; min-width: 0; }
.cr-name { font-weight: 700; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.cr-price { font-size: 13px; color: var(--brand-700); font-weight: 700; margin: 3px 0 9px; }
.cr-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qty { display: flex; align-items: center; gap: 6px; flex: none; }
.qty button {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--cream); font-size: 18px; font-weight: 800; color: var(--brand-700);
  display: grid; place-items: center; cursor: pointer;
}
.qty button:hover { border-color: var(--brand-500); }
.qty .q-num { min-width: 26px; text-align: center; font-weight: 800; }
.cr-del {
  flex: none; height: 32px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: #fdecec; color: #c0392b; border: 1px solid #f6cfcf;
  font-family: inherit; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; transition: .15s;
}
.cr-del:hover { background: #fbdcdc; }
/* خصم داخل صف السلة */
.cr-old { text-decoration: line-through; color: var(--muted); font-size: 12px; font-weight: 700; }
.cr-new { color: var(--brand-700); font-weight: 800; }
.cr-badge { background: #fdecec; color: #e5484d; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }

/* تتبّع الطلب داخل السلة */
.order-track { padding: 14px 16px 0; }
.track-title { font-size: 13px; font-weight: 800; color: var(--brand-800); margin-bottom: 8px; }
.track-card { background: #f4f7ea; border: 1px solid #e5ecd6; border-radius: 14px; padding: 12px 13px; margin-bottom: 10px; }
.track-card.cancelled { background: #fdecec; border-color: #f6cfcf; }
.track-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--brand-800); }
.track-dismiss { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.track-now { display: flex; align-items: center; gap: 9px; margin: 11px 0 12px; }
.tn-ico { font-size: 24px; }
.tn-label { font-size: 16px; font-weight: 800; color: var(--brand-700); }
.track-progress { display: flex; align-items: center; }
.tp-node { width: 14px; height: 14px; border-radius: 50%; background: #d9e2ca; flex: none; }
.tp-node.done { background: var(--brand-600); }
.tp-node.active { background: var(--brand-600); box-shadow: 0 0 0 4px rgba(62,156,93,.22); animation: trackPulse 1.5s ease-in-out infinite; }
.tp-line { flex: 1; height: 3px; background: #d9e2ca; }
.tp-line.done { background: var(--brand-600); }
@keyframes trackPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(62,156,93,.22); } 50% { box-shadow: 0 0 0 7px rgba(62,156,93,.07); } }
.track-cancelled { margin-top: 8px; font-size: 14px; font-weight: 800; color: #c0392b; }
.track-driver { margin-top: 10px; font-size: 12.5px; color: var(--brand-800); }

/* على الهاتف: تُمرَّر السلة كلها معاً لتظهر كل الأصناف والحقول بوضوح */
@media (max-width: 640px) {
  .drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .drawer-head { position: sticky; top: 0; z-index: 3; }
  .drawer-body { flex: 0 0 auto; overflow: visible; }
}

.checkout { border-top: 1px solid var(--line); padding: 14px 16px; background: #fffefa; }

.co-total { margin-bottom: 12px; }
.co-line { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; padding: 3px 0; color: var(--ink); }
.co-line small { font-size: 11px; color: var(--muted); font-weight: 600; }
.co-line b { font-size: 15px; color: var(--brand-700); font-weight: 800; }
.co-line.dep b { color: var(--brand-600); }
.co-line.save, .co-line.save b { color: #e5484d; }
.co-line.loyal, .co-line.loyal b { color: #d6820a; }
.co-line.del b { color: var(--brand-700); }
.loyal-banner {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #fff6e6, #fbfdf6);
  border: 1px solid #cfdd97; border-inline-start: 5px solid #eaa73c;
  border-radius: 14px; padding: 11px 14px; margin-bottom: 12px;
  font-size: 14px; font-weight: 700; color: #9a6a12;
}
.loyal-banner b { color: #c8760a; }
.co-line.grand { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px; }
.co-line.grand b { font-size: 20px; }

/* ملاحظة تأمين الصواني في السلة */
.dep-note {
  background: #f4f7ea; border: 1px solid #e5ecd6; color: var(--brand-800);
  font-size: 11.5px; font-weight: 600; line-height: 1.6; border-radius: 10px;
  padding: 9px 11px; margin-bottom: 12px;
}

/* تنبيه أقل مبلغ للطلب */
.min-note {
  background: #fff7e6; border: 1px solid #f5d99a; color: #8a5a00;
  font-size: 12px; font-weight: 700; line-height: 1.6; border-radius: 10px;
  padding: 9px 11px; margin-bottom: 12px;
}
.co-submit:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.35); }

/* تذكير تأمين الصينية في نافذة النجاح */
.ok-tray {
  background: #f4f7ea; border: 1px solid #e5ecd6; color: var(--brand-800);
  font-size: 12.5px; font-weight: 600; line-height: 1.65; border-radius: 12px;
  padding: 10px 12px; margin: 4px 0 14px;
}

.co-fields .field { margin-bottom: 10px; }
.co-fields label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.co-fields input, .co-fields textarea, .co-fields select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
  font-family: inherit; font-size: 15px; background: #fff; color: var(--ink); outline: none; transition: .15s;
}
.co-fields input:focus, .co-fields textarea:focus, .co-fields select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(62,156,93,.12); }
.co-fields textarea { min-height: 54px; resize: vertical; }
.co-submit {
  width: 100%; border: 0; border-radius: 12px; padding: 14px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff; font-family: inherit; font-weight: 800; font-size: 16px;
  box-shadow: 0 10px 24px rgba(31,107,60,.32); transition: .15s;
}
.co-submit:hover:not(:disabled) { transform: translateY(-2px); }
.co-submit:disabled { opacity: .7; }

/* نافذة نجاح الطلب */
.ok-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26,66,42,.55); backdrop-filter: blur(4px);
  display: none; place-items: center; padding: 20px;
}
.ok-overlay.show { display: grid; }
.ok-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: 22px;
  padding: 32px 26px; text-align: center; box-shadow: var(--shadow-lg);
  animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ok-badge {
  width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; font-size: 38px;
  box-shadow: 0 10px 26px rgba(31,107,60,.4);
}
.ok-card h3 { font-size: 22px; color: var(--brand-800); }
.ok-card p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.ok-num {
  font-size: 24px; font-weight: 900; letter-spacing: 1px; color: var(--brand-700);
  background: var(--cream); border: 1px dashed var(--brand-500);
  border-radius: 12px; padding: 10px; margin: 8px 0; direction: ltr;
}
.ok-sub { font-size: 13px; }
.ok-wa {
  display: block; margin-top: 16px; padding: 13px; border-radius: 12px;
  background: #25d366; color: #fff; font-weight: 800; text-align: center;
}
.ok-close {
  width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; font-family: inherit; font-weight: 700; color: var(--ink);
}

@media (max-width: 560px) {
  .hero-actions { width: 100%; }
  .item-right { min-width: 82px; }
  .item-thumb { width: 74px; height: 74px; }
  .item { gap: 12px; }
  .cart-fab { inset-inline-start: 12px; bottom: 78px; }
  /* كروت مضغوطة لعرض العمودين بوضوح على الهاتف */
  .dish-info { padding: 8px 9px 2px; }
  .dish-name { font-size: 12.5px; line-height: 1.35; }
  .dish-desc { font-size: 10.5px; -webkit-line-clamp: 2; }
  .dish-foot { padding: 6px 9px 10px; gap: 6px; }
  .dish-price { font-size: 13px; }
  .dish-price span { font-size: 10px; }
  .dish-add { padding: 6px 9px; font-size: 12px; border-radius: 9px; }
}

/* ============================================================
   لمسات حركية احترافية (Premium motion)
   ============================================================ */

/* شريط تقدّم التمرير أعلى الصفحة */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0; height: 4px; width: 0%;
  z-index: 300; transform-origin: right center;
  background: linear-gradient(90deg, var(--gold-500), var(--brand-500), var(--gold-400));
  box-shadow: 0 1px 8px rgba(143,158,51,.5);
  transition: width .12s linear;
}

/* زر لوحة التحكم في الهيدر */
.chip.admin-chip {
  background: rgba(255,255,255,.10);
  border-color: rgba(242,217,172,.55);
}
.chip.admin-chip:hover { background: rgba(255,255,255,.22); }

/* صورة الطبق — إشارة أنها قابلة للتكبير */
.dish-media img.zoomable { cursor: zoom-in; }

/* عارض الصورة الكامل (Lightbox) */
.img-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.93); display: none;
  place-items: center; padding: 20px;
  animation: lbFade .2s ease;
}
.img-lightbox.show { display: grid; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.img-lightbox .lb-img {
  max-width: 94vw; max-height: 84vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: pop .25s ease;
}
.lb-back {
  position: fixed; top: 16px; inset-inline-start: 16px; z-index: 210;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-family: inherit; font-weight: 800; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(6px); transition: .18s;
}
.lb-back:hover { background: rgba(255,255,255,.28); }
.lb-back span { font-size: 18px; }

/* ظل الهيدر اللاصق عند التمرير */
.toolbar { transition: filter .25s; }
.toolbar.scrolled .toolbar-card { box-shadow: 0 12px 34px rgba(24,74,45,.22); }

/* شعار متحرك في الهيدر */
.brand-badge { animation: badgeFloat 5s ease-in-out infinite; }
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-3deg); }
}
.hero:hover .brand-badge { animation-play-state: paused; transform: scale(1.06) rotate(4deg); }

/* أزرار الفئات — نبض عند التفعيل */
.cat-pill { position: relative; }
.cat-pill.active { animation: pillPop .35s cubic-bezier(.2,.8,.2,1.2); }
@keyframes pillPop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* دخول كروت الأطباق بحركة أنيقة (Stagger عبر transition-delay من JS) */
.dish.reveal { opacity: 0; transform: translateY(34px) scale(.94); }
.dish.reveal.in { opacity: 1; transform: none; }

/* لمعان يمرّ على صورة الطبق عند المرور */
.dish-media::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.dish:hover .dish-media::after { animation: shineSweep .8s ease; }
@keyframes shineSweep { to { transform: translateX(260%) skewX(-18deg); } }

/* السعر — لمعة خفيفة */
.dish-price { position: relative; }

/* زر السلة العائم — طفو خفيف + قفزة عند الإضافة */
.cart-fab { animation: fabIn .35s cubic-bezier(.2,.8,.2,1.1), fabBob 3.4s ease-in-out .5s infinite; }
@keyframes fabBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cart-fab.bump { animation: fabBump .5s cubic-bezier(.2,.8,.2,1.4); }
@keyframes fabBump {
  0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-6deg); }
  70% { transform: scale(.94); } 100% { transform: scale(1); }
}
.cart-fab .cf-count { transition: transform .25s; }
.cart-fab.bump .cf-count { transform: scale(1.5); }

/* طبقة الطيران إلى السلة */
.fly-layer { position: fixed; inset: 0; z-index: 950; pointer-events: none; overflow: hidden; }
.fly-item {
  position: fixed; width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); border: 2px solid #fff;
  will-change: transform, opacity; transition: transform .75s cubic-bezier(.5,-.2,.3,1), opacity .75s ease;
}
.fly-item img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .brand-badge, .cart-fab { animation: none !important; }
  .dish.reveal { opacity: 1; transform: none; }
  .dish-media::after { display: none; }
  .scroll-progress { transition: none; }
  .srl { animation: none !important; }
}

/* ============================================================
   لافتة المتجر المغلق + حالة التعطيل
   ============================================================ */
.store-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #fbe9e6, #fdf3f0);
  border: 1px solid #f2c9c1; border-inline-start: 5px solid #c0392b;
  border-radius: 16px; padding: 14px 16px; margin-top: 18px;
  box-shadow: var(--shadow-sm); animation: bannerIn .4s ease;
}
.store-banner .sb-ico { font-size: 30px; }
.store-banner .sb-text { display: grid; }
.store-banner .sb-text b { color: #b8352a; font-size: 16px; }
.store-banner .sb-text span { color: #9a5a52; font-size: 13px; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
body.store-closed .dish-add { opacity: .82; }

/* رسالة تنبيه عائمة (المتجر مغلق) */
.note-toast {
  position: fixed; bottom: 92px; left: 50%; transform: translate(-50%, 20px);
  z-index: 95; max-width: 92%;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-700));
  color: #fff; padding: 13px 20px; border-radius: 14px;
  font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: 8px; text-align: center;
  border: 1px solid rgba(242,217,172,.4);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.note-toast.show { opacity: 1; transform: translate(-50%, 0); }
.note-toast .nt-ico { font-size: 17px; }
.note-toast.add-toast { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); border-color: rgba(167,181,74,.6); }
@media (max-width: 560px) { .note-toast { font-size: 13px; max-width: 88%; } }

/* ============================================================
   الشريط الجانبي للتواصل (متحرك)
   ============================================================ */
.social-rail {
  position: fixed; inset-inline-end: 16px; bottom: 22px; z-index: 46;
  display: flex; flex-direction: column; gap: 12px;
}
body.intro-open .social-rail { display: none; }
.srl {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  animation: railIn .5s cubic-bezier(.2,.8,.2,1.2) both;
  transition: transform .2s;
}
.srl:hover { transform: scale(1.12) translateY(-2px); }
.srl.whatsapp { background: #25d366; animation: railIn .5s both, waPulse 2.4s ease-in-out 1.2s infinite; }
.srl.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.srl.facebook { background: #1877f2; }
.srl.tiktok { background: #111; }
.srl.phone { background: var(--brand-600); }
.srl-ico { line-height: 1; display: grid; place-items: center; }
.srl-ico svg { width: 25px; height: 25px; display: block; }
.srl-tip {
  position: absolute; inset-inline-end: 58px; top: 50%;
  transform: translateY(-50%) scale(.85);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: .18s;
}
.srl:hover .srl-tip { opacity: 1; transform: translateY(-50%) scale(1); }
@keyframes railIn { from { opacity: 0; transform: translateX(30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes waPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(37,211,102,.4); } 50% { box-shadow: 0 8px 32px rgba(37,211,102,.85); } }

@media (max-width: 560px) {
  .srl { width: 44px; height: 44px; }
  .srl-ico svg { width: 22px; height: 22px; }
  .social-rail { gap: 10px; bottom: 16px; }
}


/* ============================================================
   توقيع المصمّم على شاشة الافتتاح
   يتبع لغة الثيم نفسها: حبّة زجاجية بحدود زيتونية على الخلفية
   الخضراء الداكنة، وشارة الدعوة بتدرّج الزيتوني نفسه كزر الدخول.
   موضعه داخل تدفّق المحتوى (لا absolute) كي لا يزاحم زخرفة الزوايا
   ولا يخرج عن الشاشة على الهواتف القصيرة.
   ============================================================ */
.intro-credit {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; padding: 7px 7px 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(207,221,151,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.82);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  opacity: 0; animation: introUp 1s 1.72s ease forwards;
  transition: background .25s, border-color .25s, transform .25s, color .25s, box-shadow .25s;
}
.intro-credit:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(207,221,151,.55);
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.intro-credit:active { transform: translateY(0); }
.intro-credit:focus-visible { outline: 2px solid var(--gold-glow); outline-offset: 3px; }
.intro-credit .ic-txt b { color: var(--gold-glow); font-weight: 800; }

.intro-credit .ic-cta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: #0d2b17; font-weight: 800; font-size: 11.5px;
  box-shadow: 0 4px 12px rgba(143,158,51,.35);
}
.intro-credit .ic-cta svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

@media (max-width: 440px) {
  .intro-credit {
    margin-top: 18px; gap: 8px; padding: 6px 6px 6px 12px; font-size: 11px;
  }
  .intro-credit .ic-cta { padding: 5px 10px; font-size: 10.5px; }
  .intro-credit .ic-cta svg { width: 12px; height: 12px; }
}
/* شاشات قصيرة جداً: نُبقي التوقيع لكن نضغط المسافات كي لا يُدفع خارج الشاشة */
@media (max-height: 700px) {
  .intro-credit { margin-top: 14px; }
}

/* على الشاشات القصيرة يهبط التوقيع إلى شريط زخرفة الزوايا السفلية فيتداخل معها.
   الزوايا زخرفة بحتة، فنخفي السفليتين فقط ونُبقي العلويتين — التوقيع يصير
   هو مرساة أسفل الشاشة بدل التزاحم. */
@media (max-height: 800px) {
  .intro-corner.bl, .intro-corner.br { display: none; }
}