/* phone-input.css
   Make intl-tel-input fill its Bootstrap column and sit flush with the rest
   of the form. The flag sprite loads from the vendored ../img/flags.webp via
   the library CSS's own relative url() (layout preserved when vendoring), so
   no path variable is needed here. */

.phone-field { width: 100%; }

.phone-field .iti {
  width: 100%;
  display: block;
}

.phone-field .iti input.form-control,
.phone-field .iti input[type="tel"] {
  width: 100%;
}

/* Keep the country dropdown above adjacent form controls / collapse panels. */
.phone-field .iti__dropdown-content {
  z-index: 1056; /* above Bootstrap mod/collapse chrome */
}