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

.auth-page {

  min-height:
    calc(100vh - var(--navbar-height));

  display: flex;

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

  padding:
    var(--space-16)
    var(--space-6);

  background:
    var(--color-bg);
}


/* =========================================
   AUTH CARD
========================================= */

.auth-card {

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

  background:
    var(--color-white);

  border-radius:
    var(--radius-2xl);

  padding:
    var(--space-10);

  box-shadow:
    var(--shadow-card);

  border:
    1px solid var(--color-border);
}

.auth-card:hover {

  transform: none;
}


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

.auth-header {

  text-align: center;

  margin-bottom:
    var(--space-8);
}


/* =========================================
   AUTH ICON
========================================= */

.auth-icon {

  width: 72px;
  height: 72px;

  margin: 0 auto
    var(--space-5);

  display: flex;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--color-primary-light);

  color:
    var(--color-primary);

  font-weight:
    var(--font-bold);
}


.auth-icon svg {

  width: 30px;
  height: 30px;
}


/* =========================================
   AUTH TITLE
========================================= */

.auth-title {

  font-size:
    var(--text-3xl);

  margin-bottom:
    var(--space-2);
}


/* =========================================
   AUTH SUBTITLE
========================================= */

.auth-subtitle {

  color:
    var(--color-text-muted);

  font-size:
    var(--text-base);
}


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

.auth-form {

  display: grid;

  gap:
    var(--space-5);
}

.auth-form .form-group {

  margin-bottom: 0;
}

.auth-message {

  min-height: 22px;

  font-size:
    var(--text-sm);

  text-align: center;
}

.auth-message-error {

  color:
    var(--color-danger);
}

.auth-message-success {

  color:
    var(--color-success);
}

.auth-switch,
.auth-legal {

  text-align: center;
}

.auth-switch {

  margin-top:
    var(--space-6);

  font-size:
    var(--text-sm);
}

.auth-switch a,
.auth-legal a {

  color:
    var(--color-primary);

  font-weight:
    var(--font-semibold);
}

.auth-legal {

  margin-top:
    var(--space-4);

  font-size:
    var(--text-xs);

  color:
    var(--color-text-muted);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 640px) {

  .auth-page {

    align-items: flex-start;

    padding:
      var(--space-10)
      var(--space-4);
  }

  .auth-card {

    padding:
      var(--space-6);
  }

  .auth-title {

    font-size:
      var(--text-2xl);
  }
}