.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition:
        -webkit-transform 0.3s ease-out,
        opacity 0.3s ease-in;
    -moz-transition:
        -moz-transform 0.3s ease-out,
        opacity 0.3s ease-in;
    -o-transition:
        -o-transform 0.3s ease-out,
        opacity 0.3s ease-in;
    transition:
        transform 0.3s ease-out,
        opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
    /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
    -webkit-transition:
        -webkit-stroke-dashoffset 0.3s ease-out,
        -webkit-stroke-opacity 0.3s ease-in;
    -moz-transition:
        -moz-stroke-dashoffset 0.3s ease-out,
        -moz-stroke-opacity 0.3s ease-in;
    -o-transition:
        -o-stroke-dashoffset 0.3s ease-out,
        -o-stroke-opacity 0.3s ease-in;
    transition:
        stroke-dashoffset 0.3s ease-out,
        stroke-opacity 0.3s ease-in;
}

/* The outer wrapper (Leaflet adds this) */
.custom-cluster-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* The bubble itself */
/*
.cluster-inner {
    width: 35px;
    height: 35px;
    background: #ffdfc6;
    color: #8b5e3c;
    border-radius: 50%;
    border: 2px solid #fffaf0;
    box-shadow: 0 2px 10px rgba(139, 94, 60, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: "Georgia", serif;
    transition: transform 0.2s ease;
}

.cluster-inner:hover {
    transform: scale(1.1);
    background: #f4c29f;
}
*/

/* Outer wrapper */
.custom-cluster-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* The Dusty Blue Bubble */
.cluster-inner {
    width: 38px;
    height: 38px;
    background: #94a7ae; /* Soft Dusty Blue */
    color: #fffaf0; /* Your body color for the number */
    border-radius: 50%;
    border: 2px solid #c4a484; /* Soft Rose-Gold/Sand border */
    box-shadow: 0 4px 10px rgba(148, 167, 174, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: "Georgia", serif;
    transition: all 0.3s ease;
}

.cluster-inner:hover {
    transform: scale(1.1);
    background: #7a8d94; /* Deeper Slate Blue on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.cluster-icon {
    height: 50%;
}