/**
 * Vehicle Filter widget styles.
 *
 * v1.6.0: Make/Model/Year/Price (USD)/Search, matching a reference car-
 * marketplace design (bold uppercase field labels, bordered rounded boxes,
 * a blue pill Search button) — see TROUBLESHOOTING.md. Colors are CSS
 * variables with sensible defaults; adjust `--wcvm-filter-accent` to match
 * the exact brand blue rather than editing the rules themselves.
 *
 * The Make/Model toggle is a `[role="button"]` div, not a `<button>`, and
 * the alphabet index letters are `[role="button"]` spans, not `<a>` —
 * confirmed live that the site's own theme/WooCommerce CSS applies default
 * styling to bare `<button>` (red background, uppercase white text) and
 * `<a>` (the theme's link color) elements that this widget's own styles
 * couldn't reliably out-cascade. See TROUBLESHOOTING.md.
 */
.wcvm-vehicle-filter {
	--wcvm-filter-accent: #2563eb;
	--wcvm-filter-radius: 12px;
	--wcvm-filter-border: #e2e2e2;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	background: #fff;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.12 );
	position: relative;
}

.wcvm-vehicle-filter__field {
	flex: 1 1 180px;
	min-width: 160px;
	position: relative;
}

/*
 * Confirmed live: a shared 180px flex-basis is enough for the Make/Model
 * dropdown fields, but the Year/Price fields each hold *two* number inputs
 * plus a separator — at 900-1150px viewports (Playwright-measured) they
 * were still fitting the row instead of wrapping, so their two inputs kept
 * shrinking (via `min-width: 0` below) below what "Min Year"/"Max Year"
 * needs, truncating the placeholder instead. A larger flex-basis makes the
 * browser's own flex-wrap trigger a line-wrap sooner, before the inputs
 * are squeezed unreadable. See TROUBLESHOOTING.md.
 */
.wcvm-vehicle-filter__field--range {
	flex-basis: 220px;
}

.wcvm-vehicle-filter__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #333;
	margin-bottom: 8px;
}

.wcvm-vehicle-filter__box {
	width: 100%;
	/*
	 * Confirmed live: a site-level custom-CSS rule fixes this box to a
	 * literal `width: 250px` (a 3-class selector, so it wins the cascade
	 * over the `width: 100%` above). `max-width: 100%` is a separate
	 * property the cascade fight over `width` never touches — it lets a
	 * fixed width apply wherever the field has room (desktop) while
	 * clamping it back down to the actual flex-item width on narrower
	 * viewports, instead of overflowing into the next field. See
	 * TROUBLESHOOTING.md.
	 */
	max-width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var( --wcvm-filter-border );
	border-radius: var( --wcvm-filter-radius );
	background-color: #f3f4f6;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	box-sizing: border-box;
}

.wcvm-vehicle-filter__box:hover:not( .is-disabled ) {
	border-color: var( --wcvm-filter-accent );
}

.wcvm-vehicle-filter__box.is-disabled {
	background-color: #e9eaed;
	color: #999;
	cursor: not-allowed;
}

.wcvm-vehicle-filter__box-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	color: #000;
}

.wcvm-vehicle-filter__box.is-disabled .wcvm-vehicle-filter__box-label {
	color: #999;
}

.wcvm-vehicle-filter__chevron {
	flex-shrink: 0;
	margin-left: 8px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #999;
}

.wcvm-vehicle-filter__panel {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	z-index: 20;
	width: 340px;
	max-width: 90vw;
	background: #fff;
	border-radius: var( --wcvm-filter-radius );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.18 );
	overflow: hidden;
}

/*
 * Portaled to <body> by JS (see vehicle-filter.js) — position: fixed with
 * JS-computed top/left, and a z-index high enough to clear the site's own
 * fixed-position UI (e.g. the corner contact-icon stack). Confirmed live:
 * the widget's Elementor section ancestor has its own `position: relative`
 * + z-index, trapping any z-index set on a descendant inside that
 * ancestor's stacking context — no z-index value here could escape above a
 * *sibling* section (the Visual Filter carousel) once that's true. See
 * TROUBLESHOOTING.md.
 */
.wcvm-vehicle-filter__panel--portal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
}

/*
 * Explicit, mutually-exclusive [hidden]/:not([hidden]) rules rather than an
 * unconditional `display: flex` above — confirmed live that an unconditional
 * display value on this element wins the cascade over the browser's own
 * `[hidden] { display: none }` UA rule (author styles always beat UA styles
 * at equal specificity), which kept the panel visibly open regardless of
 * the `hidden` attribute the JS was correctly toggling. See TROUBLESHOOTING.md.
 */
.wcvm-vehicle-filter__panel[hidden] {
	display: none;
}

.wcvm-vehicle-filter__panel:not( [hidden] ) {
	display: flex;
}

.wcvm-vehicle-filter__panel-list {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px 0;
}

.wcvm-vehicle-filter__panel--simple .wcvm-vehicle-filter__panel-list {
	max-height: 260px;
}

.wcvm-vehicle-filter__panel-heading {
	position: sticky;
	top: 0;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	color: var( --wcvm-filter-accent );
	padding: 4px 16px;
}

.wcvm-vehicle-filter__panel-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcvm-vehicle-filter__panel-item {
	padding: 8px 16px;
	font-size: 14px;
	color: #000;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcvm-vehicle-filter__panel-item:hover {
	background: #f5f7fa;
	color: var( --wcvm-filter-accent );
}

/* Two columns (A-M / N-#), matching the reference design, instead of one
   long vertical strip. Given a wider, fixed basis (rather than sizing to
   its own tiny content) so the letters have room to breathe and the name
   list column shrinks to make space for it, per direct feedback. */
.wcvm-vehicle-filter__panel-index {
	flex: 0 0 110px;
	max-height: 320px;
	overflow-y: auto;
	border-left: 1px solid var( --wcvm-filter-border );
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 16px;
	padding: 8px 10px;
}

.wcvm-vehicle-filter__panel-index-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wcvm-vehicle-filter__panel-index-letter {
	display: block;
	font-size: 13px;
	line-height: 20px;
	color: #000;
	cursor: pointer;
}

.wcvm-vehicle-filter__panel-index-letter.is-empty {
	color: #ccc;
	cursor: default;
}

.wcvm-vehicle-filter__panel-index-letter:not( .is-empty ):hover {
	color: var( --wcvm-filter-accent );
}

.wcvm-vehicle-filter__range {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wcvm-vehicle-filter__input {
	width: 0;
	/*
	 * Flex items default to `min-width: auto` (their content's own minimum
	 * size), which for a bare `<input type="number">` is a real, non-zero
	 * floor — the same "won't shrink below natural size" flex bug already
	 * hit twice elsewhere in this plugin (the Visual Filter carousel's
	 * slide/fieldset). Without this, the Year/Price inputs refused to
	 * shrink enough at medium viewports and visually overlapped the next
	 * field. A bare `0` removed the floor entirely though, letting the
	 * input shrink smaller than its own placeholder text needs and
	 * truncating it ("Min Yea…") — `.wcvm-vehicle-filter__field--range`'s
	 * larger flex-basis above is the primary fix (wrap the field sooner),
	 * this is a defensive floor so the input is never unreadably small even
	 * if something still squeezes it. See TROUBLESHOOTING.md.
	 */
	min-width: 60px;
	flex: 1 1 0;
	height: 50px;
	/*
	 * Confirmed live: the site's own theme CSS applies `padding: 8px 16px`
	 * to `input[type="number"]` with higher effective precedence than this
	 * rule (same class of cascade fight already documented elsewhere in
	 * this file for `.wcvm-vehicle-filter__box`) — `!important` guarantees
	 * this widget's own intended padding actually applies rather than
	 * silently losing to it. See TROUBLESHOOTING.md.
	 */
	padding: 0 12px !important;
	border: 1px solid var( --wcvm-filter-border );
	border-radius: var( --wcvm-filter-radius );
	background-color: #f3f4f6;
	font-size: 16px;
	color: #000;
	box-sizing: border-box;
}

/*
 * Confirmed live: the native number-input spin buttons eat into the
 * input's visible content width (not accounted for by `padding` alone),
 * which was the actual remaining cause of "Min Year"/"Max Year" getting
 * clipped even once the input itself measured wide enough on paper. Never
 * present in the approved reference design either. See TROUBLESHOOTING.md.
 */
.wcvm-vehicle-filter__input::-webkit-outer-spin-button,
.wcvm-vehicle-filter__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wcvm-vehicle-filter__input {
	-moz-appearance: textfield;
}

.wcvm-vehicle-filter__input::placeholder {
	font-size: 16px;
	color: #000;
	opacity: 1;
}

.wcvm-vehicle-filter__input:focus {
	outline: none;
	border-color: var( --wcvm-filter-accent );
}

.wcvm-vehicle-filter__range-sep {
	color: #999;
	flex-shrink: 0;
}

.wcvm-vehicle-filter__search {
	flex: 0 0 auto;
	height: 50px;
	padding: 0 28px;
	border: none;
	border-radius: 999px;
	background-color: var( --wcvm-filter-accent );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: opacity 0.2s ease;
}

.wcvm-vehicle-filter__search:hover {
	opacity: 0.9;
}

.wcvm-vehicle-filter__search-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

@media ( max-width: 782px ) {
	.wcvm-vehicle-filter {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * Confirmed live: `.wcvm-vehicle-filter__field`'s `flex: 1 1 180px`
	 * sets `flex-basis: 180px` for the desktop row layout, where it
	 * controls *width*. `flex-basis` always sizes along the flex
	 * container's current main axis though — once the rule above switches
	 * to `flex-direction: column`, that same 180px starts controlling
	 * *height* instead, forcing every field to reserve 180px of vertical
	 * space regardless of its real ~74px content height. That's what
	 * produced the large blank gaps between fields on mobile. Resetting
	 * to `auto` here lets each field size to its actual content again.
	 * See TROUBLESHOOTING.md.
	 */
	.wcvm-vehicle-filter__field {
		flex-basis: auto;
	}

	.wcvm-vehicle-filter__panel {
		width: 100%;
	}

	.wcvm-vehicle-filter__search {
		width: 100%;
		justify-content: center;
	}
}
