/*
  intl-tel-input style overrides.

  Hosted in the Eloqua asset library and loaded by the WordPress site; this file
  is the source of truth for it. (The Eloqua landing pages no longer link it —
  they inline the equivalent rules in their own stylesheet.)

  Written to work on BOTH v25 and v29, because the sites upgrade independently:
  the WordPress site is on v29, the uoa-online Hugo site is still on v25. The
  one class name that matters was renamed, so both spellings are listed and
  whichever doesn't exist simply never matches.
*/

/* Neutralise the theme's ul/li styling, which otherwise indents the country
   list and wraps the country names onto two lines. `.iti__country-list` is
   unchanged between v25 and v29, so this rule needed no update. */
.iti__country-list {
    padding: 0 !important;
    white-space: nowrap !important;
    margin-left: 0px !important;
}

/*
  Stretch the widget to its column. The wrapper is display:inline-block, so
  without this it is shrink-to-fit and the phone field ends up narrower than
  every other field in the form.

  Version note: v25 names this wrapper `.iti--allow-dropdown`. v29 renamed that
  to `.iti--has-country-selector` and added `.iti--input-container`, which is
  set unconditionally (the renamed class depends on countrySelectorMode), so
  `.iti--input-container` is the safer v29 hook — it is present from v28.0.7 on.

  Do NOT collapse these to a bare `.iti`: the detached country-selector
  container (v25 `.iti--container`, v29 `.iti--detached-country-selector`) also
  carries `.iti`, and forcing that to 100% would break the fullscreen popup.

  This rule also fixes the country dropdown, not just the field. The library
  measures the wrapper ONCE when the widget is built and sizes the dropdown from
  it, and never recomputes — so if the wrapper is still shrink-to-fit at that
  moment, the dropdown is left permanently too narrow to read the country names.
*/
.iti--allow-dropdown,
.iti--input-container {
    width: 100% !important;
    color: black;
}