/**
 * Apartamenty Mielno - Interactive Map Styles
 * Style dla interaktywnej mapy SVG z pinami lokalizacji
 * Version: 1.0.3
 */

/* Kontener mapy */
#zielona-marina-map {
    width: 100%;
    height: 600px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Zapobiega wychodzeniu zawartości poza granice */
    min-height: 400px;
    /* Minimalna wysokość na małych ekranach */
}

/* Style dla niestandardowych pinów */
.custom-pin {
    background: transparent;
    border: none;
}

.pin-container {
    position: relative;
    /* Szerokość i wysokość są teraz ustawiane inline w JS */
    transition: transform 0.2s ease;
    /* Zapewnienie, że pin jest prawidłowo zakotwiczony na dole */
    transform-origin: center bottom;
}

.pin-container:hover {
    transform: translateX(-50%) scale(1.1);
    z-index: 1000;
}

.pin-container.active-pin {
    transform: translateX(-50%) scale(1.2);
    z-index: 1000 !important;
}

/* Efekt hover - zamiana na zielony pin i białą ikonę */
.pin-container:hover .pin-base,
.pin-container.active-pin .pin-base {
    content: url('../img/svg-maps/ZM_green_pin.svg');
    filter: brightness(0.8);
}

.pin-container:hover .pin-icon,
.pin-container.active-pin .pin-icon {
    filter: brightness(0) invert(1);
    /* Zamienia zieloną ikonę na białą */
}

.pin-base {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.pin-icon {
    position: absolute;
    width: 27px;
    height: 27px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
}

/* Style dla tooltipów */
.leaflet-tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #4CAF50;
    border-radius: 4px;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leaflet-tooltip-top:before {
    border-top-color: #4CAF50;
}

/* Ukrycie atrybutów Leaflet */
.leaflet-control-attribution {
    display: none;
}

/* Style dla kontrolek zoom */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-control-zoom a {
    background-color: #fff !important;
    color: #4CAF50 !important;
    border: 1px solid #4CAF50 !important;
}

.leaflet-control-zoom a:hover {
    background-color: #f5f5f5 !important;
}

/* Styl dla aktywnego pinu */
.active-pin .pin-base {
    filter: none;
}

/* Style dla pinów debugowania */
.debug-marker {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Style dla akordeonu */
.accordion-collapse {
    overflow: hidden;
    transition: height 0.3s ease-out;
}

.accordion-collapse:not(.show) {
    height: 0;
}

/* Style dla wrappera mapy - proste sticky */
.map-sticky-wrapper {
    position: sticky;
    top: 100px;
    z-index: 100;
    height: auto;
    transition: all 0.3s ease;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Responsywność */
@media (max-width: 991px) {
    .map-sticky-wrapper {
        position: relative !important;
        top: auto !important;
        margin-bottom: 30px;
        z-index: 1;
        /* Niższy z-index na mobile */
    }

    /* Dodatkowe style dla mapy na mobile */
    #zielona-marina-map {
        height: 300px !important;
        min-height: 300px;
        margin-bottom: 20px;
        height: 100% !important;
        margin-bottom: 20px;
    }
}

/* Nadpisanie problematycznych stylów flexbox z style.css */
.map-sec .col-lg-6:first-child {
    display: block !important;
    /* Nadpisanie display: flex */
    height: auto !important;
}

.map-sec .col-lg-6:first-child #zielona-marina-map {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 767px) {
    .map-container {
        position: relative;
        width: 100%;
        height: auto !important;
    }

    /* Poprawione style dla mapy na urządzeniach mobilnych */
    #zielona-marina-map {
        position: relative;
        margin-top: 20px;
        width: 100% !important;
        height: 300px !important;
        /* Zoptymalizowana wysokość dla widoku poziomego prostokąta */
        max-width: none !important;
        /* Usunięcie ograniczenia szerokości */
    }

    .pin-container {
        width: 24px;
        height: 36px;
    }

    .pin-icon {
        width: 28px;
        height: 28px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
    }
}