/* Enhanced Scroll Lock System with Mobile Optimizations */

/* Base scroll lock classes */
.scroll-locked,
.body-scroll-lock {
    overflow: hidden !important;
    position: fixed !important;
    top: var(--scroll-y, 0) !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

html.scroll-locked {
    overflow: hidden !important;
    height: 100% !important;
}

/* Mobile-specific scroll lock enhancements */
@media (max-width: 768px) {
    .scroll-locked,
    .body-scroll-lock {
        /* Prevent iOS bounce scroll */
        -webkit-overflow-scrolling: auto !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
        
        /* Ensure full viewport coverage */
        position: fixed !important;
        top: var(--scroll-y, 0) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Specific handling for modal containers */
    .glofox-modal.modal-visible,
    .modal-visible {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    .scroll-locked,
    .body-scroll-lock {
        /* iOS Safari specific scroll lock */
        height: 100vh !important;
        height: -webkit-fill-available !important;
        position: fixed !important;
        top: var(--scroll-y, 0) !important;
        left: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    
    html.scroll-locked {
        height: 100vh !important;
        height: -webkit-fill-available !important;
        overflow: hidden !important;
    }
    
    /* Allow scrolling within modals on iOS */
    @media (max-width: 768px) {
        .glofox-modal.modal-visible {
            -webkit-overflow-scrolling: touch !important;
            overflow-y: auto !important;
            touch-action: pan-y !important;
            overscroll-behavior: contain !important;
        }
        
        .glofox-modal iframe {
            -webkit-overflow-scrolling: touch !important;
            overflow: auto !important;
            touch-action: pan-y pinch-zoom !important;
        }
    }
}

/* Android-specific optimizations */
@media (max-width: 768px) {
    .device-android .scroll-locked,
    .device-android .body-scroll-lock {
        /* Android Chrome scroll lock */
        position: fixed !important;
        top: var(--scroll-y, 0) !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
    
    .device-android .glofox-modal.modal-visible {
        overflow-y: auto !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
}

/* Prevent zoom on double tap for modal elements */
@media (max-width: 768px) {
    .glofox-modal * {
        touch-action: manipulation !important;
    }
    
    .glofox-modal iframe {
        touch-action: pan-y pinch-zoom !important;
    }
    
    .glofox-modal button,
    .glofox-modal input,
    .glofox-modal select,
    .glofox-modal textarea {
        touch-action: manipulation !important;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .scroll-locked,
    .body-scroll-lock {
        transition: none !important;
    }
}

/* Safe area handling for devices with notches */
@supports (padding: max(0px)) {
    .scroll-locked,
    .body-scroll-lock {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}