/**
 * Video-Player: Rahmen, Klick-Deckel und eigene Steuerleiste.
 *
 * ================================ VON ZWEI SEITEN GENUTZT ================================
 * Vom Viewer (style.css lädt diese Datei) UND von der Bundle-Detailseite mit ihrem Trailer
 * (pages.css). Beide binden dieselbe player.js ein und brauchen deshalb dieselben Elemente –
 * getrennt gepflegt sähe der Trailer irgendwann anders aus als der Player daneben, obwohl
 * derselbe Code ihn steuert.
 *
 * DER WICHTIGSTE TEIL IST #yt-blocker. YouTube legt über sein eingebettetes Video eigene
 * Bedienelemente: Titel und Kanalname oben, „More videos" beim Pausieren, „Auf YouTube ansehen",
 * Link kopieren, Vollbild. `controls: 0` in den playerVars entfernt die Zeitleiste, aber NICHT
 * diese Overlays – sie lassen sich per Parameter gar nicht abschalten. Der Deckel darüber
 * schluckt jeden Klick, und bedient wird ausschließlich über die eigene Leiste darunter.
 *
 * Das ist keine Kosmetik, sondern das Anti-Ablenkungs-Prinzip: Jeder dieser Links führt aus
 * SourceBook heraus, und zwar mitten aus dem Lernen bzw. mitten aus der Kaufentscheidung.
 * =========================================================================================
 */

#player-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

#player-container iframe,
#player-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

#yt-blocker {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.player-notice {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 0.85rem;
}

/* ── Custom Player Controls ── */

#yt-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #111;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #1e1e1e;
}

#yt-play-pause {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    width: 24px;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

#yt-play-pause:hover { color: var(--nk-teal-highlight); }

#yt-progress-bar {
    flex: 1;
    height: 4px;
    background: #333;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

#yt-progress-bar:hover { height: 6px; }

#yt-progress-fill {
    height: 100%;
    background: var(--nk-teal);
    border-radius: 2px;
    width: 0%;
    pointer-events: none;
    transition: width 0.1s linear;
}

#yt-time {
    font-size: 0.72rem;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}