.map-container { max-width: 1000px; margin: 0 auto; background: #fffdfa; padding: 15px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-family: sans-serif; }
#map { height: 450px; width: 100%; border-radius: 8px; border: 2px solid #8d6e63; }
.search-box { display: flex; gap: 10px; margin-bottom: 15px; }
.search-box select { flex: 1; padding: 12px; border: 2px solid #d7ccc8; border-radius: 6px; background: #fff; font-size: 14px; outline: none; }
@media (max-width: 600px) { .search-box { flex-direction: column; } #map { height: 350px; } }
#toggle-form { background: #5d4037; color: #fff; border: none; padding: 15px; border-radius: 6px; width: 100%; cursor: pointer; font-weight: bold; text-transform: uppercase; margin-top: 10px; }
#add-point-form { background: #efebe9; padding: 20px; border-radius: 8px; border: 1px dashed #8d6e63; margin-top: 15px; }
.form-group { margin-bottom: 12px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #a1887f; border-radius: 4px; font-size: 16px; box-sizing: border-box; }
.checkbox-group { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #5d4037; text-align: left; margin: 15px 0; }
.checkbox-group input { width: auto !important; margin: 0; }
.submit-btn { background: #8d6e63; color: white; border: none; padding: 15px; border-radius: 6px; width: 100%; font-weight: bold; cursor: pointer; text-transform: uppercase; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 10001; padding: 20px; }
.overlay-content { background: #fff; padding: 30px; border-radius: 12px; text-align: center; border: 3px solid #8d6e63; width: 100%; max-width: 400px; }
.hidden { display: none !important; }

/* ... tutaj Twoje poprzednie style ... */

#map { height: 450px; width: 100%; border-radius: 8px; border: 2px solid #8d6e63; }

/* --- NOWE STYLE DLA LISTY USŁUG --- */

.hidden { display: none !important; }

#service-dropdown {
    position: absolute; /* Sprawia, że lista "pływa" nad resztą pól */
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #a1887f;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#service-dropdown label:hover {
    background-color: #fdf5f2;
}

.form-group {
    margin-bottom: 15px;
    position: relative; /* Ważne, żeby lista trzymała się pola */
}

/* Styl dla checkboxów wewnątrz listy, by były równe */
#service-dropdown input[type="checkbox"] {
    width: auto !important;
    margin-right: 10px !important;
}

.leaflet-popup-content-wrapper {
    border-radius: 8px;
    padding: 5px;
}

@media (max-width: 600px) {
    .leaflet-popup-content {
        width: 200px !important; /* Ustala stałą szerokość na mobile */
        margin: 10px;
    }
}

/* Styl dla dymka na mapie */
.leaflet-popup {
    margin-bottom: 25px; /* Dodatkowy margines dymka od pineski */
}

.custom-popup-box {
    min-width: 180px;
    padding: 5px;
}

.popup-link {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #8d6e63 !important;
    text-decoration: underline;
}

/* Fix dla bardzo małych ekranów */
@media (max-width: 480px) {
    .leaflet-popup-content-wrapper {
        margin-right: 20px; /* Centrowanie na małych ekranach */
    }
    .leaflet-popup-content {
        width: 180px !important;
    }
}

/* Kompaktowe dymki na mapie */
.retro-popup .leaflet-popup-content-wrapper {
    background: #fff;
    color: #333;
    border-radius: 4px;
    padding: 0; /* Usuwamy zbędny padding */
}

.retro-popup .leaflet-popup-content {
    margin: 10px 12px;
    line-height: 1.4;
}

.custom-popup-box h4 {
    margin: 0 0 5px 0 !important;
    font-size: 14px !important;
    color: #5d4037;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.popup-info {
    font-size: 12px !important;
}

.popup-link {
    display: block;
    margin-top: 8px;
    background: #8d6e63;
    color: #fff !important;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    text-decoration: none !important;
}

/* Fix dla strzałki dymka */
.retro-popup .leaflet-popup-tip {
    background: #fff;
}

@media (max-width: 600px) {
    /* Na mobile dymek musi być max blisko pineski */
    .leaflet-popup {
        margin-bottom: 15px !important;
    }
}

/* Styl dla nieaktywnego przycisku strony */
.popup-link.disabled {
    background: #ccc !important;
    /* Szary kolor */
    color: #666 !important;
    /* Ciemniejszy szary tekst */
    pointer-events: none;
    /* Blokuje kliknięcie */
    cursor: not-allowed;
    text-decoration: none !important;
}