/*
    Submit feedback — the spinner shown in a form's submit button while it posts.
    Paired with resources/js/trendslive/form-loader.js and included by
    trendslive.partials.form-loader, so it works on the TrendsLive layouts and on
    eventmie's legacy one alike.

    Deliberately unscoped: the auth pages, the public site, the organiser console,
    POS and scanner do not share a wrapper class, and a form that only shows a
    spinner on some of them is worse than none.
*/
.tl-submit-spin {
    display: inline-block;
    /*
        A FIXED size, not 1em.
        
        These buttons set their own type — the organiser console's are 10.5px
        mono — so `1em` drew a ten-pixel ring with two-pixel borders, dimmed to
        78% by `.tl-submitting`. It was there, it span, and nobody could see it:
        reported as "the loader colour is not visible". 14px reads at every font
        size the platform uses, and `flex: none` stops a flex button squashing
        it back down.
    */
    flex: none;
    width: 14px;
    height: 14px;
    margin-right: .55em;
    vertical-align: -.125em;
    border: 2px solid currentColor;
    /* the gap is what reads as motion — a full ring looks static while it spins */
    border-right-color: transparent;
    border-radius: 50%;
    animation: tl-submit-spin .6s linear infinite;
}

@keyframes tl-submit-spin { to { transform: rotate(360deg); } }

/*
    The ring's colour, stated rather than inherited.

    `border: 2px solid currentColor` takes whatever `color` the button forces on
    its children, and the console forces one hard:

        button.tl-btn.primary span { color: …; -webkit-text-fill-color: … !important }

    A `<span class="tl-submit-spin">` IS such a span, so the ring was drawn in
    whatever that rule decided — on some surfaces near enough to the background
    to disappear. Reported twice as "the loader colour is not visible", which is
    exactly what it was.

    So it is set here per button, with enough weight to beat that rule. Nothing
    else about the button changes: it is the same button, mid-flight.
*/
.tl-btn .tl-submit-spin,
button.tl-btn .tl-submit-spin {
    border-color: var(--tl-fg, #e8e9ed) !important;
    border-right-color: transparent !important;
}

/* Yellow button: the dark ink it already uses for its own label. */
.tl-btn.primary .tl-submit-spin,
button.tl-btn.primary .tl-submit-spin,
a.tl-btn.primary .tl-submit-spin {
    border-color: var(--tl-fg-on-yellow, #161920) !important;
    border-right-color: transparent !important;
}

/* Anywhere with no TrendsLive button at all — the auth pages' own submits and
   eventmie's legacy forms — keep inheriting, which is right there. */

/* The button keeps its own colours — it is the same button, mid-flight. */
.tl-submitting {
    cursor: progress;
    /* Opacity compounds onto children, so whatever is set here dims the spinner
       too — it cannot opt out. .78 took a small ring most of the way to
       invisible; this still reads as "in flight" without doing that. */
    opacity: .92;
    /* aria-disabled marks it for a screen reader; this is what stops the second
       click. The button is NOT disabled, so its name/value still posts. */
    pointer-events: none;
}

/* Some buttons carry a trailing arrow (the sign-up CTA). Two moving parts in one
   button reads as a glitch, so the static one steps aside while the spinner runs. */
.tl-submitting > svg { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tl-submit-spin { animation-duration: 2.4s; }
}

/* ── Validation — the site's messages instead of the browser's pop-up ──
   form-loader.js writes these when a required or malformed field stops a
   form. Loaded on every layout (organiser, customer, POS, scanner, public,
   auth), so a page without the organiser stylesheet still gets the same red
   outline, the same message under the box and the same banner. The values
   are the organiser console's own (organiser-pages.css `.tl-field-error`,
   `.tl-alert.err`), stated once more here for the pages that lack it. */
.tl-field-error { margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: var(--tl-danger); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--tl-danger) !important; }
.tl-alert.err[data-tl-client] {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 15px;
    border-radius: var(--tl-r-md, 10px); font-size: 13.5px; font-weight: 600;
    background: var(--tl-danger-bg); color: var(--tl-danger);
    border: 1px solid color-mix(in srgb, var(--tl-danger) 40%, transparent);
}