/*
 * Mobile Overflow Fix - Comprehensive Solution
 * Prevents horizontal scrolling on all mobile devices
 * Addresses root causes while maintaining functionality
 */

/* =============================================
   CORE OVERFLOW PREVENTION
   ============================================= */

/* Strict overflow control for mobile devices */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* Prevent any element from extending beyond viewport */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all containers respect viewport width */
    .container, .container-fluid, 
    header, main, section, footer,
    .hero_cinematic, .page_cover {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
}

/* =============================================
   MOBILE-SPECIFIC CONTAINER FIXES
   ============================================= */

@media (max-width: 768px) {
    /* Safe padding for mobile containers */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Header container mobile fixes */
    header.header .container,
    .site-header .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Tailwind utility overrides for mobile */
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .sm\\:px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .lg\\:px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* =============================================
   TRANSFORM AND ANIMATION CONSTRAINTS
   ============================================= */

@media (max-width: 768px) {
    /* Constrain all transforms to prevent overflow */
    [style*="transform"],
    [style*="translate"] {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    /* Disable problematic 3D transforms on mobile */
    .tilt-3d,
    .project_box .rounded-2xl,
    .product_box .rounded-2xl,
    .news_box .rounded-2xl,
    .solution_box {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Constrain parallax effects */
    .hero-logo,
    .glass-card {
        transform: none !important;
    }
    
    /* Mobile drawer transform constraints */
    .drawer-panel,
    .menu-sheet {
        max-width: min(85vw, 320px) !important;
        transform: translateX(-100%) !important;
    }
    
    .drawer-panel.open,
    .menu-sheet.open {
        transform: translateX(0) !important;
    }
    
    /* RTL drawer constraints */
    [dir="rtl"] .drawer-panel,
    [dir="rtl"] .menu-sheet {
        transform: translateX(100%) !important;
    }
    
    [dir="rtl"] .drawer-panel.open,
    [dir="rtl"] .menu-sheet.open {
        transform: translateX(0) !important;
    }
}

/* =============================================
   CAROUSEL AND SLIDER FIXES
   ============================================= */

@media (max-width: 768px) {
    /* Swiper container constraints */
    .swiper,
    .solution_carousel,
    .clients_slider {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Swiper slide constraints */
    .swiper-slide {
        max-width: calc(100vw - 2rem) !important;
        flex-shrink: 0 !important;
    }
    
    /* Horizontal scroll fallback constraints */
    .solution_carousel:not(.owl-loaded) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .solution_carousel:not(.owl-loaded)::-webkit-scrollbar {
        display: none !important;
    }
    
    .solution_carousel:not(.owl-loaded) .item {
        min-width: min(260px, 80vw) !important;
        max-width: min(360px, 90vw) !important;
        flex-shrink: 0 !important;
    }
}

/* =============================================
   HERO SECTION MOBILE FIXES
   ============================================= */

@media (max-width: 768px) {
    /* Aurora background constraints */
    .aurora-hero .aurora {
        max-width: 100vw !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }
    
    .aurora-hero .a1 {
        width: min(60vw, 100vw) !important;
        height: min(60vh, 100vh) !important;
        left: max(-10%, -50px) !important;
        top: max(-10%, -50px) !important;
    }
    
    .aurora-hero .a2 {
        width: min(55vw, 100vw) !important;
        height: min(55vh, 100vh) !important;
        right: max(-15%, -50px) !important;
        bottom: max(-20%, -50px) !important;
    }
    
    .aurora-hero .a3 {
        width: min(40vw, 100vw) !important;
        height: min(40vh, 100vh) !important;
        left: max(10%, 0px) !important;
        top: max(30%, 0px) !important;
    }
    
    /* Hero spotlight constraints */
    #hero-spot {
        max-width: 100vw !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Glass card mobile constraints */
    .glass-card {
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }
}

/* =============================================
   FORM AND INPUT CONSTRAINTS
   ============================================= */

@media (max-width: 768px) {
    /* Prevent form inputs from causing overflow */
    input, textarea, select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .contact_form input,
    .contact_form textarea,
    .product_contact_form input,
    .product_contact_form textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =============================================
   GRID AND FLEXBOX MOBILE FIXES
   ============================================= */

@media (max-width: 768px) {
    /* Ensure flex containers don't overflow */
    .flex, .d-flex,
    .header-bar,
    .footer-grid {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Grid system mobile constraints */
    .grid,
    .logo_wall {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Logo wall mobile grid */
    .logo_wall {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

/* =============================================
   iOS SPECIFIC FIXES
   ============================================= */

/* Target iOS devices specifically */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* iOS Safari specific overflow fixes */
        html, body {
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: auto !important;
            position: relative !important;
        }
        
        /* Disable elastic scrolling on iOS */
        body {
            overscroll-behavior-x: none !important;
            -webkit-overflow-scrolling: auto !important;
        }
        
        /* Prevent iOS zoom on input focus */
        input, textarea, select {
            font-size: 16px !important;
            transform-origin: left top !important;
        }
        
        /* iOS transform constraints */
        * {
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
        }
    }
}

/* =============================================
   EMERGENCY OVERFLOW PREVENTION
   ============================================= */

/* Last resort: hide any overflow on mobile */
@media (max-width: 768px) {
    /* Force hide horizontal scrollbars */
    ::-webkit-scrollbar:horizontal {
        display: none !important;
    }
    
    /* Prevent any element from being wider than viewport */
    * {
        max-width: 100vw !important;
    }
    
    /* Constrain absolutely positioned elements */
    [style*="position: absolute"],
    [style*="position:absolute"],
    .absolute {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    /* Constrain fixed positioned elements */
    [style*="position: fixed"],
    [style*="position:fixed"],
    .fixed {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
}