.cme-phone-field {
	display: block;
	width: 100%;
}

.cme-phone-field > label,
.cme-phone-field > .cme-phone-label {
	display: block;
	margin-bottom: 0.45rem;
	font-weight: 600;
}

.cme-phone-control {
	display: flex;
	width: 100%;
	min-width: 0;
	min-height: 52px;
	overflow: hidden;
	background: #f8f9fa;
	border: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cme-phone-control:focus-within {
	border-color: #8493a6;
	box-shadow: 0 0 0 3px rgba(132, 147, 166, 0.15);
}

.cme-phone-control select.cme-phone-code,
.cme-phone-control input.cme-phone-number {
	box-sizing: border-box !important;
	height: auto !important;
	min-height: 52px !important;
	margin: 0 !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #475569;
}

/* WooCommerce Checkout Block keeps its own floating-label field markup. */
@keyframes cmePhoneAutofill {
	from { opacity: 0.999; }
	to { opacity: 1; }
}

.wc-block-components-address-form__phone input:-webkit-autofill {
	animation-name: cmePhoneAutofill;
	animation-duration: 0.01s;
}

.wc-block-components-text-input.cme-block-phone-field {
	display: grid;
	grid-template-columns: minmax(104px, 30%) minmax(0, 1fr);
	align-items: stretch;
	align-self: start !important;
	height: auto !important;
	min-width: 0;
}

.wc-block-components-text-input.cme-block-phone-field .cme-phone-code {
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
	height: auto;
	min-width: 0 !important;
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
	padding: 0 34px 0 16px;
	background: #fff;
	border: 1px solid #757575;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	box-shadow: none;
	color: #333;
	font: inherit;
}

.wc-block-components-text-input.cme-block-phone-field input {
	grid-column: 2;
	grid-row: 1;
	min-width: 0 !important;
	width: 100% !important;
	background: #fff !important;
	border: 1px solid #757575 !important;
	border-radius: 0 4px 4px 0 !important;
	box-shadow: none !important;
}

.wc-block-components-text-input.cme-block-phone-field label {
	grid-column: 2;
	grid-row: 1;
}

.wc-block-components-text-input.cme-block-phone-field .wc-block-components-validation-error {
	grid-column: 1 / -1;
	grid-row: 2;
}

.cme-phone-control select.cme-phone-code {
	flex: 0 0 120px;
	min-width: 0;
	width: 120px !important;
	padding: 0 34px 0 16px !important;
	border-right: 1px solid #e1e6eb !important;
	font-weight: 400;
	cursor: pointer;
}

.cme-phone-code[disabled],
.woocommerce form .cme-phone-country-field select[disabled] {
	opacity: 1;
	cursor: not-allowed;
	color: #475569;
	-webkit-text-fill-color: #475569;
}

.cme-password-policy-active .woocommerce-password-strength,
.cme-password-policy-active .woocommerce-password-hint,
.cme-password-policy-active .wc-block-components-password-strength {
	display: none !important;
}

.cme-password-policy-rules {
	display: none;
	margin: 8px 0 20px;
	padding: 0;
	list-style: none;
	color: #b42318;
}

.cme-password-policy-rules.is-visible {
	display: block;
}

.cme-password-policy-rules li::before {
	content: "\2717";
	display: inline-block;
	width: 1.4em;
}

.cme-password-policy-rules li.is-valid {
	color: #067647;
}

.cme-password-policy-rules li.is-valid::before {
	content: "\2713";
}

.cme-phone-control input.cme-phone-number {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	padding: 0 20px !important;
}

/* WooCommerce checkout renders the selector and number as adjacent fields. */
.woocommerce form .form-row.cme-phone-country-field,
.woocommerce form .form-row.cme-phone-number-field {
	box-sizing: border-box;
	margin-bottom: 1.25rem;
}

.woocommerce form .form-row.cme-phone-country-field {
	clear: both;
	float: left;
	width: 30%;
	padding-right: 0;
}

.woocommerce form .form-row.cme-phone-number-field {
	clear: none;
	float: right;
	width: 70%;
	padding-left: 0;
}

.woocommerce form .cme-phone-number-field > label {
	visibility: hidden;
}

.woocommerce form .cme-phone-country-field > label {
	position: relative;
	z-index: 2;
	width: max-content;
	white-space: nowrap;
}

.woocommerce form .cme-phone-country-field select,
.woocommerce form .cme-phone-number-field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	background: #f8f9fa;
	border: 1px solid transparent;
	box-shadow: none;
}

.woocommerce form .cme-phone-country-field select {
	border-right: 1px solid #e1e6eb;
	border-radius: 0;
	font-weight: 400;
}

.woocommerce form .cme-phone-number-field input {
	border-radius: 0;
}

.woocommerce form .cme-phone-country-field select:focus,
.woocommerce form .cme-phone-number-field input:focus {
	position: relative;
	z-index: 1;
	border-color: #8493a6;
	box-shadow: 0 0 0 3px rgba(132, 147, 166, 0.15);
}

@media (max-width: 520px) {
	.wc-block-components-text-input.cme-block-phone-field {
		grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
	}

	.cme-phone-control select.cme-phone-code {
		flex-basis: 108px;
		width: 108px !important;
		padding-left: 12px !important;
	}

	.woocommerce form .form-row.cme-phone-country-field {
		width: 32%;
	}

	.woocommerce form .form-row.cme-phone-number-field {
		width: 68%;
	}
}