/* Inline validation messages.
 *
 * Signup and the booking wizard both used to report every validation failure as a
 * toastr in the top-right corner while the offending field stayed completely
 * unmarked. The message was easy to miss and gave no clue which input to fix — on
 * the public booking page that is the most rage-clicked surface in the product.
 *
 * These styles put the sentence with the field it is about. Alert red is correct
 * here because these ARE errors (never use it for emphasis), and the control is
 * marked as well as the text coloured, so the state never depends on colour alone.
 *
 * Lives in a stylesheet rather than a <style> block in the view on purpose: Razor
 * emits inline script/style as C# string literals, and this project is at the
 * assembly string-heap ceiling (CS8103).
 */

.field-error {
    width: 100%;
    /* flex-basis so the message drops to its own line inside a flex .input-group
       (the Terms row) instead of being squeezed in beside the checkbox. */
    flex-basis: 100%;
    margin-top: 6px;
    color: #B81818;
    font-size: 13px;
    line-height: 1.45;
}

.field-error:empty { display: none; }

.field-invalid { border-color: #B81818 !important; }
.field-invalid:focus { box-shadow: 0 0 0 3px rgba(184, 24, 24, .25) !important; }

/* A checkbox has no border to colour, so mark it with an outline instead. */
input[type="checkbox"].field-invalid { outline: 2px solid #B81818; outline-offset: 2px; }

/* Rejected-submit state (see InlineFieldErrors.flashReject).
 *
 * A submit that only reacts on the success path reads as a dead button: spinner
 * when valid, nothing at all when not. This gives the failure path a visible
 * moment. Not disabled — the booker has to press it again after fixing a field.
 *
 * The shake is short and respects reduced-motion; the colour is the alert red
 * used for real errors, and the label changes too, so this never relies on
 * colour or motion alone.
 */
.btn-rejected {
    background: #B81818 !important;
    background-image: none !important;
    border-color: #B81818 !important;
    color: #fff !important;
    animation: bkRejectShake 0.4s ease-in-out 1;
}

@keyframes bkRejectShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-rejected { animation: none; }
}