.onboarding_status form .full .intl-phone-fields {
  display: grid;
  grid-template-columns: minmax(10em, 35%) minmax(0, 1fr);
}

/* Once the JS widget is running, the closed control shows only the flag and
   dial code, so the country column can hug its content. The wide column above
   remains for the no-JS native-select fallback. */
.onboarding_status form .full .intl-phone-fields:has(.intl-phone-widget) {
  grid-template-columns: max-content minmax(0, 1fr);
}

.onboarding_status form .full .intl-phone-country {
  border-radius: 3px 0 0 3px;
  border-right: 0;
  min-width: 0;
  overflow: hidden;
  padding-right: 1.75em;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.onboarding_status form .full .intl-phone-national {
  border-radius: 0 3px 3px 0;
  min-width: 0;
  width: 100%;
}

.onboarding_status form .full .intl-phone-fields:focus-within {
  border-radius: 3px;
  box-shadow: 0 0 3px #00a9e0;
}

.onboarding_status form .full .intl-phone-fields:focus-within .intl-phone-country,
.onboarding_status form .full .intl-phone-fields:focus-within .intl-phone-national {
  border-color: #00a9e0;
  box-shadow: none;
}

.onboarding_status form .full .intl-phone-country:focus {
  outline: none;
  position: relative;
  z-index: 1;
}

/* Searchable country selector (intl_phone_select.js). The native select is
   hidden only once the JS widget is running, so it remains the no-JS
   fallback. The button mirrors the page's text-input styling. */
.onboarding_status form .full .intl-phone-country.intl-phone-country-hidden {
  display: none;
}

.onboarding_status form .full .intl-phone-widget {
  min-width: 0;
  position: relative;
}

.onboarding_status form .full .intl-phone-select-btn {
  align-items: center;
  background: white;
  border: solid 1px #d6d8d9;
  border-radius: 3px 0 0 3px;
  border-right: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  color: #333;
  cursor: pointer;
  display: flex;
  font-size: 100%;
  gap: 0.35em;
  height: 2.5em;
  margin-bottom: 0.5em;
  min-width: 0;
  padding: 0 0.4em 0 0.5em;
  text-align: left;
  width: 100%;
}

.onboarding_status form .full .intl-phone-select-btn:focus {
  border-color: #00a9e0;
  outline: none;
  position: relative;
  z-index: 1;
}

.onboarding_status form .full .intl-phone-flag {
  flex: none;
  font-size: 1.15em;
  line-height: 1;
}

.onboarding_status form .full .intl-phone-flag.is-country-flag {
  width: 1.333em;
  height: 1em;
  box-sizing: border-box;
  border: 1px solid rgba(28, 44, 52, 0.2);
  border-radius: 2px;
  background-color: rgba(127, 142, 150, 0.08);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.onboarding_status form .full .intl-phone-flag.is-satellite {
  width: 1.333em;
  text-align: center;
}

/* Country name is hidden on the closed button (flag + dial code only); the
   full name still shows in the dropdown list and the button's aria-label. */
.onboarding_status form .full .intl-phone-select-name {
  display: none;
}

.onboarding_status form .full .intl-phone-select-dial {
  color: #333;
  flex: none;
  white-space: nowrap;
}

.onboarding_status form .full .intl-phone-caret {
  color: #8695a0;
  flex: none;
  font-size: 0.8em;
}

.onboarding_status form .full .intl-phone-dropdown {
  background: white;
  border: 1px solid #d6d8d9;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #333;
  left: 0;
  margin-top: -0.35em;
  max-width: 90vw;
  min-width: 100%;
  position: absolute;
  top: 100%;
  width: 24em;
  z-index: 100;
}

.onboarding_status form .full .intl-phone-search {
  border: 0;
  border-bottom: 1px solid #e3e6e8;
  border-radius: 3px 3px 0 0;
  box-shadow: none;
  font-size: 0.95em;
  height: 2.4em;
  margin-bottom: 0;
  padding: 0 0.75em;
  width: 100%;
}

.onboarding_status form .full .intl-phone-search:focus {
  outline: none;
}

.onboarding_status form .full .intl-phone-dropdown:focus-within .intl-phone-search {
  border-bottom-color: #00a9e0;
}

.onboarding_status form .full .intl-phone-list {
  list-style: none;
  margin: 0;
  max-height: 16em;
  overflow-y: auto;
  padding: 0.25em 0;
}

.onboarding_status form .full .intl-phone-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.5em;
  padding: 0.4em 0.75em;
}

.onboarding_status form .full .intl-phone-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding_status form .full .intl-phone-option-dial {
  color: #8695a0;
  flex: none;
  font-size: 0.9em;
  white-space: nowrap;
}

.onboarding_status form .full .intl-phone-option:hover,
.onboarding_status form .full .intl-phone-option.is-highlighted {
  background: #eef7fb;
}

.onboarding_status form .full .intl-phone-option[aria-selected="true"] .intl-phone-option-name {
  color: #00a9e0;
  font-weight: 600;
}