@keyframes custom-animate-fade {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.wpcf7 form {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 4em;

  .wpcf7-response-output {
    display: inline-flex !important;
    visibility: hidden;
    padding: 0;
    margin: 0;
    font-family: var(--wp--preset--font-family--exo);
    font-size: 0.75em;
    font-weight: 300;
    color: var(--wp--custom--swatches--green--300);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: none;
  }
  &:is(.aborted, .failed, .invalid, .sent, .spam, .submitting)
    .wpcf7-response-output {
    visibility: visible;
  }
  &.invalid .wpcf7-response-output {
    color: var(--wp--custom--swatches--gold--300);
  }
  &:is(.aborted, .failed, .spam) .wpcf7-response-output {
    color: var(--wp--custom--swatches--red--300);
  }
  &.submitting .wpcf7-response-output::before {
    color: var(--wp--custom--swatches--grey--200);
    content: "Sending";
    animation: custom-animate-fade 1s ease-in-out infinite alternate;
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: 4em;
    padding: 1em;

    label {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      font-family: var(--wp--preset--font-family--exo);
      font-size: 1rem;
      font-weight: 400;
      color: var(--wp--preset--color--contrast);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    p {
      margin-block-start: 0;
      margin-block-end: 0;
    }

    /* Validation messages */
    span {
      display: flex;
      font-family: var(--wp--preset--font-family--open-sans);
      font-weight: 200;
      text-transform: none;
      letter-spacing: normal;
      &.wpcf7-not-valid-tip {
        color: var(--wp--custom--swatches--grey--300);
      }
    }

    input[type="text"],
    input[type="email"],
    textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 0.75em;
      font-family: var(--wp--preset--font-family--open-sans);
      font-size: 1rem;
      color: var(--wp--custom--swatches--grey--250);
      caret-color: var(--wp--preset--color--input-border-focus);
      background-color: var(--wp--preset--color--input-bg);
      border: 1px solid var(--wp--preset--color--input-border);
      border-radius: var(--wp--preset--border-radius--x-small);
      transition: border-color 0.5s;
      &.wpcf7-not-valid {
        border-color: var(--wp--preset--color--input-border-invalid);
      }
      &:focus {
        border-color: var(--wp--preset--color--input-border-focus);
      }
      @media (min-width: 600px) {
        &:not([name="your-subject"], [name="your-message"]) {
          max-width: 50vw;
        }
      }
    }

    textarea {
      max-width: none;
      resize: vertical;
    }

    input[type="submit"] {
      padding: 0.75em 1.5em;
      font-family: var(--wp--preset--font-family--exo);
      font-size: 1rem;
      font-weight: 500;
      color: var(--wp--preset--color--button-color);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      cursor: pointer;
      background-color: var(--wp--preset--color--button-bg);
      border: none;
      border-radius: var(--wp--preset--border-radius--x-small);
      transition: filter 0.75s;
      &:hover {
        filter: brightness(1.1);
        transition: filter 0.25s;
      }
      &:disabled {
        background-color: var(--wp--custom--swatches--grey--200);
      }
    }

    /* Right-hand div */
    &:nth-of-type(2n) {
      padding: 2em;
      background-color: var(--wp--preset--color--card-bg);
      background-image: var(--wp--custom--backgrounds--card--current);
      border-radius: var(--wp--preset--border-radius--medium);
    }

    .submit-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5em 0 1em;
      /* Hide spinner */
      span {
        display: none;
      }
    }
  }

  @media (max-width: 875px) {
    & {
      grid-template-columns: 1fr;
    }
  }

  &.use-floating-validation-tip .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    margin: 0.4em -1.3em;
    background: none;
    border: none;
  }
}

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
  visibility: hidden;
}