/* SarTrade — jQuery-validation glue for the prototype's own form markup.
   This build's own file, shared by all five layouts (Admin _Layout/_AuthLayout,
   Vendor _Layout/_AuthLayout, Public _PublicLayout) — the underlying defect is
   application-wide, so it is fixed once here rather than per area
   (CLAUDE.md "fix the shared rule, not the page"). css/{style,app,fallback}.css
   stay the prototype's untouched files. */

/* app.css ships `.field__error{display:none}` and reveals it only via
   `.field.is-invalid .field__error` — `is-invalid` being a class the
   prototype's own vanilla JS set by hand. jQuery-validation/unobtrusive uses a
   different contract: it writes the message into the span and swaps the span's
   own class between .field-validation-valid and .field-validation-error (the
   server-side asp-validation-for tag helper renders exactly the same pair). So
   until this rule existed, every field message on every form — client-side AND
   the server-rendered ones after a failed POST — was written into the DOM and
   then hidden, leaving the user with nothing but the focus jump. */
.field__error.field-validation-error { display: block; }

/* js/validation.js mirrors the error onto the wrapping .field/.fieldset-st so
   app.css's own `.field.is-invalid .input-st{border-color:var(--red)}` red
   border still applies; a consent checkbox sits in a .consent-box instead. */
.consent-box.is-invalid { border-color: var(--red); }

/* asp-validation-summary renders .validation-summary-valid when there is
   nothing to show (an empty <ul> that still occupies grid/flow space) and
   .validation-summary-errors when there is. Neither had any styling, so a
   ModelOnly error arrived as an unstyled bullet list — give it the same
   treatment app.css already gives `.notice--bad`. */
.validation-summary-valid { display: none; }

.validation-summary-errors {
  padding: 14px 18px;
  margin-bottom: 20px;
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(237, 28, 36, .08);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-errors li { margin: 0; }

/* The "*" beside a conditionally-required label (Engineering Implementation
   Review §6). js/validation.js toggles this class as the "Preferred contact
   method" dropdown changes, so the asterisk shown matches the rule that will
   actually be enforced on submit. Kept in the flow with `visibility` rather
   than `display:none`, so the label text does not shift sideways each time the
   dropdown is changed. */
.req.is-hidden { visibility: hidden; }