/**
 * Mobile Scrolling Fix for CliveMart
 * Prevents white space when scrolling on mobile browsers
 */

/* Mobile Device Detection and Fixes */
@media screen and (max-width: 768px) {
    /* Force proper dimensions */
    html {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        
        /* iOS Safari specific fixes */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overscroll-behavior: none !important;
        -webkit-overscroll-behavior-y: none !important;
    }
    
    /* Prevent any element from extending beyond viewport */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Bootstrap and common framework fixes */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .row {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    [class*="col-"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Media elements that commonly cause overflow */
    img,
    video,
    iframe,
    canvas,
    svg,
    picture,
    embed,
    object {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Layout elements */
    .header,
    .navbar,
    .nav,
    .footer,
    .main,
    .main-content,
    .content,
    .wrapper,
    .section {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Tables that might cause overflow */
    table {
        max-width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
    }
    
    /* Forms and inputs */
    form,
    input,
    textarea,
    select,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Cards and panels */
    .card,
    .panel,
    .box,
    .widget {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix for elements with fixed positioning */
    .fixed,
    .sticky,
    [style*="position: fixed"],
    [style*="position: sticky"] {
        max-width: 100vw !important;
    }
}

/* Additional fixes for touch devices */
@media (hover: none) and (pointer: coarse) {
    html {
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    body {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important;
        -webkit-overscroll-behavior-y: none !important;
    }
}

/* Landscape mobile fixes */
@media screen and (max-width: 768px) and (orientation: landscape) {
    html,
    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    html,
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 768px) {
        html {
            -webkit-overflow-scrolling: touch !important;
        }
        
        body {
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior: none !important;
            -webkit-overscroll-behavior: none !important;
        }
    }
}