/*
 * Vehicle filter, printed next to the sorting dropdown of the category templates.
 * The boxes copy the look of that dropdown (grey, no border, 52 px high) so the three read as one group.
 */
.msl-vf {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin: 0 0 0.75em;
}

.msl-vf__field {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
}

.msl-vf__label {
	font-size: 0.9em;
	font-weight: 600;
}

/* Plain select (before the script runs, or without it). */
.msl-vf__select {
	width: 100%;
	height: 52px;
	padding: 0 25px;
	border: 0;
	border-radius: 4px;
	background-color: #f2f2f2;
	color: #727272;
	font-size: 16px;
}

.msl-vf__select[disabled] {
	opacity: 0.6;
}

.msl-vf__reset {
	align-self: flex-start;
	font-size: 0.9em;
	text-decoration: underline;
}

/* Searchable dropdown (selectWoo). */
.msl-vf .select2-container {
	width: 100% !important;
}

.msl-vf .select2-container .select2-selection--single {
	height: 52px;
	margin: 0; /* WooCommerce's select2 CSS sets margin-bottom: -4px, which put the boxes 4 px off the sorting */
	border: 0;
	border-radius: 4px;
	background-color: #f2f2f2;
}

.msl-vf .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 45px 0 25px;
	line-height: 52px;
	color: #727272;
	font-size: 16px;
}

.msl-vf .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 15px;
	height: 52px;
}

.msl-vf .select2-container--disabled .select2-selection--single {
	opacity: 0.6;
	cursor: not-allowed;
}

.msl-vf-dropdown .select2-search__field {
	font-size: 16px; /* 16 px keeps iOS from zooming into the field */
}

.msl-vf-dropdown .select2-results__option {
	padding: 8px 12px;
}

/*
 * Desktop and tablet: brand, model and sorting in one row, right-aligned, the filter left of the
 * sorting (Susanne, DIVMSLV-81, 2026-11-13). The 13 category templates are separate Elementor
 * templates, so the rules hook on the wrapper .msl-vf-bar and not on element IDs.
 * Phones keep the stacked layout above.
 */
@media (min-width: 768px) {
	/*
	 * The row that holds "Shop / Anzeige von …" and the sorting: the sorting column takes the free
	 * space. Where less than ~760 px are left (tablets), it wraps onto its own full-width line.
	 */
	.e-con:has(> .e-con > .elementor-widget-shortcode .msl-vf-bar) {
		flex-wrap: wrap;
	}

	.e-con:has(> .e-con > .elementor-widget-shortcode .msl-vf-bar) > .e-con {
		--width: auto;
		width: auto;
		flex: 0 1 auto;
	}

	.e-con:has(> .e-con > .elementor-widget-shortcode .msl-vf-bar) > .e-con:has(> .elementor-widget-shortcode .msl-vf-bar) {
		flex: 1 1 0;
		min-width: min(100%, 760px);
	}

	.e-con:has(> .elementor-widget-shortcode .msl-vf-bar) > .elementor-widget-shortcode {
		width: 100%;
	}

	.msl-vf-bar {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 28px;
	}

	.msl-vf-bar > .msl-vf {
		position: relative;
		flex: 0 1 auto;
		flex-direction: row;
		gap: 28px;
		margin: 0;
		min-width: 0;
	}

	/* Each box as wide as the sorting dropdown, all three shrink together on narrow screens. */
	.msl-vf-bar .msl-vf__field {
		flex: 0 1 var(--msl-vf-box, 355px);
		width: var(--msl-vf-box, 355px);
	}

	.msl-vf-bar > .woocommerce-ordering {
		flex: 0 1 var(--msl-vf-box, 355px);
		min-width: 0;
	}

	.msl-vf-bar > .woocommerce-ordering select {
		width: 100%;
	}

	/* "Filter zurücksetzen" under the boxes, so it does not push them out of line with the sorting. */
	.msl-vf-bar .msl-vf__reset {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 0.4em;
		white-space: nowrap;
	}
}