/* APE 2026 — FilterRail (desktop) / FilterSheet (mobile) — stesso nodo .ape-filter-rail */

[hidden] { display: none !important; }

/* base (rail desktop) */
.ape-filter-rail {
	background: var(--ape-surface); border: 1px solid var(--ape-line);
	border-radius: var(--ape-r-card); padding: var(--ape-s4);
}
.ape-filter-rail__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: var(--ape-s3); font-size: 1rem;
}
.ape-filter-rail__close {
	display: inline-flex; padding: 8px; border: 0; background: none; cursor: pointer; color: var(--ape-ink);
}

/* form */
.ape-filters__group { border: 0; padding: 0; margin: 0 0 var(--ape-s4); }
.ape-filters__group legend { font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ape-ink-mute); margin-bottom: var(--ape-s2); padding: 0; }
.ape-filters__price { display: flex; align-items: center; gap: 8px; }
.ape-filters__price input {
	width: 100%; min-width: 0; padding: 10px 12px;
	border: 1px solid var(--ape-line); border-radius: var(--ape-r-input);
	background: var(--ape-surface); color: var(--ape-ink); font: inherit; font-size: 0.9rem;
}
.ape-filters__price input:focus { outline: 2px solid var(--ape-accent-focus); outline-offset: 1px; }
.ape-filters__check { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.ape-filters__check input { width: 18px; height: 18px; accent-color: var(--ape-accent); }

.ape-filters__seg { display: flex; border: 1px solid var(--ape-line); border-radius: var(--ape-r-input); overflow: hidden; }
.ape-filters__seg-item { flex: 1; }
.ape-filters__seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.ape-filters__seg-item span {
	display: flex; align-items: center; justify-content: center; padding: 9px 0;
	font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--ape-ink-soft);
}
.ape-filters__seg-item + .ape-filters__seg-item span { border-left: 1px solid var(--ape-line); }
.ape-filters__seg-item input:checked + span { background: var(--ape-ink); color: var(--ape-surface); font-weight: 800; }

.ape-filters__actions { display: flex; align-items: center; gap: var(--ape-s3); }
.ape-filters__actions .ape-btn--primary {
	flex: 1; padding: 12px 16px; border: 0; border-radius: var(--ape-r-input);
	background: var(--ape-accent); color: var(--ape-on-accent, #10131a); font: inherit; font-weight: 800; cursor: pointer;
}
.ape-filters__actions .ape-btn--primary:hover { background: var(--ape-accent-hover); }
.ape-filters__reset { font-size: 0.88rem; color: var(--ape-ink-mute); }

/* backdrop (solo sheet) */
.ape-filter-backdrop {
	position: fixed; inset: 0; z-index: 98; background: rgba(10, 12, 16, 0.5);
	opacity: 0; transition: opacity .2s;
}
.ape-filter-backdrop.is-open { opacity: 1; }

/* ── mobile: il rail diventa bottom-sheet ── */
@media (max-width: 1023px) {
	.ape-filter-rail {
		position: fixed; inset: auto 0 0 0; z-index: 99;
		max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
		border-radius: var(--ape-r-sheet) var(--ape-r-sheet) 0 0;
		border: 0; box-shadow: var(--ape-shadow-2);
		transform: translateY(105%); transition: transform .25s cubic-bezier(.32,.72,.35,1);
		padding-bottom: calc(var(--ape-s4) + env(safe-area-inset-bottom, 0px));
	}
	.ape-filter-rail.is-open { transform: translateY(0); }
	.ape-filter-rail__head { position: sticky; top: 0; background: var(--ape-surface); padding-block: 4px; }
	.ape-filters__actions { position: sticky; bottom: 0; background: var(--ape-surface); padding-block: var(--ape-s2); }
}

/* ── gruppi a caselle con conteggio, richiudibili (2026-09-15) ── */
.ape-filters__group--list { border-top: 1px solid var(--ape-line); padding-top: var(--ape-s3); }
.ape-filters__group--list legend { float: left; width: 100%; margin-bottom: var(--ape-s2); }
.ape-filters__toggle {
	display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 0;
	border: 0; background: none; cursor: pointer; text-align: left;
	font: inherit; font-weight: 800; font-size: 0.86rem; color: var(--ape-ink);
}
.ape-filters__toggle > span:first-child { flex: 1; }
.ape-filters__toggle .ape-icon { transition: transform .2s; color: var(--ape-ink-mute); }
.ape-filters__toggle[aria-expanded="true"] .ape-icon { transform: rotate(180deg); }
.ape-filters__badge {
	min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
	background: var(--ape-accent); color: var(--ape-on-accent, #10131a); font-size: 0.74rem; font-weight: 800;
}
.ape-filters__list { display: flex; flex-direction: column; gap: 10px; clear: both; }
.ape-filters__list .ape-filters__check { font-size: 0.9rem; }
.ape-filters__name { flex: 1; min-width: 0; }
.ape-filters__count { color: var(--ape-ink-mute); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ape-filters__more {
	align-self: flex-start; padding: 2px 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--ape-ink-soft); text-decoration: underline;
}
.ape-filters__more:hover { color: var(--ape-ink); }
@media (prefers-reduced-motion: reduce) { .ape-filters__toggle .ape-icon { transition: none; } }