/* ============================================================
   BMW Maps Updates — Selection Fields CSS
   Add this to the BOTTOM of bmw-product.css
   (or paste into your WordPress Customizer → Additional CSS)

   Styles the Car Model Year and Region dropdowns that appear
   inside the WooCommerce cart form above the qty + add-to-cart.
   ============================================================ */

/* ── Selection fields wrapper ── */
.bmw-sel-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 0 18px;
	margin-bottom: 0;
	width: 100%;
}

/* ── Individual field ── */
.bmw-sel-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ── Label ── */
.bmw-sel-field label {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	cursor: default;
}
.bmw-sel-req {
	color: var(--accent);
	font-family: var(--f-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* ── Select control ── */
.bmw-sel-ctrl {
	height: 48px;
	padding: 0 42px 0 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6473' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: var(--f-body);
	font-size: 15px;
	color: var(--ink);
	width: 100%;
	max-width: 360px;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
	box-shadow: none;
	outline: none;
}
.bmw-sel-ctrl:hover {
	border-color: var(--line-2);
}
.bmw-sel-ctrl:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(28,100,242,.12);
}
/* Not-yet-chosen state (placeholder option) */
.bmw-sel-ctrl:invalid,
.bmw-sel-ctrl option[value=""] {
	color: var(--muted);
}

/* ── Validation highlight ── */
.bmw-sel-ctrl.invalid {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(226,35,26,.1);
}

/* ── Mobile: full width ── */
@media (max-width: 900px) {
	.bmw-sel-ctrl { max-width: 100%; }
}