.form-group .error-message {
  font-size: var(--text-sm);
  color: var(--color-error-500);
  margin-top: var(--space-2);
  display: none;
}

.form-group.has-error .error-message {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-group.has-error .error-message::before {
  content: '\26A0';
  font-size: var(--text-xs);
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--color-error-500);
  background-color: rgba(239, 68, 68, 0.02);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
  box-shadow: var(--shadow-focus-error);
}