/*
=========================================================
الملف      : navbar.mobile.css
القسم      : شريط التنقل — الجوال فقط

المسؤوليات:
✓ كل قواعد الجوال الخاصة بـ Navbar/Logo/القائمة الرئيسية/
  أزرار تسجيل الدخول وإنشاء حساب/Mobile Drawer فقط
✓ كل قاعدة هنا داخل @media(max-width:...) — باستثناء وحيد موثَّق أدناه
  (قاعدة display:none الافتراضية لعناصر Mobile Drawer الجديدة، بنفس
  منطق navbar.css الأصلي: default مخفي بلا شرط + @media يُظهره لاحقاً)

ممنوع:
✗ أي قاعدة Desktop (بدون @media)
✗ تصميم أقسام أخرى غير Navbar (Features/About/Contact/Auth)

مصدر هذا الملف: نُقل بالكامل من modules/shared/mobile.css (وقاعدتين
كانتا متروكتين داخل navbar.css) — استُخرجت قواعد Navbar فقط، ولم يُنسَخ
أي شيء (القواعد الأصلية حُذفت من مصدرها). القواعد المشتركة مع أقسام
أخرى (مثل #home/#features/#about/#contact{scroll-margin-top}، .btn
العام المشترك مع Hero، .lang-toggle الخاص بوحدة اللغة المستقلة) بقيت في
مكانها داخل mobile.css كما هي، ولم تُنقل هنا لأنها ليست حصرية لـ Navbar.

ترتيب الكتل هنا مطابق **حرفياً** لترتيبها الأصلي عبر navbar.css ثم
mobile.css (بنفس الترتيب الذي كانا يُحمَّلان به) — أي تغيير في هذا
الترتيب قد يقلب نتيجة الـ Cascade لبعض الخصائص المتكرِّرة (مثل gap على
.navbar-inner). لا تُعِد ترتيب الكتل أدناه.

عناصر جديدة (Mobile Drawer redesign): .nav-drawer-quickbar/.nav-drawer-welcome/
.nav-drawer-features/.nav-quick-auth-backdrop/.nav-quick-auth-sheet — مخفية
افتراضياً بقاعدة غير مقيَّدة بـ@media أدناه مباشرة (بنفس منطق navbar.css
الأصلي: "مخفي افتراضياً بلا شرط، يُظهره فقط @media(≤768px) لاحقاً في نفس
الملف") حتى تبقى غير مرئية على أي عرض إن تعطّل تحميل هذا الملف بالكامل —
لم تُلمس navbar.css إطلاقاً في هذه المهمة (كل شيء هنا فقط، كما طُلب).
=========================================================
*/

/* Hidden by default (unconditional) — shown only inside the @media
   (max-width:768px) rules further below in this same file. */
.nav-drawer-quickbar,
.nav-drawer-welcome,
.nav-drawer-features,
.nav-quick-auth-backdrop,
.nav-quick-auth-sheet,
.nav-mobile-login {
  display: none;
}

/* =================================================================================================
   [من navbar.css] بقايا @media(≤768px) قديمة — كانت متجاوَزة بالفعل من
   قواعد "MOBILE NAVBAR REDESIGN" أدناه حتى قبل النقل (لأن mobile.css كان
   يُحمَّل بعد navbar.css). نُقلت كما هي بلا حذف حتى لا يتغيّر أي شيء.
   ================================================================================================= */
@media (max-width: 768px) {
  .navbar-inner {
    flex-wrap: wrap;
    gap: 14px;
  }
  .brand { min-width: unset; }
  .header-actions { min-width: unset; }
  nav { gap: 14px; }
}

/* =================================================================================================
   [من navbar.css] التصميم البصري الثابت لزر الـ ☰ — لم يكن مقيَّداً بـ
   @media هناك، لكن أثره الفعلي حصري على الجوال بالكامل: navbar.css نفسه
   يُبقي .nav-hamburger مخفياً display:none افتراضياً على كل الأعراض (تلك
   القاعدة بقيت في navbar.css)، ولا يُعاد إظهاره إلا عبر قاعدة
   "MOBILE NAVBAR REDESIGN" أدناه (display:flex عند ≤768px) — لذا أُدرج
   هنا داخل @media(≤768px) ليلتزم شكلاً بقاعدة "الجوال خلف @media"، بلا
   أي تغيير في القيم أو في السلوك الفعلي على أي عرض.
   ================================================================================================= */
@media (max-width: 768px) {
  .nav-hamburger {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-hamburger-bar {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.92);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* حالة الفتح (تتبدّل عبر JS بإضافة .open) — ☰ يتحول إلى × بحركة GPU بحتة
     (transform + opacity فقط، بلا أي إعادة حساب Layout) */
  .nav-hamburger.open .nav-hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.open .nav-hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger.open .nav-hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* =================================================================================================
   [من mobile.css] MOBILE (≤768px) — الأساسي: القائمة والشعار
   ================================================================================================= */
@media (max-width: 768px) {
  nav,
  .header-actions {
    justify-content: center;
  }

  .brand {
    flex-direction: column;
    text-align: center;
  }

  .logo-icon {
    width: 56px;
    height: 56px;
  }
}

/* =================================================================================================
   [من mobile.css] MOBILE APP POLISH (≤480px) — Header
   -------------------------------------------------------------------------------------------------
   .btn/.btn:hover/.btn:active العامة (هيدر + هيرو + أي زر آخر) بقيت في
   mobile.css لأنها مشتركة صراحة مع Hero — هنا فقط القواعد الخاصة حصراً
   بعناصر Navbar (.header-actions .btn، لا .btn وحدها).
   ================================================================================================= */
@media (max-width: 480px) {
  .navbar-inner {
    padding: 8px 14px;
    gap: 8px;
  }

  .logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .brand {
    gap: 8px;
  }

  .brand-text h2 {
    /* تصغير 15% كما طُلب: 20px × 0.85 = 17px */
    font-size: 17px;
  }

  /* الوصف الفرعي الطويل يُخفى فقط على الشاشات الضيقة جداً — يوفّر مساحة
     رأسية معتبرة ويقلّل الازدحام. النص نفسه غير محذوف من HTML ولا من
     الترجمة — فقط مخفي بصرياً على هذا العرض. */
  .brand-text p {
    display: none;
  }

  nav {
    gap: 10px;
  }

  nav a {
    font-size: 13px;
    /* هدف لمس 44px بلا تغيير الحجم البصري للنص */
    padding: 12px 2px;
    display: inline-flex;
    align-items: center;
  }

  .header-actions {
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  .header-actions .btn {
    flex: 1;
    min-width: 120px;
  }

  /* تخفيف (لا إزالة) لـ blur الثقيل على الجوال فقط؛ رسوم GPU أخف = تمرير
     أسلس على أجهزة متوسطة */
  header {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* =================================================================================================
   [من mobile.css] ≤339px — أزرار الهيدر الضيقة جداً
   ================================================================================================= */
@media (max-width: 339px) {
  .header-actions .btn {
    font-size: 12px;
    padding: 0 10px;
    white-space: nowrap;
  }
}

/* =================================================================================================
   [من mobile.css] MOBILE UI/UX FINAL POLISH (≤480px) — Navbar
   ================================================================================================= */
@media (max-width: 480px) {
  .navbar-inner { padding: 8px 12px; gap: 8px; }
  .logo-icon { width: 38px; height: 38px; }
  nav { gap: 8px; }
  .header-actions .btn {
    height: 44px;
    min-height: 44px;
  }
  .header-actions .btn {
    flex: 1 1 0%;
    min-width: 0;
  }
}

/* =================================================================================================
   [من mobile.css] MOBILE NAVBAR REDESIGN (≤768px) — Premium fintech app, mobile only
   -------------------------------------------------------------------------------------------------
   هيدر واحد فقط <header>، بلا أي عنصر مكرَّر: صفّان داخل نفس .navbar-inner
   (نفس <header> اللاصق الوحيد):
     - الصفّ 1: ☰ (يمين) | الشعار المتحرك + الاسم (وسط) | اللغة (يسار).
     - الصفّ 2: إنشاء حساب | تسجيل الدخول — نفس #start-btn/#login-btn
       الأصليين بالضبط (داخل .header-actions)، مُعاد وضعهما فقط عبر
       .header-actions{display:contents} + CSS Grid — بلا أي زرّ جديد
       وبلا أي تكرار في DOM.
   روابط nav العلوية (nav{display:none}) تنتقل بصرياً فقط إلى Drawer
   ينزلق من اليمين (#navDrawer، نفس الروابط فقط — لا أزرار دخول/تسجيل
   بداخله)، يُفتح عبر ☰ (#navHamburger) — منطق الفتح/الإغلاق في navbar.js.
   سطح المكتب (>768px) غير متأثر إطلاقاً: nav/.header-actions يبقيان
   صندوقاً عادياً display:flex كما كانا تماماً، وكل العناصر الجديدة
   (☰ / Drawer / نقطة المدار المضيئة) مخفية افتراضياً في navbar.css ولا
   تظهر إلا هنا.
   ================================================================================================= */
@media (max-width: 768px) {

  /* ── HEADER SHELL — Glass premium look (يحتوي الآن الصفّين معاً) ── */
  header {
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  /* ── ONE navbar, ONE set of DOM elements — لا تكرار إطلاقاً. تخطيط بصفّين
     عبر CSS Grid وحدها: الصفّ الأول (☰ | الشعار | اللغة) والصفّ الثاني
     (إنشاء حساب | تسجيل الدخول) كلاهما داخل .navbar-inner نفسه (داخل نفس
     <header> اللاصق الوحيد). .header-actions{display:contents} "يُفكّك"
     الغلاف بصرياً فقط (البنية الشجرية للـ DOM لا تتغيّر) بحيث تصبح عناصره
     الثلاثة (اللغة/تسجيل الدخول/إنشاء حساب) عناصر Grid مستقلة مباشرة داخل
     .navbar-inner — فتُعاد صياغة مواضعها فقط، بلا أي عنصر جديد وبلا أي
     تكرار لأي زر أو رابط. على سطح المكتب (>768px) هذه القاعدة غير مفعّلة
     إطلاقاً، فيبقى .header-actions صندوقاً عادياً كما كان تماماً. */
  .navbar-inner {
    display: grid;
    /* minmax(0,1fr) لا repeat(6,1fr) وحدها — بلا هذا يفرض عرض ☰ الثابت
       (44px) على العمود 1 أن يتّسع فوق حصته العادلة عند ≤338px تقريباً
       (حيث 248px÷6=41.3px<44px)، فيصبح "إنشاء حساب" (أعمدة 1-3، يتضمّن
       العمود المتّسع) أعرض من "تسجيل الدخول" (أعمدة 4-6) بفارق قابل
       للقياس فعلياً حتى 3px+ عند 320px — تأكَّد الفارق مطابق حرفياً في
       Chromium وWebKit معاً (ليس اختلاف محرّك، بل نتيجة حسابية للـ Grid).
       minmax(0,1fr) يقيّد التتبُّع نفسه بحدّ أدنى 0 صراحةً (بمعزل عن حجم
       المحتوى)، فيبقى العمود ضمن حصّته العادلة، بينما الزرّ نفسه يظل 44px
       بصرياً (حجمه الخاص لا يتأثر) — تحقّق فعلياً: الفارق أصبح 0 على كل
       الأعراض 320-430px بعد هذا التغيير. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    column-gap: 8px;
    padding: 14px 16px;
  }

  /* ── الصفّ الأول: ☰ يمين (RTL start) ──
     min-width:0 ضروري هنا: بلا هذا، عرض الزر الثابت (44px) يفرض على عمود
     Grid رقم 1 أن يتّسع ليطابقه (أوسع من حصته العادلة repeat(6,1fr))، مما
     يجعل عمودي الصفّ الثاني غير متساويين فعلياً — إنشاء حساب (أعمدة 1-3،
     يتضمّن العمود الموسَّع) يصبح أعرض قليلاً من تسجيل الدخول (أعمدة 4-6)
     بفارق قابل للقياس فعلياً (~3-4px، تأكَّد عبر WebKit). min-width:0 يمنع
     تمدُّد العمود، فيبقى الزر 44px بصرياً (حجمه الخاص لا يتأثر) بينما
     تتساوى أعمدة الصفّ الثاني تماماً. */
  .nav-hamburger {
    display: flex;
    grid-row: 1;
    grid-column: 1 / 2;
    justify-self: start;
    min-width: 0;
  }

  /* ── الصفّ الأول: الشعار + الاسم في المنتصف، بلا Tagline ── */
  .brand {
    grid-row: 1;
    grid-column: 2 / 7;
    justify-self: center;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .brand-text p { display: none; }
  .brand-text h2 { font-size: 16px; }

  .logo-icon { width: 40px; height: 40px; }

  /* التصميم الفعلي للحلقة المدارية (.logo-orbit/.logo-orbit-dot) وقواعد
     ::before/::after الخاصة بالحلقتين انتقلت بالكامل إلى قسم "MOBILE HEADER
     REDESIGN v2" أسفل هذا الملف (نفس المحدِّدات، لاحقة في الملف فتفوز
     دائماً بترتيب الـ Cascade) — أُزيلت هذه النسخة القديمة هنا عمداً بدل
     تركها معطَّلة صامتة، تجنُّباً لوجود تعريفين متناقضين ظاهرياً لنفس
     العناصر (3s هنا مقابل 10s هناك) قد يُضلِّلا قارئاً مستقبلياً. */

  /* ── روابط nav العلوية تختفي بالكامل — نسختها الوحيدة الظاهرة على
     الجوال هي داخل #navDrawer (نفس الروابط، بلا تكرار للأزرار) ── */
  nav { display: none; }

  /* ملاحظة: .header-actions (اللغة + تسجيل الدخول/إنشاء حساب) لم تعد
     تتموضع هنا كعناصر Grid داخل .navbar-inner — navbar.js ينقل العنصر
     كاملاً (نفس العقدة، بلا تكرار) إلى #navDrawerFooter عند ≤768px. راجع
     تنسيقها الجديد أسفل قسم .nav-drawer-footer.

     CLS FIX: قبل تشغيل navbar.js (بضع عشرات المللي ثانية عند التحميل)،
     .header-actions لا يزال ابناً لـ .navbar-inner فعلياً في الـDOM —
     وبما أن .header-actions{display:contents} أُزيلت (لم تعد مطلوبة)،
     فسيُموضَع تلقائياً كصفّ Grid ضمني إضافي (auto-placement) أسفل الصفّ
     الأول، فيتضخّم ارتفاع الهيدر لحظياً قبل أن ينقله JS — الحل: إخفاؤه
     بينما لا يزال داخل .navbar-inner (فور أول Paint، بلا أي فجوة زمنية)؛
     بمجرد أن ينقله navbar.js إلى #navDrawerFooter لم يعد ابناً
     لـ.navbar-inner فتتوقف هذه القاعدة عن الانطباق تلقائياً، وتُظهره
     حينها قاعدة .nav-drawer-footer .header-actions أدناه. */
  .navbar-inner > .header-actions {
    display: none;
  }

  /* ── DRAWER BACKDROP ── */
  .nav-drawer-backdrop {
    /* navbar.css يضبطها display:none افتراضياً لسطح المكتب — لازم تصريح
       صريح هنا وإلا تبقى مخفية حتى لو أزال JS خاصية hidden/أضاف open */
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9400;
    background: rgba(2, 8, 15, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── DRAWER PANEL — ينزلق من اليمين، Glass premium ── */
  .nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    /* inset-inline-START (not -end): في RTL معكوسة — inline-end تعني الطرف
       الفيزيائي الأيسر (لأن اتجاه RTL يبدأ من اليمين وينتهي يسار)، فكانت
       تُلصق اللوحة بحافة الشاشة اليسرى بدل اليمنى، مما يجعل translateX(100%)
       يدفعها لليمين فقط جزئياً (بمقدار عرضها) بدل إخفائها بالكامل. */
    inset-inline-start: 0;
    height: 100%;
    /* Binance/Coinbase-style width + glass surface — dark, softly transparent,
       heavier blur than the previous iteration so the page content behind it
       reads as genuine frosted glass rather than a near-opaque panel. */
    width: 82vw;
    z-index: 9500;
    background: linear-gradient(180deg, rgba(8, 16, 26, 0.9), rgba(4, 10, 18, 0.88));
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
    /* inline-END (لا -start) — نفس منطق inset أعلاه: الحافة الداخلية
       (اليسرى فعلياً، المواجهة للمحتوى) في RTL هي inline-end لا inline-start */
    border-inline-end: 1px solid rgba(53, 217, 255, 0.28);
    border-start-end-radius: 24px;
    border-end-end-radius: 24px;
    box-shadow: -28px 0 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(53, 217, 255, 0.1);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.32, 1);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-drawer.open {
    transform: translateX(0);
  }

  /* .nav-drawer's own transform + backdrop-filter create a containing block
     for position:fixed descendants — breaks .lang-menu's ≤400px bottom-sheet
     (which needs the viewport as its containing block) now that the language
     switcher lives inside this drawer. Neutralize both, but only while that
     sheet is actually open — no visible effect since the drawer is already
     fully open (translateX(0)) whenever this can match. */
  .nav-drawer.open:has(.lang-dropdown.open) {
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* مسافة أكبر من السابق بين بطاقة الشعار وزر الإغلاق — لا تعتمد فقط على
       space-between (الذي يصبح صفراً إن ضاق المحتوى)، بل حد أدنى مضمون */
    gap: 26px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* يمنع هذا الصفّ من التمدّد أعرض من عرض اللوحة نفسها (82vw) — إن حاول
       محتوى غير قابل للانكماش (مثل نص العنوان الفرعي الطويل بلا التفاف)
       فرض عرض أكبر، فسيُقصّ هنا بدل أن يفيض خارج .nav-drawer (الذي
       overflow:visible)، وهو ما كان يدفع زر الإغلاق بصرياً خارج اللوحة
       المخفية ليتراكب مع ☰ في الهيدر المطوي. */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .nav-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }
  .nav-drawer-brand picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: radial-gradient(circle at center, rgba(53, 217, 255, 0.16), rgba(53, 217, 255, 0.02));
    border: 1px solid rgba(53, 217, 255, 0.16);
    box-shadow: 0 0 16px rgba(53, 217, 255, 0.12);
  }
  .nav-drawer-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }
  .nav-drawer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .nav-drawer-brand-name {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-drawer-brand-subtitle {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    cursor: pointer;
    /* Glow/Shadow ناعمان دائمَين في حالة السكون، لا فقط عند hover */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
      transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  }
  .nav-drawer-close:hover {
    background: rgba(53, 217, 255, 0.16);
    border-color: rgba(53, 217, 255, 0.55);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 16px rgba(53, 217, 255, 0.4);
  }
  .nav-drawer-close:active {
    transform: scale(0.9);
  }
  .nav-drawer-close svg { width: 19px; height: 19px; }

  /* ── QUICK BAR — لغة + دخول سريع في صفّ واحد (.lang-dropdown مُعاد وضعه هنا
     عبر navbar.js، نفس العقدة، بلا تكرار) ── */
  .nav-drawer-quickbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-drawer-quickbar .lang-dropdown {
    flex: 1;
    min-width: 0;
  }
  .nav-drawer-quickbar .lang-toggle {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    border-radius: 14px;
  }
  .nav-drawer-quick-login {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
    color: #00131e;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(53, 217, 255, 0.25);
    transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  .nav-drawer-quick-login svg { width: 18px; height: 18px; flex-shrink: 0; }
  .nav-drawer-quick-login:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 20px rgba(53, 217, 255, 0.4);
  }
  /* Ripple-like tap feedback (CSS-only، بلا JS جديد) — وميض شعاعي من المركز */
  .nav-drawer-quick-login::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
  }
  .nav-drawer-quick-login:active {
    transform: scale(0.97);
  }
  .nav-drawer-quick-login:active::after {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.35s ease, opacity 0.5s ease;
  }

  .nav-drawer-links {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 6px 12px;
    overflow-y: auto;
  }
  .nav-drawer-links a {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    /* ~58px كما طُلب */
    min-height: 58px;
    padding: 10px 10px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
  }
  /* Divider رفيع بين كل عنصر والذي يليه (بلا عنصر DOM إضافي) — لا حدّ تحت آخر رابط */
  .nav-drawer-links a:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-drawer-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
  }
  .nav-drawer-icon svg {
    width: 20px;
    height: 20px;
  }
  .nav-drawer-label {
    flex: 1;
    min-width: 0;
  }
  /* سهم صغير في الطرف الآخر من كل رابط */
  .nav-drawer-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .nav-drawer-arrow svg { width: 15px; height: 15px; }
  .nav-drawer-links a:hover {
    background: rgba(53, 217, 255, 0.08);
    color: #ffffff;
  }
  .nav-drawer-links a:hover .nav-drawer-icon {
    color: var(--cyan);
  }
  .nav-drawer-links a:hover .nav-drawer-arrow {
    color: var(--cyan);
    transform: translateX(-2px);
  }
  .nav-drawer-links a:active {
    background: rgba(53, 217, 255, 0.16);
    transform: scale(0.98);
  }
  .nav-drawer-links a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -2px;
    background: rgba(53, 217, 255, 0.1);
    color: var(--cyan);
  }
  /* Ripple-like tap feedback (CSS-only) — نفس أسلوب زر الدخول السريع */
  .nav-drawer-links a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(53, 217, 255, 0.28) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
  }
  .nav-drawer-links a:active::after {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.35s ease, opacity 0.5s ease;
  }

  /* ── DRAWER FOOTER — بطاقة ترحيب + شريط مزايا صغير، أسفل اللوحة ── */
  .nav-drawer-footer {
    margin-top: auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-drawer-welcome {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(53, 217, 255, 0.12), rgba(53, 217, 255, 0.03));
    border: 1px solid rgba(53, 217, 255, 0.18);
  }
  .nav-drawer-welcome-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
  }
  .nav-drawer-welcome-wave {
    font-size: 17px;
    line-height: 1;
  }
  .nav-drawer-welcome-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
  }
  /* .header-actions (نفس العقدة، منقولة عبر navbar.js عند ≤768px) — تحتوي
     الآن فقط #login-btn/#start-btn بعد أن انتقل مبدّل اللغة إلى QUICK BAR */
  .nav-drawer-welcome-buttons .header-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .nav-drawer-welcome-buttons #login-btn,
  .nav-drawer-welcome-buttons #start-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50px;
    min-height: 50px;
    border-radius: 16px;
    font-size: 14px;
  }
  /* Ripple-like tap feedback (CSS-only) */
  .nav-drawer-welcome-buttons #login-btn::after,
  .nav-drawer-welcome-buttons #start-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
  }
  .nav-drawer-welcome-buttons #login-btn:active::after,
  .nav-drawer-welcome-buttons #start-btn:active::after {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.35s ease, opacity 0.5s ease;
  }

  /* ── FEATURE STRIP — 3 مزايا صغيرة أسفل البطاقة ── */
  .nav-drawer-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
  }
  .nav-drawer-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
  }
  .nav-drawer-feature svg {
    width: 22px;
    height: 22px;
    color: var(--cyan);
    filter: drop-shadow(0 0 6px rgba(53, 217, 255, 0.35));
  }
  .nav-drawer-feature span {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
  }

  /* body: يمنع تمرير الخلفية أثناء فتح الـ Drawer (يُبدَّل عبر JS) */
  body.nav-drawer-open {
    overflow: hidden;
  }
}

/* =================================================================================================
   QUICK AUTH SHEET (≤768px) — small bottom sheet opened by the new
   #navDrawerQuickLogin shortcut in the quick bar. Two choices only
   (Log in / Create account), both call the existing global
   openAuthModal(type) — see navbar.js. Independent of the drawer's own
   open state (drawer stays mounted underneath; navbar.js also closes it
   when an option is picked, for a clean handoff into the real auth modal).
   ================================================================================================= */
@media (max-width: 768px) {
  .nav-quick-auth-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: rgba(2, 8, 15, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-quick-auth-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-quick-auth-sheet {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9700;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, rgba(10, 20, 33, 0.96), rgba(4, 10, 18, 0.98));
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(53, 217, 255, 0.16);
    border-bottom: none;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1);
  }
  .nav-quick-auth-sheet.open {
    transform: translateY(0);
  }

  .nav-quick-auth-handle {
    width: 40px;
    height: 4px;
    margin: 2px auto 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .nav-quick-auth-option {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  .nav-quick-auth-option::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
  }
  .nav-quick-auth-option:active {
    transform: scale(0.98);
  }
  .nav-quick-auth-option:active::after {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.35s ease, opacity 0.5s ease;
  }
  .nav-quick-auth-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
  }
  .nav-quick-auth-option-icon svg { width: 19px; height: 19px; }
  .nav-quick-auth-option-primary {
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
    border-color: transparent;
    color: #00131e;
  }
  .nav-quick-auth-option-primary:hover {
    filter: brightness(1.05);
  }
}

/* =================================================================================================
   [من mobile.css] ☰/Drawer close focus ring — كانت آخر قاعدة غير مقيَّدة
   بـ @media في الملف الأصلي، لكن أثرها حصري على الجوال بالكامل (العناصر
   المستهدفة غير مرئية إطلاقاً على سطح المكتب). أُدرجت هنا داخل
   @media(≤768px) لتبقى ملتزمة بقاعدة "كل شيء في *.mobile.css خلف @media"،
   بلا أي تغيير في القيم أو في متى تُطبَّق فعلياً.
   ================================================================================================= */
@media (max-width: 768px) {
  .nav-hamburger:focus-visible,
  .nav-drawer-close:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }
}

/* =================================================================================================
   MOBILE HEADER REDESIGN v2 — single row (☰ | الشعار + الاسم | اللغة + دخول)
   -------------------------------------------------------------------------------------------------
   طلب جديد: صفّ واحد فقط على الجوال (≤768px) — لا صفّ ثانٍ كما في "MOBILE
   NAVBAR REDESIGN" أعلاه: ☰ دائري زجاجي (يمين) | شعار + اسم (وسط، بلا أي
   حركة/دوران/نبض) | زر لغة + زر دخول سريع زجاجيان (يسار). يُبنى فوق شبكة
   .navbar-inner القائمة أعلاه بإعادة تعريف نفس الخصائص (grid-template-columns/
   padding على .navbar-inner، grid-column على .nav-hamburger/.brand) — لاحقة
   في الملف فتفوز بترتيب الـ Cascade، بلا حاجة لحذف أو إعادة ترتيب أي كتلة
   سابقة (كل خاصية أخرى غير المعاد تعريفها هنا — display:grid، align-items،
   justify-self:start على ☰، إلخ — تبقى موروثة من الكتلة أعلاه كما هي).

   عنصر جديد وحيد في الـ DOM: #navHeaderLoginBtn (navbar.html) — يفتح نفس
   #navQuickAuthSheet الموجود مسبقاً بالكامل (الربط الإضافي في navbar.js)،
   منفصل تماماً عن #login-btn (الذي يبقى يُنقَل كما كان تماماً إلى تذييل
   الـ Drawer). لا تكرار آخر: .lang-dropdown نفسه (نفس العقدة الحية) غيّر
   navbar.js وجهته على الجوال فقط من #navDrawerQuickbar إلى .navbar-inner
   نفسها — يبقى ظاهراً دائماً هنا بدل الاختفاء خلف ☰/Drawer.

   ⚠ إصلاح استباقي لعلّة "containing block" الموثَّقة أعلاه (قرب سطر 407،
   .nav-drawer.open:has(.lang-dropdown.open)): بما أن .lang-dropdown صار
   يعيش الآن داخل <header> (الذي يملك backdrop-filter غير مشروط في
   navbar.css)، فإن .lang-menu (تتحول إلى position:fixed عند ≤400px في
   language_dropdown.css) كانت ستنكسر بنفس العلة تماماً — fixed تصبح نسبية
   لصندوق <header> بدل نافذة العرض كلها. الحل هنا: تحييد backdrop-filter لـ
   <header> نفسه على الجوال فقط (يُستبدل بخلفية شبه صلبة مطابقة لتوكن
   التصميم المطلوب #07131b) — لا حاجة لها بعد الآن أصلاً، فالخلفية الجديدة
   شبه صلبة بذاتها. .nav-drawer/.nav-quick-auth-sheet يبقيان خارج <header>
   تماماً كما كانا (غير متأثرين بهذا التغيير أصلاً).
   ================================================================================================= */
@media (max-width: 768px) {
  :root {
    /* توكنات تصميم خاصة بالهيدر المضغوط على الجوال فقط — نطاقها محصور هنا
       عبر @media، فلا تُسرّب أي شيء لسطح المكتب. لا تُعاد تعريف --cyan/--bg-2
       العامة (modules/shared/variables.css) — تلك تبقى كما هي تماماً. */
    --mh-bg: #07131b;
    --mh-accent: #18d6ff;
    --mh-text: #ffffff;
    --mh-border: rgba(24, 214, 255, 0.25);
    --mh-blur: 16px;
    --mh-radius: 18px;
    --mh-height: 70px;
    --mh-pad: 16px;
  }

  header {
    /* انظر شرح "containing block" أعلاه — يُلغى هنا فقط (الجوال)، مصدر
       الـ frosted-glass الآن الخلفية شبه الصلبة أدناه + الأزرار الزجاجية
       الفردية (☰/لغة/دخول) التي تحمل blur خاصاً بها. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(7, 19, 27, 0.94);
    border-radius: 0 0 var(--mh-radius) var(--mh-radius);
    border-bottom: 1px solid var(--mh-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  /* ~70px: 48px (قطر ☰، أطول عنصر في الصفّ) + 11px أعلى + 11px أسفل */
  .navbar-inner {
    grid-template-columns: 48px minmax(0, 1fr) auto 48px;
    column-gap: 8px;
    padding: 11px var(--mh-pad);
  }

  /* ── ☰ يمين (RTL start): دائرة زجاجية 48×48 بدل الشكل الشفاف السابق ── */
  .nav-hamburger {
    grid-column: 1 / 2;
    position: relative;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(24, 214, 255, 0.08);
    border: 1px solid var(--mh-border);
    -webkit-backdrop-filter: blur(var(--mh-blur));
    backdrop-filter: blur(var(--mh-blur));
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  .nav-hamburger:hover {
    background: rgba(24, 214, 255, 0.16);
    border-color: rgba(24, 214, 255, 0.45);
  }
  .nav-hamburger:active {
    transform: scale(0.94);
  }
  /* Ripple بحتة عبر CSS، بلا JS/DOM إضافي — دائرة توهج تتمدد من المركز عند
     الضغط ثم تتلاشى عند الرفع. @media(prefers-reduced-motion:reduce) في
     modules/shared/animations.css (*,*::before,*::after) يقصّر كل
     transition/animation هنا تلقائياً — لا حاجة لقاعدة إضافية هنا. */
  .nav-hamburger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 214, 255, 0.5), transparent 70%);
    opacity: 0;
    transform: scale(0.3);
    transition: transform 0.5s ease, opacity 0.6s ease;
    pointer-events: none;
  }
  .nav-hamburger:active::after {
    opacity: 1;
    transform: scale(1.5);
    transition: transform 0.05s ease, opacity 0.05s ease;
  }

  /* ── الشعار + الاسم في المنتصف ──
     BUG FIX (التصاق الشعار بزر ☰): .brand عنصر Grid بـ justify-self:center
     (موروثة)، فهو يتمركز بحجم محتواه الطبيعي داخل عموده بدل التمدد ليملأه
     — هذا يعني أن minmax(0,1fr) على العمود لا يمنع فعلياً تجاوز .brand
     لحدود عموده (كان الافتراض الخاطئ في التعليق الأصلي أعلاه)، فيتداخل
     فعلياً مع عمود ☰ عند العروض الضيقة (تحقّق: تداخل فعلي -11px عند 320px،
     وتلاصق 4px فقط عند 375px، بدل الفجوة 8px المقصودة من column-gap).
     max-width:100% يقيّد .brand بعرض عموده فعلياً (⁠النسبة المئوية لعنصر
     Grid تُحسَب من مساحة العمود)، و min-width:0 (هنا وعلى .brand-text
     أدناه) يزيل الحد الأدنى التلقائي الذي كان يمنع h2 (white-space:nowrap)
     من الانكماش — فيعمل text-overflow:ellipsis كما صُمِّم أصلاً، ويبقى
     .brand ضمن حدود عموده دوماً مهما ضاق العرض. */
  .brand {
    grid-column: 2 / 3;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
  }
  .brand-text {
    min-width: 0;
  }
  .brand-text h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--mh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* يُلغي نبض logoGlow (@keyframes في animations.css) — الشعار (<img> نفسه)
     يستقرّ على حالته الأولى الثابتة، بلا أي دوران أو نبض إطلاقاً، بلا أي
     لمس لـ navbar.css. هذا الجزء من الطلب السابق ("الشعار ثابت تماماً")
     ما زال قائماً — فقط الحلقة المدارية حوله (أدناه) عادت.
     BUG FIX (توسيط غير دقيق): <picture> كان بلا حجم صريح داخل حاوية Flex،
     بينما <img> يرث من navbar.css سطح المكتب width/height:82% كنسبة مئوية
     — نسبة مئوية لعنصر داخل غلاف picture غير محدَّد الحجم بذاته تُحل بطريقة
     غامضة (تحقّق فعلي: صندوق picture انتهى 38×35px، غير مربّع، رغم أن
     الصورة المصدر نفسها مربّعة 128×128). التثبيت هنا بحجم بكسل صريح
     ومطابق تماماً بين picture وimg يزيل هذا الغموض نهائياً، فيتوسّط الشعار
     بدقة عبر align-items/justify-content:center الموجودتين أصلاً على
     .logo-icon. */
  .logo-icon picture {
    display: block;
    width: 27px;
    height: 27px;
  }
  .logo-icon img {
    width: 100%;
    height: 100%;
    animation: none;
  }

  /* ── حلقة مدارية Premium — دائرة داكنة + حلقتان رفيعتان + توهج سيان هادئ
     ثابت + نقطة واحدة مضيئة تدور (الشعار نفسه لا يتحرك إطلاقاً، أعلاه).
     كل الألوان من --mh-accent (#18d6ff) الموحَّد لهذا الهيدر — لا ألوان
     جديدة، لا لمس لـ variables.css. ── */
  .logo-icon {
    /* تصغير طفيف لحاوية الشعار (40px → 36px) — الحلقتان أدناه (inset:0/6px)
       والحلقة المدارية (inset:0) تتناسبان تلقائياً مع الحجم الجديد */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* دائرة داكنة تنسجم مع خلفية الهيدر --mh-bg، مع توهج مركزي خفيف جداً */
    background: radial-gradient(circle at 50% 42%, rgba(24, 214, 255, 0.1), var(--mh-bg) 72%);
    /* الحد الخاص بالحاوية نفسها يبقى بلا لون بارز — الحلقتان البصريتان
       أدناه (::before/::after) هما من يحملان التصميم، لا الحاوية */
    border-color: transparent;
    /* توهج سيان ناعم وثابت (لا نبض) — glow خفيف احترافي لا bloom قوي */
    box-shadow: 0 0 10px rgba(24, 214, 255, 0.22), inset 0 0 6px rgba(24, 214, 255, 0.06);
    /* navbar.css الأصلي (سطح المكتب) يضبط overflow:hidden على هذا العنصر
       لقصّ الصورة على الزوايا الدائرية هناك — على الجوال الصورة أصغر من
       الحاوية بالفعل (82%، متمركزة) فلا حاجة للقصّ، وإبقاء hidden كان
       يقصّ توهج ::before الطفيف عند الحافة (box-shadow لعنصر ابن يُقصّ
       بواسطة overflow:hidden لعنصر أب يتجاوز حدوده). */
    overflow: visible;
  }
  /* الحلقة الأولى: رفيعة وساطعة، ملاصقة لحافة الدائرة تماماً (inset:0) */
  .logo-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* تعطيل توهج ::before الأصلي لسطح المكتب (blur+background) — هنا فقط
       حلقة حدّ رفيعة، بلا أي تأثير blur ثقيل */
    background: none;
    filter: none;
    border: 1px solid rgba(24, 214, 255, 0.65);
    box-shadow: 0 0 3px rgba(24, 214, 255, 0.35);
    z-index: 0;
  }
  /* الحلقة الثانية: أخفت وأكثر انكماشاً للداخل — عمق بصري خفيف بلا ازدحام */
  .logo-icon::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(24, 214, 255, 0.22);
    z-index: 0;
    pointer-events: none;
  }

  /* نقطة واحدة فقط تدور حول الشعار — الغلاف (.logo-orbit) هو من يدور
     (transform فقط، GPU-only)، لا الشعار نفسه ولا النقطة تتغيّر حجماً/شفافية.
     مدة 10s ضمن المدى المطلوب (8–12s)، خطّية وبلا توقف — توهج ثابت غير
     نابض. @keyframes spin مُعاد استخدامها من animations.css (لا تكرار). */
  .logo-orbit {
    display: block;
    position: absolute;
    inset: 0;
    animation: spin 10s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: none;
    z-index: 2;
  }
  .logo-orbit-dot {
    position: absolute;
    top: 1px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--mh-accent);
    box-shadow: 0 0 5px 1.5px rgba(24, 214, 255, 0.6);
  }

  /* ── اللغة + الدخول السريع، يسار (RTL end) ──
     .lang-dropdown نفس العقدة الحية (انتقلت هنا عبر navbar.js، بدل
     #navDrawerQuickbar كما كانت سابقاً) — أصبحت عنصر Grid مستقلاً بذاتها. */
  .navbar-inner > .lang-dropdown {
    grid-row: 1;
    grid-column: 3 / 4;
    justify-self: center;
  }
  .navbar-inner > .lang-dropdown .lang-toggle {
    height: 42px;
    max-width: 92px;
    padding: 0 10px;
    gap: 4px;
    border-radius: 14px;
    background: rgba(24, 214, 255, 0.08);
    border: 1px solid var(--mh-border);
    -webkit-backdrop-filter: blur(var(--mh-blur));
    backdrop-filter: blur(var(--mh-blur));
    color: var(--mh-text);
    font-size: 11.5px;
  }
  .navbar-inner > .lang-dropdown .lang-globe {
    width: 14px;
    height: 14px;
    color: var(--mh-accent);
    opacity: 0.9;
  }
  .navbar-inner > .lang-dropdown .lang-chevron {
    width: 9px;
    height: 9px;
  }
  .navbar-inner > .lang-dropdown .lang-current {
    max-width: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── زر دخول سريع جديد بالكامل (icon-only، 48px مطابق لعرض ☰) — منفصل عن
     #login-btn، يفتح نفس #navQuickAuthSheet الموجود مسبقاً (navbar.js) ── */
  .nav-mobile-login {
    display: flex;
    grid-row: 1;
    grid-column: 4 / 5;
    justify-self: center;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 42px;
    border-radius: 14px;
    background: rgba(24, 214, 255, 0.08);
    border: 1px solid var(--mh-border);
    -webkit-backdrop-filter: blur(var(--mh-blur));
    backdrop-filter: blur(var(--mh-blur));
    color: var(--mh-text);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  .nav-mobile-login svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  /* نص data-i18n="nav.login" المرافق يبقى في الـ DOM (قارئات الشاشة/الاسم
     المتاح للزر) — مخفي بصرياً فقط عند هذا الحجم المضغوط (48px عرض) */
  .nav-mobile-login span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
  }
  .nav-mobile-login:hover {
    background: rgba(24, 214, 255, 0.16);
    border-color: rgba(24, 214, 255, 0.45);
  }
  .nav-mobile-login:active {
    transform: scale(0.94);
  }
}

/* =================================================================================================
   MOBILE HEADER REDESIGN v2 — ضبط دقيق للأعراض الضيقة جداً (≤400 / ≤360 / ≤340)
   -------------------------------------------------------------------------------------------------
   ☰ (48px ثابت) والدخول (48px ثابت) يبقيان كما هما على كل الأعراض — العنصر
   الوحيد القابل للانكماش هو زر اللغة (max-width) والاسم/الفجوات في .brand
   (minmax(0,1fr) يمنع أي overflow فعلياً مهما ضاق العرض).
   ================================================================================================= */
@media (max-width: 400px) {
  .navbar-inner > .lang-dropdown .lang-toggle {
    max-width: 84px;
  }
}
@media (max-width: 360px) {
  .navbar-inner {
    column-gap: 6px;
  }
  .brand {
    gap: 8px;
  }
  .brand-text h2 {
    font-size: 14px;
  }
  .navbar-inner > .lang-dropdown .lang-toggle {
    max-width: 78px;
    padding: 0 8px;
  }
  .navbar-inner > .lang-dropdown .lang-current {
    max-width: 32px;
  }
}
@media (max-width: 340px) {
  .navbar-inner > .lang-dropdown .lang-toggle {
    max-width: 72px;
    padding: 0 6px;
  }
  .navbar-inner > .lang-dropdown .lang-current {
    max-width: 26px;
  }
  .brand-text h2 {
    font-size: 13px;
  }
}

/* =================================================================================================
   HEADER LANGUAGE MENU — منع Overflow أفقي (≤768px)
   -------------------------------------------------------------------------------------------------
   .lang-menu (لوحة القائمة، 220px، من language_dropdown.css — لم يُلمَس ذلك
   الملف) تتموضع افتراضياً عبر inset-inline-end:0 نسبةً لصندوق .lang-toggle
   الخاص بها. كانت آمنة سابقاً لأن .lang-toggle كان إما في أقصى يمين الهيدر
   (سطح المكتب) أو بعرض كامل داخل تذييل الـ Drawer. الآن — بعد أن أصبح
   .lang-dropdown عنصر Grid مضغوطاً في مُنتصف الهيدر المطوي تقريباً (عمود 3
   من 4) — تمتد اللوحة (220px) يساراً من صندوق ضيق (≤92px)، فتخرج فعلياً
   خارج حدود الشاشة عند أي عرض >400px (حيث تكتفي @media(max-width:400px)
   الأصلية في language_dropdown.css بتحويلها لـ Bottom Sheet). الحل: تمديد
   نفس معاملة الـ Bottom Sheet لتشمل هذا السياق تحديداً على كامل مدى الجوال
   (≤768px)، بمحدِّد أكثر تخصيصاً (.navbar-inner > .lang-dropdown .lang-menu)
   يفوز على القاعدة الأعم في language_dropdown.css دون تعديل ذلك الملف
   إطلاقاً. toggleLangDropdown()/selectLanguage() غير متأثرين — تغيير CSS
   بحت في headers-context فقط.
   ================================================================================================= */
@media (max-width: 768px) {
  .navbar-inner > .lang-dropdown .lang-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100%;
    max-height: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .navbar-inner > .lang-dropdown.open .lang-menu {
    max-height: 60vh;
  }
}