/*
 * forms.css — unified form-error styling for Wasatch Cleaners customer-facing
 * forms (book.php + customer/index.php login + future customer registration).
 *
 * Why a dedicated file:
 *   - customer/index.php loads portal-login.css (pre-login surface)
 *   - book.php loads booking-design.css + tailwind (public booking flow)
 *   - customer-portal.css is post-login only
 * A small shared file is the cleanest way to give all three the same
 * red-state look + WCAG 2.2 SC 3.3.1 (Error Identification) +
 * SC 4.1.2 (Name, Role, Value) semantics.
 *
 * Load AFTER tailwind/booking-design/portal-login so cascade wins.
 *
 * Tokens (red 700 #B91C1C / red 50 #FEF2F2 / red 100 #FECACA) deliberately
 * mirror the existing portal-alert.error palette so the two systems stack
 * harmoniously when both are present on a page.
 */

/* -------------------------------------------------------------------------
 * Field wrapper — opt-in. Existing markup (Tailwind utility-only inputs)
 * keeps working untouched; adding .form-field around an input + label
 * activates the error state.
 * ------------------------------------------------------------------------- */
.form-field {
    position: relative;
    margin-bottom: 18px;
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
    border-color: #B91C1C !important;
    background: rgba(254, 226, 226, 0.4);
}

.form-field__hint {
    display: block;
    font-size: 12px;
    margin-top: 6px;
    color: #6B5F4D;
    letter-spacing: 0.02em;
}

.form-field--error .form-field__hint {
    color: #B91C1C;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Top-of-form error alert — replaces ad-hoc red <p> / <div> banners with
 * a consistent, role="alert"-friendly container. WCAG 4.1.2: the role on
 * the HTML element triggers an a11y live-region announcement.
 * ------------------------------------------------------------------------- */
.form-error-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    font-size: 13.5px;
}
/* Honor Tailwind's .hidden utility -- without this rule .form-error-alert's
   display:flex wins because both selectors have equal specificity and the
   form-error-alert block was declared later. Result: the "Please select a
   service type" banner showed on initial page load, before any user
   interaction. */
.form-error-alert.hidden {
    display: none;
    line-height: 1.5;
    margin-bottom: 20px;
}

.form-error-alert::before {
    content: '\f06a'; /* fa-circle-exclamation */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #B91C1C;
    flex-shrink: 0;
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
 * Native :user-invalid red border (Chrome 119+, Safari 16.5+, FF 88+).
 * Cheap second line of defence when our JS hasn't run yet.
 * ------------------------------------------------------------------------- */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: #B91C1C;
}

/* Honour reduced-motion preferences on any shake we layer on top. */
@media (prefers-reduced-motion: reduce) {
    .form-error-alert,
    .form-field--error {
        animation: none !important;
        transition: none !important;
    }
}