/**
 * MLC Toolkit — Búsqueda en vivo
 * ---------------------------------------------------------------------------
 * Campo con la lupa a la izquierda y desplegable de resultados, como en la
 * referencia del header.
 */

.mlc-search {
	position: relative !important;
	width: 100% !important;
	font-family: var(--mlc-font-family) !important;
}

.mlc-search__field {
	display: flex !important;
	align-items: center !important;
	gap: var(--mlc-space-sm) !important;
	padding: 0 var(--mlc-space-md) !important;
	background-color: var(--mlc-color-bg) !important;
	border: 1px solid transparent !important;
	transition: border-color var(--mlc-transition) !important;
}

.mlc-search__field:focus-within {
	border-color: var(--mlc-color-border) !important;
}

.mlc-search__icon {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	color: var(--mlc-color-text-soft) !important;
}

.mlc-search__input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 46px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-base) !important;
	color: var(--mlc-color-text) !important;
	appearance: none !important;
}

.mlc-search__input:focus {
	outline: none !important;
}

.mlc-search__input::placeholder {
	color: var(--mlc-color-text) !important;
	opacity: 1 !important;
}

.mlc-search__input::-webkit-search-cancel-button {
	display: none !important;
}

.mlc-search__clear {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	padding: 4px !important;
	border: 0 !important;
	background: none !important;
	color: var(--mlc-color-text-soft) !important;
	cursor: pointer !important;
}

/* El `display` de arriba lleva `!important` y pisaba el atributo `hidden`:
   la X salía siempre, con el campo vacío. */
.mlc-search__clear[hidden] {
	display: none !important;
}

.mlc-search__clear:hover {
	color: var(--mlc-color-text) !important;
}

.mlc-search__submit {
	flex: 0 0 auto !important;
	height: 34px !important;
	padding: 0 14px !important;
	border: 0 !important;
	background-color: var(--mlc-color-text) !important;
	color: var(--mlc-color-white) !important;
	font-family: inherit !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-tag) !important;
	cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   Desplegable de resultados
   -------------------------------------------------------------------------- */
.mlc-search__panel {
	position: absolute !important;
	z-index: var(--mlc-z-dropdown) !important;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	right: 0 !important;
	max-height: min(70vh, 460px) !important;
	overflow-y: auto !important;
	background-color: var(--mlc-color-white) !important;
	border: 1px solid var(--mlc-color-border) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

.mlc-search__panel[hidden] {
	display: none !important;
}

/* Subir el z-index del panel no basta si un contenedor de Elementor que lo
   envuelve crea su propio contexto de apilamiento (un z-index, un sticky) o
   recorta con `overflow: hidden`: el panel no puede salir de él por mucho
   z-index que lleve, y la barra del menú, que viene después, lo tapa.
   Mientras el desplegable está abierto, y solo entonces, los contenedores
   que lo envuelven suben por encima del resto del header y dejan de recortar.
   Cerrado no se toca nada, así que el maquetado del header no cambia. */
:is(.elementor-element, .elementor-container, .elementor-column-wrap, .elementor-widget-wrap, .elementor-widget-container, .e-con-inner):has(.mlc-search__panel:not([hidden])) {
	z-index: var(--mlc-z-dropdown) !important;
	overflow: visible !important;
}

.mlc-search:has(.mlc-search__panel:not([hidden])) {
	z-index: var(--mlc-z-dropdown) !important;
}

.mlc-search__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-search__item {
	display: flex !important;
	align-items: center !important;
	gap: var(--mlc-space-md) !important;
	padding: 10px var(--mlc-space-md) !important;
	border-bottom: 1px solid var(--mlc-color-line) !important;
	color: var(--mlc-color-text) !important;
	text-decoration: none !important;
	transition: background-color var(--mlc-transition) !important;
}

.mlc-search__item:hover,
.mlc-search__item.is-active {
	background-color: var(--mlc-color-bg) !important;
	color: var(--mlc-color-text) !important;
}

.mlc-search__thumb {
	flex: 0 0 48px !important;
	width: 48px !important;
	height: 48px !important;
	object-fit: cover !important;
}

.mlc-search__info {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
}

.mlc-search__brand {
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-brand) !important;
	letter-spacing: var(--mlc-ls-brand) !important;
	text-transform: uppercase !important;
	color: var(--mlc-color-text-soft) !important;
}

.mlc-search__name {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: 14px !important;
}

.mlc-search__price {
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 13px !important;
	color: var(--mlc-color-text) !important;
}

.mlc-search__price del {
	opacity: 0.6 !important;
	font-weight: var(--mlc-fw-regular) !important;
}

.mlc-search__price ins {
	background: none !important;
	text-decoration: none !important;
	color: var(--mlc-color-sale) !important;
}

.mlc-search__all {
	display: block !important;
	padding: 12px var(--mlc-space-md) !important;
	background-color: var(--mlc-color-bg) !important;
	color: var(--mlc-color-text) !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: var(--mlc-fs-small) !important;
	text-align: center !important;
	text-decoration: underline !important;
}

.mlc-search__all:hover {
	color: var(--mlc-color-accent) !important;
}

.mlc-search__empty {
	padding: var(--mlc-space-lg) var(--mlc-space-md) !important;
	text-align: center !important;
}

.mlc-search__empty-title {
	margin: 0 0 6px !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: var(--mlc-fs-base) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

.mlc-search__empty-text {
	margin: 0 !important;
	font-size: var(--mlc-fs-small) !important;
	color: var(--mlc-color-text-soft) !important;
}

/* ==========================================================================
   Lupa y diálogo en móvil y tablet (hasta 1024 px)
   --------------------------------------------------------------------------
   En escritorio el contenedor no existe a efectos visuales: la lupa y el
   botón de cerrar se ocultan y el formulario se ve en su sitio como siempre.
   Hasta 1024 px solo queda la lupa, con el mismo aspecto que los iconos de
   favoritos y carrito; al pulsarla, el diálogo se mueve al final de <body>
   (un header sticky de Elementor rompería el `position: fixed`) y se abre.
   ========================================================================== */
.mlc-search-wrap {
	position: relative !important;
	width: 100% !important;
}

/* Con el contenedor delante: `.mlc-header-action` (minicart.css) también
   declara `display` y puede cargarse después. */
.mlc-search-wrap .mlc-search-toggle,
.mlc-search-wrap .mlc-search-dialog__close {
	display: none !important;
}

.mlc-search-dialog,
.mlc-search-dialog__box {
	width: 100% !important;
}

.mlc-no-scroll {
	overflow: hidden !important;
}

@media (max-width: 1024px) {
	/* La lupa, a la derecha de su columna: junto a los demás iconos. */
	.mlc-search-wrap {
		display: flex !important;
		width: fit-content !important;
		margin-left: auto !important;
	}

	/* La lupa: mismas medidas y colores que `.mlc-header-action`, repetidas
	   aquí para no depender de que el mini-carrito esté activo. */
	.mlc-search-wrap .mlc-search-toggle {
		display: inline-flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 4px !important;
		padding: 4px !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: var(--mlc-color-text) !important;
		font-family: var(--mlc-font-family) !important;
		font-weight: var(--mlc-fw-bold) !important;
		font-size: var(--mlc-fs-small) !important;
		line-height: 1 !important;
		text-transform: none !important;
		cursor: pointer !important;
		transition: color var(--mlc-transition) !important;
	}

	.mlc-search-toggle:hover,
	.mlc-search-toggle:focus-visible {
		color: var(--mlc-color-accent) !important;
		background: none !important;
	}

	.mlc-search-toggle .mlc-header-action__icon {
		position: relative !important;
		display: inline-flex !important;
	}

	/* Cerrado: fuera de la vista. */
	.mlc-search-dialog {
		display: none !important;
	}

	/* Abierto: capa a pantalla completa con la caja arriba. */
	.mlc-search-dialog.is-open {
		position: fixed !important;
		inset: 0 !important;
		/* Por encima de todo, también de los botones flotantes de otros
		   plugins (WhatsApp), que usan el máximo: al abrir, el diálogo va al final
		   de <body> y en caso de empate gana él. */
		z-index: 2147483647 !important;
		display: block !important;
		padding: 12px !important;
		background-color: var(--mlc-color-overlay, rgba(0, 0, 0, 0.5)) !important;
		font-family: var(--mlc-font-family) !important;
		box-sizing: border-box !important;
	}

	.mlc-search-dialog__box {
		position: relative !important;
		display: flex !important;
		align-items: flex-start !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 720px !important;
		margin: 0 auto !important;
		padding: 12px !important;
		background-color: var(--mlc-color-white) !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
		box-sizing: border-box !important;
	}

	.mlc-search-dialog .mlc-search {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.mlc-search-dialog .mlc-search-dialog__close {
		display: inline-flex !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: center !important;
		width: 46px !important;
		height: 46px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: var(--mlc-color-text) !important;
		cursor: pointer !important;
	}

	.mlc-search-dialog__close:hover,
	.mlc-search-dialog__close:focus-visible {
		color: var(--mlc-color-accent) !important;
		background: none !important;
	}

	/* 16 px o más: iOS no hace zoom al enfocar el campo. */
	.mlc-search-dialog .mlc-search__input {
		font-size: 16px !important;
	}

	/* Resultados dentro de la caja, con su propio scroll. */
	.mlc-search-dialog .mlc-search__panel {
		position: static !important;
		margin-top: 8px !important;
		max-height: calc(100vh - 120px) !important;
		max-height: calc(100dvh - 120px) !important;
		box-shadow: none !important;
	}
}

@media (max-width: 600px) {
	.mlc-search-toggle .mlc-header-action__label {
		display: none !important;
	}

	.mlc-search-dialog.is-open {
		padding: 0 !important;
	}
}