/* Reset and enhance Bootstrap validation styles */
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc3545 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: calc(1.5em + 0.75rem) !important;
}

/* Fix for rtl */
[dir="rtl"] .form-control.is-invalid,
[dir="rtl"].was-validated .form-control:invalid {
  background-position: left calc(0.375em + 0.1875rem) center !important;
  padding-right: 0.75rem !important;
  padding-left: calc(1.5em + 0.75rem) !important;
}

/* Force visibility of invalid feedback */
.invalid-feedback {
  display: none;
  color: #dc3545 !important;
  margin-top: 0.25rem !important;
  font-size: 80% !important;
  font-weight: bold !important;
}

.is-invalid ~ .invalid-feedback,
.is-invalid + .invalid-feedback,
.form-group:has(.is-invalid) .invalid-feedback {
  display: block !important;
}

/* Animation for invalid fields */
.form-control.is-invalid,
.form-check-input.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  animation: error-shake 0.5s !important;
}

@keyframes error-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* Error container styling */
#validation-error-container {
  margin-bottom: 20px !important;
  border-left: 5px solid #dc3545 !important;
  animation: fade-in 0.5s !important;
  display: none; /* Hidden by default */
  font-weight: 500 !important;
  padding: 15px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  background-color: #fff8f8 !important;
}

#validation-error-container.show {
  display: block !important;
}

#validation-error-container strong {
  display: block;
  margin-bottom: 8px !important;
  font-size: 1.1em !important;
}

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

/* Improve checkbox/radio error styling */
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545 !important;
}

.has-validation-error {
  border-left: 3px solid #dc3545 !important;
  padding-left: 10px !important;
  background-color: rgba(220, 53, 69, 0.05) !important;
  border-radius: 4px !important;
}