/**
 * Estado visual de los checkboxes/radios de los filtros de vehículos (el icono
 * decorativo que exporta Figma es siempre el mismo, no reacciona al estado real
 * del input) y del rango de cuota mensual (slider de doble tirador, sin librería).
 * Se carga en el front por includes/frontend-assets.php -- independiente del
 * theme, no se pierde al re-exportar una pagina desde theme-constructor.
 */

.av-toggle {
    position: relative;
    cursor: pointer;
}
.av-toggle input[type="checkbox"],
.av-toggle input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* casillas: el icono "box" ya es un cuadrado blanco con borde gris -- al marcar,
   se tiñe el borde de azul y se superpone un check dibujado con CSS. */
.av-toggle input[type="checkbox"]:checked ~ [class*="box-desktop"] {
    outline: 1.5px solid #0786fb;
    outline-offset: -1.5px;
    border-radius: 4px;
}
.av-check-mark {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 1;
}
.av-toggle input[type="checkbox"]:checked ~ .av-check-mark {
    display: block;
}
.av-toggle input[type="checkbox"]:checked ~ .av-check-mark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #0786fb;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* radios: Figma ya distingue "seleccionado" (anillo azul de 6px) de "no
   seleccionado" (anillo gris fino de 1.5px) -- solo hace falta que reaccione
   al :checked real en vez de quedar fijo por instancia. */
.av-toggle input[type="radio"] ~ [class*="circle-desktop"] {
    border: 1.5px solid #d9e2e8 !important;
}
.av-toggle input[type="radio"]:checked ~ [class*="circle-desktop"] {
    border: 6px solid #0786fb !important;
}

/* rango de cuota mensual: dos <input type="range"> superpuestos + una barra de
   relleno entre los dos tiradores -- patron estandar sin JS de terceros. */
.av-range {
    position: relative;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    height: 20px;
    margin: 10px 0 4px;
}
.av-range__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #d9e2e8;
    border-radius: 2px;
    transform: translateY(-50%);
}
.av-range__fill {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #0786fb;
    border-radius: 2px;
    transform: translateY(-50%);
}
.av-range__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.av-range__input::-webkit-slider-runnable-track {
    background: transparent;
}
.av-range__input::-moz-range-track {
    background: transparent;
}
.av-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0786fb;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #0786fb;
    cursor: pointer;
    margin-top: 2px;
}
.av-range__input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0786fb;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #0786fb;
    cursor: pointer;
}