/* MOBILE RESPONSIVE FIXES - V100.0 FINAL */
/* Leverage parent theme styling - only fix what's broken */

@media (max-width: 991px) {

    /* ========================================
       LOCATION TAXONOMY - MOBILE SEARCH ICON (max-width: 768px ONLY)
       ======================================== */

}

@media (max-width: 768px) {

    /* CRITICAL: Hide search bar on mobile by default, but allow it to show when explicitly opened */
    /* This prevents white screen after search submission */
    body:not(.mobile-search-active) .lp-search-bar.lp-search-bar-header,
    body:not(.mobile-search-active) .lp-search-section-header-views,
    body:not(.mobile-search-active) .outer-lp-search-section-header-view {
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: none !important;
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    /* CRITICAL FIX: Remove padding-top on search results pages to prevent white space */
    /* The hh-desktop-layout has padding-top: var(--header-height) which creates 84px white space */
    /* This padding is only needed for fixed headers, which we don't have on mobile */
    body:not(.tax-location) .hh-desktop-layout {
        padding-top: 0 !important;
    }

    /* CRITICAL FIX: Hide theme loader on mobile to prevent white screen */
    /* The loader sometimes doesn't hide due to JS errors, causing persistent white screen */
    .lp-theme-loader {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Collapse search bar on mobile by default on all pages with mobile search icon */
    body:not(.home) .lp-search-bar.lp-search-bar-header,
    body:not(.home) .lp-search-section-header-views,
    body:not(.home) .outer-lp-search-section-header-view {
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    /* Expand parent containers when search bar is open (ALL PAGES) */
    html body.mobile-search-active #page .lp-search-section-header-views,
    html body.mobile-search-active #page .outer-lp-search-section-header-view {
        max-height: none !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Prevent horizontal scroll when search is active (ALL PAGES) */
    html body.mobile-search-active,
    html body.mobile-search-active #page {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Force all parent containers to full width when search is open (ALL PAGES) */
    html body.mobile-search-active #page .lp-search-header-style,
    html body.mobile-search-active #page .lp-search-header-style-outer,
    html body.mobile-search-active #page .header-right-panel,
    html body.mobile-search-active #page .fullwidth-header,
    html body.mobile-search-active #page .lp-header .row,
    html body.mobile-search-active .lp-search-header-style,
    html body.mobile-search-active .lp-search-header-style-outer,
    html body.mobile-search-active .header-right-panel,
    html body.mobile-search-active .fullwidth-header {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hide the outer header dark background when search is active (ALL PAGES) */
    html body.mobile-search-active #page .lp-header {
        background: #FF6B00 !important;
        height: auto !important;
        min-height: 60px !important;
    }

    /* Collapse desktop search containers when mobile search is active to prevent extra orange space */
    /* Don't use display:none as the mobile search overlay is inside these containers */
    html body.mobile-search-active #page .lp-search-header-style-outer,
    html body.mobile-search-active #page .lp-search-header-style,
    html body.mobile-search-active .lp-search-header-style-outer,
    html body.mobile-search-active .lp-search-header-style {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Expand search bar when mobile search icon is clicked - fixed position below header */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open {
        max-height: none !important;
        height: auto !important;
        min-height: 180px !important;
        padding: 10px !important;
        padding-bottom: 20px !important;
        margin: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #FF6B00 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 100003 !important;
        box-sizing: border-box !important;
    }

    /* Ensure logo stays visible and centered when search opens (ALL PAGES) */
    body.mobile-search-active .lp-logo,
    body.mobile-search-active .lp-logo img {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    /* Hide map sidebar when mobile search is open (we only want search fields, not the map) (ALL PAGES) */
    html body.mobile-search-active #page .sidemap-container,
    html body.mobile-search-active #page .map-container3,
    html body.mobile-search-active #page .hh-map-sidebar,
    html body.mobile-search-active #page #map {
        display: none !important;
        visibility: hidden !important;
    }

    /* Ensure form and fields are visible when search bar is open (ALL PAGES) */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open form {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 140px !important;
        flex-shrink: 0 !important;
    }

    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .form-group,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-suggested-search,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 100% !important;
        flex-shrink: 0 !important;
        max-width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        background: #fff !important;
        border-radius: 6px !important;
        margin: 0 !important;
        overflow: visible !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }

    /* Where field - position for dropdown overlay */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search {
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 100003 !important;
    }

    /* What field - position for autocomplete overlay - HIGHER than Where so dropdown appears on top */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-suggested-search {
        position: relative !important;
        z-index: 100006 !important;
    }

    body.mobile-search-active .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-header-search-button {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        margin: 0 0 0 0 !important;
        flex: 1 1 100% !important;
    }

    /* Style the "What" and "Where" labels to align inside the fields */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .input-group-addon {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        color: #666 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 0 !important;
        z-index: 100010 !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease !important;
    }

    /* Label visibility is now controlled by JavaScript to avoid conflicts with placeholders */

    /* Add padding to input fields to account for labels */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-suggested-search input,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search .ui-widget {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 55px !important;
        padding-right: 12px !important;
        height: 42px !important;
        border: none !important;
        background: #fff !important;
        border-radius: 6px !important;
        color: #333 !important;
        font-size: 15px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Ensure Where dropdown trigger is full width */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search .chosen-container,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search .chosen-container .chosen-single,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 !important;
    }

    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search .chosen-container .chosen-single {
        height: 42px !important;
        line-height: 42px !important;
        padding-left: 55px !important;
        padding-right: 30px !important;
        border: none !important;
        background: #fff !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        color: #333 !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* When a value is selected, reduce padding so text is fully visible */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-location-search .chosen-container .chosen-single span {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #333 !important;
    }

    /* Fix dropdown positioning and make it scrollable - overlays other elements */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .chosen-drop {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100006 !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        background: #fff !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
        margin-top: 2px !important;
        border: 1px solid #ddd !important;
    }

    /* Ensure dropdown list items are visible and clickable */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .chosen-drop .chosen-results {
        width: 100% !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        list-style: none !important;
    }

    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .chosen-drop .chosen-results li {
        display: block !important;
        padding: 10px 15px !important;
        color: #333 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        pointer-events: auto !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .chosen-drop .chosen-results li:hover,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .chosen-drop .chosen-results li.highlighted {
        background: #FF6B00 !important;
        color: #fff !important;
    }

    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .chosen-drop .chosen-results li.result-selected {
        background: #f5f5f5 !important;
        color: #333 !important;
    }

    /* What field autocomplete dropdown - overlay style with highest z-index */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .ui-autocomplete {
        position: absolute !important;
        z-index: 100007 !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        background: #fff !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        margin-top: 2px !important;
    }

    /* Style the submit button with maximum specificity */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-header-search-button .lp-search-bar-right .lp-search-btn,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-search-bar-right .lp-search-btn,
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-search-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        height: 42px !important;
        background: #2c3e50 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        text-transform: uppercase !important;
        display: block !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        text-indent: 0 !important;
        text-align: center !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Hide the separate search icon */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-search-icon {
        display: none !important;
    }

    /* Ensure form groups use relative positioning for absolute labels */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .form-group {
        position: relative !important;
    }

    /* Convert search icon to close icon when search is open */
    body.mobile-search-active .mobile-search-trigger::before {
        content: '\f00d' !important; /* X icon */
    }

    /* Style the submit button wrapper */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .lp-search-bar-right {
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 100% !important;
    }

    /* Ensure the pos-relative containers don't interfere with layout */
    html body.mobile-search-active #page .lp-search-bar.lp-search-bar-header.mobile-search-open .pos-relative {
        width: 100% !important;
        position: relative !important;
    }

    /* Mobile search icon trigger */
    body:not(.home) .lp-menu-bar {
        position: relative;
    }

    body:not(.home) .mobile-search-trigger {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #fff;
        z-index: 9999;
        text-decoration: none;
        padding: 10px;
        display: block;
    }

    body:not(.home) .mobile-search-trigger::before {
        content: '\f002';
        font-family: 'FontAwesome';
    }

    /* ========================================
       MOBILE NAVIGATION & HEADER FIXES
       ======================================== */

    /* Mobile header layout - center logo with search icon next to it */
    body:not(.home) .lp-menu-bar {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 60px !important; /* Space for hamburger and search */
        min-height: 60px !important;
    }

    /* Hamburger menu - fixed position to stay in place */
    body:not(.home) a[href="#menu"] {
        position: fixed !important;
        left: 5px !important;
        top: 23px !important;
        z-index: 100004 !important;
    }

    /* Logo container - centered within header bar - ALWAYS at top: 10px */
    body:not(.home) .lp-logo-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        width: auto !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 10px !important;
        height: 50px !important;
    }

    /* Keep header full width when search opens - prevent logo shift */
    body:not(.home).mobile-search-active .lp-menu-bar {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Keep logo properly centered when search opens - FIX: prevent drop down */
    html body.mobile-search-active #page .lp-header .lp-menu-bar .lp-logo-container,
    html body.mobile-search-active .lp-header .lp-menu-bar .lp-logo-container,
    body.mobile-search-active .lp-menu-bar .lp-logo-container,
    body.mobile-search-active .lp-logo-container {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        margin-left: 0 !important;
        right: auto !important;
        top: 10px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body:not(.home) .lp-logo {
        display: block !important;
        max-width: 100% !important;
    }

    body:not(.home) .lp-logo a {
        display: block !important;
        max-width: 100% !important;
    }

    body:not(.home) .lp-logo img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Search icon - fixed position to stay in place */
    body:not(.home) .mobile-search-trigger {
        position: fixed !important;
        right: 15px !important;
        top: 35px !important;
        color: #fff !important;
        font-size: 24px !important;
        padding: 10px !important;
        display: inline-block !important;
        cursor: pointer !important;
        z-index: 100004 !important;
    }

    /* Logo in mobile navigation menu - reduce size */
    #mm-0 .mm-navbar img,
    .mm-menu img {
        max-width: 160px !important;
        height: auto !important;
    }

    /* Mobile menu button styling */
    #mm-0 .mm-listview > li > a,
    #mm-0 .mm-listview a {
        color: #FF6B00 !important;
        font-size: 16px !important;
        padding: 15px 20px !important;
    }

    /* Top action buttons (Add Listing, Sign out) */
    .mm-menu .lpl-button {
        display: inline-block !important;
        background: #FF6B00 !important;
        color: #fff !important;
        padding: 12px 20px !important;
        border-radius: 6px !important;
        margin: 10px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }

    .mm-menu .lpl-button:hover {
        background: #ff8533 !important;
    }

    /* Cities submenu styling */
    #mm-1 .mm-listview {
        background: #fff !important;
    }

    #mm-1 .mm-listview a {
        color: #333 !important;
        background: #fff !important;
    }

    #mm-1 .mm-listview a:hover {
        background: #f5f5f5 !important;
    }

    /* Remove large gap between header and H1 */
    body.tax-location main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.tax-location .lp-home-banner-container + section,
    body.tax-location .archive-header {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }

    /* H1 padding - more left padding, less top margin to reduce header gap */
    body.tax-location h1.page-title,
    body.tax-location .archive-header h1 {
        padding-left: 20px !important;
        padding-right: 15px !important;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }

}

@media (max-width: 991px) {

    /* ========================================
       GLOBAL FIXES (ALL PAGES)
       ======================================== */

    /* 1. HIDE CITIES NAVIGATION BAR */
    html body #page .lp-menu-container,
    html body #page .lp-header-nav-main {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }

    /* 2. SHOW WHAT/WHERE LABELS */
    html body #page .lp-suggested-search .input-group-addon,
    html body #page .lp-location-search .input-group-addon,
    html body #page .input-group-addon.lp-border,
    html body #page .input-group-addon.lp-where {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #4f5685 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }

    /* 3. HIDE PLACEHOLDERS TO PREVENT OVERLAP WITH LABELS */
    html body #page input::placeholder,
    html body #page .lp-search-input::placeholder,
    html body #page .lp-suggested-search input::placeholder,
    html body #page .lp-location-search input::placeholder {
        opacity: 0 !important;
        color: transparent !important;
    }

    /* ========================================
       HOMEPAGE ONLY FIXES
       ======================================== */

    /* 4. HOMEPAGE: FULL WIDTH SEARCH FIELDS */
    html body.home #page .lp-search-bar .lp-suggested-search,
    html body.home #page .lp-search-bar .lp-location-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    html body.home #page .lp-search-bar .lp-location-search .chosen-container,
    html body.home #page .lp-search-bar .lp-suggested-search #select,
    html body.home #page .lp-search-bar .chosen-single {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    /* 5. HOMEPAGE: REMOVE GAP BETWEEN SEARCH ROWS */
    html body.home #page .lp-search-bar .form-group,
    html body.home #page .lp-search-bar .lp-suggested-search,
    html body.home #page .lp-search-bar .lp-location-search,
    html body.home #page .lp-search-bar .pull-right {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* 6. HOMEPAGE MOBILE: Proper label and field positioning */
    /* Labels should be visible as placeholders but positioned inside the fields */
    html body.home #page .lp-search-bar .input-group-addon {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1 !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        font-size: 14px !important;
        color: #999 !important;
        pointer-events: none !important;
    }

    /* 6a. HOMEPAGE MOBILE: Input fields with left padding for labels */
    html body.home #page .lp-search-bar .lp-suggested-search input,
    html body.home #page .lp-search-bar .lp-suggested-search #select {
        padding-left: 60px !important;
        text-align: left !important;
    }

    html body.home #page .lp-search-bar .lp-location-search .chosen-single {
        padding-left: 70px !important;
        text-align: left !important;
    }

    /* 6b. HOMEPAGE MOBILE: Hide location icon */
    html body.home #page .lp-search-bar .lp-location-search .ui-widget.border-dropdown::before,
    html body.home #page .lp-search-bar .lp-location-search .border-dropdown::before {
        display: none !important;
        content: none !important;
    }

    /* 6c. HOMEPAGE MOBILE: Ensure dropdowns appear above search button */
    html body.home #page .lp-search-bar .chosen-drop {
        z-index: 999999 !important;
        position: absolute !important;
    }

    html body.home #page .lp-search-bar .lp-suggested-search {
        position: relative !important;
        z-index: 10000 !important;
    }

    html body.home #page .lp-search-bar .lp-location-search {
        position: relative !important;
        z-index: 9999 !important;
    }

    /* ========================================
       MAP/LISTING PAGE FIXES
       ======================================== */

    /* 6. HEADER HEIGHT ADJUSTMENT */
    html body:not(.home) header.header-fixed {
        height: auto !important;
        position: relative !important;
    }

    /* 7. STACKED SEARCH BAR IN HEADER (ORANGE BACKGROUND) */
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        background: #FF6B00 !important;
        padding: 15px !important;
        margin: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
        z-index: 999 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    }

    html body:not(.home) #page .lp-search-bar.lp-search-bar-header form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* 8. SEARCH FIELD ROWS */
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .form-group {
        display: flex !important;
        height: 50px !important;
        width: 100% !important;
        background: #fff !important;
        border-radius: 8px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #ddd !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 9. FIELD LABELS (WHAT/WHERE) */
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .input-group-addon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 70px !important;
        min-width: 70px !important;
        background: #f8f8f8 !important;
        border-right: 1px solid #eee !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        color: #333 !important;
        height: 100% !important;
    }

    /* 10. INPUT FIELDS */
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header input,
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .chosen-container {
        flex: 1 !important;
        height: 100% !important;
        min-height: 50px !important;
        border: none !important;
        padding: 0 10px !important;
        background: #fff !important;
    }

    /* 10a. INPUT FIELD CONTAINERS */
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .lp-suggested-search,
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .lp-location-search,
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .input-group,
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .pos-relative,
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .ui-widget {
        flex: 1 !important;
        height: 100% !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }

    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .chosen-container-single .chosen-single {
        height: 50px !important;
        min-height: 50px !important;
        line-height: 50px !important;
        border: none !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    /* 11. SEARCH BUTTON */
    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .lp-header-search-button {
        width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
    }

    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .lp-search-bar-right {
        width: 100% !important;
        height: 100% !important;
    }

    html body:not(.home) #page .lp-search-bar.lp-search-bar-header .lp-search-btn {
        width: 100% !important;
        height: 100% !important;
        background: #333 !important;
        color: #fff !important;
        border-radius: 8px !important;
        font-weight: bold !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        border: none !important;
    }

    /* 12. HIDE MOBILE SEARCH TOGGLE */
    html body:not(.home) #page .lp-search-mobile-toggle,
    html body:not(.home) #page .lp-m-search-box {
        display: none !important;
    }

    /* 13. STACK MAP AND LISTINGS (NO SIDE-BY-SIDE) */
    html body:not(.home) #page section.hh-desktop-layout {
        display: block !important;
        flex-direction: column !important;
    }

    /* 14. FULL WIDTH MAP SIDEBAR */
    html body:not(.home) #page aside.hh-map-sidebar,
    html body:not(.home) #page main.hh-listings-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        position: relative !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 15. MAP CONTAINER (BELOW SEARCH BAR) */
    html body:not(.home) #page .hh-map-sidebar {
        position: relative !important;
        width: 100% !important;
        height: 350px !important;
        margin: 0 !important;
        display: block !important;
        z-index: 10 !important;
        background: #eee !important;
    }

    html body:not(.home) #page .sidemap-container,
    html body:not(.home) #page .map-container3,
    html body:not(.home) #page #map {
        width: 100% !important;
        max-width: 100% !important;
        height: 350px !important;
    }

    /* 15.5. PAGE TITLE / H1 SPACING - Updated 2026-02-12 */
    /* Remove top padding from main container - this was creating the visual gap */
    html body:not(.home) #page main.hh-listings-main,
    html body:not(.home) #page .hh-listings-main,
    body:not(.home) main.hh-listings-main,
    .hh-listings-main {
        padding-top: 0 !important;
    }

    /* Minimize gap between header and page title, add left padding */
    .hh-listings-header {
        padding-top: 4px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
    }

    .hh-listings-title h1,
    .hh-listings-header h1 {
        padding-left: 20px !important;
        padding-right: 15px !important;
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .hh-results-count {
        padding-left: 20px !important;
        padding-right: 15px !important;
    }

    /* 16. FULL WIDTH LISTINGS GRID */
    html body:not(.home) #page .hh-listings-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 15px !important;
    }

    /* 17. FULL WIDTH LISTING CARDS */
    html body:not(.home) #page .listing-post,
    html body:not(.home) #page .lp-grid-view {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 18. FLOATING FILTER BUTTON (BOTTOM LEFT) */
    html body:not(.home) #page #hh-open-filters {
        position: fixed !important;
        bottom: 25px !important;
        left: 15px !important;
        z-index: 10000 !important;
        height: 50px !important;
        padding: 0 25px !important;
        border-radius: 25px !important;
        background: #FF6B00 !important;
        color: #fff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #fff !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: transform 0.2s !important;
    }

    /* Force white text for all children of filter button */
    html body:not(.home) #page #hh-open-filters *,
    html body:not(.home) #page #hh-open-filters span,
    html body:not(.home) #page #hh-open-filters i {
        color: #fff !important;
    }

    /* 19. FLOATING MAP TOGGLE BUTTON (BOTTOM RIGHT) */
    html body:not(.home) #page .md-effect-map-btn.widget-map-click,
    html body:not(.home) #page .widget-map-click {
        position: fixed !important;
        bottom: 25px !important;
        right: 15px !important;
        z-index: 10000 !important;
        height: 50px !important;
        width: 50px !important;
        padding: 0 !important;
        border-radius: 25px !important;
        background: #FF6B00 !important;
        color: #fff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #fff !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: transform 0.2s !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure map icon is white and visible */
    html body:not(.home) #page .widget-map-click::before,
    html body:not(.home) #page .widget-map-click i {
        color: #fff !important;
        font-size: 24px !important;
    }

    /* 20. SHOW MAP WHEN OPEN - Maximum specificity */
    /* First, make ALL parent containers visible (they have display:none which breaks rendering) */
    html body:not(.home) #page .lp-search-section-header-views:has(.open-map),
    html body:not(.home) #page .outer-lp-search-section-header-view:has(.open-map),
    html body:not(.home) #page .lp-search-header-style:has(.open-map),
    html body #page .lp-search-section-header-views:has(.open-map),
    html body #page .outer-lp-search-section-header-view:has(.open-map),
    html body #page .lp-search-header-style:has(.open-map),
    body .lp-search-section-header-views:has(.open-map),
    body .outer-lp-search-section-header-view:has(.open-map),
    body .lp-search-header-style:has(.open-map) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Then make the map sidebar visible */
    html body:not(.home) #page .hh-map-sidebar:has(.open-map),
    html body #page .hh-map-sidebar:has(.open-map),
    body .hh-map-sidebar:has(.open-map),
    .hh-map-sidebar:has(.open-map) {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99998 !important;
    }

    /* Then make the map container visible and full screen */
    html body:not(.home) #page .sidemap-fixed.open-map,
    html body:not(.home) #page .sidemap-container.open-map,
    html body #page .sidemap-fixed.open-map,
    html body #page .sidemap-container.open-map,
    body .sidemap-fixed.open-map,
    body .sidemap-container.open-map {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        z-index: 99999 !important;
        background: #fff !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body:not(.home) #page .sidemap-fixed.open-map > *,
    html body:not(.home) #page .sidemap-container.open-map > *,
    body .sidemap-fixed.open-map > *,
    body .sidemap-container.open-map > * {
        width: 100vw !important;
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
    }

    html body:not(.home) #page .sidemap-fixed.open-map #map,
    html body:not(.home) #page .sidemap-fixed.open-map .mapSidebar,
    html body:not(.home) #page .sidemap-fixed.open-map .map-container3,
    html body:not(.home) #page .sidemap-container.open-map #map,
    html body:not(.home) #page .sidemap-container.open-map .mapSidebar,
    html body:not(.home) #page .sidemap-container.open-map .map-container3,
    body .sidemap-fixed.open-map #map,
    body .sidemap-fixed.open-map .mapSidebar,
    body .sidemap-fixed.open-map .map-container3,
    body .sidemap-container.open-map #map,
    body .sidemap-container.open-map .mapSidebar,
    body .sidemap-container.open-map .map-container3 {
        width: 100vw !important;
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        position: relative !important;
    }

    /* Map view list container (carousel of listings on map) */
    .map-view-list-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100000 !important;
        background: rgba(0,0,0,0.8) !important;
        padding: 10px !important;
    }

    /* ========================================
       FOOTER - IMPROVE TEXT READABILITY
       ======================================== */

    /* Footer text - make it light and readable on dark background */
    footer,
    .footer-style4,
    [class*="footer"] {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    footer *,
    .footer-style4 *,
    [class*="footer"] * {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    footer a,
    .footer-style4 a,
    [class*="footer"] a {
        color: rgba(255, 255, 255, 0.95) !important;
        text-decoration: none !important;
    }

    footer a:hover,
    .footer-style4 a:hover,
    [class*="footer"] a:hover {
        color: var(--color-accent, #FF6B00) !important;
    }

    /* Hide map button on single listing pages */
    body.single-listing .md-effect-map-btn,
    body.single .md-effect-map-btn {
        display: none !important;
    }

}