/*
 * Custom ACF Filter — frontend styles.
 * Mobile-first. Themes can override via CSS custom properties.
 * Container (.caf-filter) is intentionally unstyled (no background,
 * border, padding) so the Elementor widget wrapper can be styled
 * via Elementor's Advanced controls.
 */

.caf-filter {
	--caf-gap: 1rem;
	--caf-row-gap: 0.5rem;
	--caf-border-color: #d8d8d8;
	--caf-border: 1px solid var(--caf-border-color);
	--caf-border-radius: 0;
	--caf-field-bg: #fff;
	--caf-field-padding: 0.875rem 1rem;
	--caf-fg: inherit;
	--caf-muted: #6b6b6b;
	--caf-accent: #e37121;
	--caf-accent-contrast: #fff;
	--caf-loading-overlay: rgba(255, 255, 255, 0.7);
	--caf-control-height: 3rem;
	--caf-font-family: "Futura", "Futura PT", "Futura Std", "Trebuchet MS", "Century Gothic", Arial, sans-serif;

	display: flex;
	flex-direction: column;
	gap: var(--caf-gap);
	font-family: var(--caf-font-family);
	color: var(--caf-fg);
}

.caf-filter * {
	font-family: inherit;
}

.caf-filter__row {
	display: flex;
	flex-direction: column;
	gap: var(--caf-row-gap);
}

.caf-filter__label {
	font-weight: 600;
	font-size: 0.875rem;
}

.caf-filter__select,
.caf-filter__input {
	width: 100%;
	padding: var(--caf-field-padding);
	border: var(--caf-border);
	border-radius: var(--caf-border-radius);
	background: var(--caf-field-bg);
	color: var(--caf-fg);
	font-size: 1rem;
	min-height: var(--caf-control-height);
}

.caf-filter__select:focus,
.caf-filter__input:focus {
	outline: 2px solid var(--caf-accent);
	outline-offset: 1px;
}

.caf-filter__range {
	display: flex;
	gap: var(--caf-row-gap);
}

.caf-filter__radios,
.caf-filter__checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--caf-row-gap);
}

.caf-filter__option {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 0.875rem;
	border: var(--caf-border);
	border-radius: var(--caf-border-radius);
	background: var(--caf-field-bg);
	cursor: pointer;
	user-select: none;
	font-size: 0.9375rem;
}

.caf-filter__option input {
	margin: 0;
}

.caf-filter__option:has(input:checked) {
	border-color: var(--caf-accent);
	background: color-mix(in srgb, var(--caf-accent) 8%, transparent);
}

/* Visual styling is provided by the Elementor button classes hardcoded
 * on the element (elementor-button / elementor-button-link / -size-sm).
 * We only add the functional bits: full width inside the grid cell and
 * the same minimum height as the inputs so the bottom edges line up.
 */
.caf-filter__reset {
	cursor: pointer;
	width: 100%;
	min-height: var(--caf-control-height);
}

.caf-filter__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--caf-row-gap);
	flex-wrap: wrap;
}

.caf-filter__count {
	color: var(--caf-muted);
	font-size: 0.875rem;
}

.caf-filter__error {
	color: #b32d2e;
	font-size: 0.875rem;
}

.caf-filter__error:empty {
	display: none;
}

/* Loading state on the grid container. */
[data-caf-loading="true"] {
	position: relative;
	pointer-events: none;
}

[data-caf-loading="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--caf-loading-overlay);
	border-radius: inherit;
	z-index: 2;
}

[data-caf-loading="true"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	border: 3px solid #d8d8d8;
	border-top-color: var(--caf-accent, #2271b1);
	border-radius: 50%;
	animation: caf-spin 0.8s linear infinite;
	z-index: 3;
}

@keyframes caf-spin {
	to { transform: rotate(360deg); }
}

.caf-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--caf-muted, #6b6b6b);
	font-size: 1rem;
}

/* Tablet+ : lay out filter rows (including the reset row) in a responsive grid.
 * align-items: end lines the bottom of every cell up, so the reset button —
 * which has no label above it — sits at the exact same baseline as the inputs.
 */
@media (min-width: 720px) {
	.caf-filter {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		align-items: end;
	}

	.caf-filter__footer {
		grid-column: 1 / -1;
	}
}