/* Mobile Drawer Menu Styles - Pixel Perfect Rebuild */
:root {
    --primary-green: #00a651;
    --border-light: #eeeeee;
    --text-main: #666666;
    --bg-white: #ffffff;
    --transition-speed: 0.4s;
}

/* Hide on Desktop */
@media (min-width: 768px) {

    .mobile-menu-trigger-bar,
    .mobile-menu-trigger-container,
    .mobile-menu-drawer,
    .mobile-menu-overlay {
        display: none !important;
    }
}

@media (max-width: 767px) {

    /* Setup */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        font-family: 'Droid Arabic Kufi', Tahoma, Arial, sans-serif;
    }

    .wrapper {
        width: 100%;
        max-width: none !important;
        background: #fff;
        margin: 0 !important;
        padding: 0;
    }

    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    /* Toggle Bar - Full Width Green Bar */
    .mobile-menu-trigger-bar {
        width: 100%;
        background: #00a651;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* Correct for RTL: Right side */
        padding: 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        margin-top: 0;
        direction: rtl;
    }

    .mobile-menu-trigger-bar .container-fluid {
        width: 100%;
        max-width: 960px;
        /* Align content with the site's content width */
        margin: 0 auto;
        padding: 0 15px;
        display: flex;
        justify-content: flex-start;
    }

    .mobile-menu-toggle-btn {
        background: transparent;
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-family: 'Droid Arabic Kufi', Tahoma;
        font-size: 18px;
        font-weight: bold;
    }

    .toggle-text {
        margin-left: 10px;
    }

    .toggle-icon {
        font-size: 24px;
    }

    /* Menu Drawer */
    .mobile-menu-drawer {
        position: fixed;
        top: 0;
        right: -70% !important;
        /* Start hidden off-screen to the right */
        width: 70% !important;
        /* Take only 70% of the width */
        height: 100vh;
        /* Using vh */
        background: #fff;
        z-index: 999999;
        transition: right 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        direction: rtl;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
        /* Add shadow to separate from page content */
        font-family: 'Droid Arabic Kufi', Tahoma;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    .mobile-menu-drawer * {
        box-sizing: border-box !important;
    }

    .mobile-menu-drawer.active {
        right: 0 !important;
        /* Slide in from right but stop at 0, leaving 30% of screen exposed on the left */
    }

    /* Drawer Header */
    .mobile-menu-header {
        background: #00a651;
        color: #fff;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        flex-shrink: 0;
        position: relative;
    }

    /* Header Actions for RTL matching image 4 */
    /* Right Action: Back Arrow */
    .header-right-action {
        width: 40px;
        display: flex;
        justify-content: center;
        order: 1;
        /* First in RTL flows from right */
    }

    /* Center: Title */
    .header-title-container {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        order: 2;
    }

    /* Left Action: Home Icon */
    .header-left-action {
        width: 40px;
        display: flex;
        justify-content: center;
        order: 3;
    }

    .btn-header {
        background: none;
        border: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .btn-header.hidden {
        visibility: hidden;
    }

    /* Circular Home Icon in Header */
    .btn-home-circle {
        background: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .btn-home-circle i.homesprite {
        display: block;
        background: url('../images/home_sprite.png') no-repeat;
        /* Using the home sprite position */
        width: 40px;
        height: 40px;
        background-position: -289px -5px;
        /* Correct Home Icon Position */
        transform: scale(0.65);
    }

    /* Viewport and Menu Items */
    .mobile-menu-viewport {
        flex: 1;
        overflow-y: auto;
        position: relative;
        background: #fff;
    }

    .menu-level {
        width: 100%;
        height: auto;
        min-height: 100%;
        background: #fff;
        transition: transform 0.3s ease, opacity 0.3s;
    }

    .menu-level.submenu {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(100%);
        visibility: hidden;
    }

    .menu-level.active {
        transform: translateX(0);
        visibility: visible;
        z-index: 10;
    }

    .menu-level.parent-out {
        transform: translateX(-30%);
        opacity: 0.5;
    }

    /* Menu List */
    .mobile-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu-item {
        border-bottom: 1px solid #eeeeee;
    }

    .menu-link {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        text-decoration: none;
        color: #666;
        transition: background 0.2s;
        font-size: 15px;
    }

    .menu-link:active {
        background: #f8f8f8;
    }

    /* Circular Icon on the Right (RTL) */
    .item-icon-circle {
        width: 42px;
        height: 42px;
        background: #fff;
        border: 1px solid #eeeeee;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        /* Space to the left of icon (towards text) */
        flex-shrink: 0;
        overflow: hidden;
    }

    /* Sprite icons inside circle */
    .item-icon-circle i.homesprite {
        transform: scale(0.7);
        display: block;
    }

    .item-img-icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 5px;
    }

    /* Text in Middle */
    .item-text {
        flex: 1;
        font-family: inherit;
        color: #333333;
        font-size: 15px;
    }

    /* Arrow on the Left (RTL) */
    .item-arrow-left {
        color: #bbbbbb;
        font-size: 14px;
        font-family: 'Font Awesome 5 Free', 'fontello', Arial;
        font-weight: 900;
        margin-right: 5px;
    }

    /* Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99999;
        display: none;
        opacity: 0;
        transition: opacity 0.4s;
    }

    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }
}