/* Stimulus Validation Styles */

/* Valid state styling */
.wa-input--valid,
input.wa-input--valid,
textarea.wa-input--valid {
  border-color: var(--wa-color-success-400) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Invalid state styling */  
.wa-input--invalid,
input.wa-input--invalid,
textarea.wa-input--invalid {
  border-color: var(--wa-color-danger-400) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Web Awesome component validation states */
wa-input[invalid] {
  --color: var(--wa-color-danger-600);
  --border-color: var(--wa-color-danger-400);
  --focus-ring-color: var(--wa-color-danger-400);
}

wa-textarea[invalid] {
  --color: var(--wa-color-danger-600);
  --border-color: var(--wa-color-danger-400);
  --focus-ring-color: var(--wa-color-danger-400);
}

wa-input[valid] {
  --color: var(--wa-color-success-600);
  --border-color: var(--wa-color-success-400);
  --focus-ring-color: var(--wa-color-success-400);
}

wa-textarea[valid] {
  --color: var(--wa-color-success-600);
  --border-color: var(--wa-color-success-400);
  --focus-ring-color: var(--wa-color-success-400);
}

/* Validation error text styling */
small[data-validation-target="error"] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: var(--wa-space-2xs);
}

/* Form level error styling */
.form-level-error {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
  10% { transform: translateX(-2px); }
  30% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
}

/* Focus states for validation */
.wa-input--valid:focus,
input.wa-input--valid:focus,
textarea.wa-input--valid:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

.wa-input--invalid:focus,
input.wa-input--invalid:focus,
textarea.wa-input--invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}