/*!
 * Styling for the client-side gallery filters.
 * Deliberately minimal — the Make select is a clone of a stock JetSmartFilters
 * widget, so it already inherits the site's control styling. Only the pieces
 * that did not exist before (status row, unavailable options) are styled here,
 * matching the surrounding dark theme: black surfaces, #666 borders, 3px radii.
 */

.apex-filter-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #b3b3b3;
}

.apex-filter-count {
	letter-spacing: 0.02em;
}

.apex-filter-reset {
	appearance: none;
	background: transparent;
	color: #b3b3b3;
	border: 1px solid #666;
	border-radius: 3px;
	padding: 7px 16px;
	font: inherit;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease,
	            transform 0.12s ease;

	/* Nothing to clear yet — keep it out of the way until a filter is active. */
	opacity: 0;
	visibility: hidden;
}

/* Same press dip the filter chips have (apex-revamp.css section 65). */
.apex-filter-reset:active {
	transform: scale(0.94);
}

.apex-filter-status.is-filtered .apex-filter-reset {
	opacity: 1;
	visibility: visible;
}

.apex-filter-reset:hover,
.apex-filter-reset:focus-visible {
	color: #fff;
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Filter controls — shared shape, split colour
   All eight selects share one corner radius (12px, matching the photo and
   card radius elsewhere on the site — see section 4 of apex-revamp.css) so the
   whole filter bar reads as one system regardless of which row a control is
   in or what colour it carries.

   Colour is deliberately split by row rather than uniform:
   - Make / Model / Year / Colour — what vehicle — stay white, the site's
     original treatment for these controls.
   - Wheels / Protective Coating / Accessories / Suspension — what work —
     are Apex blue, so the second row reads as its own group at a glance
     rather than blending into the first.

   All eight selects clone the same stock JetSmartFilters widget (see
   buildSelect() in gallery-filters.js and service_filters_markup() in
   customise.py), so every one of them carries the class jet-select__control
   with nothing to tell them apart in markup. The split here is done through
   each widget's data-query-var instead: the stock four use the plain
   JetSmartFilters query vars (make, gallery_model, year, color), the service
   four are prefixed apex- by customise.py. That prefix is what lets one
   selector target only the second row without touching the first.
   ========================================================================== */
.apex-make-filter select,
.jet-select__control {
	border-radius: 12px !important;
}

.jet-select[data-query-var="make"] select,
.jet-select[data-query-var="gallery_model"] select,
.jet-select[data-query-var="year"] select,
.jet-select[data-query-var="color"] select {
	background-color: #ffffff !important;
	color: #14171a !important;
	border: 1px solid #666666 !important;
}

.jet-select[data-query-var="make"] select option,
.jet-select[data-query-var="gallery_model"] select option,
.jet-select[data-query-var="year"] select option,
.jet-select[data-query-var="color"] select option {
	background-color: #ffffff;
	color: #14171a;
}

.jet-select[data-query-var="make"] select:focus-visible,
.jet-select[data-query-var="gallery_model"] select:focus-visible,
.jet-select[data-query-var="year"] select:focus-visible,
.jet-select[data-query-var="color"] select:focus-visible {
	outline: 2px solid var(--apex-blue);
	outline-offset: 1px;
}

.jet-select[data-query-var="make"] select option:disabled,
.jet-select[data-query-var="gallery_model"] select option:disabled,
.jet-select[data-query-var="year"] select option:disabled,
.jet-select[data-query-var="color"] select option:disabled {
	color: #999999;
}

/* The four service filters (Wheels, Protective Coating, Accessories,
   Suspension) — the wrapper customise.py gives each one carries
   data-query-var="apex-<dimension>", so this single attribute-prefix
   selector reaches all four without naming them individually.

   The fill is #0072ce, not --apex-blue. That is the site's existing rule for
   a filled blue surface, and the reason the footer's copyright bar uses it:
   white on --apex-blue (#0072ce) is 3.4:1, below AA for normal text, while
   white on #0072ce is 4.6:1 and passes. --apex-blue stays as the border,
   where it is doing what it is good at — an accent against black. */
.jet-select[data-query-var^="apex-"] select {
	background-color: #0072ce !important;
	color: #ffffff !important;
	border: 1px solid var(--apex-blue) !important;
}

/* The native dropdown list is painted by the OS and does not inherit the
   control's colours, so each option is set explicitly. Without this the open
   list is white-on-white in some browsers. */
.jet-select[data-query-var^="apex-"] select option {
	background-color: #10233a;
	color: #ffffff;
}

.jet-select[data-query-var^="apex-"] select:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
}

/* Choices that cannot yield a result given the other active filters.
   Grey on blue is muddy, so unavailable options lift toward the fill instead. */
.jet-select[data-query-var^="apex-"] select option:disabled {
	color: #7e97b4;
}

.jet-checkboxes-list__row.apex-option-unavailable {
	opacity: 0.35;
	pointer-events: none;
}

.apex-filter-empty {
	display: none;
	margin: 40px 0;
	text-align: center;
	color: #b3b3b3;
	font-size: 16px;
}

/* ==========================================================================
   Service filters — the second row
   Wheels / Protective Coating / Accessories / Suspension. The markup is
   injected by customise.py and reuses JetSmartFilters' own class names, so the
   selects inherit the styling of the four above them and need no rules of
   their own; only the row itself does.
   ========================================================================== */
.apex-service-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
	padding-top: 14px;
	/* A hairline separates "what vehicle" from "what work" — without it the
	   eight controls read as one undifferentiated wall of dropdowns. */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.apex-service-cell {
	flex: 1 1 170px;
	min-width: 150px;
	max-width: 260px;
}

@media (max-width: 600px) {
	.apex-service-cell {
		flex-basis: 100%;
		max-width: none;
	}
}

/* Category checkboxes (Custom Cars / Jeeps / SUVs / Trucks) get the same 12px
   corner as the selects and the site's photos, so every box in the filter bar
   — dropdown or checkbox — reads as one rounded family rather than three
   different shapes stacked on top of each other. */
.jet-checkboxes-list__decorator {
	border-radius: 12px !important;
}