.contact-us,
.contact-us-confirmation,
.sign-up,
.sign-up-confirmation {
  color: var(--color-cream);
  .container-form {
    background-color: var(--color-cream);
    color: var(--color-dark-char);

    .container-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 400px;
      
      .wpcf7 {
        width: clamp(300px, 100%, 750px);

        & label {
          font-size: 24px;
          font-weight: 800;
          line-height: 30px;
          letter-spacing: 0.15em;
          text-align: left;
        }
        & textarea,
        & input:not([type="checkbox"], .wpcf7-submit) {
          border: 1px solid #b3b3b3;
          font-size: 20px;
          font-weight: 400;
          line-height: 24px;
          letter-spacing: 0em;
          text-align: left;
          width: 100%;
          padding: 0.5em;
        }
        & .wpcf7-list-item-label {
          font-size: 1rem;
          font-weight: 400;
          line-height: 1.1rem;
          letter-spacing: 0em;
          text-align: left;
        }
        & .wpcf7-submit {
          margin: 0 auto;
          display: block;
        }
        & .wpcf7-not-valid-tip {
          font-size: 1rem;
        }
      }

      .header {
        color: var(--color-evergreen);
        text-align: center;

        font-size: 64px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 9.6px;
      }

      .contact-form {
        width: clamp(300px, 100%, 750px);

        .form-row {
          margin-bottom: 1.5rem;

          & label {
            font-size: 24px;
            font-weight: 700;
            line-height: 30px;
            letter-spacing: 0.15em;
            text-align: left;
            color: var(--color-evergreen);
          }
          & textarea,
          & input:not([type="checkbox"]) {
            border: 1px solid #b3b3b3;
            font-size: 20px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0em;
            text-align: left;
            width: 100%;
            padding: 0.5em;
          }
          & label:has(input[type="checkbox"]) {
            display: flex;
            align-items: start;
            & input[type="checkbox"] {
              margin: 0.1em 0.45em 0 0;
            }
          }
          & input::placeholder {
            opacity: 0.5;
            color: #b3b3b3;
          }
          & .list-item-label {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.1rem;
            letter-spacing: 0em;
            text-align: left;
            color: var(--color-dark-char);
          }
        }
        .form-row.has-warning {
          & input {
            outline: 1px solid var(--validation-warning);
            outline-offset: -1px;
            box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
          }
        }

        .validation-warning {
          color: var(--validation-warning);
          font-weight: bold;
        }
        & .submit {
          margin: 2rem auto;
          display: block;
        }
        & .not-valid-tip {
          font-size: 1rem;
        }
      }
    }
  }
}



.submit.btn--loading{
  cursor: not-allowed;
  pointer-events: none;
}
.submit.btn--loading .animation {
  margin-left: .5em;
  width: 1em;
  height: 1em;
}
.submit .animation {
  position: relative;
  transition: all 1s;
  display: inline-block;
  width: 0em;
  height: 0em;
  /* border-top-color: inherit; */
}
.submit .animation::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-width: 0px;
  border-style: solid;
  border-color: transparent;
  border-top-color: inherit;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
  transition: all 1s;
}
.submit.btn--loading .animation::after  {
  width: 16px;
  height: 16px;
  border-width: 4px;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}