.c-form-block {
  padding: var(--space-xl) var(--space-md);
  background: var(--c-background);

  @media screen and (min-width: 1024px) {
    padding: var(--space-super) var(--space-xl);
  }

  &__container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-xl);

    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-super);
    }
  }

  &[data-theme='dark'] {
    background: var(--bg-secondary-gradient);
    color: var(--inverted-default);

    .gform_wrapper form .gform_fields .gfield .ginput_container_select::after {
      filter: invert(100%);
    }
  }

  &__content {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-xl);
  }

  &__heading {
    color: var(--c-foreground);
    font-family: var(--font-primary);
    font-size: 36px;
    line-height: 44px;
    font-weight: 300;
  }

  &__description {
    color: var(--c-foreground-weak);
    font: var(--font-body-lg);
    font-weight: 300;
  }

  &__form {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-sm);

    @media screen and (min-width: 1024px) {
      grid-column: 2 / span 2;
    }
  }

  // Gravity Forms styling
  .gform_wrapper {
    @media screen and (min-width: 1024px) {
      grid-column: 2 / span 2;
    }

    .gform_heading {
      display: none;
    }

    form {
      .gform_fields {
        display: flex;
        flex-flow: column nowrap;
        gap: var(--space-sm);

        .gfield {
          input[type='text'],
          input[type='email'],
          input[type='tel'],
          select {
            display: block;
            width: 100%;
            min-height: 48px;
            background: rgba(255, 255, 255, 0.05);
            padding: var(--space-sm) var(--space);
            border: var(--border-width-default) solid var(--border-color-strong);
            border-radius: var(--border-radius-round);
            color: var(--inverted-weak);
            font: var(--font-body-md);

            &::placeholder {
              color: var(--inverted-weak);
            }
          }

          .ginput_container_select {
            position: relative;

            select {
              appearance: none;
              -webkit-appearance: none;
              -moz-appearance: none;
              padding-right: var(--space-md);
            }

            &::after {
              content: '';
              position: absolute;
              right: var(--space-md);
              top: 50%;
              transform: translateY(-50%);
              width: 10px;
              height: 7px;
              background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.146484 1.17439L0.853591 0.467285L5.00004 4.61373L9.14648 0.467285L9.85359 1.17439L5.00004 6.02795L0.146484 1.17439Z' fill='currentColor'/%3E%3C/svg%3E%0A");
              background-repeat: no-repeat;
              pointer-events: none;
            }
          }

          textarea {
            display: block;
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            padding: var(--space-sm) var(--space);
            border: var(--border-width-default) solid var(--border-color-strong);
            border-radius: 30px;
            color: var(--inverted-weak);
            font: var(--font-body-md);
            resize: none;
            min-height: 200px;

            &::placeholder {
              color: var(--inverted-weak);
            }
          }
        }

        .ginput_complex:not(.ginput_container_address) {
          span:not([style*='display:none']):not(.ginput_full) {
            padding: unset;
          }
        }

        .gform-grid-row {
          margin-inline: unset;
        }
      }

      .gform_footer {
        padding-top: var(--space-md);

        .gform_button,
        input[type='submit'] {
          width: fit-content;
          padding: var(--space-xs) var(--space-mobile);
          margin: 0;
          background: rgba(255, 255, 255, 0.05);
          border: var(--border-width-default) solid var(--inverted-default);
          border-radius: 52px;
          color: var(--inverted-default);
          font: var(--font-body-md);
          white-space: nowrap;
          transition: all var(--transition-bounce);
          position: relative;
          z-index: 1;
          cursor: pointer;
        }

        &::after {
          content: '';
          display: none;
          width: 18px;
          height: 13px;
          color: var(--inverted-default);
          background-image: url("data:image/svg+xml,%3Csvg width='18' height='13' viewBox='0 0 18 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7929 7H0V6H15.7929L10.6464 0.853591L11.3536 0.146484L17.7071 6.50004L11.3536 12.8536L10.6464 12.1465L15.7929 7Z' fill='currentColor'/%3E%3C/svg%3E");
        }
      }

      .gfield_error {
        input[type='text'],
        input[type='email'],
        input[type='tel'],
        select,
        textarea {
          border-color: var(--bg-danger-default) !important;
        }

        .validation_message {
          background: none;
          border: none;
          padding: var(--space-xxs) var(--space);
          color: var(--danger-default);
        }
      }
    }

    .gform_validation_errors {
      background: var(--bg-default-strong);
      color: var(--danger-default);
    }
  }

  &[data-theme='light'] {
    form {
      .gform_fields {
        .gfield {
          input[type='text'],
          input[type='email'],
          input[type='tel'],
          textarea,
          select {
            background: var(--bg-default-strong);
            border: var(--border-width-default) solid var(--border-color-strong);
            color: var(--default);

            &::placeholder {
              color: var(--default-weak);
            }
          }
        }
      }
     
      .gform_footer {
        .gform_button,
        input[type='submit'] {
          background: transparent;
          border: var(--border-width-default) solid var(--default);
          color: var(--default);
        }

        &::after {
          color: var(--default);
        }
      }
    }
  }
}