/* ============================================
   MOBILE ONLY (max-width: 991px)
   Minimal overrides - WordPress controls styling
   We only ensure: hamburger visible, menu above body
   ============================================ */

#wp-header-iframe,
#wp-footer-iframe,
#wp-injected-header,
#wp-injected-header-ar {
    display: block !important;
}

@media (max-width: 991px) {

    /* Hamburger icon - match WordPress */
    .ot-flaticon-menu-1::before,
    #wp-injected-header .ot-flaticon-menu-1::before,
    #wp-injected-header-ar .ot-flaticon-menu-1::before {
        content: "☰" !important;
        display: inline-block !important;
    }

    /* Mobile menu arrow - always visible, stays at top when submenu open */
    .mobile_mainmenu .menu-item-has-children {
        position: relative !important;
        overflow: visible !important;
    }
    #mmenu-wrapper .arrow,
    #mmenu-wrapper-portal .arrow,
    .mobile_mainmenu .arrow {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 50px !important;
        height: 54px !important;
        align-items: center !important;
        justify-content: center !important;
        color: #D32F2F !important;
        cursor: pointer !important;
        z-index: 10 !important;
        transition: transform 0.3s ease !important;
        pointer-events: auto !important;
    }
    /* Arrow points DOWN when submenu is open */
    .mobile_mainmenu .arrow.active,
    .mobile_mainmenu .menu-item-has-children:has(.sub-menu.active) .arrow {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Change arrow icon: › (right) when closed → ▾ (down) when open */
    .mobile_mainmenu .arrow.active .ot-flaticon-next::before,
    .mobile_mainmenu .menu-item-has-children:has(.sub-menu.active) .arrow .ot-flaticon-next::before {
        content: "▾" !important;
    }
    .mobile_mainmenu .sub-menu {
        position: relative !important;
        z-index: 1 !important;
        display: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    .mobile_mainmenu .sub-menu.active {
        display: block !important;
        visibility: visible !important;
        max-height: 2000px !important;
        overflow: visible !important;
    }
    #mmenu-wrapper .arrow i,
    #mmenu-wrapper-portal .arrow i,
    .mobile_mainmenu .arrow i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #D32F2F !important;
        font-size: 1.5em !important;
    }
    /* Arrow: › points right when closed */
    #mmenu-wrapper .ot-flaticon-next::before,
    #mmenu-wrapper-portal .ot-flaticon-next::before,
    .mobile_mainmenu .ot-flaticon-next::before {
        content: "›" !important;
        display: inline-block !important;
        color: #D32F2F !important;
        font-size: 1.5em !important;
    }
    .mobile_mainmenu .menu-item-has-children > a {
        padding-right: 55px !important;
    }
    /* Arabic menu: force LTR (position only) - desktop and mobile */
    #wp-injected-header-ar .mobile_mainmenu .arrow,
    body[dir="rtl"] #mmenu-wrapper-portal .mobile_mainmenu .arrow {
        right: 0 !important;
        left: auto !important;
    }
    #wp-injected-header-ar .mobile_mainmenu .arrow.active,
    #wp-injected-header-ar .menu-item-has-children:has(.sub-menu.active) .arrow,
    body[dir="rtl"] #mmenu-wrapper-portal .mobile_mainmenu .arrow.active,
    body[dir="rtl"] #mmenu-wrapper-portal .menu-item-has-children:has(.sub-menu.active) .arrow {
        right: 0 !important;
        left: auto !important;
    }
    #wp-injected-header-ar .mobile_mainmenu .menu-item-has-children > a,
    body[dir="rtl"] #mmenu-wrapper-portal .mobile_mainmenu .menu-item-has-children > a {
        padding-right: 55px !important;
        padding-left: 20px !important;
    }
    body[dir="rtl"] #mmenu-wrapper-portal {
        direction: ltr !important;
    }

    /* Body lock when menu is open - body stays below menu */
    body.mmenu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    /* Page content (main, footer) below menu when open */
    body.mmenu-open > main,
    body.mmenu-open > #wp-injected-footer,
    body.mmenu-open > #wp-injected-footer-ar {
        z-index: 1 !important;
    }

    body.mmenu-open #wp-header-iframe,
    body.mmenu-open #wp-footer-iframe {
        z-index: 1 !important;
    }

    /* Header (contains menu) - MUST stay on top when menu open */
    body.mmenu-open #wp-injected-header,
    body.mmenu-open #wp-injected-header-ar {
        z-index: 2147483647 !important;
        position: relative !important;
    }

    /* Mobile menu overlay - ABOVE body, WordPress controls appearance */
    .mmenu-overlay,
    .site-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 2147483646 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mmenu-overlay.mmenu-open,
    .site-overlay.mmenu-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2147483646 !important;
    }

    /* Mobile menu panel - ABOVE overlay and body */
    #mmenu-wrapper {
        position: fixed !important;
        top: 0 !important;
        right: -100%;
        width: 330px;
        max-width: 85vw;
        height: 100vh !important;
        z-index: 2147483647 !important;
        overflow-y: auto;
        transition: right 0.3s ease-in-out !important;
    }

    #mmenu-wrapper.mmenu-open {
        right: 0 !important;
        z-index: 2147483647 !important;
    }

    /* Portal menu (when moved to parent) - ABOVE everything */
    #mmenu-wrapper-portal,
    .mmenu-wrapper-portal {
        position: fixed !important;
        top: 0 !important;
        right: -100%;
        width: 330px;
        max-width: 85vw;
        height: 100vh !important;
        z-index: 2147483647 !important;
        overflow-y: auto;
        transition: right 0.3s ease-in-out !important;
    }

    #mmenu-wrapper-portal.mmenu-open,
    .mmenu-wrapper-portal.mmenu-open {
        right: 0 !important;
        z-index: 2147483647 !important;
    }

    .mmenu-overlay-portal,
    .site-overlay-portal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 2147483646 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mmenu-overlay-portal.mmenu-open,
    .site-overlay-portal.mmenu-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2147483646 !important;
    }

    /* Main content and footer stay below menu */
    body.mmenu-open main {
        z-index: 1 !important;
    }

    /* Override high z-index elements when menu open - keep them below */
    body.mmenu-open .spinner-overlay,
    body.mmenu-open .sidebar,
    body.mmenu-open .modal,
    body.mmenu-open .modal-backdrop,
    body.mmenu-open .dropdown-menu,
    body.mmenu-open .popover,
    body.mmenu-open .tooltip {
        z-index: 1 !important;
    }
}