/**
 * 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;
}

.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. See TROUBLESHOOTING.md.
	 */
	min-width: 0;
	flex: 1 1 0;
	height: 50px;
	padding: 0 12px;
	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;
}

.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;
	}
}
