.wt-phone-field {
  display: grid;
  grid-template-columns: minmax(104px, 124px) minmax(0, 1fr);
  gap: 0.6rem;
  width: 100%;
  align-items: stretch;
}

.wt-phone-field__country,
.wt-phone-field__input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(26, 42, 84, 0.12);
  background: #fff;
  color: #314062;
  font: inherit;
  line-height: 1.2;
  box-sizing: border-box;
}

.wt-phone-field__country {
  padding: 0 0.9rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(49, 64, 98, 0.55) 50%),
    linear-gradient(135deg, rgba(49, 64, 98, 0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.wt-phone-field__input {
  padding: 0 1rem;
}

.wt-phone-field__country:focus,
.wt-phone-field__input:focus {
  outline: none;
  border-color: rgba(243, 176, 77, 0.9);
  box-shadow: 0 0 0 4px rgba(243, 176, 77, 0.16);
}

.wt-phone-field__hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .wt-phone-field {
    grid-template-columns: minmax(84px, 102px) minmax(0, 1fr);
    gap: 0.5rem;
  }
  .wt-phone-field__country {
    padding-inline: 0.75rem 1.8rem;
  }
  .wt-phone-field__input {
    padding-inline: 0.9rem;
  }
}