/* Force validation messages to be visible */
.invalid-feedback {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
  color: #dc3545 !important;
  font-weight: bold !important;
  padding: 4px 0 !important;
  font-size: 0.875rem !important;
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

/* Override any browser validation styles */
input:invalid, select:invalid, textarea:invalid {
  box-shadow: none !important;
}

/* Force display of error messages even with browser validation */
input.is-invalid ~ .invalid-feedback,
input.is-invalid + .invalid-feedback,
select.is-invalid ~ .invalid-feedback,
select.is-invalid + .invalid-feedback,
textarea.is-invalid ~ .invalid-feedback,
textarea.is-invalid + .invalid-feedback {
  display: block !important;
}

/* Special rule for error messages that might be affected by browser validation */
.form-group:has(.is-invalid) .invalid-feedback {
  display: block !important;
}

/* Make validation feedback more visible on mobile */
@media (max-width: 767px) {
  .invalid-feedback {
    font-size: 1rem !important;
    padding: 6px 0 !important;
    margin-bottom: 0.75rem !important;
  }
}

/* Ensure validation messages appear with animation */
.form-control.is-invalid + .invalid-feedback,
.form-control-file.is-invalid + .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback {
  animation: fade-in 0.3s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Add specific style for file upload errors */
.file-upload-container .invalid-feedback {
  margin-top: 8px !important;
  background-color: rgba(255, 235, 238, 0.7) !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
}