/**
 * Simple Mobile Filter Toggle Styles
 * Clean, working implementation for mobile filter access
 */

/* ===== Mobile Filter FAB Button ===== */
.mobile-filter-fab {
    display: none; /* Hidden by default, shown via JS on mobile */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--heather-purple, #8B5CF6);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 0;
    z-index: var(--z-modal, 1050); /* Use CSS custom properties for proper modal hierarchy */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    align-items: center;
    justify-content: center;
    visibility: visible; /* Ensure visibility */
    opacity: 1; /* Ensure opacity */
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mobile-filter-fab svg {
    width: 24px;
    height: 24px;
}

/* Ensure FAB is clickable and above all other elements */
.mobile-filter-fab {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: fixed !important;
    z-index: 10003 !important; /* Higher than filter panel to ensure FAB is always clickable */
}

/* Ensure child elements don't interfere with clicks */
.mobile-filter-fab * {
    pointer-events: none;
}

/* Ensure cookie banner elements don't interfere with FAB */
@media (max-width: 768px) {
    .cookie-consent-banner,
    .cookie-consent-actions,
    .cookie-consent-content {
        pointer-events: auto !important;
        /* But keep them lower than FAB */
        z-index: 9999 !important;
    }
    
    /* Prevent cookie banner from blocking FAB area */
    .cookie-consent-banner {
        margin-bottom: 80px !important; /* Space for FAB */
    }
}

.mobile-filter-fab:hover {
    background-color: var(--scottish-blue, #003DA5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.mobile-filter-fab:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-filter-fab:focus {
    outline: 3px solid var(--scottish-blue, #003DA5);
    outline-offset: 2px;
}

/* ===== Mobile Filter Panel Overlay ===== */
@media (max-width: 768px) {
    /* Force FAB to be visible on mobile */
    .mobile-filter-fab {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Ensure FAB is positioned correctly in modal hierarchy */
        z-index: var(--z-modal, 1050) !important;
    }
    
    /* Filter panel mobile positioning - ULTRA HIGH SPECIFICITY to override desktop styles */
    /* Need to match or exceed: body main section#attractions #filters-panel */
    body main section#attractions #filters-panel,
    body #attractions #filters-panel.filters,
    body aside#filters-panel,
    #attractions aside#filters-panel,
    #filters-panel.filters,
    aside#filters-panel.filters,
    #filters-panel {
        /* Override the desktop hiding rules with mobile panel styles */
        display: block !important;
        position: fixed !important;
        left: -100% !important; /* Start off-screen left, not -100vw */
        top: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        background: white !important;
        z-index: 10002 !important; /* Higher than cookie banner (10000) to prevent bleeding */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transition: left 0.3s ease-in-out !important;
        padding: 20px !important;
        padding-top: 60px !important; /* Space for close button */
        box-shadow: none !important;
        border-radius: 0 !important; /* Remove desktop border radius */
        visibility: visible !important; /* Override desktop hidden */
        pointer-events: auto !important; /* Override desktop disabled */
        /* Ensure touch interactions work within panel */
        touch-action: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        /* Force panel to be above backdrop and allow scrolling */
        overscroll-behavior: contain !important;
        -webkit-overscroll-behavior: contain !important;
    }

    /* Active state - slide in from left with ULTRA HIGH SPECIFICITY */
    body main section#attractions #filters-panel.mobile-active,
    body #attractions #filters-panel.mobile-active.filters,
    body aside#filters-panel.mobile-active,
    #attractions aside#filters-panel.mobile-active,
    #filters-panel.mobile-active.filters,
    aside#filters-panel.mobile-active.filters,
    #filters-panel.mobile-active {
        left: 0 !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* Filter panel content spacing */
    #filters-panel .filter-group {
        margin-bottom: 24px !important;
    }

    #filters-panel .filter-group h3,
    #filters-panel .filter-group legend {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        color: #111827 !important;
    }

    #filters-panel label {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        min-height: 44px !important;
        padding: 8px 0 !important;
        font-size: 16px !important;
        color: #374151 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        /* Ensure text is visible and properly spaced */
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow: visible !important;
        text-align: left !important;
        /* Ensure the label content flows properly */
        flex-wrap: nowrap !important;
        gap: 0 !important;
        /* Ensure text doesn't get hidden behind checkbox */
        position: relative !important;
        z-index: 2 !important;
    }

    #filters-panel input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        margin-right: 12px !important;
        margin-left: 0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        /* Ensure checkbox is properly positioned */
        position: relative !important;
        z-index: 1 !important;
        /* Prevent checkbox from hiding text */
        vertical-align: middle !important;
    }

    /* Ensure label text is visible and properly positioned */
    #filters-panel label:not(:has(input[type="checkbox"])) {
        /* Handle labels without checkboxes */
        padding-left: 0 !important;
    }

    /* Ensure text after checkbox is visible and properly positioned */

    /* Force text content after checkbox to be visible */
    #filters-panel label > input[type="checkbox"] {
        flex: 0 0 auto !important;
    }

    /* Ensure all text content in labels is visible */
    #filters-panel label > * {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Search input styling */
    #filters-panel input[type="search"],
    #filters-panel input[type="text"] {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        background: white !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
        /* Enhanced mobile accessibility */
        -webkit-appearance: none !important;
        appearance: none !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        pointer-events: auto !important;
    }

    #filters-panel input[type="search"]:focus,
    #filters-panel input[type="text"]:focus {
        outline: none !important;
        border-color: var(--scottish-blue, #003DA5) !important;
        box-shadow: 0 0 0 3px var(--scottish-heritage-light, rgba(0, 61, 165, 0.1)) !important;
    }

    /* Enhanced search section positioning for mobile */
    #filters-panel .search-section {
        position: relative !important;
        width: 100% !important;
        margin-bottom: 24px !important;
        z-index: var(--z-tooltip, 1060) !important; /* Above modal for search interactions */
    }

    #filters-panel .search-container {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Ensure search input is always accessible and focusable */
    #filters-panel #search-input {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        clip: none !important;
        clip-path: none !important;
        overflow: visible !important;
    }

    /* Optimize for mobile keyboard interaction */
    #filters-panel #search-input:focus {
        position: relative !important;
        z-index: var(--z-tooltip, 1060) !important; /* Above modal for search interactions */
    }

    /* Prevent search suggestions from being clipped */
    #filters-panel .search-suggestions {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: var(--z-tooltip, 1060) !important; /* Above modal for search interactions */
        max-height: 200px !important;
        overflow-y: auto !important;
        background: white !important;
        border: 1px solid #d1d5db !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* Close button in panel */
    .mobile-filter-close {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        background: #f8fafc !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 24px !important;
        color: #64748b !important;
        cursor: pointer !important;
        z-index: 10000 !important; /* Higher z-index to ensure visibility */
        display: none !important; /* Hidden by default, shown via JS */
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        pointer-events: auto !important; /* Ensure it can be clicked */
    }

    .mobile-filter-close:active {
        background: #e5e7eb !important;
        transform: scale(0.95) !important;
    }

    .mobile-filter-close:focus {
        outline: 2px solid var(--scottish-blue, #003DA5) !important;
        outline-offset: 2px !important;
    }

    /* Clear filters button */
    #clear-filters {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        margin-top: 16px !important;
        transition: all 0.1s ease !important;
        touch-action: manipulation !important;
    }

    #clear-filters:active {
        background: #e5e7eb !important;
        transform: scale(0.98) !important;
    }

    #clear-filters:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }

    /* Cookie consent banner optimization for mobile */
    .cookie-consent-banner {
        /* Ensure cookie banner doesn't block FAB */
        bottom: 0 !important;
        max-height: 25vh !important;
        z-index: 10000 !important;
        /* Add slight padding to ensure FAB is not covered */
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* Ensure map container isn't blocked by cookie banner */
    #map-container {
        /* Add padding bottom when cookie banner is present */
        padding-bottom: 0;
        transition: padding-bottom 0.3s ease;
    }

    /* When cookie banner is visible, adjust map padding */
    body:has(.cookie-consent-banner) #map-container {
        padding-bottom: 25vh;
    }

    /* Ensure cookie notifications don't conflict with FAB */
    .cookie-consent-notification {
        z-index: 10001 !important;
        /* Position away from FAB area */
        top: 20px !important;
        right: 20px !important;
        left: 20px !important;
        bottom: auto !important;
    }
}

/* ===== Backdrop Overlay ===== */
.mobile-filter-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001 !important; /* Above page content but below filter panel */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Enable backdrop clicks to close filter */
    pointer-events: auto;
}

.mobile-filter-backdrop.active {
    opacity: 1;
    visibility: visible;
    /* Keep pointer-events enabled for backdrop clicks */
    pointer-events: auto;
}

/* ===== Body Scroll Lock - Complete Implementation ===== */
body.mobile-filters-open {
    /* Enhanced scroll lock - works with JavaScript position:fixed implementation */
    overflow: hidden !important;
    
    /* Ensure filter panel scrolling remains functional */
    /* Position fixed is handled by JavaScript for iOS Safari compatibility */
}

/* Support for JavaScript-applied scroll lock styles */
body[style*="position: fixed"] {
    /* When JavaScript applies position:fixed, ensure proper layout */
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure filter panel remains scrollable even when body is locked */
body.mobile-filters-open #filters-panel {
    /* Override any inherited scroll restrictions */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Maintain internal scrolling capability */
    overscroll-behavior: contain !important;
    -webkit-overscroll-behavior: contain !important;
}

/* ===== Competing Elements Management ===== */
/* Lower z-index of competing elements when filter is active */
body.mobile-filters-open .cookie-consent-banner,
body.mobile-filters-open .cookie-consent-notification,
body.mobile-filters-open .trip-planner-modal,
body.mobile-filters-open .notification-modal,
body.mobile-filters-open .review-modal,
body.mobile-filters-open .photo-upload-modal,
body.mobile-filters-open .share-modal,
body.mobile-filters-open .update-notification {
    z-index: 10000 !important; /* Below filter backdrop (10001) */
    pointer-events: none !important; /* Disable interactions */
}

/* Legacy search suggestions CSS removed - now using advanced search overlay */

/* Keep essential elements functional but below filter */
body.mobile-filters-open .cookie-consent-banner {
    pointer-events: auto !important; /* Allow cookie interactions */
    z-index: 10000 !important; /* Still below filter backdrop (10001) */
}

/* Ensure panel content is always scrollable regardless of body state */
@media (max-width: 768px) {
    body.mobile-filters-open #filters-panel {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Ensure panel scrolling works even when body is locked */
        position: fixed !important;
        overscroll-behavior: contain !important;
    }
}

/* ===== Desktop - Hide Mobile Elements ===== */
@media (min-width: 769px) {
    .mobile-filter-fab {
        display: none !important;
    }

    .mobile-filter-backdrop {
        display: none !important;
    }

    .mobile-filter-close {
        display: none !important;
    }

    #filters-panel {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        z-index: auto !important;
        overflow-y: visible !important;
        transition: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body.mobile-filters-open {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
}

/* ===== iOS Safe Area Support ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-filter-fab {
            bottom: calc(20px + env(safe-area-inset-bottom));
            right: calc(20px + env(safe-area-inset-right));
        }

        #filters-panel {
            padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ===== Animation Performance ===== */
/* Removed will-change to avoid unnecessary stacking context creation */
/* Only add will-change during actual animations via JavaScript */

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    .mobile-filter-fab {
        border: 2px solid currentColor;
    }

    .mobile-filter-backdrop {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .mobile-filter-fab,
    #filters-panel,
    .mobile-filter-backdrop,
    .mobile-filter-close {
        transition: none !important;
    }
}

/* ===== Focus Visible ===== */
.mobile-filter-fab:focus-visible {
    outline: 3px solid var(--scottish-blue, #003DA5);
    outline-offset: 2px;
}

.mobile-filter-close:focus-visible {
    outline: 2px solid var(--scottish-blue, #003DA5);
    outline-offset: 2px;
}