/* =============================================================================
   Smart Search — dropdown de sugerencias en vivo (componente reutilizable, D096)
   -----------------------------------------------------------------------------
   Estilos del DROPDOWN que inyecta smart-search.js, compartidos por TODOS los
   buscadores del sitio (hero del home, buscador del catálogo/resultados, y
   cualquier futuro). Clases neutras `orbita-smart-suggest*` — no atadas a un
   contexto. La BARRA de cada buscador (input/botón) la estila su propio CSS;
   acá solo va el panel desplegable + la base del spinner.

   El dropdown es blanco siempre (hex explícitos): aparece tanto sobre el hero
   oscuro como sobre el fondo crema del catálogo, y debe leerse igual en ambos.

   Requisito de anclaje: el contenedor `[data-orbita-smart-search]` debe ser
   `position: relative` (el dropdown es `position: absolute`). Lo garantiza el
   CSS de cada barra.
   ============================================================================= */

.orbita-smart-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 100;
	background: #FFFFFF;
	border-radius: var(--radius-md, 0.5rem);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	/* Scroll interno en viewports bajos — el dropdown nunca debe quedar cortado
	   por el borde de la pantalla. */
	max-height: min(60vh, 420px);
	overflow-y: auto;
}

.orbita-smart-suggest[hidden] {
	display: none;
}

.orbita-smart-suggest__hint {
	margin: 0;
	padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-xs, 0.75rem);
	color: #595959;
	background: #FAF7F0;
	border-bottom: 1px solid #EFE9DC;
}

/* ── Sugerencias de término (completan la palabra que se tipea; tap rellena
      el campo, no navega). Van arriba de los productos. ───────────────────── */
.orbita-smart-suggest__term {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	width: 100%;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	cursor: pointer;
	color: #2A2A2A;
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-sm, 0.875rem);
	border-bottom: 1px solid #F2ECE0;
	-webkit-user-select: none;
	user-select: none;
}

.orbita-smart-suggest__term:hover,
.orbita-smart-suggest__term[aria-selected="true"] {
	background: #F5F1E8;
}

.orbita-smart-suggest__term-icon {
	display: inline-flex;
	color: #9A8C6E;
	flex-shrink: 0;
}

.orbita-smart-suggest__term-text {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Filas de producto (foto + nombre + precio) ──────────────────────────── */
.orbita-smart-suggest__item {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	width: 100%;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	text-decoration: none;
	color: #1A1A1A;
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

.orbita-smart-suggest__item:hover,
.orbita-smart-suggest__item[aria-selected="true"] {
	background: #F5F1E8;
}

.orbita-smart-suggest__thumb {
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: #FFFFFF;
	border-radius: 4px;
	flex-shrink: 0;
}

.orbita-smart-suggest__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--text-sm, 0.875rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.orbita-smart-suggest__price {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	white-space: nowrap;
	/* En celular el precio le robaba ancho al nombre del producto y lo truncaba
	   muy temprano (reporte 2026-06-13). Lo ocultamos en mobile — prioridad al
	   nombre — y reaparece en tablet+, donde hay lugar para ambos. */
	display: none;
}

@media (min-width: 600px) {
	.orbita-smart-suggest__price {
		display: inline;
	}
}

.orbita-smart-suggest__footer {
	display: block;
	width: 100%;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	text-align: center;
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	color: #8A6914;
	background: #FAF7F0;
	text-decoration: none;
	border-top: 1px solid #EFE9DC;
}

.orbita-smart-suggest__footer:hover,
.orbita-smart-suggest__footer[aria-selected="true"] {
	background: #F5F1E8;
}

/* ── Spinner (base): animación + tamaño. El POSICIONAMIENTO dentro de la barra
      lo define el CSS de cada buscador (su layout es propio). ─────────────── */
.orbita-smart-search__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(28, 24, 20, 0.15);
	border-top-color: var(--accent-deep, #B68A1F);
	border-radius: 50%;
	flex-shrink: 0;
	animation: orbita-smart-spin 700ms linear infinite;
}

.orbita-smart-search__spinner[hidden] {
	display: none;
}

@keyframes orbita-smart-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.orbita-smart-search__spinner {
		animation: none; /* queda como indicador estático, sigue visible */
	}
}