/**
 * GrassBlade LRS – YouTube Video Lesson Module
 * gblrs-youtube.css
 *
 * Uses BuddyBoss / LearnDash CSS variables where available,
 * with sensible fallbacks.
 */

/* ── Variables / Tokens ──────────────────────── */
:root {
    --gblrs-yt-primary   : var(--bb-primary, var(--color-primary, #4b6cf7));
    --gblrs-yt-success   : #22c55e;
    --gblrs-yt-pending   : #f59e0b;
    --gblrs-yt-bg        : #f8f9fb;
    --gblrs-yt-border    : #e2e6ea;
    --gblrs-yt-text      : #1e293b;
    --gblrs-yt-muted     : #64748b;
    --gblrs-yt-radius    : 12px;
    --gblrs-yt-shadow    : 0 2px 12px rgba(0,0,0,.08);
}

/* ── Wrapper ─────────────────────────────────── */
.gblrs-yt-wrapper {
    display        : flex;
    flex-direction : column;
    gap            : 28px;
    margin         : 24px 0;
    font-family    : inherit;
}

/* ── Individual video block ──────────────────── */
.gblrs-yt-video-block {
    background    : #fff;
    border        : 1.5px solid var(--gblrs-yt-border);
    border-radius : var(--gblrs-yt-radius);
    overflow      : hidden;
    box-shadow    : var(--gblrs-yt-shadow);
    transition    : border-color .25s, box-shadow .25s;
}

.gblrs-yt-video-block.gblrs-yt-done {
    border-color : var(--gblrs-yt-success);
    box-shadow   : 0 2px 12px rgba(34,197,94,.12);
}

/* ── Video header row ────────────────────────── */
.gblrs-yt-video-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 14px 18px;
    border-bottom   : 1px solid var(--gblrs-yt-border);
    background      : var(--gblrs-yt-bg);
}

.gblrs-yt-video-title {
    font-weight  : 600;
    font-size    : .95rem;
    color        : var(--gblrs-yt-text);
}

/* ── Watched badge ───────────────────────────── */
.gblrs-yt-badge {
    display       : inline-flex;
    align-items   : center;
    gap           : 4px;
    padding       : 3px 10px;
    border-radius : 999px;
    font-size     : .78rem;
    font-weight   : 600;
    letter-spacing: .02em;
    white-space   : nowrap;
}

.gblrs-yt-badge--done {
    background : rgba(34,197,94,.12);
    color      : #16a34a;
}

.gblrs-yt-badge--pending {
    background : rgba(245,158,11,.12);
    color      : #b45309;
}

/* ── Player container (16:9 responsive) ──────── */
.gblrs-yt-player-container {
    position       : relative;
    width          : 100%;
    padding-bottom : 56.25%; /* 16:9 */
    background     : #000;
}

.gblrs-yt-player,
.gblrs-yt-player iframe {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100% !important;
    height   : 100% !important;
    border   : none;
}

/* ── Progress overlay (shown until video is watched) ── */
.gblrs-yt-overlay {
    position        : absolute;
    bottom          : 0;
    left            : 0;
    right           : 0;
    padding         : 8px 12px 10px;
    background      : linear-gradient(transparent, rgba(0,0,0,.7));
    pointer-events  : none;
    z-index         : 10;
}

.gblrs-yt-progress-bar-wrap {
    width         : 100%;
    height        : 4px;
    background    : rgba(255,255,255,.25);
    border-radius : 2px;
    overflow      : hidden;
    margin-bottom : 6px;
}

.gblrs-yt-progress-bar {
    height        : 100%;
    width         : 0%;
    background    : var(--gblrs-yt-primary);
    border-radius : 2px;
    transition    : width .4s linear;
}

.gblrs-yt-progress-label {
    color       : rgba(255,255,255,.85);
    font-size   : .75rem;
    margin      : 0;
    text-align  : right;
    font-weight : 500;
}

/* ── Lesson completion status bar ────────────── */
.gblrs-yt-completion-status {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    padding       : 14px 18px;
    border-radius : var(--gblrs-yt-radius);
    border        : 1.5px solid var(--gblrs-yt-border);
    background    : var(--gblrs-yt-bg);
    color         : var(--gblrs-yt-muted);
    font-size     : .9rem;
    font-weight   : 500;
    transition    : all .4s;
}

.gblrs-yt-completion-status.gblrs-yt-all-done {
    background   : rgba(34,197,94,.08);
    border-color : var(--gblrs-yt-success);
    color        : #15803d;
    font-weight  : 700;
    font-size    : 1rem;
}

.gblrs-yt-checkmark {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 28px;
    height          : 28px;
    background      : var(--gblrs-yt-success);
    color           : #fff;
    border-radius   : 50%;
    font-size       : .85rem;
    font-weight     : 700;
    flex-shrink     : 0;
}

.gblrs-yt-count {
    margin-left : auto;
    font-weight : 600;
    color       : var(--gblrs-yt-primary);
}

/* ── Error notice ────────────────────────────── */
.gblrs-yt-error {
    padding       : 12px 16px;
    background    : #fef2f2;
    border        : 1px solid #fecaca;
    border-radius : 8px;
    color         : #dc2626;
    font-size     : .9rem;
}

/* ── Responsive tweaks ───────────────────────── */
@media ( max-width: 600px ) {
    .gblrs-yt-video-header {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 6px;
    }
    .gblrs-yt-count {
        margin-left : 0;
    }
}