/* T-291 — intl-tel-input layout inside WooCommerce billing form rows.
   The vendor CSS (assets/vendor/intl-tel-input/<ver>/css/intlTelInput.min.css)
   handles the widget itself (flags served from ../img/*.webp, relative). These
   rules just let it fill the WooCommerce field width and style our error text. */

.tech-intl-phone-row .iti {
	width: 100%;
	display: block;
}
.tech-intl-phone-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
.tech-intl-phone-row .iti input.input-text {
	width: 100%;
}

/* Keep the country dropdown above sticky checkout summaries. */
.iti__dropdown-content {
	z-index: 1000;
}
.iti__search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 0.75em;
}

/* Inline validation message + invalid state. */
.tech-phone-error {
	display: block;
	margin-top: 0.35em;
	color: #b32d2e;
	font-size: 0.85em;
	line-height: 1.3;
}
input.tech-phone-invalid,
.tech-intl-phone-row input.tech-phone-invalid {
	border-color: #b32d2e;
	box-shadow: 0 0 0 1px #b32d2e inset;
}