:root {
  --form-text-color: var(--wp--preset--color--carhop-green);
  --form-border-color: var(--wp--preset--color--carhop-green);

  /* --gf-ctrl-focus-bg-color: var(--wp--preset--color--carhop-green);
  --gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
  --gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
}
body.front-end {
  .gform-theme--api,
  .gform-theme--framework {
    --gf-ctrl-desc-font-size: 1.1rem;
    --gf-ctrl-desc-font-weight: 200;
    --gf-ctrl-desc-color: rgba(255, 255, 255, 0.9);
    --gf-ctrl-desc-color-focus: rgba(255, 255, 255, 0.9);
    --gf-ctrl-desc-color-hover: rgba(255, 255, 255, 0.9);

    input[type='submit'] {
      --gf-ctrl-btn-bg-color-primary: transparent;
      --gf-ctrl-btn-bg-color-primary-focus: white;
      --gf-ctrl-btn-bg-color-primary-hover: white;
      --gf-ctrl-btn-border-color-primary: white;

      --gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
      --gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
      --gf-ctrl-btn-bg-color-primary-disabled-focus: var(
        --wp--preset--color--carhop-green
      );
      --gf-ctrl-btn-bg-color-primary-disabled-hover: var(
        --wp--preset--color--carhop-green
      );
      --gf-ctrl-btn-bg-color-primary-disabled-active: var(
        --wp--preset--color--carhop-green
      );
    }
    .gform_required_legend {
      @apply hidden;
    }
    .gfield_required {
      --gf-ctrl-label-font-size-req: 20px;
    }

    .gform_fields {
      --gf-form-gap-x: 2rem;
      --gf-form-gap-y: 3.4rem;
    }
    textarea::placeholder,
    input::placeholder {
      --gf-ctrl-placeholder-color: white;
      --gf-ctrl-placeholder-color-focus: white;
      --gf-ctrl-placeholder-color-hover: white;

      color: white;
    }
    textarea,
    input {
      --gf-ctrl-bg-color: transparent;
      --gf-ctrl-bg-color-focus: transparent !important;
      --gf-ctrl-bg-color-hover: transparent !important;

      --gf-ctrl-color: white;
      --gf-ctrl-color-focus: white;
      --gf-ctrl-color-hover: white;

      --gf-ctrl-font-size: 1.2rem;
      --gf-ctrl-font-weight: 300;

      --gf-ctrl-border-color: white;
      --gf-ctrl-border-color-focus: white;
      --gf-ctrl-border-color-hover: white;
      --gf-ctrl-padding-x: 1rem;
      --gf-ctrl-padding-y: 2rem;
    }

    .gfield_description {
      /* --gf-ctrl-desc-color: white;
      --gf-ctrl-desc-color-focus: white;
      --gf-ctrl-desc-color-hover: white; */
    }
    p {
      @apply !pb-0;
    }

    /* input::placeholder {
      color: red !important;
    } */
  }

  /* .gfield:has(input[aria-required='true']) {
    @apply relative;
    &:after {
      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
      line-height: 1;
    }
  } */

  select,
  input,
  textarea {
    @apply bg-transparent border border-primary p-4;
    border-color: var(--form-border-color, #f1fcf9);
    &::placeholder {
      color: var(--form-text-color);
      @apply !text-lg !font-light;
      opacity: 0.6;
    }
  }

  .nf-field-element:has(input[aria-required='true']) {
    @apply relative;
    &:after {
      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
      line-height: 1;
    }
  }

  input[type='submit'] {
    @apply text-white  w-12 h-12 relative block !mx-auto;

    &:hover {
      @apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
    }
  }

  .content-box {
    --form-border-color: var(--content-box-text-color);
    --form-text-color: var(--content-box-text-color);
  }

  /* label {
    @apply sr-only;
  } */

  .nf-form-fields-required {
  }

  .nf-before-form-content {
    .nf-form-fields-required {
      @apply text-lg pb-12;
      color: var(--form-text-color);
      opacity: 0.9;
    }
  }
}

.gfield {
  @apply !relative;

  --gf-ctrl-label-color-primary: white;
  --gf-ctrl-label-color-req: white;
  --gf-ctrl-label-color-secondary: white;

  .gfield_label {
    @apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
    transition: all 0.15s ease-out;
  }
}
.gfield:has(input:focus, textarea:focus),
.gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) {
  .gfield_label {
    @apply !opacity-100;

    top: -40px;
  }
  --gf-ctrl-placeholder-color: transparent;

  #placeholder,
  input::placeholder {
    @apply !opacity-0;
  }
}
.gfield_description a {
  @apply underline underline-offset-8;
  text-decoration-thickness: 1px;
}

.gform_wrapper {
  @apply mt-12;
}