/* ============================================================
   Q-Service — Global page loader (pairs with qs-loader.js)
   A single body-level overlay: a MINIMAL scrim (page stays
   visible) + a floating white Q-logo tile with three orbiting
   brand dots. Shown during full-page navigation, jQuery AJAX,
   and same-origin fetch.
   Transform/opacity only (GPU-friendly), RTL-agnostic
   (flex-centered), theme-aware, and disabled under
   prefers-reduced-motion.
   Loaded AFTER qs-signature.css so it wins ties.
   ============================================================ */

#qsLoaderOverlay {
    position: fixed;
    inset: 0;
    z-index: 1030;                     /* below Bootstrap backdrop(1040)/modal(1050) */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(var(--qs-shadow-rgb), .10);  /* minimal scrim — page stays visible */
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: auto;               /* block input so a save can't double-fire */
}

#qsLoaderOverlay.is-visible {
    display: flex;
    opacity: 1;
}

/* Full-page navigation: sit on top of content, just under #qsTopBar (99999). */
#qsLoaderOverlay.qs-loader--nav {
    z-index: 99990;
}

/* Orbit stage — a square the dots rotate around, logo tile centered inside. */
.qs-loader-stage {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* White rounded logo tile — same identity as the navbar brand tile. */
.qs-loader-tile {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--qs-surface);
    box-shadow: 0 6px 22px rgba(var(--qs-shadow-rgb), .28), 0 0 0 1px rgba(var(--qs-shadow-rgb), .05);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: qsLoaderFloat 2.2s ease-in-out infinite;
    will-change: transform;
}

.qs-loader-tile img {
    width: var(--qs-tap-min);
    height: var(--qs-tap-min);
    object-fit: contain;
    display: block;
}

/* Logo floats up/down and gently breathes. */
@keyframes qsLoaderFloat {
    0%, 100% { transform: translateY(-4px) scale(.98); }
    50%      { transform: translateY(4px) scale(1.03); }
}

/* Three orbit layers, each carrying one dot at 12 o'clock; each rotates the
   full stage, staggered by -1/3 turn so the dots sit 120deg apart and circle
   the tile. */
.qs-loader-orbit {
    position: absolute;
    inset: 0;
    z-index: 1;
    animation: qsLoaderOrbit 1.6s linear infinite;
}

.qs-loader-orbit .qs-loader-dot {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: var(--qs-radius-circle);
}

.qs-loader-orbit:nth-child(2) { animation-delay: -0.53s; }
.qs-loader-orbit:nth-child(3) { animation-delay: -1.06s; }

.qs-loader-orbit:nth-child(1) .qs-loader-dot { background: var(--qs-primary); }  /* brand blue */
.qs-loader-orbit:nth-child(2) .qs-loader-dot { background: var(--qs-brand-yellow); }  /* logo yellow */
.qs-loader-orbit:nth-child(3) .qs-loader-dot { background: var(--qs-primary-600); }  /* logo blue */

@keyframes qsLoaderOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Dark mode: the id is unique (no !important fight with site.css). Slightly
   deeper scrim; the white tile keeps the logo legible in both themes. */
html[data-theme="dark"] #qsLoaderOverlay {
    background: rgba(var(--qs-shadow-rgb), .18);
}

/* Reduced motion: keep a static tile (AJAX still needs the input-block), drop
   the moving dots entirely so nothing spins. */
@media (prefers-reduced-motion: reduce) {
    .qs-loader-tile {
        animation: none !important;
        transform: none !important;
    }
    .qs-loader-orbit {
        display: none !important;
    }
}