/* ==========================================================
   HOTEL SEARCH — MAP
   Изворно: hotel.css, Section 12 (визуелен дел)

   #map контејнер, mapbox popup картичка (hotel name, ѕвездички,
   review badge), marker pin/price, close button + responsive
   стилизирање на popup-от за мобилен (max-width 768px).

   Логиката за toggle помеѓу filters/map/results на мал екран
   (.sidebar-filter.active, .search-map-container.active,
   .btn-toggle-filters-container) е одвоена во
   search-page-layout.css бидејќи тие правила не се "за мапата"
   туку за целиот layout на страницата.
   ========================================================== */

/* ==========================================================
   12. MAP
   ========================================================== */
#map {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.mapbox-popup {
    background: #fff;
    display: flex;
    gap: 4px;
}
.mapbox-popup img {
    border-radius: 8px;
}
.mapbox-popup .mapbox-popup__content {
    padding: 2px 0;
}
.mapbox-popup .mapbox-popup__content .mapbox-popup__hotel-name {
    font-size: 12px;
    padding-right: 16px;
}
.mapbox-popup .mapbox-popup__content .mapbox-popup__hotel-star {
    display: flex;
    gap: 1px;
}
.mapbox-popup .mapbox-popup__content .mapbox-popup__hotel-star span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCAxMCI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTQuNjE1LjQ4MmEuNC40IDAgMCAxIC43MjYgMGwxLjEwMiAyLjM3MmEuNC40IDAgMCAwIC4zMTQuMjI4bDIuNTk3LjMxNWEuNC40IDAgMCAxIC4yMjQuNjlMNy42NjIgNS44NjhhLjQuNCAwIDAgMC0uMTIuMzdsLjUwMyAyLjU2N2EuNC40IDAgMCAxLS41ODcuNDI2TDUuMTczIDcuOTZhLjQuNCAwIDAgMC0uMzkgMEwyLjQ5OSA5LjIzYS40LjQgMCAwIDEtLjU4Ny0uNDI2bC41MDMtMi41NjdhLjQuNCAwIDAgMC0uMTItLjM3TC4zNzggNC4wODhhLjQuNCAwIDAgMSAuMjI0LS42OUwzLjIgMy4wODFhLjQuNCAwIDAgMCAuMzE1LS4yMjhMNC42MTUuNDgyWiIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjQuOTc4IiB4Mj0iNC45NzgiIHkxPSItLjMiIHkyPSIxMC43IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGQUYwMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0YyOTAwNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 8px;
    height: 8px;
}
.mapbox-popup .mapbox-popup__content .mapbox-popup__review {
    position: absolute;
    top: 0;
    right: 16px;
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 14px;
    background: green;
    text-align: center;
    line-height: 1.23;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.marker-price {
    background: #fff;
    top: -25px;
    position: absolute;
    width: 33px;
    padding: 2px 4px;
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    left: -15px;
    box-shadow: 0 2px 4px rgba(0, 29, 79, 0.15);
    border-radius: 4px;
}
.custom-marker {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
    display: block;
}
.mapboxgl-popup-content .mapboxgl-popup-close-button {
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 20px;
}
.marker-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #28a745;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.mapboxgl-popup.mapboxgl-popup-anchor-right .mapbox-popup .close-btn-map-popup,
.mapboxgl-popup.mapboxgl-popup-anchor-left .mapbox-popup .close-btn-map-popup {
    display: none;
}

/* Map Responsive */
@media (max-width: 768px) {
    .search-result-page .mapboxgl-popup-content {
        width: 100%;
        max-width: 300px;
        margin: 0 auto !important;
    }
    .search-result-page .mapboxgl-popup-content button.mapboxgl-popup-close-button {
        line-height: 30px !important;
        top: -23px !important;
        width: 30px !important;
        font-size: 24px !important;
    }
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-right,
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-left {
        position: fixed;
        bottom: 96px !important;
        top: auto;
        max-width: unset !important;
        transform: none !important;
        width: 100% !important;
    }
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-right .mapbox-popup,
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-left .mapbox-popup {
        flex-direction: column;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-right .mapbox-popup img,
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-left .mapbox-popup img {
        border-radius: 8px;
        width: 100%;
    }
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-right .mapbox-popup .close-btn-map-popup,
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-left .mapbox-popup .close-btn-map-popup {
        display: block;
    }
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-right .mapbox-popup .mapbox-popup__content,
    .search-result-page .mapboxgl-popup.mapboxgl-popup-anchor-left .mapbox-popup .mapbox-popup__content {
        padding: 8px 10px;
    }
}