/* ==========================================================
   HOTEL SEARCH — PAGE LAYOUT (responsive)
   Изворно: hotel.css, делови од Sections 12, 17 и 21

   Ова НЕ е стил на една конкретна компонента, туку однесувањето
   на целата search резултати страница на tablet/mobile:
     - ширини на .search-left-sidebar / .search-results-content /
       .search-map-container на различни breakpoints
     - toggle помеѓу filter sidebar и map preview
       (.sidebar-filter.active, .search-map-container.active,
       .btn-toggle-filters-container)
   Ги допира и sidebar-filters и map компонентите истовремено,
   затоа е одделен фајл - вклучи го ПОСЛЕ sidebar-filters.css
   и map.css.
   ========================================================== */

@media (max-width: 991px) {
    .search-result-page .mapboxgl-map {
        display: none;
    }
    .search-result-page .mapboxgl-canvas-container {
        height: 100%;
    }
    .btn-toggle-filters-container {
        position: fixed;
        z-index: 999;
        bottom: 12px;
        width: 100%;
    }
    .btn-toggle-filters-container .btn-toggle-filters,
    .btn-toggle-filters-container .btn-toggle-map {
        margin: 0;
        padding: 0;
        width: 150px;
        min-width: unset;
    }
    .btn-toggle-filters-container button {
        flex: 1 1 auto;
    }
    .sidebar-filter.active {
        display: block;
        position: fixed;
        z-index: 998;
        top: 0;
        width: 100%;
        left: 0;
        overflow: auto;
        height: 100%;
        pointer-events: auto;
        max-height: 100vh;
    }
    .search-map-container {
        visibility: hidden;
        padding: 0;
    }
    .search-map-container.active {
        visibility: visible;
        position: fixed;
        z-index: 998;
        top: 0;
        width: 100%;
        left: 0;
        overflow: auto;
        height: 100%;
        pointer-events: auto;
        max-height: 100vh;
        padding: 0;
    }
    .search-map-container.active .mapboxgl-map {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .search-map-container {
        visibility: hidden !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
    .search-map-container.active {
        visibility: visible !important;
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        pointer-events: auto !important;
        padding: 0 !important;
    }
    .search-map-container.active .mapboxgl-map {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    .sidebar-filter.active {
        display: block !important;
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        background: #fff !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    .btn-toggle-filters-container {
        display: flex !important;
        position: fixed !important;
        z-index: 10000 !important;
        bottom: 12px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    .btn-toggle-filters-container .btn-toggle-filters,
    .btn-toggle-filters-container .btn-toggle-map {
        flex: 1 !important;
        max-width: 200px !important;
        margin: 0 !important;
        min-width: unset !important;
        width: auto !important;
        display: block !important;
        visibility: visible !important;
    }
    .btn-toggle-filters-container button {
        flex: 1 1 auto !important;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .search-left-sidebar,
    .search-results-content {
        width: 100% !important;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .search-left-sidebar {
        width: 28% !important;
    }
    .search-results-content {
        width: 72% !important;
    }
}

@media (min-width: 1281px) and (max-width: 1480px) {
    .search-left-sidebar {
        width: 20% !important;
    }
    .search-results-content {
        width: 44% !important;
    }
    .search-map-container {
        width: 36% !important;
    }
}


/* ==========================================================
   21. MISC RESPONSIVE FIXES
   ========================================================== */
@media (max-width: 865px) {
    .btn-toggle-filters-container {
        bottom: 72px !important;
    }
}


/*design*/
/* ==========================================================
   TABLET FIX v2
   Mini + Air: филтри И мапа зад копчиња (overlay), сите
   ориентации.
   Pro: филтри секогаш видливи паралелно со листата (sticky),
   само мапата зад копче.
   ========================================================== */

/* ---------- ЗАЕДНИЧКО 768–1480px: мапата секогаш overlay + floating копчиња ---------- */
@media (min-width: 768px) and (max-width: 1480px) {
    .search-result-page .search-map-container {
        visibility: hidden !important;
        width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
    .search-result-page .search-map-container.active {
        visibility: visible !important;
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        pointer-events: auto !important;
        padding: 0 !important;
    }
    .search-result-page .search-map-container.active .mapboxgl-map {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ПОВИСОКА СПЕЦИФИЧНОСТ од Bootstrap .d-lg-none (2 класи наспроти 1) */
    .search-result-page .btn-toggle-filters-container {
        display: flex !important;
        position: fixed !important;
        z-index: 10000 !important;
        bottom: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .search-result-page .btn-toggle-filters-container button {
        flex: 1 1 auto !important;
    }
    .search-result-page .btn-toggle-filters-container .btn-toggle-map {
        margin: 0 !important;
        min-width: unset !important;
        max-width: 200px !important;
        width: auto !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* ==========================================================
   MINI + AIR — компактно: филтрите ИСТО зад копче (overlay)
   ========================================================== */

/* Mini portrait (768) + Air portrait (820–1023) */
@media (min-width: 768px) and (max-width: 1023px) {
    .search-left-sidebar,
    .sidebar-filter {
        display: none;
    }
    .search-left-sidebar.active,
    .sidebar-filter.active {
        display: block !important;
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        background: #fff !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    .search-results-content {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .btn-toggle-filters-container .btn-toggle-filters {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        min-width: unset !important;
        max-width: 200px !important;
        width: auto !important;
    }
}

/* Mini landscape — точно 1024px, ама landscape ориентација */
@media (width: 1024px) and (orientation: landscape) {
    .search-left-sidebar,
    .sidebar-filter {
        display: none;
    }
    .search-left-sidebar.active,
    .sidebar-filter.active {
        display: block !important;
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        background: #fff !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    .search-results-content {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .btn-toggle-filters-container .btn-toggle-filters {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        min-width: unset !important;
        max-width: 200px !important;
        width: auto !important;
    }
}

/* Air landscape (1180) + меѓупростор 1025–1365 */
@media (min-width: 1025px) and (max-width: 1365px) {
    .search-left-sidebar,
    .sidebar-filter {
        display: none;
    }
    .search-left-sidebar.active,
    .sidebar-filter.active {
        display: block !important;
        position: fixed !important;
        z-index: 9999 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        background: #fff !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    .search-results-content {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .btn-toggle-filters-container .btn-toggle-filters {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        min-width: unset !important;
        max-width: 200px !important;
        width: auto !important;
    }
}

/* ==========================================================
   PRO — филтрите паралелно (sticky), само мапата зад копче
   ========================================================== */

/* Pro portrait — точно 1024px, portrait ориентација */
/* Pro portrait — точно 1024px, portrait ориентација */
@media (width: 1024px) and (orientation: portrait) {
    .search-left-sidebar,
    .sidebar-filter {
        display: block !important;
        position: sticky !important;
        top: 20px !important;
        left: auto !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #fff !important;
        z-index: 2 !important;
        flex: 0 0 330px !important;   /* ← беше 300px */
        width: 330px !important;      /* ← беше 300px */
        max-width: 330px !important;  /* ← беше 300px */
    }
    .search-results-content {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
    }
    .btn-toggle-filters-container .btn-toggle-filters {
        display: none !important;
    }
}

/* Pro landscape (1366–1480) */
@media (min-width: 1366px) and (max-width: 1480px) {
    .search-left-sidebar,
    .sidebar-filter {
        display: block !important;
        position: sticky !important;
        top: 20px !important;
        left: auto !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #fff !important;
        z-index: 2 !important;
        flex: 0 0 340px !important;
        width: 340px !important;
        max-width: 340px !important;
    }
    .search-results-content {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
    }
    .btn-toggle-filters-container .btn-toggle-filters {
        display: none !important;
    }
}



/* ==========================================================
   HOTEL SEARCH — PAGE LAYOUT (responsive)
   ...
   ========================================================== */

/* FIX — Mapbox internally сетира pointer-events: auto на canvas
   container-от, што пробива низ родителскиот pointer-events: none
   кога мапата не е активна и краде кликови од копчињата под неа.
   Мора да е ВОН media query бидејќи важи на сите широчини. */
   @media (max-width: 1480px) {
.search-map-container:not(.active) .mapboxgl-canvas-container,
.search-map-container:not(.active) .mapboxgl-canvas-container *,
.search-map-container:not(.active) canvas.mapboxgl-canvas {
    pointer-events: none !important;
}
}

@media (max-width: 1024px) {
    .search-result-page .mapboxgl-map {
        display: none;
    }

}
.btn-toggle-filters-container {
    bottom: 80px !important;
}