/* ============================================================================
   Valify — shared auth-flow styles (login, signup, check-email,
   verify-required, forgot-password, reset-password, onboarding modal)
   ============================================================================ */

:root{
  --bg:#0D0D1A;
  --card-bg:#13131F;
  --surface-raised:#1C1C30;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.12);
  --text:#FFFFFF;
  --muted:#7070A0;
  --dim:#40406A;
  --orange:#FF6B2B;
  --blue:#3B6FFF;
  --green:#22C55E;
  --red:#EF4444;
  --heading:'Bebas Neue', sans-serif;
  --body:'DM Sans', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
}
a{color:inherit;text-decoration:none;}
h1{font-family:var(--heading);font-weight:400;letter-spacing:0.02em;font-size:30px;}

/* fade in on load */
body{opacity:0;animation:authFadeIn .3s ease forwards;}
@keyframes authFadeIn{to{opacity:1;}}

.auth-brand{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:28px;
}
.auth-brand-word{font-family:var(--heading);font-size:22px;letter-spacing:0.15em;color:var(--text);}

.auth-card{
  width:100%;max-width:460px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:48px 40px;
  box-shadow:0 0 80px -20px rgba(255,107,43,0.12);
}
@media (max-width:520px){
  .auth-card{padding:36px 26px;}
}

.auth-sub{margin-top:6px;font-size:14px;color:var(--muted);line-height:1.6;}

/* ---- Google button ---- */
.google-btn{
  margin-top:24px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.14);background:#FFFFFF;
  color:#1a1a2e;font-family:var(--body);font-weight:700;font-size:14.5px;cursor:pointer;
  min-height:48px;transition:transform .15s ease, box-shadow .15s ease;
}
.google-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,0,0,0.4);}
.google-btn:active{transform:scale(.98);}

.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border-strong);}
.auth-divider span{font-size:12px;color:var(--dim);}

/* ---- form ---- */
form{display:flex;flex-direction:column;gap:18px;}
.field label{
  font-size:13px;font-weight:600;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;
}
.field label a{color:var(--orange);font-weight:600;font-size:12.5px;}

.input-wrap{position:relative;}
input[type="email"],
input[type="password"],
input[type="text"],
select{
  width:100%;
  background:#1C1C30;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:8px;
  padding:14px 16px;
  font-size:15px;
  font-family:var(--body);
  color:#FFFFFF;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input::placeholder{color:#7070A0;}
input:focus,select:focus{
  outline:none;
  border-color:#FF6B2B;
  box-shadow:0 0 0 3px rgba(255,107,43,0.15);
}
.field.has-error input{border-color:var(--red);}
.field.has-success input{border-color:var(--green);}
.input-wrap input[type="password"],
.input-wrap input.pw-input{padding-right:46px;}

.pw-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  transition:color .15s ease;
}
.pw-toggle:hover{color:var(--text);}

/* ---- password strength bar ---- */
.pw-strength{margin-top:10px;display:none;}
.pw-strength.show{display:block;}
.pw-strength-track{display:flex;gap:5px;height:5px;}
.pw-strength-seg{flex:1;border-radius:99px;background:var(--surface-raised);transition:background .2s ease;}
.pw-strength-label{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.02em;}
.pw-strength[data-level="weak"] .pw-strength-seg:nth-child(1){background:var(--red);}
.pw-strength[data-level="weak"] .pw-strength-label{color:var(--red);}
.pw-strength[data-level="fair"] .pw-strength-seg:nth-child(1),
.pw-strength[data-level="fair"] .pw-strength-seg:nth-child(2){background:var(--orange);}
.pw-strength[data-level="fair"] .pw-strength-label{color:var(--orange);}
.pw-strength[data-level="good"] .pw-strength-seg:nth-child(1),
.pw-strength[data-level="good"] .pw-strength-seg:nth-child(2),
.pw-strength[data-level="good"] .pw-strength-seg:nth-child(3){background:var(--blue);}
.pw-strength[data-level="good"] .pw-strength-label{color:var(--blue);}
.pw-strength[data-level="strong"] .pw-strength-seg{background:var(--green);}
.pw-strength[data-level="strong"] .pw-strength-label{color:var(--green);}

/* ---- requirements checklist ---- */
.pw-checklist{margin-top:12px;display:none;flex-direction:column;gap:7px;}
.pw-checklist.show{display:flex;}
.pw-check-item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);transition:color .2s ease;}
.pw-check-dot{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--dim);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.pw-check-dot svg{opacity:0;transition:opacity .15s ease;}
.pw-check-item.met{color:var(--text);}
.pw-check-item.met .pw-check-dot{background:var(--green);border-color:var(--green);}
.pw-check-item.met .pw-check-dot svg{opacity:1;}

/* ---- buttons ---- */
.btn{
  width:100%;
  padding:15px;
  border-radius:8px;
  border:none;
  font-family:var(--body);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .15s ease, opacity .15s ease;
  min-height:50px;
}
.btn-orange{background:var(--orange);color:#0D0D1A;}
.btn-orange:hover:not(:disabled){transform:translateY(-2px);}
.btn:active:not(:disabled){transform:scale(.98);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(13,13,26,0.3);border-top-color:#0D0D1A;
  animation:spin .7s linear infinite;
  display:none;
}
.btn.loading .spinner{display:inline-block;}
.btn.loading .btn-label{opacity:.85;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- messages ---- */
.msg{
  margin-top:6px;padding:12px 14px;border-radius:8px;font-size:13.5px;line-height:1.55;
  display:none;
}
.msg.show{display:block;}
.msg-error{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);color:#ff9c9c;}
.msg-error a{color:var(--text);font-weight:700;text-decoration:underline;}
.msg-info{background:rgba(59,111,255,0.08);border:1px solid rgba(59,111,255,0.3);color:#a9bdff;}
.msg-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3);color:#8fe3af;}

.foot{margin-top:24px;text-align:center;font-size:13.5px;color:var(--muted);}
.foot a{color:var(--orange);font-weight:600;}

.auth-back{margin-top:28px;font-size:13.5px;color:var(--muted);}
.auth-back:hover{color:var(--text);}

/* generic centred icon state (check-email / verify-required) */
.icon-state{text-align:center;}
.icon-state svg{margin:0 auto 20px;display:block;}
.icon-state h1{margin-bottom:4px;}
.icon-state p{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.7;}
.icon-state .email-highlight{color:var(--text);font-weight:700;}

/* ============================================================================
   Onboarding modal (used on dashboard.html)
   ============================================================================ */
.onboarding-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(13,13,26,0.82);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.onboarding-overlay.show{opacity:1;visibility:visible;}
.onboarding-card{
  width:100%;max-width:460px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px;
  box-shadow:0 0 80px -20px rgba(255,107,43,0.18);
  max-height:90vh;overflow-y:auto;
}
.onboarding-progress{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);}
.onboarding-track{margin-top:8px;height:4px;border-radius:99px;background:var(--surface-raised);overflow:hidden;}
.onboarding-track-fill{height:100%;width:100%;background:var(--orange);}
.onboarding-card h1{margin-top:20px;font-size:26px;}
.onboarding-card .auth-sub{margin-top:8px;}
.onboarding-card form{margin-top:26px;}
.onboarding-warning{
  margin-top:16px;padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.55;
  background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);color:#ff9c9c;
  display:none;
}
.onboarding-warning.show{display:block;}