form {
  [type='text'],
  [type='email'],
  [type='url'],
  [type='password'],
  [type='number'],
  [type='date'],
  [type='datetime-local'],
  [type='month'],
  [type='tel'],
  [type='time'],
  [type='week'],
  [type='file'],
  [multiple],
  textarea,
  select {
    @apply block w-full  border-[2px] border-[#E6E6E6] bg-[#FCFCFC] rounded-sm px-3 py-3 outline-0  text-sm text-dark font-sans;
    @apply focus:ring-1 focus:ring-offset-0 focus:ring-primary;
    @apply placeholder:text-dark;
  }

  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3334 0.5L5.83337 5.5L0.333374 0.5' stroke='%23186AA8'/%3E%3C/svg%3E%0A");
    background-position: center right 1em;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-right: 2.8em;
  }

  textarea {
    @apply h-28;
  }

  a {
    @apply underline;
  }

  [type='checkbox'] {
    @apply absolute top-0 left-0 w-0 h-0 opacity-0;

    + span {
      @apply relative inline-block pl-7 cursor-pointer;

      &::before {
        @apply content-[""] absolute -top-[2px] left-0 w-5 h-5 bg-white border-[2px] border-[#E6E6E6] rounded-sm;
      }

      &::after {
        @apply content-["✕"] absolute -top-[2px] left-[0.3rem] w-5 h-5 text-dark text-sm;
      }
    }

    &:focus {
      + span::before {
        @apply ring-1 ring-offset-0 ring-primary;
      }
    }

    &:not(:checked) {
      + span {
        &::after {
          @apply opacity-0;
        }
      }
    }

    &:checked {
      + span {
        &::after {
          @apply opacity-100;
        }
      }
    }
  }
  .form-element {
    @apply relative;
  }

  .label {
    @apply text-dark font-sans absolute top-0 z-10 left-3 py-3.5 text-sm pointer-events-none w-full;
  }
  .label[for='tel'] {
    @apply left-10;
  }

  .label.active {
    @apply absolute text-xs -translate-y-full text-primary py-0 left-3;
  }
}

.wpcf7 .wpcf7-form {
  @apply relative mb-0 text-body/50;

  .wpcf7-form-control-wrap {
    @apply block;
  }

  .grid {
    @apply items-end;
  }

  .wpcf7-range {
    @apply appearance-none cursor-pointer rounded bg-primary/50 h-1 w-full mt-8;
  }

  .wpcf7-radio {
    @apply flex flex-wrap gap-3;
  }

  .js-range-number {
    @apply absolute text-center text-white text-sm translate-y-6 z-10 w-6 -translate-x-1/2 pointer-events-none left-3;
  }

  .wpcf7-range::-webkit-slider-thumb {
    @apply appearance-none cursor-pointer h-11 w-6 -translate-y-4;
  }

  .wpcf7-list-item {
    @apply ml-0;
  }

  .wpcf7-not-valid-tip {
    @apply absolute top-full right-0 text-xs;

    .wpcf7-radio + & {
      @apply bottom-auto top-full right-auto left-0;
    }
  }

  .wpcf7-acceptance {
    @apply relative text-body/50 text-[14px];

    & + .wpcf7-not-valid-tip {
      @apply bottom-auto top-full;
    }
  }

  .button {
    @apply mt-3;
  }

  &.submitting {
    .form-element,
    small,
    .button {
      @apply opacity-20;
    }

    button {
      pointer-events: none;
    }

    &::after {
      content: '';
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% - 25px);
      width: 50px;
      height: 50px;
      border-radius: 50px;
      animation: spin 2s linear infinite;

      @apply border-4 border-primary/50 border-t-primary;
    }
  }

  &.invalid,
  &.unaccepted,
  &.payment-required {
    .wpcf7-response-output {
      @apply border-none p-5 mx-0 mt-5 mb-0 text-center bg-primary/10 text-error;
    }
  }

  &.sent {
    .wpcf7-response-output {
      @apply border border-none p-5 mx-0 mt-5 mb-0 text-center bg-primary/10 text-dark text-lg font-sans;
    }

    *:not(.wpcf7-response-output) {
      @apply hidden;
    }
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}