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

body{

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  padding: 20px;

  font-family: Arial, sans-serif;

  background:
  linear-gradient(
    rgba(13, 19, 39, 0.72),
    rgba(30,58,138,0.72)
  ),

  url("../assets/images/solar-bg.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;
}



/* =========================
   LOGIN BOX
========================= */

.login-box{

  width: 380px;

  background: white;

  border-radius: 26px;

  overflow: hidden;

  box-shadow:
  0 15px 45px rgba(0,0,0,0.35);
}



/* =========================
   TOP SECTION
========================= */

.login-top{

  height: 180px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 15px 20px 5px;
}



/* LOGO IMAGE */

.login-banner{

  width: 100%;

  max-width: 220px;

  height: auto;

  object-fit: contain;

  border-radius: 12px;

  background: white;

  padding: 8px;

  box-shadow:
  0 4px 12px rgba(0,0,0,0.15);
}


/* =========================
   BOTTOM SECTION
========================= */

.login-bottom{

  padding: 20px 30px 30px;
}


/* FORM */

#login-form{

  display: flex;

  flex-direction: column;

  gap: 18px;
}



/* INPUT */

#login-form input{

  width: 100%;

  height: 54px;

  border: 1px solid #d1d5db;

  border-radius: 14px;

  padding: 0 18px;

  font-size: 15px;

  background: #f1f5f9;

  outline: none;

  transition: 0.3s;
}



/* INPUT FOCUS */

#login-form input:focus{

  border-color: #2563eb;

  background: white;

  box-shadow:
  0 0 0 3px rgba(37,99,235,0.15);
}



/* BUTTON */

#login-form button{

  width: 100%;

  height: 54px;

  border: none;

  border-radius: 14px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );

  color: white;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.3s;
}



/* BUTTON HOVER */

#login-form button:hover{

  transform: translateY(-2px);

  box-shadow:
  0 8px 18px rgba(37,99,235,0.25);
}



/* ERROR */

#login-error{

  text-align: center;

  color: red;

  font-size: 14px;

  min-height: 18px;
}