/* Jeśli masz elementy klikalne, przywróć im kursor łapki */
a, button, .shaka-back-to-start-button {
    cursor: pointer !important;
}
 .shaka-settings-menu{
     max-width: 380px;
 }
.shaka-spinner {
    display: none !important;
}

/* 2. Podmieniamy kontener spinnera na Twój obrazek PNG */
.shaka-spinner-container {
    background-image: url('../img/spiner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Dopasuje obrazek do rozmiaru kontenera */
    top: 50%;
    left: 50%;
    width: 50px !important;
    height: 50px !important;
    border: none !important;

    /* Kluczowe: wycentrowanie startowe przed animacją */
    transform: translate(-50%, -50%); 
    
    /* Start animacji */
    animation: custom-shaka-rotate 1s linear infinite !important;
}

/* 3. Definiujemy animację obrotu (jeśli Twój PNG nie jest animowanym GIFem) */

@keyframes custom-shaka-rotate {
    from { 
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    to { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}






/* Pływająca Szklana Wysepka - zwężona w pionie */
.shaka-bottom-controls {
    width: 94% !important;
     
    margin: 0 auto 10px auto !important; /* Oderwanie od krawędzi */
    padding: 4px 8px !important; /* ZMNIEJSZONY PADDING = niższy i smuklejszy pasek */
    background: rgba(15, 15, 20, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* Wymuszamy akcelerację sprzętową dla płynnych animacji */
    will-change: opacity, transform !important;
    transition: opacity 0.3s ease !important;
}

/* FIX NA "SZKLANEGO DUCHA": 
   Gdy Shaka Player ukrywa pasek (dodając inline opacity: 0), 
   my brutalnie odcinamy rozmycie i ramki, żeby zniknęły całkowicie
.shaka-bottom-controls[style*="opacity: 0"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}    */


/* Upewniamy się, że sam panel potrafi płynnie zanikać */
.shaka-bottom-controls {
    transition: opacity 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease !important;
}

/* Kiedy Shaka Player ukrywa główny interfejs (opacity: 0), 
   my zmuszamy szklany panel do natychmiastowego rozebrania się z filtrów i płynnego zniknięcia */
.shaka-controls-container[style*="opacity: 0"] .shaka-bottom-controls,
.shaka-controls-container:not([shown="true"]) .shaka-bottom-controls {
    opacity: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    pointer-events: none !important; /* Zapobiega klikaniu w niewidzialny pasek */
}





/* =========================================
   CIENIUTKI PASEK POSTĘPU (Z GRADIENTEM)
   ========================================= */
.shaka-seek-bar-container {
    height: 1px !important; /* Wymuszamy 1/3 grubości */
    border-radius: 1px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    margin: 5px 0 10px 0 !important;
}

/* Gradient na pasku odtworzonego fragmentu */
.shaka-seek-bar-container {
    background: linear-gradient(90deg, rgba(48,135,255,0.05) 0%, rgba(48,135,255,1) 100%) !important;
    border-radius: 1px !important;
}

/* Stylizacja samej kropki (gałki) suwaka postępu, żeby nie rozpychała paska */
input[type=range].shaka-seek-bar::-webkit-slider-thumb {
    height: 8px !important;
    width: 8px !important;
    background: #3078ff !important;
    border-radius: 50% !important;
    border: 1px solid white;
    margin-top: -3px !important; /* Podciągamy kropkę na środek cienkiego paska */
    box-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}
input[type=range].shaka-seek-bar::-moz-range-thumb {
    height: 8px !important;
    width: 8px !important;      
    background: #3078ff !important; 
    border: none !important;
    border-radius: 50% !important;
    border: 1px solid white;
}














/* =========================================
   TŁA PASKÓW (POSTĘP I GŁOŚNOŚĆ) - FIRMOWY TINT
   ========================================= */
/* Wymuszamy flexboxa dla precyzyjnego centrowania elementów wewnętrznych */
.shaka-seek-bar-container,
.shaka-volume-bar-container {
    height: 2px !important; 
    border-radius: 2px !important;
    background: rgba(48, 135, 255, 0.5) !important; 
    
    /* Nadpisujemy zachowanie Shaka - wyłączamy sztywne marginesy dla absolutnego wyrównania */
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Odstęp od dolnych przycisków */
    
    display: flex !important;
    align-items: center !important; /* To wyśrodkuje kropkę i wypełnienie w pionie! */
    position: relative !important;
}

/* Wypełnienie postępu (część obejrzana) */
.shaka-seek-bar-container {
    height: 1px !important; /* Wymuszamy, by wypełnienie nie rozlało się w pionie */
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 0px !important;
    top: 0 !important; /* Reset pozycjonowania absolute z Shaka */
}
.shaka-seek-bar {
    height: 1px !important; /* Wymuszamy, by wypełnienie nie rozlało się w pionie */
    background: rgba(48, 135, 255, 0.1) !important;
    border-radius: 0px !important;
    top: 0 !important; /* Reset pozycjonowania absolute z Shaka */
}


/* Wypełnienie głośności */
.shaka-volume-bar-container .shaka-current-volume {
    height: 4px !important;
    background: #3087ff !important;
    border-radius: 2px !important;
    top: 0 !important;
}

/* =========================================
   ROZBROJENIE DOMYŚLNYCH SUWAKÓW PRZEGLĄDARKI
   ========================================= */
input[type=range].shaka-seek-bar,
input[type=range].shaka-volume-bar {
    -webkit-appearance: none !important; 
    appearance: none !important;
    background: transparent !important; 
    
    /* Kluczowe! Suwak musi wypełniać idealnie 100% kontenera, ale być wyśrodkowany */
    height: 100% !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    
    border: none !important;
    outline: none !important;
    position: absolute !important; /* Żeby suwak (input) idealnie nałożył się na paski tła z Shaka */
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important; /* Kropka musi być na wierzchu, żeby była klikalna */
}

/* KROPKA: Pasek postępu */
input[type=range].shaka-seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 12px !important; /* Lekko większa, by łatwiej było złapać na mobile */
    width: 12px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
    cursor: pointer;
    /* Usuwamy stary margin-top, ponieważ teraz używamy align-items: center na kontenerze */
    margin-top: 0 !important; 
}

/







/* PRZYCISKI - mniejsze marginesy by ściśniać cały panel */
.shaka-control-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
    padding: 6px !important;
    transition: 0.3s all ease !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.shaka-control-button:hover {
    background: rgba(48, 135, 255, 0.3) !important;
    border-color: rgba(48, 135, 255, 0.8) !important;
    transform: translateY(-1px);
}









/*  MOJE DEFINICJE BUTTONÓW */

.rodzic {
    position: relative; /* To jest bardzo ważne! */
}

.dziecko {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


.shaka-bottom-controls {
    height: 65px !important;
}


/* Ukrycie domyślnego tła całego playera */
.shaka-controls-container {
    background: transparent !important;
    text-shadow: none !important;
    display: flex !important;
}


.shaka-bottom-controls .shaka-cast-button,
.shaka-bottom-controls .shaka-fullscreen-button,
.shaka-bottom-controls .shaka-overflow-menu-button,
.shaka-bottom-controls .shaka-overflow-button-label, 
.shaka-bottom-controls .shaka-overflow-menu-only,
.shaka-bottom-controls .shaka-mute-button,
.shaka-bottom-controls .shaka-back-to-start-button,
.shaka-bottom-controls .shaka-small-play-button { 
    position: relative !important;
    margin-top: 10px;
    font-size 24px;  
    border-radius: 50%;
    bottom: 10px !important;
    left: 20px; !important;
    width: 36px; height: 36px;
    background: rgba(0, 0, 0, 0.3) !important; 
    border: 1px solid rgba(48, 135, 255, 0.1) !important; 
    color: rgba(200, 220, 255, 0.6) !important;
    transition: all 0.3s;
    
}

.shaka-bottom-controls .shaka-cast-button:hover, 
.shaka-bottom-controls .shaka-fullscreen-button:hover,
.shaka-bottom-controls .shaka-overflow-menu-button:hover,
.shaka-bottom-controls .shaka-overflow-button-label:hover,
.shaka-bottom-controls .shaka-mute-button:hover,
.shaka-bottom-controls .shaka-back-to-start-button:hover,
.shaka-bottom-controls .shaka-small-play-button:hover {
    border-radius: 50%;
    background: rgba(48, 135, 255, 0.15) !important; 
    border: 1px solid rgba(48, 135, 255, 0.2) !important;
    transform: scale(1.1); 
    color: #cde !important;; 
    transition: all 0.3s;
    
}


.shaka-fullscreen-button .shaka-ui-icon,          
.shaka-overflow-menu-button .shaka-ui-icon, 
.shaka-small-play-button .shaka-ui-icon,
.shaka-mute-button .shaka-ui-icon
{
    width: 20px;
    height: 20px;
}
.shaka-back-to-start-button .fa-reply,
{
     font-size: 8px !important;
}

 .shaka-current-time {
    height: 1px !important; /* Wymuszamy, by wypełnienie nie rozlało się w pionie */
    background: rgba(48, 135, 255, 0.4) !important;
    border-radius: 0px !important;
    margin-top: -15px !important; /* Reset pozycjonowania absolute z Shaka */
    
    
    color: rgba(200, 220, 255, 0.6) !important;
}
  
/* KROPKA: Głośność */
input[type=range].shaka-volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 10px !important;
    width: 10px !important;
    background: #3087ff !important;
    border-radius: 50% !important;
    cursor: pointer;
    margin-top: 0 !important;
}


 .shaka-range-container, .shaka-volume-bar-container
 {
     height: 1px !important; 
 }

/* Przysunięcie paska głośności do ikonki (likwidacja "martwej strefy") 
.shaka-mute-button {
    margin-right: 0 !important;
    padding-right: 5px !important; /* Zwiększamy klikalny obszar przycisku, żeby dotykał suwaka */
 
                       
/* Aktualizacja marginesu lewego w kontenerze głośności */
.shaka-volume-bar-container {
    margin-left: 0 !important; /* Było 8px, teraz 0 - przyklejamy do ikonki
    margin-bottom: 0 !important;          */
    margin-right: 15px !important;
 /*   transform: translateY(6px) !important;  Twoje obniżenie zostaje */
}




/*
 .shaka-video-container,
 .shaka-controls-container {
     width: 100%;
     height: 100%;
     float: bottom;
 }      
 
 .shaka-show-controls-on-mouse-over,
 .shaka-bottom-control {
     width: calc(100% + 20px);
     margin-left: -10px;
     margin-right: -10px;
     min-height: 50px;
     padding-bottom: 5px;
     background-color: transparent;
     opacity: 0;
 }

 .shaka-show-controls-on-mouse-over:hover,
 .shaka-bottom-control:hover {
     background-image: url('../img/00000-nav-bg-black.png');
     background-color: transparent;
     opacity: 1;
     animation: displaybuttonbar .3s ease-in-out forwards;
 }
 
.shaka-ad-markers {
    position: absolute;
    top: -6px;
} 
 
 
 
 .shaka-range-element {
 position: absolute;
 top: -20px;
  background-color: transparent;
  width: calc(100% + 0px);  
  opacity: 0;  
}



.shaka-range-element:hover {
  position: absolute;
  top: -18px;
  width: calc(100% + 0px);  
  background-color: transparent;
  background-image: none; 
  opacity: 1;  
}

.shaka-volume-bar-container
{
    position: relative;
    top: 5px;
    left: -35px; 
}

.shaka-volume-bar{
    
   position: absolute;
    top: 5px;  
} 



.shaka-overflow-menu {
    background-image: url('../img/00000-nav-bg-black.png');
    width: 380px;
    border-radius: 6px;
} 

.shaka-overflow-menu:hover {
    background-image: url('../img/00000-nav-bg-black.png');
    width: 380px;
    border-radius: 6px;
} 
.shaka-content-title {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 98%;
    line-height: 25px;
}
.text-shaka-content-title {
    font-size: 20px;
}

  */




/* =========================================
   SZKLANE MENU USTAWIEŃ (Kółko Zębate)
   ========================================= */
.shaka-overflow-menu,
.shaka-playback-rates,
.shaka-settings-menu {
    /* Usuwamy stary obrazek i dajemy nasze dymione szkło */
    background: rgba(15, 15, 20, 0.6) !important; 
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    width: 380px !important;
    border-radius: 12px !important; /* Większe zaokrąglenie pod resztę interfejsu */
    padding: 8px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Nie potrzebujemy tu hovera zmieniającego tło dla całego menu, 
   ale warto dodać lekki firmowy akcent po najechaniu na poszczególne pozycje w menu */
.shaka-overflow-menu button:hover,
.shaka-settings-menu button:hover {
    background: rgba(48, 135, 255, 0.2) !important; 
}




 



/* =========================================
   SZKLANY TYTUŁ FILMU (Górny Pasek)
   ========================================= */
   .shaka-content-title {
    z-index: 99999 !important;
    position: absolute !important;
    top: 5px !important;
    left: 0px !important;
    
    
    
    
    height: 60px !important;  
    max-height: 60px !important;
/*    margin-right: 0px!important;
    margin-left: 0px !important;   */
    padding: 0px 20px !important;
    
    /* Efekt szkła */
    background: rgba(15, 15, 20, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4) !important;
    
    /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 95.5% !important; 
    max-width: 95.5% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
    /* POPRAWIONY FLEXBOX */
    display: flex !important; 
    white-space: nowrap !important;
    align-items: center !important; /* Wyśrodkowanie w pionie */
    gap: 12px !important; /* Automatyczny odstęp między ikonką a tekstem */
    
    transition: all 0.5s ease !important;
}


.shaka-content-title:hover {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.shaka-bottom-controls:hover {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}
 /*
.text-shaka-content-title {
    font-size: 18px !important; /* Minimalnie mniejszy i lżejszy 
    font-weight: 500 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: normal !important;
    text-shadow: none !important;
}
  */

@media (max-width: 1850px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 95% !important; 
    max-width: 95% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

} 
  


@media (max-width: 1750px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 95% !important; 
    max-width: 95% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

} 

@media (max-width: 1525px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 94% !important; 
    max-width: 94% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

}  
  
@media (max-width: 1425px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 92% !important; 
    max-width: 92% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

} 
  
@media (max-width: 1350px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 92% !important; 
    max-width: 92% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}


@media (max-width: 1250px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 95% !important; 
    max-width: 95% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}
} 
  
  @media (max-width: 1000px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 94% !important; 
    max-width: 94% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

} 

 @media (max-width: 780px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 94% !important; 
    max-width: 94% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

} 
  

 @media (max-width: 680px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 92% !important; 
    max-width: 92% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

} 
  
  
@media (max-width: 600px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 91% !important; 
    max-width: 91% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

}

  
@media (max-width: 540px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 90% !important; 
    max-width: 90% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

}

@media (max-width: 460px) { 
  
  .shaka-content-title {
             /* Zabezpieczenie przed rozpychaniem na cały ekran  */
    width: 89.5% !important; 
    max-width: 89.5% !important; /* Tytuł utnie się, jeśli przekroczy 75% szerokości playera */
    
}

}