/**
 * CF7 to Bitrix24 — Frontend tel field styles.
 */

/* ── Fix flag sprite path (library uses relative ../img/, we override) ──── */
.iti__flag {
	background-image: url('../intl-tel-input/img/flags.webp') !important;
}

@media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 2dppx ) {
	.iti__flag {
		background-image: url('../intl-tel-input/img/flags@2x.webp') !important;
	}
}

/* ── Wrapper fills CF7 control ──────────────────────────────────────────── */
.wpcf7 .iti {
	display: block;
	width: 100%;
}

.wpcf7 .iti input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* ── Dial code button — always visible regardless of theme ──────────────── */
.iti__selected-country,
.iti__selected-country:hover,
.iti__selected-country:focus,
.iti__selected-country-arrow,
.wpcf7 .iti__selected-country,
.wpcf7 .iti__selected-country:hover,
.wpcf7 .iti__selected-country:focus {
	background-color: transparent !important;
	background: transparent !important;
}

/* Dial code text color — inherit from surrounding context */
.iti__selected-dial-code {
	color: inherit !important;
	font-size: inherit !important;
	opacity: 1 !important;
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.iti__dropdown-content {
	z-index: 9999 !important;
}

/* ── Validation error state ─────────────────────────────────────────────── */
.cf7b24-tel-error input[type="tel"] {
	border-color: #d63638 !important;
	outline: none;
	box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.2) !important;
}

.cf7b24-tel-error-msg {
	display: block;
	color: #d63638;
	font-size: 13px;
	margin-top: 4px;
}