/* Student / Tutor OTP page - same look as the Admin login code step:
   Code sent to ... / six boxes / Change Email | Resend Code. */

#otpPage .otp-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: 400px;
}

#otpPage .otp-sent {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

#otpPage .otp-email {
  display: inline;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* the real field stays in the page for the script, but is not seen */
#otpPage .otp-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

#otpPage .field.is-busy::after { display: none; }
#otpPage .field.is-busy .otp-boxes { opacity: 0.6; }

.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}

.otp-box {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  caret-color: var(--lime);
}

.otp-box:focus { outline: none; border-color: rgba(22, 163, 74, 0.35); }

#otpPage .field.has-error .otp-box,
.otp-box.is-wrong,
.otp-box.is-wrong:focus { border-color: rgba(255, 104, 104, 0.65); }

#otpPage .resend-area { display: none; }

/* Change Email | Resend Code - joined in the middle, rounded outside */
.otp-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* equal halves, never wider than the card */
  gap: 0;
  margin-top: 4px;
  max-width: 100%;
}

.otp-pair-btn {
  width: 100%;
  padding: 0 10px;
  height: 44px; /* same height as the Admin login buttons */
  border: 1px solid var(--border-light, #2a2a2a);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: default;
  opacity: 0.6;
  box-sizing: border-box;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.otp-pair-btn:first-child { border-radius: 999px 0 0 999px; }
.otp-pair-btn:last-child  { border-radius: 0 999px 999px 0; border-left: 0; }

/* both active: dark green */
.otp-pair-btn:not(:disabled) {
  background: #14532d;
  border-color: #166534;
  color: #dcfce7;
  cursor: pointer;
  opacity: 1;
}

.otp-pair-btn:not(:disabled):hover { background: #166534; }

/* digits always clearly visible (no selection highlight / autofill tint) */
.otp-box {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  opacity: 1;
  font-size: 24px;
  line-height: 1;
}
.otp-box::selection { background: transparent; color: #ffffff; }
.otp-box:-webkit-autofill,
.otp-box:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
  caret-color: #ffffff;
}

/* Change Email | Resend Code: the site's green while active */
.otp-pair-btn:not(:disabled) {
  background: var(--lime);
  border-color: var(--lime);
  color: #050505;
}
.otp-pair-btn:not(:disabled):hover { background: var(--lime-hover, #15803d); border-color: var(--lime-hover, #15803d); }

/* ---------------------------------------------------------------------
   The page's general text-input rule (".field input[type=text]": 2px border,
   17px padding, 16px text, black fill) is MORE specific than ".otp-box" and
   was overriding the box look above. These repeat the box look with a
   stronger selector, so the student / tutor code boxes are identical to
   the Admin login's.
   --------------------------------------------------------------------- */
#otpPage .otp-boxes .otp-box {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: none;
}

#otpPage .otp-boxes .otp-box:focus,
#otpPage .otp-boxes .otp-box:focus-visible {
  border-color: rgba(22, 163, 74, 0.3);
  background: var(--surface-2);
  box-shadow: none;
  outline: none;
}

#otpPage .field.has-error .otp-boxes .otp-box,
#otpPage .otp-boxes .otp-box.is-wrong,
#otpPage .otp-boxes .otp-box.is-wrong:focus {
  border-color: rgba(255, 104, 104, 0.65);
}