/**
 * Anpassung von intl-tel-input an das Shop-Layout (Bootstrap 5).
 *
 * Die Bibliothek legt einen Wrapper .iti um das Eingabefeld und blendet den
 * Laenderwaehler links darueber ein. Damit das Feld weiter wie ein normales
 * .form-control aussieht und die volle Spaltenbreite einnimmt, sind hier nur
 * ein paar gezielte Korrekturen noetig.
 */

:root {
	--iti-border-color: #ced4da;
	--iti-country-selector-bg: #ffffff;
	--iti-icon-color: #495057;
	--iti-hover-color: rgba(0, 0, 0, .06);
	--iti-spacer-horizontal: 12px;
}

/* Wrapper wie ein Blockelement behandeln, sonst bleibt das Feld schmal */
.iti {
	display: block;
	width: 100%;
}

.iti > input.iti__tel-input,
.iti > input.iti__tel-input[type="tel"],
.iti > input.iti__tel-input[type="text"] {
	width: 100%;
}

/* Trennlinie zwischen Vorwahl und Nummer, damit beide Bereiche lesbar bleiben.
   Sie gehoert auf .iti__selected-country und NICHT auf den umgebenden
   .iti__country-container: das Eingabefeld hat position:relative mit z-index:0
   und uebermalt eine Linie auf dem Container mit seinem Hintergrund.
   .iti__selected-country liegt dagegen mit z-index:1 darueber. */
.iti__selected-country {
	border-right: 1px solid var(--iti-border-color);
}

.iti__selected-country-primary {
	padding-right: 10px;
}

.iti__selected-dial-code {
	font-weight: 500;
	padding-right: var(--iti-spacer-horizontal);
}

/* Tastaturbedienung sichtbar machen */
.iti__selected-country:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: -2px;
	border-radius: .25rem;
}

/* Laenderliste an die Formularoptik angleichen */
.iti__country-list,
.iti__search-input {
	font-size: 1rem;
}

.iti__country-list {
	border-radius: .375rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* Fehlerzustand: rote Umrandung um das gesamte Feld plus Hinweistext */
.iti--invalid > input.iti__tel-input,
.iti--invalid > input.iti__tel-input:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
}

.iti--invalid .iti__selected-country {
	border-right-color: #dc3545;
}

.iti-error {
	display: block;
	color: #dc3545;
	font-size: .875rem;
	margin-top: .35rem;
}

.iti-error:empty {
	display: none;
}

/* Auf schmalen Bildschirmen oeffnet die Bibliothek die Liste als Vollbild.
   Der Hintergrund soll dabei nicht durchscheinen. */
.iti--fullscreen-popup .iti__country-list {
	border-radius: 0;
}