/* ==========================================================================
   OFICJALNY ZINTEGROWANY INTERFEJS PREMIUM VOD NEDDS24.PL (video.css)
   ========================================================================== */

/* --- 1. KOREKTA LAYOUTU I CENTROWANIA FORUM --- */
.main-video-catalog-container {
    width: 100% !important;
    max-width: 100% !important; /* Usunięcie limitu 1170px - rozciągamy na maksa */
    margin: 20px 0 !important;
    padding: 0 40px !important; /* Bezpieczny, elegancki odstęp od lewej i prawej krawędzi ekranu */
    box-sizing: border-box !important;
    float: left !important; /* Wymuszenie równego przyciągania do lewej strony */
    clear: both !important;
}

.video-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; /* Elastyczne kafelki: automatycznie dopasują się od 4 do nawet 6 w rzędzie na wielkich ekranach */
    gap: 20px !important; /* Większy, nowoczesny odstęp między okładkami */
    width: 100% !important;
    box-sizing: border-box !important;
}

.catalog-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

.catalog-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

/* --- 2. NOWY DWUKOLUMNOWY UKŁAD PANORAMICZNY (450PX) --- */
.video-top-portal-layout {
    display: flex !important;
    flex-direction: row !important; /* Pozycja obok siebie */
    gap: 20px !important; /* Elegancki, luksusowy odstęp panoramiczny */
    margin: 20px 0 24px 0 !important;
    width: 100% !important;
    align-items: stretch !important; /* Wymuszenie matematycznie równego spodu obu boksów */
    box-sizing: border-box !important;
}

/* --- 3. ORYGINALNY KOD SLIDERA ZE STRONY VIDEO (ZMODYFIKOWANY POD FLEX) --- */
.video-slider-wrapper {
    position: relative !important;
    width: 75% !important; /* Zablokowanie proporcji kinowej */
    flex-grow: 1 !important;
    height: 450px !important; /* Oryginalna wysokość Twojego suwaka */
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    background-color: #000 !important;
    order: 1 !important;
}

/* Ukrycie domyślnych inputów radio */
.video-slider-wrapper input[name="slider-control"] {
    display: none !important;
}

/* Kontener trzymający slajdy nakładające się na siebie */
.video-slides-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Pojedynczy slajd - domyślnie niewidoczny i przezroczysty */
.video-slide-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out !important;
}

/* Nakładka przyciemniająca tło dla czytelności tekstu */
.video-slide-overlay {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.2) 100%) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10% !important;
    box-sizing: border-box !important;
}

/* Treść wewnątrz slajdu */
.video-slide-content {
    max-width: 500px !important;
    color: #fff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.video-slide-content h2 {
    font-size: 2.5rem !important;
    margin: 10px 0 15px 0 !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

.video-slide-content p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    color: #e0e0e0 !important;
}

/* Odznaki (Badges) */
.slide-badge-new, .slide-badge-premium {
    display: inline-block !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}
.slide-badge-new { background-color: #e74c3c !important; }
.slide-badge-premium { background-color: #f1c40f !important; color: #000 !important; }

/* Przycisk akcji */
.btn-slide-watch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    background-color: #00bcd4 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    transition: background 0.3s !important;
}
.btn-slide-watch:hover { background-color: #0097a7 !important; text-decoration: none !important; color: #fff !important; }

/* Kropki / Paski nawigacyjne */
.video-slider-dots {
    position: absolute !important;
    bottom: 20px !important;
    right: 40px !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.video-slider-dots label {
    width: 35px !important;
    height: 6px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: background-color 0.3s, transform 0.3s !important;
}

.video-slider-dots label:hover {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

/* Efekt FADE dla 6 slajdów */
#slide1:checked ~ .video-slides-container .video-slide-item:nth-child(1),
#slide2:checked ~ .video-slides-container .video-slide-item:nth-child(2),
#slide3:checked ~ .video-slides-container .video-slide-item:nth-child(3),
#slide4:checked ~ .video-slides-container .video-slide-item:nth-child(4),
#slide5:checked ~ .video-slides-container .video-slide-item:nth-child(5),
#slide6:checked ~ .video-slides-container .video-slide-item:nth-child(6) {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
}

/* Aktywna kropka */
#slide1:checked ~ .video-slider-dots label[for="slide1"],
#slide2:checked ~ .video-slider-dots label[for="slide2"],
#slide3:checked ~ .video-slider-dots label[for="slide3"],
#slide4:checked ~ .video-slider-dots label[for="slide4"],
#slide5:checked ~ .video-slider-dots label[for="slide5"],
#slide6:checked ~ .video-slider-dots label[for="slide6"] {
    background-color: #00bcd4 !important;
    transform: scaleX(1.1) !important;
}

/* --- 4. PANEL AKTUALNOŚCI PO PRAWEJ STRONIE (DOPASOWANY DO 450PX) --- */
.video-portal-sidebar {
    width: 25% !important; /* Zmiana ze sztywnego 300px na elastyczne 25% szerokości portalu */
    min-width: 280px !important; /* Bezpieczna granica, aby tekst ogłoszeń się nie łamał */
    height: 450px !important; /* Dokładne zrównanie wysokości ze suwakiem */
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    padding: 20px !important; /* Większy komfort przestrzeni dla tekstu premier */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}


.video-portal-sidebar h4 {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.video-portal-sidebar h4 i { color: #ffb703 !important; }
.sidebar-news-list { display: flex !important; flex-direction: column !important; gap: 8px !important; overflow-y: auto !important; }
.news-item { background-color: #0b0b0b !important; border: 1px solid #1f1f1f !important; border-radius: 6px !important; padding: 10px 14px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.news-item .news-date { font-size: 10px !important; color: #555555 !important; font-weight: bold !important; }
.news-item .news-title { font-size: 12px !important; color: #ffffff !important; font-weight: 600 !important; }
.news-item .news-status { font-size: 9px !important; font-weight: bold !important; color: #00a8ff !important; text-transform: uppercase !important; }

/* --- 5. SIATKI I STATYSTYKI --- */
.video-global-stats-bar { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 20px 0 24px 0 !important; box-sizing: border-box !important; }
.global-stat-box { background-color: #141414 !important; border: 1px solid #222222 !important; border-radius: 6px !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; gap: 14px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; box-sizing: border-box !important; }
.stat-box-info { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.stat-box-info .s-val { font-size: 16px !important; font-weight: bold !important; color: #ffffff !important; line-height: 1.2 !important; }
.stat-box-info .s-lbl { font-size: 9px !important; color: #555555 !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; }

.catalog-section { margin-bottom: 35px !important; width: 100% !important; box-sizing: border-box !important; }

.video-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; width: 100% !important; box-sizing: border-box !important; }

.video-card { background-color: #141414 !important; border: 1px solid #222222 !important; border-radius: 8px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important; transition: transform 0.2s ease, border-color 0.2s ease !important; box-sizing: border-box !important; }

.video-card:hover { transform: translateY(-4px) !important; border-color: #333333 !important; }

.card-image-wrapper { position: relative !important; width: 100% !important; padding-top: 56.25% !important; background-color: #0b0b0b !important; border-radius: 4px !important; overflow: hidden !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }

.card-image-wrapper i { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; }

.card-badge { position: absolute !important; top: 8px !important; left: 8px !important; font-size: 9px !important; font-weight: bold !important; background-color: #00a8ff !important; color: #ffffff !important; padding: 2px 6px !important; border-radius: 3px !important; text-transform: uppercase !important; z-index: 5 !important; }

.card-info { padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }

.card-info h4 { margin: 0 !important; font-size: 14px !important; font-weight: bold !important; color: #ffffff !important; }

.video-card:hover .card-info h4 { color: #00a8ff !important; }

.card-info p { margin: 0 !important; font-size: 11px !important; color: #666666 !important; line-height: 1.4 !important; }

/* --- 6. ATRAKCYJNE TŁA DLA SLAJDÓW STRONY VIDEO2 --- */
.video-slides-container .video-slide-item:nth-child(1) { background-image: url(https://nedds24.pl) !important; }
.video-slides-container .video-slide-item:nth-child(2) { background-image: url(https://nedds24.pl) !important; }
.video-slides-container .video-slide-item:nth-child(3) { background-image: url(https://nedds24.pl) !important; }
.video-slides-container .video-slide-item:nth-child(4) { background-image: url(https://nedds24.pl) !important; }
.video-slides-container .video-slide-item:nth-child(5) { background-image: url(https://nedds24.pl) !important; }
.video-slides-container .video-slide-item:nth-child(6) { background-image: url(https://nedds24.pl) !important; }

.sidebar-news-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: 100% !important;
    overflow-y: auto !important; /* Bezpieczny scroll, jeśli dodasz bardzo dużo newsów */
    box-sizing: border-box !important;
}

.news-item {
    background-color: #0b0b0b !important;
    border: 1px solid #1f1f1f !important;
    border-radius: 6px !important;
    padding: 12px 16px !important; /* Zwiększony padding dla luksusowego wyglądu */
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

/* --- 7. RESPONSYWNOŚĆ MOBILNA (RWD) --- */
@media (max-width: 950px) {
    .video-top-portal-layout { flex-direction: column !important; }
    .video-slider-wrapper { height: 300px !important; order: 1 !important; }
    .video-portal-sidebar { width: 100% !important; height: auto !important; order: 2 !important; }
    .video-global-stats-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}
@media (max-width: 768px) {
    .catalog-top-bar { flex-direction: column !important; gap: 10px !important; }
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}
@media (max-width: 480px) {
    .video-global-stats-bar { grid-template-columns: 1fr !important; }
}