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

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

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