/**
 * KAUFLOND — Filters
 *
 * Scope: the shop sidebar (`.sidebar-container.sidebar-left`) holding
 * WoodMart's layered-navigation, price and stock-status widgets, WooCommerce's
 * active-filters chips, and WoodMart's off-canvas sidebar on tablet/mobile.
 *
 * Which widgets appear is decided by the kauflond-catalog plugin from the
 * category→attribute map; this file only styles whatever is rendered.
 *
 * @package Kauflond
 */

/* =========================================================================
 * 1. SIDEBAR + WIDGET SHELL
 * ====================================================================== */

.sidebar-container.sidebar-left .widget,
.wd-sidebar .wd-widget {
	margin-bottom: 0;
	padding-block: var(--kfl-space-4);
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
}

.sidebar-container .widget:first-child {
	padding-top: 0;
}

.sidebar-container .widget-title,
.wd-sidebar .widget-title {
	margin: 0 0 var(--kfl-space-3);
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kfl-color-text-primary);
}

/* =========================================================================
 * 2. FILTER LISTS
 *
 * Real markup:
 *   layered nav : ul.wd-filter-list.wd-layout-list > li.wc-layered-nav-term > a.layered-nav-link
 *   stock status: ul.wd-checkboxes-on > li > a
 * Selected items get .chosen (WooCommerce) or .wd-active (WoodMart).
 * One rule set covers both so every list shows the same checkbox affordance.
 * ====================================================================== */

.sidebar-container .wd-filter-list.wd-layout-list,
.sidebar-container .wd-checkboxes-on {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The count is a SIBLING of the link (<a>…</a> <span class="count">), so the
 * <li> is the flex row and the link takes the remaining width. */
.sidebar-container .wd-filter-list.wd-layout-list > li,
.sidebar-container .wd-checkboxes-on > li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: none;
}

.sidebar-container .wd-filter-list.wd-layout-list > li > a,
.sidebar-container .wd-checkboxes-on > li > a {
	flex: 1 1 auto;
	min-width: 0;
}

.sidebar-container .wd-filter-list.wd-layout-list > li > a,
.sidebar-container .wd-checkboxes-on > li > a {
	display: flex;
	align-items: center;
	gap: var(--kfl-space-2);
	min-height: 32px;
	padding: 3px 0;
	font-size: var(--kfl-font-size-base);
	line-height: var(--kfl-line-height-snug);
	color: var(--kfl-color-text-primary);
}

/* Checkbox affordance, token-driven. WoodMart's stock list draws its own via
 * .wd-checkboxes-on; replace it so both lists match. */
.sidebar-container .wd-filter-list.wd-layout-list > li > a::before,
.sidebar-container .wd-checkboxes-on > li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: var(--kfl-border-width) solid var(--kfl-color-border-strong);
	border-radius: var(--kfl-radius-sm);
	background: var(--kfl-color-surface);
	transition: background-color .15s ease, border-color .15s ease;
}

.sidebar-container .wd-filter-list.wd-layout-list > li > a:hover::before,
.sidebar-container .wd-checkboxes-on > li > a:hover::before {
	border-color: var(--kfl-color-brand-primary);
}

/* Selected: filled box with a check, bold label — never colour alone. */
.sidebar-container .wd-filter-list.wd-layout-list > li.chosen > a,
.sidebar-container .wd-filter-list.wd-layout-list > li.wd-active > a,
.sidebar-container .wd-checkboxes-on > li.chosen > a,
.sidebar-container .wd-checkboxes-on > li.wd-active > a {
	font-weight: var(--kfl-font-weight-bold);
}

.sidebar-container .wd-filter-list.wd-layout-list > li.chosen > a::before,
.sidebar-container .wd-filter-list.wd-layout-list > li.wd-active > a::before,
.sidebar-container .wd-checkboxes-on > li.chosen > a::before,
.sidebar-container .wd-checkboxes-on > li.wd-active > a::before {
	background: var(--kfl-color-brand-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
	border-color: var(--kfl-color-brand-primary);
}

/* Term text + count: WoodMart wraps the count in .count */
.sidebar-container .wd-filter-list.wd-layout-list .count,
.sidebar-container .wd-checkboxes-on .count {
	margin-inline-start: auto;
	font-size: var(--kfl-font-size-xs);
	color: var(--kfl-color-text-muted);
}

/* Long lists scroll inside a modest box (WoodMart's widgets_scroll). */
.sidebar-container .wd-scroll-content {
	max-height: 240px;
}

/* =========================================================================
 * 3. PRICE FILTER — native WooCommerce slider
 * ====================================================================== */

.widget_price_filter .price_slider_wrapper {
	padding-top: var(--kfl-space-2);
}

.widget_price_filter .ui-slider {
	height: 4px;
	background: var(--kfl-color-surface-sunken);
	border-radius: var(--kfl-radius-pill);
}

.widget_price_filter .ui-slider .ui-slider-range {
	background: var(--kfl-color-brand-primary);
	border-radius: var(--kfl-radius-pill);
}

.widget_price_filter .ui-slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	top: -6px;
	margin-left: -8px;
	border: 2px solid var(--kfl-color-brand-primary);
	border-radius: 50%;
	background: var(--kfl-color-surface);
	box-shadow: var(--kfl-shadow-sm);
	cursor: grab;
}

/* Amount row: the label gets its own line and the button spans the widget —
 * a 320px sidebar cannot fit "Preis: 1.290 € — 1.900 €" beside a button. */
.widget_price_filter .price_slider_amount {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--kfl-space-2);
	margin-top: var(--kfl-space-3);
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
}

.widget_price_filter .price_slider_amount .price_label {
	order: 1;
	font-weight: var(--kfl-font-weight-medium);
	color: var(--kfl-color-text-primary);
	white-space: nowrap;
}

.widget_price_filter .price_slider_amount .button {
	order: 2;
	width: 100%;
	height: var(--kfl-btn-height-sm);
	padding-inline: var(--kfl-space-3);
	border-radius: var(--kfl-radius-md);
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	background: var(--kfl-color-brand-secondary);
	color: var(--kfl-color-brand-on-secondary);
	box-shadow: none;
}

.widget_price_filter .price_slider_amount .button:hover {
	background: var(--kfl-color-brand-secondary-hover);
	color: var(--kfl-color-brand-on-secondary);
}

/* =========================================================================
 * 4. ACTIVE FILTERS — chips with clear removal
 * ====================================================================== */

.widget_layered_nav_filters ul,
.wd-active-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kfl-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget_layered_nav_filters li a,
.wd-active-filters li a {
	display: inline-flex;
	align-items: center;
	gap: var(--kfl-space-1);
	height: 28px;
	padding-inline: var(--kfl-space-2) var(--kfl-space-3);
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface-subtle);
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-primary);
}

.widget_layered_nav_filters li a:hover,
.wd-active-filters li a:hover {
	border-color: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-primary);
}

/* =========================================================================
 * 5. OFF-CANVAS SIDEBAR (tablet / mobile)
 * ====================================================================== */

.wd-sidebar.wd-side-hidden {
	background: var(--kfl-color-surface);
}

.wd-sidebar.wd-side-hidden .wd-heading {
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
}

.wd-sidebar.wd-side-hidden .wd-heading .title {
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
}

/* WoodMart's fixed "Filter" button on mobile — brand it. */
.wd-sticky-filter-btn,
.wd-show-sidebar-btn.wd-sticky {
	background: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
	border-radius: var(--kfl-radius-md);
	box-shadow: var(--kfl-shadow-md);
}

/* =========================================================================
 * 6. FOCUS
 * ====================================================================== */

.sidebar-container a:focus-visible,
.widget_price_filter .ui-slider-handle:focus-visible,
.widget_price_filter .button:focus-visible {
	outline: none;
	box-shadow: var(--kfl-focus-ring);
}