/* ── Cluster méret: small (< 10) - Világoskék ── */
.marker-cluster-small {
    background-color: rgba(59, 130, 246, 0.20); /* #3b82f6 szórási kör */
}
.marker-cluster-small div {
    background-color: rgba(59, 130, 246, 0.90); /* #3b82f6 mag */
    color: #fff;
}

/* ── Cluster méret: medium (10–99) - PetMap Kék ── */
.marker-cluster-medium {
    background-color: rgba(37, 99, 235, 0.22); /* #2563eb szórási kör */
}
.marker-cluster-medium div {
    background-color: rgba(37, 99, 235, 0.92); /* #2563eb mag */
    color: #fff;
}

/* ── Cluster méret: large (100+) - Mélykék ── */
.marker-cluster-large {
    background-color: rgba(29, 78, 216, 0.25); /* #1d4ed8 szórási kör */
}
.marker-cluster-large div {
    background-color: rgba(29, 78, 216, 0.95); /* #1d4ed8 mag */
    color: #fff;
}

/* ── Dark mode (Kicsit kontrasztosabb háttér a sötét térképhez) ── */
html[data-bs-theme="dark"] .marker-cluster-small {
    background-color: rgba(59, 130, 246, 0.22);
}
html[data-bs-theme="dark"] .marker-cluster-small div {
    background-color: rgba(59, 130, 246, 0.95);
    color: #fff;
}

html[data-bs-theme="dark"] .marker-cluster-medium {
    background-color: rgba(37, 99, 235, 0.25);
}
html[data-bs-theme="dark"] .marker-cluster-medium div {
    background-color: rgba(37, 99, 235, 0.95);
    color: #fff;
}

html[data-bs-theme="dark"] .marker-cluster-large {
    background-color: rgba(29, 78, 216, 0.28);
}
html[data-bs-theme="dark"] .marker-cluster-large div {
    background-color: rgba(29, 78, 216, 0.98);
    color: #fff;
}

/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(59, 130, 246);
}
.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(37, 99, 235);
}
.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(37, 99, 235);
}
.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(29, 78, 216);
}
.leaflet-oldie .marker-cluster-large {
    background-color: rgb(29, 78, 216);
}
.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(30, 58, 138);
}

/* ── Base styles ── */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}

.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 600; /* Kicsit vastagítottam a számon, hogy jobban olvasható legyen a kék háttéren */
}

.marker-cluster span {
    line-height: 30px;
}