/* Shared error styling; success and warning palettes keep their existing colors. */
:root { --feedback-error: #FF0000; }

:is(.error, .is-error, [data-feedback="error"], [role="alert"],
    .field-error, .clients-notice--error, .clients-field__error,
    .jobs-errors, .jobs-field-error, .hw-error-summary, .hw-error,
    .map-error, .feedback-error) {
  color: #FF0000 !important;
  border-color: #FF0000 !important;
}

:is(.error, .is-error, [data-feedback="error"], [role="alert"],
    .field-error, .clients-notice--error, .clients-field__error,
    .jobs-errors, .jobs-field-error, .hw-error-summary, .hw-error,
    .map-error, .feedback-error) :is(p, li, a, strong, small, span) {
  color: inherit !important;
}

:is(.admin-notice.error, .notice.error, .connect-notice.is-error,
    .clients-notice--error, .jobs-errors, .hw-error-summary, .feedback-error) {
  background: rgba(255, 0, 0, .06);
}

.feedback-error {
  display: block;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid #FF0000;
  border-left-width: 4px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.feedback-error[hidden], .feedback-error:empty { display: none !important; }

[aria-invalid="true"], .is-invalid { border-color: #FF0000 !important; }

/* Two slow cycles end after exactly five seconds; text never fades out. */
.feedback-error-breathing { animation: feedback-error-breathe 2.5s ease-in-out 2; }

@keyframes feedback-error-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 0, 0, .15), 0 0 18px rgba(255, 0, 0, .16); }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-error-breathing { animation: none; }
}