/* Empire Phone Country Code (empire-commerce/phone-cc.php). Tokens only; mirrors #checkout-v2 input styling. */
/* Row = Bricks woocommerce-form-field (row id is brxe-*, not billing_phone_field). Bricks floats the label
   permanently for any row containing a <select> (:has(select)>label, absolute at --brx-label-x) and reserves
   floating-label top padding on .input-text — so here the label sits ABOVE the row and the input is symmetric. */
#checkout-v2 :is(.brxe-woocommerce-form-field, .form-row):has(.empire-pcc) > label {
	position: static;
	inset: auto;
	transform: none;
	display: block;
	margin: 0 0 var(--gap-3xs);
	padding: 0;
	opacity: 1;
	color: var(--color-muted);
	font-size: var(--type-xs);
	line-height: var(--leading-tight);
	pointer-events: auto;
}
#checkout-v2 :is(.brxe-woocommerce-form-field, .form-row):has(.empire-pcc) .woocommerce-input-wrapper {
	display: flex;
	align-items: stretch;
	gap: var(--gap-2xs);
}
#checkout-v2 :is(.brxe-woocommerce-form-field, .form-row):has(.empire-pcc) #billing_phone {
	width: 100%;
	box-sizing: border-box;
	height: var(--control-height);
	min-height: var(--control-height);
	padding: 0 calc(var(--gap-xs) + var(--icon-s) + var(--gap-3xs)) 0 var(--gap-xs); /* right: room for the tick */
	line-height: normal;
}
.empire-pcc {
	position: relative;
	flex: 0 0 calc(var(--icon-xl) * 3);
	height: var(--control-height);
}
.empire-pcc__face {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--gap-3xs);
	height: 100%;
	padding: 0 calc(var(--gap-xs) + var(--icon-s)) 0 var(--gap-xs);
	border: var(--border-hairline) solid var(--color-line);
	border-radius: var(--radius-m);
	background: var(--color-white);
	color: var(--color-ink-me);
	font-size: var(--control-font-size);
	line-height: normal;
	transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.empire-pcc__face::after {
	content: "";
	position: absolute;
	right: var(--gap-xs);
	top: 50%;
	width: calc(var(--icon-s) / 2);
	height: calc(var(--icon-s) / 2);
	border-right: var(--border-hairline) solid currentColor;
	border-bottom: var(--border-hairline) solid currentColor;
	transform: translateY(-75%) rotate(45deg);
}
.empire-pcc__flag {
	flex: 0 0 auto;
	width: var(--icon-m);
	height: calc(var(--icon-m) * .75);
	object-fit: cover;
	border-radius: calc(var(--radius-s) / 2);
	box-shadow: 0 0 0 var(--border-hairline) var(--color-line);
}
.empire-pcc__dial {
	white-space: nowrap;
}
/* Native select over the face: real keyboard/screen-reader/mobile picker, invisible chrome. */
.empire-pcc__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	font-size: var(--control-font-size);
	appearance: none;
	-webkit-appearance: none;
}
.empire-pcc:hover .empire-pcc__face {
	border-color: var(--color-ink-soft);
}
.empire-pcc:focus-within .empire-pcc__face {
	border-color: var(--color-ink-me);
	box-shadow: 0 0 0 var(--focus-ring-width) var(--color-line);
}
.empire-pcc:has(.empire-pcc__select:focus-visible) .empire-pcc__face {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
.empire-pcc__msg {
	display: block;
	color: var(--color-error);
	font-size: var(--type-xs);
	line-height: var(--leading-tight);
}
.empire-pcc__msg:not(:empty) {
	margin-top: var(--gap-3xs);
}
/* Bricks forms (home custom-jewellery, contact): label already sits above; dropdown + number on one row. */
.brxe-form .empire-pcc-line {
	display: flex;
	align-items: stretch;
	gap: var(--gap-2xs);
	width: 100%;
}
.brxe-form .empire-pcc-line input[type=tel] {
	width: 100%;
	box-sizing: border-box;
	height: var(--control-height);
	min-height: var(--control-height);
	padding: 0 calc(var(--gap-xs) + var(--icon-s) + var(--gap-3xs)) 0 var(--gap-xs); /* right: room for the tick */
	line-height: normal;
}
/* :not(#…) lifts specificity above the form's #brxe-* element CSS border rule. */
.brxe-form .empire-pcc-line input[aria-invalid=true]:not(#empire-pcc-none) {
	border-color: var(--color-error);
}
/* 1.2.0: slot mask + valid tick. .empire-pcc__num wraps the number input; the ghost layer sits on top of it
   (pointer-events: none) and repeats the typed text invisibly so the remaining "____" slots line up after it.
   JS copies the input's font + left padding onto the ghost. */
.empire-pcc__num {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}
.empire-pcc__ghost {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: pre;
	pointer-events: none;
}
.empire-pcc__typed {
	color: transparent;
}
.empire-pcc__mask {
	color: var(--color-muted);
}
.empire-pcc__ok {
	position: absolute;
	right: var(--gap-xs);
	top: 50%;
	width: calc(var(--icon-s) * .4);
	height: calc(var(--icon-s) * .75);
	border-right: var(--focus-ring-width) solid var(--color-success);
	border-bottom: var(--focus-ring-width) solid var(--color-success);
	opacity: 0;
	transform: translateY(-60%) rotate(45deg) scale(.4);
	transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease);
	pointer-events: none;
}
.empire-pcc__num.is-ok .empire-pcc__ok {
	opacity: 1;
	transform: translateY(-60%) rotate(45deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.empire-pcc__ok {
		transition: none;
	}
}
.empire-pcc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}