/* /static/css/components/bop_loader.css
 * Bunkabop branded loader system.
 */

/* ── Shimmer keyframe (light surface) ─────────────────────────────────────── */

@keyframes bop-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ── Card loader ───────────────────────────────────────────────────────────── */

/* Uses the standard .rct two-panel grid — stub gets the maroon background automatically */
.bop-card-loader__body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Single centered column: animation + tagline */
.bop-card-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ── Inline / description-area loader ─────────────────────────────────────── */

.bop-inline-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
}

/* Center the inline loader vertically + horizontally within the desc area */
.rct__desc:has(.bop-inline-loader) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bop-inline-loader__tagline {
    font-family: var(--brand-font, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-style: italic;
    font-weight: 800;
    font-size: 12px;
    color: var(--burnt-orange, #D95D39);
    opacity: 0.78;
    letter-spacing: 0.01em;
}

/* Tagline below the animation */
.bop-card-loader__tagline {
    font-family: var(--brand-font, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-style: italic;
    font-weight: 800;
    font-size: 15px;
    color: var(--burnt-orange, #D95D39);
    opacity: 0.78;
    margin: 0;
    letter-spacing: 0.01em;
    text-align: center;
}