/* -------------------------------------------------------
   SCALA – Slider de precios minimalista
   Reemplazo TOTAL del estilo original
--------------------------------------------------------- */

/* Contenedor general */
.ui-slider {
    position: relative;
    text-align: left;
}

/* Barra horizontal completamente minimalista */
.ui-slider-horizontal {
    height: 4px !important;
    background: #000 !important; /* barra negra */
    border: none !important;
    border-radius: 2px !important;
}

/* Rango seleccionado */
.ui-slider-horizontal .ui-slider-range {
    background: #000 !important;
    height: 4px !important;
    top: 0 !important;
}

/* Mangos circulares huecos */
.ui-slider-horizontal .ui-slider-handle {
    position: absolute !important;
    z-index: 2 !important;
    width: 18px !important;
    height: 18px !important;
    top: -7px !important;  /* centra el círculo */
    margin-left: -9px !important; 
    border-radius: 50% !important;
    border: 2px solid #0d6efd !important;  /* azul Scala */
    background: #ffffff !important;        /* hueco */
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Quitar decoraciones internas */
.ui-slider-handle:before,
.ui-slider-handle:after {
    display: none !important;
}

/* Vertical (por si el plugin lo usa en otro widget) */
.ui-slider-vertical {
    width: 4px !important;
    height: 150px !important;
    background: #000 !important;
    border: none !important;
}

.ui-slider-vertical .ui-slider-range {
    width: 4px !important;
    background: #000 !important;
}

.ui-slider-vertical .ui-slider-handle {
    width: 18px !important;
    height: 18px !important;
    left: -7px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid #0d6efd !important;
}