/* Internationales Telefon-Eingabefeld. Passt zum CRM-Formular-Stil. */
/* Telefonnummern sind IMMER LTR (Vorwahl links, Nummer rechts) — auch auf RTL-Seiten. direction:ltr hält
   die Vorwahl links statt sie der Seitenrichtung folgend nach rechts zu schieben. */
.iti { position: relative; display: flex; align-items: stretch; gap: 0; direction: ltr; }
.iti-toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 11px;
  border: 1px solid #E5E0D5; border-inline-end: 0;
  border-start-start-radius: 9px; border-end-start-radius: 9px;
  background: #FAF8F2; cursor: pointer; font-family: inherit; font-size: .9rem; color: #171612; white-space: nowrap;
}
.iti-toggle:hover { background: #F2EFE8; }
.iti-toggle .fi { width: 1.4em; height: 1.05em; }
.iti-dial { color: #57534b; font-variant-numeric: tabular-nums; }
.iti-toggle svg { opacity: .5; }
.iti-national {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #E5E0D5;
  font-family: inherit; font-size: .9rem; direction: ltr;
}
/* Komponente ist immer LTR (s.o.) → Vorwahl-Button links (start-Ecken rund via logische Radien),
   Eingabe rechts → rechte Ecken rund, innen flush = durchgehende Pille in beiden Seitenrichtungen. */
.iti-national { border-radius: 0 9px 9px 0; }
.iti-national:focus, .iti-toggle:focus-visible { outline: none; border-color: #1F3F33; box-shadow: 0 0 0 3px rgba(31,63,51,.1); }
.iti-national:focus { position: relative; z-index: 1; }

.iti-dropdown {
  position: absolute; top: calc(100% + 5px); inset-inline-start: 0; z-index: 60;
  width: 320px; max-width: 88vw; background: #fff; border: 1px solid #E5E0D5; border-radius: 11px;
  box-shadow: 0 12px 34px rgba(31,63,51,.14); overflow: hidden;
}
.iti-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-bottom: 1px solid #F0ECE3;
  font-family: inherit; font-size: .88rem; outline: none;
}
.iti-list { list-style: none; margin: 0; padding: 4px; max-height: 270px; overflow-y: auto; }
.iti-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .86rem;
}
.iti-opt:hover { background: #F4F1EA; }
.iti-opt .fi { flex-shrink: 0; width: 1.4em; height: 1.05em; }
.iti-opt-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iti-opt-d { color: #908a7e; font-variant-numeric: tabular-nums; direction: ltr; }
html[dir="rtl"] .iti-national { direction: ltr; text-align: left; }