/* DESKTOP FIRST - Force hide mobile-only elements on desktop */
@media (min-width: 769px) {
    /* FORCE HIDE: Mobile filter toggle buttons on desktop */
    .filter-toggle-button-show,
    .filter-toggle-button-hide {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* FORCE HIDE: Mobile status legend on desktop */
    .status-legend {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* ENSURE: Filters panel is always visible on desktop */
    .filters-panel {
        display: flex !important;
        transform: none !important;
        position: fixed !important;
        bottom: 1rem !important;
    }
}

/* RESPONSIVE DESIGN - STICKY FOOTER SINGLE ROW LAYOUT */

/* Large Desktop - Sticky footer adjustments */
@media (min-width: 1400px) {
    .filters-panel {
        padding: 18px 40px;
        gap: 40px;
        width: 1400px;
    }
    
    .slider-container {
        min-width: 160px;
        max-width: 220px;
    }
    
    .bedroom-btn {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
    
    .filter-label {
        font-size: 15px;
    }
    
    .slider-values {
        font-size: 15px;
    }
}

/* Tablet View - Sticky footer adjustments */
@media (max-width: 1200px) and (min-width: 769px) {
    .filters-panel {
        padding: 14px 24px;
        gap: 24px;
    }
    
    .filter-section {
        min-width: 100px;
    }
    
    .slider-container {
        min-width: 120px;
        max-width: 180px;
    }
    
    .bedroom-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    .filter-btn.clear {
        padding: 8px 16px;
        font-size: 11px;
    }
    
    .filter-label {
        font-size: 12px;
    }
    
    .slider-values {
        font-size: 13px;
    }
}

/* Mobile View - Stack vertically for very small screens */
@media (max-width: 768px) {
    /* MOBILE COLLAPSIBLE FILTER SYSTEM - TWO BUTTON APPROACH */
    
    /* Mobile Status Legend - Show when filters are hidden */
    .status-legend {
        display: flex !important;
    }
    
    /* Hide status legend when filters are visible */
    .filters-panel.mobile-visible + .status-legend {
        display: none !important;
    }
    
    /* Also hide when filters panel has mobile-visible class */
    .mobile-visible ~ .status-legend {
        display: none !important;
    }
    
    /* Hide status legend when apartment details are open */
    body.apartment-details-open .status-legend {
        display: none !important;
    }
    
    /* MOBILE: SHOW button - visible when filters are hidden */
    .filter-toggle-button-show {
        display: flex !important;
        position: fixed !important;
        bottom: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 200 !important;
    }
    
    /* MOBILE: HIDE button - visible when filters are shown */
    .filter-toggle-button-hide {
        display: none !important; /* Initially hidden */
        position: absolute !important;
        top: -40px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 160 !important;
        border-radius: 15px 15px 0 0 !important;
        border-bottom: none !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    /* MOBILE: Filters panel - initially hidden below screen */
    .filters-panel {
        /* CRITICAL: Start completely hidden below screen with space for hide button */
        transform: translateY(calc(100% + 2rem)) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 20px 16px 16px 16px !important; /* Extra top padding for hide button */
        gap: 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        left: 1rem !important;
        right: 1rem !important;
        max-width: none !important;
        bottom: 1rem !important;
        z-index: 150 !important;
        position: relative !important; /* For hide button absolute positioning */
        position: relative !important; /* For hide button positioning */
    }
    
    /* MOBILE: Show filters panel when mobile-visible class is added */
    .filters-panel.mobile-visible {
        transform: translateY(0) !important; /* SLIDE UP into view */
    }
    
    /* MOBILE: When filters are visible - hide SHOW button, show HIDE button */
    .filters-panel.mobile-visible ~ .filter-toggle-button-show {
        display: none !important;
    }
    
    .filters-panel.mobile-visible .filter-toggle-button-hide {
        display: flex !important;
    }
    
    /* MOBILE: When SHOW button is hidden, ensure it doesn't interfere */
    .filter-toggle-button-show[style*="display: none"] {
        pointer-events: none !important;
        opacity: 0 !important;
    }
    
    /* MOBILE: When filters are visible - hide SHOW button, show HIDE button */
    .filters-panel.mobile-visible ~ .filter-toggle-button-show {
        display: none !important; /* Hide the SHOW button */
    }
    
    .filters-panel.mobile-visible .filter-toggle-button-hide {
        display: flex !important; /* Show the HIDE button */
    }
    
    /* MOBILE: Hide button positioning at top of panel */
    .filter-toggle-button-hide {
        position: absolute !important;
        top: -40px !important; /* Position above panel */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 160 !important;
    }
    
    .filter-section {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        min-width: auto !important;
    }
    
    .slider-container {
        width: 100% !important;
        max-width: 280px !important;
        min-width: auto !important;
    }
    
    .bedroom-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }
    
    .filter-actions {
        justify-content: center !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        display: flex !important;
        /* NUCLEAR OPTION: Force vertical layout on ALL mobile browsers */
        flex-wrap: wrap !important;
        align-content: center !important;
    }
    
    .filter-btn.clear {
        padding: 8px 16px !important;
        font-size: 12px !important;
        display: block !important;
        width: auto !important;
        margin-bottom: 8px !important;
        /* FORCE button to take full width and push link down */
        flex-basis: 100% !important;
        order: 1 !important;
    }
    
    .rendexio-link {
        font-size: 0.65rem !important;
        opacity: 0.9 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px !important;
        clear: both !important;
        position: relative !important;
        /* NUCLEAR OPTION: Force link to new line */
        flex-basis: 100% !important;
        order: 2 !important;
        /* PREVENT BLUE LINK COLOR - Force custom colors */
        color: #d1d5db !important;
        text-decoration: none !important;
        -webkit-text-fill-color: #d1d5db !important;
        -webkit-appearance: none !important;
    }
    
    .filter-label {
        font-size: 13px !important;
    }
    
    
    .slider-values {
        font-size: 15px !important;
    }
}

/* Small Mobile View - Further refinements */
@media (max-width: 480px) {
    .filters-panel {
        padding: 12px !important;
        gap: 12px !important;
    }
    
    .slider-container {
        max-width: 240px !important;
    }
    
    .bedroom-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    .filter-label {
        font-size: 11px !important;
    }
    
    .slider-values {
        font-size: 12px !important; /* FIXED: Made 2 points bigger */
    }
    
    .filter-btn.clear {
        padding: 10px 20px !important;
        font-size: 11px !important;
    }
}

/* MOBILE RESPONSIVE FIXES */

/* 1. HEADER CONTACT INFO - FIXED: Center logo, minimal gap between phone/email */
@media (max-width: 768px) {
    /* FIXED: Remove all padding to make logo flush left and contact info flush right */
    .header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .header-content {
        max-width: none !important;
        margin: 0 !important;
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        position: relative !important;
    }
    
    .contact-info {
        /* REMOVE ALL CONTAINER STYLING */
        background: none !important;
        border: none !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        
        /* MAKE IT PLAIN TEXT LIKE LOGO */
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important; /* INCREASED GAP - 4px between lines */
        font-size: 0.8rem !important;
        text-align: right !important;
        color: var(--text-primary) !important;
        font-weight: 400 !important;
        
        /* KEEP WITHIN HEADER BOUNDS */
        max-width: 45% !important;
        white-space: normal !important; /* FIXED: Allow wrapping to two lines */
        text-decoration: none !important;
        line-height: 1 !important; /* TIGHTER line height */
    }
    
    /* FIXED: Remove underlines from all text */
    .contact-info * {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .contact-info:hover {
        background: none !important;
        transform: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
    
    /* HIDE PHONE ICON COMPLETELY */
    .phone-icon {
        display: none !important;
    }
    
    /* FIXED: Force phone number to be white and readable */
    .phone-group {
        color: white !important;
        font-weight: 600 !important;
    }
    
    .contact-info * {
        color: white !important;
    }
    
    /* Language switcher in image area - mobile adjustments */
    .language-switcher-image-top-right {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
    }
    
    .language-switcher-image-top-right .language-btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.3rem;
    }
}

/* 2. FIXED: COMPLETE BUILDING IMAGE LAYOUT - Show full building, no empty space */
@media (max-width: 768px) {
    /* FIXED: Remove all margins and padding that create empty space */
    .main-container {
        margin-top: 70px !important;
        padding: 0 !important; /* REMOVE ALL PADDING */
        height: calc(100vh - 70px) !important; /* Full remaining height */
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .content-area {
        padding: 0 !important; /* REMOVE ALL PADDING */
        margin: 0 !important; /* REMOVE ALL MARGINS */
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    
    .building-container {
        margin: 0 !important; /* REMOVE ALL MARGINS */
        padding: 0 !important; /* REMOVE ALL PADDING */
        flex: 1 !important; /* Take remaining space */
        min-height: 0 !important;
        border-radius: 0 !important; /* Remove rounded corners on mobile */
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: stretch !important;
    }
    
    /* ENSURE BACKGROUND IMAGE SHOWS FULL BUILDING */
    .background-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    
    .background-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* FIXED: Show full building (not cover) */
        object-position: center top !important; /* FIXED: Align to top to eliminate space */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ENSURE PROPER SCROLLING FOR SMALL SCREENS */
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Allow vertical scrolling when needed */
    }
    
    /* ENSURE FILTERS PANEL DOESN'T CREATE EXTRA SPACE */
    .filters-panel {
        position: fixed !important;
        bottom: 1rem !important;
        left: 1rem !important;
        right: 1rem !important;
        z-index: 100 !important;
        margin: 0 !important; /* Remove any margins */
    }
}

/* 3. FIXED: SVG ALIGNMENT - Minimal override, let SVG inherit background positioning */
@media (max-width: 768px) {
    .view-switcher {
        position: absolute !important;
        left: 1rem !important;
        top: 1rem !important;
        transform: none !important;
        z-index: 300 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .view-arrow {
        width: 45px !important;
        height: 45px !important;
        font-size: 1rem !important;
    }
    
    .view-indicator {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* HIDE view switcher when apartment details are visible */
    body.apartment-details-open .view-switcher {
        display: none !important;
    }
    
    /* MINIMAL FIX: Let SVG overlay inherit proper positioning from desktop CSS */
    .svg-overlay {
        /* Keep original positioning, just ensure it matches container */
        margin: 0 !important;
        padding: 0 !important;
        /* Ensure proper z-index for clicking */
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .svg-overlay svg {
        /* MINIMAL override - let SVG use original scaling but ensure it's not displaced */
        margin: 0 !important;
        padding: 0 !important;
        /* Ensure SVG is interactive and properly positioned */
        pointer-events: auto !important;
        /* Don't override width/height/positioning - let it inherit from desktop CSS */
    }
}

/* 4. FIXED: APARTMENT DETAILS POPUP - Start below header, fully visible */
@media (max-width: 768px) {
    .apartment-details {
        position: fixed !important;
        top: calc(70px + 1rem) !important; /* FIXED: Start below header (70px) + margin */
        left: 1rem !important;
        right: 1rem !important;
        bottom: auto !important;
        width: auto !important;
        max-height: calc(100vh - 70px - 3rem) !important; /* FIXED: Account for header height */
        overflow-y: auto !important;
        transform: none !important;
        z-index: 400 !important;
        margin: 0 !important;
        /* Ensure popup is fully visible */
        box-sizing: border-box !important;
    }
    
    /* Ensure popup content is scrollable if too long */
    .details-content {
        max-height: calc(100vh - 70px - 8rem) !important; /* Account for header + popup header */
        overflow-y: auto !important;
    }
}