/**
 * @file
 * International telephone widget fixes for TPEMIS webforms.
 *
 * The theme's global input padding (16px) is narrower than the flag button
 * (~46px), which slid the typed number underneath the flag. In
 * separateDialCode mode intl-tel-input manages the input padding inline, but
 * these rules keep the widget correct when that mode is unavailable (e.g.
 * the utils script failed to load) and make the dial code legible.
 */

/* The widget wrapper must span the field like every other input. */
.iti {
  width: 100%;
}

/* Fallback: clear the flag button when the plugin has not set an inline
   padding (plain allow-dropdown mode). */
.iti--allow-dropdown:not(.iti--separate-dial-code) input.form-tel {
  padding-left: 52px;
}

/* The visible dial code next to the flag. */
.iti__selected-dial-code {
  margin-left: 6px;
  font-weight: 600;
  color: var(--tp-color-text-default, #1a2230);
}