/*
 * Design System - AELITA
 * components/car-filter.css - cars catalog filter shell (/cars/*).
 *
 * The filter shell itself (.bg-grey, .carlist-filter, #hidden_filter_body,
 * .hidden_filter_title, .filter, the jQuery custom-select plugin) is shared
 * with the moto/quadro/generator/jetski catalogs. The shared control skin
 * lives in catalog-filter.css; this file adds only the car-specific layout
 * (equal-width flex row, reset cell, mobile collapse).
 *
 * Everything is scoped under .a-car-filter so no other catalog is affected.
 * Consumes tokens.css only.
 *
 * Loaded on is_tax( 'cars_category' ) only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Fields: equal-width flex row filling the whole parent width          */
/* -------------------------------------------------------------------- */
.a-car-filter .a-car-filter__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	/* Bootstrap .row + .carlist-filter use negative -15px margins, which made
	   the grey filter band wider than the content column. Pull it back to the
	   content width and let flex distribute the fields. */
	margin-left: 0;
	margin-right: 0;
	/* Inner gutter so the selects don't stick to the band edges. */
	padding-left: var(--space-4);
	padding-right: var(--space-4);
	gap: var(--space-3);
}

/* Bootstrap .row clearfix pseudo-elements would become flex items. */
.a-car-filter .a-car-filter__body::before,
.a-car-filter .a-car-filter__body::after {
	display: none;
	content: none;
}

/* Mobile/tablet filter toggle: keep its grey band within the content width. */
.a-car-filter .a-catalog-filter__toggle {
	margin-left: 0;
	margin-right: 0;
}

.a-car-filter .a-car-filter__field {
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
	/* Drop the Bootstrap column gutters so the selects fill the band evenly;
	   spacing comes from the flex gap. */
	padding-left: 0;
	padding-right: 0;
}

/* Native <select> stays usable without JS (the plugin hides it afterwards). */
.a-car-filter .a-car-filter__field select {
	display: block;
	width: 100%;
}

/* The compact results/sort row now owns the spacing below the filter. */
.a-car-filter .a-catalog-filter__body {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------- */
/* Reset: rendered inside the filter block, as the last flex cell.      */
/* -------------------------------------------------------------------- */
.a-car-filter .a-car-filter__actions {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.a-car-filter .a-car-filter__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Match the control height so the reset aligns with the selects. */
	min-height: calc(var(--space-6) + var(--space-3));
	color: var(--link);
	font-size: var(--fs-body);
	line-height: var(--lh-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur-press) var(--ease-out);
}

.a-car-filter .a-car-filter__reset:hover,
.a-car-filter .a-car-filter__reset:focus-visible {
	color: var(--link-hover);
}

/* -------------------------------------------------------------------- */
/* Tablet / mobile (<= 991px): collapsed single-column filter           */
/* -------------------------------------------------------------------- */
@media (max-width: 991px) {
	/* The whole grey toggle row is clickable, not just the label. */
	.a-car-filter .a-catalog-filter__toggle {
		cursor: pointer;
	}

	.a-car-filter .hidden_filter_title {
		text-align: center;
		/* Taller tap target for the whole toggle row. */
		padding-top: var(--space-3);
		padding-bottom: var(--space-3);
	}

	.a-car-filter .hidden_filter_title img {
		display: inline-block;
	}

	.a-car-filter .hidden_filter_title__link {
		display: inline-block;
		font-weight: var(--fw-bold);
		font-size: 20px;
		line-height: 30px;
		cursor: pointer;
	}

	/* Keep the collapsed body hidden for the whole 769-991 band too. */
	.a-car-filter #hidden_filter_body {
		display: none;
	}

	.a-car-filter .a-car-filter__field {
		flex: 1 1 100%;
	}

	.a-car-filter .a-car-filter__actions {
		justify-content: center;
		padding-block-end: var(--space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-car-filter .a-car-filter__reset {
		transition-duration: 0.01ms;
	}
}