.sign-up-form {
  display: none;

  font-size: 1.1em;
  color: var(--col7);
}

.sign-up-form.active {
  display: block;
  width: fit-content;
}

.sign-up-form > label {
  display: block;

  width: 110%;

  margin-top: 1em;
  margin-bottom: 1em;

  font-size: 1.2em;
}

.sign-up-form > input[type="email"] {
  height: 5rem;

  border-radius: var(--btn-radius);
  border: 1px solid var(--col6);
  padding: 0;

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

.sign-up-form > .btn {
  width: 10rem;
  /* height: 100%; */
  margin-top: 2em;

  float: right;
}

#sign-up-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#email-signup {
  width: 100%;
  padding: 11px 26px;
  border-radius: 30px;
}

.btn .spinner {
  display: none;
}

.spinner.spinner-active {
  display: inline-block;

  margin: 0 auto;
  padding: 1.5rem 3rem;
}

.spinner.spinner-active + .btn-text {
  display: none;
}

/* Form response */
/* ---------- */

.form-response {
  font-size: 1.4em;

  color: var(--col7);
}

#form-success {
  display: none;
}

#form-success.active {
  display: inline;
}

#form-error {
  display: none;
}

#form-error.active {
  display: inline;
}