/* ================================================
   YT Plyr Player — style
   Kolejność warstw (z-index):
   10  = iframe YouTube (wewnątrz .plyr)
   20  = .yt-plyr-overlay (szyba blokująca PPM)
   30  = .yt-plyr-frame-layer (stopklatka)
   40  = kontrolki Plyr (.plyr__controls)
   ================================================ */

/* Główny kontener — pozycja relative, aby warstwy działały */
.yt-plyr-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 2em auto;
    background: #000;
    /* Proporcje 16:9 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    user-select: none;
}

/* -----------------------------------------------
   WARSTWA 1: kontener playera Plyr
   ----------------------------------------------- */
.yt-plyr-player-container {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none; /* sam kontener nie przechwytuje — tylko kontrolki */
}

.yt-plyr-player-container .plyr {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* iframe YouTube wewnątrz Plyr */
    .yt-plyr-player-container .plyr__video-embed iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Kontrolki TAK przechwytują kliknięcia */
    /* MA BYĆ — position: absolute, Plyr sam wie gdzie je postawić */
.yt-plyr-player-container .plyr__controls {
    position: absolute;
    z-index: 31;
    pointer-events: all;
}

.yt-plyr-wrapper .plyr__control--overlaid {
    position: absolute;
    z-index: 32;
    pointer-events: all;
}


/* -----------------------------------------------
   WARSTWA 2: szyba blokująca PPM
   Zawsze aktywna, ale NIE blokuje kliknięć
   w kontrolki Plyr (kontrolki są wyżej z-index)
   ----------------------------------------------- */
.yt-plyr-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: transparent;
    pointer-events: all;
    cursor: default;

/* Całkowicie przezroczysta — niewidoczna */
    background: transparent;
    /* Przechwytuje zdarzenia myszy (blokada PPM) */
    pointer-events: all;
    /* Kursor normalny — użytkownik nie widzi szyby */
    cursor: default;
}

/* -----------------------------------------------
   WARSTWA 3: stopklatka (miniatura YouTube)
   Widoczna na starcie, przy pauzie i na końcu
   Ukryta podczas odtwarzania (po 3 sek.)
   ----------------------------------------------- */
.yt-plyr-frame-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;

    /* Domyślnie widoczna */
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none; /* Szyba jest niżej, więc PPM blokuje overlay */
}

.yt-plyr-frame-layer.yt-plyr-frame-hidden {
    opacity: 0;
    pointer-events: none;
    /* Gdy ukryta, nie przechwytuje niczego */
    pointer-events: none;
}

.yt-plyr-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* -----------------------------------------------
   KONTROLKI PLYR — najwyżej (z-index 40+)
   Plyr domyślnie ustawia je wysoko,
   tu upewniamy się że są nad szybą i stopklatką
   ----------------------------------------------- */
.yt-plyr-player-container .plyr__controls {
    position: relative;
    z-index: 40;
    pointer-events: all;
}

.yt-plyr-player-container .plyr__control--overlaid {
    /* Duży centralny przycisk Play */
    z-index: 41;
    pointer-events: all;
}

/* Gdy stopklatka jest widoczna (pauza/start),
   duży przycisk Play ma być klikalny ponad stopklatką */
.yt-plyr-wrapper .plyr__control--overlaid {
    z-index: 50;
    pointer-events: all;
}

/* -----------------------------------------------
   Blokada menu kontekstowego przez CSS (dodatkowe)
   ----------------------------------------------- */
.yt-plyr-wrapper {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* -----------------------------------------------
   Plyr — kolorystyka (możesz zmienić)
   ----------------------------------------------- */
.yt-plyr-player-container .plyr--youtube.plyr--playing .plyr__control:hover,
.yt-plyr-player-container .plyr__control[aria-pressed="true"],
.yt-plyr-player-container .plyr--full-ui input[type="range"] {
    color: #e63c3c;
}

:root {
    --plyr-color-main: #e63c3c;
}