/* Ukrywanie systemowego paska przewijania w menu kategorii */
    .NoScrollbar::-webkit-scrollbar { display: none; }
    .NoScrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Bazowy styl dla szklanych przycisków nawigacji */
    .GlassNavBtn {
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent; 
        box-sizing: border-box;
        color: #89a;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 0 15px;
        height: 56px; /* Zmniejszone o 4px, aby border-bottom nigdy nie uciekał pod spód nawigatora */
        cursor: pointer;
        transition: color 0.3s, border-color 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        outline: none;
        margin: 0;
    }
    
    .GlassNavBtn font, .GlassNavBtn span {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        line-height: normal;
    }
    
    .GlassNavBtn:hover { color: #fff; }
    .GlassNavBtnActive {
        color: #bcd;
        border-bottom: 2px solid rgba(48,135,255,0.5);
        background: linear-gradient(to top, rgba(48,135,255,0.1) 0%, transparent 100%);
    }

    /* Okrągłe przyciski ikon */
    .GlassIconBtn {
        background: transparent;
        border: 1px solid transparent;
        box-sizing: border-box;
        color: #89a;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        outline: none;
        padding: 0; 
        margin: 0;
    }
    
    .GlassIconBtn span {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    
    .GlassIconBtn:hover {
        color: #fff;
        background: rgba(48, 135, 255,0.3);
        border: 1px solid rgba(48, 135, 255,0.6);
    }

    /* --- NOWOCZESNE RWD (RESPONSYWNOŚĆ) --- */
    .DesktopOnly { display: flex; }
    .MobileOnly { display: none; }
    .SlaweSelectNavWrapper { display: none; }

 
 
 
 
 
 
 
    /* --- STYLIZACJA MENU ROZWIJANYCH (DROPDOWN) dla FIBER MEDIA --- */
    .GlassDropdownFiber {
    display: block;
    position: absolute;
    top: 60px;
    
    /* 1. Resetujemy lewą stronę (ZABIJA BŁĄD) */
    left: auto; 
    
    /* 2. Przyklejamy fizycznie do prawej krawędzi rodzica */
    right: 0px; 
    
    /* 3. Wyrzucamy menu poza prawy ekran (100% jego szerokości + 50px zapasu na box-shadow) */
    transform: translateX(calc(100% + 50px)); 
    
    width: 300px;
    min-height: 670px;
    max-height: 95%;
    background: rgba(18, 25, 35, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: -10px 20px 50px rgba(0,0,0,0.5); /* Lekka zmiana cienia, żeby ładniej wjeżdżał z prawej */
    z-index: 99999 !important;
    
    /* 4. Animujemy TYLKO transform, dajemy mu fajną dynamikę (ease-out) */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 
     /* 5. UWAGA: brak spacji między klasami! */
     .GlassDropdownFiber.is-open {
    /* Menu wraca na swoją pierwotną pozycję (czyli right: 0) */
    transform: translateX(0); 
    }
    
 
    .GlassDropdownFiberItem {
        padding: 6px 20px;
        margin: 2px;
        line-height: 0.5;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #abc;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-left: 3px solid transparent;
        line-height: 1;
    }
    .GlassDropdownFiberItem:hover {
        background: rgba(48, 135, 255, 0.1);
        color: #fff;
        padding-left: 25px; /* Animowane wcięcie */
        border-left: 3px solid #3087ff;
    }

    
 
 
    
    /* --- STYLIZACJA MENU ROZWIJANYCH (DROPDOWN) --- */
    .GlassDropdown {
        display: none;
        position: absolute;
        top: 70px; /* Delikatny odstęp od belki głównej */
        left: 10px;
        width: 260px;
        background: rgba(18, 25, 35, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        overflow: hidden; /* Przycina zawartość do zaokrągleń */
        z-index: 99999 !important;
    }
    .GlassDropdownHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(0, 0, 0, 0.2);
    }
    .GlassDropdownTitle {
        color: #789;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }
    .GlassDropdownClose {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        font-size: 28px;
        line-height: 0.5;
        cursor: pointer;
        transition: color 0.3s, transform 0.3s;
        padding: 0;
        margin: 0;
        outline: none;
    }
    .GlassDropdownClose:hover {
        color: #fff;
        transform: scale(1.1);
    }
    .GlassDropdownList {
        list-style: none;
        margin: 0;
        padding: 10px 0;
    }
    .GlassDropdownItem {
        padding: 12px 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #abc;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-left: 3px solid transparent;
        line-height: 1;
    }
    .GlassDropdownItem:hover {
        background: rgba(48, 135, 255, 0.1);
        color: #fff;
        padding-left: 25px; /* Animowane wcięcie */
        border-left: 3px solid #3087ff;
    }
    .GlassDropdownDivider {
        height: 1px;
        background: rgba(255, 255, 255, 0.05);
        margin: 10px 0;
    }
    
    /* Optyczne przesunięcie menu Kategorii w lewo na małych ekranach */
    #SlaveAppSubMenu {
        left: -65px !important; /* Przesuwa menu o równe 30px w lewo względem domyślnego left: 10px */
    }
    
    /* --- NOWA PIGUŁKA DLA GŁÓWNYCH PRZYCISKÓW (LEWA STRONA) --- */
    .BrandPill {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 30px;
        height: 40px; /* Taka sama wysokość jak pigułka po prawej! */
        padding: 0 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        outline: none;
        box-sizing: border-box;
        white-space: nowrap !important;
        margin-left: 10px; /* Lekki odstęp od krawędzi ekranu */
        margin-bottom: 8px;
        color: #bcd;
        
    }
 /*   .BrandPill:hover {
        background: rgba(48, 135, 255, 0.15);
        border: 1px solid rgba(48, 135, 255, 0.7);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        color: #def;
    }   */
    
    .FlixRka{
           font-size: 11px; 
           color: #3087ff; 
           font-weight: bold; 
           position: relative; 
           top: -6px; 
           left: -3px; 
        }
    /* --- PRZYCISKI PRZEWIJANIA KATEGORII (STRZAŁKI) --- */
    .SliderArrowBtn {
        /*background: #121418;  Solidne, ciemne tło maskujące wycieki paska */
        background: rgba(0, 0, 0, 0.4);
      /*  border: none; */
        border: 1px solid rgba(42558, 255, 255, 0.1);
        color: #789; /* Domyślny, lekko przygaszony kolor ikonki */
       /* height: 100%; */
        width: 40px; height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        z-index: 10;
        outline: none;
        margin: 0;
        padding: 0;
        border-radius: 20px !important; /* Blokada przed zaokrągleniami = brak wycieków */
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Efekt po najechaniu myszką */
    .SliderArrowBtn:hover {
        background: rgba(48, 135, 255, 0.3);
        border: 1px solid rgba(48, 135, 255, 0.6);
      /*  background: #1a1e24;  Ledwo zauważalne rozjaśnienie tła guzika */
        color: #cde; /* Ikonka zapala się na nasz firmowy błękit FLIX TV */
        
    }

    /* Animacja powiększenia samej ikonki wewnątrz */
    .SliderArrowBtn span {
        transition: transform 0.3s ease;
    }
    .SliderArrowBtn:hover span {
        transform: scale(1.3); /* Płynne powiększenie strzałki */
    }
    
    /* Efekt kliknięcia (wciśnięcia) */
    .SliderArrowBtn:active span {
        transform: scale(0.9);
    }
        
    .ActivLoginBtn{
               color: #3078ff;
               border: 1px solid rgba(48, 135, 255, 0.4);               
               background: rgba(48, 135, 255, 0.2);
               backdrop-filter: blur(10px);
               -webkit-backdrop-filter: blur(10px); /* Dla Safari */
    }
    
    
    
    
    
    
    
        
    /* Zegar znika na 1300px */
    @media (max-width: 1300px) {
        .NavTimerBlock { display: none !important; }
        
        .hide1300 { display: none; } 
    }

    /* Na 1180px chowamy poziomy pasek i pokazujemy dropdown Filmy/Seriale */
    @media (max-width: 1200px) {
        .DesktopSlaweSlider { display: none !important; }
        .SlaweSelectNavWrapper { padding-top: -1px; display: flex !important; min-width: 220px; max-width: 220px; width: 220px;}
        .GlassIconBtn {
            position: relative;
            top: 0px;
            min-width: 38px; 
            width: 38px !important;
            height: 38px !important;
            font-size: 15px !important;
            
        }
        .hide1200 { display: none; }

        /* Łagodzimy kolor tekstu dla etykiet rozwijanych, żeby nie "świecił" */
        #FLIXTV_SELECT font, #GROUP_SELECT font {
            color: rgba(255, 255, 255, 0.75) !important; /* Idealny, stonowany odcień */
        }
    }
    
    @media (max-width: 1100px) {  
       .hide1020 { display: none !important; } 
       
     
    }
    
     @media (max-width: 650px) {
         
        .SlaweSelectNavWrapper { padding-top: 3px; display: flex !important; min-width: 150px; max-width: 150px; width: 150px;} 
        #GROUP_SELECT {
            margin-left: 10px;
            margin-top: -8px;
            max-width: 95px;
            min-width: 95px;
            width: 95px;
        }
        .GlassIconBtn {
            min-width: 32px;
            position: relative;
            top: -1px;
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
            
        }
         
     }

    /* Na małych (550px) zapadamy prawe ikony w "hamburger" i chronimy przed rozpychaniem */
    @media (max-width: 550px) {
        .DesktopOnly { display: none !important; }
        .MobileOnly { display: flex !important; }
        
        /* Odzyskujemy cenne piksele po bokach ekranu */
        #MasterNavigator { padding: 0 10px !important; }
        #FLIXTV_SELECT { padding: 0 8px !important; }
         
         
         
         
        /* Zmniejszenie ikon nawigacyjnych (hamburger, fullscreen) */
        .GlassIconBtn {
            position: relative;
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
            
        }
        
        /* Mniejsza pigułka po prawej stronie */
        .RightIconsPill {
            height: 38px !important;
            padding: 0 8px !important;
        }
        
        
        /* Przygaszenie i zmniejszenie tekstów generowanych przez JS */
        #FLIXTV_SELECT font, {
            font-size: 15px !important;
            color: rgba(255, 255, 255, 0.7) !important; /* Łagodne, przygaszone litery */
            
            /* Magia ucinania długich słów (np. Dokumentalne -> Dokumen...) */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block !important; 
            max-width: 100px; /* Sztywny limit gwarantujący, że prawe ikony zawsze się zmieszczą */
        }
        
        /* Ikonka kropek przed tekstem - też ciut mniejsza */
        #FLIXTV_SELECT .fa-ellipsis-v{
            font-size: 14px !important;
            margin-right: 8px !important;
        }
        
        .SlaweSelectNavWrapper { padding-top: 3px; display: flex !important; min-width: 150px; max-width: 150px; width: 150px;} 
        #GROUP_SELECT {
            margin-left: 10px;
            margin-top: -9px;
            max-width: 95px;
            min-width: 95px;
            width: 95px;
        }
       
        .FlixRka{
           font-size: 11px; 
           font-weight: bold; 
           position: relative; 
           top: -7px; 
           left: -3px; 
        }
       } 
        
       @media (max-width: 450px) {  
      /*  .SlaweSelectNavWrapper { padding-top: 3px; display: flex !important; min-width: 150px; max-width: 150px; width: 150px;}
         Ekstremalne skalowanie na 420px */
        .GlassIconBtn {
            width: 32px;
        }
        .SlaweSelectNavWrapper { padding-top: 3px; display: flex !important; min-width: 130px; max-width: 120px; width: 110px; padding-right: 10px;} 
        #GROUP_SELECT {
            margin-left: -2px;
            margin-top: -9px;
            max-width: 90px;
            min-width: 90px;
            width: 90px;
            margin-right: 20px;
        }
       
     
      }