/* Visual feedback for live validation */

/* Invalid: red border + light red background */
.ajax-form input.validation-invalid,
.ajax-form textarea.validation-invalid,
.ajax-form select.validation-invalid {
  border: 1px solid #e74c3c !important;        /* red border */
  background-color: #fdeaea !important;        /* very light red */
}

/* Valid: green border + light green background */
.ajax-form input.validation-valid,
.ajax-form textarea.validation-valid,
.ajax-form select.validation-valid {
  border: 1px solid #2ecc71 !important;        /* green border */
  background-color: #f0f9f0 !important;        /* very light green */
}

/* Smooth transition for nicer UX */
.ajax-form input,
.ajax-form textarea,
.ajax-form select {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Ensure error text remains readable and positioned consistently */
.ajax-form .validation-error {
  color: #e74c3c;          /* red */
  font-size: 12px;
  margin-top: 5px;
}

/* Character counter style tweak to avoid clash with backgrounds */
.ajax-form .character-counter {
  font-size: 11px;
  margin-top: 3px;
  text-align: right;
}