/* ==========================================================================
   3Bee Forgot Password Page - page-only rules.
   The mesh, step entrance, field focus and error states, OTP grid, password
   toggle and loading spinner are shared with login and register in
   auth.css. The one page-only rule is the 8-cell code row below.
   ========================================================================== */

/* Reset codes have 8 digits (PHASE 22 round 2, decision I2); the login code
   keeps the 6-cell auth.css grid. Eight cells take tighter gaps, a shorter
   box, a smaller radius and a fluid digit so the row still fits a 360px
   phone (about 34px per cell) and grows back to ~59x72 boxes on desktop. */
.otp-boxes-container[data-digits="8"] {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(4px, 1.2vw, 10px);
  max-width: 540px;
}

.otp-boxes-container[data-digits="8"] .otp-box {
  height: clamp(48px, 8vw, 72px);
  border-radius: 14px;
  font-size: clamp(1.125rem, 5vw, 1.5rem);
}