/*
 * Catalog filters: FacetWP facets as collapsible groups
 * Figma: "Filter group · WORKING" (163:18). Spec: openspec/changes/catalog-filters.
 * Markup: inc/catalog-filters.php (<details class="bb-filter">) around FacetWP output.
 * Uses only --bb-* tokens from css/tokens.css.
 */

/* ---------- Group card ---------- */
.bb-filter {
	margin: 0 0 var(--bb-space-md);
	background: var(--bb-color-bg-canvas);
	border: 1px solid var(--bb-color-border-default);
	border-radius: var(--bb-radius-lg);
}

.bb-filter[hidden] {
	display: none;
}

/* ---------- Header ---------- */
.bb-filter__header {
	display: flex;
	align-items: center;
	gap: var(--bb-space-sm);
	min-height: 56px;
	padding: 0 var(--bb-space-lg);
	color: var(--bb-color-text-primary);
	font-size: 15px;
	font-weight: var(--bb-font-weight-bold);
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
	user-select: none;
	border-radius: var(--bb-radius-lg);
}

/* Native disclosure markers: the chevron is ours */
.bb-filter__header::-webkit-details-marker {
	display: none;
}

.bb-filter__header::marker {
	content: "";
}

.bb-filter__header:focus-visible {
	outline: 2px solid var(--bb-color-focus-ring);
	outline-offset: -2px;
}

.bb-filter__icon,
.bb-filter__chevron {
	display: inline-flex;
	flex: none;
	color: var(--bb-color-text-secondary);
}

.bb-filter__label {
	flex: 1;
	min-width: 0;
}

.bb-filter__count {
	flex: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--bb-radius-full);
	background: var(--bb-color-action-primary);
	color: var(--bb-color-text-inverse);
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}

.bb-filter__count[hidden] {
	display: none;
}

/* Chevron points up when open (Figma), down when closed */
.bb-filter__chevron svg {
	transition: transform 0.2s ease;
}

.bb-filter:not([open]) .bb-filter__chevron svg {
	transform: rotate(180deg);
}

.bb-filter.is-selected .bb-filter__icon {
	color: var(--bb-color-icon-support);
}

/* ---------- Body ---------- */
.bb-filter__body {
	padding: 0 var(--bb-space-lg) var(--bb-space-lg);
}

.bb-filter .facetwp-facet {
	margin-bottom: 0;
}

/* Checkboxes: replace FacetWP's background-image box with a token-styled one.
   FacetWP sets the image with more specific selectors (incl. .checked), so reset it
   explicitly for every state; otherwise checkbox-on.png tiles across the row. */
.bb-filter .facetwp-facet .facetwp-checkbox,
.bb-filter .facetwp-facet .facetwp-checkbox.checked,
.bb-filter .facetwp-facet .facetwp-checkbox.disabled {
	background-image: none;
}

.bb-filter .facetwp-checkbox {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bb-space-xs);
	margin: 0;
	padding: 4px 0 4px 26px;
	background: none;
	color: var(--bb-color-text-secondary);
	font-size: var(--bb-body-sm-size);
	line-height: var(--bb-body-sm-line);
	cursor: pointer;
}

.bb-filter .facetwp-checkbox::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 1.5px solid var(--bb-color-border-strong);
	border-radius: var(--bb-radius-sm);
	background: var(--bb-color-bg-canvas) center / 10px no-repeat;
}

.bb-filter .facetwp-checkbox:hover {
	color: var(--bb-color-text-primary);
}

.bb-filter .facetwp-checkbox:hover::before {
	border-color: var(--bb-color-border-support);
}

.bb-filter .facetwp-checkbox.checked {
	color: var(--bb-color-text-primary);
	font-weight: var(--bb-font-weight-bold);
}

.bb-filter .facetwp-checkbox.checked::before {
	border-color: var(--bb-color-action-primary);
	background-color: var(--bb-color-action-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8'/%3E%3C/svg%3E");
}

.bb-filter .facetwp-checkbox.disabled {
	opacity: 0.45;
	cursor: default;
}

.bb-filter .facetwp-counter {
	color: var(--bb-color-text-secondary);
	font-size: 12px;
	font-weight: var(--bb-font-weight-regular);
}

.bb-filter .facetwp-checkbox:focus-visible {
	outline: 2px solid var(--bb-color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--bb-radius-sm);
}

/* "Ver mais opções" / "Ver menos" */
.bb-filter .facetwp-toggle {
	display: inline-block;
	margin-top: var(--bb-space-xs);
	color: var(--bb-color-text-link);
	font-size: 13px;
	font-weight: var(--bb-font-weight-bold);
	cursor: pointer;
}

.bb-filter .facetwp-toggle:hover {
	color: var(--bb-color-action-primary-hover);
	text-decoration: underline;
}

.bb-filter .facetwp-toggle.facetwp-hidden {
	display: none;
}

/* Gráfica dedicada (Tiago, 2026-10): long GPU names wrap, taller touch targets. */
.bb-filter.gf-bb-gpu-filter .bb-filter__label {
	min-width: 0;
}

.bb-filter.gf-bb-gpu-filter .facetwp-checkbox {
	min-height: 32px;
	align-items: center;
	line-height: 1.35;
}

.bb-filter.gf-bb-gpu-filter .facetwp-display-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.bb-filter.gf-bb-gpu-filter .facetwp-counter {
	flex: none;
}

.bb-filter.gf-bb-gpu-filter .facetwp-checkbox:focus-visible {
	outline-color: var(--bb-brand-800);
	border-radius: 3px;
}

@media (max-width: 719px) {
	.bb-filter.gf-bb-gpu-filter .facetwp-checkbox {
		min-height: 44px;
	}
}

/* ---------- Price slider (FacetWP noUiSlider): brand colours only ---------- */
.bb-filter .facetwp-slider-wrap {
	padding: var(--bb-space-sm) var(--bb-space-sm) 0;
}

.bb-filter .noUi-target {
	border: 0;
	box-shadow: none;
	background: var(--bb-color-bg-muted);
}

.bb-filter .noUi-connect {
	background: var(--bb-color-action-primary);
}

.bb-filter .noUi-handle {
	border: 2px solid var(--bb-color-action-primary);
	border-radius: var(--bb-radius-full);
	background: var(--bb-color-bg-canvas);
	box-shadow: none;
}

.bb-filter .noUi-handle::before,
.bb-filter .noUi-handle::after {
	display: none;
}

.bb-filter .facetwp-slider-label {
	display: block;
	margin-top: var(--bb-space-md);
	color: var(--bb-color-text-primary);
	font-size: var(--bb-body-sm-size);
	font-weight: var(--bb-font-weight-bold);
}

.bb-filter .facetwp-slider-reset {
	margin-top: var(--bb-space-sm);
	padding: 0;
	border: 0;
	background: none;
	color: var(--bb-color-text-link);
	font-size: 13px;
	font-weight: var(--bb-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
	min-height: 0;
	line-height: 1.4;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.bb-filter__chevron svg {
		transition: none;
	}
}

/* Mobile drawer (Tiago, round 2): price presets follow the price group. */
@media (max-width: 719px) {
	body:is(.tax-product_cat, .woocommerce-shop) .mfp-content #shop-sidebar .gf-bb-price-filter > details.bb-filter[data-facet="preco"]:not([open]) + .gf-bb-price-presets {
		display: none;
	}
}