/* ==========================================================================
   PASSWORDLESS — email OTP + Google
   auth.css er upore. Ek page-e duita step, screen change hoy na.
   ========================================================================== */
.ot-step{ animation:otIn .35s var(--ease-decel) both; }
@keyframes otIn{
  from{ opacity:0;transform:translateY(10px) }
  to{ opacity:1;transform:none }
}

/* ==========================================================================
   GOOGLE BUTTON
   Google-er nijer guideline: sada bg, dhusor border, asol logo.
   ========================================================================== */
.ot-google{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;height:52px;margin-bottom:20px;
  border-radius:var(--r-full);
  background:#FFFFFF;border:1px solid var(--border-light);
  color:#1F2937;text-decoration:none;
  font-family:var(--font-body);font-size:15px;font-weight:700;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--d-short) var(--ease),
             box-shadow var(--d-short) var(--ease),
             transform var(--d-short) var(--ease);
}
.ot-google:hover{ background:#F7F8FC;box-shadow:var(--e1);color:#1F2937; }
.ot-google:active{ transform:scale(.985); }
.ot-google svg{ flex-shrink:0; }

/* ---------- or divider ---------- */
.ot-or{
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;
  font-size:11.5px;font-weight:700;color:var(--text-muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.ot-or::before,.ot-or::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ==========================================================================
   ERROR
   ========================================================================== */
.ot-err{
  display:none;align-items:center;gap:7px;
  margin-top:8px;font-size:12.5px;font-weight:700;color:var(--red);
  line-height:1.4;
}
.ot-err.on{ display:flex; }
.ot-err.center{ justify-content:center;text-align:center;margin:14px 0 0; }
.ot-err.on::before{
  content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;
  font-size:11px;flex-shrink:0;
}

/* ==========================================================================
   TRUST ROW
   ========================================================================== */
.ot-trust{
  display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  margin-top:18px;
}
.ot-trust span{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;color:var(--text-muted);
}
.ot-trust i{ color:var(--green);font-size:11px; }

/* ==========================================================================
   STEP 2 — CODE
   ========================================================================== */
.ot-back{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:18px;padding:7px 13px 7px 10px;
  border:none;border-radius:var(--r-full);
  background:var(--bg-600);color:var(--text-secondary);
  cursor:pointer;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  transition:background var(--d-short) var(--ease);
}
.ot-back:active{ background:var(--bg-500); }
.ot-back i{ font-size:10px; }

.ot-mail-ico{
  width:66px;height:66px;border-radius:var(--r-full);margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:var(--accent-container);color:var(--accent);
  animation:otPop .5s var(--ease-decel) both;
}
@keyframes otPop{
  0%{ opacity:0;transform:scale(.5) }
  60%{ opacity:1;transform:scale(1.08) }
  100%{ transform:scale(1) }
}
#step-code .au-head{ text-align:center; }
#step-code .au-head b{
  color:var(--text-primary);font-weight:800;
  word-break:break-all;
}

/* ---------- dev box ---------- */
.ot-dev{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 14px;margin-bottom:20px;
  border-radius:var(--r-md);
  background:var(--yellow-container);color:#4A3000;
  font-size:12.5px;font-weight:700;
}
.ot-dev i{ color:var(--yellow);font-size:12px; }
.ot-dev b{
  font-family:var(--font-display);font-size:16px;font-weight:800;
  letter-spacing:2px;color:var(--yellow);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   OTP BOXES — signature
   ========================================================================== */
.ot-boxes{
  display:flex;justify-content:center;gap:9px;
  margin:6px 0 4px;
}
.ot-box{
  width:48px;height:60px;padding:0;
  text-align:center;
  background:var(--bg-700);
  border:1.5px solid var(--border-light);
  border-radius:var(--r-md);
  color:var(--text-primary);
  font-family:var(--font-display);font-size:24px;font-weight:800;
  font-variant-numeric:tabular-nums;
  caret-color:var(--accent);
  transition:border-color .18s var(--ease),
             background .18s var(--ease),
             box-shadow .18s var(--ease),
             transform .18s var(--ease);
}
.ot-box:focus{
  outline:none;
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
  transform:translateY(-2px);
}
/* bhora box — bharlei bujhbe */
.ot-box:not(:placeholder-shown),
.ot-box:valid{ background:var(--surface); }

.ot-boxes.good .ot-box{
  border-color:var(--green);
  background:var(--green-container);
  color:var(--green);
}
.ot-boxes.shake{ animation:otShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes otShake{
  10%,90%{ transform:translateX(-2px) }
  20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-7px) }
  40%,60%{ transform:translateX(7px) }
}

/* ==========================================================================
   RESEND
   ========================================================================== */
.ot-resend{
  display:flex;justify-content:center;margin-top:18px;min-height:24px;
}
.ot-resend span{
  font-size:12.5px;font-weight:600;color:var(--text-muted);
}
.ot-resend span b{
  font-family:var(--font-display);font-weight:800;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
.ot-resend button{
  border:none;background:none;cursor:pointer;padding:4px 10px;
  color:var(--accent);
  font-family:var(--font-display);font-size:13px;font-weight:800;
  border-radius:var(--r-full);
  transition:background var(--d-short) var(--ease);
}
.ot-resend button:active{ background:var(--accent-dim); }
.ot-resend button:disabled{ color:var(--text-muted);cursor:default; }

.ot-hint{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:22px;padding:12px 14px;
  border-radius:var(--r-md);background:var(--bg-700);
  font-size:11.5px;font-weight:600;color:var(--text-muted);line-height:1.5;
}
.ot-hint i{ color:var(--accent);font-size:11px;margin-top:2px;flex-shrink:0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:400px){
  .ot-boxes{ gap:6px; }
  .ot-box{ width:42px;height:54px;font-size:21px; }
  .ot-trust{ gap:14px; }
}
@media (max-width:340px){
  .ot-box{ width:38px;height:50px;font-size:19px; }
}

@media (prefers-reduced-motion:reduce){
  .ot-step,.ot-mail-ico{ animation:none; }
  .ot-boxes.shake{ animation:none; }
}