.PlayButtonOverlayClasic {
    position: absolute;
    top: 14px;
    right : 100px;
    width: 34px;
    height: 34px;
    background: rgba(48, 135, 255, 0.2); /* Twój firmowy niebieski */
    border-radius: 50%;
    display: none; /* Ukryty startowo */
    justify-content: center;
    align-items: center;
    color: #abc;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
 /*   filter: drop-shadow(0 0 5px rgba(48,135,255,0.5)); */
    opacity: 0;
    }

    .PlayButtonOverlayClasic:hover {
    transform: scale(1.1);
    background: rgba(48, 135, 255, 0.8); /* Twój firmowy niebieski */
    color: #def;
    font-size: 16px;
    box-shadow: 0 0 20px rgba(48, 135, 255, 0.6);
    }

    .PlayButtonOverlayClasic i {
    margin-left: 3px; /* Korekta optyczna środka ikony Play */
    }
    
  
 /* --- KONTENER LISTY CLASSIC TV --- */
 /* --- ZABÓJCA STARYCH MASEK (Czyścimy rodzica) --- */
#ProgramInfoBlock {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
#ProgramInfoBlock::after,
#ProgramInfoBlock::before {
    display: none !important;
}

/* --- KONTENER LISTY CLASSIC TV --- */
     /* --- WŁAŚCIWY KONTENER LISTY --- */
.ClassicListContainer {
    flex-grow: 1;
    position: relative; 
    height: 100% !important;
    width: 100% !important;
    
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    display: flex;
    flex-direction: column;
    /* WYMUSZAMY start od samej góry (zabija ukryte centrowanie!) */
    justify-content: flex-start !important; 
    gap: 12px;
    
    /* Ciasny padding (Top 15px) i zerowy margin */
    margin: 0 !important;
    padding: 15px 10px 10px 5px !important; 
    
    list-style: none !important;

    /* --- STYLIZACJA SUWAKA (MOZILLA FIREFOX) --- */
    scrollbar-width: thin !important;
    /* Kolor suwaka / Kolor tła (przezroczysty) */
    scrollbar-color: rgba(48, 135, 255, 0.6) transparent !important; 
}

/* --- STYLIZACJA SUWAKA (CHROME, EDGE, SAFARI, OPERA) --- */
.ClassicListContainer::-webkit-scrollbar {
    width: 6px !important;
    background: transparent !important;
}
.ClassicListContainer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 10px !important;
}
.ClassicListContainer::-webkit-scrollbar-thumb {
    background: rgba(48, 135, 255, 0.5) !important;
    border-radius: 10px !important;
}
.ClassicListContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 135, 255, 0.8) !important;
}

/* --- POJEDYNCZY WIERSZ KANAŁU --- */
.ClassicChRow {
    display: flex; align-items: center; width: 100%;
    height: 65px; min-height: 65px; flex-shrink: 0; box-sizing: border-box;
    padding: 0 15px 0 10px;
    background: rgba(18, 20, 24, 0.4);
    backdrop-filter: blur(12px);
    
    position: relative;
    z-index: 1; /* Wymusza bazowy poziom */
    overflow: visible !important;
    
    /* Ledwo widoczny border domyślny */
    border: 1px solid rgba(255, 255, 255, 0.04); 
    border-radius: 10px; cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: visible !important;
}

.ClassicChRow:hover {
    background: rgba(48, 135, 255, 0.12);
    border: 1px solid rgba(48, 135, 255, 0.4); /* Uwypuklenie przy najechaniu */
    transform: translateX(4px);
}

/* Stan Aktywny / Zaznaczony */
.ClassicChRow.ClassicRowActive {
    background: rgba(48, 135, 255, 0.2);
    border: 1px solid rgba(48, 135, 255, 0.8); /* Mocny glow przy kliknięciu */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Elevate the ENTIRE row when its menu is active */
.ClassicChRow.classic-menu-active {
    /* Ustawiamy wyższy z-index na cały rząd, by unosił się nad innymi rzędami */
    z-index: 1000 !important; 
    
    /* Upewniamy się, że pozycja nie jest statyczna, by z-index zadziałał */
    position: relative !important; 
}


 /* --- PASEK POSTĘPU (Gradient i wygaszenie) --- */
.ClassicProgressBarBg {
    height: 1px;
    position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: rgba(255, 255, 255, 0.02); /* Bardzo mocno przygaszone tło */
  /*  border-radius: 0 0 10px 10px !important;  */  
    overflow: hidden;
}

.ClassicProgressBarFill {
    height: 1px;
    /* Piękny poziomy gradient wyłaniający się z lewej strony */
    background: linear-gradient(to right, rgba(48, 135, 255, 0.01) 0%, rgba(48, 135, 255, 0.05) 100%);
  /*  box-shadow: 1px 0 1px rgba(48, 135, 255, 0.01);  */  
    transition: width 1s linear;
}


 /* --- SZKLANE MENU KONTEKSTOWE --- */
.ClassicChMenuBtn {
    position: relative; /* Baza dla absolutnego pozycjonowania menu */
}

.ClassicDropdownMenu {
    position: absolute;
    right: 20px;
    top: 30px;
    background: rgba(18, 20, 24, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    min-width: 300px;
    z-index: 9999 !important;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    cursor: default; /* Zeruje kursor z rzędu */
}

.ClassicMenuItem {
    padding: 12px 20px;
    color: #cde;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.ClassicMenuItem i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.ClassicMenuItem:hover {
    background: rgba(48, 135, 255, 0.15);
    color: #fff;
}



 /* --- LOGO KANAŁU (Zaokrąglone i lekko uniesione) --- */
.ClassicChLogoBox {
    width: 60px; height: 60px; flex-shrink: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.02) 80%);
    
    /* Zwiększone zaokrąglenie (było 8px) i uniesienie */
    border-radius: 14px; 
    transform: translateY(-2px); 
    
    display: flex; align-items: center; justify-content: center; padding: 4px;
}

.ClassicChLogoBox img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    border-radius: 6px;
}

/* --- TEKSTY (Tytuł i czas) --- */
.ClassicChInfoBox {
    flex-grow: 1;
    padding: 0 15px;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; /* Ważne dla ellipsis */
}

.ClassicChTitle {
    font-size: 16px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}

.ClassicChProg {
    font-size: 13px; color: #abc;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ClassicChTime {
    color: #3087ff; font-weight: 500; letter-spacing: 0.5px;
}

/* --- PRAWA STRONA (Ikonki i Play) --- */
.ClassicChTools {
    display: flex; align-items: center; gap: 15px;
    flex-shrink: 0;
}

.ClassicChStatusIcons {
    display: flex; align-items: center; gap: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 15px;
}

.StatusIcon {
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}

.StatusIcon.Catchup { color: #3087ff; opacity: 0.8; }
.StatusIcon.NoCatchup { color: #fff; opacity: 0.15; }
.StatusIcon.Recording { color: #ff4757; opacity: 0.2; font-size: 10px; } /* Mniejsza kropka */

.ClassicChMenuBtn {
    cursor: pointer; opacity: 0.6; transition: all 0.2s;
    color: #fff; padding: 5px; font-size: 18px;
}
.ClassicChRow:hover .ClassicChMenuBtn { opacity: 1; color: #3087ff; }

/* Kontener na przycisk Play ukryty przez Twój JS */
.RowPlayBtnContainer {
    width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
}
  
  
  
  




/* --- TARCZA OCHRONNA (IZOLACJA OD STAREGO CSS) --- */
.NewGlassIsolation * {
    /* Zdejmujemy wszelkie stare pseudo-elementy, które tworzyły linie lub maski */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    box-shadow: none; /* Tylko reset wstępny */
}

.NewGlassIsolation::after,
.NewGlassIsolation::before,
.NewGlassIsolation .ClassicListContainer::after,
.NewGlassIsolation .ClassicListContainer::before,
.NewGlassIsolation .ClassicChRow::after,
.NewGlassIsolation .ClassicChRow::before {
    display: none !important;
    content: none !important;
}

/* Usuwamy tło z samego kontenera na wypadek, gdyby stary '#category' nadawał mu szarości */
#ProgramInfoBlock {
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
}

/* --- WŁAŚCIWY KONTENER LISTY --- */
.ClassicListContainer {
    /* Uwolnienie - elastyczne wypełnienie rodzica */
    flex-grow: 1;
    position: relative; 
    height: 100% !important;
    width: 100% !important;
    
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px 10px 0px 5px !important; /* Top 40px robi miejsce dla X'a */
    
    /* Zabezpieczenie przed narzucaniem list style przez rodziców */
    list-style: none !important;
}

/* --- POJEDYNCZY WIERSZ --- */
.ClassicChRow {
    display: flex; align-items: center; width: 100%;
    height: 65px; min-height: 65px; flex-shrink: 0; box-sizing: border-box;
    padding: 0 15px 0 10px;
    background: rgba(18, 20, 24, 0.4) !important;
    backdrop-filter: blur(12px);
    
    /* Wyraźny border w kolorze szkła - nadpisuje te niebieskie pasy ze zrzutu */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
    border-radius: 10px !important; 
    
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Zabezpieczenie przez starym CSS nakazującym wierszom mieć np. display: block */
    float: none !important; 
    clear: none !important;
}

.ClassicChRow:hover {
    background: rgba(48, 135, 255, 0.12) !important;
    border: 1px solid rgba(48, 135, 255, 0.4) !important;
    transform: translateX(4px);
}

.ClassicChRow.ClassicRowActive {
    background: rgba(48, 135, 255, 0.2) !important;
    border: 1px solid rgba(48, 135, 255, 0.8) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Paski postępu przywrócone po resecie */
.ClassicProgressBarBg {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: rgba(255, 255, 255, 0.02) !important;
}

.ClassicProgressBarFill {
    height: 100%;
    background: linear-gradient(to right, rgba(48, 135, 255, 0.05) 0%, rgba(48, 135, 255, 0.9) 100%) !important;
    box-shadow: 2px 0 6px rgba(48, 135, 255, 0.5) !important;
    transition: width 1s linear;
}




/* --- KONTENER DOLNYCH PANELI --- */
.ClassicPanelsWrapper {
    display: flex; 
    gap: 20px; 
    width: 100%; 
    padding: 20px 0;
    /* To kluczowe - pozwala na przeniesienie kart, gdy brakuje miejsca */
    flex-wrap: wrap; 
}

            /* --- KARTA W DOLNYM PANELU --- */
.ClassicBottomPanelCard {
    /* flex: 1; sprawia, że panele rozdzielają miejsce równo 50/50 */
    flex: 1; 
    /* Ustawiamy minimalną szerokość, by poniżej tej wartości nastąpiło zawinięcie (przełamanie) */
    min-width: 380px; 
    padding: 25px; 
    display: flex; 
    flex-direction: column;
    /* Pozwalamy na elastyczność wysokości z sensownym limitem na desktop */
    min-height: 300px;
    max-height: 600px;
    
    border-radius: 12px;
    
    /* --- NOWE: SZKLANY EFEKT ROZMYCIA --- */
    /* Bardzo subtelny, ciemny, półprzezroczysty nalot */
    background: rgba(0, 0, 0, 0.15) !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 */
}





/* Znikająca końcówka czasu dla mobile */
@media (max-width: 1250px) {
    .HideOnMobile {
        display: none !important;
    }
    .PlayButtonOverlayClasic {
        display: flex;
    }
    .ProgramInfoBlock,
    .NewGlassIsolation {
        margin-top: 40px !important;
        padding-top: 5px !important;
    }
}


/* --- REGUŁY RESPONSYWNE (Gdy ekran jest wąski) - PANELE DOLNE--- */
/* --- REGUŁY RESPONSYWNE (Gdy ekran jest wąski) --- */
@media (max-width: 900px) {
    .ClassicPanelsWrapper {
        /* Przechodzimy w układ pionowy */
        flex-direction: column !important; 
        padding: 10px 0;
        
        /* WYMUSZAMY rozciąganie elementów w pionie (na całą szerokość) */
        /* To na 99% załatwi sprawę, zabijając stare centrowanie */
        align-items: stretch !important;
    }
    
    .ClassicBottomPanelCard {
        /* W układzie pionowym nie ma ograniczeń maksymalnej wysokości */
        max-height: none !important; 
        min-height: auto !important;
        
        /* W układzie pionowym twardo wymuszamy 100% szerokości */
        width: 100% !important; 
        min-width: 100% !important;
        padding: 15px; 
        
        /* Resetujemy ewentualne stare marginesy, które centrują */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}