/* فلافل هِبه — واجهة الطلب
 *
 * الألوان مقيسة من مواد العميل، لا مختارة بالذوق (reference/brand.md):
 * البرتقالي من غلاف المنيو الرسمي، والعناب من كلمة «هِبه» في اللوقو.
 * البرتقالي على الأبيض 3.51:1، أي دون AA للنص الصغير، فهو للأسطح والأزرار
 * والعناوين الكبيرة فقط، والنص الأساسي عناب (10.45:1)، والسعر الصغير
 * يستعمل الدرجة الأغمق --flame (5.28:1).
 */

@font-face { font-family: "Baloo"; src: url("../fonts/baloo-800-arabic.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Baloo"; src: url("../fonts/baloo-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2212; }
@font-face { font-family: "Baloo"; src: url("../fonts/baloo-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Baloo"; src: url("../fonts/baloo-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2212; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-400-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2212; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2212; }

:root {
  --orange: #EE5531;
  --flame: #C23D1E;
  --ink: #6F2443;
  --ink-soft: #8A5068;
  --cream: #FDF6EE;
  --white: #FFFFFF;
  --line: #F0DFD2;

  --font-display: "Baloo", system-ui, sans-serif;
  --font-body: "Almarai", system-ui, sans-serif;

  --r-card: 18px;
  --r-img: 16px;
  --r-pill: 999px;
  --r-btn: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --fast: 140ms;
  --base: 240ms;

  --head-h: 62px;
  --shadow: 0 2px 10px rgba(111, 36, 67, 0.07);
  --shadow-lift: 0 10px 28px rgba(111, 36, 67, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== سلاسة التجربة ===== */

/* الانتقال بين الرئيسية والمنيو يذوب بدل أن يومض أبيض. سطر واحد يكفي في
   المتصفحات التي تدعمه، ويتجاهله غيرها بلا ضرر */
@view-transition { navigation: auto; }

/* وميض رمادي عند كل لمسة على الجوال يجعل الموقع يبدو قديماً. يُلغى،
   ويبقى :active و:focus-visible هما ردّ الفعل المرئي */
a, button, .card, .addon, .hcat { -webkit-tap-highlight-color: transparent; }

/* تمرير داخل لوح مفتوح لا يجرّ الصفحة تحته عند بلوغ طرفه */
.sheet__body, .catbar__scroll { overscroll-behavior: contain; }

/* الصورة تظهر بذوبان بدل أن تقفز حين تكتمل */
.card__pic img, .line__pic img { animation: imgIn 320ms var(--ease-out) both; }
@keyframes imgIn { from { opacity: 0; } to { opacity: 1; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.7 var(--font-body);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.25; margin: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* الهيدر وشريط الأقسام كلاهما ملتصق، فالقفز إلى قسم يجب أن يقف تحتهما
   معاً لا تحت الهيدر وحده، وإلا غطّى الشريط عنوان القسم */
main section[id], .menu__sec { scroll-margin-top: calc(var(--head-h) + 118px); }

.skip {
  position: fixed; inset-inline-start: 50%; top: -100px; transform: translateX(50%);
  z-index: 60; background: var(--ink); color: var(--white);
  padding: 10px 18px; border-radius: var(--r-pill);
}
.skip:focus-visible { top: 10px; }

/* ===== الهيرو: يملأ الشاشة، والطلب يصل فيه ساخناً =====
 *
 * لا صفحة تحميل ولا غلاف قبله: **المشهد نفسه هو الافتتاحية**. أول ما
 * تُفتح الصفحة لا شيء إلا الحقل البرتقالي والمشهد في وسط الشاشة أكبر من
 * مقاسه (FLIP: يُقاس موضعه النهائي ويُنقل إلى المركز بـtransform وحده)،
 * والهيدر فارغ والنصّ غائب. القصة بثلاث مراحل: **تمهيد** خيطا بخار
 * يصعدان ببطء ويشتعل ضوء المكان، **الحدث** ومضة ثم انفجار بخار تطلع منه
 * الأصناف من العمق وتهبط بانضغاط ويتناثر فتات وينفض غبار الأرض ويُصدم
 * اللوقو إلى الهيدر، ثم **الموقع يتفتّح حول الطبق**: المشهد ينزلق إلى
 * مقعده (الكاميرا تبتعد)، الكلمات تُطبع فوقه، الأزرار تصعد من تحته،
 * والشريط يطلّ. شخصية الحركة واحدة: مرحة مندفعة، ارتداد على الوصول
 * (--ease-pop) وتباطؤ ناعم على الاستقرار (--ease-out).
 *
 * الجوال هو الأساس: النصّ فوق، والأكل كبيراً يعبر الحواف في الوسط،
 * والزرّ في منطقة الإبهام تحت. الشاشة العريضة عمودان.
 *
 * الأبيض على البرتقالي 3.51:1، أي يجتاز AA للنصّ الكبير وحده. فالعنوان
 * والعين الصغيرة فوقه لا ينزلان تحت 19px عريض، وكل معلومة صغيرة تُوضع
 * في رقاقة بيضاء بنصّ عنابي (10.45:1) لا على الأرضية البرتقالية.
 */

.hero {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "text" "art" "actions";
  /* يملأ ما تحت الهيدر ناقص طرفٍ من شريط الأقسام يطلّ أسفله، فيُعرف أن
     ثمّة مزيداً بلا سهم متحرّك ولا عبارة «مرّر للأسفل» */
  min-height: calc(100vh - var(--head-h) - 54px);
  min-height: calc(100svh - var(--head-h) - 54px);
  padding: 16px 18px 18px;
  background: var(--orange);
  color: var(--white);
  /* الاستدارة انتقلت إلى قاطع الشرائط تحته: هو الآن حافّة الهيرو السفلى،
     فلو بقيت هنا ظهر نتوءٌ بين حافّة مستديرة وشريطٍ مستقيم */
  border-radius: 0;
}
/* ضوء المكان: بقعة دافئة في الوسط وحوافّ أغمق قليلاً، فالبرتقالي المصمت
   يصير مسرحاً مضاءً لا لوناً مسطّحاً. طبقة واحدة تُرسم مرة، وتشتعل
   (opacity) مع الومضة في الافتتاح: «الأنوار تشتغل» */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 62% at 50% 46%, rgba(255, 218, 176, 0.26), rgba(255, 218, 176, 0) 62%),
    radial-gradient(150% 110% at 50% 50%, rgba(120, 22, 0, 0) 56%, rgba(120, 22, 0, 0.2) 100%);
  pointer-events: none;
  will-change: opacity;
}
.hero__text { grid-area: text; position: relative; z-index: 1; }
/* min-height: 0 كي يقبل صفّ 1fr الانكماش دون محتواه */
.hero__art { grid-area: art; position: relative; z-index: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.hero__actions { grid-area: actions; position: relative; z-index: 1; padding-top: 10px; }

.hero__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  opacity: 0.92;
}
.hero h1 { margin: 0; font-size: clamp(31px, 9vw, 54px); line-height: 1.14; letter-spacing: -0.01em; }

/* الكلمة في حاضن يقصّها فتصعد من تحت خطّ السطر كأنها تُطبع. الحشو الرأسي
   بهوامش سالبة: بدونه تقصّ الحواف حروف النزول وعلامات الشدّة، ويقصّ
   الحافة العليا الارتداد لحظة تجاوز الكلمة موضعها */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.14em 0.04em; margin: -0.14em -0.04em; }
.w i { display: inline-block; font-style: normal; will-change: transform; }
/* الكلمة التي فيها الطوق أعلى من سطرها، فحاضنها القاصّ يحتاج حشواً
   رأسياً أكبر وإلا قصّ حافتَي الدائرة */
.w--ring { padding-block: 0.34em; margin-block: -0.34em; }

/* «18» في طوق: الرقم هو الادّعاء في السطر، فيُعطى شكلاً يُرى قبل أن
   يُقرأ. حجم الرقم 0.82em كي يبقى قطر الطوق (1.42 × 0.82 ≈ 1.17em)
   قريباً من ارتفاع السطر فلا ينتفخ السطر حوله. وtnum: أرقام بعرض
   واحد، فالطوق يبقى دائرة لا بيضة */
.ring {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.42em; height: 1.42em; padding: 0 0.1em;
  border: 0.085em solid currentColor; border-radius: 50%;
  font: inherit; font-size: 0.82em; line-height: 1;
  vertical-align: 0.05em;
  font-feature-settings: "tnum";
}

/* علامة التسجيل: صغيرة مرفوعة وبشفافية خفيفة، فهي توثيق لا عنصر تصميم.
   line-height: 0 يمنعها من توسيع ارتفاع السطر الذي فيه */
.reg {
  font-size: 0.8em; font-weight: 700; line-height: 0;
  vertical-align: 0.42em; margin-inline-start: 0.14em;
  opacity: 0.85;
}

.hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hero__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--white); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  white-space: nowrap;
}
.hero__chip svg { flex: none; color: var(--flame); }
.hero__chip--star svg { color: #E8A33D; }
/* أخضر «فلافل» من اللوقو المعتمد (#799765)، مغمَّقاً إلى 3:1 على الأبيض
   كما تطلب WCAG للعناصر غير النصّية */
.hero__chip--syria svg { color: #5F7A4E; }

/* الزرّ بعرض الشاشة في منطقة الإبهام: على الجوال آخر ما في الهيرو */
.hero__cta { display: flex; width: 100%; margin-top: 12px; }
.hero .btn { background: var(--white); color: var(--flame); }
.hero .btn:hover { background: var(--cream); }

/* ===== المشهد: دخانٌ تطلع منه الأصناف ===== */

/* داخل حدود الجوال بهوامش: 88% من العرض وسقفٌ من ارتفاع الشاشة (46svh
   عرضاً، أي 41svh ارتفاعاً). النسخة السابقة كانت أعرض من الشاشة (118%)
   فتعبر الحواف، ورآها يوسف على جواله «كبيرة وشكلها غبي». الأكل المقصوص
   عند الحافة يُقرأ ملصقاً لا طبقاً. والقيد بـsvh لا cqh: كروم iOS أسقط
   cqh وترك العرض بلا سقف فنزل الأكل على الرقاقات */
/* صفّان من الأكل لا صفّ واحد، فالمشهد أطول قليلاً من عرضه. و`max-height`
   شبكة أمان: على شاشة قصيرة يضيق صفّ 1fr فينكمش المشهد بعرضه محافظاً
   على نسبته، بدل أن يفيض ويُقصّ بـoverflow: hidden في الهيرو */
.serve { position: relative; width: min(88%, 46svh, 400px); max-height: 100%; aspect-ratio: 1 / 1.06; will-change: transform; }

/* بقعة ضوء دافئة خلف الأكل: تسخّن البرتقالي المصمت وتقول إن هناك شيئاً
   مضاءً، وتتنفّس ببطء بعد الوصول */
.serve__spot {
  position: absolute; left: 50%; top: 60%;
  width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 170, 0.34), rgba(255, 214, 170, 0.1) 40%, rgba(255, 214, 170, 0) 70%);
  opacity: 0;
  animation: breathe 6400ms ease-in-out 2400ms infinite;
}

/* ظلّ يُجلس الأكل على أرض: يتّسع لحظة هبوطه (حركة مضادّة: الأكل ينزل،
   الظلّ يتمدّد)، وبدونه تطفو الصور المقصوصة في الفراغ */
.serve__glow {
  position: absolute; left: 50%; bottom: 2%;
  width: 86%; aspect-ratio: 1 / 0.2;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(116, 26, 8, 0.24), rgba(116, 26, 8, 0) 74%);
}

/* الحدث: توهّج حرارة ناعم يومض خلف المشهد (ضوءٌ لا قرص)، ثم عمود بخار
   يندفع من القلب وتطلع الأصناف من خلاله. لا حلقة صدمة ولا ومضة بيضاء
   ولا فتات ولا كتل مستديرة: تلك مفردات «تأثيرات» جاهزة رآها يوسف «واضح
   AI». البخار خصلات طويلة رفيعة بملمس (steam/wisp-*.webp) تتمايل وتتفتّت */
.serve__heat {
  position: absolute; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 232, 200, 0.75), rgba(255, 190, 120, 0.3) 38%, rgba(255, 160, 90, 0) 70%);
  opacity: 0;
  will-change: opacity;
}
/* حدّ التكبير في الحركة يحدّد حجم التنقيط: كروم ينقّط الطبقة على أكبر مقاس
   تبلغه الحركة، فخصلة تتضاعف رأسياً 1.75 مرة ضاعفت إطارات الحدث؛ لذا
   المقاسات هنا أكبر قليلاً والتكبير أقلّ (1.45 كحدّ) */
/* الخصلة: صورة طويلة (1:2) مركزها السفلي على نقطة الانطلاق (الحاضن سطرٌ
   بلا ارتفاع بعرض المشهد، والخصلة bottom: 0 وتُزاح نصف عرضها يساراً؛ لا
   هوامش مئوية: تُحسب من عرض الحاضن، وحاضنٌ عرضه صفر يُبطلها)، ومحور
   تحويلها أسفلها فتتمدّد صعوداً لا من وسطها */
.serve__plume, .serve__wisps { position: absolute; left: 0; right: 0; bottom: 30%; height: 0; pointer-events: none; }
.serve__plume i, .serve__wisps i {
  position: absolute; left: 50%; bottom: 0;
  width: var(--pw); margin-left: calc(var(--pw) / -2);
  aspect-ratio: 1 / 2;
  transform-origin: 50% 100%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, opacity;
}
/* عمود الاندفاع: أربع خصلات كبيرة تنطلق معاً بانحرافات وميول مختلفة */
.serve__plume i { --pw: min(42vw, 180px); }
/* التمهيد: خصلتان رفيعتان تصعدان ببطء قبل الاندفاع */
.serve__wisps i { --pw: min(30vw, 130px); }
.s1 { background-image: url(/assets/img/steam/wisp-1.webp); }
.s2 { background-image: url(/assets/img/steam/wisp-2.webp); }
.s3 { background-image: url(/assets/img/steam/wisp-3.webp); }
.s4 { background-image: url(/assets/img/steam/wisp-4.webp); }

/* الدخان الدائم: خمس خصلات تصعد وتتمايل يميناً ثم يساراً وتتمدّد وتتفتّت،
   لكلٍّ عرضها ومدّتها وتمايلها وانحرافها ودورانها (--w و--d و--sw و--dx
   و--r) فلا تتزامن فتبدو آلية. تبدأ بعد الاندفاع لا معه */
.serve__steam { position: absolute; inset: 0; pointer-events: none; }
.serve__steam i {
  position: absolute;
  left: calc(50% + var(--x, 0%)); bottom: 30%;
  width: var(--w, 34%); aspect-ratio: 1 / 2;
  margin-left: calc(var(--w, 34%) / -2);
  transform-origin: 50% 100%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, opacity;
  animation: steam var(--d, 4200ms) linear var(--dl, 0ms) infinite;
}

/* أربعة أصناف بظلال مختلفة: ثلاث مقصوصات تحت (سبيشال في المقدّمة،
   وكبدة خلفها يساراً، ودجاج خلفها يميناً) وفطيرة كاملة فوقها. الوصول على الحاضن
   والدوران الدائم والطفو على الصورة: لو اجتمعا على عنصر واحد لتنازعا
   transform نفسها. --fx و--fy و--fr: من أين يأتي (نقطة الانفجار) وبأي
   ميل زائد يُصحَّح عند الهبوط */
.serve__dish { position: absolute; display: block; will-change: transform, opacity; --fx: 0; --fy: 30%; --fr: 0deg; }
.serve__dish img {
  position: relative; display: block; width: 100%; height: auto;
  /* --flip: -1 يعكس الصورة أفقياً. الفطيرة الكاملة صورة واحدة تتكرّر
     ثلاثاً في الصفّ العلوي، فعكس طرفيها يمنع قراءتها نسخاً ملصوقة */
  transform: rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
  animation: bob var(--bd, 5200ms) ease-in-out var(--bdl, 0ms) infinite;
}
/* ظلّ الصنف على الأرض، مستقلّ عن الصورة: يضيق ويغمق حين يهبط الصنف ويتّسع
   ويشحب حين يرتفع في طفوه (bobShade بنفس مدّة bob وطورها)، فالطفو يُقرأ
   ارتفاعاً عن سطح لا اهتزازاً. وبلا drop-shadow: الفلتر على صورة تطفو
   يُعاد حسابه كل إطار */
.serve__dish::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 8%;
  height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(92, 20, 6, 0.42), rgba(92, 20, 6, 0) 76%);
  transform-origin: center;
  animation: bobShade var(--bd, 5200ms) ease-in-out var(--bdl, 0ms) infinite;
}
.serve__dish--a::after { bottom: 10%; }
/* التناسب محسوب لا مقدَّر: الصور الأربع من ملصق واحد وبمقياس تصوير واحد
   (سبيشال 496px عرضاً، والكبدة 495، والدجاج 488، والكاملة 575)،
   فالنِسَب المتساوية تُظهر المقصوصة أصغر من الفطيرة الطويلة وهي في
   المقدّمة. القاعدة: عرض كل صنف = عرضه الحقيقي × وحدة المشهد (0.1008)
   × عامل عمقه.
   وعوامل العمق ضيّقة عن قصد: 1.00 للبطلة، 0.89 للدجاج، 0.88 للكبدة،
   0.78 للكاملة. الأربعة بحجم واحد في الواقع وعلى طاولة واحدة، فمسافة
   بينها بقدر كفٍّ لا تصغّر الخلفية للنصف. النسخة السابقة كانت تنزل إلى
   0.60 فبدت الكاملة لعبةً فوق شطيرة، وهي في الواقع أطول منها. وبهذه
   النسب تخرج الكاملة أعرض قليلاً من المقصوصات وهي خلفها، وذلك صحيح:
   هي غير مقطوعة فطولها كامل.
   والتداخل مقصود: المقصوصتان الخلفيتان تختبئان خلف كتفَي البطلة
   والكاملة تعلوها.
   ومسافة بين الستّة: تُلامس بأطرافها فقط ولا تتراكب، فبين كل صنف وجاره
   هواء يفصله ويُرى كاملاً.
   صفّان: السفلي ثلاث مقصوصات (a وd وb) والعلوي ثلاث فطائر كاملة
   (c وe وf) أصغر لأنها أبعد */
.serve__dish--a { left: 28%; width: 43%; bottom: 0; z-index: 6; --fy: 40%; --fr: 9deg; }
.serve__dish--b { right: -6%; width: 38%; bottom: 18%; z-index: 5; --fx: -50%; --fy: 32%; --fr: 28deg; --bd: 5600ms; --bdl: -3400ms; }
.serve__dish--d { left: -6%; width: 38%; bottom: 20%; z-index: 4; --fx: 50%; --fy: 32%; --fr: -28deg; --bd: 6100ms; --bdl: -1800ms; }
.serve__dish--c { left: 32%; width: 37%; bottom: 52%; z-index: 3; --fy: 22%; --fr: -16deg; --bd: 4900ms; --bdl: -2600ms; }
.serve__dish--e { left: -6%; width: 34%; bottom: 54%; z-index: 2; --flip: -1; --fx: 56%; --fy: 20%; --fr: -30deg; --bd: 5800ms; --bdl: -2200ms; }
.serve__dish--f { right: -6%; width: 34%; bottom: 53%; z-index: 1; --flip: -1; --fx: -56%; --fy: 20%; --fr: 30deg; --bd: 6400ms; --bdl: -4100ms; }

/* ===== الوصول: ما يجري أول ما تُفتح الصفحة =====
 *
 * حالتان على الجسم: is-opening يضعها سكربت سطري في أول <body> قبل أول رسم
 * (لا وميض للموقع كاملاً)، فتخفي الهيدر والنصّ والأزرار والشريط وتضع المشهد
 * في وسط الشاشة. ثم app.js يقيس موضع المشهد النهائي ويحسب --ox و--oy و--os
 * (FLIP) ويبدّلها بـis-arriving في إطار واحد، فتبدأ حركات الوصول كلّها من
 * الحالة نفسها بلا قفزة. شبكة أمان في السكربت السطري تنزع is-opening بعد
 * 4.5 ثانية مهما صار.
 *
 * الحشو backwards لا forwards: القيمة النهائية لو ثُبّتت بعد الحركة
 * لغلبت قاعدةَ :active إلى الأبد فتموت ضغطة الرقاقات والأزرار. والصنف
 * يُنزع بعد انتهاء التتابع كلّه.
 *
 * التتابع من is-arriving:
 * تمهيد   | الخيطان 60 و200 | البقعة 120. صمتٌ قبل الضربة، وفيه تمرّ
 *         | أثقل إطارات تهيئة الصفحة (نحو 500 إلى 700ms تحت خنق 6×) بلا
 *         | حركة تتقطّع
 * الحدث   | الضوء يشتغل والتوهّج 540 | عمود البخار 600 إلى 700
 *         | الأصناف 620 و700 و800
 *         | اللوقو يُصدم إلى الهيدر 1520 (هبوط البطلة) | الظلّ 1520
 * التفتّح | المشهد ينزلق إلى مقعده 1660 (1100ms) | الكلمات 1720 و1860
 *         | الرقاقتان 1940 و2020 | الزرّ 2060 ولمعته 2660 | زرّا الهيدر
 *         | 1960 و2040 | الشريط 2060 وبلاطاته بفارق 36ms | يُنزع عند 3460
 */
body.is-opening .head__brand, body.is-opening .head__side,
body.is-opening .hero__text, body.is-opening .hero__actions, body.is-opening .catbar,
body.is-opening .hero::before, body.is-opening .serve__dish, body.is-opening .serve__glow { opacity: 0; }
body.is-opening .serve { transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(calc(var(--os, 1.2) * 1.05)); }

/* التمهيد */
body.is-arriving .serve__wisps i { animation: wisp 1100ms var(--ease-out) backwards; }
body.is-arriving .serve__wisps i:nth-child(1) { animation-delay: 60ms; }
body.is-arriving .serve__wisps i:nth-child(2) { animation-delay: 200ms; }
body.is-arriving .serve__spot { animation: spotIn 900ms var(--ease-out) 120ms backwards, breathe 6400ms ease-in-out 2400ms infinite; }

/* الحدث */
body.is-arriving .hero::before { animation: lightOn 900ms var(--ease-out) 540ms backwards; }
body.is-arriving .serve__heat { animation: heat 1000ms var(--ease-out) 540ms backwards; }
body.is-arriving .serve__plume i { animation: plume 1500ms cubic-bezier(0.15, 0.8, 0.25, 1) backwards; }
body.is-arriving .serve__plume i:nth-child(1) { animation-delay: 600ms; }
body.is-arriving .serve__plume i:nth-child(2) { animation-delay: 620ms; }
body.is-arriving .serve__plume i:nth-child(3) { animation-delay: 660ms; }
body.is-arriving .serve__plume i:nth-child(4) { animation-delay: 700ms; }

/* الأصناف من نقطة الانفجار: الجانبيان أولاً ثم البطل في المقدّمة خاتمةً.
   الهبوط نابضٌ مخمَّد لا ارتداد واحد: تجاوز، فانضغاط، فارتداد أصغر،
   فاستقرار (أربعة أطوار تتناقص)، والميل الزائد يُصحَّح على الأطوار نفسها */
body.is-arriving .serve__dish { animation: serveIn 900ms linear backwards; }
/* من الخلف إلى المقدّمة: الصفّ العلوي (كاملات) ثم السفلي (مقصوصات) */
body.is-arriving .serve__dish--e { animation-delay: 500ms; }
body.is-arriving .serve__dish--f { animation-delay: 560ms; }
body.is-arriving .serve__dish--c { animation-delay: 620ms; }
body.is-arriving .serve__dish--d { animation-delay: 680ms; }
body.is-arriving .serve__dish--b { animation-delay: 740ms; }
body.is-arriving .serve__dish--a { animation-delay: 800ms; animation-duration: 980ms; }
/* لحظة هبوط البطلة (900 + 52% من 1080 = 1460): الظلّ يتّسع تحتها،
   واللوقو يُصدم إلى الهيدر بارتداد: الهبوط هو ما شغّل اللافتة.
   (800 + 74% من 980 = 1520، وهي لحظة الانضغاط في serveIn) */
body.is-arriving .serve__glow { animation: glowIn 760ms var(--ease-out) 1520ms backwards; }
body.is-arriving .head__brand { animation: brandIn 620ms var(--ease-pop) 1520ms backwards; }

/* التفتّح: الكاميرا تبتعد. المشهد كان في وسط الشاشة أكبر بـ--os (وأقرب
   بـ5% زيادة في أثناء الحدث)، وينزلق إلى مقعده في التخطيط. transform على
   حاضن واحد مركَّب على كرت الشاشة، والصفحة لا تعيد تخطيطاً */
body.is-arriving .serve { animation: settle 2760ms linear backwards; }
body.is-arriving .w i { animation: wordUp 620ms var(--ease-pop) backwards; animation-delay: calc(var(--t0, 0ms) + var(--i, 0) * 55ms); }
.hero__eyebrow { --t0: 1720ms; }
.hero h1 { --t0: 1860ms; }
body.is-arriving .head__side > * { animation: pop 380ms var(--ease-pop) 1960ms backwards; }
body.is-arriving .head__side > :nth-child(2) { animation-delay: 2040ms; }
body.is-arriving .hero__chip { animation: pop 420ms var(--ease-pop) 1940ms backwards; }
body.is-arriving .hero__chip:nth-child(2) { animation-delay: 2020ms; }
body.is-arriving .hero__cta { animation: pop 460ms var(--ease-pop) 2060ms backwards; }
/* لمعة واحدة تعبر الزرّ بعد وصوله: تقول «هذا هو الزرّ» بلا سهم ولا نصّ */
.hero__cta { position: relative; overflow: hidden; }
.hero__cta::after {
  content: ""; position: absolute; inset: -20% -40%;
  background: linear-gradient(105deg, transparent 40%, rgba(238, 85, 49, 0.14) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
body.is-arriving .hero__cta::after { animation: shine 900ms var(--ease-out) 2660ms backwards; }
body.is-arriving .catbar { animation: rise 520ms var(--ease-out) 2060ms backwards; }
body.is-arriving .hcat { animation: chipIn 420ms var(--ease-pop) backwards; animation-delay: calc(2120ms + var(--i, 0) * 36ms); }

@keyframes wordUp {
  0% { opacity: 0; transform: translateY(112%) rotate(4deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
/* أول 1660ms: دولي خفيف من 1.05 إلى 1 من مقاس المركز (الكاميرا تقترب مع
   الانفجار)، ثم 1100ms انزلاق إلى المقعد بمنحنى خروج ناعم */
@keyframes settle {
  0% { transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(calc(var(--os, 1.2) * 1.05)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  60.1% { transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--os, 1.2)); animation-timing-function: cubic-bezier(0.3, 0.9, 0.2, 1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lightOn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wisp {
  0% { opacity: 0; transform: translate(0, 6%) scale(0.7, 0.5) rotate(0); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -30%) scale(1, 1.35) rotate(var(--r, 10deg)); }
}
/* الاندفاع: تتمدّد صعوداً من أسفلها بسرعة ثم تتفتّت وتتلاشى */
@keyframes plume {
  0% { opacity: 0; transform: translate(0, 10%) scale(0.55, 0.4) rotate(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 0), -40%) scale(1.12, 1.45) rotate(var(--r, 0deg)); }
}
@keyframes heat {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes brandIn {
  0% { opacity: 0; transform: translateX(18px) scale(0.8) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes shine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes spotIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@keyframes glowIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0.55, 0.8); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* صعود مع تمايل: يمين ثم يسار (--sw) بمنحنى ease-in-out على كل طور فيبدو
   التمايل جيبيّاً، والخصلة تتمدّد رأسياً وهي تصعد وتتفتّت آخرها */
@keyframes steam {
  0% { opacity: 0; transform: translate(0, 6%) scale(0.75, 0.5) rotate(0); animation-timing-function: ease-out; }
  18% { opacity: 0.85; }
  40% { transform: translate(var(--sw, 6%), -16%) scale(0.88, 0.9) rotate(calc(var(--r, 6deg) * 0.5)); animation-timing-function: ease-in-out; }
  70% { opacity: 0.4; transform: translate(calc(var(--sw, 6%) * -0.5), -40%) scale(1, 1.25) rotate(calc(var(--r, 6deg) * 0.85)); animation-timing-function: ease-in-out; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -58%) scale(1.05, 1.35) rotate(var(--r, 6deg)); }
}
/* من العمق نحو الكاميرا: يبدأ بعيداً (perspective + translateZ سالب) مائلاً
   على ثلاثة محاور (قلبة على X وانعطاف على Y وميل على Z)، ويقترب وهو
   يعتدل، ثم نابض مخمَّد بأربعة أطوار على الهبوط: مسافة التجاوز تتناقص
   6% ثم 2.5% ثم 1% والانضغاط معها. linear على الحاضن والأطوار تحمل التوقيت */
@keyframes serveIn {
  /* محور دوران واحد لا ثلاثة: rotateX وrotateY مع rotateZ معاً كانت تقلب
     الصنف في الهواء فيُقرأ اضطراباً. المسار هنا نظيف (عمق + ميل واحد
     يُصحَّح + مقياس) وقويّ: ينطلق من 900px خلف الشاشة وثلث حجمه */
  0% { opacity: 0; transform: perspective(1100px) translate3d(var(--fx), var(--fy), -900px) rotateZ(calc(var(--fr) * 1.25)) scale(0.32); animation-timing-function: cubic-bezier(0.12, 0.74, 0.18, 1); }
  20% { opacity: 1; }
  /* التجاوز: يعبر مقعده إلى أمامه وفوقه، فالوصول اندفاع لا انزلاق */
  58% { transform: perspective(1100px) translate3d(0, -5%, 100px) rotateZ(calc(var(--fr) * -0.12)) scale(1.1); animation-timing-function: cubic-bezier(0.5, 0, 0.18, 1); }
  /* لحظة الهبوط: انضغاط قصير (عرض أوسع وارتفاع أقصر) هو ما يُشعر بالثقل */
  74% { transform: perspective(1100px) translate3d(0, 1.2%, 0) rotateZ(0) scale3d(1.05, 0.94, 1); animation-timing-function: cubic-bezier(0.18, 0.9, 0.26, 1); }
  100% { opacity: 1; transform: perspective(1100px) translate3d(0, 0, 0) rotateZ(0) scale3d(1, 1, 1); }
}
/* --flip يتكرّر هنا لا في القاعدة وحدها: الحركة تكتب transform كاملة كل
   إطار، فأي جزء لا يُذكر فيها يسقط. بدونه يعود الانعكاس أصلَه أول إطار */
@keyframes bob {
  0%, 100% { transform: rotate(var(--rot, 0deg)) scaleX(var(--flip, 1)) translateY(0); }
  50% { transform: rotate(var(--rot, 0deg)) scaleX(var(--flip, 1)) translateY(-3%); }
}
@keyframes bobShade {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12, 0.9); opacity: 0.6; }
}
@keyframes chipIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}
@keyframes rise {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0% { opacity: 0; transform: scale(0.86) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

body.is-locked { overflow: hidden; }

/* الوصول والدخان والطفو كلّها زينة: تُلغى كاملةً، والمشهد يظهر مستقرّاً */
@media (prefers-reduced-motion: reduce) {
  .serve__steam, .serve__heat, .serve__plume, .serve__wisps { display: none; }
  .hero__cta::after { display: none; }
  .serve__dish img, .serve__dish::after, .serve__spot { animation: none; }
  .serve__spot { opacity: 1; }
}

/* شاشة قصيرة: العنوان أصغر قليلاً كي يبقى الزرّ داخل الشاشة */
@media (max-height: 700px) {
  .hero h1 { font-size: clamp(28px, 8vw, 40px); }
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.02fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "text art" "actions art";
    align-content: center; align-items: center;
    column-gap: 30px; row-gap: 0;
    padding: 30px 26px;
  }
  .hero__actions { align-self: start; }
  .hero__chips { margin-top: 14px; }
  .hero__cta { display: inline-flex; width: auto; margin-top: 18px; }
  .serve { width: min(100%, 560px); aspect-ratio: 1 / 0.96; }
  .serve__plume i { --pw: 230px; }
  .serve__wisps i { --pw: 160px; }
}

/* ===== الهيدر ===== */

/* شريط عنابي ثابت اللون: لون كلمة «هِبه» في اللوقو المعتمد نفسه، لا لون
   مُخترع. جُرِّب أخضر «فلافل» (نفس اللوقو) قبله، لكن reference/brand.md
   يوثّق أن الأخضر لا يدخل الواجهة أصلاً (تباينه 3.27:1، ويكسر قاعدة
   «أكسنت واحد») فبقاؤه سطحاً للهيدر كان مخالفاً لقرار موثَّق سلفاً، لا
   مجرد ذوق. والعناب هنا هو نفسه لون النصّ في الصفحة كلها، فالهيدر
   والتذييل والنصّ سطح هوية واحد لا ثلاثة ألوان متفرقة.
   لا يتلوّن بالبرتقالي فوق الهيرو ولا يتبدّل عند التمرير: سطح واحد لا
   يتغيّر تحت الإبهام هو ما يجعل الواجهة تُقرأ تطبيقاً لا صفحة */
.head {
  position: sticky; top: 0; z-index: 40;
  height: var(--head-h);
  padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.head__brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.head__brand img { width: 40px; height: auto; }
.head__side { display: flex; align-items: center; gap: 8px; }

.head__wa, .head__call, .head__cart {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14); color: var(--white);
  cursor: pointer;
  transition: transform var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.head__wa:hover, .head__call:hover, .head__cart:hover { background: rgba(255, 255, 255, 0.24); }
.head__cart { position: relative; }
.head__wa:active, .head__call:active, .head__cart:active { transform: scale(0.94); }
/* زرّ الواتساب بلونه المعروف: هو القناة التي تصل الطلب فعلاً (الموقع
   يرسل السلة على واتساب)، فيُميَّز عن بقية أزرار الهيدر بدل أن يذوب
   بينها. والأخضر هنا لون خدمة لا لون هوية، ولذلك لا يظهر في غيره */
.head__wa { background: #1FA855; }
.head__wa:hover { background: #1B934A; }

.head__count {
  position: absolute; inset-block-start: -2px; inset-inline-start: -2px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--orange); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  border-radius: var(--r-pill);
  /* حلقة بيضاء تفصل الشارة البرتقالية عن الهيدر الأخضر، وإلا ذابت فيه */
  box-shadow: 0 0 0 2px var(--white);
  transform: scale(0);
  transition: transform 200ms var(--ease-out);
}
.head__count[data-on] { transform: scale(1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-btn);
  background: var(--orange); color: var(--white);
  font-family: var(--font-display); font-weight: 800;
  cursor: pointer;
  transition: transform var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.btn:hover { background: var(--flame); }
.btn:active { transform: scale(0.97); }
/* الأبيض على البرتقالي 3.51:1، يجتاز AA للنص الكبير فقط، فالحد الأدنى 19px عريض */
.btn--big { font-size: 20px; padding: 15px 26px; box-shadow: var(--shadow-lift); }
/* ===== موتيف الخطوط المائلة ===== */

/* مأخوذ من ذيل فلاير العميل الرسمي: شرائط برتقالية مائلة على أرضية فاتحة.
   يتكرر مرتين في الصفحة بالقطبين نفسيهما: فاتح على برتقالي أسفل الهيرو،
   وبرتقالي على فاتح فوق التذييل */
.stripes {
  height: 16px;
  background-repeat: repeat;
  background-image: repeating-linear-gradient(115deg,
    var(--orange) 0 13px, transparent 13px 26px);
}
/* القطب الثاني: أسفل الهيرو الشرائط فاتحة على برتقالي، فتقرأ كأن
   برتقالي الهيرو يتفتّت وينتهي عند الورق بدل حدّ مستقيم يقطعه */
.stripes--hero {
  height: 18px;
  border-radius: 0 0 30px 30px;
  background-color: var(--orange);
  background-image: repeating-linear-gradient(115deg,
    var(--cream) 0 12px, transparent 12px 26px);
}

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

.catbar {
  position: sticky; top: var(--head-h); z-index: 30;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.catbar__scroll {
  display: flex; gap: 8px;
  max-width: 1120px; margin: 0 auto;
  padding: 10px 14px 11px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 14px;
  overscroll-behavior-x: contain;
}
.catbar__scroll::-webkit-scrollbar { display: none; }

/* الرقاقة 70px لا 82: خمس رقاقات تدخل شاشة 390 والخامسة مقصوصة، فيُعرف
   أن الشريط يُجرّ. والرسمة تملأ بلاطتها (84%) لا تسبح في وسطها */
.hcat {
  flex: none;
  display: grid; justify-items: center; gap: 6px;
  width: 70px;
  scroll-snap-align: center;
  color: var(--ink);
  transition: transform var(--fast) var(--ease-out);
}
.hcat:active { transform: scale(0.95); }

/* مربّع مستدير بنظام الاستدارة نفسه (16px كالصور والبطاقات)، بطلب يوسف
   بعد أن جُرِّبت الدائرة. بلاطة بيضاء بحدّ رفيع على الكريمي، والقسم
   الجاري بلاطة برتقالية مصمتة ورسمته تُقلب بيضاء بالفلتر: حالة نشطة
   تُقرأ من طرف العين لا من لون الاسم وحده */
.hcat__art {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: var(--r-img);
  background: var(--white);
  border: 1.5px solid var(--line);
  box-shadow: 0 1px 2px rgba(111, 36, 67, 0.05);
  overflow: hidden;
  transition: background var(--base) var(--ease-out), border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.hcat__art img { width: 84%; height: 84%; object-fit: contain; transition: filter var(--base) var(--ease-out); }
.hcat:hover .hcat__art { transform: translateY(-2px); }
.hcat[aria-current="true"] .hcat__art { background: var(--orange); border-color: var(--orange); }
.hcat[aria-current="true"] .hcat__art img { filter: brightness(0) invert(1); }

/* صندوق ثابت بسطرين: بدونه يتفاوت ارتفاع الرقاقات فيتذبذب الشريط
   الملتصق كلما مرّ اسم من سطر إلى سطرين */
.hcat__name {
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  line-height: 1.25; text-align: center;
  min-height: calc(2 * 1.25em);
  transition: color var(--fast) var(--ease-out);
}
.hcat[aria-current="true"] .hcat__name { color: var(--flame); }

@media (min-width: 860px) {
  .hcat { width: 92px; }
  .hcat__art { width: 78px; height: 78px; }
  .hcat__name { font-size: 12.5px; }
}

/* ===== شعارات تطبيقات التوصيل ===== */

/* شعاراتهم كما هي في ذيل منيوهم، لا أسماء مكتوبة. كلٌّ في بلاطة بيضاء
   بلونه البرتقالي الأصلي: قلبها أبيض بالفلتر كان يمحو اللون ويجعلها
   تذوب في التذييل، والبلاطة تعيدها علاماتٍ تُقرأ */
.foot__appslead {
  margin: 26px 0 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--white);
}
.foot__apps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: stretch; gap: 8px;
  max-width: 420px; margin: 0 auto;
}
.foot__apps a, .foot__apps span {
  display: grid; place-items: center;
  padding: 8px;
  border-radius: 14px;
  background: var(--white);
  transition: transform var(--fast) var(--ease-out);
}
.foot__apps a:active { transform: scale(0.96); }
/* كل شعار مُطبَّق مسبقاً في لوحة 320×160 موحّدة بمساحة حبر واحدة
   (tools/normalize-app-logos.py)، فمقاس واحد هنا يكفي ويصفّ الصف */
.foot__apps img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }

@media (max-width: 380px) {
  .foot__apps { grid-template-columns: repeat(3, 1fr); }
}

/* ===== علامة الحارّ ===== */

/* SVG مضمّن لا إيموجي، ولونه لهب الهوية لا أحمر غريب عنها */
.chili {
  display: inline-grid; place-items: center;
  vertical-align: -2px;
  color: var(--flame);
}

/* ===== لوح تخصيص الصنف ===== */

.pick + .pick { margin-top: 18px; }
.pick__label {
  margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  color: var(--ink);
}
.pick__hint {
  margin-inline-start: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  color: var(--ink-soft);
}
.pick__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pick__opts button {
  border: 2px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink);
  padding: 10px 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.pick__opts button[aria-pressed="true"] {
  border-color: var(--orange); background: #FFF1EC; color: var(--flame);
}
.pick__opts button:active { transform: scale(0.97); }

.addons { display: grid; gap: 8px; }
.addon {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  border: 2px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink);
  padding: 11px 14px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.addon:active { transform: scale(0.985); }
.addon[aria-pressed="true"] { border-color: var(--orange); background: #FFF1EC; }
/* علامة الاختيار من الحدّ نفسه: مربّع يمتلئ بلون الأكسنت، بلا أيقونة زائدة */
.addon__name { display: flex; align-items: center; gap: 6px; }
.addon__name::before {
  content: ""; flex: none;
  width: 18px; height: 18px;
  border: 2px solid var(--line); border-radius: 5px;
  transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.addon[aria-pressed="true"] .addon__name::before {
  background: var(--orange); border-color: var(--orange);
}
.addon__price { flex: none; font-weight: 800; color: var(--flame); }

/* زرّ الإضافة برتقالي الهوية لا أخضر الواتساب: الأخضر هنا يعد بإرسال
   لا يحدث، فالطلب لا يغادر الموقع إلا من زر الإرسال في لوح السلة */
.btn--add {
  width: 100%;
  background: var(--orange); color: var(--white);
  font-size: 17px; padding: 15px 20px;
}
.btn--add:hover { background: var(--flame); }

.sheet__foot--item { display: flex; align-items: center; gap: 10px; }
.sheet__foot--item .btn--add { flex: 1; margin: 0; }
.qty--big { flex: none; }
.qty--big button { width: 40px; height: 40px; font-size: 20px; }
.qty--big button:disabled { opacity: 0.4; cursor: not-allowed; }

/* تفاصيل الصنف في لوحه */
.sheet__title { min-width: 0; }
.item__cal { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.item__desc {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.75; color: var(--ink-soft);
}
/* مسببات الحساسية من ملف المطعم نفسه، فلا تُخفى عن زائر يحتاجها */
.item__allergens {
  margin: 18px 0 0; padding: 11px 13px;
  border-radius: 12px; background: #FFF1EC;
  font-size: 13px; line-height: 1.6; color: var(--ink);
}
.item__allergens strong { color: var(--flame); }
.line__drops {
  margin: 2px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--ink-soft);
}

/* ===== طريقة الدفع ===== */

.pay { margin-top: 0; }
.pay__label {
  margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--ink);
}
.req {
  margin-inline-start: 6px; padding: 2px 8px;
  border-radius: var(--r-pill);
  background: #FFE7E0; color: var(--flame);
  font-family: var(--font-body); font-weight: 800; font-size: 11px;
}
.pay__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay__btn {
  border: 2px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink);
  padding: 12px 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.pay__btn[aria-pressed="true"] {
  border-color: var(--orange); background: #FFF1EC; color: var(--flame);
}
.pay__btn:active { transform: scale(0.97); }
.pay__note {
  margin: 10px 0 0; padding: 12px;
  border-radius: 12px; background: var(--cream);
  font-size: 13px; line-height: 1.6; color: var(--ink);
}

/* بيانات التحويل: تحذير التأكيد، ثم رقم الحساب والآيبان كلٌّ بزرّ نسخ.
   القيم dir="ltr" داخل صفحة عربية وإلا انقلب ترتيب الحروف والأرقام بصرياً */
.bank__head {
  display: grid; gap: 2px; margin: 0 0 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.bank__bank { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); }
.bank__to { font-size: 12.5px; color: var(--ink-soft); }
.bank__warn {
  display: block; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  color: var(--flame);
}
.bank { margin: 0; display: grid; gap: 8px; }
.bank__row dt { font-size: 11px; color: var(--ink-soft); margin: 0 0 2px; }
.bank__row dd {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px; background: var(--white);
  font-weight: 700; font-size: 13.5px;
}
/* أرقام الحساب والآيبان: خط أحادي بأرقام جدولية تُقرأ خانةً خانة،
   وتلتفّ لو ضاقت الشاشة بدل أن تخرج من البطاقة */
.bank__num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px; letter-spacing: 0.01em; word-break: break-all; min-width: 0;
}
.bank__copy {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px;
  border: none; border-radius: 8px;
  background: var(--cream); color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.bank__copy:hover { background: #FFE7E0; color: var(--flame); }
.bank__copy:active { transform: scale(0.97); }
.bank__status { margin: 6px 0 0; min-height: 15px; font-size: 12px; font-weight: 700; color: var(--flame); }

.btn--send:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--send:disabled:active { transform: none; }

/* ===== إضافات السطر في السلة ===== */

.line__addons {
  margin: 2px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--ink-soft);
}


/* ===== المنيو ===== */

.menu { max-width: 1120px; margin: 0 auto; padding: 0 14px 40px; }

/* الأقسام خارج الشاشة لا تُخطَّط ولا تُرسم حتى تقترب (content-visibility):
   ١١٨ بطاقة في صفحة بطول 22 ألف بكسل كانت تُخطَّط كلها عند البناء وعند كل
   تغيير، والقفز بالمرساة والمراقبة ما زالا يعملان لأن للقسم حجماً مقدَّراً */
.menu__sec { padding-top: 26px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* عنوان القسم وعدّة أصنافه في سطر واحد: نفس ما تفعله تطبيقات الطلب،
   فيعرف الزائر حجم القسم قبل أن يمرّ عليه */
.menu__title {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(20px, 5vw, 26px);
  margin-bottom: 14px;
}
.menu__title span {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--ink-soft);
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line);
}
.menu__title::after {
  content: ""; flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(to left, var(--line), transparent);
}

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 8px 10px 10px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), box-shadow var(--base) var(--ease-out);
}
.card.is-in { opacity: 1; transform: none; }
/* البطاقات المتجاورة لا تظهر دفعةً واحدة: تأخير بسيط يتدرّج عبر الصفّ
   فتبدو موجةً لا وميضاً */
.grid .card:nth-child(2n) { transition-delay: 70ms; }
.card:hover { box-shadow: var(--shadow-lift); }

/* الصورة مربّعة مستديرة تملأ عرض البطاقة: نفس شكل بلاطات الأقسام، وأكبر
   مساحةً من الدائرة السابقة بنحو الثلث، فالطعام هو أول ما يُرى */
.card__pic {
  position: relative;
  width: 100%; margin: 0 0 10px;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: var(--r-img);
  background: var(--cream);
  overflow: hidden;
}
.card__pic img { width: 100%; height: 100%; object-fit: cover; }

.card__ph { width: 54%; color: var(--line); }

.card__badge {
  position: absolute; inset-block-start: 15px; inset-inline-start: 16px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.card__badge[data-kind="new"] { background: var(--orange); }

/* أسماء الأصناف بخط العناوين لا بخط النصّ: الواجهة تُقرأ تطبيقاً حين
   يكون كل ما يُضغط عليه بخطٍّ عريض واحد */
.card__name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.card__cal { margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); }
.card__note { margin-top: 2px; font-size: 11px; color: var(--ink-soft); }

.card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__price { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--flame); }
.card__price small { font-size: 12px; font-weight: 700; }

.add {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 13px;
  background: var(--orange); color: var(--white);
  font-size: 24px; line-height: 1; cursor: pointer;
  transition: transform var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.add:hover { background: var(--flame); }
.add:active { transform: scale(0.9); }

.sizes { display: flex; gap: 6px; margin-top: 8px; }
.sizes button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--white);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.sizes button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ===== الأكثر مبيعاً: أول قسم في المنيو ===== */

.picks { max-width: 1120px; margin: 0 auto; padding: 22px 14px 0; }

/* أربع بطاقات فقط، فشبكة الثلاثة في مقاس التابلت كانت تترك واحدةً
   يتيمةً في سطر لوحدها. هنا اثنان ثم أربعة مباشرة */
@media (min-width: 620px) and (max-width: 979px) {
  .picks .grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

/* عنوان القسم يقول «الأكثر مبيعاً»، فشارة كل بطاقة تكرار بصري لا يضيف
   معنى. تبقى الشارات في بقية الأقسام حيث تختلط الأصناف */
.picks .card__badge { display: none; }

/* ===== زورونا ===== */


.visit { max-width: 1120px; margin: 0 auto; padding: 10px 14px 46px; }
.visit h2 { font-size: clamp(21px, 5vw, 28px); margin-bottom: 14px; }
.visit__grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .visit__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .visit__grid { grid-template-columns: repeat(4, 1fr); } }

.visit__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 18px;
}
.visit__card h3 { font-size: 16px; color: var(--orange); margin-bottom: 6px; }
.visit__card p { margin: 0; font-size: 15px; }
.visit__link {
  display: inline-block; margin-top: 8px;
  font-size: 14px; font-weight: 700; color: var(--flame);
  border-bottom: 2px solid var(--line);
  transition: border-color var(--fast) var(--ease-out);
}
.visit__link:hover { border-bottom-color: var(--flame); }
.visit__card a { color: var(--flame); font-weight: 700; }

/* ===== التذييل ===== */

/* برتقالي بطلب يوسف (كان عناباً كالهيدر). الأبيض على البرتقالي 3.51:1
   يجتاز AA للنصّ الكبير وحده، فكل نصّ هنا إما ≥19px عريض أو في رقاقة
   بيضاء بنصّ عنابي: التاق لاين 20px، «متوفرون أيضاً على» 19px،
   والتوقيع رقاقة. والملصق أبيض الحافة يبرز على البرتقالي كما يبرز على
   أي سطح مصمت */
.foot {
  background: var(--orange); color: var(--white);
  text-align: center;
  padding: 36px 18px calc(110px + env(safe-area-inset-bottom, 0px));
}
.foot img { width: 96px; height: auto; margin: 0 auto 12px; }
.foot__tag { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0 0 16px; }
/* شبكة لا flex-wrap: الحسابات ثمانية، والـwrap كان يصفّها ستة ثم اثنين
   على 390px فيبدو السطر الثاني بقيّةً منسيّة. الشبكة تعطي 4+4 */
.foot__social {
  display: grid; grid-template-columns: repeat(4, 44px);
  justify-content: center; gap: 10px; margin: 0 0 16px;
}
@media (min-width: 560px) { .foot__social { grid-template-columns: repeat(8, 44px); } }
.foot__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.foot__social a:hover { background: var(--white); color: var(--flame); }
.foot__social a:active { transform: scale(0.92); }
.foot__credit {
  display: inline-block; margin: 22px 0 0; padding: 8px 14px;
  border-radius: var(--r-pill); background: var(--white);
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.foot__credit a { color: var(--flame); border-bottom: 2px solid rgba(194, 61, 30, 0.35); }

/* ===== شريط السلة ===== */

.bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--cream) 62%, rgba(253, 246, 238, 0));
}
.bar__btn {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  border: 0; border-radius: var(--r-btn);
  background: var(--orange); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  box-shadow: var(--shadow-lift); cursor: pointer;
  transition: transform var(--fast) var(--ease-out);
}
.bar__btn:active { transform: scale(0.985); }
.bar__count {
  min-width: 28px; height: 28px; padding: 0 7px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.24); border-radius: var(--r-pill);
  font-size: 15px;
}

/* ===== لوح الطلب ===== */

.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(51, 12, 26, 0.5); opacity: 0; transition: opacity var(--base) var(--ease-out); }
.sheet.is-on .sheet__scrim { opacity: 1; }

.sheet__panel {
  position: absolute; inset-inline: 0; bottom: 0;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
}
.sheet.is-on .sheet__panel { transform: none; }

/* مقبض في أعلى اللوح: يقول إنه لوح يُسحب لا صفحة، كما في تطبيقات الطلب */
.sheet__grip { flex: none; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--line); }

/* على الشاشات الكبيرة يأتي اللوح من جهة البداية (اليمين في RTL)، حيث تقع
   أيقونة السلة، فيبدو خارجاً منها لا من الجهة المقابلة */
@media (min-width: 760px) {
  .sheet__panel { inset-inline-end: auto; inset-inline-start: 0; top: 0; width: 440px; max-height: none; border-radius: 0; transform: translateX(100%); }
  .sheet.is-on .sheet__panel { transform: none; }
  .sheet__grip { display: none; }
}

.sheet__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px 8px;
}
.sheet__head h2 { font-size: 22px; }
.sheet__n { margin: 1px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.sheet--item .sheet__head h2 { font-size: 19px; line-height: 1.35; }
.sheet__x {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--r-pill);
  background: var(--white); box-shadow: var(--shadow); cursor: pointer;
  transition: transform var(--fast) var(--ease-out);
}
.sheet__x:active { transform: scale(0.92); }

.sheet__body { flex: 1; overflow-y: auto; padding: 0 18px 10px; -webkit-overflow-scrolling: touch; }

.line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
/* مربّع مستدير كصور البطاقات، لا دائرة: الشكل واحد عبر الواجهة كلها */
.line__pic { width: 60px; height: 60px; flex: none; border-radius: 14px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.line__pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.line__body { flex: 1; min-width: 0; }
.line__name { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.line__price { margin-top: 2px; font-size: 14px; color: var(--flame); font-weight: 800; }
.line__unit { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; line-height: 1.4; }

/* عدّاد بأزرار 34px داخل إطار واحد: أصغر من هذا يخطئه الإبهام. وعند «1»
   يصير الناقص سلّةَ مهملات، فالضغطة التالية حذفٌ لا إنقاص والزائر يستحقّ
   أن يعرف قبل أن يضغط */
.qty { display: flex; align-items: center; gap: 2px; flex: none; padding: 3px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.qty button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 18px; line-height: 1;
  transition: transform var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.qty button:hover { background: var(--cream); }
.qty button:active { transform: scale(0.9); }
.qty button.is-del { color: var(--flame); }
.qty span { min-width: 24px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; }

.empty { padding: 36px 10px 26px; text-align: center; color: var(--ink-soft); }
.empty svg { width: 64px; color: var(--line); margin: 0 auto 12px; }
.empty__btn { margin-top: 14px; padding: 12px 24px; font-size: 15px; }

/* الخيارات تتمرّر مع الأصناف تحت عناوين قصيرة، ولا يبقى مثبّتاً إلا زرّ
   الإرسال وفيه الإجمالي: تذييل يحمل المجاميع والزرّ والتنويه كان يبتلع
   نصف شاشة الجوال فلا يبقى للطلب نفسه إلا سطر */
.opts { padding: 4px 0 0; }
.opt { padding-top: 16px; }
.opt__label { display: block; margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); }

.sheet__foot { flex: none; padding: 10px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--white); }

/* مبدّل التوصيل/الاستلام مسارٌ واحد بزرّين: المختار حبّة داكنة داخله،
   لا زرّان منفصلان يبدوان أمرين مختلفين */
.mode { display: flex; padding: 4px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); }
.mode__btn {
  flex: 1; padding: 10px 6px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.mode__btn:active { transform: scale(0.97); }
.mode__btn.is-on { background: var(--ink); color: var(--white); }

.loc { margin-top: 10px; }
.loc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px;
  border: 1px dashed var(--orange); border-radius: 12px;
  background: var(--white); color: var(--flame);
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.loc__btn:active { transform: scale(0.98); }
.loc__btn[data-on] { border-style: solid; background: #FFF3EE; }
.loc__state { margin: 6px 2px 0; font-size: 12px; color: var(--ink-soft); }

.note { display: block; }
.note textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); resize: vertical; font-size: 14px;
}

/* الخانة الناقصة تهتزّ وتتحدّد بلون اللهب: الزائر ضغط الإرسال بلا طريقة
   دفع فيرى ما ينقصه في مكانه، لا زرّاً رمادياً يظنّه عطلاً في الموقع */
.pay.is-missing .pay__opts { animation: shake 420ms var(--ease-out); outline: 2px solid var(--flame); outline-offset: 4px; border-radius: 12px; }
.pay__warn { display: none; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--flame); }
.pay.is-missing .pay__warn { display: block; animation: rise 260ms var(--ease-out) both; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.sums { margin: 18px 0 0; padding: 12px 14px 4px; font-size: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.sums div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.sums dt { color: var(--ink-soft); }
.sums dd { margin: 0; font-weight: 700; }
.sums .is-total { padding: 10px 0 8px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 17px; }
.sums .is-total dt, .sums .is-total dd { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.sums .is-free dd { color: #2E7D32; }
.sums .is-gap dt { color: var(--flame); font-weight: 700; }

/* زرّ الإرسال يحمل الإجمالي: الرقم الذي يُقرَّر به داخل الزرّ الذي
   يُقرَّر به، كما في تطبيقات الطلب */
.btn--send { width: 100%; justify-content: space-between; font-size: 16px; padding: 13px 14px 13px 16px; background: #25A366; }
.btn--send:hover { background: #1E8A55; }
.btn--send__label { display: inline-flex; align-items: center; gap: 8px; }
.btn--send b { font-size: 16px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.2); }

.sheet__hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }

.toast {
  position: fixed; inset-inline: 0; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex; justify-content: center;
  pointer-events: none;
}
.toast span {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.toast[data-on] span { opacity: 1; transform: none; }