/**
 * WC Super Filter — decorative filter controls styling.
 *
 * Styles the non-crawlable filter controls (<button>/data-* terms and the
 * decorative price dual-range slider). No external dependencies. Term active state
 * (.is-active / [aria-pressed="true"]) and the slider are wired by the JS client;
 * the base styles are safe without JS.
 *
 * Visual design matches the Voltmag storefront (voltmag.shop): Montserrat body
 * font, brand orange accent (#e85222, matching --red in voltmag.css and the
 * .cart-btn "Купить" button), checkbox-style terms with a magenta/pink price
 * slider accent (#c2185b) mirroring the previous YITH filter's look on the site.
 * See tmp/screenshots/Screenshot_722.jpg for the reference this was built against.
 *
 * Design goals: compact terms (many brands must not make the sidebar endless) and a
 * usable dual-range price slider (two draggable thumbs on one track, highlighted
 * selected span, value tooltips above each handle).
 */

.wc-super-filter {
	--wcsf-accent: #e85222;
	--wcsf-price-accent: #c2185b;
	--wcsf-text: #333;
	--wcsf-border: #dbdbdb;
	--wcsf-muted: #767676;

	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0 0 1.25rem;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: var(--wcsf-text);
}

/* Active-filter chips: one removable chip per selected term/price bound (F-chips). */
.wc-super-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.wc-super-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 1px solid var(--wcsf-border);
	border-radius: 999px;
	background: transparent;
	color: var(--wcsf-text);
	font: inherit;
	font-size: 0.82em;
	line-height: 1.4;
	padding: 0.2em 0.4em 0.2em 0.7em;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wc-super-filter-chip:hover,
.wc-super-filter-chip:focus-visible {
	border-color: var(--wcsf-accent);
	color: var(--wcsf-accent);
}

.wc-super-filter-chip__remove {
	font-size: 1.1em;
	line-height: 1;
}

/* Toolbar: reset button (hidden until a selection is active) + results counter. */
.wc-super-filter-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	min-height: 1.6em;
}

.wc-super-filter-reset {
	border: 1px solid var(--wcsf-border);
	border-radius: 0.3rem;
	background: transparent;
	color: var(--wcsf-text);
	font: inherit;
	font-size: 0.85em;
	padding: 0.25em 0.6em;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wc-super-filter-reset:hover,
.wc-super-filter-reset:focus-visible {
	border-color: var(--wcsf-accent);
	color: var(--wcsf-accent);
}

.wc-super-filter-count {
	font-size: 0.85em;
	color: var(--wcsf-muted);
}

.wc-super-filter-error {
	margin: 0;
	font-size: 0.9em;
	color: #c0392b;
}

/* Loading state: dim the grid and block interaction while an /apply is in flight,
 * so a slow request gives visible feedback instead of an apparently-dead click. */
.wc-super-filter.is-loading .wc-super-filter-group,
.wc-super-filter.is-loading .wc-super-filter-price {
	opacity: 0.6;
	pointer-events: none;
}

ul.products.is-loading,
.products.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ---------------------------------------------------------------------------
 * Term groups (accordion "widgets") — one per taxonomy, styled like the
 * reference's sidebar widgets: bold sentence-case title, thin bottom rule,
 * small chevron that flips on expand.
 * ------------------------------------------------------------------------- */

.wc-super-filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wcsf-border);
}

.wc-super-filter-group:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wc-super-filter-group__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: none;
	background: transparent;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 1.05em;
	color: var(--wcsf-text);
	cursor: pointer;
}

.wc-super-filter-group__count {
	color: var(--wcsf-muted);
	font-weight: 400;
	font-size: 0.9em;
	margin-left: 0.2em;
}

/* Accordion caret: rotates from collapsed (▸) to expanded (▾). */
.wc-super-filter-group__label::after {
	content: '';
	flex: 0 0 auto;
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.5em;
	border-right: 2px solid var(--wcsf-muted);
	border-bottom: 2px solid var(--wcsf-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.wc-super-filter-group__label[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.wc-super-filter-show-more {
	align-self: flex-start;
	border: none;
	background: transparent;
	color: var(--wcsf-accent);
	font: inherit;
	font-size: 0.85em;
	padding: 0.2em 0;
	cursor: pointer;
}

.wc-super-filter-show-more:hover,
.wc-super-filter-show-more:focus-visible {
	text-decoration: underline;
}

.wc-super-filter-term.is-overflow-hidden,
.wc-super-filter-term.is-search-hidden {
	display: none;
}

/* Vertical checkbox-style list, matching the reference's "☐ Label (count)" rows. */
.wc-super-filter-group__terms {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* In-group term search (large groups only, e.g. 40+ brands — see
 * $wc_super_filter_search_threshold in terms.php). */
.wc-super-filter-group__search {
	box-sizing: border-box;
	width: 100%;
	padding: 0.4em 0.6em;
	margin-bottom: 0.2rem;
	border: 1px solid var(--wcsf-border);
	border-radius: 0.3rem;
	font: inherit;
	font-size: 0.9em;
	color: var(--wcsf-text);
}

.wc-super-filter-group__search:focus-visible {
	outline: none;
	border-color: var(--wcsf-accent);
}

.wc-super-filter-term {
	display: flex;
	align-items: center;
	gap: 0.55em;
	width: 100%;
	max-width: 100%;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wcsf-text);
	font: inherit;
	font-size: 0.95em;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

/* Decorative checkbox box drawn on the button itself — this is still a plain
 * <button>, never a real <input type="checkbox">/<a href>, preserving the
 * non-crawlable-control invariant; only the visual matches a checkbox. */
.wc-super-filter-term::before {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid #9a9a9a;
	border-radius: 3px;
	background: #fff;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.wc-super-filter-term:hover::before,
.wc-super-filter-term:focus-visible::before {
	border-color: var(--wcsf-accent);
}

.wc-super-filter-term.is-active::before,
.wc-super-filter-term[aria-pressed="true"]::before {
	border-color: var(--wcsf-accent);
	background-color: var(--wcsf-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.wc-super-filter-term__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wc-super-filter-term__count {
	color: var(--wcsf-muted);
	font-size: 0.9em;
	margin-left: 0.3em;
}

/* Term counts are unconditional catalog counts (§4.6). Once a selection is active
 * they no longer mean "will be added" — dim further so they read as informational
 * background rather than a live number (F8). Selected chips keep full contrast
 * (their own checked state already signals "active", not "count"). */
.wc-super-filter.has-active-selection .wc-super-filter-term:not([aria-pressed="true"]) .wc-super-filter-term__count {
	opacity: 0.55;
}

/* Dependent-facet pruning: a term with no remaining matches is disabled (§4.6).
 * `disabled` alone makes it inert (no click, no keyboard activation) — no
 * pointer-events:none here, since that would also block the native `title`
 * tooltip explaining *why* the button is dead (F7). */
.wc-super-filter-term.is-unavailable,
.wc-super-filter-term[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Opt-in alternative to gating (see wc_super_filter_hide_unavailable_terms JS
 * filter hook): hide unavailable terms entirely instead of graying them out. */
.wc-super-filter.hide-unavailable-terms .wc-super-filter-term.is-unavailable {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Price dual-range slider
 * ------------------------------------------------------------------------- */

.wc-super-filter-price {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wcsf-border);
}

.wc-super-filter-price__label {
	font-weight: 600;
	font-size: 1.05em;
	color: var(--wcsf-text);
}

/* noUiSlider mount point: give it room and horizontal margin so the handles at the
 * extremes are not clipped by the sidebar edge, and vertical room above for the
 * value tooltips. noUiSlider's own base styles come from the bundled
 * nouislider.min.css; the rules below only theme it to match the site's previous
 * YITH filter look (thin gray track, magenta/pink connect + handles + tooltip). */
.wc-super-filter-price__slider {
	margin: 2rem 0.6rem 0.3rem;
}

.wc-super-filter-price .noUi-target {
	height: 4px;
	border: none;
	border-radius: 999px;
	background: #e5e5e5;
	box-shadow: none;
}

.wc-super-filter-price .noUi-connect {
	background: var(--wcsf-price-accent);
}

.wc-super-filter-price .noUi-handle {
	width: 16px;
	height: 16px;
	right: -8px; /* center the 16px handle on the track end */
	top: -6px;
	border: 2px solid var(--wcsf-price-accent);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
}

/* Remove noUiSlider's default handle grip lines for a cleaner dot. */
.wc-super-filter-price .noUi-handle::before,
.wc-super-filter-price .noUi-handle::after {
	display: none;
}

.wc-super-filter-price .noUi-handle:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.18);
}

/* Value bubble above each handle (e.g. "2190 руб."), matching the reference's
 * pink tooltip pinned above the slider track. */
.wc-super-filter-price .noUi-tooltip {
	border: none;
	border-radius: 0.3rem;
	background: var(--wcsf-price-accent);
	color: #fff;
	font-size: 0.78em;
	font-weight: 600;
	padding: 0.2em 0.5em;
	bottom: 130%;
}

.wc-super-filter-price__inputs {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.wc-super-filter-price__field {
	display: inline-flex;
	flex: 1 1 0;
	min-width: 0;
}

.wc-super-filter-price__field input {
	width: 100%;
	min-width: 0;
	padding: 0.4em 0.6em;
	border: 1px solid var(--wcsf-border);
	border-radius: 0.3rem;
	background: #fff;
	color: var(--wcsf-text);
	font: inherit;
	font-size: 0.9em;
}

.wc-super-filter-price__field input:focus-visible {
	outline: none;
	border-color: var(--wcsf-price-accent);
}

.wc-super-filter-price__sep {
	color: var(--wcsf-muted);
}

/* WordPress screen-reader-text helper (in case the theme doesn't define it). */
.wc-super-filter-price .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

/* ---------------------------------------------------------------------------
 * In-stock-only checkbox (§5.Б)
 * ------------------------------------------------------------------------- */

.wc-super-filter-stock {
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wcsf-border);
}

.wc-super-filter-stock__label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.95em;
	color: var(--wcsf-text);
	cursor: pointer;
}

.wc-super-filter-stock__checkbox {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Mobile bottom-sheet (F6-b)
 *
 * On desktop the trigger/overlay stay hidden and .wc-super-filter renders as the
 * normal in-flow block it always has. Under the breakpoint, .wc-super-filter itself
 * becomes the sheet (no DOM change — same element, same JS bindings) via fixed
 * positioning + a transform that slides it off-screen when closed. This keeps every
 * existing selector/test/theme-override targeting .wc-super-filter[data-wc-super-filter]
 * working unchanged; only its own CSS box changes under the media query.
 * ------------------------------------------------------------------------- */

.wc-super-filter-mobile-trigger {
	display: none;
}

@media (max-width: 767px) {
	.wc-super-filter-mobile-trigger {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		border: 1px solid var(--wcsf-border, #dbdbdb);
		border-radius: 0.4rem;
		background: #fff;
		color: #333;
		font-family: Montserrat, Arial, Helvetica, sans-serif;
		font-size: 0.95em;
		font-weight: 600;
		padding: 0.55em 1em;
		margin: 0 0 1rem;
		cursor: pointer;
	}

	.wc-super-filter-mobile-trigger__count:not(:empty)::before {
		content: '\00b7'; /* middle dot separator, e.g. "Фильтры · 3" */
		margin: 0 0.35em;
	}

	.wc-super-filter-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 1000;
	}

	.wc-super-filter-overlay[hidden] {
		display: none;
	}

	.wc-super-filter {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		max-height: 80vh;
		margin: 0;
		padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-radius: 0.9rem 0.9rem 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateY(100%);
		transition: transform 0.25s ease;
	}

	.wc-super-filter.is-sheet-open {
		transform: translateY(0);
	}

	/* Drag-handle affordance (purely decorative, no JS drag interaction). */
	.wc-super-filter::before {
		content: '';
		display: block;
		width: 2.5rem;
		height: 0.3rem;
		margin: 0 auto 0.75rem;
		border-radius: 999px;
		background: rgba(0, 0, 0, 0.15);
	}

	/* Sticky "Показать N товаров" (F6-c): pinned to the sheet's bottom edge so it is
	 * reachable without scrolling the term list, using the same total shown in the
	 * toolbar counter (F3) via its own JS-updated text content. */
	.wc-super-filter-sheet-apply {
		position: sticky;
		bottom: calc(-1rem - env(safe-area-inset-bottom, 0px));
		margin: 1rem -1rem calc(-1rem - env(safe-area-inset-bottom, 0px));
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--wcsf-border, #dbdbdb);
		border-radius: 0 0 0.9rem 0.9rem;
		display: none;
	}

	.wc-super-filter-sheet-apply.is-visible {
		display: block;
	}

	.wc-super-filter-sheet-apply button {
		width: 100%;
		border: none;
		border-radius: 5px;
		background: #db291a;
		color: #fff;
		font-family: Montserrat, Arial, Helvetica, sans-serif;
		font-weight: 600;
		font-size: 1em;
		text-transform: uppercase;
		padding: 0.85em 1em;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.wc-super-filter-sheet-apply button:hover,
	.wc-super-filter-sheet-apply button:focus-visible {
		background: #ff1f00;
	}
}

/* Body scroll lock while the sheet is open (class toggled by JS on <body>). */
body.wc-super-filter-sheet-locked {
	overflow: hidden;
}