/**
 * Input giữ mã xã bị ẩn khỏi mắt người dùng nhưng PHẢI còn trong DOM và còn
 * focusable-tree để React tiếp tục quản lý giá trị. Vì vậy dùng kỹ thuật ẩn
 * bằng clip thay vì display:none — display:none có thể khiến một số trình duyệt
 * bỏ qua input khi submit và khiến React mất tham chiếu.
 */
.vn-ward-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;
}

/**
 * Dropdown xã tự dựng lại cấu trúc `.wc-blocks-components-select` của Blocks nên
 * đã thừa hưởng toàn bộ style của ô Tỉnh/Thành phố. Chỗ này chỉ còn phải gỡ hai
 * thứ mà wrapper gốc (vốn là ô text) áp lên.
 *
 * ⚠️ MỌI SELECTOR Ở ĐÂY PHẢI BÁM VÀO `[data-vn-ward-field]` — phần tử do plugin
 * tự tạo. Div `.wc-block-components-text-input` bọc ngoài do React quản lý
 * `className`, nên class nào ta gắn lên đó cũng có thể bị ghi đè lúc re-render.
 * Bản trước bám vào class tự gắn (`.vn-ward-field`) và đã hỏng đúng như vậy:
 * nhãn gốc không bị ẩn nên đè lên chữ trong dropdown, `margin-top` cũng không áp
 * dụng nên ô xã tụt xuống 12px so với ô Tỉnh/Thành phố.
 */

/*
 * Nhãn nổi của ô text gốc. Input mã luôn rỗng (giá trị nằm ở dropdown) nên
 * WooCommerce không gắn `.is-active` → nhãn nằm giữa ô và đè lên chữ của
 * dropdown. Chỉ ẩn khi dropdown đã thực sự được chèn: teardown gỡ container ra
 * là nhãn hiện lại, ô trở về input text bình thường cho nước khác VN.
 */
.wc-block-components-text-input:has( > [data-vn-ward-field] ) > label {
	display: none !important;
}

/*
 * `.wc-block-components-text-input` đã có margin-top 12px, mà
 * `.wc-block-checkout__form .wc-blocks-components-select` cộng thêm 12px nữa →
 * 24px, đẩy ô xã lệch hẳn so với ô Tỉnh/Thành phố nằm cùng hàng.
 *
 * `!important` là cần: selector của WooCommerce có 2 class (0,2,0) nên chấp
 * được selector một class ở đây, mà thứ tự nạp CSS lại do LiteSpeed gộp file
 * quyết định — không dựa vào được.
 */
[data-vn-ward-field] {
	margin-top: 0 !important;
}

.vn-ward-select:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
 * Nhãn nổi của dropdown xã nằm BÊN TRONG `.wc-block-components-text-input` nên
 * ăn kèm quy tắc nhãn của ô text gốc:
 *
 *     .wc-block-components-text-input label           { top: 25px; font-size: 16px;
 *                                                       line-height: 22px;
 *                                                       transform: translateY( -50% ) }
 *     .wc-block-components-text-input.is-active label { top: 6px; transform: scale( .82 ) }
 *
 * Ô Tỉnh/Thành phố không dính mớ này vì nó không nằm trong wrapper text-input.
 *
 * Ta muốn nhãn xã LUÔN hiển thị đúng như nhãn của select Blocks. Chỉ chặn
 * `transform` là chưa đủ: `.is-active` (0-2-1) còn cao hơn selector nhãn select
 * của Blocks (0-2-0), nên phải chốt lại cả bộ — giá trị dưới đây chép nguyên từ
 * `.wc-blocks-components-select .wc-blocks-components-select__label`, tức là
 * đúng những gì ô Tỉnh/Thành phố đang dùng.
 *
 * KHÔNG chốt `left`/`inset-inline-start`: Blocksy đè `16px !important` cho mọi
 * nhãn của cả hai loại ô, chốt ở đây sẽ làm nhãn xã lệch khỏi nhãn tỉnh.
 */
[data-vn-ward-field] .wc-blocks-components-select__label {
	top: 6px !important;
	font-size: 13px !important;
	line-height: 16px !important;
	transform: none !important;
}

/*
 * Quy tắc giấu ô chọn quốc gia KHÔNG nằm ở đây — nó do
 * `Assets::country_inline_css()` bơm vào, và chỉ khi cửa hàng bán độc nhất cho
 * VN. Xem ghi chú ở hàm đó.
 */