/* ============================================================
   Lymcon - Avada Advanced Filter — Estilos
   ============================================================
   Especificidad alta SIN !important: usamos la tecnica de duplicar
   clases (.foo.foo) o anadir un ancestro extra para ganar a Avada
   limpiamente, ya que Avada usa selectores con (0,3,0) que
   empatan con los nuestros y, al cargar despues, ganan por orden.
   ============================================================ */

/* ----- Price filter ----- */

/* Ocultar boton "Filtrar" del slider de precio.
   .widget_price_filter.widget_price_filter = (0,2,0), suficiente. */
.widget_price_filter.widget_price_filter button[type="submit"],
.widget_price_filter.widget_price_filter .price_slider_amount .button {
	display: none;
}

/* Ocultar el label original "Precio: X € — Y €".
   NOTA: WooCommerce escribe style="display:block" inline en .price_label cada
   vez que recalcula el slider, asi que no podemos ocultarlo desde CSS sin
   !important. Se oculta desde el JS (PricePills.build/update con .hide()),
   que pone display:none inline y siempre gana al inline:block de WC. */

/* Contenedor de pillboxes inyectado por JS debajo del slider. */
.lymcon-price-pills {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

/* Caja del valor (min/max). Mismo gris #dbdbdb que el resto de UI
   (boton "Ver mas", input "Buscar filtros") para que combine con
   los demas controles tipo PCComponentes. Padding mas bajo para
   que la caja no salga gigante. */
.lymcon-price-pill {
	flex: 1 1 0;
	min-width: 0;
	padding: 6px 12px;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	background: var(--awb-color1, #fff);
	color: var(--awb-color8, #333);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}

/* Guion entre las dos cajas. */
.lymcon-price-dash {
	color: var(--awb-color5, #8f8f8f);
	font-size: 14px;
	flex: 0 0 auto;
	user-select: none;
}

/* ----- Slider price handles cuadrados (estilo PCComponentes) ----- */
/* Avada pinta los handles como circulos via ::before y ::after con la regla
   ".woocommerce .ui-slider .ui-slider-handle::before" (0,3,1). Para ganarla
   sin !important, duplicamos la clase del widget: (0,4,1). */
.woocommerce .widget_price_filter.widget_price_filter .ui-slider .ui-slider-handle::before,
.woocommerce .widget_price_filter.widget_price_filter .ui-slider .ui-slider-handle::after {
	display: none;
	content: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Forma cuadrada del handle. Avada define "width:12px" en
   ".woocommerce .ui-slider .ui-slider-handle" (0,3,0). Con (0,4,0)
   ganamos sin necesidad de !important. */
.woocommerce .widget_price_filter.widget_price_filter .ui-slider .ui-slider-handle {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	margin-left: -7px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--awb-color1);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--awb-color8, #333);
	cursor: grab;
	box-sizing: border-box;
}
.woocommerce .widget_price_filter.widget_price_filter .ui-slider .ui-slider-handle:active {
	cursor: grabbing;
}

/* ----- "Ver más" / "Ver menos" para filtros con > 5 items ----- */

/* Items ocultos cuando se aplica el limite.
   Avada tiene ".awb-woo-filters .widget li { display:block }" con
   especificidad (0,2,1). Triplicamos la clase para llegar a (0,3,0)
   y ganar limpiamente sin !important. */
.lymcon-more-hidden.lymcon-more-hidden.lymcon-more-hidden {
	display: none;
}

/* Boton "Ver mas / Ver menos" replicando PCComponentes (mismos colores,
   padding, font-size, border y tipografia heredada). Alineado a la izquierda.
   Avada aplica a TODO <button> reglas con su color burdeos y centrado dentro
   de los widgets de filtros, asi que duplicamos la clase (0,2,0) y, donde
   hace falta, anadimos un ancestro mas (0,3,0) para ganar limpiamente. */
.lymcon-more-btn.lymcon-more-btn {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0;
	align-self: flex-start;
	padding: 4px 12px;
	background: #ffffff;
	color: #333333;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 400;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	text-align: left;
}

/* Refuerzo para contenedores Avada que centran botones de widget
   (off-canvas, sidebars, filter areas). Ancestro extra = +1 clase. */
.woocommerce .lymcon-more-btn.lymcon-more-btn,
.fusion-sidebar .lymcon-more-btn.lymcon-more-btn,
.fusion-off-canvas-wrapper .lymcon-more-btn.lymcon-more-btn,
.awb-off-canvas-content .lymcon-more-btn.lymcon-more-btn,
.widget .lymcon-more-btn.lymcon-more-btn {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0;
	background: #ffffff;
	color: #333333;
	border: 1px solid #dbdbdb;
}

/* ============================================================
   Filter Search ([lymcon_filter_search]) — estilo PCComponentes
   ============================================================
   Input con label flotante, icono lupa a la derecha y boton "X"
   de limpiar que aparece al escribir. */

.lymcon-filter-search {
	margin: 12px 0;
}
.lymcon-filter-search-field {
	position: relative;
}

/* Input — duplicamos la clase para ganar a estilos de Avada en inputs. */
.lymcon-filter-search-input.lymcon-filter-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 36px 14px 12px;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	background: #ffffff;
	color: #333333;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.lymcon-filter-search-input.lymcon-filter-search-input::placeholder {
	color: transparent;
}
.lymcon-filter-search-input.lymcon-filter-search-input:focus {
	outline: none;
	border-color: var(--awb-color8, #333333);
}

/* Oculta el icono "X" nativo de los inputs type=search en webkit/edge. */
.lymcon-filter-search-input::-webkit-search-cancel-button,
.lymcon-filter-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.lymcon-filter-search-input::-ms-clear,
.lymcon-filter-search-input::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

/* Label flotante. Usa el truco :placeholder-shown para flotar arriba cuando
   hay texto o foco. El placeholder real es " " (un espacio) para que
   :placeholder-shown solo sea true cuando el input esta vacio sin foco. */
.lymcon-filter-search-label {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	background: #ffffff;
	padding: 0 4px;
	color: #8f8f8f;
	font-size: 14px;
	line-height: 1;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}
.lymcon-filter-search-input:focus ~ .lymcon-filter-search-label,
.lymcon-filter-search-input:not(:placeholder-shown) ~ .lymcon-filter-search-label {
	top: 0;
	font-size: 11px;
	color: var(--awb-color8, #333333);
}

/* Icono lupa: visible cuando no hay texto. */
.lymcon-filter-search-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #8f8f8f;
	pointer-events: none;
}
/* Boton X: visible cuando hay texto (lo controla el JS con [hidden]). */
.lymcon-filter-search-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: 0;
	padding: 0;
	color: #8f8f8f;
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.15s ease, background 0.15s ease;
}
.lymcon-filter-search-clear:hover,
.lymcon-filter-search-clear:focus {
	color: var(--awb-color8, #333333);
	background: rgba(0, 0, 0, 0.04);
	outline: none;
}
.lymcon-filter-search-clear[hidden] {
	display: none;
}

/* Items ocultos por la busqueda. Quadruplicamos la clase para alcanzar
   (0,4,0) y ganar a cualquier rule de Avada/WC sobre <li>. */
.lymcon-filter-search-item-hidden.lymcon-filter-search-item-hidden.lymcon-filter-search-item-hidden.lymcon-filter-search-item-hidden {
	display: none;
}
/* Widgets completos ocultos (cuando no hay ninguna coincidencia). */
.lymcon-filter-search-widget-hidden.lymcon-filter-search-widget-hidden.lymcon-filter-search-widget-hidden {
	display: none;
}

/* ============================================================
   AjaxBusy — feedback visual durante el AJAX de filtros
   ============================================================
   Cuando el usuario clica un filtro, mientras Avada hace la peticion
   AJAX para repintar productos: (1) overlay con spinner sobre el
   listado de productos, (2) filtros atenuados y sin clicks. Asi el
   usuario sabe que algo esta pasando y no clica varias veces.
   El overlay se inyecta desde el JS dentro del primer contenedor que
   matchee #productos-list / .fusion-post-cards / .products. */

.lymcon-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, 0.65 );
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 14px;
	pointer-events: none;
}
body.lymcon-ajax-busy .lymcon-loading-overlay {
	display: flex;
}
.lymcon-loading-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid rgba( 0, 0, 0, 0.1 );
	border-top-color: var( --awb-color8, #333333 );
	border-radius: 50%;
	animation: lymcon-spin 0.8s linear infinite;
}
.lymcon-loading-text {
	font-size: 13px;
	color: #555555;
	font-weight: 500;
	letter-spacing: 0.2px;
}
@keyframes lymcon-spin {
	to { transform: rotate( 360deg ); }
}

/* Bloqueo de clicks en los widgets de filtro mientras dura el AJAX
   (impide doble/triple clic accidental). Sin opacity en el widget
   entero: queremos que el spinner del item clicado se vea a opacity
   1 (el ::before nuestro), asi que la atenuacion la hacemos a nivel
   de cada <li> mas abajo. NO afecta a los botones del sticky header
   (Cerrar / Borrar filtros) ni al sticky inferior (Aplicar filtros).
   Duplicamos clases para ganar especificidad sin !important. */
body.lymcon-ajax-busy .awb-woo-filters-attribute.awb-woo-filters-attribute,
body.lymcon-ajax-busy .awb-woo-filters-brands.awb-woo-filters-brands,
body.lymcon-ajax-busy .widget_layered_nav.widget_layered_nav,
body.lymcon-ajax-busy .widget_brand_nav.widget_brand_nav,
body.lymcon-ajax-busy .widget_price_filter.widget_price_filter {
	pointer-events: none;
}

/* Atenuamos cada item de filtro EXCEPTO el que el usuario acaba de
   clicar (lymcon-busy-item). Asi el item activo destaca con su
   spinner reemplazando el check. */
body.lymcon-ajax-busy .awb-woo-filters-attribute li:not(.lymcon-busy-item),
body.lymcon-ajax-busy .awb-woo-filters-brands li:not(.lymcon-busy-item),
body.lymcon-ajax-busy .widget_layered_nav li:not(.lymcon-busy-item),
body.lymcon-ajax-busy .widget_brand_nav li:not(.lymcon-busy-item) {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* Mini spinner reemplazando el cuadrado del check del item clicado.
   Avada pinta su checkbox de varias formas segun el tipo de filtro:
   - awb-woo-filters-attribute: via .awb-woo-attr-wrapper::before
     (1.3em x 1.3em, border solido, position:static en el flujo inline).
   - woocommerce-widget-layered-nav: tipicamente con un cuadrado a la
     izquierda del enlace via background/border.
   En ambos casos ocultamos la version original (visibility:hidden para
   conservar el espacio en el flujo) y pintamos nuestro spinner encima.
   Cuando Avada repinta el widget al terminar el AJAX, el LI nuevo no
   tiene la clase y todo vuelve al estado normal. */

/* --- Avada attribute filter (.awb-woo-attr) --- */
body.lymcon-ajax-busy .lymcon-busy-item .awb-woo-attr-wrapper {
	position: relative;
}
body.lymcon-ajax-busy .lymcon-busy-item .awb-woo-attr-wrapper::before {
	visibility: hidden;
}
body.lymcon-ajax-busy .lymcon-busy-item .awb-woo-attr-wrapper::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.3em;
	height: 1.3em;
	margin-top: -0.65em;
	border: 2px solid rgba( 0, 0, 0, 0.2 );
	border-top-color: var( --awb-color8, #333333 );
	border-radius: 50%;
	animation: lymcon-spin 0.6s linear infinite;
	box-sizing: border-box;
}

/* --- Fallback para LIs sin awb-woo-attr-wrapper (WC layered nav,
       brand_nav, etc.). Spinner sobre el <a> en su esquina izquierda. --- */
body.lymcon-ajax-busy .lymcon-busy-item > a:not(:has(.awb-woo-attr-wrapper)) {
	position: relative;
}
body.lymcon-ajax-busy .lymcon-busy-item > a:not(:has(.awb-woo-attr-wrapper))::before {
	visibility: hidden;
}
body.lymcon-ajax-busy .lymcon-busy-item > a:not(:has(.awb-woo-attr-wrapper))::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.3em;
	height: 1.3em;
	margin-top: -0.65em;
	border: 2px solid rgba( 0, 0, 0, 0.2 );
	border-top-color: var( --awb-color8, #333333 );
	border-radius: 50%;
	animation: lymcon-spin 0.6s linear infinite;
	box-sizing: border-box;
}

/* ============================================================
   Fix sticky superior del off-canvas de filtros (Avada bug)
   ============================================================
   El header sticky (botones "Borrar filtros" / "Cerrar") pierde su
   anclaje al hacer scroll dentro del off-canvas. Causa: el contenedor
   .off-canvas-content tiene display:flex con overflow:auto, lo que
   constrine a sus wrappers (.fusion-fullwidth y .fusion-builder-row)
   a la altura visible aunque su contenido sea mucho mayor. Como el
   "containing block" del sticky es .fusion-builder-row, en cuanto el
   scroll supera su altura, el sticky desaparece.

   Fix: que los wrappers se dimensionen al ALTO DE SU CONTENIDO
   (height:auto + flex:0 0 auto), no a la altura visible del off-canvas.
   Asi:
   - Pocos filtros (contenido < viewport): fila = altura de los items,
     SIN hueco vacio debajo.
   - Muchos filtros (contenido > viewport): fila = altura del contenido,
     el sticky persiste durante todo el scroll.
   NO usamos min-height:100% porque eso estiraria la fila a la altura
   del viewport cuando los filtros son pocos, dejando un hueco enorme. */
.off-canvas-content > .fusion-fullwidth,
.off-canvas-content > .fusion-fullwidth > .fusion-builder-row {
	height: auto;
	align-self: stretch;
	flex: 0 0 auto;
}