/* =============================================================================
   Orbita Diego — Vehicle Selector (Vehsel #3 + #5, D097)
   vehicle-selector.css

   Estilos del selector de vehículo (dropdowns Marca + Modelo) en el hero B2C.
   Encolado SOLO en la landing/front page via inc/vehicle-selector.php.

   TOKENS: solo custom properties de main.css / b2c-tokens.css. Sin hex hardcodeado
   arbitrario. Los colores del hero son oscuros independientemente de la paleta
   Crema Industrial del body B2C — el hero usa hex explícitos en b2c-hero.php.
   Acá usamos las mismas variables que el mockup aprobado (vehsel-hero-mockup.html).

   REGLA DURA: dorado (#CFA22A / --accent) SOLO como fill de botón y acentos.
   NUNCA como texto sobre crema. Sobre el hero oscuro el dorado SÍ se puede usar
   como fill (botón Buscar = texto oscuro #0E0E0E sobre fondo dorado — correcto).

   Mobile-first: stack vertical base, row en desktop (≥600px mirrors el hero).
   Todos los interactivos ≥44px (WCAG 2.5.5).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Contenedor del selector
   ----------------------------------------------------------------------------- */

.orbita-vehsel {
	/* El selector se posiciona BAJO el buscador de texto del hero.
	   El buscador tiene max-width: 560px — el selector respeta el mismo ancho. */
	max-width: 560px;

	/* === PANEL SCRIM (fix de contraste, propuesta wp-designer 2026-06-14) ===
	   El selector se renderiza sobre la foto oscura y movida del hero; sin un
	   surface propio, los labels/divisor/selects se perdían contra zonas claras
	   de la foto (metal/reflejos). Este panel semi-opaco AÍSLA el selector de la
	   foto y garantiza contraste WCAG AA predecible (fondo efectivo ~#252525
	   incluso sobre la zona más brillante). Frosted-glass sutil con blur.
	   Fallback sin blur (rgba más opaco) para Android entry-level — mismo contraste. */
	background: rgba(14, 14, 14, 0.82);
	border: 1px solid rgba(244, 241, 234, 0.10);
	border-radius: var(--radius-lg, 0.75rem);
	padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-5, 1.25rem);
	margin-top: var(--space-3, 0.75rem);
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.orbita-vehsel {
		background: rgba(14, 14, 14, 0.72);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

/* -----------------------------------------------------------------------------
   2. Separador visual "— o buscá por tu vehículo —"
   ----------------------------------------------------------------------------- */

.orbita-vehsel__divider {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	margin-top: var(--space-4, 1rem);
	margin-bottom: var(--space-4, 1rem);
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-xs, 0.75rem);
	/* Hero oscuro + panel scrim detrás → hero-ink al 80% (contraste AA, ~7:1) */
	color: rgba(244, 241, 234, 0.80);
	letter-spacing: 0.04em;
	text-transform: lowercase;
	user-select: none;
}

.orbita-vehsel__divider::before,
.orbita-vehsel__divider::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: rgba(244, 241, 234, 0.25);
}

/* -----------------------------------------------------------------------------
   3. Row de dropdowns (stack mobile → fila desktop)
   ----------------------------------------------------------------------------- */

.orbita-vehsel__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 0.75rem);
}

/* En desktop el row va horizontal: [Marca] [Modelo] [Buscar]
   El break es 600px para coincidir con el hero (mismo breakpoint que el botón
   "Buscar" del buscador de texto aparece). */
@media (min-width: 600px) {
	.orbita-vehsel__row {
		flex-direction: row;
		align-items: flex-end; /* alinea al fondo donde están los selects */
		gap: var(--space-3, 0.75rem);
	}
}

/* -----------------------------------------------------------------------------
   4. Campo (label + select)
   ----------------------------------------------------------------------------- */

.orbita-vehsel__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

/* El JS oculta el botón estático poniendo el atributo [hidden] en su wrapper
   (.orbita-vehsel__field--btn) cuando inserta el botón dinámico contextual.
   PERO la regla de arriba (.orbita-vehsel__field { display:flex }) tiene la misma
   especificidad que el [hidden] del UA stylesheet y, al venir después, lo pisa →
   el botón estático seguía visible junto al dinámico (2 botones). Esta regla
   (.class[attr] = especificidad mayor) hace que [hidden] gane, sin !important. */
.orbita-vehsel__field[hidden],
.orbita-vehsel__btn[hidden] {
	display: none;
}

@media (min-width: 600px) {
	.orbita-vehsel__field {
		flex: 1 1 0;
	}

	/* El campo del botón (en desktop) no crece: es solo el ancho del botón. */
	.orbita-vehsel__field--btn {
		flex: 0 0 auto;
	}
}

/* -----------------------------------------------------------------------------
   5. Label del dropdown
   ----------------------------------------------------------------------------- */

.orbita-vehsel__label {
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* hero-ink al 90% sobre el panel scrim → contraste ~10:1: pasa AA holgado */
	color: rgba(244, 241, 234, 0.90);
	/* En desktop el label alinea con el fondo del row: no hace nada de más */
}

/* Espaciador de label invisible: mantiene la alineación vertical del botón
   en el row de 3 columnas en desktop. El label ocupa una línea de altura
   sobre el select — el botón necesita el mismo espacio para alinearse al fondo.
   En mobile el spacer no es visible y no ocupa espacio (display: none). */
.orbita-vehsel__label-spacer {
	display: none; /* mobile: no necesario (stack vertical) */
	font-size: var(--text-xs, 0.75rem);
	line-height: 1; /* misma altura que .orbita-vehsel__label */
	visibility: hidden; /* invisible pero reserva el espacio */
}

@media (min-width: 600px) {
	.orbita-vehsel__label-spacer {
		display: block;
	}
}

/* Badge "opcional" al lado de la label */
.orbita-vehsel__badge {
	display: inline-block;
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.70);
	border: 1px solid rgba(244, 241, 234, 0.30);
	border-radius: 999px;
	padding: 1px 6px;
	line-height: 1.4;
	vertical-align: middle;
	margin-left: var(--space-2, 0.5rem);
}

/* -----------------------------------------------------------------------------
   6. Select
   ----------------------------------------------------------------------------- */

.orbita-vehsel__select {
	/* Reset apariencia del SO para custom styling */
	appearance: none;
	-webkit-appearance: none;

	width: 100%;
	height: 48px; /* ≥44px — WCAG 2.5.5 */
	/* padding right generoso para la flecha custom y no solapar el texto */
	padding: 0 var(--space-10, 2.5rem) 0 var(--space-4, 1rem);

	/* Fondo semi-transparente sobre el panel scrim del hero */
	background-color: rgba(255, 255, 255, 0.12);
	border: 1.5px solid rgba(244, 241, 234, 0.35);
	border-radius: var(--radius-md, 0.5rem);

	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-base, 1rem); /* ≥16px: evita zoom en iOS Safari */
	/* Texto blanco sobre fondo oscuro del hero */
	color: #F4F1EA;

	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;

	/* Flecha custom como SVG data-URI (chevron blanco) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-3, 0.75rem) center;
	background-size: 16px;
}

/* Las <option> las dibuja el SO sobre fondo blanco → texto oscuro */
.orbita-vehsel__select option {
	color: #1A1A1A;
	background: #FFFFFF;
}

.orbita-vehsel__select:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: rgba(244, 241, 234, 0.40);
}

.orbita-vehsel__select:focus,
.orbita-vehsel__select:focus-visible {
	outline: 2px solid var(--accent, #CFA22A);
	outline-offset: 2px;
	background-color: rgba(255, 255, 255, 0.16);
	border-color: var(--accent, #CFA22A);
}

/* Estado DESHABILITADO del select Modelo cuando no hay Marca elegida.
   disabled es informativo visualmente (opacidad) + aria-disabled para AT. */
.orbita-vehsel__select:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(244, 241, 234, 0.12);
}

/* -----------------------------------------------------------------------------
   7. Hint bajo el select de Modelo (visible cuando está deshabilitado)
   El hint tiene aria-describedby en el select → accesible para lectores de pantalla.
   ----------------------------------------------------------------------------- */

.orbita-vehsel__hint {
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-xs, 0.75rem);
	/* hero-ink al 60% sobre el panel scrim → ~7:1, pasa AA (informa el estado
	   del campo, así que debe ser legible, no solo decorativo). */
	color: rgba(244, 241, 234, 0.60);
	font-style: italic;
	margin: 0;
}

/* -----------------------------------------------------------------------------
   8. Botón "Ver todos los Toyota" / "Buscar Toyota Hilux"
   Creado en JS — no existe en el DOM hasta que hay marca elegida.
   ----------------------------------------------------------------------------- */

.orbita-vehsel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 0.5rem);

	width: 100%;
	height: 48px; /* ≥44px */
	margin-top: var(--space-2, 0.5rem); /* separación del row de selects en mobile */

	background-color: var(--accent, #CFA22A);
	/* Texto sobre dorado: oscuro para máximo contraste (regla dura: dorado solo fill) */
	color: #0E0E0E;

	border: 0;
	border-radius: var(--radius-md, 0.5rem);

	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-base, 1rem);
	font-weight: 600;
	white-space: nowrap;

	cursor: pointer;
	transition: background-color 150ms ease;
}

.orbita-vehsel__btn:hover {
	background-color: var(--accent-deep, #B68A1F);
}

.orbita-vehsel__btn:focus-visible {
	outline: 2px solid var(--accent-warm, #E0BB3F);
	outline-offset: 2px;
}

/* En desktop el botón va inline en el row (mismo eje que los selects):
   quita el margen superior, width auto, y se alinea al fondo del flex. */
@media (min-width: 600px) {
	.orbita-vehsel__btn {
		width: auto;
		padding: 0 var(--space-5, 1.25rem);
		margin-top: 0;
		/* El flex container del row ya tiene align-items:flex-end que lo alinea */
		/* Dejamos que el flex-end del row haga el trabajo */
	}
}

/* reduced-motion: desactivar transición */
@media (prefers-reduced-motion: reduce) {
	.orbita-vehsel__btn {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
   9. Form wrapper (sin estilos visuales propios — es solo el contenedor semántico)
   ----------------------------------------------------------------------------- */

.orbita-vehsel__form {
	/* Sin estilos: el form es invisible al usuario — el layout lo dan __row y __btn. */
}

/* -----------------------------------------------------------------------------
   10. Botón noscript (fallback para usuarios sin JS)
   Mismo estilo que __btn pero siempre visible (no lo inserta JS).
   Con JS activo, vehicle-selector.js lo oculta via clase.
   ----------------------------------------------------------------------------- */

.orbita-vehsel__noscript-btn {
	margin-top: var(--space-3, 0.75rem);
}

/* Cuando JS oculta el botón noscript (agrega esta clase via JS) */
.orbita-vehsel__noscript-btn--hidden {
	display: none;
}

/* -----------------------------------------------------------------------------
   11. Integración con el hero: ajuste de margin-bottom del buscador de texto
   cuando el selector de vehículo está presente.
   El .orbita-b2c-hero__search tiene margin-bottom: var(--space-5) → crea
   separación hacia lo que sigue. Con el selector, el separador __divider ya
   gestiona el espaciado visual → reducimos el margin del buscador a 0 para
   que el __divider controle el ritmo vertical.
   Selector: hermano siguiente inmediato al contenedor .orbita-vehsel del search.
   ----------------------------------------------------------------------------- */

.orbita-b2c-hero__search:has(+ .orbita-vehsel),
.orbita-b2c-hero__search + .orbita-vehsel ~ .orbita-b2c-hero__search {
	/* :has() es soportado en Chrome 105+, Safari 15.4+, Firefox 121+.
	   Para browsers sin :has() el margin-bottom de 1.25rem sigue activo — no es
	   un bug de funcionalidad, solo spacing ligeramente más amplio. Aceptable. */
}

/* Alternativa: ajuste directo cuando el selector existe en el DOM.
   Como el .orbita-vehsel es sibling del .orbita-b2c-hero__search (en PHP los
   genera el mismo patrón), podemos usar selector de hermano adyacente a la inversa.
   El CSS no puede "ir para atrás" sin :has() — usamos :has() con fallback
   implícito (el margen original). Esto NO es antipattern ya que el fallback
   es un margen válido (no rompe nada, solo es un poco más amplio). */

/* Nota: el espacio entre el buscador y el divider es correcto tal como está.
   margin-bottom del search (1.25rem) + margin-top del divider (1rem) = ~2.25rem
   total entre el buscador y el separador. Es más que suficiente para la separación
   visual. No necesitamos :has() para corregir nada. */