/**
 * Smart Product Filters — Estilos frontend
 */
.spf-filters {
	--spf-accent: #2563eb;
	--spf-border: #e5e7eb;
	--spf-text: #1f2937;
	--spf-muted: #6b7280;
	--spf-radius: 10px;
	--spf-gap: 22px;
	--spf-font: inherit;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spf-gap);
	font-size: 15px;
	color: var(--spf-text);
	font-family: var(--spf-font);
}
/* Los campos de formulario suelen resetear la fuente: forzamos herencia */
.spf-filters input,
.spf-filters select,
.spf-filters button,
.spf-filters label {
	font-family: inherit;
}

/* =========================================================
 * DISPOSICIÓN HORIZONTAL (barra superior, estilo "filtro de productos")
 * Etiquetas repartidas a lo ancho, cada una con su flecha; al hacer clic
 * se despliega un panel debajo.
 * ====================================================== */
.spf-filters--horizontal {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--spf-border);
	border-bottom: 1px solid var(--spf-border);
}
.spf-filters--horizontal .spf-filter {
	position: relative;
	flex: 1 1 0;          /* reparte el ancho de forma uniforme */
	min-width: 0;
	border-bottom: 0;
	padding: 0;
	border-left: 1px solid var(--spf-border);
}
.spf-filters--horizontal .spf-filter:first-child {
	border-left: 0;
}
.spf-filters--horizontal .spf-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 18px 24px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.spf-filters--horizontal .spf-filter__title:hover { color: var(--spf-accent); }
.spf-filters--horizontal .spf-filter.is-open .spf-filter__title { color: var(--spf-accent); }

/* Flecha (caret) a la derecha de cada etiqueta */
.spf-filters--horizontal .spf-filter__title::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.55;
	transition: transform 0.2s ease;
}
.spf-filters--horizontal .spf-filter.is-open .spf-filter__title::after {
	transform: rotate(-135deg) translateY(-2px);
}
/* El botón "Plegable" no aplica en horizontal */
.spf-filters--horizontal .spf-toggle { display: none; }

/* Panel desplegable */
.spf-filters--horizontal .spf-filter__body {
	display: none;
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	z-index: 30;
	min-width: 260px;
	max-width: 340px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--spf-border);
	border-radius: 0 0 var(--spf-radius) var(--spf-radius);
	box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}
.spf-filters--horizontal .spf-filter.is-open .spf-filter__body { display: block; }
/* El último filtro abre el panel alineado a la derecha para no salirse */
.spf-filters--horizontal .spf-filter:last-child .spf-filter__body { left: auto; right: 0; }

/* "Ordenar por" (dropdown nativo) ocupa toda la celda */
.spf-filters--horizontal .spf-filter--orderby .spf-dropdown {
	border: 0;
	padding: 18px 24px;
	font-weight: 600;
	font-size: 15px;
	border-radius: 0;
}
/* En los desplegables horizontales (panel flotante) sí mantenemos scroll. */
.spf-filters--horizontal .spf-list { max-height: 320px; overflow-y: auto; }
.spf-filters--horizontal .spf-actions {
	align-items: center;
	padding: 0 16px;
}

/* Responsive: en móvil/tablet se apila en vertical */
@media (max-width: 880px) {
	.spf-filters--horizontal {
		flex-wrap: wrap;
		border: 0;
	}
	.spf-filters--horizontal .spf-filter {
		flex: 1 1 100%;
		border-left: 0;
		border-bottom: 1px solid var(--spf-border);
	}
	.spf-filters--horizontal .spf-filter__body {
		position: static;
		min-width: 0;
		max-width: none;
		box-shadow: none;
		border: 0;
		padding: 0 24px 18px;
	}
}

/* --- Bloque de filtro --- */
.spf-filter {
	border-bottom: 1px solid var(--spf-border);
	padding-bottom: var(--spf-gap);
}
.spf-filter:last-of-type {
	border-bottom: 0;
}
.spf-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 12px;
	cursor: default;
}
.spf-filter.is-collapsible .spf-filter__title {
	cursor: pointer;
}
.spf-toggle {
	background: none;
	border: 0;
	width: 22px;
	height: 22px;
	cursor: pointer;
	position: relative;
}
.spf-toggle::before,
.spf-toggle::after {
	content: "";
	position: absolute;
	background: var(--spf-muted);
	transition: transform 0.2s ease;
}
.spf-toggle::before { top: 10px; left: 4px; width: 14px; height: 2px; }
.spf-toggle::after { top: 4px; left: 10px; width: 2px; height: 14px; }
/* Cerrado = "+" (ambas barras); abierto = "−" (se oculta la barra vertical). */
.spf-filter.is-collapsible:not(.is-closed) .spf-toggle::after { opacity: 0; }
.spf-filter.is-closed .spf-filter__body { display: none; }

/* --- Listas --- */
.spf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.spf-option {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	color: var(--spf-text);
	transition: color 0.15s ease;
}
.spf-option:hover { color: var(--spf-accent); }
.spf-option input { accent-color: var(--spf-accent); width: 17px; height: 17px; }
.spf-count { color: var(--spf-muted); font-size: 13px; }
.spf-item.is-disabled { opacity: 0.4; pointer-events: none; }
.spf-item.is-active .spf-option { font-weight: 600; }

/* --- Color swatches --- */
.spf-list--color { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.spf-list--color .spf-option { flex-direction: column; gap: 4px; font-size: 12px; }
.spf-list--color .spf-option input { position: absolute; opacity: 0; }
.spf-swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--spf-border);
	box-shadow: inset 0 0 0 2px #fff;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.spf-list--color .spf-option:hover .spf-swatch { transform: scale(1.08); }
.spf-list--color .spf-item.is-active .spf-swatch,
.spf-list--color input:checked + .spf-swatch { border-color: var(--spf-accent); }

/* --- Dropdown --- */
.spf-dropdown {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--spf-border);
	border-radius: var(--spf-radius);
	background: #fff;
	font-size: 14px;
}

/* --- Precio --- */
.spf-price__slider { position: relative; height: 32px; }
.spf-price__track,
.spf-price__range {
	position: absolute;
	top: 14px;
	height: 4px;
	border-radius: 4px;
}
.spf-price__track { left: 0; right: 0; background: var(--spf-border); }
.spf-price__range { background: var(--spf-accent); }
.spf-price__handle {
	position: absolute;
	top: 0;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	height: 32px;
}
.spf-price__handle::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--spf-accent);
	cursor: grab;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.spf-price__handle::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--spf-accent);
	cursor: grab;
}
.spf-price__handle::-webkit-slider-runnable-track { background: none; }
.spf-price__inputs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.spf-price__label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--spf-muted);
	font-size: 13px;
}
.spf-price__input {
	width: 70px;
	padding: 6px 8px;
	border: 1px solid var(--spf-border);
	border-radius: 8px;
	font-size: 14px;
}
.spf-price__sep { color: var(--spf-muted); }

/* --- Rating --- */
.spf-stars { letter-spacing: 1px; }
.spf-star { color: var(--spf-border); }
.spf-star.is-filled { color: #f59e0b; }

/* --- Switch / toggle --- */
.spf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.spf-switch input { position: absolute; opacity: 0; }
.spf-switch__track {
	width: 42px;
	height: 24px;
	border-radius: 24px;
	background: var(--spf-border);
	position: relative;
	transition: background 0.2s ease;
	flex: 0 0 auto;
}
.spf-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease;
}
.spf-switch input:checked + .spf-switch__track { background: var(--spf-accent); }
.spf-switch input:checked + .spf-switch__track::after { transform: translateX(18px); }

/* --- Buscador --- */
.spf-searchbox input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--spf-border);
	border-radius: var(--spf-radius);
	font-size: 14px;
}

/* --- Acciones --- */
.spf-actions { display: flex; gap: 10px; }
.spf-apply {
	background: var(--spf-accent);
	color: #fff;
	border: 0;
	padding: 10px 18px;
	border-radius: var(--spf-radius);
	cursor: pointer;
	font-weight: 600;
}
.spf-reset {
	background: none;
	border: 0;
	color: var(--spf-muted);
	cursor: pointer;
	text-decoration: underline;
}

/* --- Loading --- */
.spf-loading {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.6);
	align-items: flex-start;
	justify-content: center;
	padding-top: 40px;
	border-radius: var(--spf-radius);
	z-index: 5;
}
.spf-filters.is-loading .spf-loading { display: flex; }
.spf-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--spf-border);
	border-top-color: var(--spf-accent);
	border-radius: 50%;
	animation: spf-spin 0.7s linear infinite;
}
@keyframes spf-spin { to { transform: rotate(360deg); } }

/* --- Resultados / paginación --- */
.spf-no-results { padding: 30px; text-align: center; color: var(--spf-muted); }
.spf-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; }
.spf-pagination a,
.spf-pagination span {
	display: inline-flex;
	min-width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--spf-border);
	border-radius: 8px;
	text-decoration: none;
}
.spf-pagination .current { background: var(--spf-accent); color: #fff; border-color: var(--spf-accent); }

.spf-elementor-placeholder {
	padding: 24px;
	border: 2px dashed var(--spf-border);
	border-radius: var(--spf-radius);
	text-align: center;
	color: var(--spf-muted);
}

/* Grid genérico para post types no-producto */
.spf-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
.spf-card { border: 1px solid var(--spf-border); border-radius: var(--spf-radius); overflow: hidden; }
.spf-card__thumb img { width: 100%; height: auto; display: block; }
.spf-card__title { padding: 12px; font-size: 15px; margin: 0; }

/* =========================================================
 * OVERRIDE: sin scroll interno en modo vertical
 * Anula cualquier max-height/overflow que imponga el tema o Elementor
 * a las listas de filtros en la barra lateral.
 * ====================================================== */
.spf-filters:not(.spf-filters--horizontal) .spf-list,
.spf-filters:not(.spf-filters--horizontal) .spf-filter__body {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
}

/* =========================================================
 * SKIN "ACORDEÓN" — estilo minimalista (títulos en negrita,
 * divisores, icono +/− a la derecha y botón "VER RESULTADOS").
 * ====================================================== */
.spf-filters--skin-accordion {
	gap: 0;
}
.spf-filters--skin-accordion .spf-filter {
	border-top: 1px solid var(--spf-border);
	border-bottom: 0;
	padding: 0;
}
.spf-filters--skin-accordion .spf-filter:last-of-type {
	border-bottom: 1px solid var(--spf-border);
}
.spf-filters--skin-accordion .spf-filter__title {
	margin: 0 0 14px;
	padding: 20px 2px 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: #111;
	cursor: default;
}
/* Si un filtro concreto SÍ es plegable, su título vuelve a ser clicable. */
.spf-filters--skin-accordion .spf-filter.is-collapsible .spf-filter__title {
	cursor: pointer;
}
.spf-filters--skin-accordion .spf-filter__body {
	padding: 0 2px 22px;
}
/* Icono + / − más grande y fino, en el color del título */
.spf-filters--skin-accordion .spf-toggle {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}
.spf-filters--skin-accordion .spf-toggle::before,
.spf-filters--skin-accordion .spf-toggle::after {
	background: currentColor;
}
.spf-filters--skin-accordion .spf-toggle::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.spf-filters--skin-accordion .spf-toggle::after  { top: 3px; left: 10px; width: 2px; height: 16px; }

/* Botón "VER RESULTADOS" a todo el ancho, estilo bloque negro */
.spf-filters--skin-accordion .spf-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 20px;
}
.spf-apply--block {
	display: block;
	width: 100%;
	background: #111;
	color: #fff;
	border: 0;
	padding: 19px 24px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
	transition: background 0.15s ease;
}
.spf-apply--block:hover { background: #000; }
.spf-filters--skin-accordion .spf-reset {
	align-self: center;
}