/* =============================================
   SKY BETS — AUTH PAGES
   Black · White · Blue
   ============================================= */

.auth-body {
  background:var(--bg);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 20px 40px;
  position:relative;
}
.auth-body::before {
  content:''; position:fixed; top:-80px; left:-60px;
  width:280px; height:280px;
  background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 70%);
  border-radius:50%; pointer-events:none; z-index:0;
}
.auth-body::after {
  content:''; position:fixed; bottom:-60px; right:-40px;
  width:220px; height:220px;
  background:radial-gradient(circle,rgba(29,78,216,0.1) 0%,transparent 70%);
  border-radius:50%; pointer-events:none; z-index:0;
}

.auth-back {
  align-self:flex-start;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:var(--surface-1); border:1px solid var(--border-md);
  border-radius:50%; color:var(--t1); font-size:0.85rem;
  margin-top:16px; margin-bottom:4px;
  transition:background var(--t); position:relative; z-index:1;
}
.auth-back:hover { background:var(--surface-2); }

.auth-logo {
  display:flex; align-items:center; gap:8px;
  margin:12px 0 20px; position:relative; z-index:1;
}
.auth-rocket { width:32px; height:32px; filter:drop-shadow(0 0 7px rgba(59,130,246,0.55)); }
.auth-logo__text { font-size:1.3rem; font-weight:700; color:var(--t1); }
.auth-logo__text b { color:var(--accent-light); font-weight:900; }

/* Steps */
.steps {
  display:flex; align-items:center; gap:0;
  margin-bottom:20px; position:relative; z-index:1;
  width:100%; max-width:360px; justify-content:center;
}
.step { display:flex; flex-direction:column; align-items:center; gap:4px; }
.step__num {
  width:28px; height:28px; border-radius:50%;
  background:var(--surface-2); border:2px solid var(--border-md);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:800; color:var(--t3); transition:all var(--t);
}
.step__label { font-size:0.6rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.04em; transition:color var(--t); }
.step--active .step__num { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 12px var(--accent-glow); }
.step--active .step__label { color:var(--t1); }
.step--done .step__num { background:var(--green); border-color:var(--green); color:#fff; }
.step--done .step__label { color:var(--green); }
.step-line { flex:1; height:2px; background:var(--border-md); margin:0 6px; margin-bottom:16px; max-width:48px; transition:background var(--t); }
.step-line--done { background:var(--green); }

/* Auth card */
.auth-card {
  width:100%; max-width:400px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:28px 24px;
  position:relative; z-index:1; box-shadow:0 8px 40px rgba(0,0,0,0.8);
}
.auth-title { font-size:1.3rem; font-weight:900; color:var(--t1); margin-bottom:6px; }
.auth-sub   { font-size:0.78rem; color:var(--t2); margin-bottom:24px; line-height:1.5; }

/* Form */
.auth-form { display:flex; flex-direction:column; gap:16px; }
.field-group { display:flex; flex-direction:column; gap:5px; }
.field-label { font-size:0.72rem; font-weight:700; color:var(--t2); letter-spacing:0.03em; }
.field-wrap { position:relative; display:flex; align-items:center; }
.field-icon { position:absolute; left:14px; font-size:0.82rem; color:var(--t3); pointer-events:none; z-index:1; transition:color var(--t); }
.field-input {
  width:100%; background:var(--surface-2); border:1.5px solid var(--border-md);
  border-radius:var(--r-md); padding:12px 14px 12px 40px;
  font-size:0.85rem; font-weight:600; color:var(--t1);
  font-family:inherit; outline:none;
  transition:border-color var(--t), box-shadow var(--t); -webkit-appearance:none;
}
.field-input::placeholder { color:var(--t3); }
.field-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.field-input:focus ~ .field-icon,
.field-wrap:focus-within .field-icon { color:var(--accent-light); }
.field-input--error { border-color:var(--live) !important; }

.field-select {
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234a4a4a' viewBox='0 0 16 16'%3E%3Cpath d='M8 10L3 5h10L8 10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px; padding-right:36px;
}
.field-select option { background:var(--nav-bg); color:var(--t1); }

.field-toggle { position:absolute; right:12px; color:var(--t3); font-size:0.82rem; padding:4px; transition:color var(--t); }
.field-toggle:hover { color:var(--t1); }
.field-error { font-size:0.68rem; font-weight:600; color:var(--live); min-height:14px; }
.field-hint  { font-size:0.66rem; color:var(--t3); line-height:1.4; display:block; margin-top:-2px; }

/* Password strength */
.pass-strength { display:flex; align-items:center; gap:8px; margin-top:4px; }
.pass-strength__bar { flex:1; height:4px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
.pass-strength__fill { height:100%; width:0%; background:var(--live); border-radius:var(--r-pill); transition:width 0.3s ease, background 0.3s ease; }
.pass-strength__label { font-size:0.62rem; font-weight:700; color:var(--t3); white-space:nowrap; transition:color 0.3s ease; }

/* Row helpers */
.auth-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.auth-row--btns { gap:10px; }

/* Checkbox */
.check-label { display:flex; align-items:center; gap:8px; font-size:0.75rem; font-weight:600; color:var(--t2); cursor:pointer; user-select:none; }
.check-label--block { margin-top:4px; flex-wrap:wrap; gap:6px; }
.check-input { display:none; }
.check-custom {
  width:18px; height:18px; flex-shrink:0; border-radius:5px;
  background:var(--surface-2); border:1.5px solid var(--border-md);
  display:flex; align-items:center; justify-content:center; transition:all var(--t);
}
.check-input:checked + .check-custom { background:var(--accent); border-color:var(--accent); }
.check-input:checked + .check-custom::after {
  content:''; display:block; width:5px; height:9px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:rotate(45deg) translate(-1px,-1px);
}

.auth-link { font-size:0.75rem; font-weight:700; color:var(--accent-light); transition:opacity var(--t); }
.auth-link:hover { opacity:0.75; }
.auth-link--bold { font-size:0.82rem; font-weight:800; }

.btn-auth {
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; background:var(--accent); color:#fff;
  border:none; border-radius:var(--r-md);
  font-size:0.88rem; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
  font-family:inherit; cursor:pointer;
  box-shadow:0 4px 18px var(--accent-glow);
  transition:opacity var(--t), transform var(--t); text-decoration:none;
}
.btn-auth:hover { opacity:0.88; transform:translateY(-1px); }
.btn-auth:active { transform:translateY(0); }
.btn-auth--outline {
  background:transparent; border:1.5px solid var(--border-md);
  color:var(--t2); box-shadow:none; flex:0.4;
}
.btn-auth--outline:hover { background:var(--surface-2); color:var(--t1); transform:none; }

.auth-divider { display:flex; align-items:center; gap:10px; margin:20px 0 0; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border-md); }
.auth-divider span { font-size:0.72rem; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:0.06em; }

.auth-switch { text-align:center; font-size:0.78rem; font-weight:600; color:var(--t2); margin-top:18px; }

/* Success */
.auth-success { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 0; text-align:center; }
.success-icon {
  width:64px; height:64px; background:rgba(34,197,94,0.1);
  border:2px solid rgba(34,197,94,0.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:1.5rem; animation:pop 0.4s ease;
}
@keyframes pop { 0% { transform:scale(0.5); opacity:0; } 70% { transform:scale(1.1); } 100% { transform:scale(1); opacity:1; } }

.reg-step { animation:fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Field hint text */
.field-hint {
  font-size:0.65rem; color:var(--t3); font-weight:600; line-height:1.4; margin-top:2px;
}

/* Email sent card (step 3) */
.email-sent-card {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:14px 16px;
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
}
.email-sent-card__icon { color:var(--accent-light); font-size:1.1rem; margin-top:2px; flex-shrink:0; }
.email-sent-card__title { font-size:0.82rem; font-weight:800; color:var(--t1); margin-bottom:3px; }
.email-sent-card__desc  { font-size:0.7rem; color:var(--t2); line-height:1.5; }

/* Email sent steps */
.email-sent-steps { display:flex; flex-direction:column; gap:10px; width:100%; text-align:left; }
.email-sent-step  { display:flex; align-items:center; gap:10px; font-size:0.75rem; font-weight:600; color:var(--t2); }
.email-sent-step__num {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--glass-bg-md); border:1px solid var(--glass-border-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:900; color:var(--accent-light);
}
.email-sent-step__text b { color:var(--t1); }

.fp-spam-note { font-size:0.68rem; color:var(--t3); display:flex; align-items:center; gap:6px; }
.fp-spam-note i { color:var(--accent-light); }