/* ==========================================
   LOGIN / REGISTRO - SAMIRA LODI
========================================== */

.login-page {
  min-height: 100vh;
  padding-top: 120px;
}

.login-section {
  min-height: calc(100vh - 120px);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 80px 20px;
}


.login-box {

  width: 100%;

  max-width: 520px;

  background: #FAFAF8;

  padding: 70px 60px;

  border: 1px solid rgba(22,18,18,0.08);

}


.login-box h1 {

  font-size: 3rem;

  font-weight: 300;

  line-height: 1.2;

  margin: 18px 0;

}


.login-intro {

  color: #666;

  line-height: 1.8;

  margin-bottom: 40px;

}


.form-group {

  margin-bottom: 24px;

}


.form-group label {

  display: block;

  font-size: 0.8rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 9px;

  color: #5d554e;

}


.form-group input {

  width: 100%;

  padding: 15px 0;

  border: none;

  border-bottom: 1px solid #c8c3bd;

  background: transparent;

  font-family: 'Josefin Sans', sans-serif;

  font-size: 1rem;

  color: #161212;

  outline: none;

}


.form-group input:focus {

  border-bottom-color: #161212;

}


.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}


.login-button {

  width: 100%;

  border: none;

  cursor: pointer;

  margin-top: 15px;

  font-family: 'Josefin Sans', sans-serif;

}


.form-message {

  min-height: 24px;

  margin-top: 18px;

  font-size: 0.9rem;

  text-align: center;

  color: #6f6256;

}


.login-links {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 35px;

  padding-top: 25px;

  border-top: 1px solid #ddd8d2;

}


.login-links a {

  color: #161212;

  text-decoration: none;

  font-size: 0.85rem;

  letter-spacing: 1px;

}


.login-links a:hover {

  opacity: 0.55;

}


@media(max-width: 768px) {

  .login-page {

    padding-top: 100px;

  }


  .login-section {

    padding: 50px 20px;

  }


  .login-box {

    padding: 45px 25px;

  }


  .login-box h1 {

    font-size: 2.3rem;

  }


  .form-row {

    grid-template-columns: 1fr;

    gap: 0;

  }


  .login-links {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }

}