/* Fanor · Busca por vehículo — handle `fanor-busca-vehiculo`
 *
 * Anatomía del buscador de tres pasos. Los valores de partida NO son inventados:
 * están medidos del boceto que la tienda tenía hecho en la home, para que el
 * widget funcional se vea exactamente igual que él —campo blanco de 40px con
 * borde gris y sin redondeo, número en un círculo gris DENTRO del campo, texto
 * del paso a 15px, y el botón rojo del mismo alto—.
 *
 * Todo lo que se ve está detrás de una variable, y cada variable la escribe un
 * control del widget (`selectors`), así que se puede cambiar entero desde
 * Elementor sin tocar esta hoja. Lo de aquí es solo el punto de partida, para
 * que la sección se vea bien antes de que Elementor regenere el CSS.
 *
 * Sin media queries de dispositivo salvo el respaldo del final: la disposición y
 * los anchos son controles responsive nativos. Cuidado con añadir reglas de
 * `@media` para propiedades que ya escribe un control: Elementor gana por
 * especificidad y la regla de aquí no llega a aplicarse (ver v0.98.3).
 */

.fnr-bv {
  /* Marca y superficies */
  --fnr-bv-acento: var(--fnp-oro, #CC0000);
  --fnr-bv-acento-hover: var(--fnp-oro-osc, #A80000);
  --fnr-bv-linea: #CDCDCD;
  --fnr-bv-gris: var(--fnp-gris, #666);

  /* Campo */
  --fnr-bv-alto: 40px;
  --fnr-bv-radio: 0px;
  --fnr-bv-campo-bg: #fff;
  --fnr-bv-campo-texto: var(--fnp-tinta, #1A1A1A);
  --fnr-bv-campo-placeholder: #6B6B6B;
  --fnr-bv-campo-borde-activo: var(--fnr-bv-acento);

  /* Número del paso */
  --fnr-bv-num-tam: 24px;
  --fnr-bv-num-bg: #E9E9E9;
  --fnr-bv-num-color: #5C5C5C;
  --fnr-bv-num-radio: 50%;

  /* Flecha del campo */
  --fnr-bv-chevron-color: #6B6B6B;
  --fnr-bv-chevron-tam: 11px;

  /* Desplegable */
  --fnr-bv-panel-bg: #fff;
  --fnr-bv-opcion-color: var(--fnp-tinta, #1A1A1A);
  --fnr-bv-opcion-hover-bg: var(--fnp-oro-pale, #FDECEC);
  --fnr-bv-opcion-hover-color: var(--fnr-bv-acento-hover);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 18px 20px;
  background: #F6F6F6;
  border-radius: 3px;
  font-family: var(--fanor-font-body, system-ui, sans-serif);
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.fnr-bv__cab {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fnr-bv__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--fanor-font-display, sans-serif);
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fnp-tinta, #1A1A1A);
}

.fnr-bv__icono {
  display: inline-flex;
  color: var(--fnr-bv-acento);
}

.fnr-bv__icono svg { display: block; }

.fnr-bv__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fnr-bv-gris);
}

/* ── Los tres pasos ───────────────────────────────────────────────────── */

.fnr-bv__pasos {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}

/* `flex-grow` lo escribe el control «Ancho relativo» de cada paso (2/3/2 por
   defecto, que es el 20/30/20 del diseño). `min-width: 0` es lo que permite que
   un modelo largo se recorte dentro de su columna en vez de ensanchar la fila. */
.fnr-bv__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

/* Solo con «Etiqueta encima» activada; por defecto el texto va dentro del campo. */
.fnr-bv__etiqueta {
  overflow: hidden;
  font-family: var(--fanor-font-display, sans-serif);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fnr-bv-gris);
}

/* ── Campo ────────────────────────────────────────────────────────────── */

.fnr-bv__select { position: relative; }

.fnr-bv__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--fnr-bv-alto);
  padding: 0 12px 0 8px;
  font-family: inherit;
  text-align: left;
  background: var(--fnr-bv-campo-bg);
  border: 1px solid var(--fnr-bv-linea);
  border-radius: var(--fnr-bv-radio);
  cursor: pointer;
  transition: border-color 0.15s var(--fnp-e-soft, ease), box-shadow 0.15s var(--fnp-e-soft, ease);
}

/* ── Blindaje de estados ─────────────────────────────────────────────────
   El `reset.css` del tema trae reglas sobre el ATRIBUTO del elemento:

       [type="button"]:focus { background-color: #CC3366; color: #fff; }

   y todo lo interactivo de este widget —los tres campos, cada opción de la
   lista y el botón— es `<button type="button">`. Al hacer clic, ese magenta se
   metía dentro del campo.

   Dos cosas hacían falta y ninguna estaba: declarar `:focus` y no solo
   `:focus-visible` —que NO se activa al pulsar con el ratón, así que no llegaba
   a tapar nada—, y hacerlo con más peso que un selector de atributo, de ahí el
   `.fnr-bv` por delante. Se fijan color Y fondo en los cuatro estados aunque
   repitan el valor de reposo: lo que no se declara, lo decide el tema. */

.fnr-bv .fnr-bv__trigger,
.fnr-bv .fnr-bv__trigger:hover,
.fnr-bv .fnr-bv__trigger:focus,
.fnr-bv .fnr-bv__trigger:focus-visible,
.fnr-bv .fnr-bv__trigger:active {
  color: var(--fnr-bv-campo-texto);
  background: var(--fnr-bv-campo-bg);
}

.fnr-bv__trigger:hover { border-color: var(--fnr-bv-campo-borde-activo); }

.fnr-bv__trigger:focus,
.fnr-bv__trigger:focus-visible {
  outline: none;
  border-color: var(--fnr-bv-campo-borde-activo);
}

.fnr-bv__trigger:focus-visible {
  box-shadow: 0 0 0 3px var(--fnp-oro-halo, rgba(204, 0, 0, 0.16));
}

/* Un paso solo se abre cuando el anterior está elegido: el modelo depende de la
   marca y el año de los dos. Se ve apagado para que se entienda por qué. */
.fnr-bv__select.is-bloqueado .fnr-bv__trigger {
  background: var(--fnr-bv-bloqueado-bg, #FAFAFA);
  cursor: not-allowed;
  opacity: var(--fnr-bv-bloqueado-opacidad, 0.65);
}

.fnr-bv__select.is-bloqueado .fnr-bv__trigger:hover { border-color: var(--fnr-bv-linea); }

.fnr-bv__select.is-elegido .fnr-bv__trigger { border-color: var(--fnr-bv-campo-borde-activo); }

/* El número, dentro del campo y a la izquierda del texto. */
.fnr-bv__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--fnr-bv-num-tam);
  height: var(--fnr-bv-num-tam);
  font-family: var(--fanor-font-body, sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--fnr-bv-num-color);
  background: var(--fnr-bv-num-bg);
  border-radius: var(--fnr-bv-num-radio);
}

.fnr-bv__valor {
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--fanor-font-display, sans-serif);
  font-size: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fnr-bv-campo-texto);
}

/* Mientras no se ha elegido nada, el texto es el nombre del paso y va en el gris
   apagado; al elegir pasa al color de texto normal. */
.fnr-bv__select:not(.is-elegido) .fnr-bv__valor { color: var(--fnr-bv-campo-placeholder); }

.fnr-bv__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--fnr-bv-chevron-color);
  transition: transform 0.2s var(--fnp-e-out, ease);
}

.fnr-bv__chevron svg {
  display: block;
  width: var(--fnr-bv-chevron-tam);
  height: var(--fnr-bv-chevron-tam);
}

.fnr-bv__select.is-abierto .fnr-bv__chevron { transform: rotate(180deg); }

/* ── Desplegable ──────────────────────────────────────────────────────── */

.fnr-bv__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
  background: var(--fnr-bv-panel-bg);
  border: 1px solid var(--fnr-bv-linea);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.fnr-bv__panel[hidden] { display: none; }

.fnr-bv__buscar {
  padding: 8px;
  border-bottom: 1px solid var(--fnr-bv-linea);
}

.fnr-bv__filtro {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fnr-bv-campo-texto);
  background: #F6F6F6;
  border: 1px solid transparent;
}

/* El buscador interno es un `input[type="search"]`, y el reset del tema también
   pinta los campos por atributo al enfocarlos. */
.fnr-bv .fnr-bv__filtro:focus,
.fnr-bv .fnr-bv__filtro:focus-visible {
  outline: none;
  color: var(--fnr-bv-campo-texto);
  background: #fff;
  border-color: var(--fnr-bv-campo-borde-activo);
}

.fnr-bv__opciones {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fnr-bv__opcion {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-family: var(--fanor-font-display, sans-serif);
  font-size: 15px;
  text-align: left;
  color: var(--fnr-bv-opcion-color);
  background: none;
  border: 0;
  cursor: pointer;
}

.fnr-bv__opcion[hidden] { display: none; }

/* Mismo blindaje que el campo: cada opción es un `<button type="button">` y sin
   `:focus` declarado se volvía magenta al pulsarla. */
.fnr-bv .fnr-bv__opcion,
.fnr-bv .fnr-bv__opcion:focus,
.fnr-bv .fnr-bv__opcion:active {
  color: var(--fnr-bv-opcion-color);
  background: none;
}

.fnr-bv .fnr-bv__opcion:hover,
.fnr-bv .fnr-bv__opcion:focus-visible {
  outline: none;
  background: var(--fnr-bv-opcion-hover-bg);
  color: var(--fnr-bv-opcion-hover-color);
}

.fnr-bv__opcion[aria-selected="true"] {
  background: var(--fnr-bv-opcion-hover-bg);
  font-weight: 600;
}

.fnr-bv__aviso {
  margin: 0;
  padding: 14px;
  font-size: 14px;
  color: var(--fnr-bv-gris);
}

/* ── Botón ────────────────────────────────────────────────────────────── */

/* El botón va SIN padding lateral a propósito, y no es un descuido de estilo.
   Su ancho lo reparte `flex-grow` junto a los tres pasos, y un `flex-basis: 0`
   se queda SUELADO al padding + borde del elemento: con 20px por lado, el botón
   arrancaba con 40px de ventaja y salía 385px donde tocaban 357, robándole ese
   ancho a los campos. Sin padding el reparto es 2/3/2/3 limpio y las columnas
   cuadran con el diseño. El texto ya va centrado por flex, así que no hace
   falta; quien quiera padding lo pone desde el control y asume el desajuste. */
.fnr-bv__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 3 1 0;
  min-width: 0;
  height: var(--fnr-bv-alto);
  padding: 0;
  font-family: var(--fanor-font-display, sans-serif);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  background: var(--fnr-bv-acento);
  border: 0;
  border-radius: var(--fnr-bv-radio);
  cursor: pointer;
  transition: background-color 0.15s var(--fnp-e-soft, ease);
}

/* Mismo blindaje, con el `.fnr-bv` por delante para pesar más que el selector
   de atributo del reset del tema. */
.fnr-bv .fnr-bv__btn,
.fnr-bv .fnr-bv__btn:link,
.fnr-bv .fnr-bv__btn:visited {
  color: var(--fnr-bv-btn-color, #fff);
  background: var(--fnr-bv-btn-bg, var(--fnr-bv-acento));
}

.fnr-bv .fnr-bv__btn:hover,
.fnr-bv .fnr-bv__btn:focus,
.fnr-bv .fnr-bv__btn:focus-visible,
.fnr-bv .fnr-bv__btn:active {
  color: var(--fnr-bv-btn-color-hover, var(--fnr-bv-btn-color, #fff));
  background: var(--fnr-bv-btn-bg-hover, var(--fnr-bv-acento-hover));
  text-decoration: none;
}

.fnr-bv__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--fnp-oro-halo, rgba(204, 0, 0, 0.16));
}

.fnr-bv__btn:disabled { cursor: progress; }

.fnr-bv__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fnr-bv-giro 0.7s linear infinite;
}

.fnr-bv__btn.is-cargando .fnr-bv__spinner { display: block; }

/* ── Estado y pie ─────────────────────────────────────────────────────── */

.fnr-bv__estado {
  display: none;
  margin: 0;
  font-size: 14px;
  color: var(--fnr-bv-acento);
}

.fnr-bv__estado.is-visible { display: block; }

.fnr-bv__pie {
  margin: 0;
  font-size: 13px;
  color: var(--fnp-gris-2, #888);
}

/* ── Cortina de carga ─────────────────────────────────────────────────────
   Va en <body>, fuera del widget, porque tapa la pantalla entera mientras el
   navegador va a la página de resultados. */

.fnr-bv-cortina {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.86);
  opacity: 0;
  transition: opacity 0.18s var(--fnp-e-soft, ease);
}

.fnr-bv-cortina.is-visible { opacity: 1; }

.fnr-bv-cortina__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  text-align: center;
}

.fnr-bv-cortina__spinner {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border: 3px solid #E5E5E5;
  border-top-color: var(--fnp-oro, #CC0000);
  border-radius: 50%;
  animation: fnr-bv-giro 0.7s linear infinite;
}

/* En condensada y mayúsculas, como los encabezados de sección de la tienda. */
.fnr-bv-cortina__txt {
  margin: 0;
  font-family: var(--fanor-font-display, sans-serif);
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fnp-tinta, #1A1A1A);
}

.fnr-bv-cortina__sub {
  margin: 0;
  font-family: var(--fanor-font-body, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--fnp-gris, #666);
}

@keyframes fnr-bv-giro {
  to { transform: rotate(360deg); }
}

/* Quien pidió menos movimiento no necesita el giro: el indicador sigue estando,
   simplemente no da vueltas. */
@media (prefers-reduced-motion: reduce) {
  .fnr-bv__spinner,
  .fnr-bv-cortina__spinner { animation: none; }

  .fnr-bv__chevron,
  .fnr-bv-cortina { transition: none; }
}

/* Respaldo de móvil, solo para antes de que Elementor regenere el CSS de la
   página. Quien manda de verdad son los controles «Disposición» y «Estirar los
   campos», que traen `columna` y `estirar` por defecto en móvil. */
@media (max-width: 767px) {
  .fnr-bv__pasos {
    flex-direction: column;
    align-items: stretch;
  }
}

/* iOS Safari hace zoom al enfocar un input de menos de 16px y no lo deshace al
   salir. Al abrir Marca/Modelo/Año el JS enfoca `.fnr-bv__filtro` (14px): ese
   era el zoom al tocar el campo. En táctil 16px; en escritorio se queda el 14. */
@media (pointer: coarse) {
  .fnr-bv .fnr-bv__filtro {
    font-size: 16px;
  }
}