/* Woo Tailwind Checkout VN
   Loading spinner + select sizing for the VN address selects. */

/* ===== Loading spinner (classic) ===== */
.wootw-cvn-loading {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}

.wootw-cvn-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid #9e9e9e;
	border-top-color: transparent;
	border-right-color: transparent;
	border-radius: 50%;
	animation: wootw-cvn-spin 500ms linear infinite;
}

@keyframes wootw-cvn-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ===== Classic checkout: full-width select2 ===== */
.woocommerce form .form-row .select2-container {
	width: 100% !important;
}

/* Country is forced to Vietnam, so hide the selector (the value stays VN and still
   drives the province/state field). */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field {
	display: none !important;
}

/* ===== Block checkout: Province + Ward row =====
   The two Select2 dropdowns are styled to match the native WooCommerce Blocks
   field (bordered box, rounded corners, floating label inside), so they line up
   with the Country / Name / Address fields around them. These rules intentionally
   override any theme select2 skin for OUR selects only (scoped to .wootw-cvn-col). */
/* The address form is `display:flex; flex-wrap:wrap; gap:0 12px` (row-gap 0) and
   native fields space themselves with margin-top:12px. Match it: a full-width
   row with margin-top:12px only (the next field supplies the gap below), and a
   12px inner column gap like the native first/last-name row. */
.wootw-cvn-row {
	display: flex;
	gap: 12px;
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
}

.wootw-cvn-col {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.wootw-cvn-col .select2-container {
	width: 100% !important;
	display: block;
}

/* Match this theme's field skin EXACTLY (it restyles block fields to:
   border rgb(207 207 213) = #cfcfd5, radius .5rem, ink text, .875rem, placeholder
   rgb(130 130 143)). Set these explicitly (not via currentColor) so the border is
   the same light grey as the Country / Name / Address fields, never dark. */
.wootw-cvn-col .select2-container--default .select2-selection--single {
	height: 50px !important;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 15px 30px 0 12px !important;
	background: #fff !important;
	color: rgb(var(--wootw-ink, 15 15 16)) !important;
	border: 1px solid rgb(207 207 213) !important;
	border-radius: 0.5rem !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	outline: none;
}

/* Locked ward (no province chosen yet): greyed out, not interactive. */
.wootw-cvn-col .select2-container--disabled .select2-selection--single {
	background: #f3f3f5 !important;
	cursor: not-allowed;
}

.wootw-cvn-col .select2-container--disabled + .wootw-cvn-label,
.select2-container--disabled .select2-selection__rendered {
	opacity: 0.6;
}

/* Focus: ink border + ink ring, like the theme's native field focus. */
.wootw-cvn-col .select2-container--open .select2-selection--single,
.wootw-cvn-col .select2-container--focus .select2-selection--single {
	border-color: rgb(var(--wootw-ink, 15 15 16)) !important;
	box-shadow: 0 0 0 1px rgb(var(--wootw-ink, 15 15 16));
}

.wootw-cvn-col .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgb(var(--wootw-ink, 15 15 16));
}

.wootw-cvn-col .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0 !important;
	right: 8px !important;
	height: 100% !important;
}

/* Floating label: centered placeholder when empty (grey), shrinks to the top when
   a value is picked (.is-active) — matches the native WC Blocks label behaviour. */
.wootw-cvn-label {
	position: absolute;
	top: 25px;
	left: 12px;
	z-index: 1;
	margin: 0;
	max-width: calc(100% - 24px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgb(130 130 143);
	transform: translateY(-50%);
	transform-origin: top left;
	transition: all 0.2s ease;
	pointer-events: none;
}

.wootw-cvn-col.is-active .wootw-cvn-label {
	top: 8px;
	transform: scale(0.82);
}

.wootw-cvn-select {
	width: 100%;
}

/* Guidance note under the address field (block + classic). */
.wootw-cvn-hint,
.woocommerce-checkout .form-row .description {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: rgb(130 130 143);
}

/* Invite-to-register line under the email field. */
.wootw-cvn-register {
	margin: 8px 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgb(var(--wootw-ink, 15 15 16));
}

.wootw-cvn-register a {
	font-weight: 600;
	color: rgb(var(--wootw-ink, 15 15 16));
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wootw-cvn-register a:hover {
	opacity: 0.75;
}

/* Inline validation error */
.wootw-cvn-has-error .select2-selection--single {
	border-color: #cc1818 !important;
}

.wootw-cvn-has-error .wootw-cvn-label {
	color: #cc1818;
}

.wootw-cvn-error {
	color: #cc1818;
	font-size: 14px;
	margin-top: 4px;
}

/* Stack on mobile, keeping the 12px rhythm. */
@media (max-width: 782px) {
	.wootw-cvn-row {
		flex-direction: column;
		gap: 12px;
	}
}