/* Levapan Elements — Filtro de productos */

/*
 * Ojo con la especificidad: el Theme Style del kit emite
 * `.elementor-kit-N button { … }` y `.elementor-kit-N input[type=…]` (0,2,1),
 * que pisa cualquier clase suelta: los botones salían rojos y los checkbox
 * con el borde gris del kit. Por eso las reglas de <button> e <input> van con
 * tres clases (0,3,1), igual que hace widget-thumb-slider.css con e-swiper.
 */

.lv-product-filter {
	/* Defaults; los controles del widget sobreescriben la variable, no la propiedad. */
	--lv-pf-clear-color: #898989;
	--lv-pf-clear-icon: 21px;
	--lv-pf-chevron-color: #cf1d1d;
	--lv-pf-chevron-size: 24px;
	--lv-pf-divider: #b2b2b2;
	--lv-pf-divider-width: 1px;
	--lv-pf-group-gap: 20px;
	--lv-pf-check-size: 30px;
	--lv-pf-check-radius: 5px;
	--lv-pf-check-border: #000000;
	--lv-pf-check-checked: #cf1d1d;
	--lv-pf-option-gap: 20px;
	--lv-pf-btn-color: #898989;
	--lv-pf-btn-bg: #ffffff;
	--lv-pf-btn-border: #898989;
	--lv-pf-btn-border-width: 2px;
	--lv-pf-btn-icon: 25px;

	/* Modo colapsado: botón disparador y drawer. */
	--lv-pf-trigger-color: #ffffff;
	--lv-pf-trigger-bg: #cf1d1d;
	--lv-pf-trigger-border: var(--lv-pf-trigger-bg);
	--lv-pf-trigger-border-width: 0px;
	--lv-pf-trigger-icon: 22px;
	--lv-pf-trigger-gap: 12px;
	--lv-pf-trigger-group-gap: 16px;
	--lv-pf-drawer-width: 360px;
	--lv-pf-drawer-bg: #ffffff;
	--lv-pf-drawer-backdrop: rgba(0, 0, 0, 0.5);
	--lv-pf-drawer-z: 9999;
	--lv-pf-drawer-padding: 24px 20px;
	--lv-pf-drawer-close-color: #303030;
	--lv-pf-drawer-close-size: 22px;
	--lv-pf-apply-color: #ffffff;
	--lv-pf-apply-bg: #cf1d1d;
	--lv-pf-apply-border: var(--lv-pf-apply-bg);

	/*
	 * Estados hover. Sin valor propio heredan el estado normal, así el widget
	 * se ve exactamente igual que antes hasta que se rellena el control.
	 * El borde marcado cae al color de relleno, que era el comportamiento fijo.
	 */
	--lv-pf-clear-color-hover: var(--lv-pf-clear-color);
	--lv-pf-check-border-hover: var(--lv-pf-check-border);
	--lv-pf-check-bg-hover: transparent;
	--lv-pf-check-checked-border: var(--lv-pf-check-checked);
	--lv-pf-btn-color-hover: var(--lv-pf-btn-color);
	--lv-pf-btn-bg-hover: var(--lv-pf-btn-bg);
	--lv-pf-btn-border-hover: var(--lv-pf-btn-border);
	--lv-pf-trigger-color-hover: var(--lv-pf-trigger-color);
	--lv-pf-trigger-bg-hover: var(--lv-pf-trigger-bg);
	--lv-pf-trigger-border-hover: var(--lv-pf-trigger-border);
	--lv-pf-apply-color-hover: var(--lv-pf-apply-color);
	--lv-pf-apply-bg-hover: var(--lv-pf-apply-bg);
	--lv-pf-apply-border-hover: var(--lv-pf-apply-border);

	display: flex;
	flex-direction: column;
}

/* --- Cabecera --- */

.lv-product-filter__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.elementor-element .lv-product-filter button.lv-product-filter__clear-top {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--lv-pf-clear-color);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: color 0.2s ease;
}

.elementor-element .lv-product-filter button.lv-product-filter__clear-top:hover,
.elementor-element .lv-product-filter button.lv-product-filter__clear-top:focus-visible {
	color: var(--lv-pf-clear-color-hover);
}

.lv-product-filter__clear-icon {
	display: inline-flex;
}

.lv-product-filter__clear-icon svg,
.lv-product-filter__clear-icon img {
	width: var(--lv-pf-clear-icon);
	height: auto;
}

/* --- Grupos --- */

.lv-product-filter__group {
	border-block-start: var(--lv-pf-divider-width) solid var(--lv-pf-divider);
	margin-block-start: var(--lv-pf-group-gap);
	padding-block-start: var(--lv-pf-group-gap);
}

.elementor-element .lv-product-filter button.lv-product-filter__group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: start;
	cursor: pointer;
	transition: color 0.2s ease;
}

.lv-product-filter__group-title {
	/* El tema pone white-space: nowrap en los <button>; sin esto un título
	   largo («Tiempo de preparación») empuja el chevron fuera de la caja. */
	white-space: normal;
}

.lv-product-filter__chevron {
	display: inline-flex;
	/* Sin esto, un título de grupo largo aplasta el chevron a 0. */
	flex-shrink: 0;
	color: var(--lv-pf-chevron-color);
	transition: transform 0.2s ease;
}

.lv-product-filter__chevron svg {
	width: var(--lv-pf-chevron-size);
	height: auto;
	fill: currentColor;
}

/* Colapsado: el chevron gira y la lista se oculta. */
.lv-product-filter__group-header[aria-expanded='false'] .lv-product-filter__chevron {
	transform: rotate(180deg);
}

.lv-product-filter__group-header[aria-expanded='false'] + .lv-product-filter__options {
	display: none;
}

/* --- Opciones --- */

.lv-product-filter__options {
	display: flex;
	flex-direction: column;
	gap: var(--lv-pf-option-gap);
	margin-block-start: var(--lv-pf-group-gap);
}

.lv-product-filter__option {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
}

.lv-product-filter__option-label {
	transition: color 0.2s ease;
}

/* Checkbox cuadrado del diseño; el nativo no se puede estilar sin appearance. */
.elementor-element .lv-product-filter input.lv-product-filter__check {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: var(--lv-pf-check-size);
	height: var(--lv-pf-check-size);
	margin: 0;
	padding: 0;
	border: 2px solid var(--lv-pf-check-border);
	border-radius: var(--lv-pf-check-radius);
	background: transparent;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover sobre la fila entera: el <label> envuelve checkbox y texto. */
.elementor-element .lv-product-filter .lv-product-filter__option:hover input.lv-product-filter__check:not(:checked),
.elementor-element .lv-product-filter input.lv-product-filter__check:focus-visible:not(:checked) {
	border-color: var(--lv-pf-check-border-hover);
	background: var(--lv-pf-check-bg-hover);
}

/* Marcado: relleno rojo liso, sin palomita — así lo dibuja el Figma. */
.elementor-element .lv-product-filter input.lv-product-filter__check:checked {
	background: var(--lv-pf-check-checked);
	border-color: var(--lv-pf-check-checked-border);
}

/* --- Botón inferior --- */

.elementor-element .lv-product-filter button.lv-product-filter__clear-bottom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	align-self: center;
	min-width: 282px;
	min-height: 52px;
	margin-block-start: calc(var(--lv-pf-group-gap) * 1.5);
	padding: 10px 24px;
	border: var(--lv-pf-btn-border-width) solid var(--lv-pf-btn-border);
	border-radius: 15px;
	background: var(--lv-pf-btn-bg);
	color: var(--lv-pf-btn-color);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.elementor-element .lv-product-filter button.lv-product-filter__clear-bottom:hover,
.elementor-element .lv-product-filter button.lv-product-filter__clear-bottom:focus-visible {
	border-color: var(--lv-pf-btn-border-hover);
	background: var(--lv-pf-btn-bg-hover);
	color: var(--lv-pf-btn-color-hover);
}

.lv-product-filter__btn-icon {
	display: inline-flex;
}

.lv-product-filter__btn-icon svg,
.lv-product-filter__btn-icon img {
	width: var(--lv-pf-btn-icon);
	height: auto;
}

/* --- Modo colapsado (botón + drawer lateral) --- */

/*
 * Fuera del modo colapsado los envoltorios __panel/__panel-body no generan
 * caja (display: contents): el flex del wrapper ve los mismos hijos de
 * siempre y el filtro inline queda idéntico a como era antes del drawer.
 *
 * Contrato de especificidad del colapso: render() imprime un <style> con
 * 2 clases (0,2,0) que pinta el estado de reposo antes de que cargue el JS
 * (anti-FOUC). Por eso el trigger se oculta aquí con UNA clase, y todas las
 * reglas de estado (.lv-pf--collapsed…) usan 3-4 clases para pisar al inline.
 */
.lv-product-filter__panel,
.lv-product-filter__panel-body {
	display: contents;
}

.lv-product-filter__trigger {
	display: none;
}

.lv-product-filter__backdrop,
.lv-product-filter__drawer-header,
.lv-product-filter__drawer-footer {
	display: none;
}

/* Aspecto del trigger, sin display: eso lo deciden las reglas de estado. */
.elementor-element .lv-product-filter button.lv-product-filter__trigger {
	align-items: center;
	justify-content: center;
	gap: var(--lv-pf-trigger-gap);
	align-self: flex-start;
	padding: 14px 28px;
	border: var(--lv-pf-trigger-border-width) solid var(--lv-pf-trigger-border);
	border-radius: 15px;
	background: var(--lv-pf-trigger-bg);
	color: var(--lv-pf-trigger-color);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.elementor-element .lv-product-filter button.lv-product-filter__trigger:hover,
.elementor-element .lv-product-filter button.lv-product-filter__trigger:focus-visible {
	color: var(--lv-pf-trigger-color-hover);
	background: var(--lv-pf-trigger-bg-hover);
	border-color: var(--lv-pf-trigger-border-hover);
}

.lv-product-filter__trigger-icon {
	display: inline-flex;
}

.lv-product-filter__trigger-icon svg,
.lv-product-filter__trigger-icon img {
	width: var(--lv-pf-trigger-icon);
	height: auto;
	fill: currentColor;
}

.lv-product-filter__trigger-icon i {
	font-size: var(--lv-pf-trigger-icon);
}

.lv-product-filter.lv-pf--collapsed .lv-product-filter__trigger {
	display: inline-flex;
}

/*
 * Grupo trigger + «limpiar» (opción del modo colapsado): una sola píldora con
 * dos acciones. El grupo asume el fondo/borde/radio del trigger (mismas
 * variables) y los botones internos quedan transparentes. Mismo contrato de
 * visibilidad que el trigger suelto: oculto con 1 clase (lo pisa el <style>
 * inline 0,2,0 del render) y estado colapsado con 3 clases.
 */
.lv-product-filter__trigger-group {
	display: none;
}

/* Dentro del grupo, la visibilidad la manda el grupo (0,2,0 > display:none 0,1,0). */
.lv-product-filter__trigger-group .lv-product-filter__trigger {
	display: inline-flex;
}

.lv-product-filter.lv-pf--collapsed .lv-product-filter__trigger-group {
	display: inline-flex;
}

.elementor-element .lv-product-filter .lv-product-filter__trigger-group {
	align-items: stretch;
	align-self: flex-start;
	/* Si los dos rótulos no caben (móvil estrecho), el «limpiar» baja de fila
	   dentro de la píldora en vez de desbordar el viewport. */
	max-width: 100%;
	flex-wrap: wrap;
	/* Solo horizontal: si el «limpiar» baja de fila no queremos hueco vertical. */
	column-gap: var(--lv-pf-trigger-group-gap);
	background: var(--lv-pf-trigger-bg);
	border: var(--lv-pf-trigger-border-width) solid var(--lv-pf-trigger-border);
	border-radius: 15px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 4 selectores: gana a la regla de aspecto del trigger (0,3,1) de arriba. */
.elementor-element .lv-product-filter .lv-product-filter__trigger-group button.lv-product-filter__trigger {
	background: transparent;
	border: none;
}

.elementor-element .lv-product-filter .lv-product-filter__trigger-group button.lv-product-filter__trigger:hover,
.elementor-element .lv-product-filter .lv-product-filter__trigger-group button.lv-product-filter__trigger:focus-visible {
	background: transparent;
	border: none;
}

.elementor-element .lv-product-filter button.lv-product-filter__trigger-clear {
	display: inline-flex;
	align-items: center;
	gap: var(--lv-pf-trigger-gap);
	padding: 14px 28px;
	background: transparent;
	border: none;
	color: var(--lv-pf-trigger-color);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: color 0.2s ease;
}

.elementor-element .lv-product-filter button.lv-product-filter__trigger-clear:hover,
.elementor-element .lv-product-filter button.lv-product-filter__trigger-clear:focus-visible {
	color: var(--lv-pf-trigger-color-hover);
}

/*
 * El drawer es el propio __panel puesto en fixed, SIN mover el nodo: así los
 * selectores {{WRAPPER}} de todos los controles siguen aplicando dentro.
 * Limitación conocida: si un ancestro lleva transform/filter permanente
 * (Motion Effects de Elementor), el fixed se ancla al ancestro, no al viewport.
 * Los translateX son físicos a propósito: el sitio es LTR.
 */
.lv-product-filter.lv-pf--collapsed .lv-product-filter__panel {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(var(--lv-pf-drawer-width), 90vw);
	background: var(--lv-pf-drawer-bg);
	z-index: var(--lv-pf-drawer-z);
	transform: translateX(100%);
	visibility: hidden;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
	/* visibility con retardo SOLO al cerrar: al abrir tiene que ser visible al
	   instante o el focus() al botón de cerrar cae en un nodo aún oculto. */
	transition: transform 0.3s ease, visibility 0s 0.3s;
}

.lv-product-filter.lv-pf--collapsed[data-lv-drawer-side='start'] .lv-product-filter__panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform: translateX(-100%);
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.12);
}

.lv-product-filter.lv-pf--collapsed.is-open .lv-product-filter__panel {
	transform: none;
	visibility: visible;
	transition: transform 0.3s ease, visibility 0s;
}

.lv-product-filter.lv-pf--collapsed .lv-product-filter__backdrop {
	display: block;
	position: fixed;
	inset: 0;
	background: var(--lv-pf-drawer-backdrop);
	opacity: 0;
	visibility: hidden;
	z-index: calc(var(--lv-pf-drawer-z) - 1);
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.lv-product-filter.lv-pf--collapsed.is-open .lv-product-filter__backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s;
}

.lv-product-filter.lv-pf--collapsed .lv-product-filter__drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	padding: 20px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

.elementor-element .lv-product-filter button.lv-product-filter__drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--lv-pf-drawer-close-color);
	cursor: pointer;
}

.lv-product-filter__drawer-close svg,
.lv-product-filter__drawer-close img {
	width: var(--lv-pf-drawer-close-size);
	height: auto;
	fill: currentColor;
}

.lv-product-filter__drawer-close i {
	font-size: var(--lv-pf-drawer-close-size);
}

/* El scroll vive aquí, no en el panel: el header y el footer quedan fijos. */
.lv-product-filter.lv-pf--collapsed .lv-product-filter__panel-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--lv-pf-drawer-padding);
}

.lv-product-filter.lv-pf--collapsed .lv-product-filter__drawer-footer {
	display: block;
	flex-shrink: 0;
	padding: 16px 20px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.08);
}

.elementor-element .lv-product-filter button.lv-product-filter__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 10px 24px;
	border: 2px solid var(--lv-pf-apply-border);
	border-radius: 15px;
	background: var(--lv-pf-apply-bg);
	color: var(--lv-pf-apply-color);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.elementor-element .lv-product-filter button.lv-product-filter__apply:hover,
.elementor-element .lv-product-filter button.lv-product-filter__apply:focus-visible {
	color: var(--lv-pf-apply-color-hover);
	background: var(--lv-pf-apply-bg-hover);
	border-color: var(--lv-pf-apply-border-hover);
}

body.lv-pf-drawer-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.lv-product-filter.lv-pf--collapsed .lv-product-filter__panel,
	.lv-product-filter.lv-pf--collapsed .lv-product-filter__backdrop {
		transition: none;
	}
}

/* --- Destino del scroll de los disparadores externos (data-lv-filter) --- */

/*
 * Aire para el header sticky al hacer scrollIntoView. Doble clase porque
 * widget-loop-grid.min.css de Pro trae `.elementor-widget-loop-grid
 * { scroll-margin-top: var(--auto-scroll-offset, initial) }` (0,1,0) que
 * ganaba por orden de carga. Es solo el default: el control «Margen del
 * scroll al grid» del widget emite lo mismo con `body` delante (0,2,1).
 */
.elementor-widget-loop-grid.lv-pf-scroll-target {
	scroll-margin-top: 120px;
}

/* --- Overlay de carga sobre el Loop Grid --- */

.elementor-widget-loop-grid.lv-pf-loading {
	position: relative;
}

.elementor-widget-loop-grid.lv-pf-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.6);
	z-index: 2;
}

/* --- Aviso solo-editor (misma regla que en las otras hojas del plugin) --- */

.lv-editor-notice {
	padding: 12px 16px;
	border: 1px dashed #cf1d1d;
	border-radius: 8px;
	background: #fdf3f3;
	color: #303030;
	font-size: 14px;
	line-height: 1.4;
}