/* ── Zmienne domyślne (nadpisywane przez inline :root z PHP) ───── */
:root {
    --ps-map-h-lg:     648px;
    --ps-map-h-md:     500px;
    --ps-map-h-sm:     400px;
    --ps-map-h-xs:     300px;
    --ps-filter-h-lg:  202px;
    --ps-filter-h-md:  160px;
    --ps-filter-h-sm:  130px;
    --ps-filter-h-xs:  110px;
    --ps-gap-inner-lg:  24px;
    --ps-gap-inner-md:  20px;
    --ps-gap-inner-sm:  14px;
    --ps-gap-inner-xs:  10px;
    --ps-gap-items-lg:  48px;
    --ps-gap-items-md:  36px;
    --ps-gap-items-sm:  24px;
    --ps-gap-items-xs:  16px;
    --ps-gap-rows-lg:   30px;
    --ps-gap-rows-md:   24px;
    --ps-gap-rows-sm:   18px;
    --ps-gap-rows-xs:   14px;
    --ps-font-lg:       18px;
    --ps-font-md:       16px;
    --ps-font-sm:       14px;
    --ps-font-xs:       13px;
    --ps-fixed-w-lg:    47px;
    --ps-fixed-w-md:    40px;
    --ps-fixed-w-sm:    34px;
    --ps-fixed-w-xs:    30px;
    --ps-cat-w-lg:      47px;
    --ps-cat-w-md:      40px;
    --ps-cat-w-sm:      34px;
    --ps-cat-w-xs:      30px;
    --ps-cat-h-lg:      42px;
    --ps-cat-h-md:      36px;
    --ps-cat-h-sm:      30px;
    --ps-cat-h-xs:      26px;
}

/* ── Główny kontener sekcji – 100% rodzica (Elementor kontroluje) */
.ps-map-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: var(--ps-map-h-lg);
}
.ps-map-section *{
    font-family: 'GeneralSans-Variable' !important;
}
/* ── Wrapper filtrów i tytułu – absolutnie, wysuwa się PONAD mapę ───────── */
.ps-filters-wrap {
    z-index: 20 !important;
    padding: 0 50px;
    width: 50% !important;
    pointer-events: none;
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    gap: 75px;
}
/* tytuł */
.zs-map-title,
.zs-map-title-mobile{
    font-family: 'GeneralSans-Variable' !important;
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: 600 !important;
    color: rgb(96, 113, 97) !important;
}
.zs-map-title-mobile{
    display: none !important;
}
/* ── Pasek filtrów (max-width + style) ─────────────────────────── */
#ps-category-filters {
    pointer-events: auto;
    max-width: 1312px;
    min-height: 0px !important;
    height: min-content !important;
    background: transparent !important;
    box-shadow: none;

    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: start;
    gap: 24px 4% !important;
    overflow: hidden;
}

/* ── Pojedyncza opcja filtru ───────────────────────────────────── */
.ps-cat-filter {
    width: 48% !important;
    display: inline-flex;
    align-items: center;
    gap: var(--ps-gap-inner-lg);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

/* Checkbox ─────────────────────────────────────────────────────── */
.ps-cat-filter input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #607161;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

.ps-cat-filter input[type="checkbox"]:checked {
    background: #607161;
    border-color: #607161;
}

.ps-cat-filter input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Ikona kategorii przy checkboxie ─────────────────────────────── */
.ps-cat-icon {
    width: 24px;
    height: 21px;
    aspect-ratio: 47 / 42;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.ps-cat-icon-placeholder {
    display: inline-block;
    width: 24px;
    height: 21px;
    background: #607161;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Nazwa kategorii ─────────────────────────────────────────────── */
.ps-cat-name {
    color: #607161 !important;
    font-family: 'GeneralSans-Variable' !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    white-space: nowrap;
}

/* Dimowanie przy odznaczeniu ──────────────────────────────────── */
.ps-cat-filter:has(input:not(:checked)) .ps-cat-name,
.ps-cat-filter:has(input:not(:checked)) .ps-cat-icon {
    opacity: 0.4;
}

/* ── Mapa – absolutnie wypełnia ps-map-section ─────────────────── */
#ps-map {
    position: absolute;
    top: 0;
    bottom: 120px;
    left: 50%;
    right: 0;
    width: 50%;
    min-height: var(--ps-map-h-lg);
    display: block;
    z-index: 20 !important;
}

/* Leaflet font inherit */
.leaflet-container {
    font-family: inherit;
}

/* ── Pulsowanie ikon ────────────────────────────────────────────── */
@keyframes ps-pulse {
    0%, 100% { transform: scale(1);     opacity: 1; }
    50%       { transform: scale(1.08); opacity: .88; }
}

.ps-pulse { animation: ps-pulse 3.5s ease-in-out infinite; }

/* ── Wrapper ikony kategorii ───────────────────────────────────── */
.ps-icon-wrap {
    display: block;
    width: var(--ps-cat-w-lg);
    height: var(--ps-cat-h-lg);
    line-height: 0;
    overflow: hidden;
}

.ps-icon-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* ── Ikony kategorii – osobne ustawienia, object-fit contain ────── */
.ps-cat-icon-wrapper { background: none !important; border: none !important; }
.ps-cat-icon-wrapper .ps-icon-wrap {
    width:  var(--ps-cat-w-lg) !important;
    height: var(--ps-cat-h-lg) !important;
}
.ps-cat-icon-wrapper .ps-icon-wrap img {
    width:        100% !important;
    height:       100% !important;
    display:      block !important;
    object-fit:   contain !important;
}
@media (max-width: 1200px) {
    .ps-cat-icon-wrapper .ps-icon-wrap {
        width:  var(--ps-cat-w-md) !important;
        height: var(--ps-cat-h-md) !important;
    }
    .ps-filters-wrap {
        width: 40% !important;
        gap: 50px;
    }
    #ps-map {
        bottom: 100px;
        left: 40%;
        right: 0;
        width: 60%;
    }
    .ps-cat-filter{
        width: 100% !important;
    }
}
@media (max-width: 1025px) {
    .zs-map-title-mobile{
        display: block !important;
        font-size: 30px !important;
        line-height: 35px !important;
    }
    .zs-map-title{
        display: none !important;
    }
}
@media (max-width: 768px) {
    .ps-map-section {
        flex-direction: column !important;
        padding-bottom: 500px !important;
    }
    .ps-filters-wrap {
        padding: 0 50px 50px;
        width: 100% !important;
        gap: 40px;
    }
    #ps-category-filters {
        flex-direction: row !important;
        width: 100% !important;
        gap: 20px 2% !important;
    }
    .ps-cat-icon-wrapper .ps-icon-wrap {
        width:  var(--ps-cat-w-sm) !important;
        height: var(--ps-cat-h-sm) !important;
    }
    .ps-cat-filter {
        width: 48% !important;
        gap: 10px;
        align-items: start !important;
    }
    .ps-cat-filter input[type="checkbox"]{
        margin-top: 1px !important;
    }
    #ps-map {
        position: absolute !important;
        left: 0;
        bottom: 0px;
        top: unset !important;
        width: 100% !important;
    }
}
@media (max-width: 480px) {
    .ps-map-section {
        padding-bottom: 400px !important;
    }
    .ps-cat-icon-wrapper .ps-icon-wrap {
        width:  var(--ps-cat-w-xs) !important;
        height: var(--ps-cat-h-xs) !important;
    }
}

/* ── Punkt stały – szerokość z ustawień, wysokość auto (proporcje) */
.ps-fixed-icon-wrapper,
.ps-fixed-icon-wrapper .ps-fixed-marker {
    width:  var(--ps-fixed-w-lg) !important;
    height: auto !important;
}
.ps-fixed-icon-wrapper .ps-fixed-marker img {
    width:   var(--ps-fixed-w-lg) !important;
    height:  auto !important;
    display: block !important;
}
@media (max-width: 1200px) {
    .ps-fixed-icon-wrapper,
    .ps-fixed-icon-wrapper .ps-fixed-marker { width: var(--ps-fixed-w-md) !important; }
    .ps-fixed-icon-wrapper .ps-fixed-marker img { width: var(--ps-fixed-w-md) !important; }
}
@media (max-width: 768px) {
    .ps-fixed-icon-wrapper,
    .ps-fixed-icon-wrapper .ps-fixed-marker { width: var(--ps-fixed-w-sm) !important; }
    .ps-fixed-icon-wrapper .ps-fixed-marker img { width: var(--ps-fixed-w-sm) !important; }
}
@media (max-width: 480px) {
    .ps-fixed-icon-wrapper,
    .ps-fixed-icon-wrapper .ps-fixed-marker { width: var(--ps-fixed-w-xs) !important; }
    .ps-fixed-icon-wrapper .ps-fixed-marker img { width: var(--ps-fixed-w-xs) !important; }
}

/* ── Marker domyślny (brak ikony) ──────────────────────────────── */
.ps-map-marker { display: block; line-height: 0; }

.ps-marker-dot {
    width: 16px;
    height: 16px;
    background: #607161;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Leaflet – usuń domyślne style na divIcon */
.leaflet-div-icon {
    background: none !important;
    border: none !important;
}

/* ── Cluster – licznik ──────────────────────────────────────────── */
.ps-cluster-wrap  { background: none !important; border: none !important; }

.ps-cluster-inner {
    width: 100%;
    height: 100%;
    background: #607161;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    animation: ps-pulse 3.5s ease-in-out infinite;
}

/* ── Responsywność ─────────────────────────────────────────────── */

/* Tablet 769–1200px */
@media (max-width: 1200px) {
    .ps-map-section { min-height: var(--ps-map-h-md); }
    #ps-map         { min-height: var(--ps-map-h-md); }
    #ps-category-filters {
        flex-direction: column;
    }
    .ps-cat-filter { width: 100%; }
    .ps-cat-name   { font-size: var(--ps-font-md); }
}

/* Mobile 481–768px */
@media (max-width: 768px) {
    .ps-map-section { min-height: var(--ps-map-h-sm); }
    #ps-map         { min-height: var(--ps-map-h-sm); }

    .ps-cat-name   { font-size: var(--ps-font-sm); line-height: 18px; white-space: wrap !important; }

}

/* Mobile ≤480px */
@media (max-width: 480px) {
    .ps-map-section { min-height: var(--ps-map-h-xs); }
    #ps-map         { min-height: var(--ps-map-h-xs); }
    .ps-cat-name   { font-size: 14px !important; line-height: 1.3; }
}

/* ── Zoom +/− – prawy dolny róg, zielone tło, białe ikonki ──────── */
#ps-map .leaflet-top.leaflet-left {
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;
    right: 20px !important;
}

#ps-map .leaflet-control-zoom {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}

#ps-map .leaflet-control-zoom-in,
#ps-map .leaflet-control-zoom-out {
    background: #AD5941 !important;
    color: #fff !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.15s;
}

#ps-map .leaflet-control-zoom-in:hover,
#ps-map .leaflet-control-zoom-out:hover {
    background: #7e402f !important;
    color: #fff !important;
}

#ps-map .leaflet-control-zoom-in {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.25) !important;
}

#ps-map .leaflet-control-zoom-out {
    border-radius: 0 0 12px 12px !important;
}

@media (max-width: 768px) {
    #ps-map .leaflet-top.leaflet-left {
        bottom: 14px !important;
        right: 14px !important;
    }
    #ps-map .leaflet-control-zoom-in,
    #ps-map .leaflet-control-zoom-out {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 20px !important;
    }
}