/**
 * intl-tel-input fit into OBF form fields.
 * Do NOT force padding-left — the library sets it for flag + dial code.
 */

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

/* Beat `.obf-field input { padding: 0 14px }` so flag + dial code aren't clipped.
   padding-left is set by intl-tel-input as an inline style — leave it alone. */
html body .obf-field--phone .iti input.iti__tel-input,
html body .obf-field--phone input[data-obf-intl-phone] {
	width: 100%;
	height: 48px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 14px !important;
	/* Intentionally no padding-left here — library injects it for +dial code. */
}

.obf-field--phone .iti__country-container {
	margin-left: 1px;
}

.obf-field--phone .iti__selected-country {
	height: 46px;
	padding: 0 8px 0 10px;
	border-radius: var(--obf-r-input, 4px) 0 0 var(--obf-r-input, 4px);
}

.obf-field--phone .iti__selected-country:hover,
.obf-field--phone .iti__selected-country:focus {
	background: var(--obf-row-hover, #fff5ee);
}

.obf-field--phone .iti__selected-dial-code {
	font: 400 14px/1 var(--obf-sans, "Public Sans", sans-serif);
	color: var(--obf-ink, #1a1a1a);
	margin-left: 4px;
}

.obf-field--phone .obf-intl-phone--invalid,
.obf-field--phone input.obf-intl-phone--invalid {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.15);
}

.obf-phone-error {
	margin: 6px 0 0;
	font: 500 12px/1.35 var(--obf-sans, "Public Sans", sans-serif);
	color: #c0392b;
}

.obf-field--phone .iti__dropdown-content {
	border-radius: var(--obf-r-input, 4px);
	border-color: var(--obf-border-input, #ddd);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 40;
}