/**
 * Mobile Fixes - إصلاحات خاصة بالهاتف
 * يحل مشاكل اللمس والتفاعل على الأجهزة المحمولة
 */

/* ===== منع التكبير غير المرغوب ===== */
input,
select,
textarea,
button {
    font-size: 16px !important; /* منع التكبير التلقائي في iOS */
}

/* ===== تحسين أهداف اللمس ===== */
@media (max-width: 768px) {
    /* الحد الأدنى لحجم أهداف اللمس 44x44 بكسل */
    .mobile-menu-toggle,
    .lang-switcher,
    .nav-link,
    .social-link,
    .whatsapp-link,
    button,
    a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* إزالة تأخير النقر على iOS */
    a,
    button,
    input,
    select,
    textarea {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* تحسين الأزرار */
    .mobile-menu-toggle {
        padding: 12px !important;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
        z-index: 10001 !important;
    }
    
    .lang-switcher {
        padding: 8px 12px !important;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ===== إصلاح القائمة المنبثقة - بحجم كامل الشاشة مثل HERO ===== */
@media (max-width: 992px) {
    /* التأكد من أن القائمة فوق كل شيء - بحجم كامل الشاشة */
    .main-nav {
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        background: linear-gradient(135deg, 
            hsl(348 95% 18%) 0%, 
            hsl(348 95% 15%) 25%, 
            hsl(348 100% 12%) 50%, 
            hsl(348 100% 10%) 75%, 
            hsl(348 100% 8%) 100%) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: var(--space-3xl) var(--space-lg) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        border: none !important;
    }
    
    /* Overlay - مخفي افتراضياً */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9998 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    /* Overlay عند الفتح فقط */
    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* للغة العربية */
    body.lang-ar .main-nav {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    body.lang-ar .main-nav.active {
        transform: translateX(0) !important;
    }
    
    /* للغة الإنجليزية */
    body:not(.lang-ar) .main-nav {
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    body:not(.lang-ar) .main-nav.active {
        transform: translateX(0) !important;
    }
    
    /* روابط القائمة - بحجم كبير مثل HERO */
    .nav-link {
        width: 90% !important;
        max-width: 500px !important;
        padding: var(--space-lg) var(--space-xl) !important;
        margin-bottom: var(--space-md) !important;
        text-align: center !important;
        font-size: var(--fs-700) !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 70px !important;
        white-space: nowrap !important;
        background: hsl(0 0% 100% / 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 2px solid hsl(43 59% 53% / 0.4) !important;
        border-radius: var(--radius-xl) !important;
        color: var(--clr-text-light) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
        transition: all var(--transition-base) !important;
    }
    
    .nav-link:hover,
    .nav-link.active {
        background: hsl(43 59% 53% / 0.3) !important;
        border-color: var(--clr-accent) !important;
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4) !important;
        color: var(--clr-accent) !important;
    }
}

/* ===== إزالة تأثيرات Hover على الأجهزة اللمسية ===== */
@media (hover: none) and (pointer: coarse) {
    /* إزالة تأثيرات hover */
    .service-card:hover,
    .highlight-card:hover,
    .contact-card:hover,
    .partner-showcase-item:hover,
    .client-showcase-item:hover,
    .nav-link:hover {
        transform: none !important;
    }
    
    /* إضافة تأثير active بدلاً من hover */
    .service-card:active,
    .highlight-card:active,
    .contact-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    .nav-link:active {
        transform: scale(0.98) !important;
    }
}

/* ===== تحسين التمرير ===== */
@media (max-width: 768px) {
    /* تمرير سلس */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* منع التمرير الأفقي */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* عندما تكون القائمة مفتوحة */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ===== إصلاح الخط الأبيض بين HERO والحافة على الموبايل ===== */
@media (max-width: 992px) {
    /* إزالة المسافة البيضاء من الجانبين - فقط لـ hero-section */
    .hero-section {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* التأكد من أن container لا يسبب المسافة */
    .hero-section .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: var(--space-md) !important;
    }
    
    /* التأكد من أن body و html لا يسببان المسافة - بدون التأثير على القائمة */
    body:not(.menu-open),
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* التأكد من أن القائمة لا تتأثر */
    .main-nav,
    .mobile-menu-overlay {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ===== إصلاح مشاكل iOS Safari ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific fixes */
    .main-nav {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* إصلاح ارتفاع 100vh في iOS */
    .hero-section {
        min-height: -webkit-fill-available;
    }
    
    /* إصلاح position: fixed في iOS */
    .site-header {
        position: -webkit-sticky;
        position: sticky;
    }
    
    .main-nav {
        position: fixed !important;
    }
}

/* ===== تحسين الأداء على الموبايل ===== */
@media (max-width: 768px) {
    /* تقليل التأثيرات الحركية */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* تحسين الرسوم المتحركة */
    .hero-bubbles,
    .hero-floating-logos {
        display: none !important; /* إخفاء العناصر الثقيلة على الموبايل */
    }
    
    /* تحسين الأداء */
    .main-nav,
    .mobile-menu-overlay {
        will-change: transform, opacity;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}

/* ===== إصلاح مشاكل الكيبورد على الموبايل ===== */
@media (max-width: 768px) {
    /* عندما يظهر الكيبورد */
    input:focus,
    textarea:focus,
    select:focus {
        font-size: 16px !important; /* منع التكبير */
    }
}

/* ===== تحسين الأزرار للمس ===== */
@media (max-width: 768px) {
    button,
    .btn,
    .form-submit {
        padding: 12px 24px !important;
        font-size: 16px !important;
        min-height: 48px !important;
    }
    
    /* تأثير اللمس */
    button:active,
    .btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s !important;
    }
}

/* ===== إصلاح مشاكل الاتجاه (Portrait/Landscape) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
        padding-top: 80px;
        padding-bottom: 40px;
    }
    
    .main-nav {
        padding: var(--space-xl) var(--space-md) !important;
    }
    
    .nav-link {
        padding: var(--space-sm) var(--space-md) !important;
        font-size: var(--fs-600) !important;
        min-height: 55px !important;
    }
}

/* ===== تحسين النصوص على الشاشات الصغيرة ===== */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .main-nav {
        padding: var(--space-2xl) var(--space-md) !important;
    }
    
    .nav-link {
        width: 85% !important;
        max-width: 400px !important;
        padding: var(--space-md) var(--space-lg) !important;
        font-size: var(--fs-600) !important;
        min-height: 60px !important;
        margin-bottom: var(--space-sm) !important;
    }
}

/* ===== إصلاح مشاكل الشاشات الصغيرة جداً ===== */
@media (max-width: 360px) {
    .main-nav {
        padding: var(--space-xl) var(--space-sm) !important;
    }
    
    .nav-link {
        width: 90% !important;
        max-width: 350px !important;
        padding: var(--space-sm) var(--space-md) !important;
        font-size: var(--fs-500) !important;
        min-height: 55px !important;
    }
    
    .lang-switcher {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    
    .mobile-menu-toggle {
        padding: 8px !important;
    }
}

/* ===== منع المشاكل الشائعة ===== */
@media (max-width: 992px) {
    /* منع scroll عند فتح القائمة */
    body.menu-open {
        touch-action: none;
        -webkit-overflow-scrolling: auto;
    }
    
    /* التأكد من عدم تداخل العناصر */
    .site-header {
        z-index: 10000 !important;
    }
    
    .mobile-menu-toggle {
        z-index: 10001 !important;
    }
    
    .mobile-menu-overlay {
        z-index: 9998 !important;
    }
    
    .main-nav {
        z-index: 9999 !important;
    }
}

/* ===== Debug Mode (اختياري - احذفه في الإنتاج) ===== */
/* 
.mobile-menu-toggle {
    border: 2px solid red !important;
}

.lang-switcher {
    border: 2px solid blue !important;
}

.main-nav {
    border: 2px solid green !important;
}

.mobile-menu-overlay {
    border: 2px solid yellow !important;
}
*/