/* Auth UI — FinSync (Bootstrap 5 compatible)
   Path: /assets/css/auth.css
   Note: This file is shared by login & register pages.
*/

/* Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* ===== Brand theming ===== */
:root{
  --brand-700:#0c60b4;
  --brand-600:#0e7ae6;
  --brand-500:#2b97ff;
  --brand-100:#eaf3ff;
  --ink:#132041;
  --muted:#54627d;
  --bg:#fbfcff;
}

html,body{height:100%;}
body{
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ===== Background circles (decor) ===== */
.waas-bg{ position:relative; min-height:100vh; overflow:hidden; }
.waas-bg .orb{
  position:absolute; border-radius:50%; pointer-events:none; opacity:.18;
  background: radial-gradient(closest-side, var(--brand-100), transparent 70%);
}
.orb.o1{ width:520px; height:520px; top:-120px; left:-120px; }
.orb.o2{ width:640px; height:640px; right:-180px; top:40px; }
.orb.o3{ width:380px; height:380px; left:40px; bottom:-140px; }
.orb.o4{ width:220px; height:220px; right:60px; bottom:40px; }

/* ===== Card ===== */
.auth-card{
  max-width:820px; margin:48px auto; background:#fff;
  border:0; border-radius:16px;
  box-shadow: 0 18px 50px -20px rgba(19,32,65,.25), 0 6px 20px -10px rgba(19,32,65,.12);
}
.auth-card .card-body{ padding:2.25rem; }
@media (min-width:768px){ .auth-card{ margin:72px auto; } }

.auth-footer{
  background:#f0f3f9; border-top:1px solid #e6ebf5; border-radius:0 0 16px 16px;
  padding:1rem 2rem; color:#4b5875; font-size:.9rem;
}
.auth-footer a{ color:var(--brand-700); font-weight:600; }
.auth-footer a:hover{ color:var(--brand-600); text-decoration:underline; }

/* ===== Header / Titles ===== */
.auth-logo{ height:44px; }
.auth-title{ font-weight:700; letter-spacing:.2px; color:var(--ink); }

/* ===== Forms ===== */
.form-label{ font-weight:600; color:var(--ink); }
.form-text{ color: var(--muted); }

.form-control, .form-select{
  border-radius:12px; border-color:#e6ebf5;
  padding:.85rem 1rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-500);
  box-shadow: 0 0 0 .2rem rgba(43,151,255,.18);
}

/* Password show/hide */
.pwd-wrap{ position:relative; }
.pwd-toggle{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  font-size:.9rem; font-weight:600; color:var(--brand-700); background:transparent; border:0;
}
.pwd-toggle:hover{ text-decoration:underline; }

/* ===== Buttons / Links ===== */
.btn-brand{
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
  border:0; color:#fff; border-radius:12px; padding:.9rem 1rem; font-weight:700;
  box-shadow: 0 16px 24px -14px rgba(14,122,230,.45);
}
.btn-brand:hover{ filter: brightness(.98); }

.auth-links a{ font-weight:600; color:var(--brand-700); }
.auth-links a:hover{ color:var(--brand-600); text-decoration:underline; }