/* ═══════════════════════════════════════════════════════
   Auth Pages — Trendlix-style Login/Register/Onboarding
   ═══════════════════════════════════════════════════════ */

/* ─── Background Glow ───────────────────────────────── */
.auth-bg-glow{position:fixed;top:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 70%);pointer-events:none;z-index:0}
.auth-bg-glow2{position:fixed;bottom:-20%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(76,110,245,.1) 0%,transparent 70%);pointer-events:none;z-index:0}

/* ─── Auth Container ────────────────────────────────── */
.auth-container{width:100%;max-width:480px;margin:0 auto;padding:1rem}
.auth-hero{position:relative;padding:2rem 1.5rem 1rem;overflow:visible}
.auth-hero-img{position:absolute;right:0;top:0;height:160px;object-fit:contain;z-index:1}
@media(max-width:480px){.auth-hero-img{height:120px;right:-10px;top:10px}}
.auth-hero-text{position:relative;z-index:2;max-width:55%}
.auth-hero h1{font-size:1.8rem;font-weight:800;line-height:1.15;margin-bottom:.4rem}
.auth-hero h1 .highlight{background:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── Logo Block ────────────────────────────────────── */
.auth-logo{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.auth-logo-icon{width:2rem;height:2rem;border-radius:.5rem;background:linear-gradient(135deg,#7c3aed,#6d28d9);display:flex;align-items:center;justify-content:center}
.auth-logo-icon svg{width:1rem;height:1rem;stroke:#fff;fill:none;stroke-width:2.5}
.auth-logo-name{font-size:1.1rem;font-weight:800;color:#fff}
.auth-logo-tagline{font-size:.7rem;font-weight:600;background:linear-gradient(135deg,#a78bfa,#f472b6,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── Form Card ─────────────────────────────────────── */
.auth-card{background:rgba(18,19,31,.9);border:1px solid rgba(255,255,255,.06);border-radius:1.25rem;padding:1.75rem;margin-top:.5rem}
.auth-label{display:block;font-size:.8rem;font-weight:700;color:#e5e7eb;margin-bottom:.5rem}
.auth-input-wrap{position:relative;margin-bottom:1.1rem}
.auth-input-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#6b7280;font-size:.95rem;pointer-events:none}
.auth-input{width:100%;padding:.75rem .85rem .75rem 2.75rem;background:rgba(24,26,42,.8);border:1px solid rgba(255,255,255,.08);border-radius:.75rem;color:#fff;font-size:.85rem;transition:all .2s;outline:none}
.auth-input:focus{border-color:rgba(124,58,237,.4);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.auth-input::placeholder{color:#4b5563}
.auth-input-right{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);color:#6b7280;cursor:pointer;font-size:.95rem;background:none;border:none;padding:0}
.auth-input-right:hover{color:#9ca3af}

/* ─── Gradient Button ───────────────────────────────── */
.auth-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.85rem;background:linear-gradient(135deg,#a855f7,#7c3aed,#ec4899);border:none;border-radius:.75rem;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.auth-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(124,58,237,.35)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.auth-btn-arrow{position:absolute;right:1.2rem;font-size:1.1rem}

/* ─── Divider ───────────────────────────────────────── */
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0}
.auth-divider-line{flex:1;height:1px;background:rgba(255,255,255,.08)}
.auth-divider-text{font-size:.75rem;color:#6b7280}

/* ─── Social Buttons ────────────────────────────────── */
.auth-social-row{display:flex;gap:.6rem}
.auth-social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem;background:rgba(24,26,42,.8);border:1px solid rgba(255,255,255,.08);border-radius:.75rem;color:#d1d5db;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
.auth-social-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.auth-social-btn svg{width:1.1rem;height:1.1rem;flex-shrink:0}

/* ─── Security Badge ────────────────────────────────── */
.auth-security{display:flex;align-items:center;gap:.75rem;padding:1rem;background:rgba(24,26,42,.6);border:1px solid rgba(255,255,255,.05);border-radius:.85rem;margin-top:1.5rem}
.auth-security-icon{width:2.5rem;height:2.5rem;border-radius:.65rem;background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(99,102,241,.2));display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.auth-security-text h4{font-size:.78rem;font-weight:700;color:#e5e7eb}
.auth-security-text p{font-size:.65rem;color:#6b7280}

/* ─── Step Indicator ────────────────────────────────── */
.auth-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:1rem 0}
.auth-step{display:flex;flex-direction:column;align-items:center;gap:.35rem;position:relative}
.auth-step-circle{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;border:2px solid rgba(255,255,255,.1);background:rgba(24,26,42,.8);color:#6b7280;transition:all .3s}
.auth-step.completed .auth-step-circle{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.4);color:#4ade80}
.auth-step.active .auth-step-circle{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(99,102,241,.2));border-color:rgba(124,58,237,.5);color:#a78bfa;box-shadow:0 0 15px rgba(124,58,237,.2)}
.auth-step-label{font-size:.65rem;font-weight:600;color:#6b7280}
.auth-step.active .auth-step-label{color:#a78bfa}
.auth-step.completed .auth-step-label{color:#4ade80}
.auth-step-line{width:4rem;height:2px;background:rgba(255,255,255,.06);margin:0 .15rem;align-self:center;margin-bottom:1.2rem}
.auth-step-line.done{background:linear-gradient(90deg,rgba(74,222,128,.4),rgba(124,58,237,.3))}

/* ─── Checkbox ──────────────────────────────────────── */
.auth-checkbox{display:flex;align-items:center;gap:.5rem;margin:.75rem 0;cursor:pointer;font-size:.78rem;color:#9ca3af}
.auth-checkbox input{appearance:none;width:1.15rem;height:1.15rem;border:2px solid rgba(255,255,255,.15);border-radius:.3rem;background:rgba(24,26,42,.8);cursor:pointer;flex-shrink:0;position:relative;transition:all .2s}
.auth-checkbox input:checked{background:linear-gradient(135deg,#7c3aed,#6d28d9);border-color:#7c3aed}
.auth-checkbox input:checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:800}
.auth-checkbox a{color:#a78bfa;text-decoration:none}
.auth-checkbox a:hover{text-decoration:underline}

/* ─── Footer link ───────────────────────────────────── */
.auth-footer{text-align:center;padding:1.25rem 0;font-size:.8rem;color:#6b7280}
.auth-footer a{color:#a78bfa;font-weight:600;text-decoration:none}
.auth-footer a:hover{color:#c4b5fd}

/* ─── Back Button ───────────────────────────────────── */
.auth-back{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#9ca3af;font-size:.9rem;text-decoration:none;transition:all .2s;margin-bottom:.5rem}
.auth-back:hover{background:rgba(255,255,255,.1);color:#fff}

/* ─── Top Nav ───────────────────────────────────────── */
.auth-topnav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem}
.auth-topnav-link{font-size:.78rem;color:#6b7280}
.auth-topnav-link a{color:#a78bfa;font-weight:600;text-decoration:none}

/* ─── Error Box ─────────────────────────────────────── */
.auth-error{padding:.65rem .85rem;border-radius:.65rem;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171;font-size:.78rem;margin-bottom:1rem;display:none}
.auth-error.show{display:block}

/* ─── Animations ────────────────────────────────────── */
@keyframes authFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.auth-animate{animation:authFadeUp .5s ease forwards}