.fanor-fvs {
    --fanor-fvs-red: #CC0000;
    --fanor-fvs-red-hover: #A80000;
    --fanor-fvs-black: #1A1A1A;
    --fanor-fvs-muted: #888;
    --fanor-fvs-border: #E0E0E0;
    --fanor-fvs-width: 1040px;
    --fanor-fvs-overlap: -36px;
    --fanor-fvs-side-padding: 24px;
    box-sizing: border-box;
    font-family: var(--fanor-font-body);
    position: relative;
    z-index: 20;
}

.fanor-fvs *,
.fanor-fvs *::before,
.fanor-fvs *::after {
    box-sizing: border-box;
}

.fanor-fvs button,
.fanor-fvs input {
    font-family: inherit;
}

.fanor-fvs button {
    cursor: pointer;
}

.fanor-fvs button:focus,
.fanor-fvs input:focus {
    outline: none !important;
}

.fanor-fvs button:focus-visible,
.fanor-fvs input:focus-visible {
    outline: 2px solid #9AA0A6 !important;
    outline-offset: 2px;
}

/* BLINDAJE de estados interactivos: los efectos de hover del tema o del kit de
   botones de Elementor (p. ej. transform: scale/translate o cambios de fuente)
   NO deben alterar la geometría ni el tamaño del texto de este widget. Aquí se
   neutraliza el transform; las métricas de texto se fijan (!important) en cada
   elemento más abajo. Los estados solo cambian color/fondo/borde por diseño. */
.fanor-fvs-trigger:hover,
.fanor-fvs-trigger:focus,
.fanor-fvs-trigger:active,
.fanor-fvs-trigger:focus-visible,
.fanor-fvs-submit:hover,
.fanor-fvs-submit:focus,
.fanor-fvs-submit:active,
.fanor-fvs-submit:focus-visible,
.fanor-fvs-option:hover,
.fanor-fvs-option:focus,
.fanor-fvs-option:active,
.fanor-fvs-filter:hover,
.fanor-fvs-filter:focus {
    transform: none !important;
}

.fanor-fvs-track {
    margin: var(--fanor-fvs-overlap) auto 0;
    max-width: var(--fanor-fvs-width);
    padding: 0 var(--fanor-fvs-side-padding);
    position: relative;
    width: 100%;
}

.fanor-fvs-card {
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 5px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    padding: 22px 26px 20px;
}

.fanor-fvs-title-row {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.fanor-fvs-title-icon {
    color: var(--fanor-fvs-red);
    flex: 0 0 auto;
    height: 20px;
    width: 27px;
}

.fanor-fvs-title-icon svg {
    display: block;
    height: 20px;
    width: 27px;
}

.fanor-fvs-title-icon i {
    color: var(--fanor-fvs-red);
    font-size: 24px;
    line-height: 1;
}

.fanor-fvs-title-row h2 {
    color: var(--fanor-fvs-black);
    font-family: var(--fanor-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* Grid de columnas de PROPORCIÓN FIJA: el ancho de cada control NO depende de
   su contenido, así el FOUT de la webfont o un icono sin dimensiones ya no
   redistribuyen la fila (Marca | Modelo | Año | botón). */
.fanor-fvs-controls {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.1fr);
    gap: 12px;
}

.fanor-fvs-select {
    min-width: 0; /* permite el text-overflow:ellipsis de la etiqueta */
    position: relative;
}

.fanor-fvs-trigger,
.fanor-fvs-trigger:hover,
.fanor-fvs-trigger:focus,
.fanor-fvs-trigger:active {
    align-items: center;
    background: #fff !important;
    border: 1px solid var(--fanor-fvs-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--fanor-fvs-muted) !important;
    display: flex;
    font-family: var(--fanor-font-body);
    font-size: 14px !important;
    font-weight: 400 !important;
    gap: 8px;
    height: 46px;
    justify-content: space-between;
    line-height: 1;
    padding: 0 14px;
    text-align: left;
    width: 100%;
}

.fanor-fvs-select.has-value .fanor-fvs-trigger,
.fanor-fvs-select.has-value .fanor-fvs-trigger:hover,
.fanor-fvs-select.has-value .fanor-fvs-trigger:focus {
    border-color: var(--fanor-fvs-red) !important;
    color: var(--fanor-fvs-black) !important;
}

.fanor-fvs-trigger:disabled,
.fanor-fvs-trigger:disabled:hover,
.fanor-fvs-trigger:disabled:focus {
    background: #F5F5F5 !important;
    color: #999 !important;
    cursor: not-allowed;
}

.fanor-fvs-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fanor-fvs-chevron {
    color: var(--fanor-fvs-muted);
    flex: 0 0 auto;
    height: 16px;
    transition: transform .2s ease;
    width: 16px;
}

.fanor-fvs-chevron svg {
    display: block;
    height: 16px;
    width: 16px;
}

.fanor-fvs-chevron svg path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.fanor-fvs-chevron i {
    font-size: 16px;
    line-height: 1;
}

.fanor-fvs-select.is-open .fanor-fvs-chevron {
    transform: rotate(180deg);
}

.fanor-fvs-panel {
    background: #fff;
    border: 1px solid var(--fanor-fvs-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 170;
}

.fanor-fvs-panel-search {
    border-bottom: 1px solid #F0F0F0;
    padding: 8px;
}

.fanor-fvs-filter,
.fanor-fvs-filter:hover,
.fanor-fvs-filter:focus {
    background: #fff !important;
    border: 1px solid var(--fanor-fvs-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--fanor-fvs-black) !important;
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    width: 100%;
}

.fanor-fvs-filter:focus {
    border-color: var(--fanor-fvs-red) !important;
}

.fanor-fvs-options {
    max-height: 220px;
    overflow-y: auto;
}

.fanor-fvs-option,
.fanor-fvs-option:hover,
.fanor-fvs-option:focus,
.fanor-fvs-option:active {
    align-items: center;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--fanor-fvs-black) !important;
    display: flex;
    font-family: var(--fanor-font-display);
    font-size: 13px !important;
    font-weight: 700 !important;
    justify-content: space-between;
    letter-spacing: .4px;
    line-height: 1.2;
    min-height: 40px;
    padding: 11px 12px;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.fanor-fvs-option:hover,
.fanor-fvs-option:focus,
.fanor-fvs-option.is-selected {
    background: rgba(204, 0, 0, .08) !important;
    color: var(--fanor-fvs-red) !important;
}

.fanor-fvs-option-check {
    color: var(--fanor-fvs-red);
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    margin-left: 10px;
}

.fanor-fvs-loading {
    color: #777;
    font-size: 13px;
    margin: 0;
    padding: 16px 12px;
    text-align: center;
}

.fanor-fvs-empty {
    align-items: center;
    color: #999;
    display: flex;
    flex-direction: column;
    padding: 26px 16px;
    text-align: center;
}

.fanor-fvs-empty-icon {
    align-items: center;
    background: #F4F4F4;
    border-radius: 50%;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    margin-bottom: 10px;
    width: 46px;
}

.fanor-fvs-empty-icon svg {
    height: 22px;
    width: 22px;
}

.fanor-fvs-empty-icon path,
.fanor-fvs-empty-icon circle {
    fill: none;
    stroke: #BBBBBB;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fanor-fvs-empty strong {
    color: #555;
    font-family: var(--fanor-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.2;
    text-transform: uppercase;
}

.fanor-fvs-empty span {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
}

.fanor-fvs-submit,
.fanor-fvs-submit:hover,
.fanor-fvs-submit:focus,
.fanor-fvs-submit:active {
    align-items: center;
    background: var(--fanor-fvs-red) !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: inline-flex;
    font-family: var(--fanor-font-display);
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 8px;
    height: 46px;
    justify-content: center;
    letter-spacing: .4px !important;
    line-height: 1;
    padding: 0 34px;
    text-transform: uppercase;
    transition: background .2s ease;
    white-space: nowrap;
}

.fanor-fvs-submit:hover,
.fanor-fvs-submit:focus {
    background: var(--fanor-fvs-red-hover) !important;
}

.fanor-fvs-status {
    color: #555;
    display: none;
    font-size: 12px;
    margin: 10px 0 0;
    text-align: right;
}

.fanor-fvs-status:not(:empty) {
    display: block;
}

.fanor-fvs-proof {
    color: var(--fanor-fvs-red);
    font-family: var(--fanor-font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    line-height: 1.2;
    margin: 13px 0 0;
    text-align: right;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .fanor-fvs-track {
        margin-top: -24px;
        padding: 0 16px;
    }

    .fanor-fvs-card {
        padding: 20px 18px 18px;
    }

    .fanor-fvs-controls {
        grid-template-columns: 1fr; /* apila Marca / Modelo / Año / botón */
    }

    .fanor-fvs-status,
    .fanor-fvs-proof {
        text-align: left;
    }
}

/* Mismo criterio que busca-vehiculo.css: el filtro del desplegable es 13px y iOS
   hace zoom al enfocarlo. */
@media (pointer: coarse) {
    .fanor-fvs-filter,
    .fanor-fvs-filter:hover,
    .fanor-fvs-filter:focus {
        font-size: 16px !important;
    }
}
