/*
 * Styling for intl-tel-input phone fields (.sp-phone-field). Ensures the
 * enhanced input stays full-width alongside Bootstrap form fields. Reusable.
 * No floating label — intl-tel-input renders its own flag/dial-code UI.
 */

.iti {
	width: 100%;
}

.iti input.form-control {
	width: 100%;
}

.iti__selected-country-primary {
	padding-left: 14px !important;
}

/*
 * In the signup modals the phone field sits in a row of Bootstrap form-floating
 * fields, so match their height (calc(3.5rem + 2px)) to keep the row aligned. Scoped
 * to .sp-phone-wrapper so the standalone messaging field keeps the default
 * form-control height.
 */
.sp-phone-wrapper .sp-phone-field {
	height: calc(3.5rem + 2px);
	min-height: calc(3.5rem + 2px);
}