/* =========================================================
   NUJIZ INFO PAGES MOBILE MENU
   about / privacy / terms
   ========================================================= */

.info-mobile-menu-toggle{
    display:none;
}

@media (max-width:850px){

    html body .site-header{
        position:relative !important;
        z-index:999999 !important;
        overflow:visible !important;
    }

    html body .site-header .header-inner{
        position:relative !important;
        min-height:64px !important;
        overflow:visible !important;
    }

    /* زر القائمة */
    html body .site-header .info-mobile-menu-toggle{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;

        position:absolute !important;
        inset-inline-start:10px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        min-height:44px !important;

        padding:0 !important;
        margin:0 !important;

        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border:0 !important;
        border-radius:12px !important;

        background:#17233b !important;

        box-shadow:0 7px 18px rgba(17,30,55,.18) !important;

        cursor:pointer !important;
        z-index:1000001 !important;
    }

    html body .site-header .info-mobile-menu-toggle span{
        display:block !important;

        width:21px !important;
        height:2px !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;
        border-radius:10px !important;

        background:#fff !important;

        opacity:1 !important;

        transition:
            transform .18s ease,
            opacity .18s ease !important;
    }

    /* × عند الفتح */
    html body .site-header .info-mobile-menu-toggle.is-open span:nth-child(1){
        transform:translateY(7px) rotate(45deg) !important;
    }

    html body .site-header .info-mobile-menu-toggle.is-open span:nth-child(2){
        opacity:0 !important;
    }

    html body .site-header .info-mobile-menu-toggle.is-open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg) !important;
    }

    /* القائمة مغلقة */
    html body .site-header .main-nav{
        display:none !important;

        position:absolute !important;
        top:calc(100% + 8px) !important;

        inset-inline:10px !important;

        width:auto !important;
        max-width:none !important;

        padding:10px !important;
        margin:0 !important;

        flex-direction:column !important;
        align-items:stretch !important;
        gap:4px !important;

        border:1px solid #e6e3ef !important;
        border-radius:16px !important;

        background:rgba(255,255,255,.98) !important;
        backdrop-filter:blur(18px) !important;

        box-shadow:
            0 18px 45px rgba(20,28,52,.16) !important;

        z-index:1000000 !important;
    }

    /* القائمة مفتوحة */
    html body .site-header .main-nav.info-mobile-nav-open{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
    }

    html body .site-header .main-nav > a{
        width:100% !important;
        min-height:44px !important;

        display:flex !important;
        align-items:center !important;

        padding:0 13px !important;

        border-radius:10px !important;

        color:#17233b !important;
        -webkit-text-fill-color:#17233b !important;

        background:transparent !important;

        font-size:13px !important;
        font-weight:800 !important;

        text-decoration:none !important;
        box-sizing:border-box !important;
    }

    html body .site-header .main-nav > a:active{
        background:#f1edff !important;
        color:#6945f5 !important;
        -webkit-text-fill-color:#6945f5 !important;
    }

    /*
     * نخفي CTA في الهيدر على الشاشات الصغيرة
     * حتى لا يزاحم زر القائمة.
     */
    html body .site-header .header-cta{
        display:none !important;
    }
}

/* =========================================================
   INFO PAGES — MOBILE MENU POSITION LIKE HOMEPAGE
   ========================================================= */

@media (max-width:850px){

    /*
     * الهيدر صف افقي:
     * الشعار جهة اليمين
     * الاجراءات وزر القائمة جهة اليسار
     */
    html body .site-header .header-inner{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:8px !important;

        padding-inline:12px !important;

        min-height:64px !important;
    }

    /*
     * الشعار يبقى في مكانه الطبيعي
     */
    html body .site-header .brand{
        position:relative !important;
        inset:auto !important;
        transform:none !important;

        margin:0 !important;

        flex:0 0 auto !important;

        order:1 !important;
        z-index:3 !important;
    }

    /*
     * منطقة اللغة والاجراءات جهة اليسار
     */
    html body .site-header .header-actions{
        position:relative !important;

        display:flex !important;
        align-items:center !important;
        gap:8px !important;

        width:auto !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        order:3 !important;
    }

    /*
     * زر القائمة لم يعد absolute فوق الشعار.
     * يصبح عنصرا طبيعيا داخل صف الهيدر.
     */
    html body .site-header .info-mobile-menu-toggle{
        position:relative !important;

        inset:auto !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;

        transform:none !important;

        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        min-height:44px !important;

        margin:0 !important;

        flex:0 0 44px !important;

        order:2 !important;

        z-index:5 !important;
    }

    /*
     * اللغة ظاهرة بجانبه مثل الرئيسية
     */
    html body .site-header .lang-link{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:44px !important;
        padding:0 14px !important;

        margin:0 !important;

        order:1 !important;
    }

    /*
     * اخفاء CTA على الجوال مثل الوضع الحالي
     */
    html body .site-header .header-cta{
        display:none !important;
    }

    /*
     * القائمة المنسدلة تبدأ تحت الهيدر بالكامل
     */
    html body .site-header .main-nav{
        top:calc(100% + 8px) !important;

        inset-inline:10px !important;

        width:auto !important;

        z-index:1000000 !important;
    }

}

/* =========================================================
   INFO PAGES MOBILE ORDER — ENGLISH THEN MENU
   ========================================================= */

@media (max-width:850px){

    html body .site-header .header-actions{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }

    /* English اولا */
    html body .site-header .header-actions .lang-link{
        order:1 !important;
    }

    /* القائمة بعدها */
    html body .site-header .header-actions .info-mobile-menu-toggle{
        order:2 !important;
    }

}

/* =========================================================
   FINAL MOBILE ACTION ORDER
   English | Menu | Logo
   ========================================================= */

@media (max-width:850px){

    html body .site-header .header-actions{
        direction:ltr !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;
    }

    html body .site-header .header-actions .lang-link{
        order:1 !important;
        direction:ltr !important;
    }

    html body .site-header .header-actions .info-mobile-menu-toggle{
        order:2 !important;
        direction:ltr !important;
    }

}

/* =========================================================
   ENGLISH INFO PAGES MOBILE HEADER
   ========================================================= */

@media (max-width:850px){

    html[lang="en"] body .site-header .header-actions{
        direction:ltr !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;
    }

    /*
     * القائمة اولا من اليسار
     */
    html[lang="en"] body .site-header
    .header-actions .info-mobile-menu-toggle{
        order:1 !important;
    }

    /*
     * زر العربية بعدها
     */
    html[lang="en"] body .site-header
    .header-actions .lang-link{
        order:2 !important;
        direction:rtl !important;
    }

    /*
     * الشعار يبقى في الجهة اليمنى
     */
    html[lang="en"] body .site-header .brand{
        margin-left:auto !important;
        margin-right:0 !important;
    }
}

/* =========================================================
   ENGLISH INFO PAGES
   MOVE LANGUAGE TO OPPOSITE SIDE
   ========================================================= */

@media (max-width:850px){

    html[lang="en"] body .site-header .header-inner{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
    }

    /* الشعار */
    html[lang="en"] body .site-header .brand{
        order:1 !important;
        margin:0 !important;
        flex:0 0 auto !important;
    }

    /* نجعل header-actions يأخذ المساحة الباقية */
    html[lang="en"] body .site-header .header-actions{
        order:2 !important;

        flex:1 1 auto !important;
        width:auto !important;

        display:flex !important;
        align-items:center !important;

        direction:ltr !important;

        margin:0 !important;
        padding:0 !important;
    }

    /* القائمة تبقى قرب الشعار */
    html[lang="en"] body .site-header
    .header-actions .info-mobile-menu-toggle{
        order:1 !important;
        margin-left:8px !important;
        margin-right:0 !important;
        flex:0 0 44px !important;
    }

    /* العربية تذهب لأقصى الجهة المقابلة */
    html[lang="en"] body .site-header
    .header-actions .lang-link{
        order:2 !important;

        margin-left:auto !important;
        margin-right:0 !important;

        flex:0 0 auto !important;

        direction:rtl !important;
    }

}