/* Filters pas toepassen na "Filters toepassen". Zie inc/jv-filters-toepassen.php. */

/* Knoppenbalk plakt onderin het scrollende paneel (#ts-filter-widget-area .ts-sidebar-content). */
#ts-filter-widget-area .jv-filter-actions {
	position: sticky;
	bottom: calc(-1 * var(--jv-pad-b, 40px));
	z-index: 3;
	margin: 24px calc(-1 * var(--jv-pad-r, 40px)) calc(-1 * var(--jv-pad-b, 40px)) calc(-1 * var(--jv-pad-l, 40px));
	padding: 12px var(--jv-pad-r, 40px) calc(12px + env(safe-area-inset-bottom, 0px)) var(--jv-pad-l, 40px);
	background-color: var(--loobek-main-bg, #fff);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
}
#ts-filter-widget-area .jv-filter-actions__hint {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--loobek-text-color, #555);
}
#ts-filter-widget-area .jv-filter-actions__hint:empty {
	display: none;
}
#ts-filter-widget-area .jv-filter-actions__row {
	display: flex;
	align-items: center;
	gap: 12px;
}
#ts-filter-widget-area .jv-filters-clear {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid currentColor;
	border-radius: inherit;
	background: transparent;
	color: var(--loobek-text-bold-color, #000);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
#ts-filter-widget-area .jv-filters-apply {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	cursor: pointer;
}
#ts-filter-widget-area .jv-filters-apply[disabled],
#ts-filter-widget-area .jv-filters-clear[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
#ts-filter-widget-area .jv-filters-apply.is-loading {
	opacity: 0.7;
	cursor: progress;
}
#ts-filter-widget-area .jv-filters-apply__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background-color: #fff;
	color: #000;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
#ts-filter-widget-area .jv-filters-apply__count[hidden] {
	display: none;
}

/* Nog niet toegepaste keuze: vetgedrukt. Geen ::before/::after, die gebruikt Loobek zelf voor het vinkje. */
#ts-filter-widget-area .jv-filter-pending > a,
#ts-filter-widget-area .product-filter-by-price-wrapper li.jv-filter-pending > label {
	font-weight: 700;
}