/* --- Fix: maniglie non tranciate + intervallo colorato --- */
.noUi-bs {
    --range-h: .5rem; /* spessore barra */
    --thumb: 1.15rem; /* diametro maniglia */
    --connect: rgba(var(--subtle1), .35); /* colore zona attiva */
}

/* 1) contenitore alto quanto la maniglia */
.noUi-horizontal.noUi-bs {
    height: var(--thumb);
}

    /* 2) barra centrata verticalmente nel contenitore */
    .noUi-horizontal.noUi-bs .noUi-base {
        height: var(--range-h);
        margin-top: calc((var(--thumb) - var(--range-h)) / 2);
        border-radius: 1rem;
        background: var(--icon);
        overflow: visible;
    }

    /* 3) colore dell'intervallo attivo, rifilato dentro la barra */
    .noUi-horizontal.noUi-bs .noUi-connects {
        height: 100%;
        border-radius: inherit;
        overflow: hidden;
    }

.noUi-bs .noUi-connect {
    background: rgba(17,77,156, .5);
}

/* 4) maniglie centrate e rotonde */
.noUi-horizontal.noUi-bs .noUi-handle {
    width: var(--thumb);
    height: var(--thumb);
    top: 30%;
    transform: translateY(-30%);
    right: calc(var(--thumb) / -2); /* centro sul punto */
    border: 0;
    border-radius: 999999999999999999999999px;
    background: var(--subtle1);
    box-shadow: none;
    z-index: 2; /* sopra alla connect */
    cursor: grab;
}

.noUi-bs .noUi-handle:active {
    cursor: grabbing;
}

.noUi-bs .noUi-handle:before,
.noUi-bs .noUi-handle:after {
    display: none;
}

/* focus ring bootstrap-like */
.noUi-bs .noUi-handle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.noUi-target {
    background: none;
    border: 0;
    box-shadow: none;
}