/* =========================================
   GLOBALNE STYLE DLA WIDGETU
   ========================================= */

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Blokujemy scrollbar strony, bo scrolluje nasz wrapper */
}

/* Główny kontener slidera - FIX NA PRZESUNIĘCIE */
.my-awesome-swiper {
    position: fixed; /* KLUCZOWE: Odrywamy go od struktury Elementora */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Ustawiamy nisko, żeby menu (jeśli masz sticky) było nad nim */
    margin: 0;
    padding: 0;
}

/* FIX: Jeśli jesteś zalogowany (masz czarny pasek WP na górze),
   przesuwamy slider w dół i zmniejszamy go */
body.admin-bar .my-awesome-swiper {
    top: 32px; /* Odsunięcie od góry o wysokość paska */
    height: calc(100vh - 32px);
}

/* Pojedynczy slajd */
.swiper-slide {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Tło (dla standardowych slajdów - zdjęcia) */
.slide-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Przyciemnienie tła */
.seb-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: rgba(0,0,0,0.4); 
}

/* =========================================
   TREŚĆ TEKSTOWA (TYTUŁY, KATEGORIE)
   ========================================= */
.seb-content {
    position: relative;
    z-index: 10; /* Musi być na wierzchu */
    padding: 20px;
    max-width: 800px;
    pointer-events: none; /* Żeby napisy nie blokowały klikania w tło/grę */
}

/* Przywracamy klikalność dla elementów interaktywnych w treści */
.seb-content a, .seb-content h2, .seb-content div {
    pointer-events: auto; 
}

/* Typografia */
.seb-cat {
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-size: 14px;
}

.seb-title {
    margin: 0 0 30px 0;
    line-height: 1.1;
    font-size: 60px; 
}

.seb-btn {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    transition: 0.3s;
}

/* =========================================
   STYLE DLA WIDGETU INTERAKTYWNEGO (SHORTCODE)
   ========================================= */

.slide-widget-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    
    /* Układ flex, ale pozwalający na scrollowanie */
    display: flex;
    flex-direction: column;
    align-items: center; /* Wyśrodkowanie w poziomie */
    justify-content: flex-start; /* Zaczynamy od góry */
    
    /* Przezroczyste tło */
    background: transparent; 
    
    /* Pozwalamy na scrollowanie wewnątrz slajdu */
    overflow-y: auto; 
    
    /* Margines górny (miejsce na menu). Dzięki transparentnemu tłu nie widać paska */
    padding-top: 100px; 
    padding-bottom: 50px;
    
    /* Stylizacja scrollbara (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

/* Stylizacja paska przewijania (Chrome/Safari/Edge) */
.slide-widget-container::-webkit-scrollbar {
    width: 8px;
}

.slide-widget-container::-webkit-scrollbar-track {
    background: transparent; 
}

.slide-widget-container::-webkit-scrollbar-thumb {
    background-color: #555; 
    border-radius: 4px; 
}

/* Wewnętrzny kontener na Twój blok HTML/Elementor */
.widget-inner {
    width: 100%;
    max-width: 1400px; /* Szerokość maksymalna treści */
    height: auto;
    min-height: auto;
    position: relative;
    padding: 0 20px; /* Marginesy boczne na telefonach */
    margin: 0 auto; /* Wyśrodkowanie bloku */
}

/* Jeśli w środku jest sekcja Elementora, niech zajmie pełną szerokość */
.widget-inner .elementor-section {
    width: 100%;
}

/* =========================================
   PAGINACJA (KRESECZKI + MINIATURKI)
   ========================================= */

/* Kontener paginacji */
.swiper-pagination {
    bottom: 30px !important; 
    display: flex !important;
    justify-content: center;
    align-items: flex-end; /* Wyrównanie do dołu, żeby kreseczki były w jednej linii */
}

/* Styl pojedynczego kontenera kreski */
.swiper-pagination-bullet {
    position: relative;
    width: 30px !important;      
    height: 15px !important;     /* Większa wysokość ułatwia kliknięcie/hover myszką */
    background: transparent !important; /* Tło przezroczyste, żeby nie psuć miniaturki */
    opacity: 1 !important;       /* Pełna widoczność, sterujemy przezroczystością samej kreski poniżej */
    border-radius: 0 !important; 
    margin: 0 6px !important;    
    display: flex;
    align-items: flex-end;
    transition: all 0.3s ease;   
}

/* SAMA KRESKA (tworzona jako element ::after) */
.swiper-pagination-bullet::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    opacity: 0.3;
    transition: all 0.3s ease;
}

/* AKTYWNA KRESKA */
.swiper-pagination-bullet-active {
    width: 50px !important;
}
.swiper-pagination-bullet-active::after {
    opacity: 1; /* Aktywna mocniej świeci */
}

/* =========================================
   MINIATURKI W PAGINACJI
   ========================================= */

.seb-thumb {
    position: absolute;
    bottom: 20px; /* Odsunięcie nad kreseczką */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Domyślnie lekko wsunięte w dół */
    width: 90px;
    height: 56px;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden; /* Ukryte by default */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    pointer-events: none; /* Żeby miniaturka nie blokowała kliknięcia w slider */
}

/* Animacja pojawiania się miniatury (przy najechniu LUB przytywnym slajdzie) */
.swiper-pagination-bullet:hover .seb-thumb,
.swiper-pagination-bullet-active .seb-thumb {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Płynnie wyjeżdża w górę */
}

/* Wyłączenie miniaturek na telefonach (zostają same kreski) */
@media (max-width: 1024px) {
    .seb-thumb {
        display: none !important;
    }
}

/* =========================================
   STRZAŁKI NAWIGACJI (POPRAWIONE)
   ========================================= */

.swiper-button-next, .swiper-button-prev {
    color: #fff !important;       /* Wymuszamy biel */
    width: 60px;                  /* Większe pole kliknięcia */
    height: 60px;
    z-index: 50 !important;       /* Musi być nad widgetami 3D! */
    transition: all 0.3s ease;
    opacity: 0.5;                 /* Domyślnie lekko przezroczyste */
}

/* Odsunięcie od krawędzi ekranu */
.swiper-button-next { right: 30px !important; }
.swiper-button-prev { left: 30px !important; }

/* Styl samej "dzióbka" */
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 24px !important;   /* Rozmiar ikony */
    font-weight: bold;
}

/* Hover - rozświetlenie i powiększenie */
.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* UKRYWANIE NA MOBILE I TABLETACH */
@media (max-width: 1024px) {
    .swiper-button-next, .swiper-button-prev {
        display: none !important;
    }
}

/* Główny kontener slidera - FIX NA TŁO I POZYCJĘ */
.my-awesome-swiper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    margin: 0;
    padding: 0;
    
    /* TO JEST NOWOŚĆ: */
    background-color: #000; /* Ustawiamy czarne tło, żeby efekt 3D nie pokazywał bieli pod spodem */
}