.general-contact-form {
  & .wpcf7 {
    & .wpcf7-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 16px;

      & .hj-contact-form__form-control {
        width: 100%;

        &.hj-contact-form__form-control--w-half {
          @media (min-width: 768px) {
            width: calc(50% - 10px);
          }
        }

        & p,
        & p label {
          display: block;
          width: 100%;
        }

        & label {
          font-size: 16px;
          line-height: 24px;

          & .hj-contact-form__label-required-sign {
            color: #e51a3c;
          }

          & .wpcf7-not-valid-tip {
            color: #e51a3c;
            padding-left: 8px;
          }

          &:has(.wpcf7-not-valid-tip) {
            & input,
            & textarea {
              border-color: #e51a3c;
              margin-bottom: 4px;
            }
          }
        }

        & input,
        & textarea {
          margin-top: 8px;
          width: 100%;
          padding: 7px;
          border: 1px solid #868e96;
          border-radius: 4px;
          font-size: 16px;
          line-height: 24px;
          outline: none;

          &::placeholder {
            color: #868e96;
          }

          &:focus {
            border-color: var(--wp--preset--color--primary);
          }
        }

        & textarea {
          resize: vertical;
          min-height: 120px;
        }
      }

      &.invalid .wpcf7-response-output {
        border-width: 0 0 0 3px;
        border-color: #e51a3c;
      }

      & .hj-contact-form__submit {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px;

        & > p {
          width: 100%;
          max-width: 350px;

          @media (min-width: 768px) {
            width: max-content;
          }
        }

        & button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          gap: 8px;
          padding: 12px 24px;
          background: var(--wp--preset--color--primary);
          color: var(--wp--preset--color--white);
          border-radius: 8px;

          @media (min-width: 768px) {
            width: max-content;
          }
        }
      }
    }
  }
}