/* Keep intl-tel-input full-width inside the theme's form fields (the widget wraps
   the input in a .iti element that is inline-block by default). */
.iti { display: block; width: 100%; }
.iti input,
.iti input[type="tel"],
.iti input[type="text"] { width: 100%; }
/* Match the theme control height/radius so the flag button lines up cleanly. */
.ppt-efield .iti input,
.le-field .iti input,
.le-social-in.iti__tel-input { width: 100%; }
/* In the listing editor's social repeater the input is a flex child; once wrapped in
   .iti, the wrapper must take that growing slot instead. */
.le-social-row .iti { flex: 1 1 auto; min-width: 0; }

/* The country list (2026-10-07). The library paints its list white but lets the text
   inherit, so on a dark page (the member hub in dark mode, a dark design) the country
   names came out light-on-white and unreadable. Give the list its own dark text, then
   let the member hub repaint the whole picker with its light / dark tokens. On phones
   the list opens full-screen inside .iti--container, appended to <body> — that's why
   it is raised over the bottom Dock (z 8990) and the hub's floating Add button. */
.iti__dropdown-content { color: #1f2329; }
.iti__search-input { background: #fff; color: #1f2329; padding: 10px 12px; font: inherit; font-size: 15px; outline: none; }
.iti--container { z-index: 9100; }
.ppt-hub .iti,
.ppt-hub .iti--container {
  --iti-dropdown-bg: var(--hub-panel);
  --iti-border-color: var(--hub-line-2);
  --iti-dialcode-color: var(--hub-muted);
  --iti-hover-color: var(--hub-soft-2);
  --iti-arrow-color: var(--hub-ink-2);
}
.ppt-hub .iti__dropdown-content { color: var(--hub-ink); }
.ppt-hub .iti__search-input { background: var(--hub-bg); color: var(--hub-ink); }
.ppt-hub .iti__search-input::placeholder { color: var(--hub-muted); }