: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);

    --gf-font-weight-secondary: 300;
    --gf-ctrl-font-size-secondary: 3.25rem;
    --gf-ctrl-label-font-size-secondary: 1.35rem;
    --gf-ctrl-label-font-weight-secondary: 200;

    --gf-ctrl-label-font-size-req: 1rem;
    --gf-ctrl-label-font-weight-req: 400;

    --gf-ctrl-desc-color-error: white;

    --gf-ctrl-radius: 0;

    --gf-ctrl-btn-radius: 0;
    --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
    );
    --gf-ctrl-btn-bg-color-hover-primary: white;
    --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--carhop-green);
    --gf-ctrl-outline-color-focus: white;
    --gf-ctrl-outline-offset: 4px;

    --gf-ctrl-btn-font-size: 3.25rem;

    --gf-ctrl-btn-font-weight: 300;
    --gf-color-in-ctrl-primary: red;
    --gf-ctrl-choice-check-color: white;

    /* ERRORS */
    --gf-color-danger: white;
    /* --gf-color-danger-rgb: white; */
    --gf-form-validation-border-color: transparent;
    --gf-form-validation-heading-color: white;
    --gf-form-validation-heading-font-weight: 600;
    --gf-ctrl-bg-color-error: white;
    --gf-form-validation-bg-color: transparent;
    --gf-ctrl-desc-font-size-error: 1rem;
    --gf-form-validation-heading-font-size: 1rem;
    --gf-form-validation-heading-font-weight: 300;
    --gf-form-validation-radius: 0;
    --gf-form-validation-margin-y: 30px;
    --gf-form-validation-padding-x: 0;

    --gf-ctrl-bg-color-error: transparent;
    --gf-form-validation-padding-y: 16px;
    --gf-form-validation-shadow: none;

    h2.gform_submission_error {
      @apply justify-center;
    }
    .gform-icon--circle-error {
      @apply border-none;
      background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
      @apply bg-no-repeat bg-center bg-contain text-carhop-red-700   rounded-full text-3xl  w-6 h-6;

      margin-right: 0.5rem;
      &:before {
        content: none;
      }
    }
    .gfield_validation_message {
      @apply flex items-center  bg-white border border-carhop-red-700 border-solid text-carhop-red-700 font-normal w-fit py-1 px-4 rounded-full mt-4;
      &:before {
        content: '';
        background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
        @apply block w-5 h-5 bg-no-repeat bg-center bg-contain;
        border-radius: 50%;

        margin-right: 0.5rem;
      }

      &.validation_message--hidden-on-empty {
        @apply hidden;
        &:before {
          content: none;
          @apply hidden;
        }
      }
    }

    .gfield:has(.gfield_validation_message) {
      .ginput_container {
        @apply relative;

        &:before {
          content: '';
          @apply absolute block top-1/2 right-3 w-6 h-6 text-red-800  text-2xl  -translate-y-1/2;
          background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
        }
      }

      .ginput_container_textarea:before,
      .ginput_container_fileupload:before {
        @apply top-8;
      }
    }

    input[type='submit'] {
      --gf-ctrl-btn-font-size: 1.25rem;
      --gf-ctrl-btn-padding-x: 2rem;
      --gf-ctrl-btn-padding-y: 1rem;

      @apply !mt-8 !mb-6;

      /* --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
      ); */
    }
    input[type='checkbox'] + label {
      --gf-ctrl-label-font-size-secondary: 1.25rem;
      --gf-ctrl-label-font-weight-secondary: 300;
      @apply tracking-normal;
    }

    .gform_required_legend {
      @apply hidden;
    }

    .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;
}

.gform_confirmation_wrapper {
  @apply bg-white rounded-3xl px-8 py-4 text-primary;
}