/* ============================================================
   pouziti:
   
   :root {
       --pkv-barva-pozadi: #000;
       --pkv-barva-chyba: #ff4444;
       --pkv-zaobleni: 8px;
   }

    nebo 
   
   .muj-vlastni-styl .pkv-obal {
       --pkv-barva-pozadi: #1a1a2e;
       --pkv-barva-akcentu: #e94560;
       --pkv-zaobleni: 12px;
   }
   ============================================================ */

/* --- CSS promenne (vychozi tema) --- */
.pkv-obal {
    --pkv-barva-pozadi: #000000;
    --pkv-barva-chyba: #dc3545;
    --pkv-barva-chyba-pozadi: rgba(0, 0, 0, 0.75);
    --pkv-barva-akcentu: #2979ff;
    --pkv-barva-bt-kvalita: rgba(0, 0, 0, 0.55);
    --pkv-barva-bt-kvalita-hover: rgba(0, 0, 0, 0.8);
    --pkv-barva-bt-kvalita-text: #ffffff;
    --pkv-barva-menu-pozadi: rgba(0, 0, 0, 0.8);
    --pkv-barva-menu-text: #ffffff;
    --pkv-barva-menu-hrana: rgba(255, 255, 255, 0.15);
    --pkv-barva-menu-select-pozadi: rgba(255, 255, 255, 0.1);
    --pkv-barva-menu-select-hover: rgba(255, 255, 255, 0.2);
    --pkv-zaobleni: 6px;
    --pkv-zaobleni-bt: 4px;
    --pkv-zaobleni-menu: 6px;
    --pkv-bt-velikost-pisma: 12px;
    --pkv-bt-padding: 5px 10px;
    --pkv-menu-velikost-pisma: 13px;
    --pkv-pomer-stran: 56.25%;
    --pkv-stin: 0 4px 20px rgba(0, 0, 0, 0.3);
    --pkv-prechod: all 0.2s ease;
}

/* --- Zakladni obal --- */
.pkv-obal {
    width: 100%;
    position: relative;
    background: var(--pkv-barva-pozadi);
    border-radius: var(--pkv-zaobleni);
    overflow: hidden;
    box-shadow: var(--pkv-stin);
    line-height: 0;
}

/* --- Pomer stran (vychozi 16:9) --- */
.pkv-pomer {
    position: relative;
    width: 100%;
    padding-bottom: var(--pkv-pomer-stran);
    overflow: hidden;
}

/* --- Video wrapper a samotny element --- */
.pkv-wrapper,
.pkv-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pkv-wrapper video {
    object-fit: contain;
    background: var(--pkv-barva-pozadi);
}

/* --- Chybova hlaska --- */
.pkv-chyba {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pkv-barva-chyba);
    background: var(--pkv-barva-chyba-pozadi);
    padding: 12px 24px;
    border-radius: var(--pkv-zaobleni);
    font-size: 14px;
    text-align: center;
    z-index: 100;
    max-width: 80%;
    line-height: 1.4;
    font-family: inherit;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- Tlacitko kvality --- */
.pkv-bt-kvalita {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--pkv-barva-bt-kvalita);
    color: var(--pkv-barva-bt-kvalita-text);
    border: none;
    border-radius: var(--pkv-zaobleni-bt);
    padding: var(--pkv-bt-padding);
    cursor: pointer;
    z-index: 100;
    font-size: var(--pkv-bt-velikost-pisma);
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.5px;
    transition: var(--pkv-prechod);
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pkv-bt-kvalita:hover {
    background: var(--pkv-barva-bt-kvalita-hover);
}

/* --- Menu pro vyber kvality --- */
.pkv-menu-kvalita {
    display: none;
    position: absolute;
    bottom: 40px;
    right: 10px;
    background: var(--pkv-barva-menu-pozadi);
    color: var(--pkv-barva-menu-text);
    padding: 6px;
    border-radius: var(--pkv-zaobleni-menu);
    z-index: 101;
    border: 1px solid var(--pkv-barva-menu-hrana);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pkv-menu-kvalita select {
    background: var(--pkv-barva-menu-select-pozadi);
    color: var(--pkv-barva-menu-text);
    border: 1px solid var(--pkv-barva-menu-hrana);
    padding: 4px 8px;
    font-size: var(--pkv-menu-velikost-pisma);
    border-radius: var(--pkv-zaobleni-bt);
    cursor: pointer;
    font-family: inherit;
    outline: none;
    min-width: 140px;
    transition: var(--pkv-prechod);
}

.pkv-menu-kvalita select:hover,
.pkv-menu-kvalita select:focus {
    background: var(--pkv-barva-menu-select-hover);
}

.pkv-menu-kvalita select option {
    background: #1a1a1a;
    color: #fff;
    padding: 4px;
}

/* --- Shaka Player UI override (volitelne) --- */
.pkv-obal .shaka-bottom-controls {
    z-index: 50;
}

.pkv-obal .shaka-play-button-container {
    z-index: 50;
}

/* ============================================================
   PRIPRAVENA TEMATA
   
   Pouziti: pridejte CSS tridu na kontejner nebo pouzijte
   parametr cssTrida v nastaveni prehravace.
   ============================================================ */

/* --- Tmave tema (vychozi) --- */
.pkv-tema-tmave {
    --pkv-barva-pozadi: #000000;
    --pkv-barva-akcentu: #2979ff;
    --pkv-barva-bt-kvalita: rgba(0, 0, 0, 0.55);
    --pkv-barva-bt-kvalita-hover: rgba(0, 0, 0, 0.8);
}

/* --- Svetle tema --- */
.pkv-tema-svetle {
    --pkv-barva-pozadi: #f5f5f5;
    --pkv-barva-chyba-pozadi: rgba(255, 255, 255, 0.85);
    --pkv-barva-bt-kvalita: rgba(255, 255, 255, 0.75);
    --pkv-barva-bt-kvalita-hover: rgba(255, 255, 255, 0.95);
    --pkv-barva-bt-kvalita-text: #333333;
    --pkv-barva-menu-pozadi: rgba(255, 255, 255, 0.9);
    --pkv-barva-menu-text: #333333;
    --pkv-barva-menu-hrana: rgba(0, 0, 0, 0.12);
    --pkv-barva-menu-select-pozadi: rgba(0, 0, 0, 0.05);
    --pkv-barva-menu-select-hover: rgba(0, 0, 0, 0.1);
    --pkv-stin: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.pkv-tema-svetle .pkv-menu-kvalita select option {
    background: #fff;
    color: #333;
}

/* --- Minimalisticke tema --- */
.pkv-tema-minimal {
    --pkv-barva-pozadi: #0a0a0a;
    --pkv-zaobleni: 0;
    --pkv-zaobleni-bt: 0;
    --pkv-zaobleni-menu: 0;
    --pkv-stin: none;
    --pkv-barva-bt-kvalita: transparent;
    --pkv-barva-bt-kvalita-hover: rgba(255, 255, 255, 0.1);
    --pkv-bt-velikost-pisma: 11px;
}

/* --- Zaoblene tema --- */
.pkv-tema-zaoblene {
    --pkv-zaobleni: 16px;
    --pkv-zaobleni-bt: 8px;
    --pkv-zaobleni-menu: 12px;
    --pkv-stin: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* --- Akcni/cervene tema --- */
.pkv-tema-cervene {
    --pkv-barva-pozadi: #1a0000;
    --pkv-barva-akcentu: #e53935;
    --pkv-barva-bt-kvalita: rgba(229, 57, 53, 0.7);
    --pkv-barva-bt-kvalita-hover: rgba(229, 57, 53, 0.9);
    --pkv-barva-menu-hrana: rgba(229, 57, 53, 0.3);
}

/* --- Modre/firemni tema --- */
.pkv-tema-modre {
    --pkv-barva-pozadi: #0d1b2a;
    --pkv-barva-akcentu: #1b98e0;
    --pkv-barva-bt-kvalita: rgba(27, 152, 224, 0.6);
    --pkv-barva-bt-kvalita-hover: rgba(27, 152, 224, 0.85);
    --pkv-barva-menu-hrana: rgba(27, 152, 224, 0.3);
    --pkv-zaobleni: 10px;
}

/* ============================================================
   POMOCNE UTILITY TRIDY
   ============================================================ */

/* Pomer 4:3 */
.pkv-pomer-4-3 .pkv-pomer { --pkv-pomer-stran: 75%; }

/* Pomer 21:9 (ultrawide) */
.pkv-pomer-21-9 .pkv-pomer { --pkv-pomer-stran: 42.86%; }

/* Pomer 1:1 (ctverec) */
.pkv-pomer-1-1 .pkv-pomer { --pkv-pomer-stran: 100%; }

/* Bez omezeni pomeru - vyplni kontejner */
.pkv-bez-pomeru .pkv-pomer {
    padding-bottom: 0;
    height: 100%;
}

/* Skryti vlastniho tlacitka kvality (pokud staci Shaka UI) */
.pkv-skryt-kvalitu .pkv-bt-kvalita,
.pkv-skryt-kvalitu .pkv-menu-kvalita {
    display: none !important;
}
.pkv-bez-pomeru.pkv-obal {
    height: 100%;
}

/* Responzivni odsazeni */
@media (max-width: 480px) {
    .pkv-bt-kvalita {
        bottom: 6px;
        right: 6px;
        padding: 3px 7px;
        font-size: 10px;
    }
    .pkv-menu-kvalita {
        bottom: 32px;
        right: 6px;
    }
    .pkv-chyba {
        font-size: 12px;
        padding: 8px 16px;
    }
}