/* Mobile Debug CSS - Ultra High Specificity */
@media screen and (max-width: 768px) {
    /* DROPDOWN Z-INDEX FIXES - MAXIMUM SPECIFICITY */
    html body .premium-search-dropdown {
        z-index: 2147483646 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        position: absolute !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 600px !important;
        overflow-y: auto !important;
        border-radius: 15px !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
        border: 1px solid #ddd !important;
    }
    
    html body .premium-search-dropdown.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        display: block !important;
    }
    
    html body .search-location-selector .location-dropdown,
    html body .location-dropdown {
        z-index: 2147483647 !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }
    
    html body .search-location-selector.open .location-dropdown,
    html body .location-selector.open .location-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    html body .premium-search-container {
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
    
    html body .search-location-selector,
    html body .location-selector {
        position: relative !important;
        z-index: 2147483647 !important;
        overflow: visible !important;
    }
    
    html body .all-deals-badge {
        z-index: 1 !important;
    }
    
    html body .premium-hero-carousel,
    html body .hero-carousel-container {
        overflow: visible !important;
    }

    /* Categories carousel needs scroll on mobile - DO NOT change overflow */
    html body .categories-carousel-wrapper {
        overflow: visible !important;
    }

    html body .categories-carousel-container {
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }

    html body .categories-carousel {
        overflow: visible !important;
    }
    
    /* Hide categories elements when dropdowns are visible */
    .premium-search-dropdown.show ~ .categories h3,
    .premium-search-dropdown.show ~ .categories .categories-header h3,
    .location-dropdown[style*="opacity: 1"] ~ .categories h3,
    .location-dropdown[style*="opacity: 1"] ~ .categories .categories-header h3 {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
    }
    
    .premium-search-dropdown.show ~ .categories .categories-header h3::after,
    .location-dropdown[style*="opacity: 1"] ~ .categories .categories-header h3::after {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
    }
    
    .premium-search-dropdown.show ~ .categories .all-deals-badge,
    .location-dropdown[style*="opacity: 1"] ~ .categories .all-deals-badge {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* Alternative approach - hide when any dropdown is open */
    body:has(.premium-search-dropdown.show) .categories h3,
    body:has(.location-dropdown[style*="opacity: 1"]) .categories h3 {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    body:has(.premium-search-dropdown.show) .categories-header h3::after,
    body:has(.location-dropdown[style*="opacity: 1"]) .categories-header h3::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    body:has(.premium-search-dropdown.show) .all-deals-badge,
    body:has(.location-dropdown[style*="opacity: 1"]) .all-deals-badge {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Force card height with maximum specificity */
    body .events-section .events-carousel .events-track .premium-event-card {
        height: 85vh !important;
        min-height: 600px !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Image container fixed height */
    body .events-section .events-carousel .events-track .premium-event-card .event-image-container {
        height: 200px !important;
        flex-shrink: 0 !important;
    }
    
    /* Content area flexible */
    body .events-section .events-carousel .events-track .premium-event-card .event-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
        overflow-y: auto !important;
    }
    
    /* Footer at bottom */
    body .events-section .events-carousel .events-track .premium-event-card .event-footer {
        margin-top: auto !important;
        flex-shrink: 0 !important;
        padding: 1rem !important;
        background: white !important;
    }
    
    /* Button always visible */
    body .events-section .events-carousel .events-track .premium-event-card .premium-buy-btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        background: #e74c3c !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }
}