/* public/assets/css/form-errors.css
   The ONE look of a form error, driven by assets/js/form-errors.js and by the
   server flash partial (partials/auth/_authMessage.ejs).
   A field error sits under its field. A form level error sits in the message
   area at the top of the form. The FFA reference is a small line under the text,
   same treatment as .toast-code, so the person can quote it to the support. */

.ff-field-error,
.ff-form-alert {
  color: var(--ff-danger);
  font-family: var(--ff-font-body);
  text-align: left;
  line-height: 1.4;
}

.ff-field-error {
  display: block;
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.ff-form-alert {
  display: block;
  margin: 0 0 18px;
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--ff-danger);
  font-size: 0.9rem;
}
.ff-form-alert[hidden] { display: none; }

.ff-error-text { display: block; }

.ff-error-code {
  display: block;
  margin-top: 2px;
  font-size: 0.78em;
  opacity: 0.75;
  letter-spacing: 0.04em;
}

/* The field itself: only its existing border changes colour, so underline
   inputs keep their underline and boxed inputs keep their box. */
.ff-invalid { border-color: var(--ff-danger) !important; }

/* The message grows the row: keep the validation tick of the auth forms on the
   input line instead of letting it slide to the middle of the row. */
.input-group.ff-has-error > .validation-icon { top: 20px; }

/* Two fields side by side are aligned on their bottom edge. A message under
   one of them would push its neighbour down to the level of the message, so
   the row aligns on the top edge while it carries a message. */
.form-row:has(.ff-has-error) { align-items: flex-start; }

/* Support ticket reply form (account/ticket-detail, support/ticket-guest):
   messages line up with the padding of the input row. */
.ticket-chat-input-area > .ff-form-alert { margin: 10px 18px 0; }
.ticket-chat-input-area > .ff-field-error { margin: 0 18px 10px; }
@media (max-width: 768px) {
  .ticket-chat-input-area > .ff-form-alert { margin: 10px 12px 0; }
  .ticket-chat-input-area > .ff-field-error { margin: 0 12px 10px; }
}