/*
  BDF Visitor Registration System - Common CSS
  Consolidated from uploaded PHP files.
  Place this file at: assets/css/common.css
  Load it after assets/css/style.css so it preserves page-specific overrides.
*/
  :root {
      --page-bg: #eef3fb;
      --card-bg: rgba(255,255,255,.96);
      --card-border: rgba(15,23,42,.08);
      --shadow-soft: 0 24px 60px rgba(15,23,42,.12);
      --shadow-glow: 0 18px 42px rgba(67,97,238,.24);
      --blue-a: #233dff;
      --blue-b: #5fa8ff;
      --navy: #12203d;
      --ink: #0f172a;
      --muted: #64748b;
      --green: #22c55e;
      --red: #ef4444;
    }
    body {
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(95,168,255,.25), transparent 30%),
        radial-gradient(circle at bottom right, rgba(35,61,255,.18), transparent 28%),
        linear-gradient(135deg, #eaf1fb 0%, #f8fbff 48%, #edf4ff 100%);
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .login-shell {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 16px;
      position: relative;
      overflow: hidden;
    }
    .login-shell:before, .login-shell:after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(67,97,238,.10);
      pointer-events: none;
    }
    .login-shell:before { width: 360px; height: 360px; left: -140px; top: -120px; }
    .login-shell:after { width: 430px; height: 430px; right: -170px; bottom: -170px; }
    .login-wrap {
      width: min(1120px, 100%);
      position: relative;
      z-index: 2;
    }
    .login-card {
      border: 1px solid var(--card-border);
      background: var(--card-bg);
      border-radius: 30px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .brand-panel {
      min-height: 620px;
      background: linear-gradient(135deg, #16213e 0%, #2f46bf 52%, #83b9ff 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
      padding: 42px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .brand-panel:before, .brand-panel:after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.13);
      pointer-events: none;
    }
    .brand-panel:before { width: 280px; height: 280px; right: -80px; top: -70px; }
    .brand-panel:after { width: 210px; height: 210px; left: -70px; bottom: -60px; }
    .brand-content { position: relative; z-index: 2; }
    .brand-chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .46rem .9rem;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
      font-size: .86rem;
      font-weight: 800;
      letter-spacing: .03em;
      margin-bottom: 24px;
    }
    .brand-title {
      font-size: 2.35rem;
      line-height: 1.08;
      font-weight: 850;
      margin-bottom: 18px;
    }
    .brand-text {
      color: rgba(255,255,255,.88);
      font-size: 1.02rem;
      max-width: 520px;
    }
    .brand-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      position: relative;
      z-index: 2;
    }
    .brand-stat {
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.12);
      border-radius: 18px;
      padding: 14px;
      backdrop-filter: blur(4px);
    }
    .brand-stat strong { display:block; font-size: 1.25rem; }
    .brand-stat span { font-size: .78rem; color: rgba(255,255,255,.76); }
    .form-panel { padding: 46px 42px; }
    .logo-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 26px;
    }
    .logo-box {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      background: #f1f5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 24px rgba(37,99,235,.10);
    }
    .logo-box img { max-width: 44px; max-height: 44px; }
    .form-title { color: var(--ink); font-weight: 850; font-size: 1.75rem; margin: 0; }
    .form-subtitle { color: var(--muted); font-size: .95rem; margin-top: 5px; }
    .login-illustration {
      width: 120px;
      height: 120px;
      border-radius: 28px;
      object-fit: cover;
      box-shadow: 0 18px 38px rgba(15,23,42,.12);
      margin: 6px auto 26px;
      display: block;
    }
    .input-label {
      font-size: .88rem;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 7px;
    }
    .input-group-modern {
      position: relative;
      margin-bottom: 18px;
    }
    .input-group-modern .form-control {
      min-height: 52px;
      border-radius: 16px;
      padding-left: 48px;
      border-color: rgba(15,23,42,.12);
      background: #fbfdff;
      box-shadow: none;
      font-size: .96rem;
    }
    .input-group-modern .form-control:focus {
      border-color: #5f83ff;
      box-shadow: 0 0 0 .22rem rgba(67,97,238,.12);
    }
    .input-icon {
      position: absolute;
      left: 16px;
      top: 42px;
      color: #5366d6;
      font-size: 1.15rem;
      z-index: 3;
    }
    .password-toggle {
      position: absolute;
      right: 14px;
      top: 39px;
      border: 0;
      background: transparent;
      color: #64748b;
      font-size: 1.12rem;
      z-index: 4;
      width: 36px;
      height: 36px;
      border-radius: 10px;
    }
    .password-toggle:hover { background: #eef2ff; color: #233dff; }
    .btn-login {
      min-height: 52px;
      border: 0;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--blue-a), #6a8fff);
      box-shadow: 0 16px 34px rgba(67,97,238,.25);
      font-weight: 800;
      letter-spacing: .02em;
    }
    .btn-login:hover { transform: translateY(-1px); box-shadow: 0 20px 38px rgba(67,97,238,.30); }
    .alert-modern {
      border: 0;
      border-radius: 16px;
      background: #fff1f2;
      color: #b91c1c;
      font-weight: 650;
      padding: 13px 15px;
      margin-bottom: 18px;
    }
    .security-note {
      margin-top: 22px;
      border-radius: 18px;
      background: #f8fafc;
      border: 1px solid rgba(15,23,42,.08);
      padding: 14px 16px;
      color: #475569;
      font-size: .86rem;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .security-note i { color: #233dff; font-size: 1.05rem; margin-top: 1px; }
    .footer-mini {
      text-align: center;
      color: #64748b;
      font-size: .82rem;
      margin-top: 18px;
    }
    @media (max-width: 991px) {
      .brand-panel { min-height: auto; padding: 32px; }
      .brand-title { font-size: 1.8rem; }
      .brand-stats { grid-template-columns: 1fr; }
      .form-panel { padding: 34px 24px; }
    }