:root {
  --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.2/build/img/flags.png");
  --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.2/build/img/flags@2x.png");
  --iti-path-globe-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.2/build/img/globe.png");
  --iti-path-globe-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.2/build/img/globe@2x.png");
}

.iti {
  width: 100%;
}

.iti input.iti__tel-input {
  width: 100%;
  min-height: 40px;
  max-height: 40px;
  padding: 4px 4px 4px 0;
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  border-radius: var(--border-radius-sm, 8px);
  font-family: "Golos Text", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-strong, #1c1c1c);
  background: var(--surface-primary-background, #fff);
}

.iti input.iti__tel-input::placeholder {
  color: var(--text-placeholder, #b6b6b6);
}

.iti input.iti__tel-input.has-error,
.has-error .iti input.iti__tel-input {
  border-color: var(--surface-negative-border, #ffb4c2);
}

.iti__country-container {
  padding: 4px;
}

.iti__selected-country {
  border-radius: var(--border-radius-sm, 8px) 0 0 var(--border-radius-sm, 8px);
}

.iti__selected-country-primary {
  gap: 2px;
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--surface-primary-border, #e3e3e3);
}

.iti__selected-country .iti__flag {
  border-radius: 3px;
  box-shadow: none;
  transform: scale(1.25);
  transform-origin: center;
}

.iti__arrow {
  width: 12px;
  height: 12px;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23777777' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.iti__dropdown-content {
  margin-top: 2px;
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  border-radius: var(--border-radius-sm, 8px);
  background: var(--surface-primary-background, #fff);
  box-shadow: 0 8px 16px 0 rgba(8, 40, 13, 0.07), 0 0 8px 0 rgba(8, 40, 13, 0.02);
  overflow: hidden;
}

.iti__search-input-wrapper {
  position: relative;
  padding: 8px;
  background: var(--surface-secondary-background, #f4f4f4);
  border-bottom: 1px solid var(--surface-secondary-border, #e3e3e3);
}

.iti__search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--surface-primary-border, #e3e3e3);
  border-radius: var(--border-radius-sm, 8px);
  background: var(--surface-primary-background, #fff);
  font-family: "Golos Text", sans-serif;
  font-size: 14px;
}

.iti__search-icon {
  left: 12px;
}

.iti__search-icon-svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-placeholder, #b6b6b6);
}

.iti__country-list {
  max-height: 304px;
  padding: 4px;
}

.iti__country {
  gap: 4px;
  padding: 8px;
  border-radius: var(--border-radius-sm, 8px);
}

.iti__country.iti__highlight {
  background-color: var(--modifier-hover-light, #f4f4f4);
}

.iti__country-name,
.iti__dial-code {
  color: var(--text-strong, #1c1c1c);
  text-wrap: balance;
  font-family: "Golos Text VF", "Golos Text", sans-serif;
  font-size: var(--text-size-sm, 0.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--text-height-sm, 1.25rem);
}

.iti__dial-code {
  margin-left: -2px;
}

.iti__dial-code::before {
  content: "(";
}

.iti__dial-code::after {
  content: ")";
}