/* ===========================
   BASE
=========================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

.login-page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;

  /* SAME IMAGE AS INDEX HERO */
  background-image:url("images/indexbg2.jpg");
  background-size:cover;
  background-position:center;
  position:relative;
}

/* Dark overlay like index page */
.login-overlay{
  position:absolute;
  inset:0;
  background:rgba(4,5,10,0.15);
  z-index:1;
}

/* ===========================
   LOGIN CARD
=========================== */

.login-card{
  width:380px;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
}

/* ===========================
   HEADER
=========================== */

.card-header{
  background:linear-gradient(135deg,#2daae1 0%,#1e5ba3 100%);
  color:#fff;
  padding:50px 40px;
  position:relative;
  min-height:260px;
  display:flex;
  justify-content:center;
  flex-direction:column;
}

.header-content{
  position:relative;
  z-index:2;
}

.card-header h1{
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:12px;
}

.card-header p{
  font-size:12px;
  opacity:.8;
  margin-bottom:35px;
}

.create-account-link{
  color:#fff;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
}

.create-account-link:hover{
  text-decoration:underline;
}

/* Decorative circles */

.circle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
}

.circle-1{
  width:260px;
  height:260px;
  top:-60px;
  right:-90px;
}

.circle-2{
  width:360px;
  height:360px;
  bottom:-150px;
  left:-120px;
}

/* ===========================
   BODY
=========================== */

.card-body{
  padding:40px;
  text-align:center;
}

.card-body h2{
  color:#2b3975;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:28px;
  font-weight:600;
}

/* ===========================
   INPUTS
=========================== */

.input-group{
  display:flex;
  align-items:center;
  background:#29a1d4;
  margin-bottom:15px;
  border-radius:4px;
  padding:2px;
}

.icon-box{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
}

.input-group input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:10px 10px 10px 0;
  color:#fff;
  font-size:13px;
}

.input-group input::placeholder{
  color:#fff;
  opacity:.9;
}

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

.form-options{
  display:flex;
  justify-content:flex-end;
  margin-bottom:28px;
}

.forgot-pass{
  font-size:11px;
  color:#29a1d4;
  text-decoration:none;
}

.forgot-pass:hover{
  text-decoration:underline;
}

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

.login-btn{
  background:#2d3b7e;
  color:#fff;
  border:none;
  padding:12px 30px;
  border-radius:4px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 5px 15px rgba(45,59,126,0.3);
  transition:.2s;
}

.login-btn:hover{
  background:#232e63;
  transform:translateY(-2px);
}

/* ===========================
   STATUS MESSAGE
=========================== */

.form-status{
  margin-top:12px;
  font-size:12px;
}













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

.terms-row{
  margin: 12px 0 20px;
  text-align: left;
  font-size: 11px;
}

.terms-label{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  cursor: pointer;
  color: #444;
}

.terms-label a{
  color: #2d3b7e;
  font-weight: 500;
  text-decoration: none;
}

.terms-label a:hover{
  text-decoration: underline;
}

/* ===========================
   POLICY MODAL
=========================== */

.policy-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.policy-modal.hidden{
  display: none;
}

.policy-box{
  background: #fff;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.policy-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}

.policy-header h3{
  font-size: 15px;
  font-weight: 600;
}

.policy-header button{
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.policy-content{
  padding: 18px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
}