/**
 * Validation error styling for the custom registration form.
 *
 * Two sources mark a field as invalid:
 *   1. Server-side — render_fields() adds .sc-field-invalid to the field's
 *      <p> row and data-sc-invalid="1" to the input when validate() flagged
 *      it. This is the reliable path that covers every field, including the
 *      locale-driven address fields.
 *   2. Native — the browser's own :invalid pseudo-class on required fields,
 *      which fires before the form is ever submitted. We deliberately scope
 *      the red styling to AFTER a submit attempt (.sc-attempted on the form)
 *      so empty required fields don't show red the moment the page loads.
 */

/* Field row flagged invalid by the server. */
.sc-field-invalid label {
	color: #b32d2e;
}

.sc-field-invalid input,
.sc-field-invalid select,
.sc-field-invalid textarea,
input[data-sc-invalid],
select[data-sc-invalid],
textarea[data-sc-invalid] {
	border-color: #b32d2e !important;
	box-shadow: 0 0 0 1px #b32d2e;
}

/* Inline per-field error message printed after the input. */
.sc-field-error-msg {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #b32d2e;
	line-height: 1.3;
}

/* Give a focused invalid field a clearer ring so keyboard users see where
   they've landed when we auto-focus the first error. */
.sc-field-invalid input:focus,
.sc-field-invalid select:focus,
input[data-sc-invalid]:focus,
select[data-sc-invalid]:focus {
	outline: 2px solid #b32d2e;
	outline-offset: 1px;
}