.BigInfoOfferButton {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255,255,255,0.14); 
    border-left: 4px solid rgba(48,135,255,0.9);
    border-right: 4px solid rgba(48,135,255,0.9);
    border-top: 1px solid rgba(48,135,255,0.5);
    border-bottom: 1px solid rgba(48,135,255,0.5);
    transition: all 0.3s;    
}
.BigInfoOfferButton:hover{
    transform: scale(1.02);
    background: rgba(48, 135, 255, 0.1);
}
 
 .ti-controls
 {
    opacity: 0.3; 
 }
.ti-prev
{
    display: flex !important;
    opacity: 0.1;
    border: 1px solid rgba(48,135,255,0.5) !important;
}
.ti-next
{
    display: flex !important;
    opacity: 0.1;
    border: 1px solid rgba(48,135,255,0.5) !important;
}  

.ti-review-content
{
    scrollbar-width: thin; 
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
} 

.ti-review-content::-webkit-scrollbar { 
    width: 5px; 
}

.ti-review-content::-webkit-scrollbar-track { 
    background: transparent; 
}

.ti-review-content::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 5px; 
}

/* Trik UX: Lekkie rozjaśnienie paska, gdy użytkownik na niego najedzie */
.ti-review-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}
 
 
 /* --- BAZA PŁYNNEGO ROZWIJANIA --- */
.smooth-expand-wrapper {
    display: grid;
    grid-template-rows: 0fr; /* Stan domyślny: zwinięte (0% wysokości) */
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- STAN ROZWINIĘTY --- */
.smooth-expand-wrapper.is-open {
    grid-template-rows: 1fr; /* Rozwija się do 100% naturalnej wysokości zawartości */
}

/* --- WEWNĘTRZNY KONTENER (Wymagany do ucięcia treści) --- */
.smooth-expand-inner {
    overflow: hidden; 
}
 
 
.multidevice-png-icon {
    width: 120px;
    height: 30px;
    
    /* TU WYBIERASZ KOLOR IKONY */
    background-color: rgba(200, 230, 255, 0.6); 
    
    /* TU WYCINASZ KSZTAŁT (Pamiętaj o podaniu dobrej ścieżki) */
    -webkit-mask-image: url('../img/0000000-tv-laptop-tablet-smart.png');
    mask-image: url('../img/0000000-tv-laptop-tablet-smart.png');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
}
.multidevice-icon {
    margin-top: 10px;
    margin-left: 10px;
    width: 120px;
    height: 30px;
}
/* Możesz też łatwo animować hover! */
.multidevice-icon:hover .multidevice-png-icon {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
} 



 .newproduct-svg-icon {
    width: 30px;
    height: 30px;
    
    /* TU WYBIERASZ KOLOR IKONY */
    background-color: rgba(200, 230, 255, 0.6); 
    
    /* TU WYCINASZ KSZTAŁT (Pamiętaj o podaniu dobrej ścieżki) */
    -webkit-mask-image: url('../img/new-products-label-svgrepo-com.svg');
    mask-image: url('../img/new-products-label-svgrepo-com.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
}
.newproduct-icon {
    margin-top: 10px;
    margin-left: 10px;
    width: 30px;
    height: 30px;
}
/* Możesz też łatwo animować hover! */
.newproduct-icon:hover .newproduct-svg-icon {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
} 



.promosale-svg-icon {
    width: 30px;
    height: 30px;
    
    /* TU WYBIERASZ KOLOR IKONY */
    background-color: rgba(200, 230, 255, 0.6); 
    
    /* TU WYCINASZ KSZTAŁT (Pamiętaj o podaniu dobrej ścieżki) */
    -webkit-mask-image: url('../img/sale-sticker-svgrepo-com.svg');
    mask-image: url('../img/sale-sticker-svgrepo-com.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
}
.promosale-icon {
    margin-top: 10px;
    margin-left: 10px;
    width: 30px;
    height: 30px;
}
/* Możesz też łatwo animować hover! */
.promosale-icon:hover .promosale-svg-icon {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
} 


 
 
 .payment-svg-icon {
    width: 20px;
    height: 20px;
    
    /* TU WYBIERASZ KOLOR IKONY */
    background-color: rgba(200, 230, 255, 0.6); 
    
    /* TU WYCINASZ KSZTAŁT (Pamiętaj o podaniu dobrej ścieżki) */
    -webkit-mask-image: url('../img/payment-svgrepo-com.svg');
    mask-image: url('../img/payment-svgrepo-com.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
}
.payment-icon {
    margin-top: 10px;
    margin-left: 10px;
    width: 30px;
    height: 30px;
}
/* Możesz też łatwo animować hover! */
.payment-icon:hover .payment-svg-icon {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}
 
 
 
 
 .offers-grid {
    display: flex;
    flex-direction: row; /* 1. Wymusza ułożenie elementów obok siebie */
    flex-wrap: nowrap; /* 2. Kategorycznie zabrania zrzucania elementów do nowej linii */
    justify-content: flex-start; /* 3. Bezpieczne wyrównanie do lewej (zapobiega ucinaniu) */
    gap: 20px;
    align-items: stretch; /* Rozciąga kafelki, żeby wszystkie miały równą wysokość */
    padding: 40px 20px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 50px;
    overflow-x: auto; /* 4. Aktywuje pasek przewijania poziomego */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* Dodaje płynny, bezwładnościowy scroll na iOS */
}

    .offer-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        min-width: 300px;
        padding: 25px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 0 0 auto;
    }

    .offer-card:hover {
        transform: translateY(-10px);
        background: rgba(48, 135, 255, 0.1);
        border-color: #3087ff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .offer-card-activ {
        transform: translateY(-10px);
        background: rgba(48, 135, 255, 0.1);
        border-color: #3087ff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .sub-offer-card {
        background: rgba(10, 20, 30, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        min-width: 350px;
        padding: 25px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 0 0 auto;
        cursor: pointer;
    }
    
    .sub-offer-card:hover {
        transform: translateY(-10px);
        background: rgba(10, 20, 30, 0.6);
        border-color: #3087ff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .sub-offer-card-activ {
        transform: translateY(-10px);
        background: rgba(10, 20, 30, 0.6);
        border-color: #3087ff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    

    .offer-icon {
        font-size: 40px;
        color: #3087ff;
        margin-bottom: 15px;
    }

    .offer-title {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      /*  text-transform: uppercase;  */
    }

    .offer-price {
        font-size: 24px;
        color: #fff;
        margin: 15px 0;
    }

    .offer-price span {
        font-size: 14px;
        color: #789;
    }

    .offer-features {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
        color: #abc;
        font-size: 13px;
        line-height: 1.8;
    }

    .btn-offer {
        background: rgba(48,135,255,0.2);
        color: #abc;
        border: none;
        padding: 10px 10px;
        border-radius: 4px;
        border: 1px solid  rgba(48,135,255,0.5);
        font-weight: bold;
        text-decoration: none;
        font-size: 12px;
        transition: background 0.2s;
    }

    .btn-offer:hover {       
        background: rgba(48,135,255,0.8);
        border: 1px solid  rgba(255,255,255,0.5);
        transition: all 0.4s;
        color: white;
    }
    
    .btn-offer-promo {
        background: rgba(255,200,10,0.05);
        color: #cde;
        border: none;
        padding: 10px 10px;
        border-radius: 4px;
        border: 1px solid  rgba(255,200,10,0.6);
        font-weight: bold;
        text-decoration: none;
        font-size: 12px;
        transition: background 0.2s;
    }

    .btn-offer-promo:hover {       
        background: rgba(255,200,10,0.6);
        border: 1px solid  rgba(255,200,10,0.8);
        transition: all 0.4s;
        color: white;
    }
    
    
    .BtnMoreRotation {
       transform: rotate(-90deg); 
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* --- KONTENER GŁÓWNY OFERT --- */
.offer-section {
    position: relative;
    width: 100%;
    min-height: 400px; 
    height: auto; /* Pozwala kontenerowi urosnąć dopasowując się do kafelków */
    margin-top: -60px; /* Podciąga pod szklany pasek nawigacji, tak jak miałeś w top: -60px */
    padding: 0px 10px;
    padding-bottom: 30px;
    overflow: hidden; /* Zatrzymuje tła wewnątrz, nie pozwalając im rozlać się po stronie */
    z-index: 100;
}

/* --- TŁA OFERTY (Przygotowane na Crossfade) --- */
.offer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    
    /* Magia przenikania */
    opacity: 0; 
    transition: opacity 0.8s ease-in-out; 
}

@keyframes kenBurnsOfferBg {
    0% { transform: scale(1) translate(0, 0); }
    25% { transform: scale(1.2) translate(3%, -5%); } 
    50% { transform: scale(1.4) translate(-5%, -3%); } 
    75% { transform: scale(1.8) translate(6%, 6%); }
    100% { transform: scale(1) translate(0, 0); } 
}

.offer-bg.active {
    opacity: 1;
    animation: kenBurnsOfferBg 60s linear forwards;
}

/* NOWA KLASA ZAMRAŻAJĄCA ANIMACJĘ */
.offer-bg.paused {
    animation-play-state: paused !important;
}

/* --- MASKA / GRADIENT --- */
.offer-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Łagodny gradient do czerni, aby kafelki z ofertami były mega czytelne */
    background: linear-gradient(to bottom, rgba(5, 15, 25, 0.45), rgba(0, 10, 20, .5));
    pointer-events: none; /* Ważne: Maska nie zablokuje kliknięć w tło! */
}

/* --- KONTENER NA WŁAŚCIWĄ TREŚĆ (KAFELKI) --- */
.offer-content {
    position: relative;
    z-index: 10; /* Musi być fizycznie nad maską (2) i tłem (1) */
    width: 100%;
    height: auto;
    padding-top: 80px; /* Robimy oddech od góry, żeby treść nie weszła pod pasek nawigacji */
    color: #cde;
}










/* ========================================= */
/* --- 1. GŁÓWNY BOX PAKIETU (PODZIAŁ 50/50) */
/* ========================================= */
.package-summary-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
    gap: 40px;
    
    /* Jaśniejsze, bardziej białe szkło */
    background: rgba(100, 100, 100, 0.28); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    text-align: left; /* Zmieniamy na wyrównanie do lewej! */
}

.package-summary-wrapper-sub-offer {   
    /* Jaśniejsze, bardziej białe szkło */
    background: rgba(100, 100, 100, 0.28); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    width: 100%; 
    height: auto; 
    margin-bottom: 25px;
    margin-top: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px; 
    padding-top: 0px;
    padding-bottom: 0px;  
    display: flex; 
    flex-direction: column
}

.offers-grid-sub-offer {
    display: flex;
    flex-direction: row; /* 1. Wymusza ułożenie elementów obok siebie */
    flex-wrap: nowrap; /* 2. Kategorycznie zabrania zrzucania elementów do nowej linii */
    justify-content: flex-start; /* 3. Bezpieczne wyrównanie do lewej (zapobiega ucinaniu) */
    gap: 20px;
    align-items: stretch; /* Rozciąga kafelki, żeby wszystkie miały równą wysokość */
    padding: 20px 20px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow-x: auto; /* 4. Aktywuje pasek przewijania poziomego */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; /* Dodaje płynny, bezwładnościowy scroll na iOS */
}

.promo-badge {
    margin-top: 10px;
}

.ButtonOferToCart {
    margin-top: 0px;
    width: 69%; 
    height: 50px; /* Sztywna, ładna wysokość */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 0px; /* Równy odstęp między ikoną wózka a tekstem */
    border-radius: 6px; 
    cursor: pointer; 
    border: none; 
    background: rgba(48,135,255,0.1); /* Kinowy gradient */
    border: 1px solid rgba(48,135,255,0.4);
    color: #cde; 
    font-size: 16px; 
    font-weight: bold; 
    margin-left: 0px;     
    transition: all 0.3s
}

.ButtonOferToCart:hover {
    color: white;
     background: rgba(48,135,255,0.5);
     border: 1px solid rgba(255,255,255,0.6);
     box-shadow: 0 4px 15px rgba(48,135,255,0.5);
}



/* Kafelki z detalami (w prawej kolumnie) */
.backend-style-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}

.table-pricing {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 15px;
}
.table-pricing th { border-radius: 4px; color: rgba(255,255,255,0.5); font-weight: normal; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);  background-color: rgba(255,255,255,0.1);  }
.table-pricing tr { border-radius: 4px; background-color: rgba(0,0,0,0.1); }
.table-pricing td { border-radius: 4px; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); background-color: rgba(0,0,0,0.1); }


/* ========================================= */
/* --- 2. NOWA SIATKA KANAŁÓW (POZIOMA) ---  */
/* ========================================= */
.channels-grid {
    display: grid;
    /* Kafelki są teraz szersze, idealne na prostokąty */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

  /* ========================================= */
/* --- POPRAWIONY KAFELEK KANAŁU (SZKŁO) --- */
/* ========================================= */
.channel-card-row {
    /* Mocniejsze rozjaśnienie i wyraźniejsze szkło, żeby wybić się z tła */
    background: rgba(10, 20, 30, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px; /* Minimalnie bardziej zaokrąglone rogi */
    padding: 10px;
    padding-top: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 140px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Lekki cień, by oderwać kafelek od tła */
}

.channel-card-row:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(48, 135, 255, 0.8);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Numer + Nazwa u góry */
.ch-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
}
.ch-num { color: #3087ff; font-size: 16px; }
.ch-name { color: #abc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Środek: Kwadratowe Logo + Okrągłe Info */
.ch-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- POPRAWIONE LOGO (Większe) --- */
.ch-square-logo {
    width: 70px;  /* Znacznie powiększone */
    height: 70px; /* Znacznie powiększone */
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Delikatne podbicie tła dla logotypów, by zawsze były czytelne */
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.06) 70%);
    padding: 4px;
}

/* Nowa okrągła ikonka info */
.info-trigger-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 40px; 
    margin-left: 15px;
    transition: all 0.3s;
}
.info-trigger-circle:hover { background: #3087ff; color: #fff; }




/* --- GLOBALNY DYMEK (Odporny na przewijanie!) --- */
.flix-global-tooltip {
    visibility: hidden; 
    opacity: 0; 
    position: fixed; /* FIXED wyciąga go całkowicie z hierarchii DOM */
    top: 0; 
    left: 0;
    transform: translate(-50%, -100%); /* Środek osi X, a w osi Y podnosi się w 100% nad punkt zaczepienia */
    
    width: 220px;
    background: rgba(10, 15, 20, 0.95); 
    color: #fff; 
    text-align: center;
    padding: 10px; 
    border-radius: 6px; 
    font-size: 11px; 
    font-weight: normal;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 99999999999; 
    pointer-events: none; /* Kursor przez niego przenika, żeby nie blokował scrollowania */
    
    /* Płynne pojawianie się (bez transformacji pozycji, żeby nie "leciał" z rogu ekranu) */
    transition: opacity 0.2s ease, visibility 0.2s;
}

/* Mały trójkącik pod dymkiem */
.flix-global-tooltip::after {
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px;
    border-width: 5px; 
    border-style: solid; 
    border-color: rgba(10, 15, 20, 0.95) transparent transparent transparent;
}

/* Klasa aktywująca dodawana przez JS */
.flix-global-tooltip.is-visible {
    visibility: visible;
    opacity: 1;
}







/*  WSKAZNIKI SZYBKOSCI DLA KAFELKOW Z INTERNETEM */

/* GŁÓWNY KONTENER WSKAŹNIKA */
.flix-speed-gauge {
    position: relative;
    width: 100%;
    max-width: 200px; /* Maksymalna szerokość - możesz to nadpisywać inline, np. style="width: 150px" */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wektorowy SVG - nieskończona jakość */
.gauge-svg {
    width: 100%;
    height: auto;
    overflow: visible; /* Ważne! Pozwala poświacie (glow) wyjść poza granice obrazka */
}

/* Ciemny łuk w tle */
.gauge-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05); /* Leciutko widoczne szare tło wskaźnika */
    stroke-width: 10;
    stroke-linecap: round; /* Zaokrąglone końcówki łuku */
}

/* Niebieski, animowany łuk */
.gauge-fill {
    fill: none;
    stroke: #3087ff; /* Kolor "Młodego" */
    stroke-width: 10;
    stroke-linecap: round;
    
    /* Magia SVG: obwód naszego łuku to ~126. Domyślnie go ukrywamy (offset = 126) */
    stroke-dasharray: 126;
    stroke-dashoffset: 126; 
    
    /* Płynna animacja rysowania łuku */
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Neonowa poświata na łuku */
    filter: drop-shadow(0px 0px 8px rgba(48, 135, 255, 0.6));
}

/* KONTENER NA TEKST W ŚRODKU */
.gauge-text {
    position: absolute;
    bottom: 0px; /* Wyrównanie do dolnej krawędzi łuku */
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gauge-value {
    font-size: 28px; /* Rozmiar dostosuje się ładnie dzięki flexowi */
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

.gauge-unit {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    margin-top: 2px;
}













/* Dymek z opisem przepięty pod kółeczko */
.css-tooltip { /* Ten sam kod dymku co wcześniej, tylko wewnątrz info-trigger-circle */
    visibility: hidden; opacity: 0; position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px); width: 220px;
    background: rgba(10, 15, 20, 0.95); color: #fff; text-align: center;
    padding: 10px; border-radius: 6px; font-size: 11px; font-weight: normal;
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 99999999999; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
}
.css-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: rgba(10, 15, 20, 0.95) transparent transparent transparent;
}
.info-trigger-circle:hover .css-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-5px); }

    /* --- WYRÓWNANIE IKONEK W NAROŻNIKU --- */
.ch-badges-corner {
    position: absolute;
    bottom: 15px; /* Dopasowane do paddingu kafelka */
    right: 15px;  /* Dopasowane do paddingu kafelka */
    display: flex;
    align-items: center; /* Perfekcyjne wyrównanie w pionie względem siebie */
    gap: 6px;
    background-color: rgba(10, 20, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 25px; 
    padding: 5px 5px;
}

.info-trigger-genres {
    position: absolute;
    bottom: 60px; /* Dopasowane do paddingu kafelka */
    right: 15px;  /* Dopasowane do paddingu kafelka */
    display: flex;
    align-items: center; /* Perfekcyjne wyrównanie w pionie względem siebie */
    gap: 6px;
    background-color: rgba(10, 20, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 20px; 
    padding: 0px 0px;  
    text-transform: uppercase;
}

.info-trigger-genres .GenreName {
     font-size: 12px; 
     padding: 0px 8px; 
     color: #89a;
     font-weight: 600;
}

.badge-icon {
    font-size: 16px;
    padding: 3px 6px; /* Lepsze proporcje odznak */
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Zapobiega rozjeżdżaniu się wysokości */
}

.badge-hd{
    font-size: 14px;
    color: #89a;
}

.badge-catchup-div {
    border-left: 1px solid rgba(255, 255, 255, 0.1); 
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 0 10px;
}


.ToUpperBtn {
    position: absolute; 
    left: 50%; bottom: 70px; 
    width:30px; height: 30px;  
    border-radius: 20px;
    border: 0px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.0);
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s;
    transform: rotate(90deg);
    font-weight: 500;
    font-color: #789;
}
.ToUpperBtn:hover {
    background-color: rgba(20, 40, 60, 0.0); 
    transform: scale(1.08);
    bottom: 75px;
    transition: all 0.3s;
    transform: rotate(90deg);
    font-weight: 800;
    font-color: #fff;
}

.TuUpperIcon{  
    font-size:40px;
}


.SubAbonBtnContainer {
    width:100%; 
    position: relative; 
    top: 0px; right: 20px; 
    display: flex; flex-direction: row; 
    justify-content: flex-end; 
    padding: 0 0; margin: 0 0; 
    gap: 8px; 
    margin-bottom: 0px;
}

.SubAbonBtnContainer .BtnSubAbon {
    margin: 0 0; 
    font-size: 13px; 
    display: flex; flex-direction: row; justify-content: center; 
    border: 1px solid rgba(48, 135, 255, 0.15); 
    background: rgba(10, 20, 30, 0.6); 
    border-radius: 6px;
    transition: all 0.3s;
    padding: 0px 20px;
}

.SubAbonBtnContainer .BtnSubAbon:hover {
    border: 1px solid rgba(255, 255, 255, 0.4); 
    background: rgba(48, 135, 255, 0.5); 
    border-bottom: 3px solid rgba(255, 255, 255, 0.6); 
    transform: scale(1.02);
}

.SubAbonBtnContainer .BtnSubAbonActiv  {
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-bottom: 3px solid #3087ff;
    background: rgba(10, 20, 30, 0.6); 
}

.SubAbonBtnContainer .BtnSubAbonDisabled {
    margin: 0 0; 
    font-size: 13px; 
    display: flex; flex-direction: row; justify-content: center; 
    border: 1px solid rgba(48, 135, 255, 0.2); 
    background: rgba(10, 20, 30, 0.2); 
    color: #567;
    border-radius: 6px;;
}

.FlixOffersScrollBtn {
    z-index: 999999; 
    height:100px; 
    width: 40px; 
    background: none; 
    margin: 0 0; 
    position: relative; top:100px;
    border: 1px solid rgba(48, 135, 255, 0.4); 
    background: rgba(48, 135, 255, 0.15); 
    border-radius: 8px;
    transition: all 0.3s;
    color: #3087ff;
}
.FlixOffersScrollBtn:hover {
    border: 1px solid rgba(255, 255, 255, 0.3); 
    background: rgba(48, 135, 255, 0.4); 
    color: #ffffff; 
}


.PageScrollArrowLeft {
    border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 0px; border-top-left-radius: 0px;
    background: rgba(10, 20, 30, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 80px;
}
.PageScrollArrowRight {
    border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 25px; border-top-left-radius: 25px;
    background: rgba(10, 20, 30, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 80px;
}


/* GŁÓWNY KONTENER PARAGON NA KAFELKACH SUB OFERTY (Jasne, półprzezroczyste tło) */
.receipt-wrapper {
    width: 100%;
    max-width: 400px;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.05); /* Jasne szkło */
    backdrop-filter: blur(10px); /* Opcjonalne: fajny efekt rozmycia tego co pod spodem */
    -webkit-backdrop-filter: blur(10px);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* WIERSZE (Ciemne, półprzezroczyste tło) */
.receipt-row {
    display: flex;
    justify-content: space-between; /* To zaklęcie rozsuwa tekst na boki! */
    align-items: center; /* Wyśrodkowuje tekst w pionie */
    background: rgba(0, 0, 0, 0.2); /* Ciemne tło */
    padding: 0px 6px 0px 6px;
    margin-bottom: 2px;
    border-radius: 4px;
    
    /* Leciuteńkie podkreślenie (dół) */
    border-bottom: 1px solid rgba(255, 255, 255, 0); 
    
    color: #ffffff;
    font-size: 14px;
}

/* Usuwamy dolny margines i kreskę z ostatniego elementu, żeby było ładniej */
.receipt-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* Opcjonalne stylowanie samych tekstów */
.item-name {
    color: rgba(200, 220, 255, 0.8);
}

.item-price {
    font-weight: 100;
    color: #3087ff; /* Twój niebieski akcent */
}














/* GOOGLE STARS REVIEW */

.reviews-section { 
    width: 100%;
    min-height: 500px;  
    text-align: center; 
    background: linear-gradient(to top, rgba(50, 70, 90, 1), rgba(0, 0, 0, 0)), url('img/000000-black-bg-0.8.png'); 
    position: relative; 
    margin-top: 50px;
    margin-bottom: 0px;
    padding-bottom: 10px;
}
.reviews-title { color: #fff; font-size: clamp(3rem, 3.5vw, 2rem); margin-bottom: 10px; letter-spacing: -1px; }
.reviews-subtitle { color: #abc; margin-bottom: 40px; }













/* KONTENER PRZEWIJANY DLA KAFELKOW SPRZETU */
.hw-horizontal-scroll {
    overflow-x: auto; /* Włącza poziomy pasek przewijania */
    overflow-y: hidden; /* Ukrywa ewentualne pionowe suwaki */
    padding: 10px 5px 25px 5px; /* Ważne: Dolny padding robi miejsce na pasek i cienie kafelków! */
    width: 100%;
    
    /* Opcjonalnie: Płynne przewijanie na telefonach */
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch;
}

/* BLOKADA KURCZENIA SIĘ KAFELKÓW (Naprawia najeżdżanie na siebie) */
.hw-horizontal-scroll .hw-card-glass {
    flex: 0 0 auto; /* Magiczne zaklęcie: nie rośnij, NIE KURCZ SIĘ, trzymaj swój rozmiar */
    width: 320px; /* Ustaw tu stałą szerokość kafelka, żeby były równe */
    min-height: 450px; /* Żeby wszystkie miały tę samą bazową wysokość */
}

/* NOWOCZESNY PASEK PRZEWIJANIA (Webkit) */
.hw-horizontal-scroll::-webkit-scrollbar {
    height: 8px; /* Cienki pasek */
}

.hw-horizontal-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); /* Ciemne tło ścieżki */
    border-radius: 10px;
}

.hw-horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(48, 135, 255, 0.5); /* Niebieski suwak nawiązujący do Twoich buttonów */
    border-radius: 10px;
}

.hw-horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 135, 255, 0.8); /* Jasniejszy przy najechaniu */
}


/* WYMUSZENIE UKŁADU POZIOMEGO DLA SIATKI W PANELU PRZEWIJANYM */
.hw-horizontal-scroll .hardware-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* To zaklęcie zabrania zawijania do nowej linii! */
    gap: 10px;
    width: max-content; /* Pozwala kontenerowi rosnąć w nieskończoność w prawo */
    margin-top: 0;
}


/* GŁÓWNY KONTENER SIATKI (GRID) DLA SPRZĘTU
.hardware-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}                                */ 

/* KAFELEK SPRZĘTU (SZKŁO) */
.hw-card-glass {
    display: flex;
    flex-direction: column; /* Ustawia elementy w pionie */
    background: rgba(255, 255, 255, 0.08); /* Nasze sprawdzone szkło */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    min-height: 400px; /* Minimalna wysokość, żeby kafelki ładnie wyglądały w rzędzie */ 
    transition: all 0.3s;
}

.hw-card-glass:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(48, 135, 255, 0.6);
    background: rgba(48, 135, 255, 0.2); 
}

/* ZDJĘCIE SPRZĘTU */
.hw-img-container {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    background: rgba(50, 70, 90, 0.7); /* Lekkie przyciemnienie pod zdjęcie */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 6px;
    box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.3);
}

.hw-img-container img {
    margin: 0px;
    width: 100%;
    height: 100%;
    /*object-fit: contain;  Gwarantuje, że zdjęcie nie zostanie ucięte ani zniekształcone */
    
}

/* OPISY I TYTUŁY */
.hw-title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.hw-brand {
    color: #3087ff;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.hw-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1; /* Pozwala opisowi zająć resztę wolnego miejsca */
}

/* SEKCJA CENOWA (Zepchnięta na dół przez margin-top: auto) */
.hw-pricing-section {
    margin-top: auto; 
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.hw-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hw-price-label {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.hw-price-val {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

/* Wyróżnienie ceny dzierżawy */
.hw-lease-val {
    color: #3087ff;
    font-size: 20px;
}



 
 




















/* ========================================= */
/* 1. GŁÓWNA SIATKA I ZABEZPIECZENIA       ---- slider screanow aplikacji*/    
/* ========================================= */
.flix-info-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.flix-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Magiczne zaklęcie blokujące rozpychanie siatki przez duże zdjęcia */
.flix-grid-left, .flix-grid-right {
    min-width: 0; 
    width: 100%;
}

@media (max-width: 1300px) {
    .flix-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================= */
/* 2. SLIDER (Pozioma taśma) */
/* ========================================= */
.flix-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 35px;
}

.flix-slider-track {
    display: flex; /* TO JEST KLUCZ: Układa zdjęcia poziomo */
    flex-direction: row;
    gap: 15px;
    overflow-x: auto; /* Ukrywa to, co wychodzi poza ramkę */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    
    /* Ukrywanie paska przewijania */
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
.flix-slider-track::-webkit-scrollbar { 
    display: none; 
}

.flix-slide-img {
    flex: 0 0 100%; /* Zmusza zdjęcie do zajęcia 100% szerokości RAMKI, a nie 1920px */
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    scroll-snap-align: center;
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.flix-slide-img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(48,135,255,0.4);
}

/* Przyciski nawigacyjne slidera */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 60px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
    padding: 10px 5px;
}
.slider-nav-btn:hover { background: rgba(48,135,255,0.4); }
.slider-nav-btn.prev { left: 5px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 30px; border-top-left-radius: 30px;}
.slider-nav-btn.next { right: 5px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 2px; border-top-left-radius: 2px;}


/* ========================================= */
/* 3. LIGHTBOX (Galeria Pełnoekranowa) */
/* ========================================= */
.flix-lightbox {
    display: none;
    position: fixed;
    z-index: 999999999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 15, 20, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.flix-lightbox.is-active {
    display: flex;
    opacity: 1;
}

.lightbox-content-wrapper {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    text-align: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: contain;
}

.lightbox-caption {
    color: rgba(255,255,255,0.7);
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 1px;
}

.lightbox-close {
    position: absolute;
    top: 20px; right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 2;
}
.lightbox-close:hover { color: #3087ff; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 50px;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    padding: 20px;
}
.lightbox-nav:hover { color: #fff; transform: translateY(-50%) scale(1.1); }
.lightbox-prev { left: 2%; }
.lightbox-next { right: 2%; }


/* ========================================= */
/* 4. TEKSTY I BUTTONY APLIKACJI (Prawa strona)*/
/* ========================================= */
.flix-feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.flix-feature-list li {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.flix-feature-list i {
    color: #3087ff;
    font-size: 18px;
    width: 25px;
    margin-right: 10px;
    text-align: center;
}

.flix-app-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.btn-app-download {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-app-download i {
    font-size: 24px;
    margin-right: 12px;
}

.btn-app-download:hover {
    background: rgba(48, 135, 255, 0.2);
    border-color: #3087ff;
    transform: translateY(-3px);
}

.btn-app-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.btn-app-text span:first-child {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

.btn-app-text span:last-child {
    font-size: 15px;
    font-weight: bold;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 








/* Responsywność dla kolumn */
@media (max-width: 1120px) {
    .package-summary-wrapper { grid-template-columns: 1fr; }
}



/* Responsywność dla kolumn */
@media (max-width: 600px) {
    .HideOnMobileDevice {
    display: none;
}

/* ========================================= */
/* --- 1. GŁÓWNY BOX PAKIETU (PODZIAŁ 50/50) */
/* ========================================= */
.package-summary-wrapper {
    
    gap: 20px;
    padding: 15px;
    margin-bottom: 30px;
}

}