/* ============================================================
   FOKES GLOBAL SERVICES — Auth Pages
   File: assets/css/auth.css  (loads after main.css)
   ============================================================ */

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

/* Brand panel */
.auth-brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(46, 123, 224, 0.35), transparent 60%),
    radial-gradient(600px 420px at 90% 90%, rgba(201, 168, 76, 0.18), transparent 55%),
    var(--navy-deep);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px;
}
.auth-brand::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(700px 500px at 30% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(700px 500px at 30% 40%, black 20%, transparent 75%);
}
.auth-brand .brand-top { position: relative; display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-top img { height: 40px; filter: brightness(0) invert(1); }
.auth-brand-copy { position: relative; }
.auth-brand-copy h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 18px;
}
.auth-brand-copy h2 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 600;
  color: var(--gold);
}
.auth-brand-copy p { color: rgba(255,255,255,0.6); max-width: 42ch; font-size: 0.95rem; }
.auth-points { position: relative; display: flex; flex-direction: column; gap: 13px; }
.auth-points li { display: flex; gap: 12px; font-size: 0.88rem; color: rgba(255,255,255,0.75); }
.auth-points i { color: var(--gold); margin-top: 4px; font-size: 0.8rem; }

/* Form panel */
.auth-form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 6%;
  background: var(--ice);
}
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.75rem; color: var(--navy);
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.auth-card .sub { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 30px; }
.auth-card form { display: flex; flex-direction: column; gap: 17px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.auth-row a { color: var(--blue); font-weight: 600; }
.auth-row a:hover { text-decoration: underline; }
.remember { display: flex; align-items: center; gap: 8px; color: var(--text-mid); cursor: pointer; }
.remember input { width: 16px; height: 16px; accent-color: var(--blue); }
.auth-alt { text-align: center; font-size: 0.86rem; color: var(--text-mid); margin-top: 26px; }
.auth-alt a { color: var(--blue); font-weight: 700; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-soft); margin-bottom: 30px; transition: color 0.2s; }
.auth-back:hover { color: var(--blue); }

/* Password strength meter */
.pw-meter { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; margin-top: 4px; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 0.35s var(--ease), background 0.35s; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
}