.auth-section{
  width:100%;
  min-height:100vh;
  display:flex;
}

/* =========================
   LEFT SIDE
========================= */

.auth-left{
  flex:1;
  background:url('../assets/images/banners/login-banner.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
}

.auth-overlay{
  width:100%;
  height:100%;
  background:rgba(15,23,42,0.85);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px;
}

.auth-overlay h1{
  font-size:60px;
  line-height:1.2;
  margin-bottom:20px;
}

.auth-overlay p{
  color:var(--text-light);
  font-size:18px;
  line-height:1.8;
  max-width:500px;
}

/* =========================
   RIGHT SIDE
========================= */

.auth-right{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.auth-box{
  width:100%;
  max-width:450px;
  background:var(--card-bg);
  padding:45px;
  border-radius:25px;
  border:1px solid var(--border-color);
}

.auth-logo{
  font-size:35px;
  font-weight:700;
  margin-bottom:20px;
  text-align:center;
}

.auth-logo span{
  color:var(--primary-color);
}

.auth-box h2{
  text-align:center;
  margin-bottom:10px;
  font-size:34px;
}

.auth-subtitle{
  text-align:center;
  color:var(--text-light);
  margin-bottom:35px;
}

/* =========================
   FORM
========================= */

.input-group{
  margin-bottom:22px;
}

.input-group label{
  display:block;
  margin-bottom:10px;
  font-size:15px;
  font-weight:600;
}

.input-group input{
  width:100%;
  height:55px;
  background:#0F172A;
  border:1px solid var(--border-color);
  border-radius:14px;
  padding:0 18px;
  color:white;
  font-size:15px;
  outline:none;
  transition:var(--transition);
}

.input-group input:focus{
  border-color:var(--primary-color);
}

/* =========================
   OPTIONS
========================= */

.auth-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
}

.remember-box{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-light);
  font-size:14px;
}

.auth-options a{
  color:var(--primary-color);
  font-size:14px;
}

/* =========================
   BUTTON
========================= */

.auth-btn{
  width:100%;
  height:55px;
  background:var(--primary-color);
  color:white;
  font-size:16px;
  border-radius:14px;
  font-weight:600;
  transition:var(--transition);
}

.auth-btn:hover{
  background:var(--primary-dark);
}

/* =========================
   DIVIDER
========================= */

.divider{
  margin:30px 0;
  position:relative;
  text-align:center;
}

.divider::before{
  content:'';
  width:100%;
  height:1px;
  background:var(--border-color);
  position:absolute;
  top:50%;
  left:0;
}

.divider span{
  background:var(--card-bg);
  padding:0 15px;
  position:relative;
  z-index:2;
  color:var(--text-light);
  font-size:14px;
}

/* =========================
   GOOGLE BUTTON
========================= */

.google-btn{
  width:100%;
  height:55px;
  border:1px solid var(--border-color);
  border-radius:14px;
  background:transparent;
  color:white;
  font-size:15px;
  margin-bottom:25px;
  transition:var(--transition);
}

.google-btn:hover{
  background:#111827;
}

/* =========================
   BOTTOM TEXT
========================= */

.bottom-text{
  text-align:center;
  color:var(--text-light);
  font-size:15px;
}

.bottom-text a{
  color:var(--primary-color);
  font-weight:600;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

  .auth-left{
    display:none;
  }

  .auth-right{
    width:100%;
  }

}

@media(max-width:576px){

  .auth-box{
    padding:30px 25px;
  }

  .auth-box h2{
    font-size:28px;
  }

}


/* =========================
   REGISTER PAGE
========================= */

.register-banner{
  background:url('../assets/images/banners/register-banner.jpg');
  background-size:cover;
  background-position:center;
}

/* =========================
   TERMS
========================= */

.terms-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  color:var(--text-light);
  font-size:14px;
}

.terms-box input{
  width:18px;
  height:18px;
  accent-color:var(--primary-color);
}