/*
 * iOS-Specific Horizontal Overflow Fix
 * Targets iOS Safari/WebKit behavior specifically
 * Uses feature detection to avoid affecting Android/Desktop
 */

/* =============================================
   iOS DETECTION AND CORE FIXES
   ============================================= */

/* iOS Safari specific detection using WebKit features */
@supports (-webkit-touch-callout: none) {
    /* Core overflow prevention for iOS */
    html, body {
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
        -webkit-overflow-scrolling: auto !important;
        position: relative !important;
    }
    
    /* Prevent elastic scrolling on iOS */
    * {
        -webkit-overflow-scrolling: auto !important;
        overscroll-behavior-x: none !important;
    }
    
    /* Force hardware acceleration to prevent rendering issues */
    html {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
}

/* Additional iOS detection using user agent (fallback) */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    /* iOS-specific viewport constraints */
    @supports (-webkit-touch-callout: none) {
        /* Strict container width limits */
        .container, .container-fluid,
        header, main, section, footer,
        .hero_cinematic, .page_cover,
        .aurora-hero {
            max-width: 100vw !important;
            overflow-x: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        /* Prevent any element from exceeding viewport */
        * {
            max-width: 100vw !important;
            box-sizing: border-box !important;
        }
    }
}

/* =============================================
   AURORA BACKGROUND FIXES FOR iOS
   ============================================= */

@supports (-webkit-touch-callout: none) {
    /* Constrain aurora elements specifically for iOS */
    .aurora-hero .aurora {
        max-width: 100vw !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    /* iOS-specific aurora positioning constraints */
    .aurora-hero .a1 {
        width: min(50vw, 100vw) !important;
        height: min(50vh, 100vh) !important;
        left: max(-5%, -30px) !important;
        top: max(-5%, -30px) !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    .aurora-hero .a2 {
        width: min(45vw, 100vw) !important;
        height: min(45vh, 100vh) !important;
        right: max(-10%, -30px) !important;
        bottom: max(-15%, -30px) !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    .aurora-hero .a3 {
        width: min(35vw, 100vw) !important;
        height: min(35vh, 100vh) !important;
        left: max(15%, 0px) !important;
        top: max(35%, 0px) !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    /* Hero spotlight iOS constraints */
    #hero-spot {
        max-width: min(320px, 100vw) !important;
        max-height: min(320px, 100vh) !important;
        overflow: hidden !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
}

/* =============================================
   TRANSFORM AND ANIMATION CONSTRAINTS FOR iOS
   ============================================= */

@supports (-webkit-touch-callout: none) {
    /* Disable problematic transforms on iOS mobile */
    @media (max-width: 768px) {
        /* Disable 3D transforms that cause overflow */
        .tilt-3d,
        .project_box .rounded-2xl,
        .product_box .rounded-2xl,
        .news_box .rounded-2xl,
        .solution_box {
            -webkit-transform: none !important;
            transform: none !important;
            will-change: auto !important;
        }
        
        /* Constrain parallax elements */
        .hero-logo,
        .glass-card {
            -webkit-transform: none !important;
            transform: none !important;
            will-change: auto !important;
        }
        
        /* Constrain any element with inline transforms */
        [style*="transform"],
        [style*="translate"] {
            max-width: 100vw !important;
            overflow: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
    }
}

/* =============================================
   MOBILE MENU FIXES FOR iOS
   ============================================= */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* iOS-specific mobile menu constraints */
        .mobile-menu .menu-sheet,
        .drawer-panel,
        .menu-sheet {
            max-width: min(85vw, 320px) !important;
            -webkit-transform: translateX(-100%) translateZ(0) !important;
            transform: translateX(-100%) translateZ(0) !important;
            overflow-x: hidden !important;
        }
        
        .mobile-menu.open .menu-sheet,
        .drawer-panel.open,
        .menu-sheet.open {
            -webkit-transform: translateX(0) translateZ(0) !important;
            transform: translateX(0) translateZ(0) !important;
        }
        
        /* RTL support for iOS */
        [dir="rtl"] .mobile-menu .menu-sheet {
            -webkit-transform: translateX(100%) translateZ(0) !important;
            transform: translateX(100%) translateZ(0) !important;
        }
        
        [dir="rtl"] .mobile-menu.open .menu-sheet {
            -webkit-transform: translateX(0) translateZ(0) !important;
            transform: translateX(0) translateZ(0) !important;
        }
    }
}

/* =============================================
   CAROUSEL AND SLIDER FIXES FOR iOS
   ============================================= */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* iOS-specific carousel constraints */
        .swiper,
        .solution_carousel,
        .clients_slider {
            width: 100% !important;
            max-width: 100vw !important;
            overflow: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        .swiper-slide {
            max-width: calc(100vw - 2rem) !important;
            flex-shrink: 0 !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        /* Prevent horizontal scroll in carousels */
        .solution_carousel:not(.owl-loaded) {
            max-width: 100vw !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: auto !important;
        }
    }
}

/* =============================================
   FORM AND INPUT FIXES FOR iOS
   ============================================= */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Prevent zoom on input focus (iOS specific) */
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"],
        input[type="search"],
        textarea,
        select {
            font-size: 16px !important;
            max-width: 100% !important;
            -webkit-appearance: none !important;
            border-radius: 0 !important;
        }
        
        /* Prevent form overflow */
        form {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
    }
}

/* =============================================
   EMERGENCY OVERFLOW PREVENTION FOR iOS
   ============================================= */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Force hide horizontal scrollbars on iOS */
        ::-webkit-scrollbar:horizontal {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        
        /* Absolute positioning constraints */
        [style*="position: absolute"],
        [style*="position:absolute"],
        .absolute {
            max-width: 100vw !important;
            overflow: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        /* Fixed positioning constraints */
        [style*="position: fixed"],
        [style*="position:fixed"],
        .fixed {
            max-width: 100vw !important;
            overflow: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        /* Last resort: constrain everything */
        * {
            max-width: 100vw !important;
            -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
        }
    }
}

/* =============================================
   iOS SAFARI SPECIFIC VIEWPORT FIXES
   ============================================= */

/* Target iOS Safari specifically */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
    /* Modern iOS Safari */
    html {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    body {
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* Fallback for older iOS versions */
@supports (-webkit-touch-callout: none) and (translate: none) {
    html, body {
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }
}