.mt-topbar{position:fixed;top:0;left:0;right:0;z-index:99999;background:rgba(10,14,26,.92);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(212, 175, 55,.18);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:transform .3s ease;font-family:'Cairo',sans-serif;direction:rtl}
    [data-theme="light"] .mt-topbar, body:not([data-theme="dark"]) .mt-topbar{background:rgba(247,248,252,.94);border-bottom-color:rgba(212, 175, 55,.2)}
    .mt-topbar.hidden{transform:translateY(-100%)}
    .mt-topbar *,.mt-topbar a{box-sizing:border-box}
    .mt-topbar-brand{display:flex;align-items:center;gap:8px;color:#e8e8ee;text-decoration:none;font-weight:800;font-size:15px;flex-shrink:0}
    [data-theme="light"] .mt-topbar-brand, body:not([data-theme="dark"]) .mt-topbar-brand{color:#1a1a2e}
    .mt-topbar-brand img{width:26px;height:26px;border-radius:6px}
    .mt-topbar-menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;flex:1}
    .mt-topbar-link{color:#e8e8ee;text-decoration:none;padding:7px 13px;border-radius:10px;font-size:14px;font-weight:600;transition:all .2s;white-space:nowrap;opacity:.82;display:inline-flex;align-items:center;gap:5px}
    [data-theme="light"] .mt-topbar-link, body:not([data-theme="dark"]) .mt-topbar-link{color:#1a1a2e}
    .mt-topbar-link:hover{background:rgba(212, 175, 55,.12);color:#D4AF37;opacity:1}
    .mt-topbar-link.active{background:linear-gradient(135deg,rgba(212, 175, 55,.2),rgba(245,200,66,.12));color:#D4AF37;opacity:1;border:1px solid rgba(212, 175, 55,.3)}
    .mt-topbar-link svg{width:16px;height:16px}
    /* 21 يوليو 2026: قاعدة "body:not([data-theme=dark])" أعلاه بتفحص data-theme على body، لكن السكربت
       بيحطّه على html — فتفضل شغّالة دايماً وتخفي الروابط الساكنة بلون غامق قديم من تصميم فاتح سابق.
       تجاوز بتخصيص أعلى (id) بدل تعديل القاعدة القديمة نفسها، تجنّباً لأي أثر جانبي مكانها التاني. */
    #mtTopbar .mt-topbar-link{color:#C9D3E4;opacity:1}
    #mtTopbar .mt-topbar-link:hover,
    #mtTopbar .mt-topbar-link.active{color:#D4AF37}
    #mtTopbar .mt-topbar-brand{color:#EAD9A0}
    /* نفس علّة body:not([data-theme=dark]) بتضرب عناصر قوائم الدروب داون (الحاسبات/الألعاب) كمان.
       الإصلاح السابق (21 يوليو) لوّن النص فاتح لكن نسي خلفية اللوحة نفسها — فضلّت اللوحة بيضاء
       بنفس علّة body:not([data-theme=dark])، فصار نص فاتح على خلفية بيضاء (تباين شبه صفر).
       26 يوليو: نفس أسلوب التخصيص الأعلى (id) لتثبيت اللوحة داكنة دائماً. */
    #mtTopbar .mt-dd-item{color:#e8e8ee}
    #mtTopbar .mt-nav-dropdown-menu{background:rgba(10,14,26,.97);border-color:rgba(212, 175, 55,.22)}
    #mtTopbar .mt-dd-section-title{color:#D4AF37}
    /* Dropdown للحاسبات */
    .mt-nav-dropdown{position:relative;display:inline-block}
    .mt-nav-dropdown > .mt-topbar-link{cursor:pointer}
    .mt-nav-dropdown .mt-dd-arrow{font-size:10px;margin-right:3px}
    /* 26 يوليو 2026: بريف مراجعة الاستجابة — القائمة (خصوصاً الحاسبات، ١٢ عنصر) كانت تُقصّ
       على الشاشات القصيرة (ارتفاع نافذة ≤~650px) لأنها ما كانتش عندها max-height ولا سكرول؛
       بتفيض تحت حافة الشاشة بلا تمرير. أُضيف max-height + overflow-y:auto. */
    .mt-nav-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:rgba(10,14,26,.97);backdrop-filter:blur(18px);border:1px solid rgba(212, 175, 55,.22);border-radius:13px;padding:8px;min-width:280px;display:none;flex-direction:column;gap:2px;box-shadow:0 14px 36px rgba(0,0,0,.4);z-index:100000;max-height:calc(100vh - 90px);overflow-y:auto}
    [data-theme="light"] .mt-nav-dropdown-menu, body:not([data-theme="dark"]) .mt-nav-dropdown-menu{background:rgba(255,255,255,.98);border-color:rgba(212, 175, 55,.25)}
    .mt-nav-dropdown.open .mt-nav-dropdown-menu{display:flex}
    /* جسر شفاف يملأ فجوة الـ8px فيمنع mouseleave عند النزول للمينو (Hover Bridge) */
    .mt-nav-dropdown-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:14px;background:transparent}
    .mt-dd-section-title{font-size:11px;color:#8a92a6;font-weight:800;padding:6px 10px 4px;text-transform:uppercase;letter-spacing:.5px}
    .mt-dd-item{color:#e8e8ee;text-decoration:none;padding:8px 11px;border-radius:8px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:9px;transition:all .15s}
    [data-theme="light"] .mt-dd-item, body:not([data-theme="dark"]) .mt-dd-item{color:#1a1a2e}
    .mt-dd-item:hover{background:rgba(212, 175, 55,.12);color:#D4AF37}
    .mt-dd-item .em{font-size:17px;width:22px;text-align:center}
    .mt-dd-divider{height:1px;background:rgba(212, 175, 55,.12);margin:6px 4px}
    @media(max-width:520px){.mt-nav-dropdown-menu{min-width:240px;right:auto;left:0}}
    .mt-topbar-cta{background:linear-gradient(135deg,#D4AF37,#e55a2b);color:#fff!important;padding:8px 16px;border-radius:10px;font-weight:800;font-size:13px;text-decoration:none;flex-shrink:0;box-shadow:0 4px 14px rgba(212, 175, 55,.35)}
    .mt-topbar-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(212, 175, 55,.45)}
    body{padding-top:82px!important}

    /* ===== Consultio-style thin info bar above the main nav ===== */
    .mk-info-bar{position:fixed;top:0;left:0;right:0;z-index:99999;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:rgba(6,9,18,.85);border-bottom:1px solid rgba(212,175,55,.14);font-family:'Cairo',sans-serif;font-size:11.5px;color:rgba(232,232,238,.72);direction:rtl;transition:transform .3s ease,opacity .3s ease}
    html[lang="en"] .mk-info-bar{direction:ltr}
    [data-theme="light"] .mk-info-bar, body:not([data-theme="dark"]) .mk-info-bar{background:rgba(247,248,252,.92);color:rgba(26,26,46,.72);border-bottom-color:rgba(212,175,55,.2)}
    .mk-info-bar a,.mk-info-bar span{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
    .mk-info-bar a:hover{color:#D4AF37}
    .mk-info-bar-left,.mk-info-bar-right{display:flex;align-items:center;gap:14px}
    .mk-info-bar-currency{font-weight:800;color:#D4AF37;letter-spacing:.03em}
    .mk-info-bar-social{display:flex;gap:10px}
    .mk-info-bar-social a{width:16px;height:16px}
    .mk-info-bar-social svg{width:13px;height:13px}
    body.mt-scrolled .mk-info-bar{transform:translateY(-100%);opacity:0;pointer-events:none}
    @media(max-width:900px){.mk-info-bar-social{display:none}}
    @media(max-width:767px){.mk-info-bar{display:none}}

    /* ===== Sticky nav sits below the info bar, shrinks on scroll =====
       26 يوليو 2026: اكتُشف أثناء بريف الاستجابة إن صفحات الحاسبات الساكنة (24 ملف HTML خام
       تحت themes/mediatourch/assets/calculator/) عندها نسخة قديمة من نفس الـ<style> (top:0
       ثابت، بلا شريط علوي) بتفضل موجودة في الصفحة حتى بعد ما الـJS بتاعها يشيل عنصر الـ#mtTopbar
       المكرر (بس مش الـ<style> نفسه) — فبتصادم مع top:28px هنا بنفس التخصيص. تخصيص #mtTopbar
       (id) + !important لضمان الكسب دايماً، بدل تعديل 24 ملف. */
    #mtTopbar{top:28px!important;transition:transform .3s ease,top .3s ease,padding .25s ease}
    body.mt-scrolled #mtTopbar{top:0!important}
    .mt-topbar.compact{padding:6px 18px}
    .mt-topbar.compact .mt-topbar-brand img{width:22px;height:22px}
    .mt-topbar.compact .mt-topbar-link{padding:5px 11px}
    /* بلجن العملة المنفصل (mt-currency.php) عنده زر عائم fixed;top:12px مبني على افتراض إن الناف يبدأ من top:0 —
       بعد إضافة الشريط العلوي، الناف بقى يبدأ top:28px، فنزحزح الزر معاه فوق نفس المسافة لتفادي التراكب. */
    @media(min-width:768px){ .mt-currency-switch{ top:40px!important } }
    .mt-back-fab{position:fixed;bottom:24px;left:24px;z-index:99998;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#e55a2b);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(212, 175, 55,.4);transition:all .25s;text-decoration:none}
    .mt-back-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 30px rgba(212, 175, 55,.55)}
    .mt-back-fab svg{width:22px;height:22px;stroke:#fff;fill:none}
    /* Hide theme original headers */
    body.mt-has-global-nav header.mt-nav,
    body.mt-has-global-nav .mt-nav,
    body.mt-has-global-nav .mt-drawer__header,
    body.mt-has-global-nav > .site-header,
    body.mt-has-global-nav > header.site-header,
    body.mt-has-global-nav > #masthead { display:none!important }
    @media(max-width:767px){
        #mtTopbar{top:0!important;padding:8px 12px;gap:8px}
        .mt-topbar-link{padding:6px 9px;font-size:12.5px}
        .mt-topbar-brand{font-size:13px}
        .mt-topbar-brand img{width:22px;height:22px}
        .mt-topbar-cta{padding:6px 12px;font-size:12px}
        body{padding-top:48px!important}
        .mt-back-fab{bottom:18px;left:18px;width:44px;height:44px}
    }
    @media(max-width:520px){.mt-topbar-link span.label-text{display:none}}

    /* ===== 26 يوليو 2026: بريف مراجعة الاستجابة — هامبرغر بدل "لفّ" القائمة (≤1023px) =====
       العلّة: القائمة الأفقية كانت تعتمد على flex-wrap فقط، فتلف لسطرين+ عند 768-1023px (آيباد
       بورتريت وما شابه)، وده يكبّر ارتفاع الناف ويصادم عناصر fixed مستقلة (مبدّل العملة +
       رابط EN القديم) مبنية على افتراض إن الناف صف واحد قصير. الحل: تحويل القائمة لموبايل/تابلت
       (≤1023px) للوحة منسدلة كاملة عبر زر هامبرغر بدل اللفّ، فيفضل الناف صف واحد قصير دايماً.
       ملحوظة تصادم مكتشفة أثناء التنفيذ: mt-static-nav.php وmt-toggles.php بيحقنوا قواعد
       .mt-topbar-menu منفصلة (display:flex غير مشروط + flex-direction:row بتخصيص html[lang])
       على كل صفحة حتى لو الـHTML بتاعهم متشالش (JS الديدوب بيشيل بس العنصر مش الـ<style>).
       فلازم تخصيص #mtTopbar (id) + !important عشان نضمن الكسب زي الأسلوب المتّبع فوق. */
    .mt-nav-hamburger{display:none;background:none;border:1px solid rgba(212, 175, 55,.25);border-radius:10px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:#EAF0FA;flex-shrink:0;padding:0}
    .mt-nav-hamburger svg{width:20px;height:20px;pointer-events:none}
    .mt-nav-hamburger:hover{background:rgba(212, 175, 55,.12)}
    @media(max-width:1023px){
        .mt-nav-hamburger{display:flex}
        #mtTopbar .mt-topbar-menu{display:none!important;position:absolute!important;top:100%;inset-inline:0;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch;justify-content:flex-start!important;background:rgba(10,14,26,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(212, 175, 55,.18);max-height:80vh;overflow-y:auto!important;overflow-x:hidden!important;padding:8px 12px 14px;gap:2px!important;box-shadow:0 14px 36px rgba(0,0,0,.4);z-index:100000}
        #mtTopbar.nav-open .mt-topbar-menu{display:flex!important}
        #mtTopbar .mt-topbar-menu .mt-topbar-link{width:100%;padding:12px 13px;min-height:44px}
        #mtTopbar .mt-topbar-menu .label-text{display:inline!important}
        #mtTopbar .mt-nav-dropdown{width:100%}
        #mtTopbar .mt-nav-dropdown-menu{position:static!important;max-height:none;min-width:0;width:100%;box-shadow:none;border:none;border-radius:0;padding:2px 4px 2px 22px;margin:0;background:transparent}
        #mtTopbar .mt-nav-dropdown-menu::before{display:none}
        #mtTopbar .mt-dd-item{min-height:44px}
        /* مبدّل العملة (mt-currency-switcher.php) fixed مستقل عن الناف بإحداثية ثابتة left:200px —
           بتتصادم مع زر Pro/الهامبرغر لأن صف الناف فيه كمان عنصر خامس غير متوقَّع (رابط "دخول"
           مُحقَن مباشرة جوه #mtTopbar من سكربت تاني)، فموقع باقي العناصر بقى غير ثابت وصعب التنبؤ
           بيه حسابياً. الحل الأضمن: ننزّل الزر بالكامل تحت شريط الناف (بدل ما يطفو جواه)، فمفيش
           أي عنصر تاني في المنطقة دي يتصادم معاه مهما كان عدد عناصر الصف. */
        .mt-currency-switch{top:100px!important;left:auto!important;right:12px!important}
        /* رابط EN القديم (mt-intl-link.php) عائم مستقل بردو — زائد فعلياً (نفس الوظيفة موجودة
           كمفتاح لغة حقيقي جوه لوحة الهامبرغر عبر #mt-toggles-slot) فبيتخفي لتفادي أي تصادم. */
        .mt-intl-link--float{display:none!important}
    }
    @media(max-width:767px){
        .mt-currency-switch{top:56px!important}
    }

    /* ===== 27 يوليو 2026: أيقونة الحساب الشخصي في أقصى الشريط (طلب مالك) =====
       دائرة بصورة المستخدم المرفوعة (mk_avatar_id عبر mk-profile.php) أو أول حرف من اسمه،
       بقائمة منسدلة (عرض/تعديل الملف الشخصي + خروج) بنفس أسلوب لوحات الدروب داون الداكنة.
       للزائر: نفس الدائرة بأيقونة شخص توصّل لصفحة الدخول. حقن «حسابي/خروج» القديم في
       mt-ux-fixes.php اتعطّل لصالح المكوّن ده (بحارس وجود .mk-account). */
    .mk-account{position:relative;flex-shrink:0;display:flex;align-items:center}
    .mk-account-btn{width:38px;height:38px;border-radius:50%;border:2px solid rgba(212,175,55,.55);background:linear-gradient(135deg,#D4AF37,#c9992f);color:#1a1405;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;overflow:hidden;flex-shrink:0;box-shadow:0 3px 10px rgba(212,175,55,.28);font-family:'Cairo',sans-serif;transition:all .2s;text-decoration:none;line-height:1}
    .mk-account-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(212,175,55,.4);border-color:#D4AF37}
    .mk-account-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
    .mk-account-btn.guest{background:rgba(212,175,55,.1)}
    .mk-account-btn.guest svg{width:19px;height:19px;stroke:#D4AF37;fill:none}
    /* تموضع اللوحة واعٍ بالاتجاه: بالعربي (RTL) الزر في أقصى اليسار فاللوحة تمتد يميناً من left:0،
       وبالإنجليزي (LTR) الزر في أقصى اليمين فتمتد يساراً من right:0 — وإلا تُقص خارج الشاشة. */
    .mk-account-menu{position:absolute;top:calc(100% + 10px);left:0;right:auto;background:rgba(10,14,26,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(212,175,55,.22);border-radius:13px;padding:8px;min-width:230px;max-width:min(290px,calc(100vw - 20px));display:none;flex-direction:column;gap:2px;box-shadow:0 14px 36px rgba(0,0,0,.4);z-index:100001;direction:rtl}
    html[lang="en"] .mk-account-menu{left:auto;right:0;direction:ltr}
    html[lang="en"] .mk-account-head small{text-align:left}
    .mk-account.open .mk-account-menu{display:flex}
    .mk-account-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:14px;background:transparent}
    .mk-account-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid rgba(212,175,55,.14);margin-bottom:4px}
    .mk-account-head .mini{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#c9992f);color:#1a1405;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-size:14px}
    .mk-account-head .mini img{width:100%;height:100%;object-fit:cover;border-radius:50%}
    .mk-account-head b{color:#e8e8ee;font-size:13.5px;display:block;line-height:1.3}
    .mk-account-head small{color:#8a92a6;font-size:11px;display:block;direction:ltr;text-align:right}
    #mtTopbar .mk-account-menu .mt-dd-item{color:#e8e8ee}
    .mk-account-menu .mt-dd-item.logout{color:#e0837a}
    .mk-account-menu .mt-dd-item.logout:hover{background:rgba(224,107,90,.12);color:#e0837a}
    @media(max-width:767px){
        .mk-account-btn{width:34px;height:34px;font-size:14px}
        .mk-account-menu{min-width:210px}
    }