/* Support-only intl-tel-input integration. */
.support-phone-field .iti {
  display: block;
  width: 100%;
  color: inherit;
  font: inherit;
  direction: ltr;
  text-align: left;
  --iti-border-color: #dbe2ea;
  --iti-country-selector-bg: #fff;
  --iti-hover-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
  --iti-icon-color: #65748b;
}

.support-phone-field .iti__tel-input {
  width: 100%;
  direction: ltr;
  text-align: left;
  font: inherit;
}

.support-phone-field .iti__selected-country,
.support-phone-field .iti__search-input,
.support-phone-field .iti__country-selector {
  font: inherit;
}

.support-phone-field .iti__selected-country {
  direction: ltr;
  color: inherit;
  border-radius: 14px 0 0 14px;
}

.support-phone-field .iti__country-selector {
  width: min(360px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  border-radius: 14px;
  background: #fff;
  color: #172033;
  box-shadow: 0 18px 36px -20px rgba(23, 32, 51, .45);
  overflow: hidden;
}

.support-phone-field .iti__search-input {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #172033;
  box-shadow: none;
}

.support-phone-field .iti__country-list {
  max-height: 240px;
}

.iti--detached-country-selector {
  z-index: 10000;
  font: inherit;
}

.iti--detached-country-selector .iti__country-selector {
  border-radius: 14px;
  color: #172033;
  overflow: hidden;
}

.support-phone-error {
  display: none;
  margin-top: 7px;
  color: #b42318;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
}

.support-phone-error.is-visible {
  display: block;
}

.support-phone-field.has-error .iti__tel-input {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .12);
}

html[data-public-theme="dark"] .support-phone-field .iti {
  --iti-border-color: rgba(255, 255, 255, .14);
  --iti-country-selector-bg: var(--public-dark-surface, #2b0a47);
  --iti-hover-color: rgba(255, 255, 255, .09);
  --iti-icon-color: var(--public-dark-muted, #cabbd8);
}

html[data-public-theme="dark"] .support-phone-field .iti__country-selector,
html[data-public-theme="dark"] .support-phone-field .iti__search-input {
  background: var(--public-dark-surface, #2b0a47);
  color: var(--public-dark-ink, #fbf7ff);
}

html[data-public-theme="dark"] .support-phone-field .iti__search-input::placeholder {
  color: #aa99bb;
}

html[data-public-theme="dark"] .iti--detached-country-selector {
  background-color: rgba(18, 0, 32, .82);
  --iti-border-color: rgba(255, 255, 255, .14);
  --iti-hover-color: rgba(255, 255, 255, .09);
  --iti-icon-color: var(--public-dark-muted, #cabbd8);
}

html[data-public-theme="dark"] .iti--detached-country-selector .iti__country-selector,
html[data-public-theme="dark"] .iti--detached-country-selector .iti__search-input {
  background: var(--public-dark-surface, #2b0a47);
  color: var(--public-dark-ink, #fbf7ff);
}

html[data-public-theme="dark"] .iti--detached-country-selector .iti__search-input::placeholder {
  color: #aa99bb;
}

html[data-public-theme="dark"] .support-phone-error {
  color: #ffb4ab;
}

[dir="rtl"] .support-phone-field .iti__selected-country,
[dir="rtl"] .support-phone-field .iti__tel-input {
  direction: ltr;
}

@media (max-width: 500px) {
  .support-phone-field .iti__country-selector {
    width: auto;
    max-width: none;
  }
}