/* ============================================================================
   global-spinner — the one loading ring (ADR-131 atom)
   ============================================================================
   The shared in-flight indicator for dropzones, calendars, panels and buttons.
   Absorbs three forked rings: .calendar-avail-spinner (availability-calendar.css),
   .loading-spinner (main.css, the form/button spinner) and the .ig-loader::after
   ring (features/instagram-feed.css).

   Colour comes from currentColor, so the ring inherits whatever it sits on: a
   primary button paints a white ring, a light panel paints a dark one. Set the
   colour by putting `color` on the spinner (or an ancestor) — never by
   redeclaring border-color, which would fork the component.

   Size comes from --global-spinner-size; --sm is the inline/button size. A call
   site that genuinely needs an off-scale ring sets the custom property rather
   than re-declaring width/height.

   Honours prefers-reduced-motion: the rotation stops and the ring closes into a
   full circle, so the indicator still reads as "busy" without any motion.
   ========================================================================== */

.global-spinner {
    --global-spinner-size: 2rem;
    --global-spinner-width: 0.1875rem;
    display: inline-block;
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--global-spinner-size);
    height: var(--global-spinner-size);
    border: var(--global-spinner-width) solid color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: currentColor;
    border-radius: var(--radius-pill);
    animation: global-spin 0.75s linear infinite;
}

/* Inline size — buttons, search fields, table cells. */
.global-spinner--sm {
    --global-spinner-size: 1rem;
    --global-spinner-width: 0.125rem;
}

/* Ink-coloured ring for standalone loading panels (calendars, booking forms,
   dropzones) where the spinner is the only thing on screen. */
.global-spinner--ink {
    color: var(--color-action);
}

.btn .global-spinner {
    margin-right: var(--spacing-sm);
}

/* .global-btn-spinner stands in for the label rather than sitting beside it (forms.js
   swaps .btn-text out for it), so the gap above would push it off-centre. */
.btn .global-btn-spinner.global-spinner {
    margin-right: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    .global-spinner {
        animation: none;
        border-color: color-mix(in srgb, currentColor 45%, transparent);
    }
}