/* ============================================================
   TFA — Two-Factor Authentication styles
   ============================================================ */

/* Auth pages (login, verify) */
.tfa-auth-page {
  padding-top: 4em;
}

/* TOTP setup page */
.tfa-totp-page {
  padding-top: 3em;
}

/* QR code image */
.tfa-qr-img {
  max-width: 220px;
}

/* Manual TOTP secret text */
.tfa-totp-secret {
  letter-spacing: 0.15em;
  font-size: 1.1em;
}

/* OTP digit boxes */
.otp-boxes {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.otp-box {
  width: 3rem;
  height: 3.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  border: 2px solid #ced4da;
  border-radius: 0.375rem;
  background: #fff;
  caret-color: transparent;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.otp-box:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.otp-box.otp-filled {
  border-color: #6c757d;
}