/**
 * Mobile Bottom Sheet Style
 * Transforms the booking modal into an app-like bottom sheet
 * 
 * @package TravelerChildTheme
 * @since 1.0.0
 */

/* Mobile bottom sheet styling */
@media screen and (max-width: 991px) {
    /* Transform modal into bottom sheet */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        height: auto !important;
        max-height: 94vh !important; /* Leave space at top to show page behind */
        min-height: 50vh !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important; /* Rounded top corners */
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(100%) !important; /* Start hidden below screen */
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
        overflow: hidden !important;
    }
    
    /* Show state - slide up from bottom */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking.open {
        transform: translateY(0) !important;
    }
    
    /* Drag handle indicator - narrower width */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking::before {
        content: "" !important;
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 28px !important;
        height: 4px !important;
        background: #d1d5db !important;
        border-radius: 100px !important;
        z-index: 11 !important;
    }
    
    /* Sheet header with close button */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 48px !important;
        background: #ffffff !important;
        border-bottom: none !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 16px 12px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Add 'Close' text label above drag handle */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon::after {
        content: "Close" !important;
        position: absolute !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #6b7280 !important;
        letter-spacing: 0.01em !important;
    }
    
    /* Hide the X close button icon since we have text */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon svg,
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon i {
        display: none !important;
    }
    
    /* Make the entire header clickable for closing */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon {
        cursor: pointer !important;
    }
    
    /* Active state for close text */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon:active::after {
        color: #374151 !important;
        transform: translateX(-50%) scale(0.95) !important;
    }
    
    /* Content wrapper with scroll */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .form-book-wrapper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(94vh - 48px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
        background: #ffffff !important;
        scroll-behavior: smooth !important;
    }
    
    /* Booking widget adjustments */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .booking-widget-instant {
        height: auto !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 16px 20px !important;
        overflow: visible !important;
        background: #ffffff !important;
    }
    
    /* Add backdrop overlay */
    body.single-st_tours .fixed-on-mobile-backdrop,
    body.single-st_tours .st-backdrop,
    body.single-st_tours .modal-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99998 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* Show backdrop when sheet is open */
    body.st_overflow .fixed-on-mobile-backdrop,
    body.st_overflow .st-backdrop,
    body.st_overflow .modal-backdrop {
        opacity: 1 !important;
    }
    
    /* Prevent body scroll when sheet is open */
    body.st_overflow {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Push HubSpot chat widget behind modal when booking sheet is open */
    body.st_overflow #hubspot-messages-iframe-container {
        z-index: 99997 !important; /* Below our modal (99999) and backdrop (99998) */
    }
    
    /* Alternative: Hide HubSpot completely when modal is open */
    body.single-st_tours.st_overflow #hubspot-messages-iframe-container {
        display: none !important;
    }
    
    /* Keep header visible but dimmed */
    body.st_overflow .site-header,
    body.st_overflow #masthead {
        opacity: 0.4 !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* Ensure sticky button triggers sheet properly */
    .hotel-target-book-mobile {
        z-index: 1000 !important;
    }
    
    /* iOS safe areas */
    @supports (padding: max(0px)) {
        body.single-st_tours .fixed-on-mobile.st-fixed-form-booking {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
        
        body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .form-book-wrapper {
            padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        }
    }
    
    /* Remove conflicting transforms */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking.open {
        animation: none !important;
    }
    
    /* Smooth entrance animation */
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    /* Apply animation when opening */
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking.open {
        animation: slideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
    }
}

/* Desktop - ensure sheet doesn't interfere */
@media screen and (min-width: 992px) {
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking {
        position: static !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        max-height: none !important;
        min-height: auto !important;
    }
    
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking::before {
        display: none !important;
    }
    
    body.single-st_tours .fixed-on-mobile.st-fixed-form-booking .close-icon {
        display: none !important;
    }
}

/* Global HubSpot chat widget positioning fix for tour pages */
body.single-st_tours #hubspot-messages-iframe-container {
    z-index: 9990 !important; /* Well below our modal but still high enough for normal use */
    bottom: 20px !important; /* Add some spacing from bottom */
    right: 20px !important; /* Add some spacing from right */
}