/* ===============================
   AUTH PAGE
=============================== */

.auth-page {
  min-height: 100vh;

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

  padding: 140px 24px 100px;
}


/* ===============================
   AUTH SECTION
=============================== */

.auth {
  width: 100%;
}


/* ===============================
   CONTAINER
=============================== */

.auth__container {
  width: 100%;
  max-width: 420px;

  margin: 0 auto;
}


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

.auth__header {
  margin-bottom: 40px;

  text-align: center;
}

.auth__title {
  margin: 0;

  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth__subtitle {
  margin-top: 14px;

  font-size: 14px;
  line-height: 1.7;

  color: rgba(0,0,0,0.55);
}


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

.auth-form {
  display: flex;
  flex-direction: column;

  gap: 22px;
}


/* ===============================
   GROUP
=============================== */

.auth-form__group {
  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* ===============================
   LABEL
=============================== */

.auth-form__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ===============================
   INPUT
=============================== */

.auth-form__input {
  width: 100%;
  height: 54px;

  padding: 0 18px;

  border: 1px solid #ddd;

  background: #fff;

  font-size: 14px;

  outline: none;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.auth-form__input:focus {
  border-color: #111;
}

.auth-form__input::placeholder {
  color: rgba(0,0,0,0.35);
}


/* ===============================
   ERROR
=============================== */

.auth-form__error {
  min-height: 18px;

  margin: -4px 0 0;

  font-size: 12px;

  color: #b42318;
}


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

.auth-form__button {
  width: 100%;
  height: 54px;

  border: none;

  background: #111;
  color: #fff;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

.auth-form__button:hover {
  background: #000;
}


/* ===============================
   FOOTER
=============================== */

.auth__footer {
  margin-top: 32px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  flex-wrap: wrap;
}

.auth__footer-text {
  margin: 0;

  font-size: 13px;

  color: rgba(0,0,0,0.55);
}

.auth__footer-link {
  font-size: 13px;
  font-weight: 500;

  color: #111;

  text-decoration: none;

  transition: opacity 0.2s ease;
}

.auth__footer-link:hover {
  opacity: 0.6;
}


/* ===============================
   MOBILE
=============================== */

@media (max-width: 768px) {

  .auth-page {
    padding:
      120px 20px 80px;
  }

  .auth__title {
    font-size: 26px;
  }

  .auth__subtitle {
    font-size: 13px;
  }

}