/**
 * City dropdown styling for the Cart & Checkout blocks.
 *
 * The injected dropdown reuses WooCommerce's own select classes, so on a normal
 * store it inherits the theme's field styling and matches the State/County field
 * beside it. Everything here is a fallback for the case where those classes have
 * been renamed or are not loaded.
 *
 * The fallback rules use :where() so they carry ZERO specificity — WooCommerce's
 * and the theme's own styles always win, and this file can never fight them.
 */

.okw-city-field {
	margin: 0 0 1.5em;
}

.okw-city-field select {
	width: 100%;
}

:where( .okw-city-field select ) {
	box-sizing: border-box;
	padding: 0.75em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background-color: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.375;
}

:where( .okw-city-field label ) {
	display: block;
	margin-bottom: 0.25em;
	font-size: 0.875em;
}

/**
 * The real city field stays mounted so React keeps ownership of it and the form
 * still submits normally — it is simply not shown. Hiding the whole wrapper,
 * rather than just the input, is what removes the floating label that would
 * otherwise overlap the dropdown.
 */
.okw-city-source--hidden {
	display: none !important;
}