/*=============== MOBILE VIEWPORT FIX ===============*/
/* إصلاح مشكلة عدم ظهور القائمة في الوضع العمودي للموبايل */

/* متغيرات CSS للـ viewport */
:root {
    --vh: 1vh;
}

/* إصلاح الـ viewport للأجهزة المحمولة */
@media screen and (max-width: 1023px) {
    html {
        height: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        overflow-x: hidden;
    }
    
    body {
        min-height: 100%;
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        overflow-x: hidden;
    }
    
    /* إصلاح خاص للقائمة في الوضع العمودي */
    .nav__menu {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        width: 100vw !important;
        height: 100% !important;
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
        max-height: 100vh !important;
        max-height: calc(var(--vh, 1vh) * 100) !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform 0.4s ease !important;
        -webkit-transition: -webkit-transform 0.4s ease !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* عند فتح القائمة */
    .nav__menu.show,
    .nav__menu.show-menu {
        left: 0 !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        display: flex !important;
    }
    
    /* إصلاح للـ overlay */
    .nav__overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        width: 100vw !important;
        height: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999 !important;
    }
    
    /* منع التمرير عند فتح القائمة */
    body.nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
}

/* إصلاحات خاصة للوضع العمودي */
@media screen and (max-width: 1023px) and (orientation: portrait) {
    .nav__menu {
        left: -100vw !important;
        transform: translateX(-100vw) !important;
        -webkit-transform: translateX(-100vw) !important;
    }
    
    .nav__menu.show,
    .nav__menu.show-menu {
        left: 0 !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }
}

/* إصلاحات خاصة للوضع الأفقي */
@media screen and (max-width: 1023px) and (orientation: landscape) {
    .nav__menu {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* إصلاحات خاصة لـ iOS Safari */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1023px) {
        .nav__menu {
            height: -webkit-fill-available !important;
            min-height: -webkit-fill-available !important;
        }
        
        body.nav-open {
            height: -webkit-fill-available !important;
        }
    }
}

/* إصلاحات خاصة لـ Android Chrome */
@media screen and (max-width: 1023px) {
    .nav__menu {
        height: calc(100vh - env(keyboard-inset-height, 0px)) !important;
        height: calc(100dvh - env(keyboard-inset-height, 0px)) !important;
    }
}

/* إصلاح مشكلة الـ notch في الأجهزة الحديثة */
@media screen and (max-width: 1023px) {
    .nav__menu {
        padding-top: max(80px, env(safe-area-inset-top, 0px) + 20px) !important;
        padding-left: max(2rem, env(safe-area-inset-left, 0px) + 2rem) !important;
        padding-right: max(2rem, env(safe-area-inset-right, 0px) + 2rem) !important;
        padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px) + 2rem) !important;
    }
}

/* إصلاح للشاشات الصغيرة جداً */
@media screen and (max-width: 360px) {
    .nav__toggle {
        display: flex !important;
        position: fixed !important;
        z-index: 1005 !important;
    }
    
    .nav__menu {
        padding: 70px 1rem 1rem !important;
        position: fixed !important;
        top: 0 !important;
        left: -100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        z-index: 1000 !important;
        transform: translateX(-100vw) !important;
        -webkit-transform: translateX(-100vw) !important;
    }
    
    .nav__menu.show,
    .nav__menu.show-menu {
        left: 0 !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }
}

/* إصلاح للشاشات الصغيرة جداً جداً */
@media screen and (max-width: 320px) {
    .nav__toggle {
        display: flex !important;
        position: fixed !important;
        z-index: 1005 !important;
    }
    
    .nav__menu {
        padding: 60px 0.5rem 0.5rem !important;
        position: fixed !important;
        top: 0 !important;
        left: -100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        z-index: 1000 !important;
        transform: translateX(-100vw) !important;
        -webkit-transform: translateX(-100vw) !important;
    }
    
    .nav__menu.show,
    .nav__menu.show-menu {
        left: 0 !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }
}

/* إصلاح RTL للعربية */
@media screen and (max-width: 1023px) {
    body.rtl .nav__menu,
    body[dir="rtl"] .nav__menu,
    html[dir="rtl"] .nav__menu {
        left: auto !important;
        right: -100% !important;
        right: -100vw !important;
        transform: translateX(100%) !important;
        -webkit-transform: translateX(100%) !important;
    }
    
    body.rtl .nav__menu.show,
    body.rtl .nav__menu.show-menu,
    body[dir="rtl"] .nav__menu.show,
    body[dir="rtl"] .nav__menu.show-menu,
    html[dir="rtl"] .nav__menu.show,
    html[dir="rtl"] .nav__menu.show-menu {
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }
}

/* إصلاح مشكلة الفلاش عند التحميل */
@media screen and (max-width: 1023px) {
    .nav__menu {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .nav__menu.show,
    .nav__menu.show-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* تحسين الأداء */
@media screen and (max-width: 1023px) {
    .nav__menu {
        will-change: transform, opacity !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform: translateZ(0) translateX(-100%) !important;
        -webkit-transform: translateZ(0) translateX(-100%) !important;
    }
    
    .nav__menu.show,
    .nav__menu.show-menu {
        transform: translateZ(0) translateX(0) !important;
        -webkit-transform: translateZ(0) translateX(0) !important;
    }
}

/* إصلاح مشكلة التداخل مع العناصر الأخرى */
@media screen and (max-width: 1023px) {
    .nav__menu {
        isolation: isolate !important;
        contain: layout style paint !important;
    }
}