/* ==========================================================================
   ADM Vehicle Search — buscador de compatibilidad en cascada (Tipo →
   Marca → Modelo → Año/Combustible). Mismas variables --adm-* que
   adm-filtros.css (namespaced con su propio bloque .adm-vehicle-search
   para poder vivir en una página distinta al catálogo, sin depender de
   que [adm_filtros] también esté presente).

   Diseño por defecto: VERTICAL (1 select por fila) — el caso de uso real
   confirmado es insertarlo en una columna angosta tipo sidebar (junto a
   [adm_filtros]), no en un bloque ancho de página completa. Los
   breakpoints usan @container (no @media): igual que adm-filtros.css, el
   ancho real disponible lo determina el contenedor de Elementor donde se
   inserta el shortcode, no el viewport del navegador — con @media, un
   sidebar angosto en una pantalla ancha de escritorio nunca activa el
   breakpoint "angosto" y el grid de 4 columnas queda comprimido e
   ilegible (bug real, confirmado en el sitio: 4 selects apretados en una
   sola fila dentro del sidebar). Con @container, si en algún momento se
   inserta en un bloque ancho de página completa, sí escala a 2/4 columnas.
   ========================================================================== */

.adm-vehicle-search {
  /* Azul de marca ADM Import (#0071BC) — ver misma nota en adm-filtros.css. */
  --adm-color-primary: #0071BC;
  --adm-color-primary-dark: #005893;
  --adm-color-text: #4a4a4a;
  --adm-color-text-soft: #7A7A7A;
  --adm-color-bg-alt: #f7f7f7;
  --adm-color-border: #e6e6e6;
  --adm-radius-sm: 6px;
  --adm-radius-md: 12px;
  --adm-transition: 0.25s ease;

  display: block;
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: adm-vehicle-search;
  background: var(--adm-color-bg-alt);
  border-radius: var(--adm-radius-md);
  padding: 24px;
  color: var(--adm-color-text);
  font-size: 16px;
}

.adm-vehicle-search *,
.adm-vehicle-search *::before,
.adm-vehicle-search *::after {
  box-sizing: inherit;
}

.adm-vehicle-search__title {
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}

.adm-vehicle-search__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* Sin fallback por @media aquí a propósito: el ancho real lo determina el
   contenedor de Elementor, no el viewport, y promover a 2 columnas por
   @media (ancho de PANTALLA) es justo el bug que este archivo corrige —
   un sidebar angosto en una pantalla ancha volvería a comprimirse. En
   navegadores sin soporte de @container (cobertura >93% en 2026, ver
   adm-filtros.css) el diseño se queda en 1 columna vertical, que es
   siempre seguro sin importar el ancho real del contenedor.

   Container queries: fuente de verdad cuando el navegador las soporta. Solo
   escala a 2/4 columnas si el CONTENEDOR real (no la pantalla) es ancho —
   un sidebar angosto se queda en 1 columna sin importar cuán ancha sea la
   pantalla del visitante. */
@container adm-vehicle-search (min-width: 480px) {
  .adm-vehicle-search__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container adm-vehicle-search (min-width: 820px) {
  .adm-vehicle-search__fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.adm-vehicle-search__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.adm-vehicle-search__field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--adm-color-text-soft);
}

.adm-vehicle-search__field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--adm-color-primary);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--adm-color-primary);
  /* Neutraliza un text-transform:uppercase heredado del tema (el texto
     fuente ya está escrito en minúscula/capitalizado normal en PHP —
     "Selecciona…" — pero se veía todo en mayúsculas). */
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230071BC' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  padding-right: 34px;
}

.adm-vehicle-search__field select:disabled {
  background-color: var(--adm-color-bg-alt);
  border-color: var(--adm-color-border);
  color: #aaa;
  cursor: not-allowed;
}

.adm-vehicle-search__field select:focus {
  outline: none;
  border-color: var(--adm-color-primary-dark);
}

/* Gris en estado normal, no seleccionado — el propio navegador aplica su
   resaltado nativo (azul de sistema) al pasar el mouse o navegar con
   teclado; no hay forma fiable de estilizar :hover en <option> de un
   <select> nativo entre navegadores (lo renderiza el sistema operativo,
   no el motor CSS de la página), así que no se declara aquí. */
.adm-vehicle-search__field select option {
  color: var(--adm-color-text);
}

/* Combobox propio (Marca/Modelo/Año-Combustible): cerrado se ve y se
   comporta como un <select> normal — un botón "trigger" con el valor
   elegido (o el placeholder) y una flechita, NO un input de texto
   editable siempre visible. Al hacer clic se abre un panel flotante con
   SOMBRA que contiene, en este orden: (1) un campo de búsqueda propio
   (con su propio fondo/borde, distinto al de las opciones) y (2) debajo,
   la lista de opciones con scroll — agrupada de a 5 con un botón
   "Ver más" en vez de listar todo de una. Reemplaza un <select> nativo
   con ~88 marcas, que obligaba a scrollear un menú gigante sin poder
   buscar por texto (problema real confirmado en el sitio). */
.adm-combobox {
  position: relative;
}

/* Selector reforzado (.adm-combobox button.clase) para ganar sobre
   estilos genéricos de <button> del tema/WooCommerce que puedan aplicar
   fondo/color con más especificidad que una sola clase — el trigger se
   veía con fondo azul sólido y texto blanco en vez de fondo blanco y
   texto gris legible (mismo tipo de bug ya visto en el título de la
   card). */
.adm-combobox button.adm-combobox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--adm-color-primary);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--adm-color-text);
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.adm-combobox__trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-combobox__trigger.is-placeholder .adm-combobox__trigger-text {
  color: var(--adm-color-text-soft);
  font-weight: 600;
}

.adm-combobox__trigger-arrow {
  flex: none;
  font-size: 0.75rem;
  color: var(--adm-color-primary);
  transition: transform var(--adm-transition);
}

.adm-combobox.is-open .adm-combobox__trigger-arrow {
  transform: rotate(180deg);
}

.adm-combobox__trigger:disabled {
  background: var(--adm-color-bg-alt);
  border-color: var(--adm-color-border);
  color: #aaa;
  cursor: not-allowed;
}

.adm-combobox__trigger:disabled .adm-combobox__trigger-text,
.adm-combobox__trigger:disabled .adm-combobox__trigger-arrow {
  color: #aaa;
}

.adm-combobox__trigger:focus {
  outline: none;
  border-color: var(--adm-color-primary-dark);
}

.adm-combobox.is-open .adm-combobox__trigger {
  border-color: var(--adm-color-primary);
}

.adm-combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--adm-color-border);
  border-radius: var(--adm-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

/* Campo de búsqueda: elemento propio dentro del panel, con su propio
   borde completo (no solo inferior) para que se lea como un control
   separado de la lista de opciones de abajo, igual que la referencia
   visual (input con borde propio, opciones en texto liso sin fondo
   alterno). Selector reforzado (input.clase) por el mismo motivo que el
   trigger y las opciones: ganar sobre estilos de <input> del tema. */
.adm-combobox__panel input.adm-combobox__search {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 9px 12px;
  border: 1.5px solid var(--adm-color-border);
  border-radius: var(--adm-radius-sm);
  background: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  /* !important: el texto tecleado quedaba invisible (heredaba un color
     con más especificidad que el resto de reglas reforzadas de este
     archivo no lograba vencer) — el mismo tipo de override del tema ya
     visto en el trigger/opciones del combobox y el título de la card,
     pero esta vez ni el selector reforzado (input.clase) alcanzó. */
  color: var(--adm-color-text) !important;
}

.adm-combobox__panel input.adm-combobox__search::placeholder {
  color: var(--adm-color-text-soft);
  opacity: 1;
}

.adm-combobox__panel input.adm-combobox__search:focus {
  outline: none;
  border-color: var(--adm-color-primary);
}

.adm-combobox__options {
  max-height: 220px;
  overflow-y: auto;
}

/* Selector reforzado (.adm-combobox__options button.clase) para ganar
   sobre estilos genéricos de <button> del tema — mismo problema de
   especificidad ya visto en el trigger: el panel se veía con fondo azul
   sólido y texto blanco en vez de fondo blanco y texto gris legible. */
.adm-combobox__options button.adm-combobox__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--adm-color-text);
  cursor: pointer;
}

.adm-combobox__option:hover,
.adm-combobox__option.is-selected {
  background: var(--adm-color-bg-alt);
  color: var(--adm-color-primary);
}

.adm-combobox__options button.adm-combobox__more {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  border: none;
  border-top: 1px solid var(--adm-color-border);
  background: var(--adm-color-bg-alt);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--adm-color-primary);
  cursor: pointer;
}

.adm-combobox__more:hover {
  background: #eef2f6;
}

.adm-combobox__empty {
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--adm-color-text-soft);
}

.adm-vehicle-search__actions {
  margin-top: 18px;
}

/* Selector reforzado (.adm-vehicle-search button.clase) para ganar sobre
   estilos genéricos de <button> del tema, mismo problema de especificidad
   ya visto en el resto del combobox — en :hover el tema aplicaba su
   propio border-radius con más peso, dando un radio distinto entre
   estado normal y hover. border-radius se fija explícito en AMBOS
   estados para que no dependa de heredar el mismo valor. */
.adm-vehicle-search button.adm-btn,
.adm-vehicle-search button.adm-btn:hover:not(:disabled) {
  border-radius: 999px;
}

.adm-vehicle-search button.adm-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--adm-color-primary);
  color: #fff;
  border: 2px solid var(--adm-color-primary);
  font-weight: 600;
  padding: 12px 28px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all var(--adm-transition);
}

.adm-vehicle-search button.adm-btn:hover:not(:disabled) {
  background: var(--adm-color-primary-dark);
  border-color: var(--adm-color-primary-dark);
}

.adm-vehicle-search .adm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.adm-vehicle-search__status {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--adm-color-primary);
  min-height: 1em;
}