.vm-otp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
}

.vm-otp__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 248, 0.9);
}

.vm-otp__boxes {
  display: flex;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
}

.vm-otp__boxes .vm-otp__digit {
  flex: 0 0 2.85rem;
  width: 2.85rem;
  max-width: 2.85rem;
  height: 3.35rem;
  min-height: 3.35rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(244, 246, 248, 0.16);
  border-radius: 2px;
  background: var(--vm-account-field-bg, rgba(255, 255, 255, 0.04));
  color: #f4f6f8;
  font-family: var(--font-secondary, "Space Grotesk", system-ui, sans-serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  caret-color: #f4f6f8;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.vm-otp__boxes .vm-otp__digit:focus {
  outline: none;
  border-color: rgba(212, 192, 154, 0.85);
}

.vm-otp[data-invalid="true"] .vm-otp__digit {
  border-color: rgba(248, 113, 113, 0.7);
}

@media (max-width: 420px) {
  .vm-otp__boxes {
    gap: 0.35rem;
  }

  .vm-otp__boxes .vm-otp__digit {
    flex-basis: 2.45rem;
    width: 2.45rem;
    max-width: 2.45rem;
    height: 3rem;
    min-height: 3rem;
    font-size: 1.2rem;
  }
}