html, body, #map {
    width: 100%;
    height: 100%;
}

#map {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--color-gray-100);
}

.leaflet-control-zoom {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-md) !important;
    border: none !important;
}
.leaflet-control-zoom a {
    background: var(--color-white) !important;
    color: var(--color-gray-700) !important;
}
.leaflet-control-zoom a:hover {
    background: var(--color-primary-pale) !important;
    color: var(--color-primary) !important;
}

.leaflet-bottom.leaflet-right {
    bottom: 90px !important;
    right: 16px !important;
}

.leaflet-control-attribution {
    border-radius: var(--radius-sm) !important;
    font-size: 10px !important;
}

/* Custom marker icons — bentuk pin lokasi (teardrop), bukan bulatan polos.
   Dibuat murni CSS (kotak dirotasi 45°) supaya ringan & cepat dirender. */
.tree-pin {
    position: relative;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    border: 2px solid var(--color-white);
    display: flex;
}

.tree-pin-symbol {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: 0 0;
    font-size: 15px;
    line-height: 1;
}

.tree-pin.rw { background: var(--color-rw); }
.tree-pin.kahati { background: var(--color-kahati); }
.tree-pin.sehat { background: var(--color-sehat); }
.tree-pin.kurang-sehat { background: var(--color-kurang-sehat); }
.tree-pin.sakit { background: var(--color-sakit, #ef4444); }

.my-location-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2680eb;
    border: 3px solid white;
    box-shadow: 0 0 0 6px rgba(38,128,235,0.25);
}