/* =========================
   LOGIN PAGE
========================= */

body{

  min-height:100vh;

  background:
    linear-gradient(
      135deg,
      #061427 0%,
      #081B34 45%,
      #0E2F56 100%
    );

overflow-x:hidden;
overflow-y:auto;

  position:relative;
}


/* GLOW EFFECTS */

body::before,
body::after{

  content:"";

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.18;

  z-index:0;
}

body::before{

  width:420px;
  height:420px;

  background:#00B8C4;

  top:-140px;
  left:-120px;
}

body::after{

  width:420px;
  height:420px;

  background:#F97316;

  bottom:-140px;
  right:-120px;
}


/* MAIN WRAPPER */

.login-wrapper{

  min-height:calc(100vh - 92px);
padding-top:92px;

  display:grid;

  grid-template-columns:
    1fr 520px;

  position:relative;

  z-index:2;
}


/* LEFT SIDE */

.login-left{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:80px;

  color:white;
}

.login-badge{

  display:inline-flex;

  align-items:center;

  width:fit-content;

  padding:12px 18px;

  border-radius:999px;

  background:
    rgba(249,115,22,0.12);

  border:
    1px solid rgba(249,115,22,0.22);

  color:#FDBA74;

  font-size:0.85rem;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:30px;
}

.login-left h1{

  font-size:3rem;

  line-height:1.05;

  margin-bottom:28px;

  color:white;
}

.login-left h1 span{

  color:var(--teal-primary);
}

.login-left p{

  max-width:580px;

  font-size:1.15rem;

  line-height:1.9;

  color:
    rgba(255,255,255,0.72);
}


/* RIGHT SIDE */

.login-right{

  display:flex;

  justify-content:center;
  align-items:center;

  padding:40px;
}


/* LOGIN CARD */

.login-container{

  width:100%;
  max-width:430px;

  background:
    rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:32px;

  padding:42px;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.35);
}


/* TITLE */

.login-container h2{

  color:white;

  font-size:2.4rem;

  margin-bottom:10px;

  border:none;
  padding:0;
}

.login-subtitle{

  color:
    rgba(255,255,255,0.65);

  margin-bottom:32px;

  line-height:1.7;
}


/* INPUTS */

.login-container input{

  width:100%;

  padding:16px 18px;

  margin-bottom:18px;

  border-radius:16px;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.06);

  color:white;

  font-size:1rem;

  transition:0.3s ease;
}

.login-container input::placeholder{

  color:
    rgba(255,255,255,0.45);
}

.login-container input:focus{

  outline:none;

  border-color:
    rgba(0,184,196,0.45);

  box-shadow:
    0 0 0 4px rgba(0,184,196,0.12);
}


/* PASSWORD */

.password-wrapper{
  position:relative;
}

.toggle-password{

  position:absolute;

  right:18px;
  top:50%;

  transform:translateY(-50%);

  color:
    rgba(255,255,255,0.55);

  font-size:0.9rem;

  cursor:pointer;
}


/* BUTTON */

.login-container button{

  width:100%;

  padding:16px;

  border:none;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  font-size:1rem;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;

  margin-top:10px;
}

.login-container button:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 30px rgba(249,115,22,0.28);
}


/* FORGOT PASSWORD */

.forgot-password{

  text-align:center;

  margin-top:22px;
}

.forgot-password a{

  color:
    rgba(255,255,255,0.6);

  text-decoration:none;

  transition:0.3s ease;
}

.forgot-password a:hover{

  color:#00B8C4;
}


/* MESSAGE */

#message{

  margin-top:18px;

  text-align:center;

  font-weight:500;
}


/* LOADER */

#loading{

  display:none;

  justify-content:center;

  align-items:center;

  margin-top:22px;
}

.spinner{

  width:42px;
  height:42px;

  border-radius:50%;

  border:4px solid rgba(255,255,255,0.12);

  border-top:4px solid #00B8C4;

  animation:spin 0.8s linear infinite;
}

@keyframes spin{

  to{
    transform:rotate(360deg);
  }
}

/* MOBILE */

@media(max-width:992px){

  .login-wrapper{

    grid-template-columns:1fr;
  }

  .login-left{

    display:none;
  }

  .login-right{

    min-height:100vh;
  }
}

@media(max-width:768px){

  .login-container{

    padding:32px 24px;
  }

  .login-container h2{

    font-size:2rem;
  }
}