/**
 * 鄉鎮市區下拉樣式。
 *
 * 原本的 city input 不能直接 display:none —— Blocks 的驗證會去讀它，
 * 某些瀏覽器對隱藏的必填欄位也會有奇怪行為，所以用視覺上移除、
 * 但仍保留在無障礙樹之外的方式處理。
 */

/* Blocks 情境：整個原欄位（input + 浮動 label）視覺上移除，
   input 仍留在 DOM 供 WooCommerce 驗證讀值。 */
.swk-field--hidden,
.swk-city-input--hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.swk-district-field {
	margin-top: 16px;
}

.swk-district-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875em;
	line-height: 1.4;
	color: var(--swk-muted, #6b7280);
}

.swk-district-select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--swk-border, #dadde2);
	border-radius: var(--swk-radius, 8px);
	background-color: var(--swk-field-bg, #fff);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	appearance: none;
	background-image: url( 'data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E' );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	padding-right: 38px;
}

.swk-district-select:focus {
	outline: none;
	border-color: var(--swk-accent, #0f6efd);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--swk-accent, #0f6efd) 22%, transparent );
}

.swk-district-select:disabled {
	background-color: var(--swk-field-disabled-bg, #f3f4f6);
	color: var(--swk-muted, #6b7280);
	cursor: not-allowed;
}

/* Blocks 的地址表單是 flex-wrap 容器，欄位靠 flex-basis 決定寬度。
   不指定的話我們插入的欄位會縮成內容寬度（約 150px），跟其他欄位對不齊。 */
.wc-block-components-address-form .swk-district-field {
	flex: 1 0 100%;
	width: 100%;
	min-width: 0;
}

.wc-block-components-address-form .swk-district-select {
	margin-top: 0;
}