/**
 * VGTME — inline form validation errors (contact + request forms).
 *
 * Loaded only on the two templates that carry a form (see
 * includes/zt-styles-scripts.php), alongside assets/js/vgt-forms.js.
 *
 * These rules ARE the error UI. jQuery Validate puts the form into novalidate,
 * so there is no native bubble behind them any more — that was the point of
 * the change: on mobile the native bubble is shown inconsistently or not at
 * all, so a blocked submit looked like an unresponsive button.
 *
 * .field-err and .has-err are new class names, used nowhere else in the theme,
 * so nothing here can reach existing components. The plugin's own default
 * error class ("error") is deliberately NOT used, for the same reason.
 *
 * @package VGTransportME
 */

/* The message itself. Sits below the whole .field row — errorPlacement in
   vgt-forms.js appends it to the row rather than after the input. */
.field-err{display:block;margin-top:7px;font-size:.83rem;line-height:1.55;color:#C0392B;font-weight:600}
.field-err:empty{display:none}

/* Colour is never the only signal: the text below the field is what a
   colour-blind visitor and a screen reader actually get. The border is
   reinforcement, not the message. */
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#C0392B}
.field.has-err input:focus,.field.has-err select:focus,.field.has-err textarea:focus{border-color:#C0392B;outline-color:#C0392B}

/* Law 25 consent row (request form): a flex row, so its message needs the full
   width instead of becoming a third column beside the box and the sentence. */
.consent{flex-wrap:wrap}
.consent .field-err{flex:0 0 100%;margin-top:8px}
.consent.has-err input[type=checkbox]{outline:2px solid #C0392B;outline-offset:2px}