/* ============================================================================
   Moroccan Red Crescent — Arabic mobile navigation correction
   ----------------------------------------------------------------------------
   Loaded AFTER the normal Akcel page CSS, only for Arabic pages.

   Goals:
   - keep Akcel's original 280px mobile drawer geometry;
   - mirror only the physical drawer side (right for Arabic), not its sizing;
   - keep all inner navigation RTL;
   - provide a reliable X close icon and overlay position;
   - make logo, language controls and login area responsive and consistent.
============================================================================ */

@media only screen and (max-width: 991px) {
    /* ----------------------------------------------------------------------
       1. Drawer geometry: same physical width as the original LTR theme.
       The previous 88vw override made Arabic visibly wider than French.
    ---------------------------------------------------------------------- */
    html[lang^="ar"] .site-header.mo-left .header-nav,
    html[lang^="ar"] .mo-left .header-nav,
    html[lang^="ar"] .header-nav {
        left: auto !important;
        right: 0 !important;
        width: 280px !important;
        max-width: calc(100vw - 64px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        transform: translateX(100%) !important;
        -webkit-transform: translateX(100%) !important;
        transition: transform .45s ease !important;
        -webkit-transition: -webkit-transform .45s ease !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #fff;
        direction: rtl;
        text-align: right;
        scrollbar-gutter: stable;
    }

    html[lang^="ar"] .site-header.mo-left .header-nav.show,
    html[lang^="ar"] .mo-left .header-nav.show,
    html[lang^="ar"] .header-nav.show {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }

    /* ----------------------------------------------------------------------
       2. Drawer logo: use the exact visual behaviour of the LTR menu.
    ---------------------------------------------------------------------- */
    html[lang^="ar"] .mo-left .header-nav .logo-header,
    html[lang^="ar"] .header-nav .logo-header {
        display: block;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 25px 20px 22px !important;
        text-align: center !important;
    }

    html[lang^="ar"] .mo-left .header-nav .logo-header a,
    html[lang^="ar"] .header-nav .logo-header a {
        display: block;
        width: 100%;
        text-align: center;
    }

    html[lang^="ar"] .mo-left .header-nav .logo-header img,
    html[lang^="ar"] .header-nav .logo-header img {
        width: 180px !important;
        max-width: min(180px, 100%) !important;
        height: auto !important;
        margin-inline: auto !important;
        object-fit: contain;
    }

    /* ----------------------------------------------------------------------
       3. Main links: RTL internally, without changing Akcel spacing model.
    ---------------------------------------------------------------------- */
    html[lang^="ar"] .header-nav .nav,
    html[lang^="ar"] .header-nav .navbar-nav {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 20px !important;
        direction: rtl;
    }

    html[lang^="ar"] .header-nav .nav > li {
        float: none !important;
        width: 100% !important;
        text-align: right !important;
        border-bottom: 1px solid #eee;
    }

    html[lang^="ar"] .header-nav .nav > li > a {
        display: block !important;
        width: 100%;
        min-height: 48px;
        padding: 9px 0 !important;
        line-height: 30px !important;
        text-align: right !important;
        font-size: 16px;
        font-weight: 500;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The mobile submenu control belongs to the physical left in RTL. */
    html[lang^="ar"] .header-nav .nav > li.sub-menu-down > a {
        padding-left: 42px !important;
    }

    html[lang^="ar"] .header-nav .nav > li.sub-menu-down > a::after {
        right: auto !important;
        left: 0 !important;
        float: left !important;
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        margin: -2px 0 0 !important;
        border-radius: 7px;
        content: "\f053" !important; /* chevron-left */
    }

    html[lang^="ar"] .header-nav .nav > li.sub-menu-down.open > a::after {
        content: "\f078" !important;
    }

    html[lang^="ar"] .header-nav .nav > li .sub-menu,
    html[lang^="ar"] .header-nav .nav > li .mega-menu {
        left: auto !important;
        right: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        text-align: right !important;
        direction: rtl;
    }

    html[lang^="ar"] .header-nav .nav > li .sub-menu li > a,
    html[lang^="ar"] .header-nav .nav > li .mega-menu li > a,
    html[lang^="ar"] .header-nav .nav > li .sub-menu li:hover > a,
    html[lang^="ar"] .header-nav .nav > li .mega-menu li:hover > a {
        padding: 7px 16px 7px 4px !important;
        text-align: right !important;
    }

    /* ----------------------------------------------------------------------
       4. Reliable close control.
       Keep the drawer on the right and put the X in the free overlay area.
    ---------------------------------------------------------------------- */
    html[lang^="ar"] .site-header .navbar-toggler.open,
    html[lang^="ar"] .mo-left .navbar-toggler.open {
        position: fixed !important;
        top: max(16px, env(safe-area-inset-top)) !important;
        left: max(16px, env(safe-area-inset-left)) !important;
        right: auto !important;
        float: none !important;
        margin: 0 !important;
        z-index: 100000 !important;
    }

    html[lang^="ar"] .navicon.open {
        width: 40px !important;
        height: 40px !important;
    }

    html[lang^="ar"] .navicon.open span {
        right: auto !important;
        left: 10px !important;
        height: 2px !important;
        background: #fff !important;
        transform-origin: center !important;
    }

    html[lang^="ar"] .navicon.open span:nth-child(1) {
        top: 19px !important;
        width: 20px !important;
        opacity: 1 !important;
        transform: rotate(45deg) !important;
        -webkit-transform: rotate(45deg) !important;
    }

    html[lang^="ar"] .navicon.open span:nth-child(2) {
        top: 19px !important;
        width: 20px !important;
        opacity: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    html[lang^="ar"] .navicon.open span:nth-child(3) {
        top: 19px !important;
        width: 20px !important;
        opacity: 1 !important;
        transform: rotate(-45deg) !important;
        -webkit-transform: rotate(-45deg) !important;
    }

    /* The base overlay is retained, but its growth origin follows the close
       button on the physical left side. */
    html[lang^="ar"] .mo-left .navbar-toggler.open::after {
        transform-origin: top left !important;
        -webkit-transform-origin: top left !important;
        margin: 0 !important;
    }

    /* ----------------------------------------------------------------------
       5. Bottom/login/language area.
    ---------------------------------------------------------------------- */
    html[lang^="ar"] .mo-left .header-nav .header-bottom,
    html[lang^="ar"] .header-nav .header-bottom {
        display: block;
        margin: 28px 20px 0 !important;
        padding-bottom: max(22px, env(safe-area-inset-bottom));
        direction: rtl;
        text-align: right !important;
    }

    html[lang^="ar"] .mobile-language-switcher {
        width: 100%;
        margin-bottom: 16px;
        direction: rtl;
        text-align: right;
    }

    html[lang^="ar"] .mobile-language-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 32px;
        margin-bottom: 10px;
        direction: rtl;
        font-size: 14px;
        font-weight: 600;
    }

    html[lang^="ar"] .mobile-language-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
        direction: rtl;
    }

    html[lang^="ar"] .mobile-language-links > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 8px 10px !important;
        border-radius: 9px;
        direction: rtl;
        line-height: 1.35;
    }

    /* With three languages, the last one gets a deliberate full row instead
       of leaving an accidental half-empty flex row. */
    html[lang^="ar"] .mobile-language-links > a:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    html[lang^="ar"] .mobile-language-links .language-code {
        flex: 0 0 auto;
        min-width: 36px;
        text-align: center;
    }

    html[lang^="ar"] .header-bottom .btn-login,
    html[lang^="ar"] .header-bottom form,
    html[lang^="ar"] .header-bottom form .btn-login {
        width: 100%;
    }

    html[lang^="ar"] .header-bottom .btn-login {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center !important;
    }

    html[lang^="ar"] .header-bottom .btn-login i {
        margin: 0 !important;
    }

    /* Never let the mirrored drawer create a horizontal document canvas. */
    html[lang^="ar"],
    html[lang^="ar"] body,
    html[lang^="ar"] .page-wraper,
    html[lang^="ar"] .page-wraper-sidebar {
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media only screen and (max-width: 575px) {
    html[lang^="ar"] .header-nav .nav,
    html[lang^="ar"] .header-nav .navbar-nav {
        padding-inline: 18px !important;
    }

    html[lang^="ar"] .mo-left .header-nav .logo-header,
    html[lang^="ar"] .header-nav .logo-header {
        padding-top: 22px !important;
        padding-bottom: 18px !important;
    }

    html[lang^="ar"] .mo-left .header-nav .header-bottom,
    html[lang^="ar"] .header-nav .header-bottom {
        margin-inline: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[lang^="ar"] .header-nav {
        transition: none !important;
        -webkit-transition: none !important;
    }
}