/* ==========================================
   DETACHED MOBILE MENU - NUCLEAR FIX
   Bypasses all header clipping/z-index issues
   ========================================== */

/* 1. Hamburger Button (Keep in header) */
.mobile-menu-btn {
    display: none;
    cursor: pointer;
    z-index: 99999;
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    width: 30px;
    height: 20px;
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #1f2937;
    border-radius: 3px;
    transition: all 0.3s ease;
    position: absolute;
    left: 0;
}

.mobile-menu-btn span:nth-child(1) {
    top: 0;
}

.mobile-menu-btn span:nth-child(2) {
    top: 9px;
}

.mobile-menu-btn span:nth-child(3) {
    top: 18px;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
}


/* 2. The Detached Menu Container (Injected at Body level) */
#detached-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Overlay backdrop */
    z-index: 99998;

    /* Initially Hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(4px);
}

#detached-mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

/* 3. The Menu Content Card */
.detached-menu-content {
    position: absolute;
    top: 0;
    right: -300px;
    /* Start off-screen (RTL friendly logic: from right side) */
    width: 280px;
    height: 100%;
    background: #ffffff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    overflow-y: auto;
}

#detached-mobile-menu.active .detached-menu-content {
    right: 0;
    /* Slide in */
}

/* For RTL specific, ensure direction is correct */
html[dir="rtl"] .detached-menu-content {
    right: auto;
    left: -300px;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="rtl"] #detached-mobile-menu.active .detached-menu-content {
    right: auto;
    left: 0;
}

/* WAIT - Standard Arabic RTL usually means drawer comes from Right? or Left?
   Android standard: Drawer from Right.
   Let's stick to Right side for RTL typically, or verify.
   Actually, 'right: 0' in RTL means left side of screen? No.
   CSS 'right' property refers to physical right.
   If user wants menu from the Right side (common in Mobile Apps for RTL users?),
   Let's stick to Right.
*/

/* 4. Menu Links */
.detached-nav-list {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detached-nav-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    color: #1f2937;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.2s;
    background: #f9fafb;
}

.detached-nav-list li a:hover {
    background: #eff6ff;
    color: #2563eb;
}

/* 5. Header in Menu */
.detached-menu-header {
    padding: 0 20px 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detached-menu-title {
    font-weight: 700;
    color: #2563eb;
    font-size: 18px;
}

.detached-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
}

/* 6. Media Queries */
@media (max-width: 992px) {
    .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 993px) {
    .mobile-menu-btn {
        display: none !important;
    }

    #detached-mobile-menu {
        display: none !important;
    }
}