.sto-phone-control {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 48px;
  overflow: hidden;
  color: #f5f7fb;
  background: #0f131a;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sto-phone-control:focus-within {
  border-color: var(--red, var(--loyalty-accent, #ef6b5a));
  box-shadow: 0 0 0 3px rgba(239, 107, 90, .22);
}

.sto-phone-control:has(.sto-phone-input:user-invalid),
.sto-phone-control:has(.sto-phone-input[aria-invalid="true"]) {
  border-color: #ff7464;
  background: rgba(216, 74, 58, .08);
}

.sto-phone-prefix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding-inline: 12px;
  color: var(--red, var(--loyalty-accent, #ef6b5a));
  border-inline-end: 1px solid rgba(255, 255, 255, .14);
  font: 800 1rem/1 "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sto-phone-control input.sto-phone-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 11px 12px;
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.sto-phone-control input.sto-phone-input::placeholder {
  color: #7f8998;
  opacity: 1;
}

@media (pointer: coarse) {
  .sto-phone-control { min-height: 52px; }
  .sto-phone-control input.sto-phone-input { min-height: 50px; }
}

@media (max-width: 480px) {
  .sto-phone-prefix { min-width: 48px; padding-inline: 10px; }
}