/* ════════════════════════════════════════════════════════════════
   phone-input.css — theme-aware overrides for intl-tel-input.

   WHY: the library ships with light-mode hardcoded colours. On our dark
   signup / settings / agent pages the dropdown panel becomes unreadable
   (dark text on dark background). We override everything chrome-related
   with semantic tokens so the widget tracks our light/dark themes the
   same way the rest of the app does (CLAUDE.md: never hardcode colours
   in page CSS — use tokens from app.css).

   Scope: every input wired with `data-phone-input` (signup, settings,
   customer order/booking forms). Loaded via base.html / app/base.html /
   inline in agent forms — same places phone-input.js loads.
   ════════════════════════════════════════════════════════════════ */

/* ── Wrapper sizing ─────────────────────────────────────────────
   The .iti container must fill the input's slot or the dial-code badge
   ends up floating in a too-narrow column. */
.iti { width: 100%; }
.iti__tel-input { width: 100%; }

/* ── Dropdown panel ─────────────────────────────────────────────
   Country list popover — was the worst offender (dark text on dark
   background). Use --card-2 for the panel, --text for option labels,
   --border for the outline, --hover-soft for the highlighted row. */
.iti__dropdown-content,
.iti__country-list {
  background: var(--card-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-lg) !important;
}

.iti__country {
  color: var(--text) !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
  background: var(--hover-soft) !important;
}

.iti__dial-code {
  color: var(--muted) !important;
}

.iti__divider {
  border-bottom-color: var(--border) !important;
}

/* ── Search box (when enabled) ───────────────────────────────────
   Library renders a search input at the top of the country list on
   some versions; match our form-input look. */
.iti__search-input {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* ── Selected country button (the flag + dial code on the left) ───
   Use --hover-soft for hover state so it doesn't flash white on dark. */
.iti__selected-country:hover,
.iti__selected-country-primary:hover {
  background: var(--hover-soft) !important;
}

.iti__selected-dial-code {
  color: var(--muted) !important;
}

/* ── Inline error helper ─────────────────────────────────────────
   phone-input.js creates a .phone-error div after the wrapper; it
   already uses var(--red) inline, but giving it a class lets pages
   override spacing/size without re-touching JS. */
.phone-error {
  font-size: 11px;
  color: var(--red, #ef4444);
  margin-top: 4px;
  line-height: 1.4;
}