/* ───────── RESET & BASE TOKENS ───────── */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}
html,body{height:100%;}
:root{
  --brand-blue:#2b6cb0;
  --card-w:550px;           /* wider login panel  */
  --card-radius:12px;
}

/* ───────── PAGE BACKDROP ───────── */
body.login-page{
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
    url("../assets/bg.jpg") center/cover no-repeat fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:2rem;
}

/* ───────── LOGIN CARD ───────── */
.login-card{
  position:relative;
  width:var(--card-w);
  max-width:95vw;
  background:#fff;
  border-radius:var(--card-radius);
  padding:3rem 2.5rem 3.1rem;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
  overflow:hidden;                   /* clip the silhouette */
  text-align:left;                   /* headings & body copy left-aligned */
}

/* golfer silhouette (anchored slightly left) */
.login-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../assets/login-swinging-man.png") -100% center / 78% no-repeat;
  /*              ^ 5 % pushes it off-centre to the left              */
  opacity:.08;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
.login-card > *{position:relative; z-index:1;}  /* lift real content */

/* ───────── LOGO & HEADINGS ───────── */
.login-card .brand{
  display:block;
  width:250px;             /* a touch smaller than before */
  margin:0 auto 1.8rem;    /* centred */
}
.login-card h2{
  font-size:2.1rem;
  font-weight:700;
  margin-bottom:.4rem;
}
.login-card .tagline{
  font-size:.92rem;
  color:#4a5568;
  margin-bottom:2rem;
}

/* ───────── FORM FIELDS ───────── */
.login-card form{text-align:left;}
.login-card label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  margin-bottom:1rem;
  color:#4a5568;
}
.login-card input{
  width:100%;
  padding:.68rem .9rem;
  margin-top:.35rem;
  border:1px solid #cbd5e0;
  border-radius:6px;
  font-size:1rem;
  outline:none;
  transition:border .15s;
}
.login-card input:focus{border-color:var(--brand-blue);}

/* ───────── REMEMBER + FORGOT ROW ───────── */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:1.35rem 0 2rem;
  flex-wrap:nowrap;
}
.remember{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.9rem;
  color:#4a5568;
  line-height:1;
}
/* exact 20 × 12 px custom checkbox */
.remember input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:12px;
  margin:0;
  border:1px solid #cbd5e0;
  border-radius:3px;
  cursor:pointer;
  position:relative;
}
.remember input[type="checkbox"]:checked::before{
  content:'';
  position:absolute;
  inset:2px;
  background:var(--brand-blue);
  border-radius:2px;
}
.forgot{
  font-size:.9rem;
  color:var(--brand-blue);
  text-decoration:none;
  white-space:nowrap;
}

/* ───────── ERROR BANNER ───────── */
.error{
  background:#fdecea;
  color:#c53030;
  font-size:.9rem;
  padding:.75rem .95rem;
  border-radius:6px;
  margin-bottom:1.5rem;
}

/* ───────── PRIMARY BUTTON ───────── */
.primary-btn{
  width:100%;
  background:var(--brand-blue);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:.9rem 0;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.primary-btn:hover{background:#24599a;}

/* ───────── FOOTER LINK ───────── */
.login-card .foot{
  margin-top:1.6rem;
  font-size:.9rem;
  text-align:center;
}
.login-card .foot a{
  color:var(--brand-blue);
  text-decoration:none;
}

/* ───────── ERROR MODAL ───────── */
.error-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:1000;
}
.error-modal.show{display:flex;}
.error-modal .modal-content{
  background:#fff;
  padding:1.5rem 2rem;
  border-radius:8px;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.error-modal .modal-content p{margin-bottom:1rem;font-size:1rem;}
.error-modal .modal-content button{
  background:var(--brand-blue);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:.6rem 1.2rem;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.error-modal .modal-content button:hover{background:#24599a;}