@layer components {
  .suggestr-form {
 
  }

  .suggestr-form .form-label {
    @apply block text-lg font-bold uppercase text-blue mb-2 tracking-wide;
  }

  .suggestr-form .field_with_errors .form-label {
    @apply text-red;
  }


  .suggestr-form .form-input {
    @apply w-full px-4 py-3 border-2 border-blue rounded-lg focus:ring-2 focus:ring-blue focus:border-transparent text-lg bg-white text-blue;
  }

  .suggestr-form .field_with_errors .form-input {
    @apply text-red border-red focus:ring-red focus:border-red;
  }

  .suggestr-form .form-hint {
    @apply text-sm text-gray-500 italic mt-2;
  }

  .suggestr-form .form-submit {
    @apply bg-black text-white font-semibold py-4 px-8 rounded-lg hover:bg-gray-800 transition-colors text-xl uppercase tracking-wide cursor-pointer;
  }

  .suggestr-form .form-checkbox {
    @apply w-6 h-6 text-blue border-2 border-blue rounded focus:ring-2 focus:ring-blue cursor-pointer;
  }

  .suggestr-form .form-group {
    @apply mb-6;
  }

  .suggestr-form-errors {
    @apply mb-6 p-4;
  }

  .suggestr-form-errors .form-error-title {
    @apply text-red font-bold text-xl uppercase tracking-wide;
  }

  .suggestr-form-errors .form-error-list { 
    @apply list-disc list-inside text-red text-lg;
  }

}