/* ============================================================
   Global Form Validation Styles
   ============================================================ */

/* Required field star indicator */
.fv-required-star {
  color: #ff3b3b;
  font-weight: bold;
  margin-right: 3px;
  margin-left: 3px;
}

/* Shake animation for error state */
@keyframes fv-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/*
 * Error state: !important is intentional here to ensure these styles
 * override Tailwind utilities and page-specific CSS that define borders
 * and backgrounds on input elements.
 */
.input-error {
  border: 2px solid #ff3b3b !important;
  background: #fff5f5 !important;
  animation: fv-shake 0.3s ease;
  outline: none !important;
}

/* Success state */
.input-success {
  border: 2px solid #22c55e !important;
  background: #f0fdf4 !important;
  outline: none !important;
}

/* Error message text */
.fv-error-message {
  display: block;
  color: #ff3b3b;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}