/**
 * Webfromtom Telefon-Vorwahl
 *
 * Passt intl-tel-input an Elementor-Formulare an. Das Eingabefeld behält sein
 * Aussehen aus dem Elementor-Designer, ergänzt wird nur die Länderauswahl.
 */

/* Der Wrapper muss die volle Breite des Feldes einnehmen. */
.elementor-field-group .iti,
.elementor-field-type-tel .iti {
	width: 100%;
	display: block;
}

.elementor-field-group .iti > input.iti__tel-input {
	width: 100%;
}

/* Die Länderauswahl liegt über Elementor-Popups. */
.iti--detached-country-selector {
	z-index: 100000;
}

/* Trennlinie zwischen Vorwahl und Eingabefeld, damit die beiden Bereiche
   sichtbar zusammengehören, ohne die Feldgestaltung zu überschreiben. */
.iti--separate-dial-code .iti__selected-country-primary {
	border-right: 1px solid var(--iti-border-color);
}

.iti__country-selector {
	color: #000;
}

.iti__search-input {
	font-family: inherit;
}

/* Fehlermeldung unter dem Feld. */
.wft-pcc-error {
	display: block;
	margin-top: 6px;
	font-size: 0.875em;
	line-height: 1.4;
}

/* Auf schmalen Bildschirmen öffnet die Auswahl bildschirmfüllend, der
   Hintergrund darf dann nicht durchscrollen. */
@media (max-width: 500px) {
	.iti--fullscreen-popup.iti--detached-country-selector {
		z-index: 100001;
	}
}