/*
 * Input OTP: one-time-code boxes in the style of shadcn's InputOTP.
 * Needs ui/tokens.css and ui/otp.js. See ui/README.md.
 */
.kp-otp { position: relative; display: flex; justify-content: center; margin: 4px 0 8px; }

/* Until otp.js runs, the real input is shown as a normal field. */
.kp-otp:not(.is-ready) .kp-otp-slots { display: none; }

.kp-otp.is-ready .kp-otp-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; outline: none;
  color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0;
  opacity: 0; cursor: text; z-index: 1;
}
.kp-otp.is-ready .kp-otp-input::selection { background: transparent; }

.kp-otp-slots { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 350px; }

.kp-otp-slot {
  position: relative; display: grid; place-items: center;
  flex: 1 1 0; min-width: 0; height: 58px; box-sizing: border-box;
  font: 500 22px/1 "DM Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--kp-text); background: var(--kp-field);
  border: 1px solid var(--kp-field-line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.kp-otp-slot.is-filled { border-color: var(--kp-field-line-hover); }

.kp-otp-slot.is-active {
  border-color: var(--kp-ember); box-shadow: 0 0 0 4px var(--kp-focus-ring);
}

.kp-otp-slot.has-caret::after {
  content: ""; width: 1.5px; height: 24px; background: var(--kp-text);
  animation: kp-otp-caret 1s step-end infinite;
}
@keyframes kp-otp-caret { 50% { opacity: 0; } }

.kp-otp[aria-invalid="true"] .kp-otp-slot { border-color: var(--kp-danger); }

@media (max-width: 380px) {
  .kp-otp-slot { height: 52px; font-size: 20px; }
  .kp-otp-slots { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-otp-slot.has-caret::after { animation: none; }
}