/* StaffNow ATS — Login photo background (green-led) — v4
   Must outrank klimbnow-bootstrap.css #login-page rules (swirl blobs + card).
   Uses body-prefixed selectors to raise specificity above its #login-page ::before/::after. */

body #login-page, body #forgot-page, body #reset-page{
  justify-content:flex-start !important;
  align-items:center !important;
  padding-left:5% !important;
  position:relative !important;
  overflow:hidden !important;
  background:none !important;
}

/* reclaim the pseudo-elements from bootstrap's swirl blobs: ::before = photo */
body #login-page::before, body #forgot-page::before, body #reset-page::before{
  content:'' !important;position:absolute !important;inset:0 !important;z-index:0 !important;
  background:url('/img/login-bg.jpg?v=green4') right center/cover no-repeat !important;
  transform:scale(1.04) !important;transform-origin:right center !important;
  animation:knLogin 26s ease-in-out infinite alternate !important;
  opacity:1 !important;filter:none !important;border-radius:0 !important;
  width:auto !important;height:auto !important;top:0 !important;left:0 !important;
}
@keyframes knLogin{from{transform:scale(1.04)}to{transform:scale(1.12) translate(0,-1%)}}

/* ::after = brand scrim so the card stays readable */
body #login-page::after, body #forgot-page::after, body #reset-page::after{
  content:'' !important;position:absolute !important;inset:0 !important;z-index:1 !important;
  pointer-events:none !important;border-radius:0 !important;opacity:1 !important;
  width:auto !important;height:auto !important;top:0 !important;left:0 !important;
  background:linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.95) 30%,
      rgba(255,255,255,.52) 46%,
      rgba(243,247,244,.10) 60%,
      rgba(28,111,208,.04) 85%,
      rgba(46,155,79,.08) 100%) !important;
}

/* card above photo + scrim, outrank bootstrap's #login-page .login-wrap */
body #login-page .login-wrap, body #forgot-page .login-wrap, body #reset-page .login-wrap{
  position:relative !important;z-index:2 !important;margin:0 !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:0 24px 70px rgba(27,31,29,.18) !important;
}

@media(max-width:720px){
  body #login-page, body #forgot-page, body #reset-page{justify-content:center !important;padding-left:0 !important;}
  body #login-page::after, body #forgot-page::after, body #reset-page::after{
    background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80)) !important;}
}
@media(prefers-reduced-motion:reduce){
  body #login-page::before, body #forgot-page::before, body #reset-page::before{animation:none !important;transform:scale(1.04) !important;}
}