/* =============================================================================
   Ciclops self-hosted video player (module.tutorialPlayer.js).
   STANDALONE + themeable: reference this file from any project (Salt, Fresh
   Baked, external sites) alongside module.tutorialPlayer.js + hls.js.

   THEME PER BRAND — override the two accent variables on .crs-player:
       .crs-player { --crs-accent:#2E7D32; --crs-accent-deep:#1B5E20; }   (green)
   Inside Ciclops they inherit the app's --color-primary automatically.
   ============================================================================= */

.crs-player {
    --crs-accent: var(--color-primary, #00AEEF);        /* play button, control bar */
    --crs-accent-deep: var(--color-primary-deep, #0090C8); /* hover / active accents */
}

/*--branded video player (module.tutorialPlayer.js)-------------*/
.crs-player {
    position: relative;
    width: 100%;
    /* Give the player real height BEFORE the (preload=none) video reports its
       dimensions — otherwise it collapses to a sliver. 16:9 matches the
       1920x1080 renditions. */
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

    .crs-player video.tutorialPlayer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }

    /* Custom poster overlay — the branded thumbnail + play button that stays
       up until the user clicks play (native poster gets replaced by the first
       decoded frame; this doesn't). */
    .crs-poster {
        position: absolute;
        inset: 0;
        background-color: #0b0f14;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity .3s ease;
        line-height: normal;
    }

        .crs-poster::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 100%);
            pointer-events: none;
        }

        .crs-poster.crs-hidden {
            opacity: 0;
            pointer-events: none;
        }

    .crs-bigplay {
        position: relative;
        z-index: 1;
        width: 76px;
        height: 76px;
        border: 0;
        border-radius: 50%;
        background: var(--crs-accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 8px 28px rgba(0,0,0,.45);
        transition: transform .15s ease, background .15s ease;
    }

        .crs-poster:hover .crs-bigplay {
            transform: scale(1.08);
            background: var(--crs-accent-deep);
        }

        .crs-bigplay svg {
            width: 34px;
            height: 34px;
            fill: currentColor;
            margin-left: 5px; /* optically center the play triangle */
        }

    /* Seek/buffering overlay — a moving gradient + spinner so a chapter jump
       reads as "going somewhere" during the ~1-2s HLS seek. */
.crs-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    align-items: center;
    justify-content: center;
    background: linear-gradient(110deg, #34393f 0%, #454b52 45%, #34393f 90%);
    background-size: 220% 100%;
    animation: crsShimmer 2.6s ease-in-out infinite;
}

        .crs-player.crs-buffering .crs-loading { display: flex; }

    @keyframes crsShimmer {
        0%   { background-position: 120% 0; }
        100% { background-position: -120% 0; }
    }

    .crs-spinner {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 4px solid rgba(255,255,255,.15);
        border-top-color: rgba(255,255,255,.6);
        animation: crsSpin 1.3s linear infinite;
    }

    @keyframes crsSpin { to { transform: rotate(360deg); } }

    /* Custom control bar — solid brand blue, white controls + white scrubber.
       Hidden until active (post first-play); shown on hover or when paused. */
    .crs-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 14px;
        background: var(--crs-accent);
        opacity: 0;
        transition: opacity .2s ease;
        line-height: normal;
        z-index: 2;
    }

    .crs-player.crs-active:hover .crs-controls,
    .crs-player.crs-active:not(.crs-playing) .crs-controls {
        opacity: 1;
    }

    .crs-controls .crs-btn {
        background: none;
        border: 0;
        color: #fff;
        cursor: pointer;
        padding: 2px;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

        .crs-controls .crs-btn svg { width: 22px; height: 22px; fill: currentColor; }

    .crs-playpause .crs-i-pause { display: none; }
    .crs-player.crs-playing .crs-playpause .crs-i-play { display: none; }
    .crs-player.crs-playing .crs-playpause .crs-i-pause { display: block; }

    /* volume — just the icon; click opens a vertical slider popup */
    .crs-vol { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
    .crs-mute .crs-i-mute { display: none; }
    .crs-player.crs-muted .crs-mute .crs-i-vol { display: none; }
    .crs-player.crs-muted .crs-mute .crs-i-mute { display: block; }

    .crs-volpop {
        display: none;
        position: absolute;
        left: 50%;
        bottom: 34px;
        transform: translateX(-50%);
        background: #16212E;
        padding: 12px 8px;
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0,0,0,.4);
        z-index: 4;
    }

    .crs-vol.crs-volopen .crs-volpop { display: flex; align-items: center; justify-content: center; }

    /* Bulletproof vertical slider: a horizontal range rotated -90deg, absolutely
       centered so flex can't shrink its 92px length (writing-mode:vertical gave
       it no height in Chrome). */
    .crs-volbar-wrap {
        position: relative;
        display: block;
        width: 18px;
        height: 92px;
    }

    /* .crs-player prefix + !important beats the framework's global
       input[type=range] reset (which forces appearance:none + its own size). */
.crs-player .crs-volbar {
    position: absolute;
    top: 50%;
    left: calc(50% - 2px);
    width: 92px !important;
    height: 20px !important;
    min-width: 0;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    accent-color: #fff;
    cursor: pointer;
}

    .crs-time {
        color: #fff;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        min-width: 40px;
        text-align: center;
        flex: 0 0 auto;
    }

    /* scrubber — track stays vertically centered; chapter circles float
       ABSOLUTELY above it so they don't push the track off-center. */
    .crs-bar {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        height: 22px;
        cursor: pointer;
    }

    .crs-track {
        position: relative;
        width: 100%;
        height: 9px;
        background: rgba(255,255,255,.5);
        border-radius: 5px;
    }

    .crs-buffered,
    .crs-fill {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        border-radius: 5px;
    }

    .crs-buffered { background: rgba(255,255,255,.72); }
    .crs-fill { background: #fff; }

        .crs-fill::after {
            content: '';
            position: absolute;
            right: -7px;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,.4);
        }

    /* chapter ticks ABOVE the scrubber — always visible (never covered by the
       played fill). Hover = pointer + dark blue + grow; click bubbles to the
       bar seek (snaps to the chapter). */
    .crs-chapters {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin-top: -15px;   /* float the circles just above the centered track */
        height: 7px;
        pointer-events: none;
    }

    .crs-chapter-tick {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        pointer-events: auto;
        cursor: pointer;
        transition: background .12s ease, transform .12s ease;
    }

        .crs-chapter-tick:hover {
            background: var(--crs-accent-deep);
            transform: translateX(-50%) scale(1.5);
        }

    /* chapter label shown while hovering the scrubber */
    .crs-hoverlabel {
        display: none;
        position: absolute;
        bottom: 24px;
        transform: translateX(-50%);
        background: #16212E;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 9px;
        border-radius: 4px;
        white-space: nowrap;
        pointer-events: none;
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 3;
        box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }

    /* settings dropdown (quality + speed) */
    .crs-settings { position: relative; flex: 0 0 auto; display: flex; }

    .crs-menu {
        display: none;
        position: absolute;
        right: 0;
        bottom: 36px;
        background: #16212E;
        color: #fff;
        border-radius: 8px;
        padding: 6px;
        min-width: 134px;
        box-shadow: 0 6px 24px rgba(0,0,0,.4);
        z-index: 4;
    }

        .crs-menu.crs-open { display: block; }

    .crs-menu-group + .crs-menu-group {
        border-top: 1px solid rgba(255,255,255,.12);
        margin-top: 4px;
        padding-top: 6px;
    }

    .crs-menu-title {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .04em;
        opacity: .55;
        padding: 2px 8px 4px;
    }

    .crs-menu-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: 0;
        color: #fff;
        font-size: 12px;
        padding: 6px 8px;
        border-radius: 4px;
        cursor: pointer;
    }

        .crs-menu-item:hover { background: rgba(255,255,255,.1); }
        .crs-menu-item.crs-on { color: var(--crs-accent); font-weight: 700; }