/*
 * Download Delay Guard — ddg.css  v1.5.0
 *
 * Changes in v1.4.0:
 *  - Progress bar replaced with a pure-CSS infinite sliding animation.
 *    The .ddg-bar-track element animates itself with two overlapping
 *    gradient blobs that chase each other across the track — identical
 *    to the reference loader but adapted to use --ddg-bar-color so the
 *    color is fully configurable from the plugin settings.
 *  - .ddg-bar-fill removed (no longer needed — no JS transitions).
 *
 * Retained from v1.3.0:
 *  - .ddg-revealed carries only the fade-in animation (no display
 *    property) so the button's theme layout is never overridden.
 *  - .ddg-wrap--block makes the loader full-width for block buttons.
 */

/* ── Wrapper ── */
.ddg-wrap {
    display: inline-block;
    vertical-align: middle;
}

/* Block-level buttons get a block wrapper to preserve full width */
.ddg-wrap--block {
    display: block;
}

/* ── Loader shell ── */
.ddg-loader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var( --ddg-bar-bg, #1a1a1a );
    border-radius: 6px;
    min-width: 220px;
    box-sizing: border-box;
}

/* Loader stretches full width when inside a block wrapper */
.ddg-wrap--block .ddg-loader {
    display: flex;
    width: 100%;
}

.ddg-loader.ddg-hidden {
    display: none;
}

/* ── Message text ── */
.ddg-loader-msg {
    font-size: 13px;
    font-weight: 600;
    color: var( --ddg-text-color, #ffffff );
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
}

/* ── Progress bar — infinite sliding animation ────────────────────────
 *
 * Two gradient blobs (both colored with --ddg-bar-color) are positioned
 * off-screen left, then slide right one after the other in an infinite
 * loop — creating the "chasing" shimmer effect.
 *
 * How the colors map:
 *   Blob color  → var(--ddg-bar-color)   (set by plugin settings)
 *   Track bg    → rgba(255,255,255,0.15) (subtle on dark loader bg)
 *
 * background-size: 60% 100% applies to BOTH gradient layers so each
 * blob occupies 60% of the track width as it slides through.
 *
 * No JS is involved — the animation runs from the moment the loader
 * appears and stops automatically when .ddg-hidden is applied.
 * ─────────────────────────────────────────────────────────────────── */
.ddg-bar-track {
    width: 100%;
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    /* Local shorthand variable for the moving blob gradient */
    --ddg-c: no-repeat linear-gradient( var( --ddg-bar-color, #f97316 ) 0 0 );
    background: var( --ddg-c ), var( --ddg-c ), rgba( 255, 255, 255, 0.15 );
    background-size: 60% 100%;
    animation: ddg-bar-infinite 3s infinite;
}

@keyframes ddg-bar-infinite {
    0%   { background-position: -150% 0, -150% 0; }
    66%  { background-position:  250% 0, -150% 0; }
    100% { background-position:  250% 0,  250% 0; }
}

/* ── Countdown ── */
.ddg-countdown {
    font-size: 12px;
    font-weight: 700;
    color: rgba( 255, 255, 255, 0.6 );
    font-variant-numeric: tabular-nums;
    font-family: monospace;
    letter-spacing: 0.04em;
}

/* ── Reveal animation ──
 *
 * Applied by JS on the anchor when the delay expires.
 * Intentionally carries NO display property — the anchor's display
 * is controlled solely by theme CSS and the inline style restoration
 * in JS, so block / inline / flex layouts are all preserved exactly.
 */
.ddg-revealed {
    animation: ddg-fade-in 0.4s ease forwards;
}

@keyframes ddg-fade-in {
    from { opacity: 0; transform: translateY( 5px ); }
    to   { opacity: 1; transform: translateY( 0 );   }
}

/* ── Pulsing dots ── */
.ddg-dots {
    display: inline-block;
}

.ddg-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 1px 2px;
    background: var( --ddg-bar-color, #f97316 );
    border-radius: 50%;
    vertical-align: middle;
    animation: ddg-dot-bounce 1.2s ease-in-out infinite;
}

.ddg-dots span:nth-child(2) { animation-delay: 0.2s; }
.ddg-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ddg-dot-bounce {
    0%, 80%, 100% { transform: translateY( 0 );    opacity: 0.4; }
    40%            { transform: translateY( -5px ); opacity: 1;   }
}

@media ( max-width: 480px ) {
    .ddg-loader {
        min-width: 160px;
        padding: 8px 12px;
    }
    .ddg-loader-msg {
        font-size: 11px;
        white-space: normal;
    }
}

/* ── Pause state (page hidden via Page Visibility API) ────────────────
 *
 * Added by JS via parts.loader.classList.add('ddg-paused') when the
 * user switches tabs, minimizes, or leaves the page.
 * Removed immediately when the user returns so animations resume.
 */
.ddg-loader.ddg-paused .ddg-bar-track {
    animation-play-state: paused;
}

.ddg-loader.ddg-paused .ddg-dots span {
    animation-play-state: paused;
}