/* auth.css — centered, modern auth layout for the pre-login pages
   (index.html login, forgotpw*.html). No sidebar — these are pre-auth.
   Restyles the existing Bootstrap login/reset markup; IDs unchanged so
   login.js / google-auth.js / forgotpw.js keep working. */

:root {
  --ink: #16202b; --ink2: #5b6573; --ink3: #9aa3b0;
  --line: #ebeef1; --line2: #e2e6ea;
  --bg: #f4f6f8; --card: #ffffff;
  --primary: #2f5fc0; --primary-700: #244e9e; --primary-soft: #eaf1fb;
  --green: #4e861d; --green-soft: #edf5e3;
  --amber: #b9760a; --amber-soft: #fbf1de;
  --red: #bd4a2c; --red-soft: #fbe9e3;
  --brand-ink: #5c3a12;
  --shadow: 0 1px 2px rgba(20,30,45,.04), 0 10px 30px rgba(20,30,45,.07);
}

body.auth-body {
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--primary-soft), transparent 60%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* top brand bar */
.auth-body .navbar {
  background: transparent !important;
  border: none;
  padding: 14px 24px 0;
}
.auth-body .navbar-logo { max-height: 46px; width: auto; }

/* centered card column */
.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 32px;
}
.auth-body .login-box { max-width: 440px; width: 100%; }

/* the card itself */
.auth-body .card {
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.auth-body .card-body { padding: 22px 24px !important; background: var(--card) !important; }

.auth-body h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--ink);
}
.auth-body label { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }

/* inputs */
.auth-body .form-control {
  border-radius: 11px;
  border: 1px solid var(--line2);
  padding: 11px 14px;
  font-weight: 600;
  color: var(--ink);
}
.auth-body .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-body .input-group .btn-outline-secondary {
  border-color: var(--line2);
  color: var(--ink2);
}

/* primary action */
.auth-body .btn-outline-primary,
.auth-body .btn-primary {
  border-radius: 11px;
  font-weight: 700;
  padding: 10px 16px;
}
.auth-body .btn-outline-primary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.auth-body .btn-outline-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* links */
.auth-body a { color: var(--primary); font-weight: 600; }
.auth-body .text-muted { color: var(--ink3) !important; }

/* OR divider */
.auth-body .text-muted + * { }

/* whatsapp / success buttons keep their semantics, just rounded */
.auth-body .btn-outline-success { border-radius: 11px; font-weight: 700; }

/* WhatsApp brand-green outline button */
.auth-body .btn-outline-whatsapp {
  border-radius: 11px;
  font-weight: 700;
  color: #1faa55;
  border: 1px solid #25d366;
  background: transparent;
}
.auth-body .btn-outline-whatsapp:hover,
.auth-body .btn-outline-whatsapp:focus,
.auth-body .btn-outline-whatsapp:active {
  color: #fff;
  background: #25d366;
  border-color: #25d366;
}

/* info note box */
.auth-body .bg-white.rounded.border {
  background: #fafbfc !important;
  border-color: var(--line) !important;
  border-radius: 12px !important;
}

/* modal niceties */
.auth-body .modal-content { border-radius: 18px; border: none; }
.auth-body .modal-header { border-bottom: 1px solid var(--line); }
.auth-body .modal-footer { border-top: 1px solid var(--line); }