/* Entrar com código do WhatsApp: tela do celular e tela dos 6 dígitos.
   Tokens vêm do shared.css; o que é comum às telas de auth mora no
   auth-shared.css. Aqui só o que é desta tela, prefixado com `wl-`. */

.wl-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-decoration: none;
}
.wl-back:hover { color: var(--ink); }
.wl-back i { font-size: 15px; }

/* Seis caixas, uma por dígito */
.wl-otp {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.wl-otp-box {
  width: 100%; min-height: 60px;
  padding: 0; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600;
  color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wl-otp-box:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
.wl-otp.is-invalid .wl-otp-box { border-color: var(--red); }
.wl-otp.is-invalid .wl-otp-box:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }

.wl-sent {
  margin: 16px 0 0; text-align: center;
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
}
.wl-sent strong { color: var(--ink); font-weight: 800; }

.wl-resend {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 800; color: var(--orange-600);
  cursor: pointer;
}
.wl-resend:hover { text-decoration: underline; }
.wl-resend:disabled { cursor: default; text-decoration: none; }

.wl-status {
  display: flex; align-items: center; gap: 10px;
  background: var(--green-50); color: var(--green-700);
  border: 1px solid #d1f0e2; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  font-size: 14px; font-weight: 600; line-height: 1.45;
}
.wl-status i { font-size: 18px; flex-shrink: 0; }

@media (max-width: 400px) {
  .wl-otp { gap: 6px; }
  .wl-otp-box { min-height: 52px; font-size: 22px; border-radius: 10px; }
}