/* الرموز في `tokens.css` — يُحمَّل قبل هذا الملف في كل صفحة.
   ولا تُعرَّف هنا: التعريف في موضعين يفترق بأول تعديل. */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ar);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--s-10);
}
/* احتياطي لما قبل أول قياس فقط — القيمة الفعلية يضبطها syncBottomInset
   وقت التشغيل. الرقم الثابت هنا كان يُصيب الرئيسية ويُخطئ صفحة المطعم. */
body.has-bottom-tabbar { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

/* الإخفاء يغلب أي عرض. بلا !important تنهزم [hidden] في أنماط المتصفّح
   أمام أي منتقٍ بصنف — و`.bottom-tabbar { display: flex }` يفعل ذلك، فكان
   `bottomTabbar.hidden = true` في شاشة الترحيب لا يفعل شيئًا إطلاقًا:
   يُضبط الوسم ويبقى الشريط ظاهرًا. وعلى شاشةٍ ضيّقة (٣٠٨px عرضًا) يتجاوز
   محتوى الترحيب الشاشة، فيغطّي الشريط الثابت زرّ «التالي».

   قاعدة عامة لا خاصّة بالشريط: `hidden` مستعملة في زرّ السلة وزرّ الخروج
   أيضًا، وكانت مكسورة فيهما بالطريقة نفسها. */
[hidden] { display: none !important; }

/* اللون يُورَث لا يُترك للنظام. iOS يلوّن نصّ أي <button> بأزرق النظام
   افتراضيًّا، فبطاقات اختيار الموقع كانت تظهر بأزرق أبل لا بلوننا —
   ولا يُكتشف على سطح المكتب لأن كروم يرث الأسود.

   وأيقوناتها كانت زرقاء للسبب نفسه مضاعفًا: القاعدة كانت `.loc-quickpick i`،
   و`renderSavyoIcons` يستبدل عنصر <i> بـ<svg> — فيموت المنتقي بعد الرسم
   وترث الأيقونة لون الزرّ. ثمانية منتقيات كانت مصابة بهذا. */
button { font-family: inherit; color: inherit; }

/* ---------- أثر التركيز ---------- */
/* لم يكن في الملف **ولا موضع** `focus-visible` — أي أن من يتنقّل بلوحة
   مفاتيح أو بالتحكّم بالتبديل (Switch Control) لا يرى أين هو إطلاقًا.
   وApple صريحة: «Always include a press state for a custom button. Without
   a press state, a button can feel unresponsive». وحالة الضغط موجودة
   (`:active`)، وهذه أختها الغائبة.

   و`:focus-visible` لا `:focus`: الثاني يرسم إطارًا عند كل ضغطة فأرة أو
   إصبع أيضًا، فيُقرأ عطلًا. والأول لا يظهر إلا حين يكون الإدخال بلوحة
   المفاتيح فعلًا — وهو حكم المتصفّح لا حكمنا.

   و`outline` لا `box-shadow`: الأول يتبع `border-radius` تلقائيًّا، ويظهر
   في وضع التباين العالي بالنظام حيث يُلغى الظلّ. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--tint-emerald);
  outline-offset: 2px;
  border-radius: inherit;
}
/* الحقول تحمل أثرها بالحدّ فلا تُزاحَم بإطارٍ ثانٍ فوقه */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.auth-input:focus-visible,
.menu-search input:focus-visible,
.search-bar input:focus-visible { outline: none; }

.latin {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}
.num { font-variant-numeric: tabular-nums; }

svg { display: block; }
/* المقاسات ارتفعت درجة واحدة — الأيقونة كانت "شوي صغيرة" عند أول تجربة
   لموشن الشريط السفلي. الأيقونات الجديدة (Solar) تحمل stroke-width
   خاصًا بها داخل كل مسار، فالقيمة هنا تبقى فعّالة على أيقونات Lucide
   الاحتياطية (الأطعمة) وحدها — انظر renderSavyoIcons في icons.js. */
.icon-xs { width: 14px; height: 14px; stroke-width: 2.25; }
.icon-sm { width: 19px; height: 19px; stroke-width: 2.1; }
.icon-md { width: 24px; height: 24px; stroke-width: 2; }
.icon-lg { width: 40px; height: 40px; stroke-width: 1.6; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  /* زجاج فعلي لا لونٌ شبه مصمت.
     كانت ٨٨٪ مصمتة فلا يظهر تحتها شيء — والزجاج يبدأ يُحسّ عند السبعين.
     والتشبّع يرفع لون ما يمرّ خلفه فلا يبهت رماديًّا. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 82%, transparent) 0%,
    color-mix(in srgb, var(--bg) 64%, transparent) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.6);
  /* بلا هذي السطر لا ضبابية إطلاقًا على سفاري/آيفون — كانت ناقصة هنا
     بينما الشريط السفلي يحملها، فاختلف الشريطان على نفس الجهاز. */
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-6) var(--s-7);
  max-width: 480px;
  margin: 0 auto;
}
.topbar-word {
  /* خط العلامة — لاتيني وحده، ولهذا الاسم savyo لا «سافيو» */
  font-family: 'Bagel Fat One', cursive;
  font-weight: 400;
  font-size: var(--t-title);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--emerald);
}

.cart-button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--action-glass);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  color: var(--action-ink);
  border: none;
  box-shadow: var(--action-glass-shadow);
  border-radius: var(--r-full);
  padding: var(--s-4) var(--s-6);
  font-size: var(--t-callout);
  font-weight: 700;
  cursor: pointer;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s-7);
}

/* ---------- section heading ---------- */
.section-title {
  margin: 4px 0 2px;
  font-size: var(--t-heading);
  font-weight: 700;
}
.section-desc {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: var(--t-callout);
}

/* ---------- top location line ---------- */
.topline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-muted);
  font-size: var(--t-footnote);
  margin-bottom: 8px;
}
.topline .icon-sm { color: var(--emerald); }

/* ---------- buttons ---------- */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-callout);
  font-weight: 600;
  padding: var(--s-3) 0;
  margin-bottom: 6px;
  cursor: pointer;
}
.btn-back:hover { color: var(--text); }

/* زجاجٌ زمرديّ لا لوحٌ أسود. كان `--emerald` وهو حبرٌ داكن (#14231F)
   يُقرأ أسود على بطاقةٍ بيضاء — لوحٌ مصمت يثقل كل شاشة فيها زرّ رئيسي.
   والزجاج هنا **ملوَّن** لا شفّاف: زرّ الفعل الأول لا يجوز أن يكون
   بالكاد مرئيًّا، فالتدرّج يبقى مشبعًا والحافّة المضيئة والحلقة هما ما
   يعطيانه مادّة الزجاج. */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  background: var(--action-glass);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  color: var(--action-ink);
  border: none;
  box-shadow: var(--action-glass-shadow);
  border-radius: var(--r-md);
  padding: var(--s-6);
  font-size: var(--t-body);
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) {
  .btn-primary:hover {
    background: linear-gradient(180deg,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 86%, transparent) 100%);
  }
}
.btn-primary:active, .btn-outline:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  /* نفس مادّة زرّ الفعل بوزنٍ أخفّ: الثانويّ يشترك في اللغة ويختلف في
     الحضور. والشفاف التام كان يجعله يبدو فراغًا محاطًا بخطّ لا سطحًا
     يُضغط. */
  background: var(--lg-fill);
  color: var(--action-ink);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-edge), var(--lg-ring);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-6);
  font-size: var(--t-body);
  font-weight: 600;
  cursor: pointer;
}

/* الليموني محجوز للحظة يتحقق فيها التوفير: تأكيد الطلب، شريط الاستلام.
   الحبّة الكاملة والسهم المنزلق من نمط uiverse، بدرجتنا لا بدرجة الأصل. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  margin-top: 12px;
  background: var(--lime);
  color: var(--on-lime);
  text-align: center;
  font-weight: 800;
  font-size: var(--t-body);
  padding: var(--s-7) var(--s-8);
  border: 1px solid transparent;
  /* حبّة كاملة لا زوايا مستديرة: الشكل نفسه يقول "هذا هو الفعل الأخير" */
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
.cta:hover { background: #BCEA2B; }
.cta:active { transform: scale(0.96); }
/* المقفل يُقرأ مقفلًا. الشفافية وحدها تُبقي الليمونيّ ليمونيًّا — دعوةً
   للضغط تُحبَط عند الضغط، وهو نفس العطب الذي يعالجه قفلُه أصلًا. */
.cta:disabled,
.cta[disabled] {
  opacity: 1;
  cursor: default;
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: none;
}
.cta:disabled:active,
.cta[disabled]:active { transform: none; }
.cta-press[disabled] .cta-press-top {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
  transform: none;
}

/* السهم ينزلق للأمام عند اللمس — إيماءة "للأمام" تؤكد أن الضغطة تنقلك
   لخطوة تالية لا تفتح نافذة. بالعربية الاتجاه لليسار، فالإزاحة سالبة. */
.btn-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}
/* أي زر فيه سهم يتحرّك سهمه — لا نعدّد الأصناف واحدًا واحدًا، فكل زر جديد
   كان ينسى الحركة ويخرج شاذًا عن البقية. */
button:hover > .btn-arrow,
button:active > .btn-arrow,
button:hover .cta-main > .btn-arrow,
button:active .cta-main > .btn-arrow { transform: translateX(-5px); }

@media (prefers-reduced-motion: reduce) {
  .btn-arrow { transition: none; }
}

/* ---------- مساحة اللمس ---------- */
/* ٤٤ بكسلًا هي الحدّ الأدنى المعتمد لهدف اللمس، وأزرار هذا التطبيق كانت
   تحته: ٣٠×٣٠ للإضافة و± ، و٣٢×٢٩ لمفتاح المواقع — مقيسة على ٣٠٨ بكسل،
   وهو عرض جهاز المالك. والخطأ في الضغط هنا أغلى من غيره: `+` و`−`
   متجاوران، فالضغطة الطائشة **تغيّر الطلب** لا تفتح شاشة تُغلق.

   والحلّ توسيع **الهدف** لا الشكل: `::after` شفّاف يمتدّ حول الزرّ إلى
   ٤٤، فيبقى المرئي بمقاسه ويكبر ما يلتقط الإصبع. وتوسيع الشكل نفسه كان
   سيدفع صفّ السلّة ويعيد الفيض الذي أُصلح على ٣٠٨.
   و`overflow: visible` شرط: الزرّ دائريّ ومقصوصٌ افتراضًا. */
.btn-icon,
.loc-switch-seg,
.rcard-fav-btn,
.offer-cat { position: relative; }
.btn-icon::after,
.loc-switch-seg::after,
.rcard-fav-btn::after,
.offer-cat::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  height: max(100%, 46px);
  /* الحدّ الأدنى للمس: لا يُرى، لكنه **يستقبل** الضغطة — وهو ابنٌ للزرّ
     فتصله الضغطة منه. و`pointer-events: none` هنا يلغي الغرض كلّه. */
  background: none;
}
/* الأزرار المستديرة المعزولة تتوسّع في المحورين */
.btn-icon::after,
.loc-switch-seg::after { width: max(100%, 46px); }
/* والأزرار داخل صفٍّ مزدحم رأسيًّا وحده: زرّ المتابعة يقف داخل بطاقةٍ
   كلّها قابلة للضغط، وتوسيعه أفقيًّا يعني أن ضغطةً بجانبه تتابع المطعم
   بدل أن تفتحه. */
.rcard-fav-btn::after,
.offer-cat::after { width: 100%; }

/* **الطبقة تحتاج ترتيبًا، لا وجودًا فقط.** كانت موجودةً بارتفاع ‎44px‎
   ومع ذلك قِيس هدف زرّ المتابعة ‎26‎ وحبّة التصنيف ‎33‎: الطبقة تمتدّ فوق
   جارٍ لاحقٍ في الترتيب فيُرسم فوقها، والضغطة تصل إليه لا إليها. ورفعُها
   طبقةً واحدة يحسم الأمر بلا أن يُرى شيء.
   وقياسُ صندوق الزرّ وحده لا يكشف هذا — الطبقة عنصرٌ زائف لا صندوق له في
   DOM. القياس الصحيح: جسُّ نقاطٍ فوق الزرّ وتحته ورؤية إن كانت تصيبه. */
.btn-icon::after,
.loc-switch-seg::after,
.rcard-fav-btn::after,
.offer-cat::after { z-index: 2; }

/* وثلاثةٌ لم تكن لها طبقةٌ أصلًا. المقيس: ‎20‎ و‎36‎ و‎28‎. */
.hero-loc-more,
.filter-pill,
.view-toggle-btn { position: relative; }
.hero-loc-more::after,
.filter-pill::after,
.view-toggle-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  height: max(100%, 46px);
  /* رأسيًّا وحده: زرّا العرض متجاوران بفجوةٍ ثمانية، فتوسيعهما أفقيًّا
     يجعل كلًّا منهما يبتلع حافّة الآخر. */
  width: 100%;
  background: none;
  z-index: 2;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* `--action-ink` لا `--emerald`: الأخير حبرٌ شبه أسود، وقد طُلب رفعه عن
     الأزرار. وهو أيضًا ينقلب فاتحًا في الظلام فيصلح للاثنين. */
  color: var(--action-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--action-glass);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: none;
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 4px 14px -6px rgba(20, 35, 31, 0.22);
}
/* خلف حارس التحويم: على شاشة اللمس `:hover` **يعلق بعد الضغط** فتبقى
   بقعة `--surface-2` رمادية على الزرّ حتى يلمس العميل مكانًا آخر. وهذا
   هو «تأثير اللون» الذي يُرى على كل زرّ — لا التعبئة ولا التشبيع.
   والملف يستعمل هذه الحيلة في أربعة مواضع أخرى أصلًا. */
@media (hover: hover) {
  .btn-icon:hover { background: var(--surface-2); }
}
/* `.btn-icon.solid` حُذفت: كانت `background: inherit` وهي ترث خلفية
   **الأب** لا القاعدة الأساس، فتمسح تدرّج الزجاج وتضع مكانه خلفية
   البطاقة — أي أنها لم تكن تفعل ما يقوله تعليقها. والصنف نُزع من الوسم
   فلم يبق له مستعمل واحد. */


/* ---------- بطاقة المطعم ---------- */
/* صورة فوق وبيانات تحت، بدل الصف الأفقي بمصغّرة ٥٢ بكسل. الصورة هي ما
   يتعرّف عليه العميل قبل قراءة أي حرف، والصف الأفقي كان يعاملها كزخرفة
   جانبية. */
.rcard {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  /* الظل هو ما يفصل البطاقة عن الصفحة بعد ما صارت الاثنتان بيضاوين.
     خافت ومنخفض عمدًا: الهدف حافة تُحَس لا بطاقة عائمة. */
  box-shadow: 0 1px 3px -1px var(--shadow);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  /* حشوةٌ تُنزل الصورة عن حواف البطاقة — نفس ما صحّح صفّ المنيو.
     الصورة الممتدّة من حافّة لحافّة يقتطع منها اللوح الطافي، ويقصّها
     `cover` من أطرافها، فتُقرأ مقطوعةً مرّتين. والبلاطة المنزاحة تُرى
     كاملةً ولها حدٌّ خاصّ بها. */
  padding: var(--s-5);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.rcard:active { transform: scale(0.985); }

/* صفر: اللوح لم يعد يطفو فوق الصورة — الصورة صارت بلاطةً منزاحة داخل
   البطاقة، فلا حدَّ لها يحتاج تغطية. والطفو فوق بلاطةٍ مستديرة يقتطع
   منها بدل أن يُخفي حدًّا. */
.rcard { --card-overlap: 0px; }
/* عرض الصفوف بلا طفو، فالشارة ترجع لقاعدتها. */
#home-content.view-rows .rcard { --card-overlap: 0px; }

.rcard-media {
  position: relative;
  /* بلاطةٌ مستديرة كاملة: أربع زوايا لا زاويتان. وانحناؤها أصغر من
     انحناء البطاقة بقدر الحشوة بينهما — وهي قاعدة الاستدارة المتداخلة. */
  border-radius: var(--r-md);
  overflow: hidden;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* صورة الطبق تملأ الإطار (cover): هي صورة طعام لا شعار، والقص من أطرافها
   لا يفقدها معنى. الشعار انتقل لسطر البيانات بحجم صغير. */

.rcard-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* بلا صورة طبق: رسمة التصنيف كبيرة بالوسط — تعرّف بنوع المطعم فورًا،
   وأفضل من حرفين مجرّدين لا يقولان شيئًا عن الأكل. */
.rcard-art {
  display: flex;
  align-items: center;
  justify-content: center;
  /* **تمتدّ.** `.cat-placeholder` بداخلها عرضها وطولها ‎100٪‎، لكن الحاوية
     نفسها كانت عنصر فلكس ينكمش على محتواه — فقيس الاحتياطيّ ‎63×34‎ داخل
     صندوقٍ ارتفاعه ‎168‎: كلمةٌ صغيرة تطفو في فراغٍ رماديّ. وهذا هو المشهد
     الغالب اليوم لأن **لا مطعم رفع غلافًا بعد**، فأوّل ما يراه العميل
     بطاقاتٌ فارغة. والسطران يجعلانه لوحًا ملوّنًا باسم التصنيف في وسطه. */
  width: 100%;
  height: 100%;
}
.rcard-art svg { width: 62px; height: 62px; opacity: 0.92; }

/* مؤشر اكتمال ملف المطعم بلوحة المندوب */
/* أغمق من --coral: هذا تنبيه يُقرأ لا لمسة زينة، والبرتقالي الفاتح يضيع
   على البطاقة الفاتحة. */
.missing-note { color: var(--danger); font-weight: 600; }
.complete-note { color: var(--emerald); font-weight: 600; }

/* ---------- شارة "قيد المراجعة" (لوحتا المطعم والمندوب) ---------- */
/* بدونها يعدّل صاحب اللوحة سعرًا، يراه لم يتغيّر، فيظن الحفظ فشل ويكرّر.
   الشارة تشرح السبب بمكانه بدل ما يُترك يخمّن. */
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-footnote);
  font-weight: 700;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  color: var(--danger);
  white-space: nowrap;
}
.review-badge .icon-xs { width: 13px; height: 13px; }
/* الصنف الجديد كليًا: أوضح من "قيد المراجعة" لأنه مخفي عن العميل تمامًا
   لا مجرد حقل منه ينتظر */
.review-badge.is-new {
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
  color: var(--emerald);
}
.edit-card.is-pending { border-color: color-mix(in srgb, var(--coral) 35%, transparent); }
.review-note {
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

/* الشعار بديلًا عن صورة الطعام: contain لا cover — الشعار يُقصّ فيفقد معناه،
   بعكس صورة الطبق التي تحتمل القصّ. */
.rcard-art-logo { position: relative; display: flex; align-items: center; justify-content: center; }
.rcard-art-logo > svg { visibility: hidden; }
.rcard-art-logo.art-fallback > svg { visibility: visible; }
.rcard-art-logo > img {
  position: absolute;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

/* الشارة فوق الصورة بالزاوية — أول ما تلتقطه العين بعد الصورة نفسها */
.rcard-media .rcard-disc {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--lime);
  color: var(--on-lime);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-footnote);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(20, 35, 31, 0.14);
}

/* حبّة المتابعة.
   الحلقة الدوّارة أُسقطت بعد محاولتين: تقنيتها تقسّم الكلمة حرفًا حرفًا
   فتكسر اتّصال العربية (بُني البديل بمسار SVG ونجح شكلًا)، لكنها تبقى
   عنصرًا يدور على **كل بطاقة في قائمة تُمرَّر** — يسحب العين عن الطعام،
   ويكلّف المعالج الرسومي على الأجهزة الضعيفة. وهذا هو السبب نفسه الذي
   قُصر لأجله التمويه على ما خلفه صورة.
   والبديل نصٌّ وحده: حالتان تُقرآن بالكلمة، بلا أيقونة قائدة. */
.rcard-fav-btn {
  flex-shrink: 0;
  /* أصغر وأكثر استطالة: كان ‎59×39‎ — مربّعًا تقريبًا — فبدا شاذًّا في صفٍّ
     ارتفاع نصّه ‎12‎. والهدف يبقى ‎44‎ رأسيًّا بالطبقة الشفّافة لا بالمقاس
     المرئي، فالتصغير لا يمسّ سهولة الضغط. */
  /* والارتفاع من نفس المتغيّر الذي يحكم الوسم بجانبه — انظر `.rcard-mark`. */
  display: inline-flex;
  align-items: center;
  min-height: var(--rcard-chip-h);
  padding-block: 0;
  padding-inline: var(--s-5);
  /* مستطيلٌ لا حبّة: صفّ التصنيف والحيّ كلّه حبّاتٌ مستديرة، فحبّةٌ
     أخرى بينها تُقرأ وسمًا لا زرًّا. الزاوية المكسورة تقول «هذا يُضغط». */
  border-radius: var(--r-sm);
  /* الأزرق هنا **قرار مالك**: عُرض عليه مرّتين على أنه خارج اللوحة، فأقرّه
     صراحةً («عاجبني اللون خلّيه»). فلا يُغيَّر ولا يُطرح ثانيةً. */
  border: 1px solid transparent;
  background: var(--invite-blue);
  color: var(--on-invite-blue);
  font-family: inherit;
  font-size: var(--t-caption);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out);
}
.rcard-fav-btn:active { transform: scale(0.94); }
/* المتابَع ليمونيّ: المتابعة إذنٌ يُعطى مرّة — لحظة تثبيتٍ يستحقّها
   الليموني — لا تنقّلٌ يتكرّر. وعلى الحالة الخاملة يبعثره على كل بطاقة. */
.rcard-fav-btn.is-following {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--on-lime);
}
.rcard-fav-btn.is-following { color: var(--emerald); }
/* الحشو على `path` لا على `svg`: مسارات الأيقونة تحمل `fill="none"` وسمًا
   على نفسها، ووسم العرض يغلب الوراثة من الأب. فالقاعدة القديمة (على svg)
   لم تملأ قلبًا واحدًا منذ كُتبت — لا هنا ولا في رأس صفحة المطعم. */
.rcard-fav-btn.is-following svg path { fill: currentColor; }

/* "مغلق الآن" شريط عبر الصورة لا وسمًا صغيرًا: الإغلاق يغيّر ما يقدر عليه
   العميل كليًا، فيستحق حضورًا لا يُفوَّت. */
.rcard-closed-veil {
  position: absolute;
  inset: 0;
  display: flex;
  /* **في الركن لا في الوسط.** الوسط موضع اسم التصنيف في البطاقات التي لا
     صورة لها — وهي أغلبها اليوم — فحبّةٌ هناك تمحو ما جاءت تعلو عليه.
     والركن هو موضع «جديد» أصلًا، فالحبّتان بلغةٍ واحدة. */
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--s-5);
  /* **الستارة تُعتّم، والحبّة تُقرأ.** كانت الستارة وحدها تحمل النصّ فوق
     صورةٍ لا نعرف لونها — فالتباين رهنُ ما رفعه المطعم، وقيس ‎4.17:1‎ دون
     الحدّ. وتغميقُها حتى تضمن القراءة يُخفي الصورة نفسها، وقد أخفى معها
     اللوحَ الملوّن واسمَ التصنيف في البطاقات التي لا صورة لها — وهي
     أغلبها اليوم.
     فالتعتيم صار بقدرٍ يقول «مقفل» ولا يمحو ما تحته، والنصّ يحمل أرضيّته
     الصلبة فيُقرأ على أي شيء: أبيضُ على ‎#14231F‎ = ‎15.8:1‎. */
  background: rgba(20, 35, 31, 0.34);
}
/* وأخفّ حيث لا صورة: لا شيء يُعتَّم إلّا لوحُ التصنيف نفسه. */
.rcard-media:not(.has-photo) .rcard-closed-veil { background: rgba(20, 35, 31, 0.16); }
.rcard-closed-chip {
  background: #14231F;
  color: var(--on-emerald);
  font-weight: 800;
  font-size: var(--t-footnote);
  padding: var(--s-2) var(--s-6);
  border-radius: var(--r-full);
  box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.45);
}

/* اللوح الزجاجي يركب أسفل الصورة بدل أن يقف تحتها بخطٍّ فاصل.
   البطاقة كانت طبقتين ملصوقتين — صورة ثم مستطيل أبيض — والحدّ بينهما
   يُقرأ التصاقًا لا تصميمًا. اللوح الآن يغطّي آخر ٣٤ بكسلًا من الصورة،
   فتمرّ الصورة تحته مموّهة ويصير النصّ جزءًا من البطاقة لا لصاقةً عليها.

   وهي خامة الرصيفين نفسها (.tabbar-dock و.rhead-dock) حرفًا بحرف:
   ثلاثة أسطح زجاجية بثلاث وصفات تُقرأ سهوًا لا لغةً واحدة.

   والتدرّج يزداد تعتيمًا نزولًا: أعلاه فوق الصورة فيُترك شفافًا لتُرى،
   وأسفله فوق أرضية البطاقة البيضاء فلا حاجة لشفافيته — وبهذا يختفي
   الخطّ الذي كانت تصنعه نهاية الصورة خلف اللوح. */
.rcard-body {
  position: relative;
  /* ١٨ لا ٣٤: اللوح الزجاجي يطفو فوق الصورة عمدًا، لكن ٣٤ كانت تبتلع
     ٢٠٪ من الصورة (٣٤ من ١٦٨) — ومعها شعارُ البطاقة البالغ ٦٨ بكسل كان
     يبدأ فوق حافّة الصورة بـ١٨ فيغطّي أوضح جزء منها. بـ١٨ يبدأ الشعار
     ملاصقًا للحافّة لا فوقها، ويبقى الطفو محسوسًا.

     والرقم متغيّرٌ لا حرفيّ: الشارات أسفل الصورة ترتفع بمقداره، ورقمان
     منفصلان يفترقان بأول تعديل فتُدفن الشارة تحت اللوح بلا أن ينتبه أحد. */
  /* لا لوحَ طافيًا ولا زجاج: البطاقة صارت سطحًا واحدًا تقف فيه بلاطة
     الصورة، والبيانات تحتها على السطح نفسه. ولوحٌ ثانٍ بلونٍ ثانٍ داخل
     بطاقةٍ واحدة يُقرأ طبقتين حيث لا طبقتين. */
  margin-top: var(--s-5);
  padding: 0;
  background: none;
  box-shadow: none;
  border-top: none;
}

/* التمويه مقصورٌ على لوحٍ خلفه صورة فعلًا. بلا صورة لا يموّه شيئًا — يبقى
   تكلفةً على المعالج الرسومي في قائمة تُمرَّر بالإصبع، وأثرها يظهر على
   الأجهزة الضعيفة قبل غيرها. والتدرّج وحده كافٍ فوق الأرضية اللونية.
   واليوم صفر مطعم يحمل صورة غلاف، فالقاعدة لا تُفعَّل أصلًا — وتشتغل
   وحدها متى وصلت الصور. */
/* التمويه سقط مع الطفو: لا صورة تمرّ تحت اللوح بعد أن صارا جارين.
   وقد بقي منتقي `.rcard-media.has-photo ~ .rcard-body` بعد حذف جسم
   قاعدته، فالتصق بالفاصلة بقاعدة `.rcard-name` التالية — أي أن لوح كل
   بطاقة تحمل صورة كان يرث `white-space: nowrap` و`overflow: hidden`
   و`font-size: var(--t-body-lg)`. القياس: اللوح يقرأ `nowrap` فعلًا، فسطر التصنيف
   والحيّ لا ينكسر مهما ضاقت الشاشة. */

.rcard-name {
  font-weight: 700;
  font-size: var(--t-body-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcard-sub {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-top: 2px;
}
/* النصّ يقصّ ولا يدفع الحبّة خارج البطاقة على ٣٠٨ بكسل. */
.rcard-sub-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcard-sep { color: var(--border); margin: 0 2px; }

/* ---------- وسوم البطاقة ---------- */
/* كانت الشارتان تقفان **فوق الصورة**: نسبةُ الخصم ليمونيّةً في ركن، و«أول
   طلب» مرجانيّةً في ركنٍ آخر. وطُلب نقلهما إلى صفّ المتابعة لسببين:
   الصورة تُترك للطعام، والبنر القادم سيشغل أعلى البطاقة.
   و«أول طلب» لا تظهر إلا حيث يوجد عرضٌ فعلًا — لا على كل مطعم. */
.rcard-marks {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  margin-inline-start: auto;
}
/* **ارتفاعٌ واحد لكل ما يقف في هذا الصفّ.** كان الوسم ‎20.8‎ والزرّ ‎26.8‎:
   حشوتان رأسيّتان مختلفتان وحدٌّ على أحدهما دون الآخر، فبدا الصفّ مكسورًا.
   والمقاس الآن من `min-height` مشتركة لا من حشوةٍ يحسبها كلٌّ لنفسه —
   فيتساويان مهما تغيّر الخطّ أو الحدّ. */
.rcard-sub { --rcard-chip-h: 26px; }
.rcard-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: var(--rcard-chip-h);
  padding-block: 0;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-caption);
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}
/* الليمونيّ هنا في موضعه: هذه لحظة التوفير نفسها — النسبة التي يوفّرها. */
.rcard-mark-disc { background: var(--lime); color: var(--on-lime); }

.rcard-facts {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-top: 8px;
  flex-wrap: wrap;
}
.rcard-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--text-muted);
}
.rcard-fact svg { color: var(--emerald); }
/* "تدفع في المحل" هو الفرق الجوهري عن تطبيقات التوصيل — يُذكر بكل بطاقة
   لا بشاشة الطلب وحدها. */
/* ---------- المكافأة بشاشة الطلب ---------- */
/* تُعرض قبل التأكيد لأن الباقي منها لا يُرحّل — العميل يستحق يعرف قبل
   ما يقرّر، لا بعد ما يخسر. */
.cart-reward {
  background: color-mix(in srgb, var(--coral) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--coral) 26%, transparent);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  margin-top: 14px;
}
.cart-reward-head { display: flex; align-items: center; gap: var(--s-6); }
.cart-reward-art { width: 44px; height: 44px; flex-shrink: 0; }
.cart-reward-art svg { width: 100%; height: 100%; display: block; }
.cart-reward-title { font-size: var(--t-body); font-weight: 800; color: var(--coral); }
.cart-reward-value { font-size: var(--t-callout); color: var(--text); margin-top: 2px; font-weight: 700; }
/* لوحة برنامج الوجبة المجانية ببوابة المطعم — مفتاح والتزامه المتبقّي */
.cashback-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-7);
  margin-bottom: 16px;
  background: var(--surface);
}
.cashback-note {
  margin-top: 10px;
  padding: var(--s-6) var(--s-6);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--t-footnote);
  line-height: 1.75;
  color: var(--text-muted);
}
/* الالتزام القائم يُقرأ كتنبيه لا كملاحظة: هو المبلغ الذي سيدفعه المطعم
   فعلًا بعد ما ظنّ أنه توقّف. */
.cashback-note.is-owed {
  background: color-mix(in srgb, var(--coral) 10%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--coral) 28%, transparent);
}
/* نجاح الإرسال ليس نجاح الوصول: الرسالة تقول "أُرسل" وتترك الحكم لعين
   صاحب الجهاز، فالخضرة هنا تطمئن على نصف الطريق لا على كله. */
.cashback-note.is-ok {
  background: color-mix(in srgb, var(--emerald) 9%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--emerald) 26%, transparent);
}
.cashback-note b { color: var(--text); }

/* أثر سافيو — أربعة أرقام تُقرأ بضربة عين */
/* ---------- مقارنة العمولة ---------- */
.comm {
  margin-top: var(--s-6);
  padding: var(--s-7);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.comm-head {
  margin-bottom: var(--s-5);
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--text-muted);
}
.comm-rows { display: flex; flex-direction: column; }
.comm-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) 0;
  font-size: var(--t-callout);
}
.comm-row-sum { border-top: 1px solid var(--border-soft); font-weight: 700; }
.comm-k { color: var(--text-muted); min-width: 0; }
.comm-row-sum .comm-k { color: var(--text); }
.comm-v { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.comm-v-out { color: var(--danger); }
/* الليمونيّ هنا **في موضعه**: قاعدة الهوية تحصره بلحظة التوفير، وهذه هي
   لحظة التوفير عند صاحب المطعم لا عند العميل. */
.comm-win {
  margin-top: var(--s-5);
  padding: var(--s-6);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--lime) 26%, var(--surface));
  color: var(--on-lime);
  font-size: var(--t-callout);
  font-weight: 700;
  line-height: 1.7;
}
.comm-note {
  margin-top: var(--s-5);
  font-size: var(--t-footnote);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- صفوف المنيو في اللوحة ---------- */
.menu-rows { display: flex; flex-direction: column; gap: var(--s-4); }
.menu-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-inline-end: var(--s-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.menu-row.is-unavailable { opacity: 0.55; }
.menu-row.is-pending { border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
/* الصفّ كلّه هدف الضغط لا الاسم وحده — ‎44‎ ارتفاعًا مضمونة بالحشوة. */
.menu-row-open {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex: 1;
  min-width: 0;
  padding: var(--s-5) var(--s-6);
  border: none;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.menu-row-open:active { background: var(--surface-2); border-radius: var(--r-md); }
.menu-row-thumb {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--action-ink);
  overflow: hidden;
}
.menu-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.menu-row-name {
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--text);
  /* سطران لا سطرٌ مقصوص: «مشويات مشكّلة بالأرز و…» كانت تُقرأ في منيو
     صاحب المطعم نفسه، وهو أحقّ من يرى اسم صنفه كاملًا. وسطرٌ ثالث
     يُقصّ — الاسم الأطول من ذلك نادر، والصفّ لا يطول بلا حدّ. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.menu-row-meta { font-size: var(--t-footnote); color: var(--text-muted); }
.menu-row-go { flex-shrink: 0; color: var(--action-ink); }
.menu-row-avail { display: grid; place-items: center; flex-shrink: 0; min-height: 44px; }
/* الشارة داخل الصفّ تُصغَّر: هي هناك للتذكير لا للشرح، وشرحها الكامل في
   المحرّر حيث يقرؤه صاحب المطعم وهو يعدّل. */
/* وتلتفّ: `white-space: nowrap` تخصّ الشارة في المحرّر حيث المساحة
   عريضة. داخل صفٍّ عرض نصّه ‎97px‎ تُبقيها ‎113‎ فتتجاوزه. */
.menu-row .review-badge {
  margin: 2px 0 0;
  padding: 2px var(--s-4);
  font-size: var(--t-caption);
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}

/* ---------- رأس بروفايل المطعم ---------- */
.rprofile {
  margin-bottom: var(--s-9);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
/* الغلاف يبقى مرسومًا بلا صورة: مربّعٌ فارغ بحدٍّ متقطّع يقول «هنا صورة
   ناقصة»، أمّا تدرّجٌ هادئ فيقول «هذا غلافك» ويظلّ الرأس مكتملًا. */
.rprofile-cover {
  position: relative;
  height: 108px;
  background: #FBFBF8;
}
.rprofile-cover > img { width: 100%; height: 100%; object-fit: cover; }
/* الشعار وحده يرتفع فوق حافّة الغلاف. أول محاولةٍ رفعت الصفّ كلّه
   (`margin-top` على `.rprofile-id`)، ومع `align-items: flex-end` يرتفع
   النصّ بقدر ما يطول: ثلاثة أسطر بجانب شعارٍ ‎72px‎ تدفع الاسم **فوق**
   حافّة الغلاف فيُرسم داكنًا على داكن ويختفي — وهو ما ظهر في القياس.
   فالعمود أسلم: الشعار سطرٌ مرفوع، والنصّ تحته في مجراه مهما طال. */
.rprofile-id {
  padding: 0 var(--s-7) var(--s-6);
}
.rprofile-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-top: -30px;
  margin-bottom: var(--s-5);
  border-radius: var(--r-full);
  background: var(--surface);
  /* حلقةٌ داخلية لا `border`: `box-sizing: border-box` عامّ، والحدّ يقضم
     من صندوق المحتوى فتصغر الصورة داخله بمقداره. */
  box-shadow: 0 0 0 3px var(--surface), 0 2px 10px -4px var(--shadow);
  color: var(--action-ink);
  overflow: hidden;
}
.rprofile-logo img { width: 100%; height: 100%; object-fit: cover; }
.rprofile-text { min-width: 0; }
.rprofile-name {
  font-size: var(--t-heading);
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.rprofile-meta { font-size: var(--t-footnote); color: var(--text-muted); }
.rprofile-hours { font-size: var(--t-caption); color: var(--action-ink); }
.rprofile-empty {
  padding: var(--s-6) var(--s-7) var(--s-7);
  font-size: var(--t-footnote);
  color: var(--text-muted);
}
/* أربع خانات في صفٍّ واحد عند ‎308‎ تعطي ‎66px‎ للخانة — والعنوان العربي
   لا يسع فيها. فصفّان مضمونان، والثالث لا يُفتح إلّا حين يتّسع. */
.rprofile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
  background: var(--border-soft);
}
@media (min-width: 560px) {
  .rprofile-stats { grid-template-columns: repeat(4, 1fr); }
}
.rprofile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-7) var(--s-4);
  background: var(--surface);
  text-align: center;
}
.rprofile-stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--t-title);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rprofile-stat-label { font-size: var(--t-caption); color: var(--text-muted); line-height: 1.35; }
/* `.impact-*` حُذفت مع لوحها — أرقامها في `.rprofile-stats`. */

/* لوحة الاشتراك ببوابة المطعم */
.subs-state {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  margin: 12px 0 10px;
}
.subs-state-value { font-size: var(--t-display); font-weight: 800; color: var(--emerald); line-height: 1; }
.subs-state-label { font-size: var(--t-callout); color: var(--text-muted); }

/* صندوق السداد — يظهر مع فاتورة مستحقّة فقط، فيُقرأ كخطوة تالية لا كخلفية */
.pay-box {
  margin-top: 12px;
  padding: var(--s-6) var(--s-7);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.pay-title { font-size: var(--t-callout); font-weight: 800; margin-bottom: 10px; }
.pay-row { display: flex; align-items: center; gap: var(--s-4); margin-bottom: 8px; flex-wrap: wrap; }
.pay-key { font-size: var(--t-footnote); color: var(--text-muted); min-width: 42px; }
/* الآيبان يُنسخ ويُقارن حرفًا بحرف — تباعد الحروف يمنع التباس ما يُقرأ واحدًا */
.pay-value {
  flex: 1;
  min-width: 0;
  font-size: var(--t-callout);
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.pay-note { font-size: var(--t-callout); color: var(--text-muted); line-height: 1.7; margin-top: 6px; }
.pay-hint {
  font-size: var(--t-footnote);
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 8px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
}

/* رصيد الدعوة ببوابة المطعم — رقمان لا فقرة */
.refbal {
  display: flex;
  gap: var(--s-1);
  margin-top: 14px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.refbal-cell {
  flex: 1;
  background: var(--surface-2);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
.refbal-value { display: block; font-size: var(--t-title); font-weight: 800; color: var(--emerald); }
.refbal-cap { font-size: var(--t-callout); color: var(--text-muted); font-weight: 600; }
.refbal-label { display: block; font-size: var(--t-footnote); color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* حقلا ساعات العمل بالبوابات — منتقيا وقت لا نصّ حرّ */
.hours-row { display: flex; gap: var(--s-5); }
.hours-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.hours-cell > span { font-size: var(--t-footnote); color: var(--text-muted); font-weight: 600; }
/* `min-width: 0` شرطٌ لا زينة: عنصر flex افتراضه `min-width: auto` فلا
   ينكمش دون عرض محتواه الأدنى، و`input[type=time]` عرضه الذاتي يفرضه
   المتصفّح. فكان الحقلان يتجاوزان الشاشة ‎12px‎ عند ‎308‎ — عيبٌ لا يظهر
   عند ‎390‎ ولا ‎412‎. */
.hours-cell input[type="time"] {
  width: 100%;
  min-width: 0;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--lg-groove-ring);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-body);
  /* المنتقي محتواه أرقام لاتينية — يبقى LTR داخل النموذج العربي */
  direction: ltr;
  text-align: center;
}
.hours-hint {
  margin-top: 8px;
  font-size: var(--t-footnote);
  line-height: 1.65;
  color: var(--emerald);
  font-weight: 600;
}
/* بلا ساعات = حالة تستحق انتباهًا لا تأكيدًا */
.hours-hint.is-empty { color: var(--danger); }

/* بطاقة الاتجاهات — بديل الخريطة المدمجة.
   صفّ واحد يُقرأ بنظرة: أيقونة، اسم المطعم وحيّه، ثم سهم يقول إنها تفتح
   شيئًا خارج التطبيق. */
.dircard {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-7);
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 3px -1px var(--shadow);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out);
}
.dircard:active { transform: scale(0.985); }
.dircard-compact { margin: 0 0 12px; }

.dircard-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--emerald) 10%, transparent);
  color: var(--emerald);
}
.dircard-text { min-width: 0; flex: 1; }
.dircard-title {
  display: block;
  font-size: var(--t-callout);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dircard-sub { display: block; font-size: var(--t-footnote); color: var(--text-muted); margin-top: 2px; }
.dircard-arrow { color: var(--text-muted); flex-shrink: 0; }

/* بوابة الموقع — الشاشة التي نقرّر منها متى تُطلق نافذة النظام الأصلية */
.locgate { text-align: center; padding: var(--s-10) var(--s-4) var(--s-4); }
.locgate-art { width: 148px; max-width: 60%; height: auto; margin-bottom: 14px; }
.locgate-title { font-size: var(--t-heading); font-weight: 800; margin: 0 0 6px; }
.locgate-desc {
  font-size: var(--t-callout); color: var(--text-muted);
  margin: 0 auto 20px; max-width: 30ch; line-height: 1.7;
}
.locgate .btn-outline { margin-top: 10px; }

/* المهلة المتبقية على المكافأة — عاجلة لا زخرفية، فتأخذ لون التحذير
   ووزنًا يقرأه العين قبل السطر الذي حولها. */
.cart-reward-expiry,
.cart-reward-warn,
.cart-reward-ok {
  font-size: var(--t-footnote);
  line-height: 1.65;
  margin-top: 10px;
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--coral) 20%, transparent);
}
.cart-reward-warn { color: var(--danger); font-weight: 600; }
.cart-reward-ok { color: var(--emerald); font-weight: 600; }

.rcard-fact-pay { color: var(--emerald); }

/* زر الشرح داخل شريط الكاش باك */

/* ---------- صفحة شرح الوجبة المجانية ---------- */












/* شريحة الكاش باك بشاشة الترحيب */



/* ---------- صافي الإعجابات ---------- */
/* رقم واحد لا نجوم: تقييمنا ثنائي، والنجمة توحي بمقياس من خمس لا نملكه. */





/* الشعار جنب اسم المطعم لا آخر سطر البيانات، و٤٤ بكسل بدل ٢٦.
   بالحجم الصغير وآخر السطر كان يُقرأ كأيقونة زخرفية؛ بجانب الاسم وبهذا
   الحجم يصير هوية المطعم — وهو ما يتعرّف عليه العميل قبل أي حرف. */





/* ---------- restaurant detail header ---------- */





/* شريط تقدّم الكاش باك: نفس طريقة عدّاد "جاهز خلال X دقيقة" بالطلب النشط
   (خط يمتلئ تدريجيًا) لكن برتقاليًا لا ليمونيًا — الليموني محجوز لتوفير
   محقَّق فعلًا (السعر الحقيقي)، والبرتقالي هنا لمكافأة ولاء قيد التكوّن.
   نفس البطاقة تمامًا على بطاقة المطعم بالقائمة (compact) وداخل صفحته. */
/* ---------- شريط الرصيد ----------
   بلا بطاقة: كان لوحًا برتقاليًّا باهتًا بحدٍّ حوله فيُقرأ إعلانًا مُقحَمًا،
   وهو يسكن **داخل** بطاقة المطعم أصلًا فصار إطارًا داخل إطار.
   وبلا رسمة وبلا نقاط: الرقم هو الرسالة. */
.cashback-progress { margin-bottom: 14px; }
.cashback-progress-compact { margin: 10px 0 0; }

.cashback-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.cashback-progress-label {
  font-size: var(--t-callout);
  font-weight: 800;
  color: var(--coral-ink);
}
.cashback-progress-compact .cashback-progress-label { font-size: var(--t-footnote); }
/* `.cashback-help-btn` حُذف من الشريط — قواعده تُزال معه. */

/* المسار: أرضيّةٌ فاتحة بحلقةٍ داخلية، والنصّان فوقها في المجرى العادي
   فلا يتراكبان مهما طالا. */
.cashback-progress-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 30px;
  /* **بلا حشوة على المسار.** العنصر المطلق يُقاس من صندوق **الحشوة** لا
     الحدّ، فحشوةٌ هنا تُزوي التعبئة ‎13px‎ داخل الشريط من كل طرف — فلا
     تبلغ حافّته، ويقف المبلغ الأبيض خارجها فيختفي. وهو نفس مزلق
     «العنصر المطلق يُقاس من صندوق الحشوة» المسجَّل في `CLAUDE.md`.
     والفراغ انتقل إلى هامشَي النصّين. */
  padding: 0;
  border-radius: var(--r-full);
  overflow: hidden;
  /* **المسار داكنٌ لا فاتح.** كان تعبئةً برتقالية على أرضيةٍ شبه بيضاء،
     فكان لكل نصٍّ أرضيّتان: طرفٌ على البرتقالي وطرفٌ على الفاتح. ولا لون
     يُقرأ على الاثنين — البرتقاليّ العميق على البرتقاليّ الفاتح **‎1.55:1‎**
     مقيسًا، وهو ما كان يُرى عند ٤ طلبات من ٥ حيث تقع الحافّة داخل الجملة.
     وليس عيبًا في القاعدة بل في الأرضية: أرضيّتان تعنيان لونين، ولونان
     يعنيان حدًّا يقع حتمًا داخل كلمة.
     الآن المسار كلّه برتقاليّ — عميقٌ لما لم يُنجز، وساطعٌ لما أُنجز —
     فالنصّ أبيض دائمًا: ‎5.5:1‎ على العميق و‎3.5:1‎ على الساطع. */
  background: var(--coral-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}
.cashback-progress-compact .cashback-progress-track { height: 26px; }

/* التعبئة تبدأ من الصفر وتنمو: الحركة عند أول ظهورٍ هي ما يجعل الرقم
   يُرى «يكبر» لا يقف. وعرضها يضبطه `wireCashbackBars` بعد القياس. */
.cashback-progress-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  border-radius: var(--r-full);
  background: var(--coral-strong);
  transition: width 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* لمعةٌ تمرّ على الممتلئ وحده — تقول «هذا مالك» لا «الشريط يُحمَّل». */
.cashback-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: cashback-sheen 3.2s var(--ease-out) 0.9s infinite;
}

/* **حالة الصفر: بدايةٌ لا فراغ ولا اكتمال.** قرار المالك حرفيًّا — «مابيه
   مكتمل كامل ولا فارغ كامل، ابيه كذا عشان يدفع العميل انه يبدا فيه».
   وهو محقّ في الطرفين: اللون المصمت الواحد على امتداد الشريط يُقرأ
   «اكتمل»، والمسار الفارغ تمامًا يُقرأ «لا شيء هنا» — وكلاهما لا يدعو.
   فالشريط هنا كباقي الحالات: مسارٌ عميق ونواةٌ ساطعة في أوّله. النواة لا
   تدّعي تقدّمًا — `data-pct` صفرٌ صادق و`wireCashbackBars` لا تمسّها
   (تنصرف حين لا تجد المبلغ) — لكنها تُري العميل شكل الشيء الذي سيمتلئ.
   ومقاسها مقيّد بـ`clamp` لا نسبةً مطلقة: على أضيق بطاقة تبقى ‎28‎ بكسلًا
   فتُرى، وعلى أعرضها لا تتجاوز ‎56‎ فلا تبلغ العبارة — والعبارة بيضاء على
   العميق (‎5.49:1‎)، ولو لامست الساطع لهبطت إلى ‎3.46‎. */
.cashback-progress-fresh .cashback-progress-track { justify-content: center; }
.cashback-progress-fresh .cashback-progress-fill {
  width: clamp(28px, 15%, 56px);
  animation: cashback-start 0.86s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}
@keyframes cashback-start {
  from { width: 0 }
  to   { width: clamp(28px, 15%, 56px) }
}
.cashback-progress-only {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  color: #FFFFFF;
  font-size: var(--t-footnote);
  font-weight: 800;
  padding-inline: var(--s-4);
}
.cashback-progress-compact .cashback-progress-only { font-size: var(--t-caption); }

.cashback-progress-bal,
.cashback-progress-rest {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  /* أبيضُ على الاثنين: لم يعد ثمّة أرضيّةٌ فاتحة يختفي عليها. */
  color: #FFFFFF;
}
.cashback-progress-bal { font-size: var(--t-body); font-weight: 800; margin-inline-start: 13px; }
/* بلا قصٍّ بالنقاط: «أكمل 4 طلبا…» تقطع الرقم الذي هو الرسالة. تضيق
   بالخطّ لا بالحذف، فتبقى الجملة كاملة على أضيق شاشة. */
.cashback-progress-rest {
  font-size: var(--t-footnote);
  font-weight: 700;
  margin-inline-end: 13px;
  min-width: 0;
}
@media (max-width: 340px) {
  .cashback-progress-rest { font-size: var(--t-caption); }
}
.cashback-progress-compact .cashback-progress-bal { font-size: var(--t-callout); }
.cashback-progress-compact .cashback-progress-rest { font-size: var(--t-caption); }
/* أبيض فقط فوق التعبئة — والقرار للنصّ كلّه لا لحروفه. */
/* `.on` لم تعد تُغيّر لونًا — النصّ أبيضُ في الحالين — لكنها تبقى
   موضوعةً في الشيفرة كإشارةٍ على أن النصّ داخل التعبئة، ويستعملها
   المسارُ الجاهز ليزيد ثقله قليلًا. */
.cashback-progress-bal.on,
.cashback-progress-rest.on { color: #FFFFFF; }

@keyframes cashback-sheen {
  0%   { transform: translateX(-100%); }
  45%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cashback-progress-fill { transition: none; }
  .cashback-progress-fresh .cashback-progress-fill { animation: none; }
  .cashback-progress-fill::after { animation: none; opacity: 0; }
}

/* ---------- صفحة شرح الوجبة المجانية ---------- */
.help-hero { text-align: center; padding: var(--s-4) 0 var(--s-7); }
.help-hero-art { width: 84px; height: 84px; display: block; margin: 0 auto 10px; }
.help-hero-art svg { width: 100%; height: 100%; display: block; }
.help-hero h2 { margin: 0 0 6px; font-size: var(--t-heading); }
.help-hero p { margin: 0; color: var(--text-muted); font-size: var(--t-callout); line-height: 1.7; }
.help-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-7);
  margin-bottom: 12px;
}
.help-card h3 { margin: 0 0 10px; font-size: var(--t-body); font-weight: 800; color: var(--emerald); }
.help-list { margin: 0; padding-inline-start: var(--s-7); }
.help-list li { font-size: var(--t-callout); line-height: 1.85; color: var(--text-muted); margin-bottom: 6px; }
.help-list li:last-child { margin-bottom: 0; }
.help-list b { color: var(--text); font-weight: 700; }

/* شريحة الكاش باك بشاشة الترحيب */
.story-mock-cashback { display: block; }
.mock-cashback-note {
  font-size: var(--t-footnote);
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.6;
}

/* ---------- صافي الإعجابات ---------- */
/* رقم واحد لا نجوم: تقييمنا ثنائي، والنجمة توحي بمقياس من خمس لا نملكه. */
.netlikes { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--emerald); font-weight: 700; }
.netlikes .icon-xs { width: 13px; height: 13px; }
.netlikes-compact { font-size: var(--t-footnote); }
.rating-note { font-size: var(--t-footnote); opacity: 0.85; }

/* الشعار جنب اسم المطعم لا آخر سطر البيانات، و٤٤ بكسل بدل ٢٦.
   بالحجم الصغير وآخر السطر كان يُقرأ كأيقونة زخرفية؛ بجانب الاسم وبهذا
   الحجم يصير هوية المطعم — وهو ما يتعرّف عليه العميل قبل أي حرف. */
.rcard-head { display: flex; align-items: center; gap: var(--s-5); }
.rcard-logo {
  width: 68px;
  height: 68px;
  border-radius: var(--r-lg);
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  /* حشوة رفيعة فقط: كل بكسل هنا يُقتطع من الشعار نفسه لأن contain يقيسه
     بالمساحة المتبقية. الهوامش الميتة داخل الملف تُقصّ عند الرفع. */
  padding: var(--s-1);
  flex-shrink: 0;
}

.badge-real {
  font-size: var(--t-footnote);
  font-weight: 700;
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
  color: var(--emerald);
  border-radius: var(--r-full);
  padding: var(--s-1) var(--s-4);
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  display: inline-block;
}

/* ---------- restaurant detail header ---------- */
.rhead { text-align: center; padding: var(--s-2) 0 var(--s-7); }
.rhead-name { font-weight: 800; font-size: var(--t-heading); }
.rhead-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: var(--text-muted);
  font-size: var(--t-callout);
  margin-top: 6px;
}
.rhead-badge {
  display: inline-block;
  margin-top: 8px;
  background: var(--lime);
  color: var(--on-lime);
  font-size: var(--t-footnote);
  font-weight: 800;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-full);
}

/* شريط تقدّم الكاش باك: نفس طريقة عدّاد "جاهز خلال X دقيقة" بالطلب النشط
   (خط يمتلئ تدريجيًا) لكن برتقاليًا لا ليمونيًا — الليموني محجوز لتوفير
   محقَّق فعلًا (السعر الحقيقي)، والبرتقالي هنا لمكافأة ولاء قيد التكوّن.
   نفس البطاقة تمامًا على بطاقة المطعم بالقائمة (compact) وداخل صفحته. */
/* شريط الرصيد: قواعده كلّها أعلى هذا الملف. كانت هنا **نسخةٌ ثانية**
   كاملة تدهسها — ارتفاعًا وأرضيةً وتخطيطًا — فيُقاس الشريط بقيمٍ
   لا تُرسم. وهي بالضبط قاعدة المستودع: «نسختان تفترقان بأول تعديل». */
/* ---------- menu item ---------- */
/* بطاقة الصنف: الصورة عريضة فوق النص لا مربّع صغير بجانبه.
   الصورة هي ما يبيع الطبق — بمقاس ٤٤px كانت تعريفًا لا إغراءً، وتضيع
   تفاصيلها فلا تفرّق بين برجر وبرجر. */
.mitem {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 3px -1px var(--shadow);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  display: block;
  /* حشوةٌ تُنزل الصورة عن حواف البطاقة: كانت ممتدّةً من حافّة لحافّة
     بخطٍّ قاطع يقسم الصفّ نصفين — مستطيلان ملصوقان لا صورةٌ في بطاقة.
     والنمط المتعارف: مربّعٌ مستدير منزاح يقف داخل الصفّ. */
  padding: var(--s-5);
  gap: var(--s-4);
}
/* سطرُ البدائل حين لا يجد البحث شيئًا. صريحٌ أنه ليس ما طُلب، وخفيفٌ
   فلا ينافس البطاقات تحته — وظيفته أن يفهم العميل لِمَ تغيّرت القائمة.
   ويخرج من شبكة البطاقات بـ`grid-column` وإلّا احتلّ خانةَ بطاقة. */
.list-note {
  grid-column: 1 / -1;
  margin: 0 var(--s-2) var(--s-5);
  font-size: var(--t-footnote);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ═══ وضع الوجبة المجانية ═══
   الليمونيّ محجوزٌ للحظة التوفير، وهذه ذروتها — فهو هنا في محلّه تمامًا
   ولا يُصرف على غيرها. */

.fm-banner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  background: var(--lime);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
}
.fm-banner-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--on-lime);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* `svg` لا `i`: renderSavyoIcons يستبدل الوسم بعد الرسم، فمنتقي `i` يموت. */
.fm-banner-icon svg { color: var(--lime); }
.fm-banner-text { min-width: 0; }
.fm-banner-text b {
  display: block;
  font-size: var(--t-callout);
  font-weight: 800;
  color: var(--on-lime);
  line-height: 1.3;
}
.fm-banner-text > span {
  font-size: var(--t-caption);
  font-weight: 600;
  color: color-mix(in srgb, var(--on-lime) 74%, transparent);
}

/* **خطٌّ ليمونيّ يطوف حول البطاقة.** طلبه المالك موشنًا لا خطًّا ساكنًا.
   والتنفيذ بطبقتين لأن `.mitem` تحمل أرضيّتها: `::before` تدرّجٌ مخروطيّ
   يدور، و`::after` تعيد الأرضية منزاحةً بسمك الخطّ فيبقى الدوران ظاهرًا
   في الإطار وحده. و`overflow: hidden` القائمة تقصّ ما يفيض. */
.mitem.is-free-meal { position: relative; border-color: transparent; }
.mitem.is-free-meal::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  /* طبقتان: أرضيّةٌ ليمونيّة **كاملة** فيبقى الإطار ليمونيًّا في كل
     لحظة، وضوءٌ أفتح يطوف فوقها. بلا الأرضية يكون ‎58٪‎ من الدورة شفّافًا
     فيُرى الإطار ناقصًا ويظهر الضوء وحده هائمًا. */
  background:
    conic-gradient(from 0deg,
      transparent 0 52%, #E4FF8C 66%, #FFFFFF 76%, #E4FF8C 86%, transparent 96%),
    var(--lime);
  animation: fm-orbit 2.6s linear infinite;
}
.mitem.is-free-meal::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: calc(var(--r-lg) - 2px);
  background: var(--surface);
}
.mitem.is-free-meal > * { position: relative; z-index: 1; }
@keyframes fm-orbit { to { transform: rotate(360deg); } }

.mitem-free {
  display: inline-flex;
  align-items: center;
  background: var(--lime);
  color: var(--on-lime);
  font-size: var(--t-footnote);
  font-weight: 800;
  padding: 3px var(--s-5);
  border-radius: var(--r-full);
}

@media (prefers-reduced-motion: reduce) {
  /* الخطّ يبقى ليمونيًّا ساكنًا — الدلالة لا تسقط مع الحركة. */
  .mitem.is-free-meal::before { animation: none; background: var(--lime); }
}

.mitem-name { font-weight: 700; font-size: var(--t-body); }
/* صفٌّ أفقيّ لا عمود: الصورة على طرف والنصّ بجانبها — وهو النمط
   المتعارف عليه في تطبيقات الطلب. الصورة الكبيرة فوق كل صنف كانت تجعل
   منيو عشرة أصناف عشر شاشات تُمرَّر، ولا يُقارن صنفان إلا بالذاكرة. */
.mitem-main {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
/* نفس لوح بطاقة المطعم: الصنف بطاقةٌ واحدة لا صورةٌ فوق مستطيل.
   الوصفة مشتركة عمدًا — سطحان زجاجيان بوصفتين يفترقان بأول تعديل. */
/* بلا طفوٍ ولا زجاج: اللوح كان يعلو الصورة لأنها كانت فوقه. وبصفٍّ
   أفقيّ صارا جارين لا طبقتين، فالتدرّج والظلّ الداخلي يصيران زينةً
   تُثقل قائمة تُمرَّر. */
.mitem-body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  padding: var(--s-6) var(--s-7);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
/* السعر والعدّاد في صفّ واحد أسفل البطاقة — السعر يمين والتحكّم يسار،
   فالعين تقرأ الاسم ثم السعر ثم تصل الزر بترتيب القرار نفسه. */
/* يلتفّ: بعد أول إضافة يحلّ العدّاد محلّ زرّ الإضافة فيصير المطلوب
   ١٨٧px في ١٧٠ متاحة على عرض ٣٠٨ — مقيس، والعدّاد يخرج ٣١px فوق صورة
   الطبق. والعتبة ٣٤٤ لا ٣٦٠، فلا تُفحص على ٣٦٠ وحدها. */
.mitem-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  row-gap: var(--s-3);
  margin-top: 8px;
}
.mitem-prices { min-width: 0; }
.mitem-prices {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
}
.price-old { font-size: var(--t-footnote); color: var(--text-muted); text-decoration: line-through; }
.price-real { font-size: var(--t-body-lg); font-weight: 800; color: var(--emerald); }

/* ---------- cart ---------- */
.qty-control {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.qty-control .qty-value { min-width: 16px; text-align: center; font-weight: 700; }
/* عند سقف الكمّية: «+» باهتٌ لا يُضغط. بلا هذا يضغطه العميل ولا يحدث
   شيء، فيُقرأ عطلًا — والباهت يقول «هذا الحدّ» بلا كلمة. */
.qty-control .qty-plus:disabled { opacity: 0.35; cursor: default; }

/* «وفّرت في هذا الطلب» — كان لوحًا أسود كلوح «توفيري» القديم (٢٠٢٦‑٠٩‑٢٧)؛
   صار ليمونيًّا بحبرٍ داكن: لحظة توفير، ولغة «وفّرت هذا الشهر» نفسها. */
.savecounter {
  background: linear-gradient(120deg, #C6F432, #E6F8A9);
  color: #16181A;
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-7);
  margin: 12px 0;
  box-shadow: 0 4px 0 rgba(22, 24, 26, 0.12);
}
.savecounter-lbl { font-size: var(--t-footnote); color: #16181A; opacity: 0.75; font-weight: 700; margin-bottom: 4px; }
.savecounter-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-title);
  font-weight: 800;
  color: #16181A;
}
.savecounter-val .unit { font-size: var(--t-callout); font-weight: 600; color: #16181A; }

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-7);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  padding: var(--s-2) 0;
  font-size: var(--t-callout);
  /* الجانب العربي يكبر درجةً ليوازن اللاتيني الملاصق: العربية بلا حروفٍ
     كبيرة، فـ«المجموع الفرعي» يبدو أصغر من `12.00 SAR` بالمقاس نفسه.
     البند من HIG — Right to left. */
}
.summary-line.total {
  font-weight: 800;
  font-size: var(--t-body-lg);
  border-top: 1px solid var(--border-soft);
  margin-top: 6px;
  padding-top: var(--s-4);
  color: var(--emerald);
}
/* الموازنة على الجانب العربي وحده — والرقم اللاتيني يبقى بمقاسه فلا تتغيّر
   محاذاة الأعمدة. */
.summary-line > span:first-child { font-size: calc(1em * var(--ar-balance)); }
.summary-line.total > span:first-child { font-size: calc(1em * var(--ar-balance)); }

/* ---------- forms ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7);
}
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block;
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.form-group input {
  width: 100%;
  padding: var(--s-6) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  /* الحجّة الأصلية صحيحة — أبيضُ على أبيضٍ بحدٍّ وحده لا يُقرأ حقلًا —
     لكن جوابها كان لوحًا أوف-وايت مسطّحًا، وجدارٌ من هذه اللوحات هو ما
     وُصف بأن اللوحة «ما أخذت تصميم التطبيق».
     والجواب الصحيح مكتوبٌ في هذا الملف أصلًا عند مسار الفلاتر: **أخدود
     غائر**. الأرضية بيضاء كالبطاقة، والحدّ الداخلي هو ما يقول «هنا
     تكتب» — وهو أوضح من لونٍ ثانٍ لأنه عمقٌ لا صبغة. */
  background: var(--surface);
  box-shadow: var(--lg-groove-ring);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  text-align: right;
}
.form-group input:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }
/* **القائمة المنسدلة بلا قاعدة كانت.** `input` و`textarea` منسَّقان هنا
   و`select` لا — فأخذ شكل المتصفّح: ارتفاع ‎19‎ بكسلًا مقيسًا في نموذج
   «أضف مطعمًا» بلوحة المندوب، أصغر من نصف ما يلمسه إصبع. تأخذ الآن
   أخدود الحقول نفسه، و`min-height` تضمن ‎44‎ مهما كان الخطّ. */
.form-group select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-body);
  background: var(--surface);
  box-shadow: var(--lg-groove-ring);
  color: var(--text);
}
.form-group select:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }
.form-group textarea {
  width: 100%;
  padding: var(--s-6) var(--s-6);
  border: 1px solid var(--border);
  box-shadow: var(--lg-groove-ring);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-ar);
  resize: vertical;
}
.form-group textarea:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }

/* أزرار اختيار نوع المشكلة — رقاقة واحدة تبقى مفعّلة بلون زمردي بدل
   عناصر <select>/radio التقليدية، أسرع للمس على الجوال */
.issue-options { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.issue-option {
  padding: var(--s-4) var(--s-7);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--t-callout);
  font-family: inherit;
  cursor: pointer;
}
.issue-option.active {
  background: var(--glass-chip-bg);
  border-color: transparent;
  box-shadow: var(--glass-chip-shadow);
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
  font-weight: 700;
}

/* زر الرجوع بخطوة الدعم الثانية — يعرض التصنيف المختار كتذكير بمكان
   العميل بالتدفّق، مو مجرد سهم فارغ. */
.support-back-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  font-family: inherit;
  font-size: var(--t-callout);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.support-back-btn:active { color: var(--text); }

/* ---------- مادة الزجاج ---------- */
/*
 * الضبابية وحدها لا تُقرأ زجاجًا حين لا يمرّ تحتها شيء — فوق خلفية بيضاء
 * تبدو لونًا شبه مصمت لا أكثر. وهذا ما كان يحصل: الحبّة السفلية صغيرة
 * والخلفية بيضاء، فلا شيء يعبر تحتها ليضبب.
 *
 * ما يجعل السطح يُقرأ زجاجًا بذاته ثلاثة، وكلها مستقلة عمّا خلفه:
 *   ١. حافّة علوية مضيئة — الضوء ينكسر على حرف الزجاج
 *   ٢. تدرّج رأسي خفيف — السطح ليس مستويًا تمامًا
 *   ٣. ظلّ ناعم يرفعه عن السطح — الزجاج يطفو ولا يلتصق
 */
.glass {
  position: relative;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 78%, transparent) 0%,
    color-mix(in srgb, var(--surface) 62%, transparent) 100%
  );
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow:
    0 8px 30px -8px rgba(20, 35, 31, 0.22),
    0 2px 8px -3px rgba(20, 35, 31, 0.10);
}
/* الحافّة المضيئة: خطّ أبيض شبه شفّاف داخل الحدّ العلوي وحده */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding-top: var(--s-1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- states: loading / empty / error ---------- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
  color: var(--text-muted);
  padding: var(--s-11) var(--s-7);
}
.state .icon-lg { color: var(--text-muted); }
.state-art svg { width: 76px; height: 76px; }
.state-title { font-weight: 700; color: var(--text); font-size: var(--t-body); }
.state-desc { font-size: var(--t-callout); max-width: 30ch; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.error-text {
  color: var(--coral);
  font-size: var(--t-callout);
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ---------- pickup screen ---------- */
.pickup-hero {
  text-align: center;
  padding: var(--s-4) 0 var(--s-8);
}
.pickup-hero .icon-lg { color: var(--emerald); margin: 0 auto 8px; }
.pickup-hero h2 { margin: 0 0 4px; font-size: var(--t-heading); }
.pickup-hero p { margin: 0; color: var(--text-muted); font-size: var(--t-callout); }
.pickup-ready-desc { color: var(--coral) !important; font-weight: 700; }

.pickup-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  text-align: center;
}
.pickup-card .status-pill { margin-bottom: 8px; }
.pickup-card-ready { border-color: var(--coral); animation: pickup-ready-pulse 1.8s ease-out 3; }

/* شريط العدّ التنازلي: يمتلئ ليمونيًا من الطلب لحد موعد الجاهزية المقدّر.
   يُعاد رسمه مع كل استطلاع دوري بدل تايمر جافاسكربت منفصل. */
.pickup-countdown { margin: 10px 0 16px; }
.pickup-countdown-label { font-size: var(--t-callout); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pickup-countdown-overdue .pickup-countdown-label { color: var(--danger); margin-bottom: 0; }
.pickup-countdown-track {
  height: 6px;
  border-radius: var(--r-hair);
  background: var(--surface-2);
  overflow: hidden;
}
/* زمرديّ لا ليمونيّ: الليموني لحظةُ توفيرٍ تُخطف العين إليها مرّة،
   وهذا شريطٌ يُحدَّق فيه خمس عشرة دقيقة أثناء الانتظار. صرفُه هنا
   يستنزف الإشارة في أطول لحظةٍ ساكنة في التطبيق. */
.pickup-countdown-fill {
  height: 100%;
  border-radius: var(--r-hair);
  background: var(--tint-emerald);
  transition: width 1s linear;
}
@keyframes pickup-ready-pulse {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent); }
}
.pickup-code {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text);
  margin: 4px 0 16px;
}
.pickup-qr {
  display: block;
  margin: 0 auto 16px;
  width: 176px;
  height: 176px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
}

/* ---------- portal shared: topbar sub-label + logout ---------- */
.topbar-sub {
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--text-muted);
  margin-inline-start: 6px;
  padding-inline-start: var(--s-3);
  border-inline-start: 1px solid var(--border);
}
.topbar-actions { display: flex; align-items: center; gap: var(--s-4); }

/* ---------- portal shared: tab bar ---------- */
/* كان لوحًا أوف-وايت مسطّحًا — وهو نفس ما وُصف بأن اللوحات «لسع فيها
   أوف وايت». والمسار هنا محفورٌ بحدٍّ داخليّ كشريط التطبيق السفليّ، لا
   بلونٍ ثانٍ يُقحَم على الصفحة البيضاء. */
.tabbar {
  display: flex;
  gap: var(--s-2);
  background: var(--surface);
  padding: var(--s-2);
  border-radius: var(--r-full);
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.tabbar button {
  flex: 1;
  /* ‎44‎ لا ‎37‎: كانت الحشوة وحدها تحدّد الارتفاع. مقيسٌ في لوحتي المطعم
     والمندوب — التبويبات الرئيسية والفرعية ورقائق «معلّقة / مدفوعة». */
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--t-callout);
  padding: var(--s-4) 0;
  border-radius: var(--r-full);
  cursor: pointer;
  font-family: inherit;
}
.tabbar button.active { background: var(--surface); color: var(--emerald); }

/* ---------- portal shared: status pills ---------- */
.status-pill {
  display: inline-block;
  font-size: var(--t-footnote);
  font-weight: 700;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.status-pill.new,
.status-pill.ready,
.status-pill.past_due,
.status-pill.overdue,
.status-pill.clawed_back,
.status-pill.rejected {
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  color: var(--coral);
}
.status-pill.accepted,
.status-pill.active,
.status-pill.paid,
.status-pill.approved {
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
  color: var(--emerald);
}
/* ملغي: رمادي محايد. المرجاني محجوز لما يحتاج انتباهًا، والملغي
   حالة منتهية لا تطلب فعلًا من أحد. */
.status-pill.trial,
.status-pill.cancelled,
.status-pill.pending,
.status-pill.picked_up {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* ---------- portal shared: order card (restaurant portal) ---------- */
.order-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: 8px;
}
.order-card-new { animation: order-card-pulse 1.8s ease-out 3; }
@keyframes order-card-pulse {
  0%, 100% { border-color: var(--border-soft); box-shadow: none; }
  30% { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent); }
}
.order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.order-code {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-weight: 800;
  font-size: var(--t-body-lg);
}
.order-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-footnote); color: var(--text-muted); margin: 2px 0; }
.order-meta svg { flex: none; }
.order-meta-dot { opacity: 0.5; }
.order-cashback-note { color: var(--emerald); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
/* ملاحظة العميل ("بدون بصل") لازم تلفت نظر المطبخ فعلًا، لا تختفي بين
   سطور معلومات محايدة — نفس لهجة التنبيه المستخدمة لأي شي يحتاج انتباهًا. */
.order-notes {
  color: var(--coral);
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  background: color-mix(in srgb, var(--coral) 10%, transparent);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}
.order-notes svg { flex-shrink: 0; margin-top: 2px; }
.order-items { font-size: var(--t-callout); margin: 8px 0; }
.order-items div { padding: var(--s-1) 0; display: flex; justify-content: space-between; }
.order-items .qty { color: var(--text-muted); }
.order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
}
.order-total {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-weight: 800;
  color: var(--emerald);
}
.order-actions .btn-primary { margin-top: 8px; }

/* ---------- portal shared: editable list card (menu items, restaurant list) ---------- */
.edit-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: 8px;
}
.edit-card-actions { display: flex; gap: var(--s-4); align-items: center; }
.edit-card-actions .btn-outline { flex: 1; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 4px 0 12px;
  font-size: var(--t-callout);
}
.checkbox-row input { width: auto; }

/* ---------- مفتاح تبديل ---------- */
/* البنية مقتبسة من uiverse.io (رخصة MIT) والألوان محوّلة لرموز الهوية:
   الأصل وردي، وإبقاؤه كان يُدخل لونًا خامسًا لا مكان له بلوحتنا.

   يُستخدم حيث تكون الحالة فورية لا مسوّدة تُحفظ لاحقًا. */
.switch {
  position: relative;
  flex-shrink: 0;
  height: 1.6rem;
  width: 2.9rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border-radius: var(--r-full);
  background-color: color-mix(in srgb, var(--text-muted) 38%, transparent);
  transition: background-color 0.25s var(--ease-out);
}
.switch:checked { background-color: var(--surface-ink); }
/* المفتاح ‎26‎ بكسلًا ارتفاعًا — شكلٌ صحيح وهدفٌ صغير. طبقةٌ شفّافة تمدّ ما
   يستقبل الإصبع إلى ‎44‎ بلا أن يكبر المفتاح في العين. و`::before` مشغولةٌ
   بالمقبض، فهذه `::after`. */
.switch::after {
  content: "";
  position: absolute;
  inset: -9px -4px;
}

.switch::before {
  position: absolute;
  content: "";
  top: 50%;
  inset-inline-start: 2px;
  transform: translateY(-50%);
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: var(--r-full);
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(20, 35, 31, 0.28);
  transition: inset-inline-start 0.25s var(--ease-out);
}
.switch:checked::before { inset-inline-start: calc(100% - 1.25rem - 3px); }
.switch:active::before { width: 1.4rem; }
.switch:disabled { opacity: 0.5; cursor: default; }

/* صف المفتاح: العنوان والوصف على يمينه (بالعربية)، والمفتاح بالطرف */
.switch-row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) 0 var(--s-2);
}
.switch-row-text { flex: 1; min-width: 0; }
.switch-row-title { font-size: var(--t-callout); font-weight: 600; }
.switch-row-desc {
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.45;
}

/* الصنف غير المتاح يخفت كليًا — الكاشير يشوف بنظرة واحدة وش نفد */
.edit-card.is-unavailable { opacity: 0.62; }
.edit-card.is-unavailable .switch-row { opacity: 1; }

/* ---------- portal shared: simple info list row (agent restaurants / commissions) ---------- */
.info-row {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-6);
  margin-bottom: 8px;
}
.info-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.info-row-title { font-weight: 700; font-size: var(--t-body); }
.info-row-meta { font-size: var(--t-footnote); color: var(--text-muted); margin-top: 4px; }
.info-row-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-weight: 800;
  font-size: var(--t-body-lg);
  color: var(--emerald);
}

/* ---------- عميل PWA: شريط تبويبات سفلي ---------- */
/* حبة عائمة لا شريط ممتد: تطفو فوق المحتوى بظل ناعم والمحتوى يمر تحتها.
   الشريط الممتد يقطع الشاشة بخطّ أفقي ويأكل ارتفاعًا ثابتًا؛ الحبة تترك
   الشاشة متّصلة وتُقرأ كعنصر طافٍ فوق التطبيق لا كإطار له. */
.tabbar-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  /* عائمٌ لا ملاصق، لكن أوسع وأنزل ممّا كان: الهامش الجانبي ١٤px صار ٨،
     والسفلي ١٤ صار ٨. جُرّب الالتصاق التامّ فبدا لوحًا مثبّتًا لا حبةً
     تطفو فوق المحتوى — والطفو هو ما يعطي الإحساس بأن المحتوى يمرّ تحته. */
  padding: 0 var(--s-4) calc(8px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.bottom-tabbar {
  pointer-events: auto;
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  /* نفس سقف `#app`: الرصيف مثبَّت بعرض الشاشة كلها، فبلا هذا كان الشريط
     يمتدّ ٧٥٢px على آيباد بينما المحتوى فوقه محصورٌ في ٤٨٠ — تبويباتٌ
     متباعدة تحت عمودٍ ضيّق، تُقرأ شريطًا لتطبيقٍ آخر. */
  max-width: 480px;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  /* حبةٌ كاملة الاستدارة: العنصر يطفو بأربع حواف ظاهرة، وتدوير جهتين
     وحدهما يعني أنه ملاصق — وقد رجعنا عن الالتصاق. */
  border-radius: var(--r-full);
  /* الطبقة الوظيفية الوحيدة في التطبيق — وهي الموضع الذي تقول Apple إن
     Liquid Glass له: يطفو فوق المحتوى والمحتوى يمرّ من تحته. */
  background: var(--lg-fill-strong);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: none;
  box-shadow: var(--lg-edge), var(--lg-ring), var(--lg-lift);
}
.bottom-tab {
  position: relative;
  z-index: 2;
  /* ٥٢ لا ٤٨: الاسم صار `--t-caption` (‎0.7rem‎) مع السلّم الطباعيّ بدل
     ‎0.62‎، فارتفع صندوقه إلى ‎18‎ ونزل الهامش تحت الحبر إلى ‎0.54‎ بكسل —
     وخطّ النظام على iOS نازلُه أعمق من خطّ كروم الذي يُقاس عليه، فكان
     القصّ سيعود. والتوسيع هنا أصحّ من إعادة مقاسٍ خارج السلّم. */
  height: 52px;
  /* عرضٌ يقوده المحتوى لا `width: 54px ↔ auto`. الكلمة المفتاحية `auto`
     غير قابلة للاستيفاء، فالانتقال بين الحالتين كان **قفزة** لا حركة:
     الخارج من النشاط يرتدّ إلى ٥٤ بكسل في إطار واحد، والداخل يقفز إلى
     عرضه المبدئي ثم ينمو خلف اسمه. الآن العرض = أيقونة + هامش الاسم +
     أقصى عرضه، وكلها قابلة للاستيفاء — فالطرفان ينزلقان معًا.
     و`min-width` تحفظ مساحة اللمس حين ينكمش الاسم. */
  /* حصصٌ متساوية: خمسة تبويبات تقتسم العرض، فلا ينمو أحدها على حساب
     جاره ولا يتحرّك شيء عند التبديل. */
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  overflow: hidden;
  background: none;
  border: none;
  border-radius: var(--r-full);
  padding: 0 var(--s-1);
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.26s var(--ease-out);
}
/* النشط وحده يتمدد ليكشف اسمه. الأيقونة وحدها ما تكفي بالعربي — «توفيري»
   لا يُفهم من محفظة، و«القريب مني» لا يُفهم من دبوس. وإظهار الأربعة
   أسماءً يحشر الحبة. */
/* المختار بلون الهوية لا أبيض على قرصٍ مصمت. القرص الكحليّ الممتلئ كان
   يجعل الأيقونة بيضاء — أي أن اللون المميِّز يذهب للخلفية والأيقونة تفقد
   لونها. صار القرص أثرًا خفيفًا من الكحليّ نفسه، واللون يعود للأيقونة. */
/* النشط وحده قابل للانكماش (`flex: 0 1`, `min-width: 0`): على شاشة ٣٠٨
   بكسل كان مجموع الأربعة يتجاوز الحبة، وبما أن `flex-shrink` الافتراضي ١
   على الجميع كانت **الأربعة** تنكمش معًا — فتنزل مساحة اللمس تحت ٤٨ بكسل
   وتضيق أهدافُ الضغط. الآن يُقتطع الاسم وحده وتبقى الثلاثة الخاملة بمقاسها. */
/* النشط يقف على رقاقةٍ زجاجية لا على حبرٍ كحليّ: اللون يبقى في الأيقونة
   والاسم، والرقاقة تقول «هنا أنت» بارتفاعها لا بعتمتها. */
/* القاعدة المنزلقة تحمل الشكل، والتبويب النشط يحمل اللون وحده — وإلا
   رُسمت خلفيتان: واحدةٌ تنزلق وأخرى تظهر فجأةً تحتها. */
.tab-base {
  position: absolute;
  top: var(--s-3);
  bottom: var(--s-3);
  left: 0;
  z-index: 1;
  border-radius: var(--r-full);
  background: var(--glass-chip-bg);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--glass-chip-shadow);
  pointer-events: none;
  transform-origin: center;
  /* المنحنى يتجاوز هدفه قليلًا ثم يستقرّ: هذا ما يجعل الحركة تُحسّ
     شيئًا مادّيًّا لا شريحةً تتلوّن. والعرض ينتقل أسرع من الموضع فيبدو
     أن القاعدة تلحق بنفسها. */
  transition: transform 0.42s cubic-bezier(0.34, 1.26, 0.38, 1),
              width 0.34s cubic-bezier(0.34, 1.26, 0.38, 1),
              opacity 0.2s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .tab-base { transition: opacity 0.2s linear; }
}

.bottom-tab.active {
  /* لا زمرديّ ولا حبر أسود: القاعدة تحمل الحالة، والأيقونة تغمق درجةً من
     لونها الخامل نفسه — فرقٌ يُقرأ «استقرارًا» لا لونًا ثانيًا يُضاف. */
  color: var(--action-ink);
}
/* الاسم ظاهرٌ دائمًا تحت أيقونته — لا يُكشف بالضغط ولا يمدّد تبويبه.
   كان النشط ينبسط خلف اسمه فيتمدّد الشريط تحت الإصبع، وهي حركةٌ تُقرأ
   اضطرابًا لا استجابة. والنمط الظاهر في التطبيقات: أيقونةٌ واسمها، والنشط
   يتلوّن لا يكبر. */
.bottom-tab-label {
  font-size: var(--t-caption);
  font-weight: 700;
  /* ١٫٤٥ لا ١: `line-height: 1` يجعل صندوق السطر بمقاس الخطّ تمامًا،
     بينما صعود الحرف ونزوله معًا يتجاوزانه — وبما أن الوسم نفسه
     `overflow: hidden` (للحذف بالنقاط) فالفائض يُقصّ لا يفيض.
     النازل العربي أعمق من اللاتيني: ذيل الياء في «طلباتي» و«توفيري»
     و«حسابي» كان يُبتر. والفحص الأفقي لا يكشفه — القصّ رأسيّ. */
  line-height: 1.6;
  /* وحشوةٌ تحتية فوق ذلك: `line-height` مضبوطةٌ على الخطّ الذي يرسمه
     كروم هنا، وخطّ النظام على iOS يختلف نازلُه. الحشوة تُوسّع صندوق
     الحشوة — وهو ما يقصّ عنده `overflow` — فتبقى مساحةٌ للذيل مهما كان
     الخطّ. القياس بلا هذا: الحبر يتجاوز الصندوق ٠٫٣١ بكسل فيُبتر. */
  padding-bottom: var(--s-1);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: color 0.22s var(--ease-out);
}


.svy-icon { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.svy-icon-bold { display: none; }
.bottom-tab.active .svy-icon-linear { display: none; }
.bottom-tab.active .svy-icon-bold { display: block; }

/* الشريحة الزمردية تنزلق بين التبويبات بدل ما تظهر وتختفي — الانزلاق
   يربط الحالتين ببعض فيُقرأ كحركة واحدة لا كقفزة. */
/* left:0 لا right:6px، والموضع كله من translateX محسوبًا بالقياس الفعلي —
   الحساب اليدوي من الحافة اليمنى يختلف بالـrtl بين المتصفحات ويخطئ ببكسلات. */
/* الشريحة المنزلقة أُسقطت مع الانبساط: كانت تلاحق تبويبًا يتغيّر عرضه،
   وبعرضٍ ثابت لكل تبويب لم يبق لها ما تشرحه — اللون وحده يكفي، وهو ما
   تفعله التطبيقات. العنصر أُزيل من الصفحة، و`moveTabIndicator` محروسة
   بغيابه أصلًا فلا تفعل شيئًا. */
.bottom-tab:active .svy-icon { transform: scale(0.86); }
.svy-icon { transition: transform 0.2s var(--ease-out); }

/* ---------- عميل PWA: صور المطاعم/الأصناف ---------- */
/* نفس المنطق بحجم أكبر بشاشة المطعم: إطار محايد والشعار داخله كامل،
   بدل ما يُقصّ لشريط عرضي يطلع منه وجه أو نص مبتور */
.rhead-image-wrap {
  width: 100%;
  height: 150px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  overflow: hidden;
}
.rhead-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* مربّعة على طرف الصفّ. و`order: 2` تضعها في الطرف المقابل للنصّ —
   أي يسارًا بالعربية: الاسم يُقرأ أولًا من اليمين، ثم تؤكّده الصورة. */
.mitem-thumb,
.mitem-thumb-placeholder {
  order: 2;
  /* نسبيّ بسقف لا صلب: ١٠٤px كانت ٣٨٪ من صفّ ٢٧٦px على جهاز المالك —
     وهي مخالفة صريحة للقاعدة الأولى في مهارة التصميم. عند ٣٦٠ فأكثر
     يحسم السقف فلا يتغيّر شيء. */
  width: auto;
  /* ٣٨٪ لا ٣٢٪ وسقفٌ ١٢٨: الصورة هي ما يقرّر الطلب، وعند ٣٢٪ تخرج ٩٨
     بكسلًا على ٣٩٠ — يصعب تمييز الصنف منها. والنسبة تبقى نسبيّةً بسقف
     فلا تتجاوز خانتها على ٣٠٨. */
  flex: 0 0 38%;
  max-width: 128px;
  min-width: 92px;
  aspect-ratio: 1;
  height: auto;
  /* في الوسط لا ممدودةً بارتفاع الصفّ: الصفّ يطول بطول النصّ، والصورة
     المربّعة تشوّه نسبتها إن تبعته. */
  align-self: center;
  border-radius: var(--r-md);
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
/* **البديل بمقاس الصورة تمامًا.** كان أضيق عمدًا (‎24٪‎ مقابل ‎38٪‎) بحجّة
   أن لوحًا خاويًا لا يستحقّ مساحة الطعام. وهذا صحيحٌ في ذاته وخاطئٌ في
   أثره: الصفّان يقعان تحت بعضهما فيُقرأ الاختلاف **اختلالًا في التناسق**
   لا تمييزًا للصورة — وهو ما رآه المالك وحكم فيه، والتناسق عنده قاعدة.
   ويرث البديل الآن `flex` و`max-width` و`min-width` من القاعدة أعلاه،
   فلا رقمَ ثانٍ يفترق عن الأوّل. */
.mitem-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* ---------- عميل PWA: طلباتي ---------- */
.order-history-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: 8px;
  cursor: pointer;
}
.order-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
/* يُقصّ ولا يدفع: اسمٌ طويل كان يزيح حبّة الحالة خارج البطاقة على
   عرض ٣٠٨ — نفس علاج `.dircard-title` المطبَّق في هذا الملف. */
.order-history-restaurant {
  font-weight: 700;
  font-size: var(--t-body);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-history-head > .status-pill,
.order-history-head > [class*="status"] { flex-shrink: 0; }
.order-history-meta { font-size: var(--t-footnote); color: var(--text-muted); display: flex; justify-content: space-between; margin-top: 4px; }

/* ---------- عميل PWA: حسابي ---------- */
.account-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  text-align: center;
  margin-bottom: 16px;
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-ink);
  color: var(--on-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.account-phone {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-weight: 700;
  font-size: var(--t-body-lg);
}
.account-stats {
  display: flex;
  justify-content: center;
  gap: var(--s-9);
  margin-top: 16px;
  padding-top: var(--s-7);
  border-top: 1px solid var(--border-soft);
}
.account-stat-value { font-family: 'Plus Jakarta Sans', sans-serif; direction: ltr; font-weight: 800; font-size: var(--t-title); color: var(--text); }
/* `--emerald` يساوي `--text` حرفًا بحرف (#14231F)، فالرقم كان بلون
   النصّ العادي — أي بلا تمييز إطلاقًا في الشاشة التي غرضها إبرازه. */
.account-stat-value.account-stat-saved { color: var(--tint-emerald); }
.account-stat-label { font-size: var(--t-footnote); color: var(--text-muted); margin-top: 2px; }

/* ================================================================
   شاشات الهوية (مطابقة design/savyo_brand_preview.html)
   ================================================================ */

/* ---------- رأس زمردي بحواف سفلية دائرية + شريط التوفير ---------- */
/* **أبيضُ بوهجٍ ليمونيّ لا أسود.** الرؤوس الثلاثة (الرئيسية · المطعم ·
   الدخول) كانت أكبر أسطحٍ داكنة في التطبيق، والموقع العامّ يقول نفس الشيء
   على أرضيةٍ بيضاء بوهجٍ ليمونيّ في الركن — فكان التطبيق يخالف واجهته.
   وقرار المالك: نفس معالجة الموقع.
   والليمونيّ هنا **وهجٌ لا لون سطح**: لحظة التوفير تبقى له وحده. */
.hero-head {
  background: var(--surface);
  color: var(--text);
  /* الحشوة العلوية تشمل ارتفاع النوتش: الخلفية الزمردية تمتد تحت شريط
     الحالة (بفضل viewport-fit=cover) والمحتوى ينزل تحته. بدونها يختبئ
     الشعار خلف الساعة والبطارية. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--s-7) var(--s-7);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin: -16px -16px 0;
}
.hero-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
/* الموقع هو العنصر الأبرز بالرأس لا الشعار: العميل يسأل "وش قريب مني؟"
   قبل ما يسأل "وش اسم التطبيق؟" — وهو يعرفه أصلًا لأنه فتحه. */
.hero-brand {
  font-family: 'Bagel Fat One', cursive;
  font-weight: 400;
  font-size: var(--t-title);
  letter-spacing: 0.01em;
  line-height: 1;
  /* انقلب مع الرأس: كان `--on-emerald` مكتوبًا صراحةً، فبقي أبيضَ على
     أبيضَ حين ابيضّت الأرضية — ‎1.08:1‎ مقيسًا من البكسل المرسوم. */
  color: var(--text);
  /* بلا تخفيت: هذي أول ما تقع عليه العين عند فتح التطبيق، وكانت
     مكتومة عند ٧٢٪ كأنها تسمية جانبية لا علامة. */
  opacity: 1;
}

.hero-greeting {
  font-weight: 800;
  font-size: var(--t-body-lg);
  margin: 10px 0 0;
  color: var(--text);
}

/* مفتاح المواقع الثلاثة — الفكرة والحركة من مفتاح Uiverse الذي أرسلتَه،
   لكنه هناك بحالتين (checkbox) وهنا ثلاث، فالمقبض ينزلق إلى ثلاثة مواضع
   لا يقفز بين طرفين. ومنحنى الحركة هو منحناه نفسه: يتجاوز الهدف قليلًا
   ثم يستقرّ، فيُحسّ شيئًا مادّيًّا لا شريحةً تتلوّن.

   والألوان من اللوحة لا من المثال (كان أحمر وأخضر): الرأس كحليّ، فالمسار
   بياضٌ شفيف والمقبض رملي والنصّ عليه كحليّ. */
/* صفٌّ واحد: المفتاح في أوّل السطر (يمينه بالعربية) والموقع الحالي يليه. */
.hero-loc-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-top: 10px;
}
/* أيقونات بلا نصّ، وبعرضٍ ثابت لا `1fr`: كان يمتدّ لعرض الرأس كلّه (٢٧٦
   من ٣٠٨ بكسل = ٩٠٪) لأجل ثلاث كلمات تُقرأ مرّة. والأسماء لم تُحذف —
   انتقلت إلى aria-label وtitle، فتبقى لقارئ الشاشة وللضغط المطوّل. */
.loc-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 32px);
  flex-shrink: 0;
  padding: var(--s-2);
  border-radius: var(--r-full);
  /* انقلب مع الرأس: كان أبيضَ شفّافًا على داكن — أي معدومًا على الأبيض.
     والأخدود الآن من الحبر كبقيّة أخاديد التطبيق. */
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.loc-switch-knob {
  position: absolute;
  /* تتبع الحشوة أعلاه: صارت ٣ فصار الطرح ٦ لا ٨ — وإلا جاء المقبض أعرض
     من شريحته بثلثَي بكسل فطلّ من تحتها عند الطرفين. */
  top: 3px;
  bottom: 3px;
  inset-inline-start: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: var(--r-full);
  /* الحبّة تبقى بيضاء — لكنها على أخدودٍ رماديّ الآن فتُرى مرفوعة،
     وظلُّها أخفّ لأن ما تحتها فاتح. */
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
  /* سالبٌ لأن بداية السطر في العربية يمينه، والانتقال للشريحة التالية
     حركةٌ لليسار. */
  transform: translateX(calc(var(--i, 0) * -100%));
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.loc-switch-seg {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) 0;
  background: none;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  /* **كانت بيضاء على أبيض.** الأيقونتان الخاملتان قيستا ‎rgba(255,255,255,.72)‎
     على أرضيةٍ بيضاء — أي معدومتين. والحبر المكتوم يؤدّي معنى «خامل»
     ويبقى مرئيًّا. */
  color: var(--text-muted);
  transition: color 0.22s var(--ease-out);
}
/* ٣٧ بكسلًا بدل ٢٩: الحشوة وحدها تكبر فلا يتغيّر عرض المفتاح ولا موضع
   مقبضه، و`::after` يكمل الهدف إلى ٤٤. */
.loc-switch-seg { padding: var(--s-5) 0; }
.loc-switch-seg.is-on { color: var(--emerald); }
.loc-switch-seg svg { width: 17px; height: 17px; }
/* لون خاص بكل أيقونة — لكن على المقبض وحده. الشريحتان الخاملتان تقفان على
   الرأس الكحليّ، وأي لون داكن عليه يسقط تحت حدّ التباين المقروء؛ فاللون
   يُصرف حيث يُرى: فوق المقبض الفاتح. و`svg` لا `i` — renderSavyoIcons
   يستبدل العنصر فيموت منتقي <i> بعد الرسم. */
.loc-switch-seg[data-key="home"].is-on svg { color: var(--tint-emerald); }
.loc-switch-seg[data-key="work"].is-on svg { color: var(--tint-clay); }
.loc-switch-seg[data-key="current"].is-on svg { color: var(--tint-coral); }

/* منفذٌ للشاشة الكاملة: البحث بالحي، والمواقع المحفوظة غير الاثنين */
.hero-loc-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  /* يبتلع ما بقي من السطر ويقصّ عند الحاجة بدل أن يدفع المفتاح خارجه. */
  min-width: 0;
  background: none;
  border: none;
  /* كان أبيضَ بشفافية ‎0.72‎ — أي ‎1.0:1‎ على الأبيض. والحبر المكتوم
     يؤدّي نفس المعنى (تمهيدٌ خافت) ويبقى مقروءًا. */
  color: var(--text-muted);
  opacity: 1;
  white-space: nowrap;
  /* **لا يقصّ نفسه.** كان `overflow: hidden` عليه، فطبقةُ اللمس الموسِّعة
     — وهي عنصرٌ زائف بداخله — تُقصّ معها ويبقى الهدف ‎20‎ بكسلًا. والقصّ
     انتقل إلى اسم الموقع بداخله، وهو ما كان يُقصّ فعلًا. */
  overflow: visible;
  font-size: var(--t-footnote);
  font-weight: 600;
  cursor: pointer;
}
.hero-loc-more:active { opacity: 1; }

/* اسم الموقع هو المعلومة، فيأخذ كامل الوضوح، و«الاستلام من» تمهيدٌ خافت.
   كان السطر كلّه بشفافيةٍ واحدة فقُرئ كلّه تمهيدًا ولم يبرز منه شيء. */
.hero-loc-more b {
  font-weight: 800;
  opacity: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* **«تغيير» تقول إن السطر بابٌ لا خبر.** الشيفرون وحده كان يُقرأ زخرفةً،
   فيبقى العميل على أوّل موقعٍ سُجّل له لا يعرف أنه يُبدَّل من هنا. */
.hero-loc-edit {
  flex: none;
  font-size: var(--t-caption);
  font-weight: 700;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 999px;
  opacity: 1;
  /* على الأبيض: حبرٌ داكن على تظليلٍ رقيق. الأبيض الشفّاف على أبيضَ
     لا فرق فيه إطلاقًا — وهو ما كان سيقع لو بقي كما هو. */
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .loc-switch-knob { transition: none; }
}

.hero-loc {
  display: block;
  width: 100%;
  text-align: start;
  background: none;
  border: none;
  padding: var(--s-3) 0 0;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.16s var(--ease-out);
}
.hero-loc:active { opacity: 0.7; }
.hero-loc-label {
  display: block;
  font-size: var(--t-footnote);
  opacity: 0.72;
  margin-bottom: 1px;
}
.hero-loc-value {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-body-lg);
  font-weight: 700;
}
.saved-pill {
  margin-top: 12px;
  background: var(--surface-ink-2);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
.saved-pill-label { font-size: var(--t-footnote); opacity: 0.88; }
.saved-pill-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-weight: 800;
  font-size: var(--t-heading);
  color: var(--lime);
}

/* ================================================================
   الإحساس بالسلاسة: انتقالات الشاشات، ردّ فعل اللمس، هياكل التحميل
   ================================================================
   قاعدة الأداء هنا: كل الحركة على transform/opacity فقط — هذولا اللي
   المتصفح يحركهما على كرت الشاشة بـ60 إطار. أي حركة على width/height/top
   تجبر إعادة تخطيط كل إطار وتعطي الإحساس "المتقطّع" اللي يميّز موقع الويب
   عن التطبيق. */

:root {
  /* منحنى iOS المعتاد — بداية سريعة ونهاية هادئة */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
}

/* ---------- انتقال الشاشات ---------- */
/* forward = دخول لعمق أكبر (مطعم، تفاصيل طلب) — بصفحة RTL يدخل من اليسار
   back = رجوع للخلف — يدخل من اليمين */
@keyframes view-in-forward {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes view-in-back {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes view-in-fade {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

#app.view-forward { animation: view-in-forward var(--dur) var(--ease-out); }
#app.view-back { animation: view-in-back var(--dur) var(--ease-out); }
#app.view-fade { animation: view-in-fade var(--dur) var(--ease-out); }

/* ---------- ردّ فعل اللمس ---------- */
/* أهم تفصيلة تفرّق التطبيق عن الويب: العنصر "يستجيب" تحت الإصبع فورًا */
.rcard,
.mitem,
.order-history-card,
.info-row,
.cat-tile,
.bottom-tab,
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.rcard,
.order-history-card,
.cat-tile,
.btn-primary,
.btn-outline,
.cta,
.btn-icon {
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.rcard:active,
.order-history-card:active { transform: scale(0.978); }
.btn-primary:active,
.btn-outline:active,
.cta:active { transform: scale(0.97); }
.btn-icon:active { transform: scale(0.9); }

/* النجمة تنبض عند التفضيل */
@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.rcard-fav-btn.is-following svg { animation: fav-pop 340ms var(--ease-spring); }

/* ---------- هياكل التحميل (skeletons) ---------- */
/* بديل عن سبينر يدور بالفراغ: يعطي إحساس إن المحتوى "قادم" ويمنع
   قفزة التخطيط لما يوصل فعلًا */
@keyframes skeleton-sheen {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: 8px;
  display: flex;
  gap: var(--s-6);
  align-items: center;
}
.skeleton-block {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  animation: skeleton-sheen 1.25s infinite;
}
.skeleton-thumb { width: 52px; height: 52px; border-radius: var(--r-md); flex-shrink: 0; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); }
.skeleton-line-title { height: 13px; width: 55%; }
.skeleton-line-sub { height: 10px; width: 78%; }

/* ---------- بطاقة رفع صورة (مرفق) ---------- */
/* تحل محل input[type=file] العاري + معاينة صغيرة منفصلة: صورة مصغّرة،
   عنوان، وحالة (فاضٍ / جارٍ الرفع / تم الرفع) بصف واحد، وزر إزالة يظهر
   فقط بعد وجود صورة. نفس البطاقة تُستخدم لصورة المطعم وصورة الصنف. */
.attach-card {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--surface);
}
.attach-media {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
}
.attach-media input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.attach-img { width: 100%; height: 100%; object-fit: cover; display: none; }
.attach-placeholder-icon { color: var(--text-muted); }
.attach-body { flex: 1; min-width: 0; }
.attach-title { font-size: var(--t-callout); font-weight: 700; color: var(--text); }
.attach-desc {
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-desc.is-uploading { color: var(--emerald); }
.attach-desc.is-error { color: var(--coral); }
.attach-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.attach-remove:hover { color: var(--coral); border-color: var(--coral); }

/* ---------- احترام تفضيل تقليل الحركة ---------- */
/* المستخدم اللي مفعّل "تقليل الحركة" بالنظام غالبًا عنده سبب صحي —
   نلغي الحركة كلها بدل ما نخففها */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- منتقي الموقع بالخريطة + رفع الصور (لوحة المندوب) ---------- */
.map-picker {
  height: 220px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-top: 6px;
}
.coords-readout {
  font-family: 'Plus Jakarta Sans', monospace;
  direction: ltr;
  text-align: right;
  font-size: var(--t-footnote);
  color: var(--emerald);
  margin-top: 6px;
}
.upload-row { display: flex; gap: var(--s-4); align-items: center; margin-top: 6px; }
.upload-preview {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  display: none;
}
.upload-status { font-size: var(--t-footnote); color: var(--text-muted); margin-top: 4px; }
.form-group input[type="file"] {
  padding: var(--s-4);
  font-size: var(--t-footnote);
  direction: rtl;
  text-align: right;
}

/* ---------- تفاصيل تجعلها تبدو تطبيقًا لا صفحة ---------- */

html {
  /* يمنع الارتداد المطاطي الذي يكشف خلفية بيضاء أعلى الشاشة وأسفلها عند
     السحب الزائد. أوضح فرق بين التطبيق الأصلي وصفحة الويب على iOS. */
  overscroll-behavior-y: none;
  background: var(--bg);
}

body {
  overscroll-behavior-y: none;

  /* الضغط المطوّل في التطبيقات الأصلية لا يحدّد النصوص. تركها يجعل كل ضغطة
     مطوّلة على زر أو عنوان تظهر مقبضَي تحديد وقائمة نسخ — إشارة فورية
     للمستخدم أن ما يستخدمه صفحة ويب. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* لكن ما يحتاج المستخدم نسخه فعلًا يبقى قابلًا للتحديد: كود الاستلام
   يُملى على الكاشير أو يُنسخ، والأرقام كذلك. المنع الشامل هنا يضرّ. */
.pickup-code,
.order-code,
.latin.num,
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* التمرير البرمجي (الرجوع لأعلى بين الشاشات) يكون سلسًا لا قفزة */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ملاحظة: الارتفاع فوق شريط الإيماءة صار على .tabbar-dock مع بقية حشوته،
   لا هنا — تكراره على الحبة نفسها كان يضيف الهامش مرتين. */

/* ---------- شريط البحث بالرئيسية ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--s-6);
  margin-top: 12px;
}
.search-bar .icon-sm { color: var(--text-muted); flex-shrink: 0; }
/* داخل الرأس: حقلٌ مرفوع لا زجاجٌ شفيف. كان شفيفًا ليمرّر النقش من
   تحته، وبزوال النقش زال سببه — وما بقي منه أنه يُقرأ حقلًا **معطّلًا**:
   نصٌّ باهت في مستطيلٍ بالكاد يُرى على أرضيةٍ داكنة. والبحث هو ثاني ما
   يُقصد في الرأس بعد الموقع، فيستحق أن يبدو مضغوطًا.
   والارتفاع من الحشوة لا من `height`: الحقل يكبر مع تكبير خطّ النظام. */
.hero-head .search-bar {
  background: var(--surface);
  border-color: transparent;
  border-radius: var(--r-lg);
  padding: var(--s-1) var(--s-7);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.10);
}
.hero-head .search-bar svg { color: var(--tint-emerald); }
.hero-head .search-bar input { color: var(--text); }
.hero-head .search-bar input::placeholder { color: var(--text-muted); }
.search-bar input {
  flex: 1;
  /* `min-width: auto` هو الافتراضي لعنصر فلكس، ومعناه «لا تنكمش تحت عرض
     محتواك». وعرض محتوى حقل البحث مشتقٌّ من `size` الافتراضي (٢٠ حرفًا)
     بخطٍّ ١٦px — أي ~٢٧٩px. فعلى شاشة ٣٠٨ كان يمتدّ **٢٧ بكسل خارج
     الشاشة يسارًا** فيُقصّ نصّه، وهو عرض جهاز المالك تحديدًا.
     و`min-width: 0` تأذن له بالانكماش داخل خانته. */
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  /* ١٦px بالضبط: أي أقل يخلي سفاري بالآيفون يقرّب الشاشة تلقائيًا عند
     التركيز على الحقل، فتنكسر الواجهة بلا سبب ظاهر */
  font-size: 16px;
  padding: var(--s-6) 0;
  color: var(--text);
}
.search-bar input::placeholder { color: var(--text-muted); }
/* سفاري يضيف زر مسح خاص به فوق زرنا */
.search-bar input::-webkit-search-cancel-button { display: none; }

.search-clear {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--s-2);
  display: flex;
  flex-shrink: 0;
}

/* زر إعادة الطلب داخل بطاقة السجل */
.order-history-card .reorder-btn {
  margin-top: 8px;
  padding: var(--s-4);
  font-size: var(--t-callout);
}

/* ---------- انتظار الأزرار ---------- */
/* الدوّار يحل محل أيقونة الزر ويبقى النص. إخفاء النص كذلك يجعل الزر يبدو
   وكأنه تغيّر لا وكأنه يعمل. */
.btn-spinner {
  display: inline-block;
  /* **مقاسٌ لا يُنتزع منه.** كان `width/height` وحدهما، فإذا حلّ المؤشّر
     في مضيفٍ غير زرٍّ عاديّ (صفٌّ بعرض الشاشة مثلًا) انسحب عرضه وامتدّ
     طوله، فصار الشكل الدائريّ عدسةً رفيعة — ودورانها يُقرأ **خطًّا مائلًا
     يلفّ** عبر البطاقة، لا مؤشّر تحميل. الحدود الدنيا والقصوى تقفل الأمر
     مهما كان المضيف. */
  flex: none;
  align-self: center;
  width: 15px;
  height: 15px;
  min-width: 15px;
  max-width: 15px;
  min-height: 15px;
  max-height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

button.is-loading {
  cursor: progress;
  /* بلا تخفيت: الزر يعمل فعلًا، والتخفيت يقول "معطّل" */
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.6s; }
}

/* ---------- عمق المساحات الزمردية ---------- */
/* كان نقش معيّناتٍ متكرّر (٤ تدرّجات، خانة ١٠٦px). أُزيل: النقش يتكرّر
   ثماني مرّات خلف الرأس فيصير هو أوّل ما تقع عليه العين، ويُجبر كلَّ ما
   فوقه أن يقاومه — ولهذا كان حقل البحث زجاجًا شفيفًا لا حقلًا، ليمرّره.
   وبديله وهجٌ واحد لا يتكرّر: يعطي العمق نفسه ولا ينافس شيئًا، فيعود
   الرأس أرضيّةً ويعود ما فوقه هو المقروء. */
.hero-head,
.rhero,
.auth-screen {
  position: relative;
  overflow: hidden;
}
.hero-head::before,
.rhero::before,
.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* وهجٌ ليمونيّ واحد. كان معه وهجٌ مرجانيّ في الزاوية المقابلة — لونٌ
     ثالث على أكبر سطحٍ داكن في التطبيق، وهو ما يجعل الشاشة تُقرأ
     «ألوانًا كثيرة». والليمونيّ يبقى لأنه الهوية. */
  /* ‎0.42‎ لا ‎0.16‎: الأرضية الفاتحة تبتلع التدرّجات الخفيفة، والرقم
     مأخوذ من `web/site/index.html` حرفًا بحرف لا مقدَّرًا — فالتطبيق
     والموقع يقولان الشيء نفسه بنفس القوّة. ومعه ظلٌّ رقيق في الركن
     المقابل يمنع الرأس أن يذوب في الصفحة البيضاء تحته. */
  background:
    radial-gradient(62% 64% at 84% -6%,
      rgba(198, 244, 50, 0.42) 0%, rgba(198, 244, 50, 0) 64%),
    radial-gradient(46% 42% at 6% 104%,
      rgba(0, 0, 0, 0.045) 0%, rgba(0, 0, 0, 0) 70%);
}
/* المحتوى فوق النقش */
.hero-head > *,
.rhero > *,
.auth-screen > * { position: relative; z-index: 1; }

/* ---------- مشاهد الحالات الفارغة ---------- */
/* رسومات unDraw (رخصة مفتوحة، تجاري بلا إسناد) بألوان هويتنا. تُستخدم
   للحالات التي يقف عندها المستخدم فعلًا — لا لكل حالة فارغة، وإلا فقدت
   وزنها وصارت زخرفة متكررة. */
.scene-state { text-align: center; padding: var(--s-9) var(--s-7) var(--s-4); }
.scene-art {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}
.scene-state h3 { margin: 0 0 6px; font-size: var(--t-heading); font-weight: 700; }
.scene-state p { margin: 0; color: var(--text-muted); font-size: var(--t-callout); line-height: 1.6; }

.pickup-art {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
}

/* ---------- لحظات الفرح ---------- */
/* الحركة تشتغل فقط مع صنف is-celebrating على الحاوية. بدونه تُرسم الأشكال
   بحالتها النهائية ساكنة — فنفس الرسمة تخدم اللحظة الحيّة (طلب تأكّد الحين)
   والعرض التاريخي (فتح طلب قديم) بلا نسختين.
   لا حاجة لحارس prefers-reduced-motion هنا: القاعدة العامة أعلى الملف
   تلغي كل animation-duration بالتطبيق كله. */
.celebrate-art {
  width: 100%;
  max-width: 132px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
}
.celebrate-art svg { width: 100%; height: 100%; display: block; }

.is-celebrating .celebrate-disc {
  transform-origin: 24px 24px;
  animation: celebrate-pop 0.44s var(--ease-spring) both;
}
.is-celebrating .celebrate-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: celebrate-draw 0.4s var(--ease-out) 0.24s both;
}
.is-celebrating .celebrate-rays {
  transform-origin: 24px 24px;
  animation: celebrate-burst 0.55s var(--ease-out) 0.16s both;
}
.is-celebrating .celebrate-sparks path {
  transform-origin: center;
  animation: celebrate-twinkle 1.5s var(--ease-out) infinite;
}
.is-celebrating .celebrate-sparks path:nth-child(2) { animation-delay: 0.35s; }
.is-celebrating .celebrate-sparks path:nth-child(3) { animation-delay: 0.7s; }
.is-celebrating .celebrate-plate {
  transform-origin: 24px 32px;
  animation: celebrate-pop 0.5s var(--ease-spring) both;
}

@keyframes celebrate-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes celebrate-draw {
  to { stroke-dashoffset: 0; }
}
/* الشرر ينطلق للخارج ثم يخفت — يبدأ مضغوطًا نحو المركز لا من حجمه النهائي */
@keyframes celebrate-burst {
  0% { transform: scale(0.55); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}
@keyframes celebrate-twinkle {
  0%, 100% { transform: scale(0.6); opacity: 0.35; }
  50% { transform: scale(1); opacity: 1; }
}

/* ---------- شاشة توفيري ---------- */
.savings-hero {
  background: var(--surface-ink);
  color: var(--on-emerald);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-8) var(--s-8);
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
/* `svg { display: block }` عامّ في هذا الملف، فالرسمة كتلةٌ لا سطر —
   و`text-align: center` لا تحرّك كتلة. والهامش التلقائي كان على الحاوية
   وعرضها كامل أصلًا، فلم يفعل شيئًا: التصقت الرسمة بحافة البداية
   (اليمين في العربية) بينما الرقم والعنوان تحتها متوسّطان.
   الهامش يُوضع على ما يتحرّك فعلًا. ونظيرتها `.savings-stat-art svg`
   كانت صحيحةً من البداية — ولهذا توسّطت بطاقتا الإحصاء ولم يتوسّط الرأس. */
.savings-hero-art { display: block; margin-bottom: 8px; }
.savings-hero-art svg { width: 56px; height: 56px; margin-inline: auto; }
.savings-hero-label { font-size: var(--t-footnote); opacity: 0.78; }
.savings-hero-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1.15;
  /* الليموني هنا مقصود: هذي هي لحظة التوفير التي حُجز لها اللون */
  color: var(--lime);
}
.savings-hero-unit { font-size: var(--t-footnote); opacity: 0.78; }

.savings-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: 12px; }
.savings-stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-6);
  text-align: center;
}
.savings-stat-art svg { width: 34px; height: 34px; margin: 0 auto 6px; }
.savings-stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--t-title);
  font-weight: 800;
  color: var(--emerald);
}
.savings-stat-label { font-size: var(--t-footnote); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

.savings-chart-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  margin-bottom: 12px;
}
/* مخطّط التوفير: شهر واحد، أعمدته أيام ذلك الشهر.
   بـflex لا مكتبة رسم — ثلاثون عمودًا بسيطًا لا تستحق ٤٠ كيلوبايت. */
.savings-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: 4px;
}
.savings-chart-title { text-align: center; flex: 1; min-width: 0; }
.savings-chart-month { display: block; font-size: var(--t-body); font-weight: 700; }
.savings-chart-total {
  display: block;
  font-size: var(--t-footnote);
  color: var(--emerald);
  font-weight: 700;
  margin-top: 2px;
}
.chart-nav {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
/* المعطّل يبقى ظاهرًا لا يختفي: اختفاؤه يقفز التخطيط ويزيح العنوان،
   وبقاؤه باهتًا يقول "ما فيه شهر قبله" وهي معلومة. */
.chart-nav:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .chart-nav:hover:not(:disabled) { background: var(--surface-2); }
}

.savings-days {
  display: flex;
  align-items: flex-end;
  gap: var(--s-1);
  height: 120px;
  margin-top: 14px;
}
.day-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.day-bar {
  width: 100%;
  background: var(--border);
  border-radius: var(--r-hair);
  min-height: 3px;
  transition: height 0.45s var(--ease-out);
}
/* اليوم الذي فيه توفير وحده يأخذ لون الهوية — الفارغ خطٌّ رمادي رفيع
   يحفظ مكانه بالمحور بدل فراغ يوحي بانقطاع. */
/* لونٌ واحد لا تدرّجان: كان `emerald → lime` فيُقرأ العمود لونين
   متدرّجين لا قيمةً واحدة، والعين تقرأ التدرّج معنًى (أعلى = شيء آخر)
   وهو لا يعني شيئًا هنا. والليمونيّ وحده هو لون التوفير. */
.day-col.has-value .day-bar {
  background: var(--lime);
  border-radius: var(--r-hair);
}
.day-label {
  font-size: var(--t-caption);
  color: var(--text-muted);
  margin-top: 6px;
  height: 0.9rem;
  line-height: 0.9rem;
}

/* بطاقة الدعوة — بحدّ زمردي لا ليموني: الليموني محجوز للحظة التوفير
   نفسها (زر التأكيد)، وصرفه هنا يُضعفه هناك. */
.refcard {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 3px -1px var(--shadow);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-7);
  margin-bottom: 12px;
}
.refcard-head { display: flex; align-items: flex-start; gap: var(--s-6); margin-bottom: 14px; }
.refcard-art { flex-shrink: 0; width: 54px; }
.refcard-art svg { width: 54px; height: 54px; display: block; }
.refcard-title { font-size: var(--t-body); font-weight: 800; margin-bottom: 4px; }
.refcard-desc { font-size: var(--t-callout); color: var(--text-muted); line-height: 1.7; }

.refcard-mine {
  padding: var(--s-6) var(--s-6);
  margin-bottom: 12px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--emerald) 9%, transparent);
  font-size: var(--t-callout);
  line-height: 1.7;
}

/* الكود مقروء لا مزخرف: يُملى صوتيًّا أحيانًا، فالتباعد بين حروفه يمنع
   التباس ما يُقرأ حرفًا واحدًا. */
.refcard-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-7);
  margin-bottom: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.refcard-code-label { font-size: var(--t-footnote); color: var(--text-muted); }
.refcard-code-value {
  font-size: var(--t-heading);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--emerald);
}

.refcard-note {
  margin-top: 8px;
  font-size: var(--t-footnote);
  color: var(--emerald);
  text-align: center;
  word-break: break-all;
}
.refcard-stats {
  display: flex;
  justify-content: space-around;
  gap: var(--s-5);
  margin-top: 14px;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
  font-size: var(--t-footnote);
  color: var(--text-muted);
}
.refcard-stats b { color: var(--text); }

.savings-section-title { font-size: var(--t-body); font-weight: 700; margin: 16px 0 8px; }

/* ---------- بطاقة الدخول ---------- */
/* بطاقة بيضاء بارزة على خلفية زمردية مزخرفة، بدل نموذج مسطّح على الخلفية
   الرملية. شاشة الدخول أول ما يشوفه العميل الجديد، وكانت سطرًا وحقلًا وزرًا
   بلا أي حضور للعلامة. */
.auth-screen {
  background: var(--surface-ink);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-7) var(--s-10);
  margin: 0 -16px;
  position: relative;
  overflow: hidden;
}

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-8) var(--s-9);
  box-shadow: 0 12px 30px rgba(20, 35, 31, 0.10);
  text-align: center;
}

/* علامة العلامة التجارية: نفس أيقونة التطبيق بحرفها الليموني */
/* الشعار الفعلي (icon-192.png) بدل حرف S المؤقت — نفس الشبكة المموّهة
   المعتمدة في كل مكان آخر بالهوية. */
/* الرمز شفاف بلا خلفية: لا زوايا مستديرة تقصّ أطرافه، ولا ظلّ يرسم
   مربّعًا حول شكل ليس مربّعًا، و contain لا cover لئلا يُقصّ. */
.auth-mark {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.auth-title { margin: 0 0 4px; font-size: var(--t-heading); font-weight: 800; }
/* السطر التعريفي زمردي وبينه وبين الاسم فراغ أقل من الذي تحته: القرب يربطه
   بالاسم فيُقرأ كجزء من العلامة، لا كجملة ثالثة في الشاشة. */
.auth-tagline {
  margin: 0 0 14px;
  font-size: var(--t-callout);
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: 0.01em;
}
.auth-desc {
  margin: 0 0 20px;
  font-size: var(--t-callout);
  color: var(--text-muted);
  line-height: 1.6;
}

/* الوسم فوق الحقل لا داخله: النائب يختفي عند الكتابة، فيفقد العميل معرفة
   ما يكتبه لو تشتّت. */
.auth-label {
  display: block;
  text-align: start;
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.auth-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-6);
  /* ١٦px بالضبط: أي أقل يجعل سفاري بالآيفون يقرّب الشاشة عند التركيز */
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  margin-bottom: 16px;
  transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}
.auth-input:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 14%, transparent);
}
/* الكود أربع خانات — نباعدها ونكبّرها فتُقرأ كخانات لا ككلمة */
.auth-input-code {
  text-align: center;
  font-size: var(--t-title);
  font-weight: 800;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.auth-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: 16px 0 0;
  font-size: var(--t-footnote);
  color: var(--text-muted);
}
.auth-note svg { color: var(--emerald); }

/* ---------- تصنيفات الرئيسية ---------- */
/* الرسمة تطفو بلا حاوية إطلاقًا — لا دائرة ولا خلفية ملوّنة ولا بطاقة.
   جرّبنا الثلاثة بالترتيب وكلها كانت تنافس الرسمة بدل ما تبرزها: العين
   تلتقط الحاوية أولًا لأنها شكل هندسي منتظم، والرسمة تصير محتواها. لما
   تُشال، ما يبقى إلا الرسمة نفسها — وهي المقصودة. */
.filter-chips { padding: var(--s-2) 0 var(--s-1); }

/* سحب أفقي بدل شبكة مطوية بزر "المزيد". أربعة بالشاشة والخامس يظهر نصفه
   عمدًا — الحافة المقصوصة هي ما يخبر العين أن هناك المزيد، والزر لا يفعل. */
/* صفّان لا صفّ: أحد عشر تصنيفًا في سطر واحد تعني ثلاث سحبات قبل أن يرى
   العميل آخرها. `grid-auto-flow: column` يبقي السحب أفقيًّا لكنه يملأ
   عمودًا بعد عمود — فيُرى ضعف العدد في النظرة الواحدة. */
.cat-rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 18px) / 3.9);
  align-items: start;
  column-gap: var(--s-3);
  row-gap: var(--s-7);
  overflow-x: auto;
  padding: var(--s-6) 0 var(--s-3);
  margin: 0 -16px;
  padding-inline: var(--s-7);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* السحب الأفقي هنا يجب ألا يسحب الصفحة كلها معه */
  overscroll-behavior-x: contain;
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail .cat-tile {
  /* العرض انتقل إلى grid-auto-columns أعلاه — و٣.٩ لا ٤ كما كان: الكسر
     مقصود، فالعمود المقطوع نصفيًّا هو ما يقول للعين إن الصفّ يُسحب.
     scroll-snap يعطيه استقرارًا عند نهاية كل سحبة بدل الوقوف بين عمودين. */
  scroll-snap-align: start;
}
.cat-tile {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: transform 0.18s var(--ease-out);
}
/* ٠٫٩٦ لا ٠٫٩٢: الانكماش يُطلق بمجرد لمس الإصبع، فأثناء السحب كانت كل خانة
   تمرّ تحت الإصبع تنبض — وهذا ما كان يُحسّ اهتزازًا لا سحبًا ناعمًا. */
.cat-tile:active { transform: scale(0.96); }
/* المتصفح ينتظر ٣٠٠ms ليعرف إن كانت نقرة مزدوجة؛ هذا يؤخّر استجابة الاختيار */
.cat-tile { touch-action: manipulation; }

/* نسبيّ بسقف ثابت لا مقاس صلب: على شاشة ٣٢٠ بكسل تضيق الخانة إلى ٦٩ بكسل،
   ومقاس صلب ٨٢ كان يتجاوزها ويتراكب مع جارتها. */
.cat-tile-art {
  width: 100%;
  max-width: 82px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.cat-tile-art > svg { width: 79%; height: 79%; display: block; }

/* بلا ظل بالمطلق في الحالة العادية: الصف كله طعام يقف مسطّحًا على الرملي.
   وأي ظل ثابت — حتى الخفيف — يجعل الصورة تبدو ملصقة فوق الصفحة لا جزءًا
   منها، وهو عكس ما نريد. */

/* الصورة المجسّمة فوق الرسمة المسطّحة. لو حُذفت الصورة عند الخطأ، تظهر
   الرسمة تحتها فورًا — ولهذا هي مرسومة لا مخفيّة. */
.cat-art-stack { position: relative; display: flex; width: 79%; height: 79%; }
/* مخفيّة ما دامت الصورة موجودة. الصورة شفافة الخلفية فالرسمة تحتها كانت
   تطلّ من حولها ومن خلال فراغاتها — تُكشف فقط لو فشل تحميل الصورة. */
.cat-art-stack > svg { width: 100%; height: 100%; display: block; visibility: hidden; }
.cat-art-stack.art-fallback > svg { visibility: visible; }
/* الصورة تتجاوز حدود الرسمة قليلًا: الطعام مقصوص لحدود محتواه فيملأ إطاره
   بالكامل، بعكس الرسمة المتروك حولها هامش — فبلا تجاوز يبدو أصغر منها. */
.cat-art-stack img {
  position: absolute;
  inset: -13%;
  width: 126%;
  height: 126%;
  object-fit: contain;
}
.cat-tile-art svg { display: flex; color: var(--text-muted); }

.cat-tile-label {
  font-size: var(--t-footnote);
  /* داكن لا رمادي: التسمية جزء من العنصر لا شرح ثانوي له، وبلا حاوية
     تحتها صارت هي وحدها ما يحمل الاسم. */
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  /* أطول تسمية ("مأكولات بحرية") لازم تنزل سطرين بدل ما تقص أو توسّع الخانة */
  overflow-wrap: anywhere;
}

/* بلا ظل في أي حالة — لا ساكنة ولا مختارة. الصف كله طعام مسطّح على الرملي.
   الاختيار تحمله التسمية وحدها: زمردية ثقيلة مقابل داكنة عادية. */
.cat-tile.active .cat-tile-label { color: var(--emerald); font-weight: 700; }

/* التصنيف الخالي من مطاعم قريبة يُعرض بكامل حضوره كالبقية.
   كان بشفافية ٠٫٤ ليوضّح التغطية، لكن النتيجة صفٌّ نصفه باهت ونصفه صريح —
   يُقرأ كخلل في الصور لا كإشارة عن التغطية. والفراغ تشرحه شاشة النتائج
   بجملة صريحة، وهو موضعها الصحيح. */

/* ---------- لوحة المطعم: مدّة العرض وإشعار المتابعين ---------- */
/* صاحب مطعم واقفٌ في زحمة — الوضوح قبل الجمال. الأزرار كبيرة الهدف،
   والحالة المعطّلة تشرح سببها بنصّها لا بلونها وحده. */
.offer-duration { margin-top: 10px; }
.offer-duration > label {
  display: block;
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.offer-days { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.offer-day {
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.16s var(--ease-out), border-color 0.16s var(--ease-out),
              color 0.16s var(--ease-out);
}
.offer-day.is-on {
  background: var(--glass-chip-bg);
  box-shadow: var(--glass-chip-shadow);
  border-color: transparent;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
  font-weight: 700;
}
.offer-days-left {
  margin-top: 6px;
  font-size: var(--t-footnote);
  color: var(--text-muted);
}

/* مربّع الإشعار: هدف اللمس هو السطر كلّه لا المربّع وحده — إصبعٌ في زحمة
   لا يصيب ١٦ بكسلًا. */
.offer-notify {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: 12px;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--t-callout);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.offer-notify input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--emerald); }
/* المعطّل يُقرأ معطّلًا: باهتٌ وبمؤشّر يقول إنه ليس قابلًا للضغط. النصّ
   وحده يشرح السبب — «وصل ١٢ متابعًا اليوم» أوضح من مربّع رمادي صامت. */
.offer-notify.is-off { opacity: 0.62; cursor: default; }

/* «انتهت مدّته»: طوبيٌّ لا رمادي — هذه حالة تستدعي فعلًا من صاحب المطعم
   لا خبرٌ يمرّ عليه. */
.offer-expired {
  display: inline-block;
  margin-inline-start: 6px;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--t-caption);
  font-weight: 700;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}
.offer-row.is-expired { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* ---------- التبويب البارز: العروض ---------- */
/* دائرةٌ مرفوعة فوق سطح الشريط — النمط المعروف في تطبيقات التوصيل.
   وهي ليست زينة: العروض المكان الوحيد الذي يملؤه المطعم بفعلٍ منه، فظهوره
   الدائم حافزٌ لصاحب المطعم بقدر ما هو مدخلٌ للعميل.

   والرفع بـ`margin-top` السالب لا بـ`transform`: التحويل يرفع الشكل ويترك
   موضع اللمس مكانه، فيضغط العميل الدائرة التي يراها ولا يحدث شيء. */
.bottom-tab.bottom-tab-raised {
  /* **حصّة كإخوته لا أضيق.** كان ‎54px‎ بينما البقيّة ‎74‎ — والقاعدة
     المنزلقة تأخذ عرض التبويب، فتنكمش تحت اللهب وحده وتُقرأ دائرةً صغيرة
     بين حبّاتٍ كبيرة. القياس: ‎54‎ مقابل ‎74‎، فرقُ ‎20‎ بكسلًا.
     والحصّة المتساوية (`flex: 1 1 0`) تجعل القاعدة واحدةً في التبويبات
     الخمسة، واللهب يبقى ‎50px‎ متوسّطًا فيها. */
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 52px;
  /* نفس حشوة إخوته بالضبط: `flex-basis: 0` يقيس **صندوق المحتوى** لا
     صندوق الحدّ، فالحصص تتساوى ثم تُضاف الحشوة فوقها. وبحشوةٍ صفر بقي
     اللهب أضيق بأربعة بكسلات مقيسة رغم تساوي الحصص. */
  padding: 0 var(--s-1);
  /* داخل حدّ الشريط لا فوقه: كان `-28px` يخرج اللهب ١٧ بكسلًا فوق الحافة
     العليا — مقيس. وبروزه الآن من مقاسه: ٤٦ بكسلًا في شريطٍ أيقوناته ٢٦،
     فهو أكبر ما فيه بلا أن يطلّ خارجه. */
  margin-top: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* حلقةٌ بلون الأرضية تفصل الدائرة عن الشريط الزجاجي تحتها، وإلا بدت
     ملتصقةً به لا طافيةً فوقه. و`--on-emerald` هو الكريميّ الفعلي في هذا
     الملف — لا يوجد `--cream`، وكتابتها كانت تسقط على currentColor صامتةً
     فتصحّ بالمصادفة وتنكسر مع أول تغيير لون. */
  border: none;
  /* `.bottom-tab` يقصّ محتواه، واللهب والشارة يقفان خارج حدوده — فبلا
     هذا الاستثناء يُرسمان ثم يُقصّان. */
  overflow: visible;
  transition: transform 0.2s var(--ease-out);
}
/* اللهب: صورةٌ مجسّمة شفافة الخلفية، لا أيقونة من الطقم. بقية الأيقونات
   ترث `currentColor` بلون واحد، والنار لا تكون بلون واحد.
   و`drop-shadow` لا `box-shadow`: الأول يتبع حدود الشكل، والثاني يرسم
   مستطيلًا حول الإطار الشفاف. */
.tab-flame {
  width: 50px;
  height: 50px;
  display: block;
  object-fit: contain;
  /* بلا وهجٍ برتقالي: كان `drop-shadow` ملوّنًا يشعّ حول اللهب فيجعله
     يطفو **فوق** الزجاج لا فيه. وقد طُلب أن يدخل في المادّة مع إخوته.
     وبقي ظلٌّ رماديّ خفيف وحده يفصله عن الشريط. */
  filter: drop-shadow(0 2px 4px rgba(20, 35, 31, 0.28));
  transition: transform 0.24s var(--ease-out);
}
/* النشاط تحمله القاعدة المنزلقة كبقيّة التبويبات — واللهب يكبر قليلًا
   لا يشتعل. الوهج أُزيل بطلبٍ صريح: كان يُخرجه من المادّة الزجاجية. */
.bottom-tab-raised.active .tab-flame { transform: scale(1.05); }
.bottom-tab-raised:active { transform: scale(0.93); }
/* الاسم في aria-label وحده: الدائرة ٥٢px ولا تتّسع لكلمة مع أيقونة،
   وإخفاؤه بـhidden لا بـdisplay يبقيه لقارئ الشاشة. */
.bottom-tab-raised .bottom-tab-label { display: none; }

/* الشريط يسمح للدائرة أن تطلّ فوقه — بلا هذا تُقصّ عند الحافة العليا. */
.bottom-tabbar { overflow: visible; }

/* ---------- السحب للتحديث ---------- */
/* مثبَّتٌ بالإطار لا بالمستند: لو كان داخل `#app` لانزلق مع المحتوى عند
   أوّل بكسل تمرير فبدا كأنه يهرب من الإصبع. وهو خارج التدفّق تمامًا فلا
   يزيح ما تحته عند ظهوره. */
#pull-refresh {
  position: fixed;
  top: 8px;
  /* التوسيط بالهوامش لا بـ`inset-inline-start: 50%` + `translateX(-50%)`:
     في الـrtl تعني `inset-inline-start` **اليمين**، فالنسبة ٥٠٪ تضع
     الحافّة اليمنى في المنتصف ثم يدفعه التحويل يسارًا مرّةً أخرى —
     فينحرف بعرضه كاملًا. مقيس: ٣٤ بكسلًا يسارًا على شاشة ٣٠٨.
     والهوامش التلقائية لا اتّجاه لها، وتُخلي `transform` للنزول وحده. */
  inset-inline: 0;
  margin-inline: auto;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  opacity: 0;
  pointer-events: none;
  background: var(--glass-chip-bg);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid var(--glass-chip-border);
  box-shadow: var(--glass-chip-shadow);
}
/* الانتقال عند الرجوع وحده: لو كان دائمًا لتأخّر المؤشّر خلف الإصبع
   أثناء السحب — والتأخّر هنا يُقرأ بطئًا في التطبيق لا نعومةً. */
#pull-refresh.is-returning {
  transition: transform 0.24s var(--ease-out), opacity 0.24s var(--ease-out);
}
/* السهم يحمل الطور الأول: «اسحب» ثم «أفلت». الحلقة وحدها كانت تقول
   «أنا أحمّل» قبل العتبة، وهي كاذبة — العميل ما زال قادرًا على التراجع
   بإرخاء إصبعه. والسهم يصف ما يفعله الإصبع الآن لا ما سيحدث. */
.pull-refresh-arrow {
  position: absolute;
  width: 17px;
  height: 17px;
  color: var(--tint-emerald);
  transform: rotate(0deg);
  transition: transform 0.24s var(--ease-out), opacity 0.14s linear;
}
#pull-refresh.is-ready .pull-refresh-arrow { transform: rotate(180deg); }
/* والحلقة تحمل الطور الثاني وحده: التحميل الجاري فعلًا. */
.pull-refresh-spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  border: 2px solid color-mix(in srgb, var(--tint-emerald) 25%, transparent);
  border-top-color: var(--tint-emerald);
  opacity: 0;
}
#pull-refresh.is-spinning .pull-refresh-arrow { opacity: 0; }
#pull-refresh.is-spinning .pull-refresh-spinner {
  opacity: 1;
  animation: pull-spin 0.7s linear infinite;
}
@keyframes pull-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #pull-refresh.is-spinning .pull-refresh-spinner { animation-duration: 2.4s; }
}

/* زرّ المتابعة في رأس صفحة المطعم: نفس زرّ البطاقة نصًّا ولونًا ومقاسًا.
   كان أكبر ليوازي زرّ الرجوع، فخرج لوحًا أزرق يسحب العين عن اسم المطعم.
   والتوازن يأتي من الموضع لا من الحجم. وقد كان جرسًا قبل ذلك: أيقونةٌ
   لا تقول ماذا يحدث إن ضُغطت. */
.rhead-fav {
  padding: var(--s-3) var(--s-6);
  font-size: var(--t-footnote);
  box-shadow: 0 2px 10px -2px rgba(20, 35, 31, 0.45);
}

/* ---------- قسم العروض: بنرات التبويبات ---------- */
/* صفّ يُسحب أفقيًّا كصفّ التصنيفات، لكن بخانات عريضة لا مربّعة: البنر يحمل
   ثلاثة أسطر (شارة، عنوان، عدد) ولا يتّسع لها مربّع ٨٢ بكسل.

   والتصميم لكل عرض في كتلة «بنرات العروض» آخر الملف. */
.offer-section { margin: 2px 0 4px; }
.offer-section-title { margin: 0 0 8px; }
.offer-rail {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  margin: 0 -16px;
  padding-inline: var(--s-7);
  padding-block: var(--s-1) var(--s-4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.offer-rail::-webkit-scrollbar { display: none; }
.offer-card {
  position: relative;
  overflow: hidden;
  /* حدٌّ أدنى ٢٠٠: على شاشة ٣٠٨ كانت الخانة ١٤٩ فتعلو الصورةُ العنوان —
     فيظهر فيها بنرٌ ونصف بدل اثنين إلّا قليلًا. */
  flex: 0 0 max(200px, calc((100% - 8px) / 1.8));
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s var(--ease-out);
}
.offer-card:active { transform: scale(0.975); }

/* صفّ التصنيفات داخل عرضٍ مختار — نصّ وعدد لا صور: هذه تضييقٌ داخل نتيجة
   لا تصفّحٌ من الصفر، والصور هنا تنافس بنرات فوقها مباشرة. */
.offer-cats {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  /* **حشوةٌ رأسية يقابلها هامشٌ سالب.** `overflow-x: auto` يجعل المحور
     الرأسيّ قاصًّا هو الآخر (القيمة `visible` تُحسب `auto` متى قُصّ المحور
     الآخر)، فطبقةُ اللمس الموسِّعة للحبّة تُقصّ ويبقى الهدف ‎33‎ بكسلًا.
     والحشوة تفتح للطبقة مكانًا داخل الشريط، والهامش السالب يردّ التخطيط
     كما كان — فلا يتحرّك شيء ويكبر ما يلتقط الإصبع. */
  padding-block: 7px;
  margin: -7px -16px -3px;
  padding-inline: var(--s-7);
  scrollbar-width: none;
}
.offer-cats::-webkit-scrollbar { display: none; }
.offer-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-full);
  padding: var(--s-3) var(--s-6);
  font-family: inherit;
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.offer-cat.is-on {
  background: var(--glass-chip-bg);
  box-shadow: var(--glass-chip-shadow);
  border-color: transparent;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
  font-weight: 700;
}
.offer-cat-n { font-size: var(--t-caption); opacity: 0.75; }

/* ---------- حبّات الفلاتر ---------- */
/* منفصلة عن التصنيفات عمدًا: "المفضّلة" و"خصم أعلى" أفعال يطبّقها المستخدم،
   لا أنواع طعام. وضعها بين الرسومات كان يخلّي العميل يبحث عن نوع أكل بين
   أزرار ليست أنواعًا. */
/* صفّ الفلاتر ومفتاح العرض: الشرائح تنزلق أفقيًّا والمفتاح يثبت في طرفه.
   لو وُضع المفتاح داخل الشرائح لانزلق معها وغاب عن العين. */
/* ---------- أقسام الرئيسية ---------- */
/* القسم يظهر متى امتلأ ويختفي متى فرغ. عنوانٌ فوق شريطٍ فارغ أسوأ من غياب
   القسم: يَعِد بشيء ثم لا يفي، ونحن اليوم بأربعة مطاعم لا بأربعمئة. */
.home-section { margin: 4px 0 14px; }
.home-section-title { font-size: var(--t-body); font-weight: 800; margin: 0 0 10px; }

/* شريط البنرات — يتجاوز حشوة الصفحة ليلامس الحافتين، فيُقرأ شريطًا
   يُسحب لا صندوقًا محشورًا. */
.promo-rail {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 12px -16px 14px;
  padding: 0 var(--s-7) var(--s-1);
  scrollbar-width: none;
}
.promo-rail::-webkit-scrollbar { display: none; }
.promo-card {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-7) var(--s-7) var(--s-7);
  border: none;
  border-radius: var(--r-lg);
  text-align: start;
  cursor: pointer;
  /* **بيضاءُ بوهجٍ ليمونيّ.** كانت لوحين أسودين فوق الطيّة مباشرةً —
     أثقل ما في الشاشة وأوّل ما يُرى. والموقع يقول نفس الرسائل على أبيض،
     فتوحّد الاثنان. والليمونيّ يظلّل الكلمة المفتاحية كما في الموقع
     (`h1 .hl`) لا يُصبغ به السطح. */
  color: var(--text);
  background:
    radial-gradient(78% 76% at 88% -8%,
      rgba(198, 244, 50, 0.38) 0%, rgba(198, 244, 50, 0) 66%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), 0 2px 10px -4px var(--shadow);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out);
}
.promo-card:active { transform: scale(0.985); }
/* الصورة تحت النصّ لا فوقه: `.promo-card-img` مطلقة تغطّي البطاقة
   كاملةً، ونصوصها في المجرى العادي — فأول صورة تُضاف تدفن العنوان
   والوصف. النظير مكتوبٌ ومطبَّق في بنرات العروض، وهذا هو مقابله. */
.promo-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-card > span { position: relative; z-index: 1; }
.promo-card:has(.promo-card-img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 35, 31, 0.15) 0%, rgba(20, 35, 31, 0.7) 100%);
}
/* رسمة من المجموعة نفسها لا أيقونة خطّية داخل قرصٍ ليمونيّ: البنران
   كانا الشيئين الوحيدين في الشاشة اللذين يلبسان أيقونة مسطّحة بينما كل
   ما حولهما مجسَّم — فقُرئا غريبين عن الصفحة. وذهاب القرص يُحرّر
   الليمونيّ لموضعه: لحظة التوفير وحدها. */
.promo-card-art { display: block; margin-bottom: var(--s-2); }
.promo-card-art svg { width: 34px; height: 34px; }
/* ظلٌّ ليمونيّ خلف الكلمة كما في واجهة الموقع — لا حبرٌ ليمونيّ على أبيض
   (‎1.4:1‎ فلا يُقرأ). */
.promo-card-eyebrow {
  font-size: var(--t-caption);
  font-weight: 800;
  color: var(--on-lime);
  background: var(--lime);
  padding: 1px var(--s-3) 2px;
  border-radius: var(--r-sm);
}
.promo-card-title { font-size: var(--t-body-lg); font-weight: 800; line-height: 1.3; }
.promo-card-sub { font-size: var(--t-footnote); color: var(--text-muted); line-height: 1.45; }

/* شريط المطاعم المميّزة — دائريّ كصفّ التصنيفات، فتُقرأ العلامة قبل
   التفاصيل. */
.featured-rail {
  display: flex;
  gap: var(--s-7);
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 var(--s-7) var(--s-1);
  scrollbar-width: none;
}
.featured-rail::-webkit-scrollbar { display: none; }
.featured-item {
  flex: 0 0 auto;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.featured-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.featured-avatar img { width: 100%; height: 100%; object-fit: cover; }
.featured-avatar svg { width: 32px; height: 32px; }
.featured-name {
  font-size: var(--t-caption);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.filter-row { display: flex; align-items: center; gap: var(--s-4); }
.filter-row .filter-pills { flex: 1; min-width: 0; }

.view-toggle {
  display: flex;
  flex-shrink: 0;
  gap: var(--s-1);
  padding: var(--s-2);
  border-radius: var(--r-full);
  background: var(--lg-groove);
  border: none;
  box-shadow: var(--lg-groove-ring);
}
.view-toggle-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: none;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.view-toggle-btn.is-on {
  background: var(--glass-chip-bg);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--glass-chip-shadow);
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
}

/* ---------- عرض القائمة المضغوط ---------- */
/* قالبٌ واحد لا اثنان: الصنف على الحاوية يعيد ترتيب البطاقة نفسها. نسختان
   من قالب البطاقة كانتا ستفترقان بأول تعديل — تُصلح إحداهما وتبقى الأخرى. */
#home-content.view-rows .rcard { display: flex; align-items: stretch; }
#home-content.view-rows .rcard-media {
  /* **مربّعٌ ثابت لا خليّةٌ تتمدّد.** كانت `height: auto` مع
     `align-items: stretch`، فتطول الخليّة بطول البطاقة — وبطاقةٌ فيها
     شريط الرصيد أطول من أختها، فتخرج صورتاهما بمقاسين. والمقاس يتبع
     المحتوى المجاور لا الصورة نفسها، وهذا ما يُقرأ اختلالًا.
     الآن مربّعٌ واحد لكل صفّ مهما طال ما بجانبه، ومركزه في وسطه. */
  width: 104px;
  height: 104px;
  min-height: 104px;
  flex-shrink: 0;
  align-self: center;
}
/* والصورة تملأ المربّع بلا تشويه نسبتها — والشعار يبقى محتواةً في وسطه. */
#home-content.view-rows .rcard-photo { object-fit: cover; }
/* **الشعار لا يطوّل الصفّ.** الشعار في رأس البطاقة ‎68×68‎، ورأسُ مطعمٍ بلا
   شعار ‎26‎ — أي أن بطاقتين متطابقتين في كل شيء تختلفان ‎42‎ بكسلًا لسببٍ
   واحد: أن لأحدهما شعارًا. وهذا ما رآه المالك، وقاعدة التناسق عنده تسبق.
   وفي عرض الصفوف الشعار مكرَّرٌ أصلًا — المربّع المجاور يعرضه — فيُقصر هنا
   على ارتفاع سطر الاسم فيستوي الرأسان. */
#home-content.view-rows .rcard-logo { width: 26px; height: 26px; border-radius: var(--r-sm); padding: 1px; }
#home-content.view-rows .rcard-art,
#home-content.view-rows .rcard-art-logo img { width: 100%; height: 100%; object-fit: contain; }
#home-content.view-rows .rcard-art svg { width: 40px; height: 40px; }
/* الشارة والقلب كلاهما بأعلى الخليّة في عرض البطاقات، وعرضها هناك يتّسع
   لهما. في الصفوف الخليّة ١٠٤px فيتزاحمان — فيُفصلان رأسيًّا: القلب أعلى
   والشارة أسفل. */
#home-content.view-rows .rcard-media .rcard-disc,
#home-content.view-rows .rcard-media .rcard-offer,
#home-content.view-rows .rcard-media .rcard-new {
  top: auto;
  bottom: 6px;
  inset-inline-start: 6px;
  font-size: var(--t-caption);
  padding: var(--s-1) var(--s-3);
}
/* والعرض فوق الخصم لا تحته: الثلاثة كانت بنفس `bottom` و`inset-inline-start`
   حرفًا بحرف، فتتراكب تراكبًا تامًّا — والمخفيّ هو شارة العرض، أي أن
   المطعم صاحب العرض وحده هو الذي تختفي إشارته. */
#home-content.view-rows .rcard-media .rcard-offer,
#home-content.view-rows .rcard-media .rcard-new {
  bottom: 28px;
}
/* عرض الصفوف: الصورة صغيرة جدًّا للحلقة، فيرجع الزرّ قرصًا وحده. */
/* عرض الصفوف: الحبّة نصٌّ أصلًا فتعمل بلا استثناء — وقواعد الحلقة
   والقرص سقطت معها. */
#home-content.view-rows .rcard-fav-btn { font-size: var(--t-caption); padding: var(--s-2) var(--s-5); }

/* اللوح الزجاجي لا معنى له هنا: لا صورة تمرّ تحته — البطاقة صارت صفًّا
   والصورة إلى جانب النصّ لا خلفه. */
#home-content.view-rows .rcard-body {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: var(--s-5) var(--s-6);
  border-radius: 0;
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
#home-content.view-rows .rcard-facts { gap: var(--s-4) var(--s-5); }
#home-content.view-rows .rcard-closed-veil { font-size: var(--t-footnote); }

/* شريطٌ مقسَّم لا حبّاتٌ متفرّقة: الحبّات المنفصلة تُقرأ ثلاثة أزرار
   مستقلّة قد يُضغط أيّها مع أيّها، والشريط المقسَّم يقول بشكله إنها
   **خيارٌ واحد من ثلاثة**. وهذا هو الفرق الذي يُرى في تطبيقات التوصيل.
   والمسار محدود الطرفين — أُزيل التمدّد للحافتين (margin سالب) لأن
   الطرف المستدير هو ما يجعله شريطًا لا صفًّا. */
.filter-pills {
  display: flex;
  gap: 0;
  overflow-x: auto;
  /* حشوةٌ رأسية أوسع لنفس السبب — انظر `.offer-cats`. والهامش أدناه
     يمتصّها فلا يتغيّر موضع الشريط. */
  padding: 7px var(--s-2);
  margin: 8px 0 12px;
  border-radius: var(--r-full);
  /* أخدودٌ غائر لا لوحٌ أوف-وايت: `--surface-2` لونٌ مسطّح لا يقول شيئًا،
     والغائر يقول «هنا تقف الرقاقة». */
  background: var(--lg-groove);
  border: none;
  box-shadow: var(--lg-groove-ring);
  scrollbar-width: none;
}
/* يمتصّ الحشوة المضافة أعلاه فيبقى الشريط حيث كان */
.filter-pills { margin-block: 3px 7px; }
.filter-pills::-webkit-scrollbar { display: none; }
/* بفلترٍ واحد لا رقاقة: الحبّة تملأ المسار كاملًا (flex: 1 0 auto)، وبما
   أنها صارت رقاقةً بحدّها وظلّها فالنتيجة حبّةٌ داخل حبّة — حدّان
   متوازيان بلا معنى. فيبقى حدّ المسار وحده إطارًا، ويحمل النصّ الأخضر
   وحدَه دلالة النشاط. وتعود الرقاقة وحدها بظهور فلتر المتابَعة أو الخصم،
   حيث يصير لها ما تميّزه عن جاراتها. */
.filter-pills:has(.filter-pill:only-child) .filter-pill.active {
  background: none;
  box-shadow: none;
}

/* **أيقونة الحبّة أكبر من `icon-xs`.** الزائد في `user-plus` خطٌّ صغير
   داخل شكلٍ صغير، فعند ‎14‎ بكسلًا يذوب فلا يُرى إلّا الشخص. و`svg` لا `i`:
   الأيقونات تُستبدل بعد الرسم فمنتقي العنصر لا يطابق شيئًا. */
.filter-pill svg { width: 18px; height: 18px; }

.filter-pill {
  position: relative;
  /* يتمدّد ليملأ المسار ولا ينكمش تحت نصّه: بفلتر واحد (وهي الحالة
     الشائعة اليوم — لا مفضّلة ولا خصمٌ فوق ١٠٪) كان يقف في طرفٍ ويترك
     ثلثَي المسار فارغًا فيُقرأ حقلًا ناقصًا لا شريطًا. وبثلاثة تتجاوز
     عرضَه فيُسحب، وهو المطلوب — لا أن تُقصّ «خصم أعلى من ١٠٪». */
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  border: none;
  background: none;
  box-shadow: none;
  border-radius: var(--r-full);
  /* ٣٦px ارتفاعًا فعليًّا مع الحشوة — أهداف اللمس هنا أصغر ممّا في الشريط
     السفلي عمدًا: هذه فلاتر تُضغط أحيانًا لا تنقّلٌ يُضغط كل دقيقة. */
  padding: var(--s-4) var(--s-7);
  font-family: inherit;
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
/* فاصلٌ شعرة بين كل تبويبين — وهو ما يجعله «مقسَّمًا». يختفي عن جارَي
   النشط: الفاصل الملاصق لحبّة ممتلئة يُقرأ خطًّا زائدًا لا حدًّا. */
.filter-pill + .filter-pill::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border);
  transition: opacity 0.18s var(--ease-out);
}
.filter-pill.active::before,
.filter-pill.active + .filter-pill::before { opacity: 0; }
.filter-pill:active { opacity: 0.75; }
.filter-pill.active {
  background: var(--glass-chip-bg);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--glass-chip-shadow);
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
  font-weight: 700;
}

/* زر السلة داخل الرأس الزمردي بالرئيسية (الشريط العلوي مخفي هناك) */
.hero-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface-ink-2);
  color: var(--lime);
  border: none;
  border-radius: var(--r-full);
  padding: var(--s-3) var(--s-6);
  font-family: inherit;
  font-size: var(--t-callout);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- خريطة الرئيسية بدبابيس الخصم ---------- */



/* البطاقة كاملة تخفت لما يكون المطعم مغلقًا — تبقى قابلة للفتح لكن
   حضورها البصري يتراجع أمام المفتوحة */
.rcard-closed { opacity: 0.55; }

/* ---------- هيرو شاشة المطعم (زمردي) ---------- */
.rhero {
  background: var(--surface);
  color: var(--text);
  /* حشوة علوية تفسح لرصيف الأزرار العائم فوقه */
  padding: 62px var(--s-7) var(--s-7);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin: -16px -16px 16px;
}
.rhero-name { font-size: var(--t-heading); font-weight: 800; margin-top: 6px; }
.rhero-sub { font-size: var(--t-footnote); opacity: 0.9; margin-top: 2px; }
/* سطر الإعجابات داخل رأس المطعم الزمردي: أوضح قليلًا من بقية الأسطر
   الفرعية لأنه إشارة اختيار لا بيانات تعريف */
.rhero-likes { display: inline-flex; align-items: center; gap: var(--s-2); opacity: 1; margin-top: 6px; font-weight: 700; }
.rhero-truth {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 12px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  /* الليمونيّ حبرًا على أبيض = ‎1.4:1‎. فالحبر داكن، والليمونيّ يبقى في
     الإطار حيث يُرى ولا يُقرأ. */
  border: 1px solid color-mix(in srgb, var(--lime) 62%, transparent);
  color: var(--text);
  border-radius: var(--r-full);
  padding: var(--s-2) var(--s-6);
  font-size: var(--t-footnote);
  font-weight: 700;
}
/* زرّا الرأس صارا قرصين زجاجيين يتبعان التمرير — انظر .rhead-dock.
   القاعدة القديمة كانت تلوّنهما بلون فاتح (--on-emerald)، وكُتبت يوم كان
   الزرّ بلا خلفية على أرضية الرأس الداكنة. ثم اكتسب .btn-icon خلفيةً
   زجاجية فاتحة، فاجتمع فاتحٌ على فاتح: قرصٌ أبيض بلا أيقونة تُرى، ولا
   فرق بين المفضَّل وغيره. */

/* رصيف علوي يقابل .tabbar-dock: يتبع التمرير بدل أن يمضي مع الرأس،
   فيبقى الرجوع في متناول الإبهام مهما نزل العميل في المنيو. */
.rhead-dock {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--topbar-h, 52px);
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-7);
  pointer-events: none;
}
.rhead-dock > * { pointer-events: auto; }

/* نفس خامة الشريط السفلي حرفًا بحرف — الاختلاف بينهما يُقرأ سهوًا */
.rhead-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-full);
  padding: var(--s-4) var(--s-7);
  border: 1px solid var(--glass-border);
  /* `--action-ink` لا `--emerald`: الأخير حبرٌ شبه أسود، وقد رُفع عن كل
     زرّ في التطبيق. وهذا آخر موضعٍ بقي فيه. */
  color: var(--action-ink);
  font-size: var(--t-callout);
  font-weight: 700;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--glass-bg-top) 76%, transparent) 0%,
    color-mix(in srgb, var(--glass-bg-bottom) 62%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-shadow);
}
.rhead-dock .rhead-pill.btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.rhead-dock .btn-back { margin: 0; }
.rhead-dock .btn-back:hover { color: var(--emerald-deep); }

/* «تمّ» تنقلب ولا تتلوّن. تغيّر اللون وحده لا يُقرأ على قرصٍ زجاجي فاتح،
   وقلبٌ ممتلئ بنفس لون الفارغ فرقٌ يحتاج تدقيقًا. فالمفضَّل يعكس القرص
   كله: أرضية كحلية وقلب فاتح ممتلئ — وهو عرف `.btn-icon.solid` الموجود
   في التطبيق أصلًا، لا لونٌ جديد يُخترع. */
/* ليمونيّ كنظيره في البطاقة: الحالتان زرٌّ واحد، ولونان مختلفان لحالةٍ
   واحدة يجعلان العميل يشكّ أنهما شيئان. */
.rhead-dock .rcard-fav-btn.is-following {
  background: var(--lime);
  border-color: transparent;
  color: var(--on-lime);
}
.rhead-dock .rcard-fav-btn.is-following svg path { fill: currentColor; }

/* ---------- وصف الصنف بالمنيو ---------- */
.mitem-desc {
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.6;
  /* سطران ثم قصّ: البطاقة الآن أوسع فيسع الوصف، لكن وصفًا طويلًا يدفع
     السعر والزر خارج الشاشة ويكسر انتظام الصف. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mitem-text { min-width: 0; }

/* بحث المنيو — يظهر عند عشرة أصناف فأكثر */
.menu-search {
  position: relative;
  margin-bottom: 14px;
}
.menu-search-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.menu-search input {
  width: 100%;
  padding: var(--s-6) var(--s-7) var(--s-6) var(--s-11);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-body);
}
.menu-search input:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }
/* زرّ المسح الأصلي بحقل search — نخفيه لأنه يظهر بشكل مختلف بكل متصفح */
.menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* عنوان قسم داخل منيو المطعم */
.menu-section-title {
  font-size: var(--t-body);
  font-weight: 800;
  margin: 22px 0 10px;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.menu-section:first-child .menu-section-title { margin-top: 8px; }

/* ---------- شريط CTA سفلي ثابت ---------- */
.sticky-cta {
  position: fixed;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 15;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--s-6) var(--s-7);
}
.sticky-cta-inner { max-width: 480px; margin: 0 auto; }
.sticky-cta-save {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sticky-cta-save b {
  color: var(--emerald);
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
}
/* الشريط السفلي سطران، فالسهم يلتصق بالسطر الأول لا بالكتلة كلها.
   صنف صريح لا :has() — الأخيرة تسقط على متصفحات أقدم من iOS 15.4
   فيقف السطران جنبًا لجنب بدل ما يتراكبا. */
.cta-stack { flex-direction: column; gap: 0; }
.cta-main { display: inline-flex; align-items: center; gap: var(--s-4); }
.cta-sub {
  display: block;
  font-weight: 500;
  font-size: var(--t-footnote);
  opacity: 0.72;
  margin-top: 2px;
}
/* الانتقال يحوّل ظهور الشريط من قفزة إلى انزلاق: أول إضافة تضيف ١٤٢
   بكسلًا دفعةً واحدة تحت عين القارئ. */
body { transition: padding-bottom 0.26s var(--ease-out); }
body.has-sticky-cta { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }

/* ---------- تبويب توفيري ---------- */




.savings-month-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  font-weight: 800;
  color: var(--emerald);
}

/* ---------- شاشة الترحيب: قصة من خمس شرائح، بهوية الموقع التسويقي ---------- */
/* نفس خلفية التطبيق الفاتحة (--bg) بدل الزمردي الداكن، ونفس معجم الموقع:
   kicker بخط علوي وشريط ليموني، عناوين سوداء ثقيلة، وبطاقة موك‌أب بيضاء
   تتباين عن الخلفية الكريمية بدل التباين مع زمردي. */
.story {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-2) var(--s-2);
  margin: -16px -16px 0;
  background: var(--bg);
  color: var(--text);
  position: relative;
}
.story-bars { display: flex; gap: var(--s-3); margin: 0 12px 8px; padding-top: env(safe-area-inset-top, 0px); }
.story-bar { flex: 1; height: 3px; border-radius: var(--r-hair); background: var(--border); }
.story-bar.filled { background: var(--lime); }
.story-skip {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-callout);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
}
.story-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px var(--s-7) 0;
}
.story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--emerald);
  font-size: var(--t-callout);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.story-eyebrow-bar { width: 22px; height: 3px; background: var(--lime); border-radius: var(--r-hair); flex-shrink: 0; }
.story-body h2 {
  font-size: var(--t-title);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text);
  text-wrap: balance;
}
.story-body p { color: var(--text-muted); font-size: var(--t-body); max-width: 34ch; margin: 0; }
.story-actions { display: flex; gap: var(--s-5); margin: 16px 12px 0; }
.story-actions .story-back {
  width: auto;
  flex: 0 0 110px;
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.story-actions .story-cta { flex: 1; margin-top: 0; }
/* يُطوى لا يُخفى. كان visibility:hidden فيحجز ١١٠px من الصفّ وهو غير مرئي —
   على شاشة ٣٠٨px عرضًا يعني أن زرّ «التالي» في أول شاشة يراها العميل يشغل
   ثلثي العرض ويقف مائلًا لجهة. والشريحة الأولى لا رجوع فيها أصلًا، فالحجز
   لمكانٍ لا يُستعمل. الثمن إزاحةٌ واحدة عند الانتقال للشريحة الثانية. */
.story-back:disabled { display: none; }


/* ---------- مشهد الافتتاح ---------- */
/* الغلاف يحمل المقاس والاستعلام، فتقيس العبارةُ تحته بنفس عرض المشهد
   الذي خرجت منه — ولولاه لرجعت `cqw` إلى الشاشة فتغيّر مقاسها. */
.scene-wrap{width:min(100%,420px);margin-inline:auto;container-type:inline-size}
.scene{
  position:relative;width:100%;aspect-ratio:1/1;
  container-type:inline-size;
}
.scene-el{
  position:absolute;display:block;will-change:transform,opacity;
  /* الدخول قوسيّ ثم استقرارٌ يتنفّس. والانجراف يبدأ **من الصفر**: أي قيمةٍ
     غير الصفر في أوّل إطارٍ تعني قفزةً لحظة انتهاء الدخول. */
  animation:
    sceneFly 1040ms cubic-bezier(.16,1.42,.3,1) var(--d,0ms) both,
    sceneLive var(--f,4200ms) ease-in-out calc(var(--d,0ms) + 1040ms) infinite alternate;
}
@keyframes sceneFly{
  0%  {opacity:0;transform:translate(calc(var(--tx,0)*-1.9),calc(var(--ty,0)*-1.9)) scale(.2) rotate(calc(var(--r0,0deg)*2.4))}
  45% {opacity:1;transform:translate(calc(var(--tx,0)*-.45),calc(var(--ty,0)*-.45 - 16px)) scale(1.12) rotate(calc(var(--r0,0deg)*.45))}
  100%{opacity:1;transform:none}
}
@keyframes sceneLive{
  from{transform:translate(0,0) rotate(0deg) scale(1)}
  to  {transform:translate(var(--dx,0px),var(--dy,-8px)) rotate(var(--dr,0deg)) scale(var(--ds,1.03))}
}
/* توسيطٌ لا يعرف الاتجاه: `inset-inline-start:50%` مع `translateX(-50%)`
   لا تُوسِّط في العربية لأن البداية المنطقية هي اليمين. */
/* **الاسم أنزلُ من المركز قليلًا.** المركز الهندسيّ يقع خلف بطاقة «اطلب
   مسبقًا» ودبّوس الخريطة، فكان الاسم يقف أمامهما. و‎56٪‎ من الارتفاع تضعه
   في الفجوة التي تركها المشهد فعلًا.
   و‎8٪‎ و‎15cqw‎ ليستا ذوقًا: مُسحت ٤٠ تركيبةً من الإزاحة والمقاس وقيست فيها
   مساحةُ تقاطع الاسم والعبارة مع القطع التسع الكبيرة. هذه أدناها عند أكبر
   مقاسٍ مقبول — ‎404‎ بكسلًا مربّعًا من ‎122500‎، أي ‎0.33٪‎. */
.scene-mark{position:absolute;inset:0;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:6px;
            padding-top:8%;pointer-events:none;z-index:5;text-align:center}
/* `direction:ltr` لازمة: الحروف عناصر، و`display:flex` في صفحةٍ عربية
   يرصّها من اليمين فيُقرأ الاسم «oyvas». */
.scene-name{
  direction:ltr;line-height:1;
  font-family:'Bagel Fat One',cursive;
  font-size:clamp(40px,15cqw,80px);letter-spacing:-.014em;
  /* برتقاليٌّ هادئ بطبقات ظلٍّ تحته: الاسم جسمٌ من نفس المادّة لا حبرًا
     فوقها. والأسود المسطّح كان لا نظير له في المشهد فوقف غريبًا. */
  color:#B8420A;
  text-shadow:0 1px 0 #9C3607, 0 2px 0 #842D05, 0 3px 0 #6E2604,
              0 6px 9px rgba(120,40,6,.28);
}
/* حركةٌ واحدة خفيفة: ظهورٌ مع صعودٍ يسير. لا قفزَ ولا دوران. */
.scene-name{animation:sceneMark .72s cubic-bezier(.22,1.05,.36,1) 780ms both}
.scene-tag{
  margin:2cqw 0 0;text-align:center;text-wrap:balance;
  font-size:clamp(13px,4cqw,19px);font-weight:700;color:var(--text-muted);
  animation:sceneMark .72s cubic-bezier(.22,1.05,.36,1) 940ms both;
}
@keyframes sceneMark{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .scene-el,.scene-name,.scene-tag{animation:none!important;opacity:1!important;transform:none!important}
}
/* شريحة المشهد بلا بطاقةٍ تحته: المشهد نفسه هو البطاقة. */
.story-body-scene{padding-top:8px}
/* بطاقة الرصيد أعرض من أخواتها: الشريط فيها مكوّنٌ حقيقيّ له نصّان
   متقابلان، وضيقُ ‎320‎ يجعل حافّة التعبئة تقطع جملة. */
.story-mock-cashback{max-width:360px}

/* بطاقة الموك‌أب البيضاء المشتركة — كل الأنواع أدناه تتقاسم نفس الإطار */


/* ١. بطاقة السعر — بلغة بطاقات الموقع: عنوانٌ فوق، ورقمٌ كبير تحته. */
.story-mock-price { background: none; border: none; box-shadow: none; padding: 0; }
.pcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  text-align: start;
  box-shadow: 0 8px 20px rgba(20, 35, 31, 0.06);
}
.pcard + .pcard { margin-top: var(--s-5); }
.pcard-head { font-size: var(--t-footnote); font-weight: 700; color: var(--text-muted); }
.pcard-val { font-size: var(--t-title); font-weight: 800; line-height: 1.1; margin-top: 2px; }
.pcard-sub { font-size: var(--t-caption); color: var(--text-muted); margin-top: 2px; }
/* الوسم يقول إن الرقم تقديرٌ لا قياس — والشريحة نفسها تعيب أرقامًا لا تُثبت. */
.pcard-tag {
  font-size: var(--t-caption);
  font-weight: 800;
  padding: 1px var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  margin-inline-start: var(--s-2);
}
.pcard-bad .pcard-val { color: var(--coral-ink); }
/* رقم سافيو وحده على الليمونيّ — وهذه لحظة التوفير، فهو في موضعه. */
.pcard-good { background: var(--lime); border-color: var(--lime); }
.pcard-good .pcard-head,
.pcard-good .pcard-sub { color: color-mix(in srgb, var(--on-lime) 78%, transparent); }
.pcard-good .pcard-val { color: var(--on-lime); }

/* ٤. جدول الرصيد: كل صفٍّ طلب، والعمود الأخير يكبر أمام العين. */
.story-mock-ledger { max-width: 340px; padding: var(--s-6); }
.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-6);
  align-items: baseline;
  padding: var(--s-4) 0;
}
.ledger-head {
  font-size: var(--t-caption);
  font-weight: 800;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  padding-top: 0;
}
.ledger-row + .ledger-row,
.ledger-head + .ledger-row { border-top: 1px solid var(--border-soft); }
.ledger-t { font-size: var(--t-footnote); font-weight: 700; }
.ledger-p { font-size: var(--t-footnote); color: var(--text-muted); }
.ledger-b { font-size: var(--t-callout); font-weight: 800; color: var(--coral-strong); }
/* الصفّ الخامس هو الذي يُستعمل عنده الرصيد، فيُقرأ وصولًا لا صفًّا خامسًا. */
.ledger-row.is-last { background: color-mix(in srgb, var(--coral-strong) 8%, transparent); }
.ledger-row.is-last .ledger-b { font-size: var(--t-body); }
.ledger-foot {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
  font-size: var(--t-footnote);
  color: var(--text-muted);
  text-align: start;
  line-height: 1.7;
}
.ledger-foot b { color: var(--coral-ink); }





/* ٤. بطاقة الطلب الجاهز */






/* ٥. رقائق التصنيفات */



/* ---------- روابط "حسابي" النظامية ---------- */
/* صفوف لا أزرار: هذي وجهات تُفتح، والأزرار المجاورة أفعال تُنفَّذ. الفرق
   البصري يمنع أن يُقرأ "الشروط" و"حذف الحساب" كشيء واحد. */
/* ---------- قائمة الإعدادات المجمَّعة ----------
   مجموعةٌ معنونة بحدٍّ حولها، لا صفوفٌ معلّقة بين خطّين. هذا هو النمط
   الذي تُقرأ به شاشات الإعدادات: العنوان يقول ما هذه المجموعة، والبطاقة
   تقول أين تبدأ وأين تنتهي. */




/* القيمة على الطرف: الصفّ يقول **ماذا** وهي تقول **كيف هو الآن**. */

/* صفٌّ بلا أيقونة ولا سهم — فعلٌ لا وجهة، فيتوسّط كما في شاشات الإعدادات. */


/* الهدّام: لونه وحده يقول ما هو، ومجموعته وحدها تفصله عمّا قبله. */



/* `> svg` لا `> i`: `renderSavyoIcons` ينفّذ `el.replaceWith(svg)` فيموت
   أي منتقٍ بالعنصر بعد الرسم — المزلق المكتوب في CLAUDE.md حرفيًّا.
   و`--emerald` كان بلون النصّ نفسه أصلًا، فالزمرديّ الحقيقي هو المقصود. */





/* ثلاث حبّات سريعة: المنزل، العمل، موقعي الحالي — الخيار الأكثر
   استخدامًا يُختار بضغطة واحدة بدل فتح قائمة عامة كل مرة.

   كانت ثلاث بطاقات عمودية بشبكة `1fr` متساوية: الأيقونة فوق، والاسم
   تحتها، وسطرٌ ثالث يقول «محفوظ» أو «احفظه الآن». ثلاثة أسطر × ثلاث
   خانات تملأ عرض الشاشة وترتفع ٧٠ بكسل، وهي **خطوة وسيطة** لا وجهة —
   فتأخذ من الشاشة أكثر ممّا تستحق. صارت حبّات أفقية تبدأ من اليمين:
   الأيقونة تحمل التعريف، والاسم بجانبها لا تحتها، وسطر الحالة انتقل
   إلى `title` وإلى خفوت الاسم حين لا يكون محفوظًا.

   والأيقونة ملوّنة بلون خاص بها: ثلاث أيقونات رماديّة متطابقة تُقرأ
   قائمةً واحدة تُمسح بالقراءة، وثلاثة ألوان تُميَّز بالنظرة. */
/* صف موقع محفوظ: رابط الاختيار + زر حذف مستقل جنبه — نفس صف واحد بحد
   سفلي واحد بدل ما يتضاعف الخط بين العنصرين. */


/* زرّا التحديث والحذف لا ينكمشان تحت اسمٍ طويل: `flex: none` صريحة لأن
   `.btn-icon` بلا مقاسٍ ثابت، فاسم «شقة الأهل في الروضة» كان يعصرهما. */

/* **المختار يُعرف بلون أيقونته لا بكلمةٍ تُقرأ.** كان في الصفّ «مختار
   الآن» نصًّا، وأيقونتان تُشبه إحداهما الأخرى: دبّوس الموقع يمينًا وهدفُ
   التحديث يسارًا — فيُقرأ الثاني موقعًا ثانيًا. فصار التحديث قلمًا،
   والحالة لونًا: خطوط الأيقونة برتقالية والاسم أثقل.
   و`svg` لا `i`: الأيقونات تُستبدل بعد الرسم (`renderSavyoIcons`)، فمنتقٍ
   على `i` لا يطابق شيئًا بعدها. */


/* الخانة الفارغة حاضرةٌ لا مخفيّة: من لم يحفظ منزله يجب أن يرى أين
   يُحفظ. فاسمها خافتٌ وأيقونتها أخفّ، وقيمتها تقول ماذا تفعل الضغطة. */



/* ---------- شاشة تحديد الموقع على الخريطة ---------- */



/* الدبّوس ثابتٌ في المنتصف والخريطة تتحرّك تحته. والإزاحة لأعلى بنصف
   ارتفاعه: الطرف المدبَّب هو ما يشير، لا مركز الشكل — وبلا الإزاحة
   يختار العميل نقطةً تحت ما يراه بنحو ١٤ بكسل. */




/* الاسم محجوزٌ بسطرٍ دائم (`&nbsp;` في القالب): لولا ذلك لقفز الزرّ لأعلى
   وأسفل مع كل تحريكة، وهو أكثر ما يُحسّ اهتزازًا في شاشات الخرائط. */


/* سطر الهوية والإصدار أسفل حسابي */


/* الزر يطابق الروابط تمامًا: الفرق بينهما تقني لا بصري */


/* ---------- الفاتورة المفصّلة ---------- */






/* المجموع الفرعي مخفَّت: هو مرجع للمقارنة لا رقم يُدفع */

/* الخصم زمردي وثقيل — لحظة توفير، لكنها ليست الليموني: الليموني للأزرار
   التي تُثبّت فعلًا، والرقم هنا يُقرأ لا يُضغط. */





/* ---------- تقييم الرضا بعد الاستلام ---------- */


/* دائرية لا حبّة: هذا فعل تقييم لا فعل يُثبّت طلبًا، فليس مكان الليموني —
   انظر savyo-design: الليموني محجوز على ما يُنشئ أثرًا في قاعدة البيانات
   بوزن "طلب" أو "تسجيل"، لا على رأي عابر بلا رجعة عنه سوى مرة. */




/* التحويم على أجهزة المؤشّر فقط، وعلى الزر المتاح فقط.
   الجوال يُبقي حالة :hover عالقة بعد اللمس: العميل يضغط 👍 فيصير مصمتًا،
   ثم يلمس 👎 (المعطّل) فيتلوّن مرجانيًا رغم أنه لم يُسجَّل شيء — فيبدو
   الاثنان مختارَين معًا. البيانات كانت سليمة دائمًا (الخادم يرفض التقييم
   الثاني)، لكن الشاشة كانت تكذب. */


/* الخيار المختار ينبض ويكبر، وغير المختار ينكمش ويبهت — الفرق حركةٌ لا
   لونٌ فقط، فيُقرأ القرار من طرف العين قبل قراءة اللون. */




/* المعطّل غير المختار ينسحب بصريًا — بدونه يبقى الزوج متساويين بالوزن
   وكأن العميل لم يختر بعد. */







/* شارة "جديد" — أسفل البداية.
   الزوايا الثلاث الأخرى مشغولة: الخصم أعلى البداية، والمفضّلة أعلى النهاية.
   وضعتها أول مرة مكان المفضّلة بالضبط فتراكبتا.
   وزمردية لا ليمونية: هذي معلومة عن المطعم لا لحظة توفير. */
/* شارة العرض الساري — تقف موضع "جديد" لأنهما لا يجتمعان.
   والطوبي لا الليموني: الليموني محجوز للحظة التوفير نفسها، وشارةٌ على
   بطاقة وعدٌ لا توفير محقّق بعد. */
/* ترتفع فوق اللوح بثمانية: بـ`bottom: 8px` وحدها كان نصفها السفلي مدفونًا
   تحت اللوح الطافي — ظاهرًا بما يكفي ليُرى، لا بما يكفي ليُقرأ. */






/* ---------- لوحة سبب الاعتذار ببوابة المطعم ---------- */
/* داخل بطاقة الطلب لا نافذة فوقها: المطعم يحتاج يشوف الأصناف وهو يختار
   ("أي صنف خلص؟")، والنافذة تحجبها عنه. */






/* ---------- تعديل الطلب داخل المهلة ---------- */
/* العدّاد داخل الزر لا فوقه: هو شرط الزر لا معلومة مستقلة عنه — وفصله
   يجعل العميل يقرأ رقمًا لا يعرف على ماذا يعدّ. */



/* الشريط يقول "أنت تعدّل" صراحةً: العميل دخل من شاشة طلبه لا من المنيو،
   وبلا هذا قد يظنّ أنه يبني طلبًا ثانيًا. */
/* `.notice` هو القالب، و`.edit-banner` اسمه الأول باقٍ للتوافق — شريطٌ
   ثانٍ منسوخٌ للإغلاق كان سيفترق عنه بأول تعديل. */



/* نبرة التحذير: العميل **مابينتبه** للكلمة الهادئة في السطر الفرعي، فهذا
   الشريط يأخذ لونًا يفصله عن الصفّ لا يذوب فيه. */






/* ---------- التقاط الطلب في الشاشة الفارغة ---------- */
/* داخل المشهد الفارغ لا شاشة منفصلة: العميل وصل نهايةً، والانتقال به
   لشاشة ثانية يبدو عقوبةً على أنه لم يجد شيئًا.

   وبلا إطارٍ ولا أرضية: الشاشة الفارغة بطاقةٌ واحدة، وإطارٌ ثانٍ داخلها
   يقسم رسالتها ويجعل الفعل يبدو شيئًا منفصلًا لا خطوتها التالية.
   والسؤال الذي كان عنوانًا صار في الزرّ نفسه. */






/* ---------- السلال ---------- */












/* ما اختاره العميل تحت اسم الصنف في السلّة — هو الفرق الوحيد بين سطرين
   يحملان نفس الاسم. */

/* شارةٌ على زرّ الصنف ذي الخيارات: تقول «عندك منه في السلّة» بلا أن
   تدّعي أن الزيادة من هنا تخصّ تهيئةً بعينها. */



/* ---------- ورقة الصنف وخياراته ---------- */

















/* ---------- الورقة السفلية ---------- */





/* المقبض علامةٌ لا زرّ: يقول «تُسحب» قبل أن يجرّب العميل. */











/* ---------- ملصق الكاشير ببوابة المطعم ---------- */




/* ---------- بطاقة الدعوة بلحظتها، وبطاقة التثبيت ---------- */
/* كلتاهما تظهران بشاشة الاستلام بعد الاستلام — وكلتاهما طلبٌ من العميل،
   فتُبنيان هادئتين بلا لون صارخ يزاحم لحظة "استلمت طلبك". */













/* روابط الشروط ببوابة المندوب — هادئة أسفل الشاشة، تُقرأ عند السؤال لا قبله */




/* ---------- العروض الجاهزة ببوابة المطعم ---------- */






/* «يسري الآن» صريحة: من يفعّل عرضًا خارج وقته يظنّه معطّلًا فيعيد الضغط */


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






/* ما يراه العميل حرفيًّا — المطعم يقرّر وهو يرى ما سيصل زبونه لا وصفًا له */



/* ---------- بديل الصورة: مساحة لونية باسم التصنيف ---------- */
/* حلّت محلّ رسومات التصنيفات الأحد عشرة. تقع في موضعين: مطعمٌ بلا صورة
   (لن يُقبل بعد الإطلاق)، وصورةٌ فشل تحميلها على شبكة ضعيفة — والثاني
   يقع حتى بعد اكتمال الصور كلها، ولهذا لا تُترك سادة بلا اسم: السادة
   وحدها تُقرأ عطلًا لا تصميمًا. */

/* داخل خانة صفّ التصنيفات: الاسم مكتوبٌ تحتها أصلًا فتكراره حشو. */

/* ومخفيّةٌ ما دامت الصورة موجودة — بـ`visibility` لا `display` لتبقى
   مقاسةً في مكانها. صور التصنيفات شفافة الخلفية وتطفو على الأرضية
   الرملية بلا حاوية، فمساحةٌ لونية تحتها تحبسها في مربّع ملوّن وتخالف
   قاعدة «لا ظل ولا إطار على صور التصنيفات». تُكشف عند فشل التحميل وحده. */



/* بنرٌ واحد يتمدّد للعرض الكامل: نافذة عرضٍ تُغلق فيسقط من الصفّ ويبقى
   الباقي بمقاسه، فيُترك نصف السطر فارغًا ويُقرأ كأن شيئًا لم يُحمَّل. */


/* ---------- حركة الحالات الفارغة ---------- */
/* الشاشة الفارغة أطول ما يقف عنده العميل — وساكنةً تُقرأ «انتهى»، وبحركةٍ
   خفيفة تُقرأ «ما زال يعمل». الحركة على الحاوية لا على أجزاء الرسمة:
   جزءٌ متحرّك لكل مشهد يعني تسع حركات تفترق، وواحدةٌ على الحاوية تسع
   المشاهد التسعة ومعها أي مشهد يُضاف غدًا.
   وبطيئة ومحدودة المدى عمدًا — ٣٫٢ ثانية و٤ بكسل: الحركة هنا إشارةُ حياة
   لا لفتُ انتباه، والسريعة الواسعة تصير ضجيجًا في شاشةٍ يقرؤها المستخدم. */



/* الأيقونة العامة تدخل بلا طفو: الطفو يليق بمشهدٍ له كتلة، والأيقونة
   الخطّية الطافية تبدو مهتزّة لا حيّة. */

/* النصّ يتبع الرسمة بفارقٍ صغير — يُقرأ تتابعًا لا ظهورًا دفعةً واحدة. */



/* من ضبط جهازه على تقليل الحركة لا تُفرض عليه: قاعدةٌ صحّية عامة، وهذه
   حركةٌ زخرفية بالكامل فإسقاطها لا يفقده معنى. */


/* ---------- مشاهد الحالات: صورة مجسّمة فوق الرسمة ---------- */
/* نفس بنية `.cat-art-stack`: الرسمة تبقى مرسومةً مخفيّة، وتُكشف إن فشلت
   الصورة — فشاشةٌ فارغة أصلًا لا تزداد فراغًا بمربّع أبيض.
   والمقاس يأتي من الرسمة تحتها (٧٦px في الحالات، ٥٦ في رأس التوفير،
   ٣٤ في بطاقات الأرقام)، فملفٌ واحد يخدم المواضع الثلاثة. */





/* ---------- زرّ القصّة: نصٌّ وكبسولة تنفتح ---------- */
/* مقتبسٌ عن Uiverse (adamgiebl) بثلاثة تعديلات لازمة:
   
   ١ — **بالاتجاه المنطقي لا `right`**: الأصل يثبّت الكبسولة يمينًا، وفي
       العربية اتجاه المضيّ يسارًا — وسهمنا `arrow-left` أصلًا. فلو نُقل
       الأصل حرفيًّا لأشار السهم إلى حيث لا نمضي.

   ٢ — **على الضغط لا التحويم**: `:hover` لا يقع على شاشة لمس إطلاقًا،
       فالحركة التي تميّز هذا الزرّ كانت ستموت على كل جوال — وهذه شاشة
       الترحيب، أول ما يراه العميل. ربطناها بـ`:active` فتُحسّ تحت الإصبع،
       وأبقيناها على التحويم لمن يفتحه على سطح المكتب.

   ٣ — **بلونِنا**: الليموني على شاشة الترحيب موضعٌ مصرَّحٌ به في الهوية،
       والظلّ الداخلي مشتقٌّ منه لا بنفسجيًّا. */

/* **الزرّ عاديّ.** كان فيه كبسولةٌ تنفتح على الضغط فتبتلع عرض الزرّ
   وتُخفي كلمته — حركةٌ لطيفة في ذاتها، لكنها لا توجد في زرٍّ آخر في
   التطبيق كلّه، فبدا الزرّ غريبًا عن إخوته. والآن هو `.btn-primary`
   كغيره، والأخير `.cta` الليمونيّ لأن وعده توفيرٌ فعلًا.
   والسهم يزحف قليلًا وحده — وهي حركة `.btn-arrow` العامّة في كل الأزرار. */
.story-cta { gap: var(--s-4); }

.story-restart {
  display: block;
  margin: 12px auto 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-footnote);
  padding: var(--s-3);
  cursor: pointer;
}

/* بطاقة الموك‌أب البيضاء المشتركة — كل الأنواع أدناه تتقاسم نفس الإطار */
.story-mock {
  width: 100%;
  max-width: 320px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  margin-bottom: 20px;
  box-shadow: 0 10px 24px rgba(20, 35, 31, 0.08);
}

/* ١. بطاقة السعر: مقارنة سعر التوصيل بسعر سافيو */

/* ٢. بطاقة الإحصائية: نسبة الخصم + جدول التوفير */
.story-mock-stat { text-align: center; }
.mock-stat-pct { font-size: var(--t-display); font-weight: 800; color: var(--emerald); line-height: 1; }
.mock-stat-caption { font-size: var(--t-callout); color: var(--text-muted); margin: 4px 0 14px; }
.mock-stat-row { display: flex; justify-content: space-between; border-top: 1px solid var(--border-soft); padding-top: var(--s-6); }
.mock-stat-cell { display: flex; flex-direction: column; gap: var(--s-1); }
.mock-stat-val { font-weight: 800; font-size: var(--t-callout); color: var(--emerald); }
.mock-stat-lbl { font-size: var(--t-caption); color: var(--text-muted); }

/* ٣. بطاقة الخطوات: ثلاث خطوات مرقّمة */
.mock-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: var(--s-6) var(--s-7);
  font-weight: 700;
  font-size: var(--t-callout);
}
.mock-step-row + .mock-step-row { margin-top: 8px; }
.mock-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-ink);
  color: var(--on-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-footnote);
}

/* ٤. بطاقة الطلب الجاهز */
.mock-order-title { font-weight: 700; font-size: var(--t-body); text-align: right; }
.mock-order-desc { font-size: var(--t-footnote); color: var(--text-muted); text-align: right; margin-top: 2px; }
.mock-order-bar { height: 4px; border-radius: var(--r-hair); background: var(--border-soft); margin: 12px 0 8px; overflow: hidden; }
.mock-order-bar-fill { width: 62%; height: 100%; background: var(--lime); border-radius: var(--r-hair); }
.mock-order-foot { font-size: var(--t-footnote); color: var(--text-muted); text-align: right; }

/* ٥. رقائق التصنيفات */
.story-mock-cats { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.mock-cat-chip {
  background: var(--surface-2);
  border-radius: var(--r-full);
  padding: var(--s-4) var(--s-7);
  font-size: var(--t-footnote);
  font-weight: 700;
}

/* ---------- روابط "حسابي" النظامية ---------- */
/* صفوف لا أزرار: هذي وجهات تُفتح، والأزرار المجاورة أفعال تُنفَّذ. الفرق
   البصري يمنع أن يُقرأ "الشروط" و"حذف الحساب" كشيء واحد. */
/* ---------- قائمة الإعدادات المجمَّعة ----------
   مجموعةٌ معنونة بحدٍّ حولها، لا صفوفٌ معلّقة بين خطّين. هذا هو النمط
   الذي تُقرأ به شاشات الإعدادات: العنوان يقول ما هذه المجموعة، والبطاقة
   تقول أين تبدأ وأين تنتهي. */
.acct-group-title {
  margin: var(--s-9) var(--s-5) var(--s-4);
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--text-muted);
}
.account-links {
  margin: 0 0 var(--s-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.account-link {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  /* ‎44‎ هو الحدّ الأدنى لهدف اللمس، والحشوة وحدها لا تضمنه حين يقصر النصّ. */
  min-height: 48px;
  width: 100%;
  padding: var(--s-6) var(--s-7);
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.account-links > .account-link:last-child { border-bottom: none; }
/* القيمة على الطرف: الصفّ يقول **ماذا** وهي تقول **كيف هو الآن**. */
.account-link-value {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--t-callout);
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* صفٌّ بلا أيقونة ولا سهم — فعلٌ لا وجهة، فيتوسّط كما في شاشات الإعدادات. */
.acct-plain { justify-content: center; font-weight: 700; }
.acct-plain > span { flex: 0 0 auto; }
/* الهدّام: لونه وحده يقول ما هو، ومجموعته وحدها تفصله عمّا قبله. */
.acct-danger { margin-top: var(--s-7); }
.acct-danger .account-link { color: var(--danger); }
.account-link:active { background: var(--surface-2); }
/* `> svg` لا `> i`: `renderSavyoIcons` ينفّذ `el.replaceWith(svg)` فيموت
   أي منتقٍ بالعنصر بعد الرسم — المزلق المكتوب في CLAUDE.md حرفيًّا.
   و`--emerald` كان بلون النصّ نفسه أصلًا، فالزمرديّ الحقيقي هو المقصود. */
.account-link > svg:first-child { color: var(--tint-emerald); flex-shrink: 0; }
.account-link > span:not(.account-link-value) { flex: 1; min-width: 0; }
.account-link-arrow { color: var(--text-muted); flex-shrink: 0; }
.account-link > span.loc-dist { flex: 0 0 auto; color: var(--text-muted); font-size: var(--t-footnote); }

/* ثلاث حبّات سريعة: المنزل، العمل، موقعي الحالي — الخيار الأكثر
   استخدامًا يُختار بضغطة واحدة بدل فتح قائمة عامة كل مرة.

   كانت ثلاث بطاقات عمودية بشبكة `1fr` متساوية: الأيقونة فوق، والاسم
   تحتها، وسطرٌ ثالث يقول «محفوظ» أو «احفظه الآن». ثلاثة أسطر × ثلاث
   خانات تملأ عرض الشاشة وترتفع ٧٠ بكسل، وهي **خطوة وسيطة** لا وجهة —
   فتأخذ من الشاشة أكثر ممّا تستحق. صارت حبّات أفقية تبدأ من اليمين:
   الأيقونة تحمل التعريف، والاسم بجانبها لا تحتها، وسطر الحالة انتقل
   إلى `title` وإلى خفوت الاسم حين لا يكون محفوظًا.

   والأيقونة ملوّنة بلون خاص بها: ثلاث أيقونات رماديّة متطابقة تُقرأ
   قائمةً واحدة تُمسح بالقراءة، وثلاثة ألوان تُميَّز بالنظرة. */
/* صف موقع محفوظ: رابط الاختيار + زر حذف مستقل جنبه — نفس صف واحد بحد
   سفلي واحد بدل ما يتضاعف الخط بين العنصرين. */
.loc-row { display: flex; align-items: center; gap: var(--s-1); border-bottom: 1px solid var(--border-soft); }
.loc-row .account-link { flex: 1; width: auto; border-bottom: none; }
/* زرّا التحديث والحذف لا ينكمشان تحت اسمٍ طويل: `flex: none` صريحة لأن
   `.btn-icon` بلا مقاسٍ ثابت، فاسم «شقة الأهل في الروضة» كان يعصرهما. */
.loc-row .btn-icon { flex: none; }
/* **المختار يُعرف بلون أيقونته لا بكلمةٍ تُقرأ.** كان في الصفّ «مختار
   الآن» نصًّا، وأيقونتان تُشبه إحداهما الأخرى: دبّوس الموقع يمينًا وهدفُ
   التحديث يسارًا — فيُقرأ الثاني موقعًا ثانيًا. فصار التحديث قلمًا،
   والحالة لونًا: خطوط الأيقونة برتقالية والاسم أثقل.
   و`svg` لا `i`: الأيقونات تُستبدل بعد الرسم (`renderSavyoIcons`)، فمنتقٍ
   على `i` لا يطابق شيئًا بعدها. */
.loc-row.is-current .loc-slot svg,
.account-link.is-current svg { color: var(--coral-strong); }
.loc-row.is-current .loc-slot > span:first-of-type,
.account-link.is-current > span:first-of-type { font-weight: 800; }
/* الخانة الفارغة حاضرةٌ لا مخفيّة: من لم يحفظ منزله يجب أن يرى أين
   يُحفظ. فاسمها خافتٌ وأيقونتها أخفّ، وقيمتها تقول ماذا تفعل الضغطة. */
.loc-row.is-empty .loc-slot > span:first-of-type { color: var(--text-muted); font-weight: 600; }
.loc-row.is-empty .loc-slot svg { opacity: 0.45; }

/* ---------- شاشة تحديد الموقع على الخريطة ---------- */
.map-pick {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
  /* ارتفاعٌ يقوده ما بقي من الشاشة لا رقمٌ ثابت: على ٣٠٨×٥٦٠ كانت خريطةٌ
     بـ‎380px‎ تدفع زرّ التأكيد تحت الطيّة، فيحرّك العميل الدبّوس ولا يجد
     ما يثبّته. و`dvh` لا `vh`: شريط المتصفّح على iOS يقضم من `vh` فيبقى
     الزرّ مقصوصًا حتى يُمرَّر. */
  height: min(46dvh, 420px);
  min-height: 220px;
}
.map-pick-canvas { position: absolute; inset: 0; background: var(--surface-2); }

/* الدبّوس ثابتٌ في المنتصف والخريطة تتحرّك تحته. والإزاحة لأعلى بنصف
   ارتفاعه: الطرف المدبَّب هو ما يشير، لا مركز الشكل — وبلا الإزاحة
   يختار العميل نقطةً تحت ما يراه بنحو ١٤ بكسل. */
.map-pick-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 500; /* فوق بلاطات Leaflet (400) ودون عناصر تحكّمه (1000) */
  color: var(--coral-strong);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.32));
}
.map-pick-pin svg { width: 34px; height: 34px; }

.map-pick-foot { margin-top: var(--s-5); }
/* الاسم محجوزٌ بسطرٍ دائم (`&nbsp;` في القالب): لولا ذلك لقفز الزرّ لأعلى
   وأسفل مع كل تحريكة، وهو أكثر ما يُحسّ اهتزازًا في شاشات الخرائط. */
.map-pick-name {
  font-size: var(--t-footnote);
  font-weight: 800;
  color: var(--coral-ink);
  margin-bottom: var(--s-4);
  min-height: 1.2em;
}

/* سطر الهوية والإصدار أسفل حسابي */
.account-about {
  text-align: center;
  font-size: var(--t-footnote);
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.9;
}
.account-version { display: block; opacity: 0.7; }
/* الزر يطابق الروابط تمامًا: الفرق بينهما تقني لا بصري */
button.account-link {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  font-family: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* ---------- الفاتورة المفصّلة ---------- */
.receipt {
  width: 100%;
  margin-top: 16px;
  padding-top: var(--s-7);
  border-top: 1px dashed var(--border-soft);
  font-size: var(--t-callout);
}
.receipt-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-6);
  padding: var(--s-3) 0;
}
.receipt-name { color: var(--text); }
.receipt-qty { color: var(--text-muted); font-weight: 700; }
.receipt-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 4px 0 8px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: var(--t-callout);
  color: var(--text-muted);
}
.receipt-note svg { flex-shrink: 0; margin-top: 2px; }
/* المجموع الفرعي مخفَّت: هو مرجع للمقارنة لا رقم يُدفع */
.receipt-sub { color: var(--text-muted); border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: var(--s-5); }
/* الخصم زمردي وثقيل — لحظة توفير، لكنها ليست الليموني: الليموني للأزرار
   التي تُثبّت فعلًا، والرقم هنا يُقرأ لا يُضغط. */
.receipt-saved { color: var(--emerald); font-weight: 700; }
.receipt-cashback { color: var(--emerald); font-weight: 700; }
.receipt-cashback span:first-child { display: inline-flex; align-items: center; gap: var(--s-2); }
.receipt-total { margin-top: 4px; padding-top: var(--s-5); border-top: 1px solid var(--border-soft); }

/* ---------- تقييم الرضا بعد الاستلام ---------- */
.rate-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  margin-top: 14px;
  padding: var(--s-7) var(--s-7);
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: var(--t-callout);
  font-weight: 600;
}
.rate-buttons { display: flex; gap: var(--s-4); }
/* دائرية لا حبّة: هذا فعل تقييم لا فعل يُثبّت طلبًا، فليس مكان الليموني —
   انظر savyo-design: الليموني محجوز على ما يُنشئ أثرًا في قاعدة البيانات
   بوزن "طلب" أو "تسجيل"، لا على رأي عابر بلا رجعة عنه سوى مرة. */
.rate-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.rate-btn:active:not(:disabled) { transform: scale(0.9); }
.rate-btn:disabled { cursor: default; }

/* التحويم على أجهزة المؤشّر فقط، وعلى الزر المتاح فقط.
   الجوال يُبقي حالة :hover عالقة بعد اللمس: العميل يضغط 👍 فيصير مصمتًا،
   ثم يلمس 👎 (المعطّل) فيتلوّن مرجانيًا رغم أنه لم يُسجَّل شيء — فيبدو
   الاثنان مختارَين معًا. البيانات كانت سليمة دائمًا (الخادم يرفض التقييم
   الثاني)، لكن الشاشة كانت تكذب. */
@media (hover: hover) {
  .rate-btn[data-satisfied="true"]:hover:not(:disabled) { background: color-mix(in srgb, var(--emerald) 12%, transparent); color: var(--emerald); }
  .rate-btn[data-satisfied="false"]:hover:not(:disabled) { background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral); }
}

/* الخيار المختار ينبض ويكبر، وغير المختار ينكمش ويبهت — الفرق حركةٌ لا
   لونٌ فقط، فيُقرأ القرار من طرف العين قبل قراءة اللون. */
@keyframes rate-pop {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.35) rotate(-8deg); }
  70% { transform: scale(0.95) rotate(4deg); }
  100% { transform: scale(1.08) rotate(0deg); }
}
@keyframes rate-dismiss {
  to { transform: scale(0.72); opacity: 0.25; }
}
.rate-btn-selected {
  animation: rate-pop 0.5s var(--ease-spring) forwards;
}
.rate-btn-selected:disabled { opacity: 1; }
/* المعطّل غير المختار ينسحب بصريًا — بدونه يبقى الزوج متساويين بالوزن
   وكأن العميل لم يختر بعد. */
.rate-btn:disabled:not(.rate-btn-selected) {
  animation: rate-dismiss 0.3s var(--ease-out) forwards;
}
.rate-btn[data-satisfied="true"].rate-btn-selected {
  background: var(--glass-chip-bg);
  box-shadow: var(--glass-chip-shadow);
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
  border-color: transparent;
}
.rate-btn[data-satisfied="false"].rate-btn-selected {
  background: var(--coral);
  color: var(--on-coral);
  border-color: var(--coral);
}

.rate-done {
  justify-content: flex-start;
  color: var(--text-muted);
}
.rate-done svg { color: var(--emerald); flex-shrink: 0; }

/* شارة "جديد" — أسفل البداية.
   الزوايا الثلاث الأخرى مشغولة: الخصم أعلى البداية، والمفضّلة أعلى النهاية.
   وضعتها أول مرة مكان المفضّلة بالضبط فتراكبتا.
   وزمردية لا ليمونية: هذي معلومة عن المطعم لا لحظة توفير. */
/* شارة العرض الساري — تقف موضع "جديد" لأنهما لا يجتمعان.
   والطوبي لا الليموني: الليموني محجوز للحظة التوفير نفسها، وشارةٌ على
   بطاقة وعدٌ لا توفير محقّق بعد. */
/* ترتفع فوق اللوح بثمانية: بـ`bottom: 8px` وحدها كان نصفها السفلي مدفونًا
   تحت اللوح الطافي — ظاهرًا بما يكفي ليُرى، لا بما يكفي ليُقرأ. */
.rcard-offer {
  position: absolute;
  bottom: calc(var(--card-overlap) + 8px);
  inset-inline-start: 8px;
  background: var(--coral);
  /* حبرٌ داكن لا أبيض: الأبيض على المرجانيّ يعطي ‎2.59:1‎ وهو دون حدّ AA
     (‎4.5‎ للنصّ العادي). والداكن عليه يتجاوز ‎7‎. */
  color: var(--on-lime);
  font-size: var(--t-caption);
  font-weight: 800;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
  /* نبضة واحدة عند الظهور لا نبض دائم: الدائم يصير ضجيجًا يُتجاهل */
  animation: offer-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes offer-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rcard-offer { animation: none; }
}

.rcard-new {
  position: absolute;
  bottom: calc(var(--card-overlap) + 8px);
  inset-inline-start: 8px;
  background: var(--surface-ink);
  color: #fff;
  font-size: var(--t-caption);
  font-weight: 800;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
}

/* ---------- لوحة سبب الاعتذار ببوابة المطعم ---------- */
/* داخل بطاقة الطلب لا نافذة فوقها: المطعم يحتاج يشوف الأصناف وهو يختار
   ("أي صنف خلص؟")، والنافذة تحجبها عنه. */
.cancel-reasons { display: flex; flex-direction: column; gap: var(--s-5); width: 100%; }
.cancel-reasons-label { font-size: var(--t-callout); font-weight: 700; color: var(--text-muted); }
.cancel-reasons textarea {
  width: 100%;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-callout);
  resize: vertical;
}
.cancel-reasons-actions { display: flex; gap: var(--s-4); }
.cancel-reasons-actions button { flex: 1; margin: 0; }

/* ---------- تعديل الطلب داخل المهلة ---------- */
/* العدّاد داخل الزر لا فوقه: هو شرط الزر لا معلومة مستقلة عنه — وفصله
   يجعل العميل يقرأ رقمًا لا يعرف على ماذا يعدّ. */
.edit-countdown {
  margin-inline-start: auto;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--t-footnote);
  font-variant-numeric: tabular-nums;
}
#pickup-edit-btn { display: flex; align-items: center; gap: var(--s-4); width: 100%; }

/* الشريط يقول "أنت تعدّل" صراحةً: العميل دخل من شاشة طلبه لا من المنيو،
   وبلا هذا قد يظنّ أنه يبني طلبًا ثانيًا. */
/* `.notice` هو القالب، و`.edit-banner` اسمه الأول باقٍ للتوافق — شريطٌ
   ثانٍ منسوخٌ للإغلاق كان سيفترق عنه بأول تعديل. */
.notice,
.edit-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: 14px;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-callout);
  line-height: 1.6;
}
.notice svg,
.edit-banner svg { flex-shrink: 0; margin-top: 2px; }

/* نبرة التحذير: العميل **مابينتبه** للكلمة الهادئة في السطر الفرعي، فهذا
   الشريط يأخذ لونًا يفصله عن الصفّ لا يذوب فيه. */
.notice-warn {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  /* `--warning` نفسه يبلغ 4.86:1 على الأبيض، لكن أرضيّة هذا الشريط من
     لونه — فينزل إلى 4.39 ويسقط دون حدّ AA. والحبر يُعتَّم للأرضية التي
     يقع عليها فعلًا لا للتي حُسب عليها. */
  color: color-mix(in srgb, var(--warning) 78%, var(--surface-ink));
  font-weight: 700;
}
.notice-warn svg { color: color-mix(in srgb, var(--warning) 78%, var(--surface-ink)); }
.notice-warn .notice-sub {
  display: block;
  margin-top: var(--s-1);
  color: var(--action-ink);
  font-weight: 400;
}

.edit-empty {
  margin: 14px 0 10px;
  font-size: var(--t-callout);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

/* ---------- التقاط الطلب في الشاشة الفارغة ---------- */
/* داخل المشهد الفارغ لا شاشة منفصلة: العميل وصل نهايةً، والانتقال به
   لشاشة ثانية يبدو عقوبةً على أنه لم يجد شيئًا.

   وبلا إطارٍ ولا أرضية: الشاشة الفارغة بطاقةٌ واحدة، وإطارٌ ثانٍ داخلها
   يقسم رسالتها ويجعل الفعل يبدو شيئًا منفصلًا لا خطوتها التالية.
   والسؤال الذي كان عنوانًا صار في الزرّ نفسه. */
.demand {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: 100%;
  max-width: 320px;
  margin: var(--s-9) auto 0;
}
.demand .auth-input { margin: 0; }
.demand .btn-primary { margin: 0; }
.demand-note { font-size: var(--t-footnote); color: var(--danger); min-height: 0; }
.demand.demand-done {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  font-size: var(--t-callout);
  color: var(--emerald);
}

/* ---------- السلال ---------- */
.cart-picks { display: flex; flex-direction: column; gap: var(--s-4); }
.cart-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  min-height: 60px;
  padding: var(--s-6) var(--s-7);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: start;
  cursor: pointer;
}
.cart-pick:active { background: var(--surface-2); }
.cart-pick-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cart-pick-name {
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-pick-meta { font-size: var(--t-footnote); color: var(--text-muted); }
.cart-pick svg { flex-shrink: 0; color: var(--action-ink); }

.cart-switch {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--action-ink);
  font-size: var(--t-footnote);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.cart-switch:active { background: var(--surface-2); }
.cart-switch svg { flex-shrink: 0; }

/* ما اختاره العميل تحت اسم الصنف في السلّة — هو الفرق الوحيد بين سطرين
   يحملان نفس الاسم. */
.citem-opts {
  margin-top: 2px;
  font-size: var(--t-footnote);
  color: var(--action-ink);
  line-height: 1.5;
}
/* شارةٌ على زرّ الصنف ذي الخيارات: تقول «عندك منه في السلّة» بلا أن
   تدّعي أن الزيادة من هنا تخصّ تهيئةً بعينها. */
.add-item-count {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--text); color: var(--bg);
  font-size: 10px; font-weight: 800; line-height: 1;
}
.add-item { position: relative; overflow: visible; }

/* ---------- ورقة الصنف وخياراته ---------- */
.isheet-img {
  width: 100%; height: 168px; object-fit: cover;
  border-radius: var(--r-md); margin-bottom: var(--s-6);
}
.isheet-desc { margin: 0 0 var(--s-6); color: var(--text-muted); font-size: var(--t-callout); line-height: 1.7; }
.isheet-price {
  margin-bottom: var(--s-7); font-size: var(--t-title); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.isheet-price-note {
  display: block; font-size: var(--t-caption); font-weight: 500; color: var(--text-muted);
}
.optgroup { margin-bottom: var(--s-7); }
.optgroup-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.optgroup-name { font-size: var(--t-body); font-weight: 800; }
.optgroup-rule { font-size: var(--t-caption); color: var(--text-muted); flex-shrink: 0; }
.optrow {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 48px; padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--t-body); cursor: pointer;
}
.optrow:last-of-type { border-bottom: none; }
.optrow input { flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--text); }
.optrow-name { flex: 1; min-width: 0; }
.opt-delta { flex-shrink: 0; color: var(--text-muted); font-weight: 700; }
.optrow.is-off { opacity: .5; cursor: default; }
.optrow-off { flex-shrink: 0; font-size: var(--t-caption); font-weight: 700; color: var(--text-muted); }
.optgroup-err { font-size: var(--t-footnote); color: var(--danger); min-height: 0; }

/* ---------- الورقة السفلية ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-ink) 44%, transparent);
  opacity: 0;
  transition: opacity 0.26s var(--ease-out);
}
.sheet.is-on .sheet-scrim { opacity: 1; }
.sheet-card {
  position: relative;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--s-6) var(--s-8) calc(var(--s-9) + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--bg);
  box-shadow: 0 -8px 40px -12px var(--shadow);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease-out);
}
.sheet.is-on .sheet-card { transform: translateY(0); }
/* المقبض علامةٌ لا زرّ: يقول «تُسحب» قبل أن يجرّب العميل. */
.sheet-grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto var(--s-6);
  border-radius: var(--r-full);
  background: var(--lg-groove);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
.sheet-title { font-size: var(--t-heading); font-weight: 800; color: var(--text); }
.sheet-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: calc(var(--s-5) * -1);
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--action-ink);
  cursor: pointer;
}
.sheet-close:active { background: var(--surface-2); }
.sheet-body > .btn-primary { margin-top: var(--s-6); }
.invite-sheet-art { display: block; margin-bottom: var(--s-6); }
.invite-sheet-art svg { width: 64px; height: 64px; margin-inline: auto; }
.invite-sheet-desc {
  margin-bottom: var(--s-7);
  font-size: var(--t-callout);
  line-height: 1.7;
  color: var(--text-muted);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .sheet-card { transition: none; transform: none; }
  .sheet-scrim { transition: none; }
}

/* ---------- ملصق الكاشير ببوابة المطعم ---------- */
.poster-panel { display: flex; flex-direction: column; gap: var(--s-6); align-items: flex-start; }
.poster-qr {
  width: 132px; height: 132px; border-radius: var(--r-md);
  background: #fff; padding: var(--s-4); align-self: center;
}
.poster-code {
  font-size: var(--t-title); font-weight: 700; letter-spacing: 0.18em;
  align-self: center; color: var(--text);
}

/* ---------- بطاقة الدعوة بلحظتها، وبطاقة التثبيت ---------- */
/* كلتاهما تظهران بشاشة الاستلام بعد الاستلام — وكلتاهما طلبٌ من العميل،
   فتُبنيان هادئتين بلا لون صارخ يزاحم لحظة "استلمت طلبك". */
.invite-card, .install-card {
  margin-top: 14px;
  padding: var(--s-7);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.invite-title { font-size: var(--t-body); font-weight: 700; margin-bottom: 4px; }
.invite-desc { font-size: var(--t-callout); color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; }
.invite-card .btn-primary { margin: 0; width: 100%; }
.invite-done {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-callout); color: var(--emerald);
  background: color-mix(in srgb, var(--emerald) 8%, transparent);
  border-color: color-mix(in srgb, var(--emerald) 26%, transparent);
}

.install-card { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.install-text { flex: 1; min-width: 160px; }
.install-title { font-size: var(--t-body); font-weight: 700; }
.install-desc { font-size: var(--t-callout); color: var(--text-muted); line-height: 1.6; margin-top: 2px; }
.install-card .btn-primary { margin: 0; }
.install-dismiss {
  background: none; border: none; padding: var(--s-2) var(--s-3);
  font-family: inherit; font-size: var(--t-callout); color: var(--text-muted); cursor: pointer;
}

/* روابط الشروط ببوابة المندوب — هادئة أسفل الشاشة، تُقرأ عند السؤال لا قبله */
.agent-legal {
  display: flex; justify-content: center; align-items: center; gap: var(--s-4);
  margin: 28px 0 12px; font-size: var(--t-footnote); color: var(--text-muted);
}
.agent-legal a { color: var(--text-muted); text-decoration: none; }
.agent-legal a:hover { color: var(--emerald); text-decoration: underline; }

/* ---------- العروض الجاهزة ببوابة المطعم ---------- */
.offer-row {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border);
}
.offer-row:last-of-type { border-bottom: 0; }
.offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); }
.offer-title { font-size: var(--t-body); font-weight: 700; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.offer-why { font-size: var(--t-callout); color: var(--text-muted); line-height: 1.7; margin-top: 3px; }

/* «يسري الآن» صريحة: من يفعّل عرضًا خارج وقته يظنّه معطّلًا فيعيد الضغط */
.offer-live {
  font-size: var(--t-caption); font-weight: 800; padding: var(--s-1) var(--s-4); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
  color: var(--emerald);
}

/* يلتفّ: صفّ الخصم يبقى سطرًا واحدًا (تسمية · مزلاج · نسبة) وما أُضيف
   بعده — المدّة والإشعار — ينزل سطورًا كاملة تحته. وبلا الالتفاف صارت
   أزرار المدّة عمودًا ضيّقًا يزاحم المزلاج، ومربّع الإشعار مربّعًا مسحوقًا
   في طرفٍ لا يُقرأ. */
.offer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: 12px; }
.offer-duration, .offer-notify { flex: 0 0 100%; }
.offer-controls label { font-size: var(--t-callout); color: var(--text-muted); }
.offer-range { flex: 1; accent-color: var(--emerald); min-width: 0; }
.offer-value { font-size: var(--t-body); font-weight: 800; min-width: 46px; text-align: end; }

/* ما يراه العميل حرفيًّا — المطعم يقرّر وهو يرى ما سيصل زبونه لا وصفًا له */
.offer-preview {
  margin-top: 10px; padding: var(--s-4) var(--s-6); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: var(--t-footnote); line-height: 1.7;
  color: var(--text-muted);
}
.offer-preview b { color: var(--text); }

/* ---------- بديل الصورة: مساحة لونية باسم التصنيف ---------- */
/* حلّت محلّ رسومات التصنيفات الأحد عشرة. تقع في موضعين: مطعمٌ بلا صورة
   (لن يُقبل بعد الإطلاق)، وصورةٌ فشل تحميلها على شبكة ضعيفة — والثاني
   يقع حتى بعد اكتمال الصور كلها، ولهذا لا تُترك سادة بلا اسم: السادة
   وحدها تُقرأ عطلًا لا تصميمًا. */
.cat-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  text-align: center;
  font-weight: 700;
  font-size: var(--t-callout);
  line-height: 1.35;
  /* ‎55‎ لا ‎78‎: النسبة العالية تجعل الحبر تلوينًا صِرفًا فيقترب من أرضيته
     المصنوعة من التلوين نفسه — مقيس ‎2.94:1‎ في الضوء و‎1.7‎ في الظلام. والشدّ
     نحو `--text` يضمن التباين في الوضعين لأنه ينقلب معهما. */
  color: color-mix(in srgb, var(--cat-tint) 55%, var(--text));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--cat-tint) 12%, var(--surface)) 0%,
    color-mix(in srgb, var(--cat-tint) 26%, var(--surface)) 100%);
}
/* داخل خانة صفّ التصنيفات: الاسم مكتوبٌ تحتها أصلًا فتكراره حشو. */
.cat-art-stack > .cat-placeholder,
.cat-tile-art > .cat-placeholder {
  font-size: 0;
  border-radius: var(--r-md);
}
/* ومخفيّةٌ ما دامت الصورة موجودة — بـ`visibility` لا `display` لتبقى
   مقاسةً في مكانها. صور التصنيفات شفافة الخلفية وتطفو على الأرضية
   الرملية بلا حاوية، فمساحةٌ لونية تحتها تحبسها في مربّع ملوّن وتخالف
   قاعدة «لا ظل ولا إطار على صور التصنيفات». تُكشف عند فشل التحميل وحده. */
.cat-art-stack > .cat-placeholder { visibility: hidden; }
.cat-art-stack.art-fallback > .cat-placeholder { visibility: visible; }

/* بنرٌ واحد يتمدّد للعرض الكامل: نافذة عرضٍ تُغلق فيسقط من الصفّ ويبقى
   الباقي بمقاسه، فيُترك نصف السطر فارغًا ويُقرأ كأن شيئًا لم يُحمَّل. */
.offer-rail:has(.offer-card:only-child) .offer-card { flex: 0 0 100%; }

/* ---------- حركة الحالات الفارغة ---------- */
/* الشاشة الفارغة أطول ما يقف عنده العميل — وساكنةً تُقرأ «انتهى»، وبحركةٍ
   خفيفة تُقرأ «ما زال يعمل». الحركة على الحاوية لا على أجزاء الرسمة:
   جزءٌ متحرّك لكل مشهد يعني تسع حركات تفترق، وواحدةٌ على الحاوية تسع
   المشاهد التسعة ومعها أي مشهد يُضاف غدًا.
   وبطيئة ومحدودة المدى عمدًا — ٣٫٢ ثانية و٤ بكسل: الحركة هنا إشارةُ حياة
   لا لفتُ انتباه، والسريعة الواسعة تصير ضجيجًا في شاشةٍ يقرؤها المستخدم. */
@keyframes state-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-0.6deg); }
}
@keyframes state-fade-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.state-art,
.scene-art {
  animation: state-fade-in 0.42s var(--ease-out) both,
             state-float 3.2s ease-in-out 0.42s infinite;
  will-change: transform;
}
/* الأيقونة العامة تدخل بلا طفو: الطفو يليق بمشهدٍ له كتلة، والأيقونة
   الخطّية الطافية تبدو مهتزّة لا حيّة. */
.state > .icon-lg {
  animation: state-fade-in 0.42s var(--ease-out) both;
}
/* النصّ يتبع الرسمة بفارقٍ صغير — يُقرأ تتابعًا لا ظهورًا دفعةً واحدة. */
.state-title { animation: state-fade-in 0.42s var(--ease-out) 0.08s both; }
.state-desc { animation: state-fade-in 0.42s var(--ease-out) 0.14s both; }

/* من ضبط جهازه على تقليل الحركة لا تُفرض عليه: قاعدةٌ صحّية عامة، وهذه
   حركةٌ زخرفية بالكامل فإسقاطها لا يفقده معنى. */
@media (prefers-reduced-motion: reduce) {
  .state-art, .scene-art, .state > .icon-lg,
  .state-title, .state-desc { animation: none; }
}

/* ---------- مشاهد الحالات: صورة مجسّمة فوق الرسمة ---------- */
/* نفس بنية `.cat-art-stack`: الرسمة تبقى مرسومةً مخفيّة، وتُكشف إن فشلت
   الصورة — فشاشةٌ فارغة أصلًا لا تزداد فراغًا بمربّع أبيض.
   والمقاس يأتي من الرسمة تحتها (٧٦px في الحالات، ٥٦ في رأس التوفير،
   ٣٤ في بطاقات الأرقام)، فملفٌ واحد يخدم المواضع الثلاثة. */
.state-art-stack {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.state-art-stack > svg { visibility: hidden; }
.state-art-stack.art-fallback > svg { visibility: visible; }
.state-art-stack > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- زرّ القصّة: نصٌّ وكبسولة تنفتح ---------- */
/* مقتبسٌ عن Uiverse (adamgiebl) بثلاثة تعديلات لازمة:
   
   ١ — **بالاتجاه المنطقي لا `right`**: الأصل يثبّت الكبسولة يمينًا، وفي
       العربية اتجاه المضيّ يسارًا — وسهمنا `arrow-left` أصلًا. فلو نُقل
       الأصل حرفيًّا لأشار السهم إلى حيث لا نمضي.

   ٢ — **على الضغط لا التحويم**: `:hover` لا يقع على شاشة لمس إطلاقًا،
       فالحركة التي تميّز هذا الزرّ كانت ستموت على كل جوال — وهذه شاشة
       الترحيب، أول ما يراه العميل. ربطناها بـ`:active` فتُحسّ تحت الإصبع،
       وأبقيناها على التحويم لمن يفتحه على سطح المكتب.

   ٣ — **بلونِنا**: الليموني على شاشة الترحيب موضعٌ مصرَّحٌ به في الهوية،
       والظلّ الداخلي مشتقٌّ منه لا بنفسجيًّا. */
.story-actions .story-cta {
  position: relative;
  justify-content: flex-start;
  gap: 0;
  height: 3.2em;
  padding: 0.35em;
  padding-inline-start: 1.3em;
  padding-inline-end: 3.4em;
  border-radius: var(--r-full);
  overflow: hidden;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 1.6em -0.6em color-mix(in srgb, var(--on-lime) 55%, transparent);
}
/* حالة الإغلاق فوق اسم المطعم — تُقرأ قبل المنيو لا بعده. وهي على رأسٍ
   داكن، فأرضيّتها فاتحةٌ وحبرها داكن ليُقرأ من بعيد. */
.rhero-closed {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: var(--s-4);
  padding: var(--s-2) var(--s-6);
  border-radius: var(--r-full);
  /* انقلبت مع الرأس: كانت فاتحةً على داكن فصارت داكنةً على فاتح. */
  background: #14231F;
  color: var(--on-emerald);
  font-size: var(--t-caption);
  font-weight: 800;
}

/* سببُ قفل زرّ التأكيد — سطرٌ هادئ تحته لا لوحٌ ملوّن فوقه. */
.cart-closed-line {
  margin: var(--s-5) 0 0;
  text-align: center;
  font-size: var(--t-footnote);
  color: var(--text-muted);
  line-height: 1.7;
}

/* سطر التوفير في بطاقة السجلّ. زمرديّ لا ليمونيّ: الليموني للحظة التوفير
   وقت وقوعها، وهذا سجلٌّ يُقرأ بعدها. */
.order-history-saved {
  margin-top: 6px;
  font-size: var(--t-callout);
  font-weight: 700;
  color: var(--tint-emerald);
}

/* زرّ الشاشة الفارغة. حلّ محلّ الرسمة: شاشةٌ فارغة بلا مخرج تترك العميل
   يبحث عن زرّ الرجوع، وواحدةٌ فيها زرّ تقول له الخطوة التالية.
   وعرضه بالمحتوى لا كامل السطر: الشاشة الفارغة ليست لحظة حسمٍ يملؤها
   زرٌّ عريض، بل مفترقٌ يُقترح فيه طريق. */
.state-action {
  width: auto;
  margin-top: 14px;
  padding-inline: var(--s-9);
}


/* ---------- زرّ الضغط: تأكيد الطلب ---------- */
/* مقتبسٌ عن Uiverse (Voxybuns / lucky-fireant-71) بثلاثة تعديلات:

   ١ — **بلونِنا**: الليموني والحدّ الكحليّ بدل الرماديّ والأسود. وهذا
       موضعٌ مصرَّحٌ به لليموني — «زرٌّ يُثبّت شيئًا»، وتأكيد الطلب أصرحها.
   ٢ — **الارتفاع على التحويم خلف حارسه**: `:hover` لا يقع على شاشة لمس،
       فلو تُرك بلا حارس لعلق بعد الضغط كما علق `.btn-icon` من قبل.
   ٣ — الحشوة من `.cta` لا من الأصل: مقاس أزرارنا سلّمٌ قائم لا يُخترق.

   واختير هذا الزرّ دون غيره لأن أثره الأساسي على `:active` — أي أنه
   يُحسّ تحت الإصبع. وأكثر ما في ذلك المعرض حركتُه على التحويم وحده،
   فتموت على الجوال ولا يبقى منها شيء. */
.cta-press {
  padding: 0;
  background: var(--on-lime);
  border: none;
  overflow: visible;
}
.cta-press-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-7) var(--s-8);
  border: 2px solid var(--on-lime);
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--on-lime);
  transform: translateY(-0.22em);
  transition: transform 0.1s ease;
}
.cta-press:active .cta-press-top { transform: translateY(0); }
@media (hover: hover) {
  .cta-press:hover .cta-press-top { transform: translateY(-0.34em); }
}
/* الزرّ نفسه لا يتقلّص: الانخفاض هو الاستجابة، وتقلّصٌ فوقه يزدحم. */
.cta-press:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cta-press-top { transform: none; transition: none; }
}

/* ---------- درجات أرضية البطاقات ---------- */
.rcard-media.tint-0, .featured-avatar.tint-0 { background: var(--thumb-0); }
.rcard-media.tint-1, .featured-avatar.tint-1 { background: var(--thumb-1); }
.rcard-media.tint-2, .featured-avatar.tint-2 { background: var(--thumb-2); }
.rcard-media.tint-3, .featured-avatar.tint-3 { background: var(--thumb-3); }
/* الصورة تغلب الدرجة حين تصل */
.rcard-media.has-photo { background: var(--surface-2) !important; }

/* ---------- لا وضع داكن ----------
   بُني وضعٌ داكن كامل ثم حُذف بقرار المالك: «شيل الوضع الليلي لأن هذي
   التطبيقات ماتستخدمه». وهو قرار منتج لا ذوق — تطبيقات الطلب في السوق
   تعمل بوضعٍ واحد، والمطابقة معها أولى من مطابقة إرشادات المنصّة.
   وApple توصي بتوفير الاثنين، فالبند مسجَّل في DESIGN_AUDIT.md مخالفةً
   مقصودة لا سهوًا.

   وما بقي من أثره نافع ويُحفظ: `--surface-ink` مفصولٌ عن `--emerald`
   (أرضيةً لا حبرًا)، ودرجات البطاقات في رموز لا في جافاسكربت. */

/* ---------- الرسالة العابرة ---------- */
/* بديل `alert()` الأصلي: نافذة النظام توقف الصفحة ولا تقبل تنسيقًا
   وتُقرأ عطلًا في تطبيقٍ مثبَّت. وهذه تظهر فوق الشريط السفلي لا تحته —
   الشريط طبقةٌ وظيفية، والرسالة أعلى منها لأنها آنيّة. */
#toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--s-11) + 42px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: max-content;
  max-width: min(calc(100% - 32px), 420px);
  z-index: 90;
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-full);
  background: var(--surface-ink);
  color: var(--on-emerald);
  font-size: var(--t-callout);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  box-shadow: var(--lg-lift);
  /* مخفيّةٌ ومعطّلة اللمس حتى تظهر: `opacity` وحدها تترك مستطيلًا يبتلع
     الضغطات فوق الشريط السفلي. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.2s var(--ease-out), transform 0.28s var(--ease-out);
}
#toast.is-on { opacity: 1; transform: translateY(0) scale(1); }
#toast[data-tone="error"] { background: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  #toast { transition: opacity 0.2s linear; transform: none; }
  #toast.is-on { transform: none; }
}

/* الصنف المغلق: لا زرّ إضافة بل كلمةٌ تقول لماذا */
.mitem-closed-note {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--t-caption);
  font-weight: 700;
}

/* ═══ أهداف اللمس في اللوحات (ت‑٨ · ت‑٩) ═══
   قيست لوحات المطعم والمندوب والأدمن عند ‎308‎ و‎390‎ على منصّةٍ معزولة
   لأوّل مرّة. لا خطأ جافاسكربت ولا فيض — لكن هذه دون ‎44‎: */

/* زرّ الخروج ‎36‎. و`.btn-icon` عامٌّ (أزرار الكمّية منه) فلا يُكبَّر كلّه؛
   ولا تصلح له طبقة لمسٍ لأن `overflow: hidden` عليه يقصّها. فيُكبَّر هذا
   وحده، وهو زرُّ رأسٍ يحتمل ‎44‎ كأزرار التنقّل في iOS. */
#logout-button { width: 44px; height: 44px; }

/* «شروط الاستخدام · الخصوصية» في لوحة المندوب ‎20‎ بكسلًا. */
.agent-legal a { display: inline-block; padding-block: 12px; }

/* أزرار تكبير الخريطة ‎30×30‎ — مقاس المكتبة الافتراضي، وهو لفأرة. والمالك
   يحدّد موقع مطعمه من جوّاله. */
/* خصوصيةٌ أعلى عمدًا: المكتبة تكتب `.leaflet-touch .leaflet-bar a`
   فتغلب `.leaflet-bar a` وحدها. */
.leaflet-container .leaflet-control-zoom.leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
}

/* **حقل «الصق رابط خرائط قوقل».** يقع في `.upload-row` لا في
   `.form-group`، فلم يأخذ تنسيق الحقول: ارتفاعه ‎21‎ في لوحة المطعم، وعند
   ‎308‎ في لوحة المندوب عصره زرّ «استخرج الموقع» إلى عرض ‎26‎ بكسلًا —
   حقلٌ لا يُكتب فيه. فيأخذ أخدود الحقول، وينزل الزرّ تحته حين يضيق
   السطر بدل أن يسحقه. */
.upload-row { flex-wrap: wrap; }
.upload-row input[type="text"] {
  flex: 1 1 170px;
  min-width: 0;
  min-height: 44px;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-body);
  background: var(--surface);
  box-shadow: var(--lg-groove-ring);
  color: var(--text);
}
.upload-row .btn-outline { min-height: 44px; }

/* رابط الاتّصال في جدول التسجيلات (لوحة الأدمن) ‎17‎ بكسلًا، ورابطا
   الشروط عند المندوب على حدّ ‎44‎ بالتقريب — يُمدّان بلا تغيير الشكل. */
#leads-tbody a[href^="tel:"] { display: inline-block; padding-block: 14px; }
.agent-legal a { padding-block: 13px; }

/* ═══ شاشة «كيف تشتغل الوجبة المجانية» (ت‑٦) ═══ */
.help-list li b { color: var(--text); }

/* المثال بالأرقام: لحظة توفيرٍ في أوضح صورها، فالليمونيّ هنا في محلّه —
   حافّةٌ رفيعة لا سطحٌ مصبوغ. */
.help-card-example { box-shadow: inset 0 0 0 1.5px var(--lime); }
.help-example { margin: 0; font-size: var(--t-callout); line-height: 1.9; color: var(--text); }
.help-example b { font-weight: 800; }
.help-example-note { margin: 8px 0 0; font-size: var(--t-footnote); color: var(--text-muted); line-height: 1.6; }

/* التفاصيل سطرٌ هادئ واحد لا بطاقة — تُقرأ لمن يبحث عنها ولا تُقدَّم. */
.help-fineprint {
  margin: var(--s-6) var(--s-3) 0;
  font-size: var(--t-footnote);
  color: var(--text-muted);
  line-height: 1.8;
  text-align: center;
}

/* الشريط والبانر يفتحان الشرح في صفحة المطعم: ضغطةٌ تُرى قبل أن تنتقل. */
.cashback-progress[role="button"],
.fm-banner[role="button"] {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.cashback-progress[role="button"]:active,
.fm-banner[role="button"]:active { transform: scale(0.985); }
.cashback-progress[role="button"]:focus-visible,
.fm-banner[role="button"]:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: var(--r-lg); }
@media (prefers-reduced-motion: reduce) {
  .cashback-progress[role="button"]:active,
  .fm-banner[role="button"]:active { transform: none; }
}


/* ═══════════ بنرات العروض — ستّة تصاميم من مراجع المالك (٢٠٢٦‑٠٩) ═══════════
   الطبقات: أرضية وملمس ← كلمة عملاقة ← صورة الصنف ← ملصقات ← النصّ.
   النصّ من الخادم حيّ، والصورة صورة التصنيف الشفافة. وبعرض الرفّ (٢١٧)
   تنتقل الملصقات فوق الصورة بـ@container فلا تزاحم العنوان. */
.offer-card.ob {
  display: block;
  height: 120px;
  padding: 0;
  border: none;
  text-align: start;
  color: #16181A;
  container-type: inline-size;
  isolation: isolate;
}
/* المختار: إطارٌ داكن فوق كل الطبقات — الإطار على البطاقة نفسها تغطّيه الملصقات. */
.offer-card.ob.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2.5px #16181A;
  pointer-events: none;
}
.ob-food {
  position: absolute;
  z-index: 2;
  left: -2px;
  bottom: -12px;
  height: 124px;
  width: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
.ob-txt {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 0;
  bottom: 0;
  width: 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}
.ob-title { font-weight: 800; font-size: clamp(15px, 6.1cqi, 22px); line-height: 1.15; }
.ob-deco { position: absolute; z-index: 3; pointer-events: none; }
.ob-pill { border-radius: 999px; padding: 3px 11px 4px; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.ob-star, .ob-purp { display: block; }
.ob-star > span, .ob-purp > span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; text-align: center; line-height: 1.1; }
.ob-star svg, .ob-purp svg { display: block; width: 100%; height: 100%; }

/* ① الكوكيز: شريط شطرنج، نقاط متدرّجة، نجمة مسنّنة، بريق — بالسماويّ */
.ob-bf { --c: #0E5A70; background: #F2F9F7; color: var(--c); }
.ob-checker { inset: 0 0 auto; height: 9px; z-index: 1;
  background: repeating-conic-gradient(var(--c) 0 25%, transparent 0 50%) 0 0 / 18px 18px; }
.ob-halftone { left: 0; bottom: 0; width: 62%; height: 78%; z-index: 1; opacity: 0.5;
  background: radial-gradient(circle, var(--c) 1.25px, transparent 1.7px) 0 0 / 6px 6px;
  -webkit-mask: radial-gradient(circle at 0 100%, #000, transparent 72%);
  mask: radial-gradient(circle at 0 100%, #000, transparent 72%); }
.ob-bf .ob-title { font-size: clamp(17px, 7cqi, 25px); }
.ob-bf .ob-pill { background: var(--c); color: #fff; }
.ob-star { left: clamp(88px, 33cqi, 122px); top: 10px; width: 62px; height: 62px; transform: rotate(-12deg); }
.ob-star polygon { fill: #fff; stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; }
.ob-star > span { font-size: 12px; color: var(--c); padding: 0 8px; }
.ob-sp1 { left: 10px; top: 14px; width: 16px; fill: var(--c); opacity: 0.85; }
.ob-sp2 { left: 30px; top: 30px; width: 9px; fill: var(--c); opacity: 0.7; }

/* ② iTcreatives: ورق شبكيّ، توهّج ليمونيّ بالأركان، وسمٌ مائل بظلّ */
.ob-qh { background:
    radial-gradient(circle at 0 100%, rgba(198, 244, 50, 0.8), transparent 44%),
    radial-gradient(circle at 100% 0, rgba(198, 244, 50, 0.5), transparent 36%),
    linear-gradient(#E6E9E3 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #E6E9E3 1px, transparent 1px) 0 0 / 14px 14px, #FBFBF8; }
.ob-qh .ob-title { font-size: clamp(16px, 6.4cqi, 23px); }
.ob-qh mark { background: #E6F8A9; color: #3E5410; padding: 0 5px; border-inline-start: 3px solid var(--lime); }
.ob-tag { background: var(--lime); color: #16181A; font-weight: 800; font-size: 12px; border-radius: 999px;
  padding: 4px 12px 5px; box-shadow: 0 4px 0 rgba(22, 24, 26, 0.16); transform: rotate(-5deg); }
.ob-qh .ob-pill { background: #16181A; color: #fff; outline: 1.5px solid #16181A; outline-offset: 2px; }
.ob-tg, .ob-tg2 { fill: none; stroke: #9CC21F; stroke-width: 2.4; }
.ob-tg { left: clamp(92px, 34cqi, 126px); top: 12px; width: 20px; }
.ob-tg2 { left: 14px; top: 8px; width: 14px; }

/* ③ و⑥ KFC: كلمة عملاقة خلف الأكل، دائرة فوقه، وعنوانٌ بخطٍّ يدويّ */
.ob-giant { position: absolute; z-index: 1; white-space: nowrap; line-height: 1; pointer-events: none;
  font-family: 'Lalezar', var(--font-ar); }
.ob-lbl { font-weight: 800; font-size: 12px; color: #141414; }
.ob-script { font-family: 'Aref Ruqaa', var(--font-ar); font-weight: 700; line-height: 1.05; color: #141414;
  transform: rotate(-6deg); transform-origin: right center; }
.ob-dot { display: grid; place-items: center; text-align: center; border-radius: 50%; color: #fff;
  font-weight: 800; font-size: 11px; line-height: 1.15; }
.ob-cs { background: radial-gradient(circle at 30% 20%, #fff, #F1E6E3 75%); }
.ob-cs .ob-giant { left: -4px; top: 2px; font-size: 104px; color: #E23B20; letter-spacing: -2px; }
.ob-cs .ob-food { left: 6px; }
.ob-cs .ob-dot { left: clamp(96px, 36cqi, 132px); top: 6px; width: 56px; height: 56px; background: #141414; transform: rotate(9deg); }
.ob-cs .ob-script { font-size: clamp(19px, 7.2cqi, 26px); }
.ob-cb { background: #FFF4EF; }
.ob-cb .ob-giant { left: 6px; top: 8px; font-size: 84px; color: transparent; -webkit-text-stroke: 2px #E4572E; opacity: 0.9; }
.ob-cb .ob-dot { left: clamp(94px, 35cqi, 130px); bottom: 8px; width: 52px; height: 52px; background: #E4572E; transform: rotate(-8deg); }
.ob-cb .ob-script { font-size: clamp(20px, 7.6cqi, 28px); transform: rotate(-5deg); }

/* ④ ملصقات Black Friday: بيضويّ مسنّن، تذكرة، نجمة، مدار وزهرة */
.ob-we { background: #F4F3DE; }
.ob-oval { position: relative; display: block; width: min(190px, 58cqi); transform: rotate(-5deg); }
.ob-oval svg { display: block; width: 100%; height: auto; }
.ob-oval-rim { fill: #3D5BFF; }
.ob-oval-in { fill: #86E36A; }
.ob-oval > span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: clamp(13px, 5.2cqi, 18px); line-height: 1.15; padding: 0 16%; }
.ob-ticket { background: #FF6B3D; color: #16181A; font-weight: 800; font-size: 11.5px; padding: 4px 14px 5px; transform: rotate(4deg);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 5px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 5px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.ob-orb { left: clamp(80px, 30cqi, 112px); top: 8px; width: 74px; fill: none; stroke: #16181A; stroke-width: 1.6; }
.ob-fl { left: clamp(132px, 45cqi, 168px); top: 6px; width: 18px; fill: #FF8A2B; }
.ob-purp { left: 6px; top: 6px; width: 52px; height: 52px; transform: rotate(-10deg); }
.ob-purp polygon { fill: #B9A2FF; }
.ob-purp > span { font-size: 10px; color: #16181A; }

/* ⑤ ملصقات الوضع الداكن: كبسولاتٌ مكدّسة، مربّعٌ ورديّ، مثلّثٌ أزرق */
.ob-fo { background: #3B3A40; color: #fff; }
.ob-pills { display: flex; flex-direction: column; align-items: flex-start; transform: rotate(-3deg); }
.ob-pills b { background: #12A58B; color: #fff; font-style: italic; font-weight: 800; font-size: clamp(14px, 5.4cqi, 19px);
  line-height: 1.25; padding: 1px 12px 3px; border-radius: 999px; margin-top: -3px; }
.ob-box { background: #FF7AD9; color: #FFE66B; font-weight: 800; font-size: 13px; line-height: 1; padding: 5px 9px 6px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.ob-fo .ob-pill { background: #FFE66B; color: #16181A; }
.ob-tri { left: -6px; top: -8px; width: 44px; z-index: 1; fill: #1F6BFF; transform: rotate(-16deg); }
.ob-sp { left: 14px; top: 12px; width: 14px; fill: #fff; opacity: 0.8; }

/* بعرض الرفّ (عدّة عروض ≈ ٢١٧): الملصقات تنتقل فوق الصورة وتصغر */
@container (max-width: 260px) {
  .ob-txt { width: 50%; right: 10px; gap: 5px; }
  .ob-food { height: 100px; bottom: -6px; left: -8px; }
  .ob-star { left: 58px; top: 2px; width: 42px; height: 42px; }
  .ob-star > span { font-size: 9px; padding: 0 5px; }
  .ob-bf .ob-title { font-size: 17px; }
  .ob-tg { left: 74px; }
  .ob-qh .ob-title { font-size: 16px; }
  .ob-tag { font-size: 10.5px; padding: 3px 9px 4px; }
  .ob-cs .ob-giant { font-size: 70px; top: 12px; }
  .ob-cs .ob-dot { left: 64px; top: 4px; width: 42px; height: 42px; font-size: 9px; }
  .ob-lbl { font-size: 11px; }
  .ob-cs .ob-script { font-size: 18px; }
  .ob-orb { display: none; }
  .ob-fl { left: 84px; }
  .ob-purp { width: 40px; height: 40px; }
  .ob-purp > span { font-size: 8.5px; }
  .ob-oval { width: 118px; }
  .ob-oval > span { font-size: 12px; }
  .ob-pills b { font-size: 13px; padding: 1px 9px 3px; }
  .ob-box { font-size: 11px; }
  .ob-cb .ob-giant { font-size: 62px; top: 16px; }
  .ob-cb .ob-dot { left: 64px; width: 42px; height: 42px; font-size: 9px; }
  .ob-cb .ob-script { font-size: 21px; }
}

/* ═══════════ بطاقتا الرئيسية ═══════════ */
.promo-card.pc-ticket,
.promo-card.pc-grid { display: block; height: 135px; padding: 0; box-shadow: none; }

/* تذكرة الدعوة: قصّتان نصف دائريّتين فوق وتحت خطٍّ منقّط، وحافّتان مسنّنتان */
.pc-ticket {
  --cut: 34%;
  background: #FF6B3D;
  color: #16181A;
  border-radius: 14px;
  -webkit-mask:
    radial-gradient(circle 11px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 11px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.pc-ticket::before { content: ""; position: absolute; z-index: 2; top: 14px; bottom: 14px; left: var(--cut);
  border-left: 2px dashed rgba(22, 24, 26, 0.45); }
.promo-card > .pc-edge { position: absolute; z-index: 3; top: 0; bottom: 0; width: 8px;
  background: radial-gradient(circle 4px at 0 50%, var(--bg) 96%, transparent) 0 0 / 8px 13px repeat-y; }
.pc-edge-r { right: 0; transform: scaleX(-1); }
.pc-edge-l { left: 0; }
.promo-card > .pc-stub { position: absolute; left: 0; top: 0; bottom: 0; width: var(--cut); background: #FFE7C7; display: grid; place-items: center; }
.pc-stub .pc-food { height: 108px; width: auto; margin-top: 16px; transform: rotate(-8deg);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); }
.pc-gift { position: absolute; top: 10px; left: 50%; translate: -50% 0; background: #16181A; color: #FFE7C7;
  font-size: 10px; font-weight: 800; padding: 2px 8px 3px; border-radius: 4px; transform: rotate(-4deg); }
.promo-card > .pc-main { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc-ticket .pc-main { right: 16px; top: 0; bottom: 0; left: calc(var(--cut) + 14px); justify-content: center; }
.pc-eyebrow { font-size: 11px; font-weight: 800; background: #16181A; color: #FF6B3D; padding: 2px 8px 3px; border-radius: 999px; }
.pc-title { font-weight: 800; font-size: 20px; line-height: 1.25; }
.pc-sub { font-size: 11.5px; font-weight: 600; opacity: 0.8; }

/* ورقة الوجبة المجانية: شبكةٌ وتوهّجٌ ليمونيّ وتظليلُ الوعد */
.pc-grid {
  color: #16181A;
  background:
    radial-gradient(circle at 0 100%, rgba(198, 244, 50, 0.9), transparent 50%),
    linear-gradient(#E6E9E3 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #E6E9E3 1px, transparent 1px) 0 0 / 14px 14px, #FBFBF8;
  box-shadow: inset 0 0 0 1px var(--border);
}
.pc-grid .pc-food { position: absolute; z-index: 1; left: -14px; bottom: -22px; height: 138px; width: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18)); }
.pc-grid .pc-main { right: 14px; top: 14px; width: 60%; gap: 6px; }
.pc-grid .pc-title { line-height: 1.4; }
.pc-grid mark { background: #E6F8A9; color: inherit; padding: 0 4px; border-inline-start: 3px solid var(--lime); }
.pc-tag { background: var(--lime); color: #16181A; font-weight: 800; font-size: 12px; border-radius: 999px;
  padding: 4px 12px 5px; box-shadow: 0 4px 0 rgba(22, 24, 26, 0.16); transform: rotate(-5deg); }

/* ═══════════ هايلايت العروض: دوائر بالصنف فوق بنرات شاشة العروض ═══════════ */
.offer-hl { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px 10px; padding: 4px var(--s-7) 2px; scrollbar-width: none; }
.offer-hl::-webkit-scrollbar { display: none; }
.offer-hl-item { flex: none; width: 72px; padding: 0; border: none; background: none; font-family: inherit; cursor: pointer; text-align: center; }
.offer-hl-ring { display: block; width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--hl-ring), var(--hl-ring)); transition: transform var(--dur-fast) var(--ease-out); }
.offer-hl-item:active .offer-hl-ring { transform: scale(0.95); }
.offer-hl-in { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid var(--bg);
  overflow: hidden; background: var(--hl-ground); }
.offer-hl-in.tex-dots::before { content: ""; position: absolute; inset: 0; opacity: 0.35;
  background: radial-gradient(circle, #0E5A70 1px, transparent 1.4px) 0 0 / 5px 5px; }
.offer-hl-in.tex-grid::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(#0001 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, #0001 1px, transparent 1px) 0 0 / 8px 8px; }
.offer-hl-in img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2)); }
.offer-hl-chip { position: absolute; z-index: 2; bottom: 0; left: 50%; translate: -50% 0; background: var(--hl-chip); color: var(--hl-ink);
  font-size: 9px; font-weight: 800; padding: 1px 6px 2px; border-radius: 999px; white-space: nowrap; }
.offer-hl-name { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--text); }
.offer-hl-item.is-on .offer-hl-name { font-weight: 800; }
.offer-hl-item.is-on .offer-hl-ring { background: #16181A; }
.offer-hl-item:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .offer-hl-item:active .offer-hl-ring { transform: none; }
}

/* ═══════════ العروض كلها دائمًا: ستوريات، وحركة، وفسيفساء (قرار المالك ٢٠٢٦‑٠٩) ═══════════ */
.home-offers { margin: 16px 0 6px; }
.offer-section { container-type: inline-size; }

/* شارة «الآن» على ستوري العرض الساري — داكنةٌ بحبرٍ ليمونيّ: لحظة توفيرٍ قائمة. */
.offer-hl-chip { background: #16181A; color: var(--lime); }

/* ستوريات «غير العروض»: رسمٌ طباعيّ بدل صورة طبق */
.story-type { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1;
  font-family: 'Lalezar', var(--font-ar); font-size: 22px; color: var(--lime); }
.story-art { position: absolute; inset: 0; display: grid; place-items: center; }
.story-art svg { width: 62%; height: 62%; }
.story-burst { position: absolute; inset: 9%; display: grid; place-items: center; }
.story-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-burst polygon { fill: #B9A2FF; }
.story-burst b { position: relative; font-size: 12px; font-weight: 800; color: #16181A; }
.story-open { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; font-weight: 800; color: #0E5A70; }
.story-open i { width: 8px; height: 8px; border-radius: 50%; background: #12A58B;
  box-shadow: 0 0 0 3px rgba(18, 165, 139, 0.25); animation: story-pulse 1.6s ease-in-out infinite; }
@keyframes story-pulse { 50% { box-shadow: 0 0 0 6px rgba(18, 165, 139, 0); } }

/* حالة العرض مكان العدد: قد تكون موعدًا من سطرين، فتلتفّ ولا تُقصّ. */
.ob-pill, .ob-lbl, .ob-ticket { white-space: normal; }

/* ─── الحركة: بنرٌ بعرض الشاشة، ونقاطٌ تحته ─── */
.ob-carousel { margin: 12px 0 2px; }
.ob-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.ob-slide .offer-card.ob { flex: none; width: 100%; height: 128px; }
.ob-dots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.ob-dot-btn { position: relative; width: 6px; height: 6px; min-height: 0; padding: 0; border: none; border-radius: 999px;
  background: #D5D9D6; cursor: pointer; transition: width 0.25s var(--ease-out), background 0.25s var(--ease-out); }
.ob-dot-btn.is-on { width: 18px; background: #16181A; }
/* منطقة لمسٍ أوسع من النقطة — ٤٤ رأسيًّا دون أن تكبر العين. */
.ob-dot-btn::after { content: ""; position: absolute; inset: -19px -3px; }

/* ─── فسيفساء تبويب العروض: كامل، وطوليّ، ومربّع ─── */
/* الصفّ ربعُ عمودٍ ناقص الفواصل، فأربعة صفوف = عمودٌ مربّع تمامًا بأي عرض. */
.ob-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 10px; margin: 12px 0 16px;
  grid-auto-rows: calc(((100cqw - 10px) / 2 - 30px) / 4); }
.ob-mosaic .offer-card.ob { flex: none; width: auto; height: auto; }
.ob-mosaic .offer-card.ob.ob-full { grid-column: span 2; grid-row: span 3; }
.ob-mosaic .offer-card.ob.ob-tall { grid-row: span 8; }
.ob-mosaic .offer-card.ob.ob-sq { grid-row: span 4; }
@container (max-width: 320px) {
  .ob-mosaic .offer-card.ob.ob-full { grid-row: span 4; }
}

/* المربّع والطوليّ: النصّ أعلى، والطبق كبيرٌ أسفل الوسط، والكلمة العملاقة خلفه. */
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-txt { top: 12px; bottom: auto; left: 12px; right: 12px; width: auto;
  justify-content: flex-start; gap: 5px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-food { left: 50%; translate: -50% 0; bottom: -8px; height: 50%; }
.ob-mosaic .offer-card.ob.ob-tall .ob-food { height: 42%; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) :is(.ob-star, .ob-dot, .ob-purp) { left: 6px; top: auto; bottom: 38%;
  width: 44px; height: 44px; font-size: 9px; }
.ob-mosaic .offer-card.ob.ob-tall :is(.ob-star, .ob-dot, .ob-purp) { width: 58px; height: 58px; font-size: 10.5px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) :is(.ob-star, .ob-purp) > span { font-size: 9px; padding: 0 4px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-title { font-size: 16px; }
.ob-mosaic .offer-card.ob.ob-tall .ob-title { font-size: 20px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-script { font-size: 19px; }
.ob-mosaic .offer-card.ob.ob-tall .ob-script { font-size: 24px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-giant { top: auto; bottom: 20%; left: -4px; font-size: 62px; }
.ob-mosaic .offer-card.ob.ob-tall .ob-giant { bottom: 34%; font-size: 84px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-oval { width: 100%; max-width: 150px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-oval > span { font-size: 12px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-pills b { font-size: 14px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) :is(.ob-orb, .ob-tg2, .ob-sp1, .ob-sp2) { display: none; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-tg { left: auto; right: 10px; top: auto; bottom: 10px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-fl { left: auto; right: 12px; top: auto; bottom: 12px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-tri { left: auto; right: -6px; top: auto; bottom: -6px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-halftone { width: 100%; height: 60%; }

@media (prefers-reduced-motion: reduce) {
  .story-open i { animation: none; }
  .ob-dot-btn { transition: none; }
}

/* المربّع على الشاشة الضيّقة (عرضه ~١٣٣ على ٣٠٨): الملصقات الجانبية تُرفع
   والطبق يصغر — وإلا ركب الموعدُ الصورةَ والدائرةُ العنوان. */
@container (max-width: 160px) {
  .ob-mosaic .offer-card.ob.ob-sq .ob-food { height: 38%; }
  .ob-mosaic .offer-card.ob.ob-sq :is(.ob-star, .ob-dot, .ob-purp, .ob-tg, .ob-fl) { display: none; }
  .ob-mosaic .offer-card.ob.ob-sq .ob-giant { font-size: 46px; bottom: 12%; }
  .ob-mosaic .offer-card.ob.ob-sq .ob-title { font-size: 14px; }
  .ob-mosaic .offer-card.ob.ob-sq .ob-script { font-size: 16px; }
  .ob-mosaic .offer-card.ob.ob-sq :is(.ob-pill, .ob-lbl, .ob-ticket) { font-size: 10px; }
  .ob-mosaic .offer-card.ob.ob-sq .ob-tag { font-size: 10px; padding: 3px 8px 4px; }
  .ob-mosaic .offer-card.ob.ob-sq .ob-oval > span { font-size: 10.5px; }
}


/* ═══════════ رأس صفحة المطعم: خلفيةٌ خلف الشعار (قرار المالك ٢٠٢٦‑٠٩) ═══════════
   صورة الرأس المرفوعة إن وُجدت، وإلا خلفية التصنيف بأساليب بنرات العروض.
   الرصيف (رجوع/تابِع) عائمٌ فوقها، والشعار دائرةٌ على حافّتها السفلى. */
.rhero.has-band { padding: 0 0 var(--s-7); }
.rhero.has-band::before { display: none; }
.rhero > .rhead-band { position: relative; height: 170px; overflow: hidden; border-radius: 0 0 28px 28px; z-index: 0; }
.rband { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--g, #FBFBF8); container-type: size; }
.rband-photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* الشعار: دائرةٌ بيضاء على حافّة الرأس السفلى */
.rhero > .rhero-logo { position: absolute; z-index: 2; top: 128px; right: 20px; width: 84px; height: 84px; border-radius: 50%;
  background: #fff; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); overflow: hidden; display: grid; place-items: center; }
/* ٧٢٪: أكبر مربّعٍ يسعه القرص ٧١٪ — فالشعار المربّع لا تُقصّ زواياه. */
.rhero-logo img { width: 72%; height: 72%; object-fit: contain; }
.rhero > .rhero-body { padding: 14px var(--s-7) 0; }
.rhero > .rhero-body.has-logo { padding-top: 50px; }


/* ═══════════ طلبات المالك الثمانية (٢٠٢٦‑٠٩‑٢٧) ═══════════ */

/* ٨ · آخر الليل: لافتة نيون ترمش وتتقطّع كالأفلام */
.ob-nx { background: radial-gradient(circle at 28% 30%, #2A1F3D, #120E1B 75%); color: #fff; }
.ob-neon { position: absolute; z-index: 1; left: -2px; top: 10px; white-space: nowrap; line-height: 1;
  font-family: 'Lalezar', var(--font-ar); font-size: 98px; color: #FFE3F2;
  text-shadow: 0 0 3px #fff, 0 0 10px #FF3EA5, 0 0 22px #FF3EA5, 0 0 44px #FF3EA5, 0 0 72px rgba(255, 62, 165, 0.6);
  animation: neon-flicker 6s infinite; }
/* شريحتا التقطّع: نسختان بلونين تنزاحان لحظةً ثم تختفيان */
.ob-neon::before, .ob-neon::after { content: attr(data-text); position: absolute; inset: 0; text-shadow: none;
  clip-path: inset(0 0 100% 0); }
.ob-neon::before { color: #3DE8FF; animation: neon-glitch-a 6s infinite; }
.ob-neon::after { color: #FF3EA5; animation: neon-glitch-b 6s infinite; }
@keyframes neon-flicker {
  0%, 17%, 21%, 23%, 61%, 69%, 100% { opacity: 1; }
  18%, 22% { opacity: 0.2; }
  20% { opacity: 0.85; }
  62%, 68% { opacity: 0.12; }  /* ينطفئ لحظة ثم يعود */
}
@keyframes neon-glitch-a {
  0%, 84%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
  85% { transform: translate(-4px, 1px); clip-path: inset(12% 0 58% 0); }
  87% { transform: translate(3px, -1px); clip-path: inset(52% 0 22% 0); }
  89% { transform: translate(-2px, 0); clip-path: inset(30% 0 44% 0); }
  90% { clip-path: inset(0 0 100% 0); }
}
@keyframes neon-glitch-b {
  0%, 85%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
  86% { transform: translate(4px, 0); clip-path: inset(62% 0 8% 0); }
  88% { transform: translate(-3px, 1px); clip-path: inset(6% 0 70% 0); }
  90% { clip-path: inset(0 0 100% 0); }
}
.ob-nx .ob-food { left: 6px; filter: drop-shadow(0 0 18px rgba(255, 62, 165, 0.35)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.4)); }
.ob-nx .ob-dot { left: clamp(96px, 36cqi, 132px); top: 6px; width: 56px; height: 56px; background: rgba(18, 14, 27, 0.7);
  border: 2px solid #3DE8FF; color: #BFF7FF; box-shadow: 0 0 10px #3DE8FF, inset 0 0 8px rgba(61, 232, 255, 0.5); transform: rotate(9deg); }
.ob-nx .ob-lbl { color: #BFF7FF; }
.ob-nx .ob-script { color: #fff; font-size: clamp(19px, 7.2cqi, 26px); text-shadow: 0 0 8px rgba(255, 62, 165, 0.6); }
@container (max-width: 260px) {
  .ob-nx .ob-neon { font-size: 70px; top: 20px; }
  .ob-nx .ob-dot { left: 64px; top: 4px; width: 42px; height: 42px; font-size: 9px; }
  .ob-nx .ob-script { font-size: 18px; }
}
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-neon { top: auto; bottom: 22%; left: -2px; font-size: 60px; }
.ob-mosaic .offer-card.ob.ob-tall .ob-neon { bottom: 36%; font-size: 82px; }
@container (max-width: 160px) {
  .ob-mosaic .offer-card.ob.ob-sq .ob-neon { font-size: 46px; bottom: 12%; }
}

/* ٦ و٧ · الستوريات: 24/7 بأرقامٍ إنجليزية، والوجبة المجانية بطبقٍ وأرضيةٍ مشمسة */
.story-type.latin { font-family: var(--font-num); font-weight: 800; font-size: 19px; letter-spacing: -0.5px; }
.story-247 { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num); font-weight: 800;
  font-size: 18px; letter-spacing: -0.5px; color: #fff; text-shadow: 0 0 10px rgba(122, 162, 255, 0.8); }
.offer-hl-in { background: var(--hl-ground); }

/* ١ · صفحة الستوري */
.story-page-banner { margin: 6px 0 16px; }
.story-page-banner .offer-card.ob { width: 100%; height: 150px; pointer-events: none; }
.story-page-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.story-page-hero .offer-hl-ring { width: 84px; height: 84px; margin: 0; }
.story-page-hero h2 { margin: 0; font-size: var(--t-heading); font-weight: 800; }

/* ٤ · التذكرة: بالسماويّ والزمرديّ، وبريقٌ يعبرها والكأس تطفو */
.pc-ticket { background: #0E5A70; color: #fff; }
.pc-ticket::before { border-left-color: rgba(255, 255, 255, 0.45); }
.promo-card > .pc-stub { background: #BBDFD8; }
.pc-ticket .pc-eyebrow { background: var(--lime); color: #16181A; }
.pc-ticket .pc-sub { opacity: 0.85; }
.pc-stub .pc-food { animation: ticket-float 3.2s ease-in-out infinite; }
@keyframes ticket-float { 50% { transform: rotate(-4deg) translateY(-5px); } }
.pc-ticket::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%);
  transform: translateX(-130%); animation: ticket-shine 5s ease-in-out infinite; }
@keyframes ticket-shine { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .ob-neon, .ob-neon::before, .ob-neon::after { animation: none; }
  .pc-stub .pc-food, .pc-ticket::after { animation: none; }
}

/* ═══ التذكرة (مراجعة المالك الثانية): بنفسجيّ ملكيّ، ولمعةٌ هولوغرامية بطيئة
   بألوان قوس قزح بدل خطٍّ واحد، ونجماتٌ صغيرة تتلألأ متعاقبة ═══ */
.pc-ticket { background: #4B2BC9; }
/* خلفية الكعب تبقى سماويّة — أعجبت المالك؛ الذي تغيّر هو الزمرديّ وحده. */
.pc-ticket::after {
  transform: none;
  /* لمعةٌ بيضاء وحدها — بلا ألوان قوس قزح (قرار المالك): وهجٌ عريضٌ ناعم
     في وسطه خيطٌ أسطع، يعبر ببطء، والنجمات تتلألأ فوقه. */
  background: linear-gradient(115deg,
    transparent 22%, rgba(255, 255, 255, 0.10) 36%, rgba(255, 255, 255, 0.34) 48%,
    rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.34) 52%, rgba(255, 255, 255, 0.10) 64%, transparent 78%);
  background-size: 260% 100%;
  mix-blend-mode: screen;
  animation: ticket-holo 9s ease-in-out infinite alternate;
}
@keyframes ticket-holo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.promo-card > .pc-glints { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.pc-glints i { position: absolute; width: 12px; height: 12px; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)); animation: ticket-twinkle 4.8s ease-in-out infinite; }
.pc-glints i:nth-child(1) { right: 12%; top: 16%; }
.pc-glints i:nth-child(2) { right: 46%; top: 70%; width: 9px; height: 9px; animation-delay: 1.2s; }
.pc-glints i:nth-child(3) { left: 8%; top: 14%; width: 10px; height: 10px; animation-delay: 2.4s; }
.pc-glints i:nth-child(4) { right: 30%; top: 12%; width: 7px; height: 7px; animation-delay: 3.6s; }
@keyframes ticket-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  82% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ═══ آخر الليل (مراجعة المالك الثانية): «الليل» تملأ البنر عرضًا، والبرجر
   أصغر في الزاوية فلا يحجب إلا طرف الحرف الأخير — والعنوان سطرٌ أسفلها ═══ */
/* المقاس من عرض البنر لا ثابت: على ٣٠٨ كانت الكلمة تتجاوز حافّته. */
.ob-nx .ob-neon { left: auto; right: 12px; top: -4px; font-size: min(104px, 27cqi); transform: scaleX(1.45); transform-origin: right center; }
.ob-nx .ob-food { left: 2px; height: 74%; bottom: -8px; }
.ob-nx .ob-txt { top: auto; bottom: 9px; right: 14px; width: auto; flex-direction: row; align-items: center; gap: 8px; }
.ob-nx .ob-script { font-size: 17px; transform: none; }
.ob-nx .ob-lbl { order: 2; font-size: 11px; background: rgba(61, 232, 255, 0.14); border: 1px solid rgba(61, 232, 255, 0.6);
  border-radius: 999px; padding: 1px 8px 2px; }
@container (max-width: 260px) {
  .ob-nx .ob-neon { font-size: min(84px, 29cqi); top: 0; transform: scaleX(1.22); }
  .ob-nx .ob-food { height: 62%; }
  .ob-nx .ob-script { font-size: 15px; }
}
.ob-mosaic .offer-card.ob.ob-nx:is(.ob-sq, .ob-tall) .ob-neon { right: 8px; left: auto; top: 30%; bottom: auto; font-size: 66px; transform: scaleX(1.18); }
.ob-mosaic .offer-card.ob.ob-nx.ob-tall .ob-neon { top: 26%; font-size: 84px; }
.ob-mosaic .offer-card.ob.ob-nx:is(.ob-sq, .ob-tall) .ob-txt { flex-direction: column; align-items: flex-start; top: 12px; bottom: auto; }
.ob-mosaic .offer-card.ob.ob-nx:is(.ob-sq, .ob-tall) .ob-food { height: 40%; }
@container (max-width: 160px) {
  .ob-mosaic .offer-card.ob.ob-nx.ob-sq .ob-neon { font-size: 50px; top: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-glints i { animation: none; }
}


/* الكعب يتناوب: كل طبقٍ يصعد ويستقرّ ثلاث ثوانٍ ثم يطير — ٩ ثوانٍ للدورة. */
/* الأطباق الثلاثة في **خليّةٍ واحدة من شبكة** لا مطلقةٌ بإزاحة ٥٠٪: على سفاري
   الآيباد كانت الإزاحة تُحسب من غير مرجعها فيقع العصير على خطّ التذكرة
   المنقّط (لقطة المالك). الخليّة الواحدة تتوسّط بلا حساب. */
.promo-card > .pc-stub.pc-cycle { display: grid; place-items: center; grid-template: 1fr / 1fr; }
.pc-cycle .pc-food { grid-area: 1 / 1; position: static; width: auto; max-width: 84%; height: 96px; margin: 0 0 8% 0;
  opacity: 0; animation: stub-cycle 9s ease-in-out infinite; }
.pc-cycle .pc-food:nth-child(2) { animation-delay: 3s; }
.pc-cycle .pc-food:nth-child(3) { animation-delay: 6s; }
@keyframes stub-cycle {
  0% { opacity: 0; transform: translateY(18px) scale(0.8) rotate(-12deg); }
  6%, 28% { opacity: 1; transform: translateY(0) scale(1) rotate(-6deg); }
  17% { transform: translateY(-5px) scale(1.02) rotate(-3deg); }
  34%, 100% { opacity: 0; transform: translateY(-16px) scale(0.86) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-cycle .pc-food { animation: none; }
  .pc-cycle .pc-food:first-child { opacity: 1; }
}


/* نقش رأس المطعم: أكلٌ خطّيّ ملوّن يزحف ببطء، و«savyo» بخطّ الشعار */
.rband-doodle { display: block; }
.rband-doodle .dd-word { font-family: 'Bagel Fat One', var(--font-ar); font-size: 24px; fill: #16181A; opacity: 0.82; }
.rband-drift { opacity: 0.88; animation: doodle-drift 45s linear infinite; }
@keyframes doodle-drift { from { transform: translate(0, 0); } to { transform: translate(280px, 230px); } }
@media (prefers-reduced-motion: reduce) { .rband-drift { animation: none; } }


/* ═══════════ النار، وشريط التوفير، والحالات الفارغة (٢٠٢٦‑٠٩‑٢٧) ═══════════ */

/* النار ترقص وتلمع: تمايلٌ من قاعدتها كاللهب، ووهجٌ يخفق، ولمعةٌ تعبر شكلها
   وحده (قناعٌ من صورة اللهب نفسها، فلا تظهر خارجه). */
.tab-flame-wrap { position: relative; display: block; width: 50px; height: 50px; transform-origin: 50% 90%;
  animation: flame-dance 1.9s ease-in-out infinite; }
.tab-flame-wrap .tab-flame { animation: flame-glow 1.9s ease-in-out infinite; }
.tab-flame-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../images/offers/tab-flame.webp) center / contain no-repeat;
  mask: url(../images/offers/tab-flame.webp) center / contain no-repeat;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  animation: flame-shine 3.8s ease-in-out infinite; }
@keyframes flame-dance {
  0%, 100% { scale: 1 1; rotate: 0deg; }
  25% { scale: 1.04 0.96; rotate: -2.5deg; }
  50% { scale: 0.97 1.05; rotate: 1.8deg; }
  75% { scale: 1.02 0.98; rotate: -1.2deg; }
}
@keyframes flame-glow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(20, 35, 31, 0.28)) brightness(1); }
  50% { filter: drop-shadow(0 2px 4px rgba(20, 35, 31, 0.28)) brightness(1.14) saturate(1.1); }
}
@keyframes flame-shine { 0%, 50% { background-position: 100% 0; } 80%, 100% { background-position: 0 0; } }

/* شريط «وفّرت هذا الشهر»: كان أسود — صار ليمونيًّا، فهو لحظة توفيرٍ أصلًا. */
.saved-pill { background: linear-gradient(120deg, #C6F432, #E6F8A9); color: #16181A;
  box-shadow: 0 4px 0 rgba(22, 24, 26, 0.12); }
.saved-pill-label { opacity: 0.78; font-weight: 600; }
.saved-pill-amount { color: #16181A; }

/* الملصق: نجمتاه تتلألآن — والطفو القائم يحمل الباقي */
.state-art .st-spark, .pickup-art .st-spark, .food-scene .st-spark { transform-box: fill-box; transform-origin: center;
  animation: st-twinkle 2.6s ease-in-out infinite; }
.st-spark-2 { animation-delay: 1.3s !important; }
@keyframes st-twinkle { 0%, 100% { transform: scale(0.6); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } }
.pickup-art { display: inline-block; }
.pickup-art svg { width: 76px; height: 76px; }

/* مشهد الأطباق الطافية */
.food-scene { position: relative; width: 200px; height: 150px; margin: 0 auto 14px; }
.fs-blob { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 90, 112, 0.35) 1.2px, transparent 1.6px) 0 0 / 7px 7px, #EAF6F3; }
.fs-food { position: absolute; width: 64px; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.18));
  animation: fs-float 3.4s ease-in-out infinite; }
.fs-1 { right: 4px; top: 8px; }
.fs-2 { left: 0; top: 30px; width: 70px; animation-delay: 1.1s; }
.fs-3 { right: 26px; bottom: -4px; width: 46px; animation-delay: 2.2s; }
.fs-center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.fs-center svg { width: 84px; height: 84px; }
@keyframes fs-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .tab-flame-wrap, .tab-flame-wrap .tab-flame, .tab-flame-wrap::after,
  .st-spark, .fs-food { animation: none; }
}


/* ═══ ص‑٥ · حلقة التركيز (H‑3 في DESIGN_AUDIT) ═══
   من يتنقّل بلوحة المفاتيح أو بقارئ الشاشة لم يكن يرى أين هو. الحلقة تظهر
   بـ:focus-visible وحده — لا عند اللمس — وبـ:where فتبقى أدنى خصوصيّةً من
   حلقات المكوّنات الخاصّة (١١ موضعًا) فلا تطغى عليها. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2.5px solid #16181A;
  outline-offset: 2px;
}


/* ═══ رأس المطعم (مراجعة المالك): لونٌ واحد، وبلا حدود — يتلاشى ═══
   الرسومات بدرجةٍ أغمق من أرضيتها لا بستّة ألوان، والنقش صار خلفيّة الرأس
   كلّه لا لوحًا مستديرًا: يمتدّ خلف الاسم والتفاصيل ويتلاشى من الجانبين
   ونزولًا حتى يذوب قبل المنيو. */
.rhero.has-band { padding: 170px 0 var(--s-9); overflow: hidden; }
.rhero > .rhead-band { position: absolute; inset: 0; height: auto; border-radius: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%),
                      linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%),
              linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect; }
.rband-doodle use { color: var(--dd) !important; }
.rband-doodle circle { fill: var(--dd); }
.rband-doodle .dd-word { fill: var(--dd); opacity: 1; filter: brightness(0.86); }
.rband-drift { opacity: 1; }
/* صورة المطعم المرفوعة تبقى في أعلى الرأس وحده، ويتلاشى أسفلها معه. */
.rband-photo { inset: 0 0 auto; height: 190px; }

/* ═══ «وين تبي تستلم؟» — خلفية جديدة: رادارٌ يبحث عن مطاعم حولك ═══
   كانت نقاط عرض الفطور نفسها. الآن حلقاتٌ متّحدة المركز بلون الدبّوس،
   وموجةٌ تنبض من المركز كإشارة موقع. */
.fs-blob { background:
    radial-gradient(circle, #FFE7DC 0 34%, transparent 35%),
    repeating-radial-gradient(circle, rgba(255, 107, 61, 0.2) 0 1.5px, transparent 1.5px 13px),
    #FFF6F1; }
.fs-blob::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid rgba(255, 107, 61, 0.55);
  animation: fs-pulse 2.6s ease-out infinite; }
@keyframes fs-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fs-blob::after { animation: none; opacity: 0; } }


/* شمس بنر الفطور: في الركن الأيمن الأعلى، تطلّ نصفها من الحافّة وأشعّتها تدور */
.ob-sun { right: -16px; top: -16px; width: 74px; height: 74px; z-index: 1; }
.ob-sun circle { fill: #FFC93C; }
.ob-sun-rays { fill: #FFB020; transform-origin: 32px 32px; animation: sun-spin 18s linear infinite; }
@keyframes sun-spin { to { transform: rotate(360deg); } }
@container (max-width: 260px) { .ob-sun { width: 58px; height: 58px; right: -14px; top: -14px; } }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-sun { width: 58px; height: 58px; }
@media (prefers-reduced-motion: reduce) { .ob-sun-rays { animation: none; } }


/* ═══════════ ستريك الوجبة المجانية: بطاقة أختام (٢٠٢٦‑٠٩‑٢٧) ═══════════ */
.streak { margin-bottom: 14px; padding: 12px 14px 16px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #FFF7EC, #FFEDE0); box-shadow: inset 0 0 0 1px rgba(255, 107, 61, 0.2); }
.streak-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.streak-flame { width: 22px; height: 22px; object-fit: contain; transform-origin: 50% 90%; animation: flame-dance 1.9s ease-in-out infinite; }
.streak-title { font-weight: 800; font-size: var(--t-callout); }
.streak-count { font-family: var(--font-num); font-weight: 800; font-size: 12px; background: #16181A; color: var(--lime);
  border-radius: 999px; padding: 1px 8px 2px; }
.streak-msg { margin-inline-start: auto; font-size: var(--t-footnote); font-weight: 700; color: #B4491C; }
.streak-stamps { display: grid; grid-template-columns: repeat(5, 1fr) 14px 1.15fr; gap: 6px; align-items: center; }
.stamp { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 2px dashed rgba(255, 107, 61, 0.45); background: #fff; color: rgba(255, 107, 61, 0.55);
  font-family: var(--font-num); font-weight: 800; font-size: 14px; }
.stamp.is-on { border: none; background: #FF6B3D; color: #fff; transform: rotate(var(--r, -8deg));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 3px 0 rgba(180, 60, 20, 0.35); }
.stamp svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* الختم الجديد يُطبع: يهبط كبيرًا مائلًا ثم يستقرّ — مرّةً واحدة */
.stamp.is-new { animation: stamp-press 0.62s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(0.35s + var(--d, 0s)); }
@keyframes stamp-press {
  0% { transform: scale(1.9) rotate(-28deg); opacity: 0; }
  60% { transform: scale(0.9) rotate(var(--r)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--r)); }
}
.stamp.gift { border: 2px solid #C6F432; background: #F7FDE6; }
.stamp.gift img { width: 78%; height: auto; opacity: 0.5; filter: grayscale(0.5); }
.stamp.gift .gift-label { position: absolute; bottom: -8px; left: 50%; translate: -50% 0; white-space: nowrap;
  background: #16181A; color: var(--lime); font-family: var(--font-ar); font-size: 9.5px; font-weight: 800;
  padding: 1px 6px 2px; border-radius: 999px; }
.streak.is-ready .stamp.gift { background: #C6F432; transform: rotate(-4deg); animation: gift-glow 1.6s ease-in-out infinite; }
.streak.is-ready .stamp.gift img { opacity: 1; filter: none; }
@keyframes gift-glow { 50% { box-shadow: 0 0 0 7px rgba(198, 244, 50, 0.35); } }

/* المضغوط على بطاقات القائمة: شعلةٌ وخمس نقاط وجملة */
.streak-mini { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; background: #FFF1E7; font-size: var(--t-footnote); }
.streak-mini .streak-flame { width: 16px; height: 16px; }
.streak-dots { display: inline-flex; gap: 3px; }
.streak-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 107, 61, 0.22); }
.streak-dots i.on { background: #FF6B3D; }
.streak-dots i.gift { background: rgba(198, 244, 50, 0.45); }
.streak-dots i.gift.on { background: #9CC21F; }
.streak-mini-msg { margin-inline-start: auto; color: #B4491C; font-weight: 700; }

/* ═══════════ بنر «فلاش» و«فوق 50» ═══════════ */
/* «fx» لا «fl»: الأخير اسم زهرة بنر الويكند، فورث البنر موضعها وانزاح. */
.ob-fx { background: #FFD60A; color: #16181A; }
.ob-speed { right: 0; top: 0; bottom: 0; width: 60%; z-index: 1; opacity: 0.16;
  background: repeating-linear-gradient(115deg, #16181A 0 3px, transparent 3px 16px); }
.ob-bolt { left: clamp(92px, 34cqi, 128px); top: 6px; width: 34px; fill: #16181A; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round;
  transform: rotate(10deg); animation: bolt-zap 2.4s steps(1, end) infinite; }
@keyframes bolt-zap { 0%, 86%, 100% { opacity: 1; } 88%, 92% { opacity: 0.25; } }
.ob-timer { left: 10px; top: 8px; display: inline-flex; align-items: center; gap: 3px; background: #16181A; color: #FFD60A;
  border-radius: 999px; padding: 2px 8px 3px; font-size: 10.5px; font-weight: 800; }
.ob-timer svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ob-flash-tag { background: #16181A; color: #FFD60A; font-weight: 800; font-size: 12px; padding: 3px 10px 4px; transform: skewX(-10deg); }
.ob-fx .ob-title { font-size: clamp(17px, 7cqi, 25px); }
.ob-fx .ob-pill { background: #16181A; color: #FFD60A; }

.ob-bo { background: #E9F0FF; }
.ob-giant-num { left: 4px; top: 50%; translate: 0 -52%; font-family: var(--font-num); font-weight: 800; font-size: 104px;
  color: transparent; -webkit-text-stroke: 2.5px #1D6FD8; letter-spacing: -4px; }
.ob-tag-blue { background: #1D6FD8; color: #fff; }
.ob-bo .ob-pill { background: #1D6FD8; color: #fff; }
@container (max-width: 260px) { .ob-giant-num { font-size: 80px; } .ob-bolt { left: 64px; width: 26px; } }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-giant-num { top: auto; bottom: 12%; translate: none; font-size: 70px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-bolt { left: auto; right: 10px; top: auto; bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .streak-flame, .stamp.is-new, .streak.is-ready .stamp.gift, .ob-bolt { animation: none; }
}


/* ═══ ستوري «أقل من 15» وصفحته ═══ */
.story-15 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 800;
  font-size: 22px; color: #16181A; letter-spacing: -1px; }
.story-15 small { font-size: 14px; margin-inline-end: 1px; color: #FF6B3D; }
.u15-list { display: flex; flex-direction: column; gap: 10px; }
.u15-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); font-family: inherit; text-align: start; cursor: pointer; }
.u15-item.is-closed { opacity: 0.55; }
.u15-img { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; flex: none; background: var(--surface-2); }
.u15-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.u15-name { font-weight: 800; font-size: var(--t-callout); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u15-rest { font-size: var(--t-footnote); color: var(--text-muted); }
.u15-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.u15-price b { font-size: var(--t-callout); font-weight: 800; }
.u15-price s { font-size: 11px; color: var(--text-muted); }

/* في المربّع والطوليّ العنوان أعلى اليمين — فالشمس إلى الركن المقابل. */
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-sun { right: auto; left: -14px; }


/* ═══════════ توفيري وحسابي بلا ألواحٍ سوداء (٢٠٢٦‑٠٩‑٢٧) ═══════════ */
.savings-hero { color: #16181A; box-shadow: inset 0 0 0 1px var(--border-soft);
  background:
    radial-gradient(circle at 100% 0, rgba(198, 244, 50, 0.75), transparent 45%),
    radial-gradient(circle at 0 100%, rgba(198, 244, 50, 0.55), transparent 42%),
    linear-gradient(#E6E9E3 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #E6E9E3 1px, transparent 1px) 0 0 / 14px 14px, #FBFBF8; }
.savings-hero > div { position: relative; z-index: 1; }
.savings-hero-label, .savings-hero-unit { opacity: 0.7; font-weight: 700; }
.savings-hero-value { color: #16181A; display: inline-block; padding: 0 10px;
  background: linear-gradient(transparent 58%, #C6F432 58%, #C6F432 92%, transparent 92%); }
.sh-food { position: absolute; z-index: 0; width: 66px; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.16));
  animation: fs-float 3.6s ease-in-out infinite; pointer-events: none; }
.sh-1 { left: 10px; bottom: 8px; transform: rotate(-10deg); }
.sh-2 { right: 12px; top: 10px; width: 46px; animation-delay: 1.3s; }

.account-card { position: relative; overflow: hidden; padding-top: 58px; }
.account-card > * { position: relative; z-index: 1; }
.account-card > .account-doodle { position: absolute; z-index: 0; inset: 0 0 auto; height: 120px;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.account-doodle .rband { position: absolute; inset: 0; }
.account-avatar { width: 64px; height: 64px; background: #fff; color: #16181A;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, 0.14); font-weight: 800; font-size: 26px; }
.account-avatar span { line-height: 1; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .sh-food { animation: none; } }


/* ═══ السلّة: سطر العرض وعلامة الصنف المنصَّف ═══ */
.cart-offer-note { margin: 0 0 10px; padding: 9px 12px; border-radius: var(--r-md); font-size: var(--t-footnote); font-weight: 700;
  background: #FFF6E5; color: #8A5A00; box-shadow: inset 0 0 0 1px rgba(224, 161, 0, 0.35); }
.cart-offer-note.is-on { background: #F3FBDD; color: #3E5410; box-shadow: inset 0 0 0 1px rgba(156, 194, 31, 0.5); }
.citem-half { display: inline-block; margin-top: 3px; background: #FF4F9A; color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 1px 8px 2px; }

/* ═══ بنر «الثانية بنص» ═══ */
.ob-hx { background: linear-gradient(135deg, #FFF1F5, #FFDDE8); }
.ob-giant-half { left: 0; top: 50%; translate: 0 -54%; font-family: var(--font-num); font-weight: 800; font-size: 120px;
  color: #FF4F9A; opacity: 0.9; }
.ob-hx .ob-dot { left: clamp(94px, 35cqi, 130px); bottom: 8px; width: 54px; height: 54px; background: #16181A; color: #fff;
  font-size: 10.5px; transform: rotate(-8deg); }
.ob-tag-pink { background: #FF4F9A; color: #fff; }
.ob-hx .ob-pill { background: #FF4F9A; color: #fff; }
@container (max-width: 260px) { .ob-giant-half { font-size: 90px; } .ob-hx .ob-dot { left: 64px; width: 42px; height: 42px; font-size: 9px; } }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-giant-half { top: auto; bottom: 14%; translate: none; font-size: 84px; }

.stamp-arrow { text-align: center; font-weight: 800; color: #9CC21F; }
/* نقش الرأس: الدوائر داخل الرسومات (دونات، طماطم) كانت تُملأ فتصير أقراصًا
   ورديّة كبيرة — الملء للنقاط المتناثرة وحدها لا لما في الرموز. */
.rband-doodle symbol circle { fill: none; }
/* المصغّر: شريطٌ مقسّم بخمس خانات وخانة الهدية */
.streak-dots { gap: 2px; }
.streak-dots i { width: 14px; height: 6px; border-radius: 3px; }
.streak-dots i.gift { width: 10px; }


/* ═══ ملاحظات المالك (٢٠٢٦‑٠٩‑٢٨) ═══ */
/* ٢ · علامة 50% */
.citem-half b { font-family: var(--font-num); font-weight: 800; margin-inline-end: 3px; }

/* ٣ · الشريط المقسّم يتحرّك: الخانات المختومة تمتلئ متتابعةً، ولمعةٌ تعبرها */
.streak-dots i { position: relative; overflow: hidden; }
.streak-dots i.on { animation: seg-fill 0.5s var(--ease-out) both; }
.streak-dots i.on:nth-child(2) { animation-delay: 0.1s; }
.streak-dots i.on:nth-child(3) { animation-delay: 0.2s; }
.streak-dots i.on:nth-child(4) { animation-delay: 0.3s; }
.streak-dots i.on:nth-child(5) { animation-delay: 0.4s; }
.streak-dots i.on::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-120%); animation: seg-shine 2.8s ease-in-out 0.8s infinite; }
@keyframes seg-fill { from { transform: scaleX(0.2); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes seg-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ٦ · مؤقّت الفلاش: أرقامٌ ثابتة العرض فلا يرتجّ */
.ob-timer b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: 0.3px; }

/* الستوريات: 20%+ داخل حدود الدائرة · «15 ريال» · الجمعات · ملصقٌ يطلّ */
.story-type.latin { font-size: 15px; letter-spacing: -0.8px; }
.story-15 { flex-direction: column; gap: 0; line-height: 1; }
.story-15 b { font-family: var(--font-num); font-size: 24px; font-weight: 800; letter-spacing: -1px; color: #16181A; }
.story-15 small { font-size: 9.5px; font-weight: 800; color: #B4491C; margin-top: 1px; }
.offer-hl-ring { position: relative; }
.offer-hl-pop { position: absolute; z-index: 3; top: -6px; left: -8px; background: #FF6B3D; color: #fff; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; padding: 2px 7px 3px; border-radius: 999px; transform: rotate(-12deg);
  box-shadow: 0 3px 0 rgba(22, 24, 26, 0.18); }
.story-group { position: absolute; inset: 0; }
.story-group img { position: absolute; width: 50%; height: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2)); }
.story-group img:nth-child(1) { left: 6%; top: 14%; }
.story-group img:nth-child(2) { right: 8%; top: 22%; width: 48%; }
.story-group img:nth-child(3) { left: 32%; bottom: 4%; width: 34%; }

/* شاشة الشرح بالأختام */
.help-stamps { max-width: 360px; margin: 0 auto 14px; text-align: start; }

@media (prefers-reduced-motion: reduce) { .streak-dots i.on, .streak-dots i.on::after { animation: none; } }

/* الملصق يطلّ فوق الدائرة، والشريط يقصّ رأسيًّا — مسافةٌ فوقه. */
.offer-hl { padding-top: 12px; }

.story-group img:nth-child(1) { left: 2%; top: 8%; width: 58%; }
.story-group img:nth-child(2) { right: 2%; top: 18%; width: 56%; }
.story-group img:nth-child(3) { left: 30%; bottom: 0; width: 40%; }


/* ═══════════ لوحة المطعم: العروض ببنراتها (٢٠٢٦‑٠٩‑٢٨) ═══════════ */
.po-hero { margin: -2px 0 14px; padding: 14px; border-radius: var(--r-lg); color: #16181A;
  background:
    radial-gradient(circle at 100% 0, rgba(198, 244, 50, 0.75), transparent 45%),
    linear-gradient(#E6E9E3 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #E6E9E3 1px, transparent 1px) 0 0 / 14px 14px, #FBFBF8;
  box-shadow: inset 0 0 0 1px var(--border-soft); }
.po-hero-title { font-weight: 800; font-size: var(--t-heading); }
.po-hero-desc { margin-top: 4px; font-size: var(--t-footnote); color: var(--text-muted); line-height: 1.7; }
.po-hero-count { display: inline-block; margin-top: 10px; background: #16181A; color: var(--lime); font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 3px 12px 4px; }
.po-hero-count b { font-family: var(--font-num); }
.po-row { padding-top: 14px; }
.po-banner { position: relative; margin-bottom: 10px; }
.po-banner .offer-card.ob { width: 100%; height: 124px; flex: none; pointer-events: none; cursor: default; }
/* مطفأ: البنر باهتٌ رماديّ وحركته واقفة — التفعيل يُحييه */
.po-row:not(.is-active) .po-banner .offer-card.ob { filter: grayscale(0.85); opacity: 0.55; }
.po-row:not(.is-active) .po-banner .offer-card.ob * { animation-play-state: paused !important; }
.po-row.is-active .po-banner .offer-card.ob { box-shadow: 0 0 0 2.5px #C6F432, 0 8px 20px -8px rgba(22, 24, 26, 0.35); }
.po-state { position: absolute; z-index: 7; top: 8px; left: 8px; font-size: 11px; font-weight: 800; border-radius: 999px;
  padding: 3px 10px 4px; background: rgba(22, 24, 26, 0.78); color: #fff; }
.po-row.is-live .po-state { background: #C6F432; color: #16181A; }
.po-row.is-live .po-state::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #12A58B; margin-inline-end: 5px; animation: story-pulse 1.6s ease-in-out infinite; }


/* ═══ أيقونة العرض على بطاقة المطعم ═══ */
.rom { position: relative; overflow: hidden; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; font-weight: 800;
  color: #16181A; background: linear-gradient(90deg, var(--rom)); background-size: 100% 100%; }
.rom::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
  transform: translateX(-130%); animation: seg-shine 3.4s ease-in-out infinite; }
.rom-ic { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none;
  animation: rom-wobble 2.6s ease-in-out infinite; }
.rom-ic img { width: 17px; height: 17px; object-fit: contain; }
.rom-ic svg { width: 10px; height: 14px; fill: #16181A; }
.rom-ic b { font-family: var(--font-num); font-size: 10px; font-weight: 800; color: #16181A; letter-spacing: -0.5px; }
.rom-nx, .rom-fo { color: #fff; }
@keyframes rom-wobble { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .rom::after, .rom-ic { animation: none; } }


/* ═══════════ لوحة المطعم بلغة التطبيق الجديدة (٢٠٢٦‑٠٩‑٢٨) ═══════════ */
/* الدخول */
.pl-hero { position: relative; height: 210px; margin: -16px -16px 14px; overflow: hidden; }
.pl-hero .rband { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
/* الأطباق صفٌّ في أعلى الرأس والنصّ تحتها — كانت البيتزا تحت العنوان عند ٣٠٨.
   والطفو أبطأ (طلب المالك: «تبطئ شوي»). */
.pl-food { position: absolute; z-index: 1; width: 72px; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
  animation: fs-float 5.5s ease-in-out infinite; }
.pl-1 { left: 14px; top: 16px; }
.pl-2 { left: 92px; top: 40px; width: 58px; animation-delay: 1.8s; }
.pl-3 { left: 158px; top: 14px; width: 48px; animation-delay: 3.2s; }
.pl-text { position: absolute; z-index: 2; right: 18px; left: 18px; bottom: 22px; }
.pl-text h2 { margin: 0; font-size: 26px; font-weight: 800; }
.pl-text p { margin: 4px 0 0; font-size: var(--t-footnote); color: var(--text-muted); max-width: 190px; }

/* الحساب: رأسه نقش التصنيف */
.rprofile-cover { position: relative; overflow: hidden; background: #FBFBF8; }
.rprofile-cover .rband { position: absolute; inset: 0; }
.rprofile-cover > img { position: relative; z-index: 1; }

/* الطلبات: الكود تذكرةٌ ليمونيّة، والجديد يحمل حلقةً تنبض */
.order-code { display: inline-flex; align-items: baseline; gap: 6px; background: #C6F432; color: #16181A; padding: 3px 12px 4px;
  border-radius: 10px; font-size: 22px; letter-spacing: 1px;
  -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 5px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 5px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.order-code small { font-family: var(--font-ar); font-size: 11px; font-weight: 700; letter-spacing: 0; opacity: 0.7; }
.order-card:has(.status-pill.new) { box-shadow: 0 0 0 2px #FF6B3D, 0 10px 24px -12px rgba(255, 107, 61, 0.55); }
.order-card:has(.status-pill.new) .status-pill.new { animation: story-pulse 1.6s ease-in-out infinite; }
.status-pill.new { background: #FF6B3D; color: #fff; }
.status-pill.accepted { background: #FFE66B; color: #16181A; }
.status-pill.ready { background: #C6F432; color: #16181A; }

/* شريط التبويبات: الفعّال ليمونيّ لا رماديّ */
#main-tabbar button.active { background: #16181A; color: var(--lime); }

@media (prefers-reduced-motion: reduce) { .pl-food, .order-card .status-pill.new { animation: none; } }

/* المصغّر في عرض الصفوف ضيّق: الجملة تنزل سطرًا كاملًا لا كلمةً كلمة. */
.streak-mini { flex-wrap: wrap; border-radius: 14px; row-gap: 2px; }
.streak-mini-msg { white-space: nowrap; font-size: 11.5px; }


/* ═══ الفلاش على أصنافٍ مختارة ═══ */
.mitem.is-flash { box-shadow: inset 0 0 0 2px #FFD60A; background: linear-gradient(90deg, #FFFBE0, var(--surface) 55%); }
.mitem-flash-tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; background: #16181A; color: #FFD60A;
  font-size: 11px; font-weight: 800; padding: 1px 8px 2px; border-radius: 999px; transform: skewX(-8deg); }
.mitem-flash-tag svg { width: 7px; height: 11px; fill: #FFD60A; animation: bolt-zap 2.4s steps(1, end) infinite; }
.mitem-flash-price { color: #16181A; background: #FFD60A; padding: 0 5px; border-radius: 6px; }
.menu-flash { margin-bottom: 18px; padding: 10px; border-radius: var(--r-lg); background: #FFF8CC; }
.menu-flash-head { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; }
.menu-flash-head > b { background: #16181A; color: #FFD60A; font-weight: 800; padding: 2px 10px 3px; transform: skewX(-10deg); }
.menu-flash-head > span:not(.ob-timer) { font-size: var(--t-footnote); font-weight: 700; }
.menu-flash-head .ob-timer { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; background: #16181A;
  color: #FFD60A; border-radius: 999px; padding: 3px 10px 4px; font-size: 12px; font-weight: 800; }
.menu-flash-head .ob-timer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.citem-flash { background: #16181A; color: #FFD60A; }

/* اللوحة: شبكة اختيار أصناف الفلاش */
.flash-pick { margin: 10px 0 4px; padding: 12px; border-radius: var(--r-md); background: #FFF8CC; }
.flash-pick-title { font-weight: 800; font-size: var(--t-callout); margin-bottom: 10px; }
.flash-pick-title span { display: block; font-size: var(--t-footnote); font-weight: 600; color: var(--text-muted); }
.flash-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.flash-pick-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
  border: 2px solid transparent; border-radius: var(--r-md); background: #fff; font-family: inherit; cursor: pointer; }
.flash-pick-item img, .flash-pick-noimg { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.flash-pick-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; }
.flash-pick-price { font-size: 11px; color: var(--text-muted); }
.flash-pick-item.is-on { border-color: #16181A; background: #FFD60A; }
.flash-pick-item.is-on::after { content: "⚡"; position: absolute; top: 4px; left: 6px; font-size: 13px; }


/* ═══ لوحة المطعم — المنيو ═══ */
.pm-hero { position: relative; overflow: hidden; margin: 12px 0 8px; padding: 14px; border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 0 100%, rgba(198, 244, 50, 0.7), transparent 45%),
    linear-gradient(#E6E9E3 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #E6E9E3 1px, transparent 1px) 0 0 / 14px 14px, #FBFBF8;
  box-shadow: inset 0 0 0 1px var(--border-soft); }
.pm-hero > :not(img) { position: relative; z-index: 1; }
.pm-food { position: absolute; z-index: 0; width: 70px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.16));
  animation: fs-float 3.6s ease-in-out infinite; }
.pm-1 { left: 10px; top: 10px; }
.pm-2 { left: 70px; bottom: -8px; width: 56px; animation-delay: 1.4s; }
.pm-title { font-weight: 800; font-size: var(--t-heading); }
.pm-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 70%; }
.pm-stats span { background: #fff; border-radius: 999px; padding: 2px 10px 3px; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--border-soft); }
.pm-stats b { font-family: var(--font-num); margin-inline-end: 3px; }
.pm-stats .pm-warn { background: #FFE9DE; color: #B4491C; box-shadow: none; }
.pm-stats .pm-ok { background: #C6F432; box-shadow: none; }
.pm-tip { margin-top: 8px; font-size: var(--t-footnote); color: var(--text-muted); max-width: 70%; }
.pm-section { display: flex; align-items: center; gap: 8px; margin: 16px 2px 8px; font-weight: 800; }
.pm-section b { font-family: var(--font-num); font-size: 11px; background: #16181A; color: var(--lime); border-radius: 999px; padding: 1px 8px 2px; }
.menu-row-thumb { width: 56px; height: 56px; border-radius: 14px; }
.menu-row-thumb:not(.has-photo) { background: repeating-linear-gradient(135deg, #FFF1E7 0 6px, #FFE3D1 6px 12px); color: #B4491C; }
.menu-row-meta .num { background: #F3FBDD; color: #3E5410; font-weight: 800; padding: 0 6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .pm-food { animation: none; } }


/* ═══ تحميس المطعم على العروض (٢٠٢٦‑٠٩‑٢٨) ═══ */
.ob-food.is-dish { border-radius: 18px; object-fit: cover; aspect-ratio: 1; height: 96px; bottom: 12px; left: 10px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.35); filter: none; }
.rest-offer { margin: 0 0 14px; }
.rest-offer .offer-card.ob { width: 100%; flex: none; pointer-events: none; }
.po-reco { position: absolute; z-index: 7; top: 8px; right: 8px; background: #FF6B3D; color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 10px 4px; border-radius: 999px; transform: rotate(3deg); box-shadow: 0 3px 0 rgba(22,24,26,.2); animation: story-pulse 1.6s ease-in-out infinite; }
.po-pitch { display: grid; gap: 6px; margin: 0 0 10px; }
.pp-reco { background: #FFF1E7; color: #8A3A12; border-radius: 12px; padding: 8px 12px; font-size: var(--t-footnote); font-weight: 700; }
.pp-line { font-size: var(--t-footnote); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pp-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-deep, #0E5A70); }
.pp-line b { color: var(--text); font-family: var(--font-num); }
.pp-win { color: #3E5410; font-weight: 700; } .pp-win::before { background: #9CC21F; }
.pp-quick { justify-self: start; background: #16181A; color: var(--lime); border: none; border-radius: 999px; padding: 8px 16px; font-family: inherit;
  font-weight: 800; font-size: 13px; cursor: pointer; }
.pp-quick b { font-family: var(--font-num); }
.po-celebrate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(22,24,26,.35); animation: fade-in .2s ease both; }
.po-cel-card { position: relative; z-index: 2; background: #fff; border-radius: 22px; padding: 22px 24px; text-align: center; max-width: 300px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.4); animation: cel-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.po-cel-card b { display: block; font-size: 18px; font-weight: 800; margin: 6px 0 4px; }
.po-cel-card span { font-size: 13px; color: var(--text-muted); }
.po-cel-emoji { font-size: 42px; line-height: 1; }
.po-confetti i { position: fixed; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px;
  animation: confetti-fall 1.9s cubic-bezier(.3,.6,.4,1) var(--d) both; }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(var(--r)); } }
@keyframes cel-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .po-reco, .po-cel-card, .po-celebrate { animation: none; } }


/* ═══════════ جولة ملاحظات المالك (٢٠٢٦‑٠٩‑٢٩) ═══════════ */

/* ١ · زرّ الرجوع حبّةٌ زجاجية في كل شاشة — بخامة زرّ رأس المطعم نفسها.
   كان نصًّا رماديًّا عاريًا في صفحة العرض وشرح الستريك، وحبّةً في المطعم،
   فيُقرأ الاختلاف سهوًا. */
.btn-back:not(.rhead-pill) {
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
  margin-bottom: var(--s-5);
  border-radius: var(--r-full);
  border: 1px solid var(--glass-border);
  color: var(--action-ink);
  font-weight: 700;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--glass-bg-top) 76%, transparent) 0%,
    color-mix(in srgb, var(--glass-bg-bottom) 62%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-shadow);
}
.btn-back:not(.rhead-pill):hover { color: var(--text); }

/* ٢ · الفلاش أقوى: وهجٌ ينبض خلف الطبق، وبرقان، وشريط تحذير، وعدّادٌ أكبر */
.ob-fx { background: radial-gradient(120% 110% at 18% 60%, #FFF27A 0%, #FFD60A 42%, #FFB300 100%); }
.ob-flare { z-index: 1; left: -10px; top: 50%; width: 150px; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 35%, transparent 65%);
  animation: flare-pulse 1.8s ease-in-out infinite; }
@keyframes flare-pulse { 50% { transform: scale(1.12); opacity: 0.7; } }
.ob-hazard { z-index: 1; left: 0; right: 0; bottom: 0; height: 9px;
  background: repeating-linear-gradient(-45deg, #16181A 0 8px, transparent 8px 16px); }
.ob-fx .ob-bolt { width: 44px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); animation: bolt-strike 3s ease-in-out infinite; }
.ob-fx .ob-bolt2 { left: clamp(58px, 22cqi, 84px); top: auto; bottom: 14px; width: 22px; transform: rotate(-16deg); animation-delay: -1s; }
@keyframes bolt-strike { 0%, 70%, 100% { opacity: 1; scale: 1; } 74% { opacity: 0.2; scale: 1.18; } 78% { opacity: 1; scale: 1.08; } 82% { opacity: 0.35; } 86% { opacity: 1; scale: 1; } }
.ob-fx .ob-timer { font-size: 12.5px; padding: 3px 10px 4px; gap: 4px; box-shadow: 0 0 0 2px #FFD60A, 0 4px 10px -2px rgba(22, 24, 26, 0.45); }
.ob-fx .ob-title { font-size: clamp(19px, 8cqi, 28px); }
.ob-fx .ob-flash-tag { font-size: 13px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-bolt2 { display: none; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-flare { left: 50%; top: auto; bottom: -20px; translate: -50% 0; width: 90%; }

/* ٨ · أرقام العدّاد تتدحرج: الرقم الذي تغيّر وحده ينزل من فوق */
.ob-clock i { display: inline-block; font-style: normal; }
.ob-clock i.sep { animation: clock-blink 1s steps(1, end) infinite; }
.ob-clock i.roll { animation: clock-roll 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes clock-roll { from { transform: translateY(-80%); opacity: 0; } }
@keyframes clock-blink { 50% { opacity: 0.35; } }

/* ٤ · الجمعات: مائدةٌ زرقاء ونجمةٌ صفراء «خصم أكبر» */
.ob-bo { background: linear-gradient(135deg, #1D6FD8 0%, #3D8BFF 100%); color: #fff; }
.ob-confetti { z-index: 1; inset: 0; opacity: 0.35;
  background: radial-gradient(circle, #fff 1.3px, transparent 1.8px) 0 0 / 13px 13px;
  -webkit-mask: linear-gradient(270deg, transparent 35%, #000 100%); mask: linear-gradient(270deg, transparent 35%, #000 100%); }
.ob-table { z-index: 1; left: -30px; bottom: -34px; width: 210px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.ob-side { z-index: 2; left: 98px; bottom: -2px; height: 56px; width: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22)); }
.ob-bo-burst { z-index: 5; left: 82px; top: 6px; width: 54px; height: 54px; display: block; transform: rotate(-10deg);
  animation: burst-bob 2.6s ease-in-out infinite; }
.ob-bo-burst svg { display: block; width: 100%; height: 100%; fill: #FFD60A; }
.ob-bo-burst > span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05;
  font-size: 10.5px; font-weight: 800; color: #16181A; }
@keyframes burst-bob { 50% { transform: rotate(4deg) scale(1.06); } }
.ob-bo .ob-tag-blue { background: #fff; color: #1D6FD8; }
.ob-bo .ob-pill { background: #16181A; color: #fff; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-side { left: auto; right: 8%; height: 22%; bottom: 4px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-table { left: 50%; translate: -50% 0; width: 130%; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-bo-burst { left: 6px; top: auto; bottom: 36%; width: 46px; height: 46px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-bo-burst > span { font-size: 9px; }
@container (max-width: 260px) { .ob-side { left: 70px; height: 44px; } .ob-bo-burst { left: 56px; width: 44px; height: 44px; } .ob-bo-burst > span { font-size: 9px; } }
@container (max-width: 160px) { .ob-mosaic .offer-card.ob.ob-sq .ob-bo-burst, .ob-mosaic .offer-card.ob.ob-sq .ob-side { display: none; } }

/* ٧ · «50%» عملاقةٌ مكان «½» — أعرض، فأصغر قليلًا */
.ob-giant-half { font-size: 78px; letter-spacing: -3px; }
@container (max-width: 260px) { .ob-giant-half { font-size: 58px; } }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-giant-half { font-size: 52px; }
.ob-hx .ob-dot { font-size: 11px; line-height: 1.15; }

/* ٣ و٩ · حبّة العرض على البطاقة: صنفُ المطعم، ونسبة الخصم مكتوبة */
.rom-pct { margin-inline-start: 1px; background: #16181A; color: #fff; border-radius: 999px; padding: 0 6px 1px;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 800; line-height: 1.5; }
.rom-bo { background: #1D6FD8; color: #fff; }
.rom-fx .rom-pct, .rom-nx .rom-pct, .rom-fo .rom-pct, .rom-bo .rom-pct { background: #fff; color: #16181A; }

/* ٥ و٦ · ستوريات متنوّعة: هلالٌ نيونيّ، وبرق، وحبّتان، و50% */
.story-moon { position: absolute; inset: 0; display: grid; place-items: center; }
.story-moon svg { width: 56%; height: 56%; fill: #FF3EA5;
  filter: drop-shadow(0 0 3px #FF3EA5) drop-shadow(0 0 9px rgba(255, 62, 165, 0.75)); animation: moon-flick 3.4s steps(1, end) infinite; }
.story-moon i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #3DE8FF; box-shadow: 0 0 6px #3DE8FF;
  animation: star-tw 2.2s ease-in-out infinite; }
.story-moon i:nth-of-type(1) { top: 20%; right: 24%; }
.story-moon i:nth-of-type(2) { top: 58%; right: 16%; width: 3px; height: 3px; animation-delay: -0.8s; }
.story-moon i:nth-of-type(3) { top: 30%; right: 42%; width: 3px; height: 3px; animation-delay: -1.5s; }
@keyframes moon-flick { 0%, 88%, 100% { opacity: 1; } 90%, 94% { opacity: 0.4; } }
@keyframes star-tw { 50% { opacity: 0.15; transform: scale(0.5); } }
.story-bolt { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(115deg, rgba(22, 24, 26, 0.14) 0 3px, transparent 3px 11px); }
.story-bolt svg { width: 36%; height: 58%; fill: #16181A; stroke: #fff; stroke-width: 3; stroke-linejoin: round;
  transform: rotate(10deg); animation: bolt-strike 2s ease-in-out infinite; }
.story-pills { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.story-pills b { font-size: 12px; font-weight: 800; line-height: 1; padding: 3px 9px 5px; border-radius: 999px; background: #12A58B; color: #fff; }
.story-pills b:first-child { background: #FF7AD9; color: #FFE66B; transform: rotate(-7deg); }
.story-pills b:last-child { transform: rotate(4deg); }
.story-type.story-50.latin { color: #FF4F9A; font-size: 19px; letter-spacing: -1px; }

/* ٨ · «أقل من 15»: زمرّديٌّ سماويّ، والأرقام تتدحرج 15 ← 12 ← 9 */
.story-15 .u15-roll { position: relative; display: block; width: 100%; height: 26px; overflow: hidden; }
.story-15 .u15-roll b { position: absolute; inset: 0; text-align: center; color: #fff; font-size: 24px; line-height: 26px; opacity: 0;
  animation: u15-roll 4.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.story-15 .u15-roll b:nth-child(2) { animation-delay: 1.5s; }
.story-15 .u15-roll b:nth-child(3) { animation-delay: 3s; }
@keyframes u15-roll { 0% { transform: translateY(100%); opacity: 0; } 7%, 30% { transform: none; opacity: 1; } 37%, 100% { transform: translateY(-100%); opacity: 0; } }
.story-15 small { color: #D8F3EC; }

@media (prefers-reduced-motion: reduce) {
  .ob-flare, .ob-fx .ob-bolt, .ob-clock i, .ob-bo-burst, .story-moon svg, .story-moon i, .story-bolt svg, .story-15 .u15-roll b { animation: none; }
  .story-15 .u15-roll b:first-child { opacity: 1; }
}

/* ٣ · حبّة العرض صارت أعرض (بنسبتها)، فكانت تدفع «جاهز خلال» لسطرٍ وحدها.
   الترتيب الآن: المسافة والوقت سطرٌ، ثم العرض بجانب الدفع عند الاستلام. */
.rcard-facts .rom { order: 1; }
.rcard-facts .rcard-fact-pay { order: 2; }
.rcard-facts .rcard-fact-likes { order: 3; }

/* ستوري «أول طلب»: الحبّتان فوق شارة «الآن» لا تحتها */
.story-pills { justify-content: flex-start; padding-top: 16%; }
.story-pills b { font-size: 11px; padding: 3px 8px 4px; }

/* الجمعات: العنوان أبيض على الأزرق (.offer-card.ob يفرض الداكن بخصوصيةٍ أعلى) */
.offer-card.ob.ob-bo { color: #fff; }

/* ٧ · «50%» ملصقٌ أمام الطبق لا خلفه — خلفه كان الطبق يأكل الصفر.
   بحافّةٍ بيضاء كالملصق، مائلٌ قليلًا، بين الطبق والعنوان. */
.offer-card.ob .ob-giant-half { z-index: 3; left: clamp(58px, 20cqi, 76px); top: 8px; translate: none; font-size: 48px; letter-spacing: -2px;
  opacity: 1; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; transform: rotate(-8deg);
  filter: drop-shadow(0 4px 6px rgba(194, 24, 91, 0.25)); }
@container (max-width: 260px) { .offer-card.ob .ob-giant-half { left: 40px; font-size: 38px; } }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall) .ob-giant-half { left: 8px; top: auto; bottom: 34%; font-size: 40px; }
.ob-mosaic .offer-card.ob.ob-tall .ob-giant-half { bottom: 40%; font-size: 52px; }
.ob-mosaic .offer-card.ob:is(.ob-sq, .ob-tall).ob-hx .ob-dot { display: none; }
.story-pills { padding-top: 9%; gap: 2px; }
@container (max-width: 160px) { .ob-mosaic .offer-card.ob.ob-sq.ob-fx .ob-bolt { width: 20px; right: 6px; bottom: 16px; } }

/* «ما لقينا شيء»: عيونٌ تلتفت يمينًا ويسارًا كأنها تبحث معك (أصل المالك) */
.eyes-art { display: inline-grid; place-items: center; width: 112px; height: 112px; }
.eyes-art img { width: 100%; height: auto; animation: eyes-look 3.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes eyes-look { 0%, 18%, 100% { transform: none; } 28%, 44% { transform: translateX(-7px) rotate(-5deg); } 56%, 72% { transform: translateX(7px) rotate(5deg); } 84% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .eyes-art img { animation: none; } }


/* ═══════════ جولة «كيف يشتغل سافيو» — أُعيدت كاملةً (٢٠٢٦‑٠٩‑٢٩) ═══════════
   ستّ شرائح كالقصص: أرضٌ كاملة بلون العرض، ومسرحٌ في الوسط، والنصّ تحته،
   والفعل في الأسفل. المسرح يتقلّص بالارتفاع (clamp على vh) فيسع ٣٠٨×٦٥٠. */
.tour {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  --ink: #16181A; --muted: rgba(22, 24, 26, 0.62); color: var(--ink); background: var(--ground, #FBFBF8);
}
.tour-paper { --ground: #FBFBF8;
  background:
    radial-gradient(70% 45% at 85% 0, rgba(198, 244, 50, 0.5), transparent 70%),
    linear-gradient(#E9ECE5 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, #E9ECE5 1px, transparent 1px) 0 0 / 18px 18px, #FBFBF8; }
.tour-ink { --ground: #16181A; --ink: #fff; --muted: rgba(255, 255, 255, 0.66); }
.tour-sky { --ground: #EAF6F3; --ink: #0E3F4E; --muted: rgba(14, 63, 78, 0.7);
  background: radial-gradient(circle, rgba(14, 90, 112, 0.16) 1.3px, transparent 1.8px) 0 0 / 14px 14px, #EAF6F3; }
.tour-navy { --ground: #1D2A4D; --ink: #fff; --muted: rgba(255, 255, 255, 0.7);
  background: radial-gradient(90% 60% at 50% 30%, #2C3F70, #1D2A4D 70%); }
.tour-warm { --ground: #FFF1E8; --muted: rgba(22, 24, 26, 0.64);
  background: radial-gradient(80% 50% at 50% 28%, #FFE1CC, #FFF1E8 70%); }

/* الأشرطة: الحالية تمتلئ بمدّة الشريحة، والضغط المطوّل يوقفها */
.tour-bars { display: flex; gap: 4px; direction: rtl; }
.tour-bars i { flex: 1; height: 3px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.tour-bars b { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: right; transform: scaleX(0); }
.tour-bars .done b { transform: none; }
.tour-bars .now b { animation: tour-fill var(--tour-ms) linear forwards; }
.tour.is-paused .tour-bars .now b, .tour.is-paused .tour-stage * { animation-play-state: paused !important; }
.tour.is-still .tour-bars .now b { animation: none; transform: scaleX(0.5); }
@keyframes tour-fill { to { transform: none; } }

.tour-skip { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 20px); left: 14px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 6px; min-height: 44px; cursor: pointer; }
.tour-tap { position: absolute; z-index: 2; top: 64px; bottom: 96px; width: 50%; border: 0; background: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.tour-tap:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; border-radius: 16px; }
.tour-tap-next { left: 0; }
.tour-tap-prev { right: 0; }

.tour-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: clamp(14px, 3vh, 26px); pointer-events: none; animation: tour-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(12px); } }
.tour-text { text-align: center; max-width: 34ch; }
.tour-text h2 { margin: 0 0 8px; font-size: clamp(22px, 7vw, 28px); font-weight: 800; line-height: 1.25; text-wrap: balance; color: var(--ink); }
.tour-text p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

.tour-actions { position: relative; z-index: 3; display: flex; gap: 10px; }
.tour-actions > :last-child { flex: 1; }
.tour-next, .tour-back { min-height: 52px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tour-next { border: 0; background: var(--ink); color: var(--ground); }
.tour-back { padding: 0 20px; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); background: none; color: var(--ink); }
.tour-actions .cta { margin: 0; min-height: 52px; }

/* ١ · الترحيب: الاسم وضربة الفرشاة تتبدّل خلفه، والأطباق تطفو حوله */
.th { position: relative; width: min(100%, 360px); height: clamp(230px, 42vh, 330px); display: grid; place-items: center; }
.th-mark { position: relative; display: grid; place-items: center; width: 74%; aspect-ratio: 5 / 2; }
.th-strokes { position: absolute; inset: 0; }
.th-strokes i { position: absolute; inset: 0; opacity: 0; animation: th-swap 3.2s steps(1, end) infinite; }
.th-strokes i:nth-child(2) { animation-delay: 0.8s; }
.th-strokes i:nth-child(3) { animation-delay: 1.6s; }
.th-strokes i:nth-child(4) { animation-delay: 2.4s; }
.th-strokes svg { width: 100%; height: 100%; }
@keyframes th-swap { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.th-mark b { position: relative; direction: ltr; font-family: 'Bagel Fat One', cursive; font-weight: 400; font-size: clamp(46px, 16vw, 70px);
  line-height: 1; color: #fff; letter-spacing: -0.01em; text-shadow: 0 3px 0 rgba(22, 24, 26, 0.18); -webkit-text-stroke: 1.5px #16181A;
  paint-order: stroke fill; }
.th-food { position: absolute; width: clamp(70px, 23vw, 104px); height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.18));
  animation: th-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both, th-float 7s ease-in-out infinite; }
.th-f1 { top: 0; right: 4%; animation-delay: 0.2s, 0s; }
.th-f2 { top: 2%; left: 2%; animation-delay: 0.5s, -1s; }
.th-f3 { top: 40%; right: -4%; width: clamp(56px, 18vw, 82px); animation-delay: 0.8s, -2s; }
.th-f4 { bottom: 0; left: 6%; animation-delay: 1.1s, -3s; }
.th-f5 { bottom: 2%; right: 12%; animation-delay: 1.4s, -1.5s; }
.th-f6 { top: 38%; left: -4%; width: clamp(56px, 18vw, 82px); animation-delay: 1.7s, -2.5s; }
@keyframes th-pop { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } }
@keyframes th-float { 50% { translate: 0 -9px; rotate: 4deg; } }

/* ٢ · السعر: ثلاث كلماتٍ عملاقة، وملصقاتٌ فوقها */
.tp { position: relative; width: min(100%, 360px); height: clamp(250px, 44vh, 340px); }
.tp-giant { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 0.92;
  font-family: 'Lalezar', var(--font-ar); color: #fff; font-size: clamp(64px, 24vw, 104px); }
.tp-giant span:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.tp-burst { position: absolute; top: 2%; left: 0; width: 92px; height: 92px; transform: rotate(-12deg); animation: tp-slap 0.7s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tp-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #FF6B3D; }
.tp-burst > span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.15; color: #16181A; }
.tp-tag { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 9px 14px 10px; border-radius: 14px; font-size: 12px; font-weight: 700;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.5); }
.tp-tag b { font-family: var(--font-num); font-size: 26px; font-weight: 800; line-height: 1.05; }
.tp-tag small { font-size: 10px; opacity: 0.7; }
.tp-bad { top: 36%; right: 0; background: #fff; color: #16181A; transform: rotate(5deg); animation: tp-slap 0.7s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tp-bad b { color: #D93A1C; text-decoration: line-through 3px; }
/* الليمونيّ هنا لحظة توفيرٍ فعلًا: رقم سافيو. */
.tp-good { bottom: 4%; left: 6%; background: #C6F432; color: #16181A; transform: rotate(-5deg); animation: tp-slap 0.7s 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes tp-slap { from { opacity: 0; scale: 1.8; } }

/* ٣ · الخطوات: ملصقاتٌ تُلصق واحدًا بعد الآخر */
.tk { position: relative; width: min(100%, 340px); height: clamp(250px, 44vh, 330px); }
.tk-s { position: absolute; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 0 0 4px #fff, 0 12px 20px -8px rgba(14, 63, 78, 0.45); animation: tp-slap 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tk-s b { font-family: var(--font-num); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: #16181A; font-size: 13px; }
.tk-1 { top: 2%; right: 4%; padding: 14px 22px; border-radius: 50%; background: #12A58B; color: #fff; transform: rotate(-6deg); animation-delay: 0.3s; }
.tk-2 { top: 30%; left: 0; padding: 12px 18px; border-radius: 10px; background: #FF4F9A; color: #fff; transform: rotate(5deg); animation-delay: 1s;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  box-shadow: none; }
.tk-3 { bottom: 4%; right: 8%; width: 150px; height: 150px; box-shadow: none; transform: rotate(-8deg); animation-delay: 1.7s; }
.tk-3 svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #1D6FD8; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 10px 12px rgba(14, 63, 78, 0.35)); }
.tk-3 > span { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #fff;
  font-size: 13.5px; line-height: 1.2; white-space: normal; }
.tk-4 { bottom: 34%; left: 6%; padding: 8px 12px; border-radius: 12px; background: #fff; color: #0E3F4E; font-size: 12px; transform: rotate(-4deg);
  animation-delay: 2.4s; flex-direction: column; gap: 0; }
.tk-4 b { width: auto; height: auto; border-radius: 0; background: none; font-size: 22px; letter-spacing: 2px; }

/* ٤ · العروض: البنرات الحقيقية تتراكم ملصقاتٍ */
.tour .to-pile { position: relative; display: block; width: min(100%, 360px); height: clamp(270px, 46vh, 360px); margin: 0; }
.to-card { position: absolute; width: 50%; aspect-ratio: 1 / 1.02; animation: to-slap 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tour .to-pile .offer-card.ob { width: 100%; height: 100%; box-shadow: 0 0 0 3px #fff, 0 14px 26px -10px rgba(0, 0, 0, 0.6); pointer-events: none; }
.to-c1 { top: 0; right: 0; rotate: 5deg; animation-delay: 0.25s; }
.to-c2 { top: 4%; left: 0; rotate: -7deg; animation-delay: 0.9s; }
.to-c3 { top: 30%; right: 22%; rotate: -2deg; animation-delay: 1.55s; }
.to-c4 { bottom: 0; left: 2%; rotate: 6deg; animation-delay: 2.2s; }
.to-c5 { bottom: 2%; right: 0; rotate: -5deg; animation-delay: 2.85s; }
@keyframes to-slap { from { opacity: 0; scale: 1.7; translate: 0 -20px; } }

/* ٥ · الستريك: الأختام، ثم الوجبة المجانية تقفز */
.ts { position: relative; width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ts-card { width: 100%; }

/* ٦ · البداية: أصناف الحيّ تدور حول دبّوس */
.tg { position: relative; width: clamp(230px, 70vw, 300px); aspect-ratio: 1; }
.tg-ring { position: absolute; inset: 0; animation: tg-spin 70s linear infinite; }
.tg-ring img { position: absolute; top: 50%; left: 50%; width: 22%; height: auto; margin: -11% 0 0 -11%;
  transform: rotate(var(--a)) translateY(-205%) rotate(calc(-1 * var(--a))); }
.tg-ring img { animation: tg-counter 70s linear infinite; }
@keyframes tg-spin { to { rotate: 360deg; } }
@keyframes tg-counter { to { rotate: -360deg; } }
.tg-pin { position: absolute; top: 50%; left: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center;
  border-radius: 50%; background: #C6F432; box-shadow: 0 0 0 10px rgba(198, 244, 50, 0.3), 0 0 0 22px rgba(198, 244, 50, 0.14); }
.tg-pin svg { width: 52%; height: 52%; fill: #16181A; animation: tg-bob 2s ease-in-out infinite; }
@keyframes tg-bob { 50% { translate: 0 -5px; } }

@media (prefers-reduced-motion: reduce) {
  .tour-stage, .tour-stage *, .tour-stage *::before { animation: none !important; }
  .th-strokes i:first-child { opacity: 1; }
}

/* ── الجولة حيّةٌ في كل شريحة (طلب المالك: «مابيه صامت») ── */
.th-spark { position: absolute; width: 18px; height: 18px; background: #16181A; z-index: 2;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: th-tw 1.8s ease-in-out infinite; }
.th-s1 { top: 30%; right: 18%; } .th-s2 { bottom: 30%; left: 20%; width: 12px; height: 12px; animation-delay: -0.6s; background: #FF3EB5; }
.th-s3 { top: 22%; left: 34%; width: 10px; height: 10px; animation-delay: -1.2s; background: #35C83A; }
@keyframes th-tw { 50% { transform: scale(0.3) rotate(45deg); opacity: 0.4; } }

.tp-dish { position: absolute; z-index: 0; bottom: 14%; right: -8%; width: 46%; height: auto; opacity: 0.95; rotate: -10deg;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5)); animation: th-pop 0.9s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, th-float 7s ease-in-out 1.2s infinite; }
.tp-giant { z-index: 1; }
.tp-tag, .tp-burst { z-index: 2; }
.tp-bad b { position: relative; text-decoration: none; }
.tp-strike { position: absolute; left: -4%; right: -4%; top: 52%; height: 3px; border-radius: 2px; background: #D93A1C; transform-origin: right;
  animation: tp-strike 0.6s 2s ease-out both; }
@keyframes tp-strike { from { transform: scaleX(0); } }

.tk-food { position: absolute; z-index: 0; height: auto; filter: drop-shadow(0 10px 12px rgba(14, 63, 78, 0.3)); animation: th-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, th-float 5s ease-in-out infinite; }
.tk-f1 { width: 30%; top: 12%; left: 8%; animation-delay: 0.9s, -1s; }
.tk-f2 { width: 26%; bottom: 0; left: 30%; animation-delay: 1.2s, -2.5s; }
.tk-s { z-index: 1; }
.tk-code { display: inline-flex; overflow: hidden; }
.tk-code i { font-style: normal; display: inline-block; animation: tk-roll 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(2.8s + var(--i) * 0.2s); }
@keyframes tk-roll { from { transform: translateY(-100%); opacity: 0; } }

/* الأختام تُطبع واحدًا بعد الآخر، ثم الوجبة تقفز والحلويات تتطاير */
.ts .stamp.is-on { animation: ts-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ts .stamp.is-on:nth-child(1) { animation-delay: 0.3s; } .ts .stamp.is-on:nth-child(2) { animation-delay: 0.75s; }
.ts .stamp.is-on:nth-child(3) { animation-delay: 1.2s; } .ts .stamp.is-on:nth-child(4) { animation-delay: 1.65s; }
@keyframes ts-stamp { from { opacity: 0; transform: scale(2) rotate(-25deg); } }

/* الخطوات: الكود أفقيّ في الركن، والطبقان في الفراغين — لا يغطّي شيءٌ «اطلب» */
.tk-4 .tk-code { display: inline-flex; width: auto; height: auto; border-radius: 0; background: none; }
.tk-4 { bottom: 2%; left: 0; top: auto; }
.tk-f1 { width: 26%; top: 2%; left: 4%; bottom: auto; }
.tk-f2 { width: 22%; top: 26%; right: 6%; left: auto; bottom: auto; }

/* ═══ لوحة المطعم — بيانات المطعم: التصنيف بطاقاتٌ بصورها، والساعات بمسبقات ═══ */
.pcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.pcat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; padding: 7px 3px 6px; border: 1.5px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pcat img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.14)); }
.pcat span { line-height: 1.25; text-align: center; }
.pcat:active { transform: scale(0.96); }
.pcat.is-on { border-color: #16181A; background: #EAF6F3; box-shadow: 0 0 0 1.5px #16181A inset; }
.hours-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hours-preset { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.hours-preset:active { background: #EAF6F3; }
@media (prefers-reduced-motion: reduce) { .pcat { transition: none; } }


/* ═══════════ لوحة المندوب بلغة سافيو الجديدة (٢٠٢٦‑٠٩‑٣٠) ═══════════ */
.ag-hero { position: relative; margin: 4px 0 14px; padding: 16px; border-radius: var(--r-lg); color: #16181A; overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(198, 244, 50, 0.7), transparent 48%),
    linear-gradient(#E6E9E3 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #E6E9E3 1px, transparent 1px) 0 0 / 14px 14px, #FBFBF8;
  box-shadow: inset 0 0 0 1px var(--border-soft); }
.ag-hero h2 { margin: 0; font-size: var(--t-title); font-weight: 800; }
.ag-hero p { margin: 6px 0 0; font-size: var(--t-footnote); color: var(--text-muted); line-height: 1.7; }
.ag-hero-mark { width: 44px; height: 44px; object-fit: contain; margin-bottom: 8px; }
.ag-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ag-stats > div { background: #fff; border-radius: 14px; padding: 10px 8px 9px; text-align: center; box-shadow: inset 0 0 0 1px var(--border-soft); min-width: 0; }
.ag-stats b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.ag-stats span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.ag-stats > div:last-child { background: #16181A; color: #fff; box-shadow: none; }
.ag-stats > div:last-child span { color: rgba(255, 255, 255, 0.7); }
.ag-stickers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ag-st { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 13px 8px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 8px 14px -8px rgba(22, 24, 26, 0.4); animation: ag-slap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ag-st b { font-family: var(--font-num); font-size: 17px; }
.ag-st-1 { background: #12A58B; transform: rotate(-3deg); animation-delay: 0.15s; }
.ag-st-2 { background: #FF4F9A; transform: rotate(2deg); animation-delay: 0.4s; }
@keyframes ag-slap { from { opacity: 0; scale: 1.6; } }

/* بطاقة المطعم: رأسٌ بنقش تصنيفه (أو غلافه) وشعارٌ دائريّ فوقه */
.ag-card { padding-top: 0; overflow: hidden; }
.ag-card-band { position: relative; height: 64px; margin: 0 -14px 26px; }
.ag-card-band .rband { position: absolute; inset: 0; }
.ag-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-card-logo { position: absolute; bottom: -22px; right: 14px; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 4px 10px -3px rgba(0, 0, 0, 0.25); color: var(--text-muted); }
.ag-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.ag-card-band .status-pill { position: absolute; top: 10px; left: 12px; }
.ag-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: var(--t-footnote); color: var(--text-muted); font-weight: 600; }
.ag-facts span { display: inline-flex; align-items: center; gap: 4px; }
.ag-facts svg { flex: none; }
.ag-facts b { color: var(--text); font-weight: 800; }
.ag-complete { display: flex; gap: 4px; margin: 10px 0 6px; direction: rtl; }
.ag-complete i { flex: 1; height: 5px; border-radius: 99px; background: var(--border); }
.ag-complete i.on { background: #12A58B; }
/* الأيقونة بجانب نصّها لا فوقه — كانت تنكسر سطرًا في أسطر البطاقة */
.ag-card .info-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ag-card .info-row-meta svg { flex: none; }
.info-row-amount b { font-size: 1.05em; }

@media (prefers-reduced-motion: reduce) { .ag-st { animation: none; } }

/* الوجبة المجانية: لوحة «اختر وجبتك» — أربع وجباتٍ ملصقاتٍ كبيرة، وختمٌ بينها */
.ts-board { position: relative; width: min(100%, 330px, 40vh); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-pick { position: relative; margin: 0; aspect-ratio: 1 / 0.92; border-radius: 18px; background: var(--bg); display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 12px 20px -10px rgba(140, 60, 20, 0.35); animation: to-slap 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ts-pick img { width: 80%; height: 76%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18)); }
.ts-pick figcaption { position: absolute; bottom: 7px; right: 9px; background: #fff; color: #16181A; font-size: 12px; font-weight: 800;
  padding: 2px 10px 4px; border-radius: 999px; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
.ts-p1 { rotate: -4deg; animation-delay: 1.9s; }
.ts-p2 { rotate: 3deg; animation-delay: 2.3s; }
.ts-p3 { rotate: 2deg; animation-delay: 2.7s; }
.ts-p4 { rotate: -3deg; animation-delay: 3.1s; }
.ts-burst { position: absolute; z-index: 3; top: 50%; left: 50%; width: 84px; height: 84px; translate: -50% -50%; rotate: -12deg;
  display: grid; place-items: center; animation: ts-stamp 0.6s 3.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ts-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #C6F432; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
.ts-burst b { position: relative; font-size: 15px; font-weight: 800; color: #16181A; }

/* حذف الحساب (تطبيق المتجر وحده — ق‑٥): زرٌّ هادئ في «حسابي»، والتأكيد في ورقة */
.acct-danger { margin-top: 10px; }
.acct-danger .account-link span { color: var(--danger); }
.sheet-text { margin: 0 0 14px; font-size: var(--t-callout); line-height: 1.8; color: var(--text); }
.btn-danger { width: 100%; min-height: 52px; border: 0; border-radius: var(--r-full); background: var(--danger); color: #fff;
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.btn-danger:disabled { opacity: 0.6; }

/* عملاء عرض الوجبة المجانية — من استحقّ ومن في الطريق (لوحة المطعم). */
.fm-list { margin-top: 10px; border-radius: var(--r-sm); background: var(--surface-2); padding: var(--s-4) var(--s-6); }
.fm-list summary { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-4); align-items: center; cursor: pointer; font-size: var(--t-footnote); min-height: 44px; list-style: none; }
.fm-title { font-weight: 700; }
.fm-list summary::-webkit-details-marker { display: none; }
/* سهمٌ متناظر، فالحدود الفيزيائية هنا لا تخالف RTL: لأسفل مغلقًا، لأعلى مفتوحًا. */
.fm-list summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; margin-block-end: 3px; }
.fm-list[open] summary::after { transform: rotate(-135deg); margin-block: 3px 0; }
.fm-count { grid-column: 1; color: var(--text-muted); font-size: var(--t-caption); }
.fm-group { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-caption); color: var(--text-muted); font-weight: 700; }
.fm-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--border); font-size: var(--t-footnote); }
.fm-phone { font-weight: 700; letter-spacing: .02em; }
.fm-info { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fm-info b { color: var(--text); }
.fm-dots { display: inline-flex; gap: 3px; }
.fm-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.fm-dots span.on { background: var(--emerald); }

/* مهلة الدفعة في بطاقة الستريك — صغيرةٌ هادئة، تنبيهٌ لا إنذار. */
.streak-due { margin-top: var(--s-3); font-size: var(--t-caption); color: var(--text-muted); text-align: center; }

/* «تحتاج متابعة» في لوحة المندوب — نفس قائمة لوحة المطعم، وأسبابٌ بحبوب. */
.ag-follow { margin-bottom: var(--s-6); background: var(--surface); border: 1px solid var(--border); }
.ag-reason { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: var(--t-caption); color: var(--text); }

/* مربّع الموافقة على الاتفاقية — هدف لمسٍ كامل السطر. */
.terms-check { display: flex; align-items: flex-start; gap: var(--s-4); margin: var(--s-6) 0; min-height: 44px; font-size: var(--t-footnote); line-height: 1.6; cursor: pointer; }
.terms-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--emerald); }
.terms-check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ag-terms { margin-bottom: var(--s-6); }

/* «رجوع» وزرّ السلّة: ‎40‎ و‎35‎ بكسلًا رأسيًّا — مقيسةً بجسّ النقاط لا
   بالصندوق (فحص الأجهزة ٢٠٢٦‑١٠‑٠٣). نفس طبقة اللمس الشفّافة أعلاه: الشكل
   بمقاسه، والإصبع يصيب ‎46‎. */
.btn-back,
.cart-button { position: relative; }
.btn-back::after,
.cart-button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  height: max(100%, 46px);
  z-index: 2;
}

/* رصيف رأس المطعم يتبع عمود التطبيق (‎480‎) على الشاشات العريضة — على
   الآيباد كان «رجوع» و«تابع» عند حافّتي الشاشة والمحتوى في الوسط (فحص
   الأجهزة ٢٠٢٦‑١٠‑٠٣). على الجوال لا فرق: العمود أعرض من الشاشة. */
.rhead-dock { max-width: 480px; margin-inline: auto; }