/* ================================================================
   Balaji Aurica — Unified Mobile + OTP Auth
   Used by: /login page, checkout step 2, header modal
================================================================ */
:root{
  --otp-gold:#C9A84C; --otp-gold-dark:#9a7a20; --otp-dark:#1a1f2e;
  --otp-green:#1a6b4a; --otp-border:#e8dfc8; --otp-muted:#6b7280; --otp-red:#dc3545;
}

/* ── Standalone page wrapper ─────────────────────────────────── */
.otp-page{ background:#fdfaf4; min-height:70vh; padding:3rem 0; display:flex; align-items:center; }
.otp-page .container{ max-width:760px; margin:0 auto; padding:0 1.25rem; }

/* ── Card ─────────────────────────────────────────────────────── */
.otp-card{ background:#fff; border-radius:14px; box-shadow:0 2px 20px rgba(0,0,0,.08); padding:2rem; }
.otp-card--inline{ box-shadow:0 2px 16px rgba(0,0,0,.07); }
.otp-card-head{ text-align:center; margin-bottom:1.5rem; }
.otp-card-head h2{ font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--otp-dark); margin-bottom:.35rem; }
.otp-card-head p{ font-size:.85rem; color:var(--otp-muted); }

/* ── Form elements ────────────────────────────────────────────── */
.otp-label{ display:block; font-size:.8rem; font-weight:600; color:#374151; margin-bottom:.4rem; }
.otp-phone-input{ display:flex; align-items:center; border:1.5px solid #d1d5db; border-radius:8px; overflow:hidden; margin-bottom:.5rem; }
.otp-phone-input:focus-within{ border-color:var(--otp-gold); box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.otp-flag{ padding:.65rem .8rem; background:#f9fafb; border-right:1px solid #e5e7eb; font-size:.85rem; white-space:nowrap; }
.otp-phone-input input{ flex:1; border:none; outline:none; padding:.65rem .8rem; font-size:.9rem; }
.otp-text-input{ width:100%; border:1.5px solid #d1d5db; border-radius:8px; padding:.6rem .85rem; font-size:.875rem; outline:none; }
.otp-text-input:focus{ border-color:var(--otp-gold); box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.otp-error{ color:var(--otp-red); font-size:.78rem; min-height:1.1rem; margin-bottom:.5rem; }
.otp-req{ color:var(--otp-red); }
.otp-muted{ color:var(--otp-muted); font-weight:400; font-size:.75rem; }

.otp-btn{ width:100%; padding:.75rem; border:none; border-radius:8px; font-weight:700; font-size:.85rem; letter-spacing:.4px; cursor:pointer; transition:background .2s; }
.otp-btn--dark{ background:var(--otp-dark); color:#fff; }
.otp-btn--dark:hover{ background:#2d3550; }
.otp-btn--dark:disabled{ opacity:.6; cursor:not-allowed; }

/* ── OTP digit boxes ──────────────────────────────────────────── */
.otp-sent-msg{ font-size:.82rem; color:#374151; margin-bottom:1rem; text-align:center; }
.otp-change-link{ background:none; border:none; color:var(--otp-gold-dark); font-weight:600; font-size:.78rem; cursor:pointer; text-decoration:underline; padding:0; margin-left:.4rem; }
.otp-digits{ display:flex; gap:.5rem; justify-content:center; margin-bottom:.5rem; }
.otp-digit{ width:44px; height:52px; text-align:center; font-size:1.3rem; font-weight:700; border:1.5px solid #d1d5db; border-radius:8px; outline:none; }
.otp-digit:focus{ border-color:var(--otp-gold); box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.otp-resend{ text-align:center; font-size:.78rem; color:var(--otp-muted); margin:.75rem 0 .5rem; }
.otp-resend button{ background:none; border:none; color:var(--otp-gold-dark); font-weight:600; cursor:pointer; padding:0; }
.otp-resend button:disabled{ color:var(--otp-muted); cursor:default; }
.otp-divider{ border-top:1px solid var(--otp-border); margin:1rem 0; }

/* ── Secure note ──────────────────────────────────────────────── */
.otp-secure-note{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--otp-muted); background:#f9fafb; border-radius:8px; padding:.7rem 1rem; margin-top:1.25rem; }

/* ── Header modal overlay ─────────────────────────────────────── */
.otp-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.otp-modal-overlay.active{ display:flex; }
.otp-modal{ background:#fff; border-radius:14px; padding:2rem; max-width:420px; width:100%; position:relative; box-shadow:0 10px 40px rgba(0,0,0,.25); animation:otpModalIn .2s ease; }
.otp-modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--otp-muted); }
.otp-modal-close:hover{ color:var(--otp-dark); }
@keyframes otpModalIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:480px){
  .otp-card{ padding:1.5rem; }
  .otp-digit{ width:38px; height:46px; font-size:1.1rem; }
  .otp-digits{ gap:.4rem; }
}
.otp-consent-row{ margin:.85rem 0; }
.otp-consent-label{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.75rem; color:#4b5563; cursor:pointer; line-height:1.5;
}
.otp-consent-label input{ margin-top:.15rem; accent-color:#C9A84C; flex-shrink:0; }
.otp-consent-label a{ color:#9a7a20; font-weight:600; text-decoration:underline; }

.auth-tabs{ display:flex; gap:.5rem; margin-bottom:1.5rem; background:#f3f4f6; border-radius:10px; padding:.3rem; }
.auth-tab{
  flex:1; background:none; border:none; padding:.6rem; border-radius:8px;
  font-size:.8rem; font-weight:600; color:#6b7280; cursor:pointer; transition:all .2s;
}
.auth-tab.active{ background:#fff; color:#1a1f2e; box-shadow:0 1px 3px rgba(0,0,0,.08); }

.auth-tab-panel{ display:none; }
.auth-tab-panel.active{ display:block; }