/* --- GLASS PANEL INFORMACYJNY --- */
    .GlassInfoPanel {
        background: linear-gradient(135deg, rgba(18, 20, 24, 0.2) 0%, rgba(18, 20, 24, 0.2) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 25px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        color: #fff;
        position: relative;
        height: 100%;
    }

    /* Przycisk zamykania / chowania panelu */
    .GlassCloseBtn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 43px !important;
        height: 43px !important;
        border-radius: 70% !important;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #abc;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
        outline: none;
    }
    .GlassCloseBtn:hover {
        background: rgba(255,107,107,0.2);
        color: #ff6b6b;
        border-color: rgba(255,107,107,0.4);
        transform: rotate(90deg);
    }
    
    

     /* Elementy wewnątrz panelu */
    .InfoTitle {
        font-size: clamp(22px, 2.5vw, 32px); 
        font-weight: 800;
        color: #def;
        text-shadow: 0 2px 10px rgba(0,0,0,0.8);
        line-height: 1.2;
        padding-right: 60px; 
        
        /* Ochrona przed zgnieceniem przez Flexboxa */
        flex-shrink: 0;
        
        /* Rezerwacja miejsca na 2 linijki tekstu (ok. 76px), żeby layout nie skakał */
        min-height: 76px; 
        
        /* Odcięcie gigantycznych tytułów do max 2 lub 3 linii */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Zmieniłem na 2, żeby było smuklej, ale możesz dać 3 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .InfoDescription {
        font-size: 17px;
        font-weight: 300;
        color: rgba(200, 225, 255, 0.6);
        line-height: 1.6;
        text-align: justify;
        overflow-y: auto;
        text-shadow: 0 1px 5px rgba(0,0,0,0.8);
        padding-right: 10px;
        flex-grow: 1; 
        min-height: 0; 
        
        /* MAGIA DLA FIREFOXA */
        scrollbar-width: thin; /* Cienki pasek */
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Kolor suwaka i przezroczyste tło */
    }
    
    .InfoDescription::-webkit-scrollbar { width: 4px; }
    .InfoDescription::-webkit-scrollbar-track { background: transparent; }
    .InfoDescription::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

     /* "Pigułki" z badge'ami (Kategoria, Wiek, Oceny) */
    .InfoBadgeContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        flex-shrink: 0; /* Ochrona przed zgnieceniem! */
    }
    .InfoBadge {
        display: flex;
        align-items: center;
        white-space: nowrap;
        gap: 8px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 6px 14px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 500;
        color: #cde;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    
    /* Grupowanie odznak, aby nie łamały się pojedynczo */
    .BadgeGroup {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap; /* Kategoryczny zakaz łamania wewnątrz grupy! */
    }
    
          /* --- UKŁAD 50/50 (HERO SECTION) --- */
    .HeroLayoutContainer {
        display: flex;
        flex-wrap: nowrap; /* BLOKADA! Kategoryczny zakaz spadania pod spód przed 1400px */
        gap: 20px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px; 
        margin-bottom: 20px;
        align-items: stretch;
    }

    /* Lewa strona (INFO) */
    .HeroInfoCol {
        flex: 1 1 calc(50% - 10px); /* Idealnie 50% minus połowa gapu */
        min-width: 0; /* Zezwala kolumnie skurczyć się poniżej szerokości długiego słowa */
        aspect-ratio: 16 / 9; /* MAGIA! InfoPanel dostaje wymuszone proporcje wideo! */
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
        z-index: 990;
        min-height: 0;
        max-height: 650px;
        border-radius: 12px; 
        
        /* --- NOWE: SZKLANY EFEKT ROZMYCIA --- */
    /* Bardzo subtelny, ciemny, półprzezroczysty nalot */
    background: rgba(0, 0, 0, 0.12) !important; 
    /* Kluczowe: Rozmycie tła POD KARTĄ (Frosted Glass Effect) */
    -webkit-backdrop-filter: blur(20px) !important; /* Dla Safari */
    backdrop-filter: blur(20px) !important; 
    
    /* Dodatkowe wykończenie dla głębi */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Bardzo cienka, jasna obwódka jak krawędź szkła */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; /* Głęboki, miękki cień, który "unosi" kartę nad tłem */
    }

    /* Prawa strona (PLAYER) */
    .HeroPlayerCol {
        flex: 1 1 calc(50% - 10px); /* Idealnie 50% minus połowa gapu */
        min-width: 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* SZKLANY ODTWARZACZ - TEGO BRAKOWAŁO! To on trzyma wideo w proporcjach 16:9 box-shadow: 0 20px 50px rgba(0,0,0,0.5);   */
    .GlassPlayerWrapper {
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.2); 
            
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9; /* Magia dyktująca wysokość całego układu */
        display: flex;
        align-items: center;
        justify-content: center;
    } 
    
    .GlassPlayerWrapperCleared {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        box-shadow: inset 0 0 15px 10px rgba(0, 0, 0, 0.7);     
        overflow: hidden;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9; /* Magia dyktująca wysokość całego układu */
        display: flex;
        align-items: center;
        justify-content: center;
    } 
    
    /* Tworzy niewidzialną, ciemną ramkę rzucającą cień DO ŚRODKA na samo wideo
    .GlassPlayerWrapper::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 12px;
        box-shadow: outset 0 0 20px 8px rgba(0, 0, 0, 0.7);    */
      /*  pointer-events: none;  Kluczowe! Przepuszcza kliknięcia myszką do playera */
      /*  z-index: 10;  Musi być nad wideo, ale pod kontrolkami Shaka (jeśli to możliwe)
        }                                                                                */

    /* Wymuszenie 100% wysokości na InfoPanelu wewnątrz kolumny */
    .GlassInfoPanel {
        height: 100% !important;
        margin: 0;
    }
    
    
    
    /* button close na panelu info*/
    .GlassCloseBtn{
        display: none;
    }
    .FlixInfoBtn{
            display: none;
            border-radius: 6px;
        }

    /* --- NADPISANIE TYTUŁU TYLKO DLA PRZEWODNIKA (ZAKRES 1251px - 1480px) --- */
@media (min-width: 1251px) and (max-width: 1480px) {
    #PrzewodnikContainer .InfoTitle {
        -webkit-line-clamp: 1; /* Wymuszenie tylko JEDNEJ linii */
        white-space: nowrap; /* Zapobiega łamaniu tekstu */
        display: block; /* Nadpisuje -webkit-box dla pewności */
        min-height: auto; /* Zdejmuje rezerwę na 2 linijki tekstu */
        max-height: 15px;
        margin-bottom: 0px; /* Lekkie podciągnięcie, skoro zajmuje mniej miejsca */
        font-size: clamp(20px, 2vw, 26px); /* Opcjonalnie ciut mniejszy font, by weszło więcej słów */
    }
}    
        
        
   /* --- KOMPRESJA PIONOWA NA ŚREDNICH EKRANACH --- */
    @media (max-width: 1480px) {
        .GlassInfoPanel {
            padding: 15px 20px !important; /* Mniej szkła wokół treści */
            gap: 12px !important; /* Ciaśniej między tytułem, opisem i buttonami */
        }
        
        .InfoTitle {
            margin-bottom: -5px; /* Dodatkowe oszczędności przy tytule */
            min-height: 60px; /* Zmniejszona rezerwa dla tytułu w trybie kompresji */
        }
        
        .InfoDescription {
            font-size: 15px !important; /* Oczko mniejszy font w opisie */
            line-height: 1.4 !important;
        }
        
        /* Zmniejszamy też delikatnie pigułki na średnich ekranach */
        .InfoBadge {
            padding: 4px 10px !important;
            font-size: 13px !important;
        }
    }     
        
        
        
        
        
        
        
        
        
        
    /* --- MAGIA RWD: PONIŻEJ 1400px --- */
    @media (max-width: 1250px) {
        
        .HeroInfoCol {
            position: fixed !important;
            top: 75px; 
            left: 0;
            width: 450px !important; 
            max-width: 90vw !important; 
            height: calc(100vh - 90px) !important; 
            transform: translateX(-120%) !important; 
            opacity: 0;
            pointer-events: none;
            z-index: 1990;  
        }

        .HeroInfoCol.ShowMobileInfo {
            transform: translateX(10px) !important; 
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .HeroPlayerCol {
            flex: 1 1 100% !important;
            max-width: 100% !important;
            display: flex;
            justify-content: center; 
        }

        .GlassPlayerWrapper {
            width: 85% !important; 
            margin: 0 auto !important; 
        }
        
         /* button close na panelu info*/
        .GlassCloseBtn{
        display: flex;
        }
        .FlixInfoBtn{
            display: block;
        }
    }
    
    /* Powrót do pełnej szerokości playera na mniejszych ekranach (np. tablety/telefony) */
    @media (max-width: 800px) {
        .GlassPlayerWrapper {
            width: 100% !important; 
            border-radius: 8px !important; 
        }
    }