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

.auth-form {
  margin-bottom: 0;
}


.auth-form .field {
  margin-bottom: 20px;
}


.auth-form .label {
  margin-bottom: 7px;

  color: var(--navy);

  font-size: 0.84rem;
  font-weight: 800;
}


.auth-form .input,
.auth-form .textarea,
.auth-form .select select {
  border-color: var(--border);

  border-radius: 10px;

  box-shadow: none;
}


.auth-form .input:focus,
.auth-form .textarea:focus,
.auth-form .select select:focus {
  border-color: var(--orange);

  box-shadow:
    0 0 0 2px rgba(245, 158, 11, 0.12);
}


/* =========================================
   HELP TEXT
========================================= */

.auth-help {
  margin-top: 6px;

  color: var(--light-muted);

  font-size: 0.76rem;
  line-height: 1.45;
}


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

.auth-form-divider {
  display: flex;
  align-items: center;

  gap: 12px;

  margin: 30px 0 20px;
}


.auth-form-divider::before,
.auth-form-divider::after {
  content: "";

  flex: 1;

  height: 1px;

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


.auth-form-divider span {
  color: var(--navy);

  font-size: 0.72rem;
  font-weight: 850;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  white-space: nowrap;
}


/* =========================================
   NOTIFICATIONS
========================================= */

.auth-card .notification {
  margin-bottom: 22px;

  border-radius: 10px;
}


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

@media screen and (max-width: 768px) {

  .auth-form-divider {
    margin: 24px 0 16px;
  }

}


/* =========================================
   LOGIN VERIFICATION RESEND
========================================= */

.auth-verification-resend {
  margin:
    -8px 0 22px;

  padding:
    14px;

  background-color:
    #fffaf3;

  border:
    1px solid
    #f6c27a;

  border-radius:
    10px;
}


.auth-verification-resend p {
  margin:
    0;

  color:
    var(--navy);

  font-size:
    0.84rem;

  font-weight:
    750;
}


.auth-verification-resend
.auth-help {
  margin-top:
    5px;

  margin-bottom:
    10px;

  color:
    var(--muted);

  font-size:
    0.75rem;

  font-weight:
    500;
}


.auth-resend-button {
  min-height:
    38px;

  font-size:
    0.78rem;

  font-weight:
    800;
}