/* ============================================================
   phone-shell.css — نسخة الموبايل «تطبيق» (≤767px) — الشريط اللي فوق،
   شريط الأقسام اللي تحت، الهيرو داخل كله في أول شاشة، وقواعد السرعة.
   كل حاجة هنا تحت html.phone-app وجوّه @media (max-width: 767px)،
   فالديسكتوب ما بيتلمسش. الاستثناء الوحيد: .tabbar مخفي برّه الـmedia
   (العنصر بيتعمل بالجافاسكربت وما ينفعش يبان على الديسكتوب).
   التصميم: concepts/01-app.png — الشاشة A.
   ============================================================ */
.tabbar { display: none; }

@media (max-width: 767px) {

  /* ── القياسات (phone-shell.js بيكتب المقاس الحقيقي فوقهم) ── */
  html.phone-app {
    --phone-top-h: 60px;
    --phone-tab-h: calc(64px + env(safe-area-inset-bottom));
    --ph-bar: var(--bg-soft);
  }
  html.phone-app[data-theme="light"] { --ph-bar: var(--surface); }

  /* ───────── 1. الشريط اللي فوق = نفس الهيدر، شريط رفيع مصمت ───────── */
  html.phone-app .header {
    top: 0; padding-inline: 0; z-index: 60;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  html.phone-app .header__inner {
    width: 100%; max-width: none;
    gap: 10px;
    padding: calc(env(safe-area-inset-top) + 6px) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
    border: 0; border-bottom: 1px solid var(--glass-brd); border-radius: 0;
    background: var(--ph-bar);
    box-shadow: none;
    overflow: visible;
  }
  html.phone-app .header.is-stuck .header__inner { background: var(--ph-bar); border-color: var(--glass-brd); box-shadow: none; }
  /* الروابط والقايمة وزرار الحجز وشريط القراية: مكانهم الشريط اللي تحت */
  html.phone-app .header .nav,
  html.phone-app .header .burger,
  html.phone-app .header .hdr-cta,
  html.phone-app .header__progress { display: none !important; }

  /* الصورة + الاسم + الدور */
  html.phone-app .brand { flex: 1 1 auto; min-width: 0; min-height: 44px; gap: 10px; padding: 0; }
  html.phone-app .brand__ring {
    width: 36px; height: 36px; padding: 1.5px;
    background: var(--accent); box-shadow: none; animation: none;
  }
  html.phone-app .brand__pic { border-width: 1.5px; }
  html.phone-app .brand__txt { display: flex; min-width: 0; line-height: 1.25; }
  html.phone-app .brand__txt > span { font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
  html.phone-app .brand__txt small {
    display: block; font-size: 11.5px; line-height: 1.35; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis;
  }

  /* التفضيلات: زرار دايري للوضع (بيوري الوضع الحالي) + كبسولة اللغة التانية (EN أو ع).
     كل زرار هدف لمس 44 بكسل، والمرسوم جوّاه بس اللي صغير. */
  html.phone-app .header__tools { flex: none; gap: 0; }
  html.phone-app .prefs { gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; }
  html.phone-app .prefs__sep { display: none; }
  html.phone-app .pref { height: 44px; color: var(--text); }
  html.phone-app .pref .prefs__knob {
    top: 4px !important; bottom: 4px !important; left: 0 !important; right: 0 !important;
    inset-inline-start: 0 !important; width: auto !important;
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--glass-brd);
    transition: none;
  }
  html.phone-app .pref--theme { width: 44px; grid-template-columns: 1fr; }
  html.phone-app .pref--theme .prefs__knob { left: 4px !important; right: 4px !important; border-radius: 50%; }
  html.phone-app .pref--theme svg { grid-area: 1 / 1; width: 17px; height: 17px; color: var(--text); transform: none; }
  html.phone-app .pref__sun { visibility: hidden; }
  html.phone-app[data-theme="light"] .pref__sun { visibility: visible; }
  html.phone-app[data-theme="light"] .pref__moon { visibility: hidden; }
  html.phone-app .pref--lang { width: auto; min-width: 44px; grid-template-columns: 1fr; padding-inline: 0; }
  html.phone-app .pref__opt { grid-area: 1 / 1; padding-inline: 13px; color: var(--text); font-size: 13px; letter-spacing: .04em; }
  html.phone-app .pref__opt--ar { font-size: 15px; letter-spacing: 0; }
  html.phone-app[lang="ar"] .pref__opt--ar,
  html.phone-app:not([lang="ar"]) .pref__opt--en { display: none; }

  /* ───────── 2. شريط الأقسام اللي تحت ───────── */
  html.phone-app .tabbar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
    padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: var(--ph-bar);
    border-top: 1px solid var(--glass-brd);
    touch-action: manipulation;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  html.phone-app .tabbar__tab {
    min-width: 0; min-height: 54px; padding-top: 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
    color: var(--text-3); font-size: 11px; font-weight: 600; line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s var(--ease);
  }
  html.phone-app .tabbar__pill {
    display: grid; place-items: center; width: 52px; height: 32px; border-radius: 999px;
    transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
  }
  html.phone-app .tabbar__icon {
    width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  html.phone-app .tabbar__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.phone-app .tabbar__tab[aria-current="page"] { color: var(--accent-txt); }
  html.phone-app .tabbar__tab[aria-current="page"] .tabbar__pill { background: var(--tint-12); box-shadow: inset 0 0 0 1px var(--tint-20); }
  /* «احجز»: كبسولة ليمونية دايمًا، والكلام تحتها بيتلوّن لما تبقى الشغّالة */
  html.phone-app .tabbar__tab--book { color: var(--text); }
  html.phone-app .tabbar__tab--book .tabbar__pill,
  html.phone-app .tabbar__tab--book[aria-current="page"] .tabbar__pill {
    width: 60px; background: var(--accent); color: var(--accent-ink); box-shadow: none;
  }
  html.phone-app .tabbar__tab--book[aria-current="page"] .tabbar__pill { box-shadow: 0 0 0 3px var(--tint-20); }
  html.phone-app .tabbar__tab--book .tabbar__icon { width: 19px; height: 19px; stroke-width: 1.9; }
  html.phone-app .tabbar__tab:active .tabbar__pill { transform: scale(.94); }
  html.phone-app .tabbar__tab:focus-visible { outline-offset: -3px; border-radius: 14px; }

  /* القصة مفتوحة (phone-stories.js): الشريطين بيستخبّوا */
  html.phone-app.story-open .header { transform: translateY(-110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
  html.phone-app.story-open .tabbar { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }

  /* ───────── 3. الحاجات العايمة: مكانها اتنقل ─────────
     السوشيال في الفوتر، الرجوع لفوق = «الرئيسية»، والواتساب = «احجز». */
  html.phone-app #waBtn { display: none !important; }

  /* شريط السوشيال العايم رجع بطلب محمد (2026-10-12): نفس الدوك بتاع الكمبيوتر (بيظهر بعد الهيرو
     — main.js بيحط .is-on)، بس قاعد فوق شريط الأقسام. «لفوق» مش جوّاه هنا لأن «الرئيسية» بتعمل نفس الشغلانة. */
  html.phone-app #dock {
    z-index: 55;
    bottom: calc(var(--phone-tab-h) + 10px);
    padding: 5px 7px; gap: 4px; border-radius: 18px;
    background: var(--surface);
  }
  html.phone-app #dock .dock__top,
  html.phone-app #dock .dock__sep,
  html.phone-app #dock .dock__tip { display: none; }
  html.phone-app #dock .dock__it { width: 44px; height: 44px; }
  html.phone-app #dock .dock__it:hover { transform: none; color: var(--text-2); background: none; }
  html.phone-app #dock .dock__it:active { color: var(--accent-ink); background: var(--accent); }
  html.phone-app.story-open #dock { visibility: hidden; }

  /* كارت «ياسر نزّل حلقة جديدة» رجع بطلب محمد (2026-10-12): phone-shell.js بينقله لـbody
     وبيقعد فوق شريط الأقسام. بيظهر مرة واحدة في نص الصفحة (main.js) وبيختفي لوحده بعد 8 ثواني. */
  html.phone-app body > #storyToast {
    position: fixed; z-index: 55;
    left: 12px; right: 12px; bottom: calc(var(--phone-tab-h) + 76px); /* فوق شريط السوشيال العايم */
    width: auto; max-width: none; transform: none;
    padding: 6px; padding-inline-start: 8px; gap: 2px; border-radius: 18px;
    animation: phToastIn .45s cubic-bezier(.34, 1.56, .64, 1) both;
  }
  html.phone-app body > #storyToast[hidden] { display: none; }
  html.phone-app #storyToast .story__go { flex: 1; min-height: 48px; }
  html.phone-app #storyToast .story__go b { font-size: 12px; }
  html.phone-app #storyToast .story__go small { font-size: 13px; }
  html.phone-app #storyToast .story__close { width: 44px; height: 44px; align-self: center; }
  html.phone-app.story-open #storyToast { visibility: hidden; }
  @keyframes phToastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

  /* ───────── 4. المسافات ───────── */
  html.phone-app main > section,
  html.phone-app footer.footer { scroll-margin-top: var(--phone-top-h); }
  html.phone-app main > section { min-height: 0; padding-block: 56px; }
  /* الصفحة بتخلص فوق شريط الأقسام */
  html.phone-app body footer.footer { padding-bottom: calc(var(--phone-tab-h) + 88px); } /* + شريط السوشيال العايم */

  /* ───────── 5. الهيرو — نفس الهيرو، داخل كله في أول شاشة ─────────
     الكارت بعرض الشاشة، وتحته الكبسولة والعنوان والزرارين وشريط الأرقام الأربعة.
     الكلام التاني (sub و note) مستخبي على الموبايل زي اللوحة. */
  html.phone-app main > section.hero {
    min-height: 0;
    justify-content: flex-start;
    padding-top: calc(var(--phone-top-h) + 12px);
    padding-bottom: 28px;
  }
  html.phone-app .hero__media {
    width: calc(100% - 2 * var(--pad-x)); margin-inline: auto; margin-bottom: 0;
    height: clamp(200px, calc(100vh - 600px), 250px);
    height: clamp(200px, calc(100svh - 600px), 250px);
  }
  html.phone-app .hero__frame { width: 100%; transform: none !important; }
  /* ياسر أكبر شوية جوّه الكارت العريض (زي اللوحة): راسه قريب من حرف الكارت،
     والخط بيعدّي عند ~70% من طوله — يعني إيديه كاملين فوق الزجاج زي الديسكتوب */
  html.phone-app .hero__cut {
    top: 6px; bottom: auto; height: 86%;
  }
  /* يبان من أول لحظة — من غير دخلة (الدخلة كانت بتسيبه شفاف لحد ما GSAP يخلّص) */
  html.phone-app .hero__cut,
  html.phone-app .hero .brands { opacity: 1 !important; transform: none !important; }
  /* والكارت نفسه مرسوم كامل من أول لحظة: الجسم والصبغة والشبكة والخط والنقط
     (دخلة GSAP كانت بتمسحه وترسمه تاني — على موبايل بطيء الكارت كان بيفضى ثانية) */
  html.phone-app .hero .pf__body,
  html.phone-app .hero .pf__tint,
  html.phone-app .hero .pf__grid,
  html.phone-app .hero .pf__now { opacity: 1 !important; }
  html.phone-app .hero .pf__line,
  html.phone-app .hero .pf__glow { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  html.phone-app .hero .pf__dots circle { transform: none !important; }
  /* شريط «مؤسّس» في الكارت العريض: كلام مقروء (11px على الأقل) */
  html.phone-app .hero .brands { gap: 9px; }
  html.phone-app .hero .brands__label { font-size: 11px; letter-spacing: .02em; }
  html.phone-app .hero .brands__one { gap: 5px; }
  html.phone-app .hero .brands__one b { font-size: 12px; }

  html.phone-app .hero__copy > .eyebrow { margin: 16px 0 0; font-size: 12px; padding: 5px 12px; line-height: 1.5; }
  html.phone-app:not([lang="ar"]) .hero__copy > .eyebrow { border-radius: 14px; }
  html.phone-app .hero__title { margin: 12px 0 0; font-size: 25px; line-height: 1.38; }
  html.phone-app:not([lang="ar"]) .hero__title { font-size: 24px; line-height: 1.3; }
  html.phone-app .hero__sub,
  html.phone-app .hero__note { display: none; }
  /* العنوان كله باين من أول لحظة (GSAP بيحط opacity:0 inline — الـimportant بيغلبه) */
  html.phone-app .hero [data-reveal],
  html.phone-app .hero .word,
  html.phone-app .hero [data-stagger] > * { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  html.phone-app .hero .ht__a { overflow: visible; }

  html.phone-app .hero__cta { margin-top: 18px; flex-direction: column; flex-wrap: nowrap; gap: 9px; }
  html.phone-app .hero__cta .btn { width: 100%; flex: none; min-height: 0; height: 50px; padding-block: 0; font-size: 15px; font-weight: 700; }
  html.phone-app .hero__cta .btn--ghost { height: 46px; font-weight: 600; background: none; border: 1.5px solid var(--glass-brd-hi); }

  /* شريط الأرقام: صف واحد، 4 أعمدة متساوية */
  html.phone-app .hero .hstats {
    grid-column: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px; padding: 10px 0 9px;
    border-radius: 18px; border: 1px solid var(--glass-brd);
    background: var(--surface);
  }
  html.phone-app .hero .hstat {
    align-items: center; text-align: center; gap: 2px;
    padding: 0 4px;
    border-top: 0; border-inline-start: 1px solid var(--glass-brd);
  }
  html.phone-app .hero .hstat:first-child { border-inline-start: 0; }
  html.phone-app .hero .hstat b {
    justify-content: center; gap: 3px; white-space: nowrap;
    font-size: 19px; line-height: 1.3;
  }
  html.phone-app .hero .hstat b > span { direction: ltr; unicode-bidi: isolate; }
  html.phone-app .hero .hstat b em { font-size: 11px; }
  html.phone-app .hero .hstat > span { font-size: 11px; line-height: 1.4; }

  /* شريط اللوجوهات: بعد الأرقام، برّه أول شاشة */
  html.phone-app .hero .strip {
    position: relative; inset: auto; width: 100%;
    margin-top: 22px; padding: 6px var(--pad-x);
    background: none;
  }

  /* ───────── 6. السرعة ───────── */
  /* مفيش blur على الموبايل خالص — بيعيد رسم اللي تحته كل فريم */
  html.phone-app *,
  html.phone-app *::before,
  html.phone-app *::after,
  html.phone-app .lb::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* الحاجات اللي كانت زجاج مبلور بقت شبه مصمتة */
  html.phone-app .score { background: var(--surface); }
  /* السكشن اللي برّه الشاشة: حركاته اللانهائية بتقف (phone-shell.js بيحط .ph-off) */
  html.phone-app .ph-off,
  html.phone-app .ph-off *,
  html.phone-app .ph-off *::before,
  html.phone-app .ph-off *::after { animation-play-state: paused !important; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.phone-app .header, html.phone-app .tabbar,
  html.phone-app .tabbar__tab, html.phone-app .tabbar__pill { transition: none; }
  html.phone-app body > #storyToast { animation: none; }
}