/*
Theme Name: SmartMag Child
Theme URI: https://smartmag.theme-sphere.com/
Description: A child theme of SmartMag
Author: ThemeSphere
Author URI: https://theme-sphere.com
Template: smart-mag
Version: 1.1
*/









  /* Pseudoelement do dodania napisu "WYBIERAM" na miniaturce na stronie głównej */
  .elementor-element-a160a10 .image-link.media-ratio.ratio-3-4::after {
    content: "WYBIERAM";              /* Tekst do wyświetlenia */
    position: absolute;               /* Pozycjonowanie tekstu */
    bottom: 10px;                     /* Przyklejenie tekstu do dolnej krawędzi */
    left: 50%;                        /* Wyśrodkowanie tekstu */
    transform: translateX(-50%);      /* Precyzyjne wyśrodkowanie */
    color: yellow;                     /* Kolor tekstu */
    font-size: 16px;                  /* Mały rozmiar tekstu */
    font-weight: bold;                /* Pogrubienie tekstu */
    text-align: center;               /* Wyśrodkowanie tekstu */
    background-color: rgba(255, 0, 0, 0.7); /* Czerwone tło z przezroczystością */
    padding: 5px 10px;                /* Odstępy wokół tekstu */
    border-radius: 5px;               /* Zaokrąglone rogi */
  }


  /* Wygląd linków tytułowych we wtyczce Content Views */

/* Domyślny wygląd linku */
.pt-cv-title a {
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* ===== DESKTOP / PC ===== */
.pt-cv-view .pt-cv-title {
    font-size: 15px;
    line-height: 1.3;
     text-align: center;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .pt-cv-view .pt-cv-title {
        font-size: 14px;
        line-height: 1.25;
         text-align: center;
    }
}



  /* Wygląd tytułów kategorii */

.komisariat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.komisariat-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #171476;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.komisariat-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}

.szpital-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.szpital-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #0085a1;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.szpital-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}

.kostnica-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.kostnica-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #422835;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.kostnica-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}

.remiza-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.remiza-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #ff7500;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.remiza-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}

.koszary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.koszary-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #565531;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.koszary-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}

.zoo-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.zoo-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #0a5cbf;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.zoo-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}

.czytelnia-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
}

.czytelnia-title {
        font-size: clamp(32px, 6vw, 96px);
        font-weight: 900;
        color: #000000;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
}

.czytelnia-image img {
    padding-top: 20px;
        max-width: 40vw;
        height: auto;
        display: block;
}




.tag-title {
        width: 100%;
}

.tag-header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-top: 20px;
}

.tag-icon img {
        width: clamp(60px, 5vw,60px);
        height: auto;
        display: block;
}

.tag-heading {
        font-size: clamp(28px, 5vw, 60px);
        font-weight: 900;
        color: #000000;
        text-transform: uppercase;
        line-height: 1;

}

.tag-description {
        margin-top: 12px;
        font-size: clamp(12px, 2vw, 16px);
        line-height: 1.5;
        color: #444;
        text-align: justify;
        max-width: 800px;
}



/* === IKONKI DO DZIAŁOW NA GÓRZE PODSTRON === */
.title-button-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 100%;
  box-sizing: border-box;
  margin-top: -15px;
}

/* === BOX === */
.title-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
   border-radius: 5px;
}

.title-button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.35);
}

/* === LINK === */
.title-button a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* === IKONA === */
.title-button-icon {
  width: 56px;
  height: 56px;
  margin: 0;
  display: block;

  -webkit-user-drag: none;
  user-drag: none;
}


/* === TEKST === */
.title-button-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;          /* KLUCZOWE */
  margin: 2px 0 0;         /* minimalny odstęp */
  padding: 0;              /* usuwa domyślne paddingi */
  text-align: center;
  color: #000;
  word-break: break-word;
}

/* === TELEFONY === */
@media (max-width: 768px) {
  .title-button-icon {
    width: 44px;
    height: 44px;
  }

  .title-button-name {
    font-size: 9px;
    padding-bottom: 15px;
  }
}

@media (max-width: 768px) {

  .title-button {
    height: 100px; /* HARD LIMIT */
  }

  .title-button a {
    height: 100%;
    justify-content: center;
  }

  .title-button-icon {
    width: 44px;
    height: 44px;
  }

  .title-button-name {
    font-size: 9px;
    line-height: 1;
    margin-top: 1px;
      padding-bottom: 15px;
  }
}











/* Po najechaniu myszką */
.pt-cv-title a:hover {
    color: #7a0000; /* krwisty bordowy */
    text-decoration: underline;
}


.pt-cv-pagination-wrapper {
  text-align: center;
}



/* Kontener z obrazkiem i tekstem */
.stop-sign-contener {
    display: flex;
    align-items: center; /* Wyrównanie do środka w pionie */
    justify-content: center; /* Wycentrowanie całego kontenera */
    margin: 20px 0;
}

/* Kontener na obrazek */
.stop-sign-image-contener {
    display: flex; /* Ustawiamy kontener jako flex */
    justify-content: center; /* Wyrównanie w poziomie (pośrodku) */
    flex: 0 0 30%; /* Ustawiamy szerokość kontenera obrazka na 30% ekranu */
    padding-right: 20px; /* Przestrzeń między obrazkiem a tekstem */
}

/* Obrazek z efektem powiększenia i zmiany koloru */
.stop-sign-image {
    width: 120px; /* Obrazek zajmuje całą szerokość kontenera */
    height: auto; /* Zachowanie proporcji */
    animation: stop-image-animation 3s ease-in-out infinite; /* Animacja bounce i zmiana koloru */
}

/* Animacja powiększania, zmiany koloru i pojawiania się */
@keyframes stop-image-animation {
    0% {
        transform: scale(1);
        opacity: 0; /* Obrazek jest początkowo niewidoczny */
        filter: grayscale(100%); /* Obrazek jest czarno-biały */
    }
    50% {
        transform: scale(1.15); /* Obrazek powiększa się na chwilę */
        opacity: 1; /* Obrazek staje się widoczny */
        filter: grayscale(0%); /* Obrazek staje się kolorowy */
    }
    100% {
        transform: scale(1);
        opacity: 0; /* Obrazek znika z powrotem */
        filter: grayscale(100%); /* Obrazek znowu staje się czarno-biały */
    }
}


/* Kontener na tekst */
.stop-sign-text-container {
    flex: 1; /* Pozwalamy, aby tekst zajmował pozostałą część ekranu */
    text-align: center; /* Wycentrowanie tekstu w poziomie */
}

/* Duży czerwony tekst */
.stop-sign-big-text {
    font-size: 33px; /* Duży rozmiar czcionki */
    color: white;
    letter-spacing: 6px; /* Odstępy między literami */
    font-weight: bold;
    padding-right: 20px;
    margin: 0;
}

/* Mniejszy tekst pod spodem */
.stop-sign-small-text {
    font-size: 15px; /* Mniejszy rozmiar czcionki */
    color: orange;
    margin-top: 10px;
    padding-right: 20px;
    text-align: justify;
}

/* Dostosowanie do urządzeń mobilnych */
@media screen and (max-width: 768px) {
    /* Ustawiamy kontener obrazka na 50% szerokości */
    .stop-sign-image-contener {
        flex: 0 0 40%; /* Ustawiamy szerokość kontenera obrazka na 40% ekranu */
        padding-right: 10px;
    }

    /* Zmniejszenie rozmiaru obrazka na urządzeniach mobilnych */
    .stop-sign-image {
        width: 85px; /* Zmniejszamy rozmiar obrazka */
    }

    /* Zmniejszenie rozmiaru czcionki tytułu */
    .stop-sign-big-text {
        font-size: 15px; /* Mniejszy rozmiar czcionki */
        letter-spacing: 3px; /* Mniejsze odstępy między literami */
    }

    /* Zmniejszenie rozmiaru mniejszego tekstu */
    .stop-sign-small-text {
        font-size: 12px; /* Mniejszy rozmiar czcionki */
    }

    /* Dostosowanie kontenera na tekst */
    .stop-sign-text-container {
        flex: 1 1 60%; /* Kontener tekstu zajmuje 60% dostępnej szerokości */
        padding: 10px 0;
    }
}

























/* Stylowanie pierwszego tytułu w .post-meta dla .block-wrap .block-grid .block-sc .mb-none */
.loop-grid-base .post-title {
    font-size: 14px; /* Rozmiar czcionki */
    font-weight: bold; /* Pogrubienie */
    background: linear-gradient(90deg, #e30613, #8b0000); /* Gradient od jaskrawego czerwonego do ciemniejszego */
    -webkit-background-clip: text; /* Klipowanie tła do tekstu */
    color: transparent; /* Ukrycie domyślnego koloru, aby gradient działał */
    text-transform: uppercase; /* Wysoko ustawiona wielkość liter */
    letter-spacing: 1px; /* Dystans między literami */
    text-align: left; /* Wyrównanie tekstu do lewej */
    display: flex; /* Flexbox do układania ikony i tekstu */
    align-items: center; /* Wyrównanie ikonki z tekstem */
    gap: 10px; /* Odstęp między ikonką a tekstem */
    transition: color 0.3s ease; /* Płynna zmiana koloru przy hover */
}




/* Stylowanie tytułu widgetu w obrębie .post-meta .post-meta-a .post-meta-left */
.block-wrap.block-posts-small.block-sc.mb-none .post-title {
    background-image: linear-gradient(to right, #FFFF00, #FF8C00); /* Gradient od jaskrawego żółtego do ciemnej pomarańczy */
    -webkit-background-clip: text; /* Aplikowanie gradientu tylko na tekst */
    color: transparent; /* Ustawienie koloru na przezroczysty, aby gradient był widoczny */
    font-size: 12px; /* Rozmiar czcionki tytułu */
    font-weight: bold; /* Pogrubienie tytułu */
    text-transform: uppercase; /* Wszystkie litery wielkie */
    margin-bottom: 10px; /* Odstęp poniżej tytułu */
    transition: color 0.3s ease; /* Płynna zmiana koloru na hover */
}



/* Gradient od jaskrawego żółtego do ciemnej pomarańczy dla tytułów w sekcji elementor */
.elementor-element.elementor-element-c13078c.elementor-widget.elementor-widget-smartmag-grid .post-title {
    background-image: linear-gradient(to right, #FFFF00, #FF8C00); /* Gradient od jaskrawego żółtego do ciemnej pomarańczy */
    -webkit-background-clip: text; /* Aplikowanie gradientu tylko na tekst */
    color: transparent; /* Ustawienie koloru na przezroczysty, aby gradient był widoczny */
    font-size: 12px; /* Możesz dostosować rozmiar czcionki, jeśli potrzebujesz */
    font-weight: bold; /* Pogrubienie tytułu */
    text-transform: uppercase; /* Wszystkie litery wielkie */
    margin-bottom: 10px; /* Odstęp poniżej tytułu */
}


/* Gradient od jaskrawego niebieskiego do ciemniejszego niebieskiego dla tytułów w sekcji elementor */
.elementor-element.elementor-element-ffe97b3.elementor-widget.elementor-widget-smartmag-grid .post-title {
    background-image: linear-gradient(to right, #00FFFF, #003366); /* Gradient od jaskrawego niebieskiego do ciemniejszego niebieskiego */
    -webkit-background-clip: text; /* Aplikowanie gradientu tylko na tekst */
    color: transparent; /* Ustawienie koloru na przezroczysty, aby gradient był widoczny */
    font-size: 12px; /* Możesz dostosować rozmiar czcionki, jeśli potrzebujesz */
    font-weight: bold; /* Pogrubienie tytułu */
    text-transform: uppercase; /* Wszystkie litery wielkie */
    margin-bottom: 10px; /* Odstęp poniżej tytułu */
}





.block-head-e3:after {
    background: red; !important
}











/* Cała tabela */
.akta-table {
    width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
}


/* Wiersz z obrazem */
.akta-image-row {
    position: relative;
    width: 100%;
    height: 400px; /* Ustawiamy wysokość obrazu */
    overflow: hidden;
    border: 2px solid black;
}

.akta-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ustawienie obrazu na wypełnienie kontenera */
}

/* Tekst na dole zdjęcia */
.akta-text-overlay {
    position: absolute;
    bottom: 0;
    left: 20px; /* Przesunięcie 20px od lewej krawędzi */
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    border-top: 3px yellow solid;
    border-left: 3px yellow solid;
    border-right: 3px yellow solid;
    color: white;
    pointer-events: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    z-index: 2;
    background-color: #e30613;
    box-sizing: border-box;
    padding: 2px 10px;
    margin: 0;
}



/* Liczba ofiar - duży napis */
.akta-title {
    font-size: 80px; /* Jeszcze większy rozmiar tekstu MORDERCA */
    font-weight: bold; /* Pogrubienie */
    color: white; /* Zmieniamy kolor czcionki na biały */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Cień */
    animation: ilosc-ofiar-animacja 3s ease-in-out infinite;
    line-height: 1; /* Zmniejszamy przestrzeń wokół tekstu */
    margin: 0; /* Usuwamy marginesy */
}

.akta-subtitle {
    font-size: 24px; /* Większy rozmiar tekstu OFIAR */
    font-weight: bold; /* Pogrubienie */
    letter-spacing: 4px; /* Zwiększamy odstęp między literami */
    font-family: 'Roboto', sans-serif; /* Czcionka wyraźna */
    color: black; /* Zmieniamy kolor czcionki na biały */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6); /* Cień */
    line-height: 1; /* Zmniejszamy przestrzeń wokół tekstu */
    margin: 0; /* Usuwamy marginesy */
}

/* Animacja pulsowania tekstu */
@keyframes ilosc-ofiar-animacja {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Responsywność dla mniejszych ekranów */
@media (max-width: 768px) {
    .akta-image-row {
        height: 250px; /* Mniejsza wysokość obrazu na telefonach */
    }

    .akta-title {
        font-size: 50px; /* Mniejszy rozmiar tekstu MORDERCA na telefonach */
    }

    .akta-subtitle {
        font-size: 20px; /* Mniejszy rozmiar tekstu OFIAR na telefonach */
    }
}


/* Główny kontener dla akta-informacje */
.akta-informacje-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tworzymy dwie kolumny, ale elastyczne */
    gap: 20px; /* Odstęp między komórkami */
    margin: 20px;
    justify-items: center; /* Wyśrodkowanie komórek w poziomie */
}

/* Styl dla każdego wiersza */
.akta-informacje-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ustawiamy 2 kolumny */
    gap: 20px; /* Odstęp między kolumnami */
    justify-items: center; /* Wyśrodkowanie w poziomie */
}

/* Styl dla każdej kolumny */
.akta-informacje-column {
    display: flex;
    justify-content: center;
    align-items: center; /* Wyrównujemy zawartość w pionie */
}

/* Styl dla każdej komórki */
.akta-informacje-cell {
    display: flex;
    justify-content: center; /* Wyśrodkowanie w poziomie */
    align-items: center; /* Wyśrodkowanie w pionie */
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    width: 100%;
    height: 100px; /* Stała wysokość komórki */
    text-align: center; /* Wyśrodkowanie tekstu w poziomie */
    box-sizing: border-box; /* Upewniamy się, że padding nie wpłynie na szerokość */
}

/* Styl dla ikony */
.akta-informacje-icon {
    width: 24px; /* Stała szerokość ikony */
    height: 24px;
    margin-right: 10px; /* Odstęp między ikoną a tekstem */
}

/* Styl dla tekstu */
.akta-informacje-text {
    font-size: 16px;
    color: #333;
}

/* Responsywność - dostosowanie do urządzeń mobilnych */
@media screen and (max-width: 768px) {
    .akta-informacje-container {
        grid-template-columns: 1fr; /* Tylko jedna kolumna na telefonach */
        gap: 10px;
    }

    .akta-informacje-cell {
        height: auto; /* Dostosowanie wysokości komórki */
        font-size: 14px; /* Mniejszy rozmiar czcionki na telefonach */
        padding: 8px;
    }

    .akta-informacje-icon {
        width: 20px; /* Mniejsza ikona na telefonach */
        height: 20px;
        margin-right: 8px;
    }
}









.poziomy {
    display: flex;
    justify-content: center; /* Wyśrodkowanie obrazków */
    gap: 10px; /* Równe odstępy między obrazkami */
    flex-wrap: nowrap; /* Nie łamie wiersza */
}

.poziomy img {
    max-width: 90px; /* Domyślna szerokość */
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.poziomy-postpage {
    display: flex;
    justify-content: center; /* Wyśrodkowanie obrazków */
    gap: 6px; /* Równe odstępy między obrazkami */
    flex-wrap: nowrap; /* Nie łamie wiersza */
    padding-top: 20px;
}

.poziomy-postpage img {
    max-width: 70px; /* Domyślna szerokość */
    height: auto;
    transition: transform 0.3s ease-in-out;
}

/* Efekt lekkiego powiększenia po najechaniu */
.poziomy-postpage img:hover {
    transform: scale(1.1);
}


/* Jeśli zabraknie miejsca, skalowanie */
@media (max-width: 500px) {
    .poziomy img {
        max-width: 70px;
    }
}

/* Efekt lekkiego powiększenia po najechaniu */
.poziomy img:hover {
    transform: scale(1.1);
}


.block-highlights .loop-small {
    margin-top: -26px;
}


/* Wyswietlanie ciekawostki po boku tylko na pc*/
.desktop-only {
    font-size: 10px !important;
    color: red !important;
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}



/* Footer-gap techniczny*/

@media (max-width: 768px) { /* Dla ekranów mobilnych */
    .footer-gap {
        height: 220px; /* Ustalamy wysokość odstępu na 50px */
    }
}



/* Kontakt i telegram z footer*/

.contact-row {
    display: flex;
    align-items: center; /* Wyrównanie w pionie */
    gap: 10px; /* Odstęp między tekstem a obrazkiem */
}

.contact-row img {
    width: 200px; /* Dostosowanie rozmiaru obrazka */
    height: auto;
    vertical-align: middle; /* Wyrównanie względem tekstu */
}



/* Nakładka overlay na przesuwanie akt osobowych mobile*/

@keyframes breathing {
    0% {
        opacity: 0.0;
        transform: scale(0.9) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scale(0.9) scaleX(1.05); /* Delikatne rozciągnięcie */
    }
    100% {
        opacity: 0.0;
        transform: scale(0.9) scaleX(1);
    }
}

.elementor-element.elementor-element-ee4363e.elementor-widget.elementor-widget-smartmag-large {
    position: relative;
}

/* Nakładka overlay na przesuwanie akt osobowych mobile - strona główna*/

.elementor-element.elementor-element-ee4363e.elementor-widget.elementor-widget-smartmag-large::before {
    content: "";
    position: absolute;
    top: -17%; /* Przesunięcie w górę */
    left: 5%; /* Przesunięcie w lewo */
    width: 90%; /* Zmniejszenie szerokości */
    height: 90%; /* Zmniejszenie wysokości */
    background-image: url('https://brutalne.pl/wp-content/images/slide-overlay.png');
    background-size: contain; /* Dopasowanie do nowego mniejszego rozmiaru */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    opacity: 0.6;
    pointer-events: none;

    /* Animacja oddychania */
    animation: breathing 2s infinite ease-in-out;
}


/* Nakładka overlay na przesuwanie akt osobowych mobile - widget boczny*/


.l-post.grid-overlay.overlay-post.grid-overlay-a.overlay-base-post.slick-slide.slick-current.slick-active::before {
    content: "";
    position: absolute;
    top: 0%; /* Przesunięcie w górę */
    left: 5%; /* Przesunięcie w lewo */
    width: 90%; /* Zmniejszenie szerokości */
    height: 90%; /* Zmniejszenie wysokości */
    background-image: url('https://brutalne.pl/wp-content/images/slide-overlay.png');
    background-size: contain; /* Dopasowanie do nowego mniejszego rozmiaru */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    opacity: 0.6;
    pointer-events: none;

    /* Animacja oddychania */
    animation: breathing 2s infinite ease-in-out;
}

/* Ukrycie strzałek na sliderze*/

.common-slider.arrow-hover:hover .slick-arrow:not(.slick-disabled) {
    display: none !important;
}












/* Autovideo na stronie głównej + w functions*/
.elementor-7891 .elementor-element.elementor-element-1747ec9 .elementor-wrapper video {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.elementor-7891 .elementor-element.elementor-element-1747ec9 .elementor-wrapper.loaded video {
    opacity: 1;
}

.elementor-7891 .elementor-wrapper video {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.elementor-7891 .elementor-wrapper.loaded video {
    opacity: 1;
}




.pagination-numbers {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.pagination-numbers a {
    background-color: #000; /* Czarne tło */
    color: #e74c3c; /* Krwista czerwona czcionka */
    padding: 20px 30px; /* Większe przyciski */
    font-weight: bold;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    border: 1px solid #000; /* Czarne krawędzie */
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    font-size: 18px; /* Większa czcionka */
}

.pagination-numbers a:hover {
    background-color: red; /* Zmiana tła na czerwone przy najechaniu */
    color: black; /* Biała czcionka */
    transform: scale(1.1); /* Powiększenie przycisku */
    border: 1px solid #000; /* Czarne krawędzie */
}

.pagination-numbers .current {
    background-color: red; /* Brak tła */
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.9); /* Mocniejszy czerwony glow */
    color: #000; /* Czarna czcionka dla aktywnej strony */
    border: 1px black solid; /* Brak obramowania */
    font-size: 22px; /* Większa czcionka dla aktywnej strony */
    font-weight: bolder; /* Pogrubiona czcionka */
    animation: paginationPulse 1.5s ease-in-out infinite; /* Dodanie animacji pulsowania */


}


@keyframes paginationPulse {
    0% {
        transform: scale(1); /* Normalny rozmiar */
        background-color: red; /* Kolor tła */
        color: black;
    }
    50% {
        transform: scale(1.05); /* Powiększenie o 10% */
        background-color: red; /* Jaśniejszy czerwony */
        color: white;
    }
    100% {
        transform: scale(1); /* Powrót do normalnego rozmiaru */
        background-color: red; /* Oryginalny kolor tła */
        color: black;
    }
}

/* Stylowanie strzałek, dopasowanie do wyglądu stron */
.pagination-numbers .prev,
.pagination-numbers .next {
    background-color: white; /* Czarne tło */
    color: black; /* Krwista czerwona czcionka */
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    font-family: 'Impact', sans-serif;
    text-transform: uppercase;
    border: 1px solid #000; /* Czarne krawędzie */
    border-radius: 2px;
    transition: all 0.3s ease;
    position: relative;
    font-size: 21px; /* Większa czcionka */
}

.pagination-numbers .prev:hover,
.pagination-numbers .next:hover {
    background-color: yellow; /* Niebieskie tło przy hover */
    color: black; /* Biała czcionka */
    box-shadow: 0 0 25px rgba(52, 152, 219, 0.9); /* Niebieski glow */
    transform: scale(1.1); /* Powiększenie przy najechaniu */
}








/* Styl dla sekcji premium-box */
/* Domyślnie na stronie głównej oraz stronach pojedynczych (inne strony) */
.premium-box {
    width: 100%;
    max-width: 400px;
    background: #000;
    border-radius: 15px;
    border: 2px solid red;
    box-shadow: 0 0 20px red;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    margin: 20px auto;
}


.tekst-zalogowano {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    padding-top: 5px;
    background: linear-gradient(to bottom, #d60000, #810000);
    -webkit-background-clip: text;
    color: transparent;
    animation: zalogowano-animacja 2s infinite ease-in-out;
    letter-spacing: 5px;
}

/* Na stronie pojedynczego wpisu usuwamy margin-left */
body.single-post .tekst-zalogowano {
    margin-bottom: 10px;
}

@keyframes zalogowano-animacja {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}


.premium-content {
text-align: center; /* Centruje tekst i elementy wewnątrz */
display: flex;
flex-direction: column;
align-items: center; /* Wycentrowanie w poziomie */
justify-content: center; /* Wycentrowanie w pionie */
width: 100%; /* Zapewnia, że zajmuje pełną szerokość */
}




.id-image {
    display: flex;      /* Umożliwia wyśrodkowanie obrazka lub inne dostosowania */
    justify-content: center;  /* Wyśrodkowanie obrazka w poziomie */
    align-items: center;     /* Wyśrodkowanie obrazka w pionie (jeśli zajmuje więcej miejsca) */
    max-width: 95% !important;
}




.premium-icons {
    display: flex;
    justify-content: center;
    gap: 30px; /* Odstęp między ikonami */
    margin-top: 15px;
}

.premium-icons span {
    margin-top: 5px;
    font-size: 14px;
    color: white;
    font-weight: bold;
    text-align: center;
}

.premium-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.premium-icons img {
    width: 50px;  /* Dopasowany rozmiar ikon */
    height: 50px;
    transition: transform 0.3s ease-in-out;
}

.premium-icons img:hover {
    transform: scale(1.1); /* Subtelny efekt powiększenia */
}


/* Na stronie pojedynczego wpisu usuwamy margin-left */
body.single-post .premium-benefits {
    margin-left: 0;
}


/* Stylowanie punktów korzyści dla niezalogowanych użytkowników */
.premium-benefits {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-top: 2px;
    padding-left: 10px;
}

.premium-benefits li {
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.checkmark {
    color: #0f0;
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}

/* Przycisk */
.premium-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 5px 25px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: red;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 0 10px red;
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* Efekt przycisku */
.premium-btn:hover {
    background: darkred;
    transform: scale(1.05);
    color: #FFD700;
}







.fire-container {
    margin-bottom: -7px;
    justify-content: center; /* Centrujemy w poziomie */
    align-items: center; /* Centrujemy w pionie */
    width: 100%; /* Możemy ustawić dowolną szerokość */
    animation: flame-sway 4s ease-in-out infinite;
}


@keyframes flame-sway {
    0% {
        transform: translateX(0) ;
        filter: hue-rotate(20deg) brightness(100%) contrast(100%);
    }
    25% {
        transform: translateX(3px);
        filter: hue-rotate(40deg) brightness(120%) contrast(130%); /* Zmiana hue, jasności i kontrastu */
    }
    50% {
        transform: translateX(10px) ;

    }
    75% {
        transform: translateX(-6px) ;

    }
    }
    100% {
        transform: translateX(0);
        filter: hue-rotate(10deg) brightness(100%) contrast(100%);
    }
}



.akt-zgonu {
    text-align: center; /* Centrujemy tekst w obrębie całego kontenera */
    margin: 20px auto;
    max-width: 500px;
    width: 100%;
}

.akt-dane {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Pozwól na zawijanie */
}

.akt-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    flex-shrink: 0;
    word-wrap: break-word; /* Zawijanie długich słów */
    max-width: 100%;
    text-align: center;
    margin: auto;
}

/* Klasa, która wymusza zawijanie drugiego członu dla nazw kontynentów */
.akt-kontynent {
    white-space: normal; /* Zawijanie tekstu */
    word-break: break-word; /* Zawijanie długich słów */
}




.akt-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.akt-status {
    width: 100%; /* Domyślnie zajmuje 100%, ale max 400px */
    max-width: 400px;
    padding: 3px;
    user-select: none;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border: 3px solid black;
    margin: 0 auto 5px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.akt-status.confirmed {
    background: linear-gradient(170deg, #ff0000, #a50000);
    color: white;
}

.akt-status.unconfirmed {
    background: linear-gradient(170deg, #24ff00, #18a800);
    color: black;
}

.akt-ikona {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.akt-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;

}

.zgon-label {
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
}

.zgon-status {
    font-size: 22px;
    font-weight: bold;
}

.akt-tabela {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-collapse: collapse;
}

.akt-tabela td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.flaga {
    width: 30px;
    height: auto;
    margin-left: 10px;
}

/* MEDIA QUERY DLA TELEFONÓW */
@media screen and (max-width: 600px) {
    .akt-zgonu {
        width: 100%;
        max-width: 100%;
    }

    .akt-status {
        width: 100%;
        max-width: 100%;
    }

    .akt-dane {
        gap: 10px; /* Jeszcze bardziej zmniejszony odstęp dla telefonów */
        justify-content: space-between; /* Ustawienie równego rozkładu elementów */
    }

    .akt-item {
        font-size: 14px; /* Mniejsza czcionka na telefonie, jeśli potrzebne */
    }
}


/* Dla desktopów i większych ekranów */
@media (min-width: 768px) {
    .losowy-tekst-container .pytajniki-background {
        left: 50px !important;
    }
}

/* Dla urządzeń mobilnych (poniżej 768px) */
@media (max-width: 767px) {
    .losowy-tekst-container .pytajniki-background {
        left: 30px;
    }
}







.elementor-7891 .elementor-element.elementor-element-b56dd01 .post-title a::before {
    content: "";
    display: inline-block;
    width: 40px; /* Dopasuj szerokość */
    height: 25px; /* Dopasuj wysokość */
    background: url('../../images/live.png') no-repeat center center;
    background-size: contain;
    margin-right: 10px; /* Odstęp między ikoną a tytułem */
    margin-bottom: 4px; /* Odstęp między ikoną a tytułem */
    margin-left: 10px; /* Odstęp między ikoną a tytułem */
    vertical-align: middle;
    animation: blink 1.5s infinite; /* Dodaj animację mrugania */
}


.elementor-7891 .elementor-element.elementor-element-8610b8d .post-title a::before {
    content: "";
    display: inline-block;
    width: 40px; /* Dopasuj szerokość */
    height: 25px; /* Dopasuj wysokość */
    background: url('../../images/live.png') no-repeat center center;
    background-size: contain;
    margin-right: 10px; /* Odstęp między ikoną a tytułem */
    margin-bottom: 4px; /* Odstęp między ikoną a tytułem */
    margin-left: 10px; /* Odstęp między ikoną a tytułem */
    vertical-align: middle;
    animation: blink 1.5s infinite; /* Dodaj animację mrugania */
}

/* Animacja płynnego mrugania */
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}




.elementor-7891 .elementor-element.elementor-element-76a7d39 .post-title a::before {
    content: "";
    display: inline-block;
    width: 20px; /* Dopasuj szerokość */
    height: 20px; /* Dopasuj wysokość */
    background: url('https://cdn-icons-png.flaticon.com/128/3272/3272603.png') no-repeat center center;
    background-size: contain;
    margin-right: 10px; /* Odstęp między ikoną a tytułem */
    margin-bottom: 4px; /* Odstęp między ikoną a tytułem */
    margin-left: 10px; /* Odstęp między ikoną a tytułem */
    vertical-align: middle;

}



















/* Nagłówek - grafika */
.brutal-table-header4 {
    text-align: center;
    margin-bottom: -1px;
    background: url('../../images/table-death.png') no-repeat center center;
    height: 80px; /* Dopasuj wysokość do rozmiaru obrazu */
    background-position: 20% 80%; /* Precyzyjne ustawienie */
    animation: contrastup 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative; /* Zmieniamy na relative, aby był w normalnym przepływie */
    z-index: 1; /* Nagłówek na wyższej warstwie niż tło */
}

@keyframes contrastup {
    0% {
        filter: brightness(100%);
        transform: scale(1);
    }
    50% {
        filter: brightness(120%);
        transform: scale(1.05);
    }
    80% {
        filter: brightness(2500%);
        transform: scale(1.1);
    }
    100% {
        filter: brightness(100%);
        transform: scale(1);
    }
}










/* Brutalna Tabela - Unikalne Style */

.brutal-table-header3 {
    background: url('../../images/table-wow.png') no-repeat center center;
    height: 100px;
    background-position: center center;
    position: relative;
    z-index: 1;
    animation: revealHeader 3s ease-in-out infinite;
}

@keyframes revealHeader {
    0% {
        top: 100px; /* Początek - poza ekranem */
        opacity: 0;
        transform: scale(0.8);
    }
    15% {
        opacity: 1;
        top: 10px; /* Szybsze pojawienie się */
        transform: scale(1);
    }
    20% {
        top: 5px;
        transform: scale(1.1); /* Natychmiastowe lekkie powiększenie */
    }
    /* Natychmiastowe przejście do trzęsienia */
    25% { transform: translateX(-8px) rotate(-4deg); }
    30% { transform: translateX(8px) rotate(4deg); }
    35% { transform: translateX(-6px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    45% { transform: translateX(-5px) rotate(-2deg); }
    50% { transform: translateX(5px) rotate(2deg); }
    55% { transform: translateX(-3px) rotate(-1deg); }
    60% { transform: translateX(3px) rotate(1deg); }
    65% { transform: translateX(0) rotate(0); }
    /* Powrót do normalnego stanu */
    75% {
        opacity: 1;
        top: 5px;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        top: 120px; /* Chowa się w dół */
        transform: scale(0.8);
    }
}



/*********** ************/








/* Brutalna Tabela - Unikalne Style */

.brutal-table-header2 {
    text-align: center;
    background: url('../../images/table-reddevil.png') no-repeat center center;
    margin-bottom: -25px;
    height: 100px;
    background-position: 50% 50%;
    position: relative;
    z-index: 4;
    animation: subtleMoveBack 6s ease-in-out infinite, fireFlicker 1.2s infinite ease-in-out ;
}

@keyframes subtleMoveBack {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-8px) rotate(-3deg); /* Subtelne przesunięcie w lewo z lekkim obrotem */
    }
    50% {
        transform: translateX(18px) rotate(3deg); /* Przesunięcie w prawo z lekkim obrotem */
    }
    75% {
        transform: translateX(-4px) rotate(-1deg); /* Lekka korekta w lewo z jeszcze subtelniejszym obrotem */
    }
    100% {
        transform: translateX(0) rotate(0deg); /* Powrót do początkowej pozycji */
    }
}



/*********** ************/



.brutal-table-header1 {
    text-align: center;
    margin-bottom: -25px;
    background: url('../../images/table-devil.png') no-repeat center center;
    height: 110px; /* Dopasuj wysokość do rozmiaru obrazu */
    background-position: 80% 20%; /* Precyzyjne ustawienie */
    animation: subtleHeadMovement 2s ease-in-out infinite, fireFlicker 1.2s infinite ease-in-out; /* Subtelna animacja poruszania głowy */
    position: relative; /* Zmieniamy na relative, aby był w normalnym przepływie */
    z-index: 1; /* Nagłówek na wyższej warstwie niż tło */
}

/* Subtelna animacja poruszania głowy */
@keyframes subtleHeadMovement {
    0% {
        transform: translateY(0) rotate(0); /* Początkowa pozycja */
    }
    25% {
        transform: translateY(2px) rotate(-1deg); /* Lekki ruch w dół i obrót w lewo */
    }
    50% {
        transform: translateY(15px) rotate(1deg); /* Powrót do pozycji wyjściowej z lekkim obrotem w prawo */
    }
    75% {
        transform: translateY(2px) rotate(-1deg); /* Ponownie ruch w dół, ale z obrotem w lewo */
    }
    100% {
        transform: translateY(0) rotate(0); /* Końcowa pozycja */
    }
}

@keyframes fireFlicker {
    0% { filter: brightness(100%) contrast(100%); }
    50% { filter: brightness(120%) contrast(170%); }
    100% { filter: brightness(90%) contrast(95%); }
}










/* Brutalna Tabela  */

/* Ogólny wrapper tabeli */
.brutal-table-wrapper {
    position: relative; /* Umożliwia stosowanie z-index */
}


/* Sekcja z tabelą */
.brutal-table-content {
    padding-top: 10px;
    background: #000000;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    position: relative; /* Zapewnia wyższy poziom warstwy */
    z-index: 2; /* Środkowy div ma wyższy z-index */
}

/* Tytuł tabeli */
.brutal-table-content h1 {
    text-align: center;
    color: orange;
    font-size: 1.50em;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Zmieniona czcionka */
    font-weight: bold;
    padding: 15px;
    text-transform: uppercase;
    background: linear-gradient(to right, #af0000, #b00000, #ff0000);
 /* Zmieniony gradient - morskie niebieskie tony */
    -webkit-background-clip: text; /* Stosowanie gradientu tylko na tekście */
    background-clip: text; /* Stosowanie gradientu tylko na tekście */
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.7); /* Delikatny cień tekstu */
}

/* Tabela */
.brutal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    --post-content-gaps: 0;
}


.brutal-table th, .brutal-table td {
    padding: 8px;
    text-align: center;
    vertical-align: middle; /* Wyśrodkowanie w pionie */
    border: 1px solid #444;
}

.brutal-table th {
    background: #000;
    color: yellow;
    color: #FF00FF;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.brutal-table tbody tr {
    background: #0d585f;
    color: #ffffff;
}


/* Logo w sekcji */
.brutal-table-logo {
    text-align: center;
    background: url('../../images/table-logo.png') no-repeat center center;
    height: 100px; /* Dopasuj wysokość do rozmiaru obrazu */
    margin-top: -5px;
    position: relative; /* Logo również na wyższej warstwie */
    z-index: 3;
}

/* Stopka - blood */
/* Domyślnie ukrywamy stopkę przed pojawieniem się w widoku */
.brutal-table-footer {
    text-align: center;
    margin-top: -30px;
    background: url('../../images/table-blood.png') no-repeat center center;
    height: 80px;
    z-index: -1;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 3s ease-in-out, opacity 3s ease-in-out;
}

/* Klasa dodawana przez JavaScript, która aktywuje animację */
.brutal-table-footer.animate {
    transform: translateY(0);
    opacity: 1;
}

/* Animacja wysuwania stopki (spływająca krew) */
@keyframes footer-slide {
    0% {
        transform: translateY(-100%); /* Początkowo stopka jest poza ekranem u góry */
        opacity: 0; /* Stopka jest niewidoczna */
    }
    50% {
        transform: translateY(0); /* Stopka wysuwa się na miejsce */
        opacity: 1; /* Stopka staje się w pełni widoczna */
    }
    75% {
        opacity: 1; /* Stopka pozostaje widoczna */
    }
    100% {
        transform: translateY(0); /* Stopka pozostaje na swoim miejscu */
        opacity: 1; /* Stopka zanika */
    }
}


.brutal-list-item {
    width: 100%;
    background: #000000;
    color: white;
    padding: 10px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.brutal-list-title {
    font-size: 1.0em;
    font-weight: bold;
    color: #FF00FF;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.brutal-list-description {
    font-size: 0.8em;
    color: aqua;
    margin-top: 4px;
    margin-bottom: 0px;
}

/*********** ************/





.aktualizacja {
    height: 40px;
    background-size: contain; /* Ustawienie rozmiaru obrazka */
    background: url('../../images/aktualizacja.png') no-repeat center center;
    position: relative;
    margin-top: 40px;
    top: 50%;
    left: 50%;
    animation: shakeRotate 3s ease-in-out infinite, shadowEffect 5s ease-in-out infinite;

    transform: translate(-50%, -50%);
}

@keyframes shakeRotate {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg); /* Obrazek na początkowej pozycji */
    }
    25% {
        transform: translate(-50%, -50%) rotate(-3deg); /* Minimalne obrócenie w lewo */
    }
    50% {
        transform: translate(-50%, -50%) rotate(3deg); /* Minimalne obrócenie w prawo */
    }
    75% {
        transform: translate(-50%, -50%) rotate(-3deg); /* Minimalne obrócenie w lewo */
    }
}

@keyframes shadowEffect {
    0% {
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }
    50% {
        transform: translate(-50%, -50%);
        filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.8));
    }
    100% {
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }
}














/*********** wyswietlanie zdjęć i galerii we wpisach  ************/



/* Zwiększenie kontrastu i obniżenie jasności */
.single .post-content img.size-full {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    border: 4px solid #000;
    filter: contrast(110%) brightness(100%) saturate(130%);
}


/* Jeśli chcesz wykluczyć zdjęcia z galerii */
img.attachment-thumbnail {
    /* W galerii zdjęcia pozostaną w oryginalnym rozmiarze */
    max-width: 100%;
    height: auto;
    display: inline-block;
    border: 2px solid #000;
    filter: contrast(110%) brightness(120%) saturate(130%); /* Zwiększony kontrast, obniżona jasność */
}


.wp-caption-text {
    font-size: 11px;
    font-weight: bold;
    font-family: Verdana, sans-serif;
    color: #FF00FF; /* Czerwony kolor tekstu */
    background: #000000;
    padding: 5px 5px;
    text-align: center;
    text-transform: uppercase; /* Wszystkie litery wielkie */
    letter-spacing: 1px; /* Delikatne rozsunięcie liter */
    border-left: 3px solid #000000; /* Czerwona ramka */
    border-right: 3px solid #000000; /* Czerwona ramka */
    border-bottom: 3px solid #000000; /* Czerwona ramka */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Cień wokół tekstu */
    border-radius: 2px; /* Kanciaste rogi */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Cień tekstu */
    max-width: 100%;
    margin: 0px auto;
    font-style: normal; /* Wymuszenie normalnego stylu (nie kursywa) */
}


/* Ustalamy wspólną wysokość dla opisów */
.wp-caption-text.gallery-caption {
    display: flex;
    justify-content: center; /* Wyrównanie tekstu w poziomie */
    align-items: center; /* Wyrównanie tekstu w pionie */
    min-height: 50px; /* Minimalna wysokość, którą można dostosować do swoich potrzeb */
    height: 100%; /* Zajmuje całą dostępną przestrzeń */
    text-align: center; /* Centrowanie tekstu */
    overflow: hidden; /* Ukrywanie ewentualnego nadmiaru tekstu */
    padding: 5px; /* Padding wewnętrzny */
}

/* Wymuszamy, by galerie miały jednakową wysokość w przypadku różnej długości opisów */
.gallery-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Ewentualnie - dodatkowa opcja, aby całe tło było jednolite w galerii */
.gallery-item img {
    object-fit: cover; /* Dopasowanie obrazka, aby zachować proporcje */
}



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


.above-comment {
    width: 100%; /* Szerokość na 100% */
    height: 138px; /* Wysokość – dostosuj według potrzeby */
    background-image: url('/wp-content/images/above-comment.png');
    background-size: contain; /* Skalowanie obrazka */
    background-position: left center; /* Pozycjonowanie do lewej */
    background-repeat: no-repeat; /* Brak powtórzeń */
    display: flex;
    align-items: left;
    justify-content: flex-end; /* Wyrównanie treści do prawej strony */
    padding-right: 5px; /* Większy dystans od krawędzi */
    padding-left: 160px;
    text-align: right; /* Wyrównanie do prawej */
}

.above-comment-content p {
    font-size: 14px;
    line-height: 1.5;
    color: white;
    text-align: right; /* Wyrównanie tekstu do prawej */
    width: 100%; /* Zapewnia, że treść wypełni przestrzeń */
    max-width: none; /* Usunięcie ograniczenia szerokości */
    margin: 0; /* Usunięcie domyślnych marginesów */

}

/* Ukrycie treści na mobile */
@media (max-width: 768px) {
    .above-comment {
        background-size: cover; /* Obrazek dopasowany do szerokości ekranu */
        justify-content: center; /* Treść na środku (ale i tak niewidoczna) */
    }

    .above-comment-content {
        display: none; /* Ukrycie treści na mobile */
    }
}

.warning-text {
    color: red;
    font-weight: bold;
    font-size: 22px;
    display: block; /* Nowa linia */
    text-align: right; /* Wyrównanie do prawej */
}




.comment-form textarea {
    background-color: black; /* Czarny kolor tła */
    background-image: url('/wp-content/images/comment-background.png');
    background-size: auto 100%; /* Dopasowanie wysokości */
    background-position: bottom right; /* Przyklejenie do dołu i prawej */
    background-repeat: no-repeat; /* Brak powtórzeń */
    color: #fff; /* Kolor tekstu */
    padding: 10px; /* Odstęp od krawędzi */
    border: 1px solid #ccc; /* Ramka */
}

/* Dostosowanie dla ekranów mobilnych */
@media screen and (max-width: 768px) {
    .comment-form textarea {
        background-size: 150% auto; /* Powiększenie obrazu dla lepszej widoczności */
        background-position: bottom right; /* Upewnienie się, że postać jest w rogu */
    }
}


#comment-submit {
    background-color: red; /* Kolor tła */
    color: white; /* Kolor czcionki */
    padding: 1px 10px; /* Zmniejszona wysokość */
    font-size: 13px; /* Rozmiar czcionki */
    border: none; /* Usunięcie domyślnej ramki */
    border-radius: 2px; /* Zaokrąglenie rogów */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Lekki cień */
    transition: all 0.3s ease-in-out; /* Płynna animacja */
}

#comment-submit:hover {
    color: yellow; /* Kolor czcionki po najechaniu */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Większy cień */
}

.comment-respond {
    margin-top: 0px; !important
}

.comment-meta .comment-author {
    display: inline-block;
    margin-right: 3px;
    font-size: 1em;
    background: black;
    color: #ff0000; /* Neonowa zieleń */
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
    font-weight: bold;
}



.comment-meta time {
    display: none;
}


.block-head-e3 .heading {
    background: black;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

.block-head-ac .heading .color {
color: yellow;
}



.comments-list .comment {
    margin-top: 0px !important;
    }




.under-comment-video {
    background-color: black;
    width: 100%;
    padding: 0px; /* Możesz dostosować padding według potrzeb */
    box-sizing: border-box; /* Aby padding nie zwiększał szerokości */
    margin-top: -10px;
  }

  body.single .promo-video-header-wrapper {
    margin-bottom: -34px; !important;
  }



/*********** fake comment ************/

  .fake-comment {
    display: flex;
    padding: 1px;
    border-radius: 3px;
    background-color: #fff;
    width: 350px;
    margin-bottom: 45px; /* Dodany margines od dołu */
  }

  .comment-header {
    display: flex;
    align-items: flex-start; /* Ustalamy wyrównanie do góry */
  }

  .avatar {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .comment-info {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
  }

  .status {
    font-size: 12px;
    font-weight: bold;
    width: fit-content;
    color: yellow; /* Kolor tekstu na biały */
    background-color: black; /* Box z tłem czarnym */
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 3px;
    margin-bottom: 5px; /* Odstęp pomiędzy boxem a komentarzem */
    display: inline-block; /* Box szerokości tekstu */
    font-family: 'Public Sans', sans-serif; /* Użycie czcionki Public Sans */

  }

  .comment-text {
    font-size: 15px;
    color: #000000;
    font-family: 'Fira Sans', sans-serif;
    padding-top: 12px;
  }





/************* STRZALKI w PRAWO i w LEWO ***********************************/




.navigate-container {
    width: 100%;
    height: 120px;
    background-image: url('/wp-content/images/devil-middle.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 52% center;
    display: flex;
    align-items: center;
    justify-content: center; /* Strzałki i obrazek są wyśrodkowane */
    gap: 140px; /* Kontroluje odstępy między strzałkami */
    padding: 0 20px;
}

.navigate-posts {
    margin-bottom: 0px !important;
    padding-top: 1px;
}

/* Strzałki */
.previous, .next {
    flex: 0 0 auto; /* Zapobiega zmianie rozmiaru */
}

.previous img, .next img {
    width: 50px;
    height: auto;
}

/* Styl na urządzenia mobilne */
@media (max-width: 768px) {
    .navigate-container {
        background-position: 56% center;
        gap: 120px; /* Mniejszy odstęp między strzałkami */
    }

    .previous img, .next img {
        width: 45px; /* Minimalne zmniejszenie strzałek na mobile */
    }
}


/*********** WYSZUKIWARKA************/



.tsi-search:before {
    display: none !important;
}


.search-icon.has-icon-only.is-icon::before {
    content: "";
    display: block;
    width: 90px;  /* Szerokość własnego obrazka */
    height: 40px;  /* Wysokość własnego obrazka */
    background-image: url('../../images/szukaj.png'); /* Wstaw swój obrazek */
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* Zaokrąglenie */
}

/* Kontener dla obrazka */
.devil-search {
    display: flex;
    justify-content: center; /* Wyśrodkowanie w poziomie */
    align-items: center; /* Wyśrodkowanie w pionie */
    margin: 0; /* Usunięcie marginesów */
}

/* Obrazek */
.devil-search img {
    width: 300px; /* Obrazek zajmuje 100% szerokości ekranu */
    height: auto; /* Zachowanie proporcji obrazu */
    max-width: 100%; /* Obrazek nie przekroczy szerokości ekranu */
}

/* Responsywność - dostosowanie do urządzeń mobilnych */
@media screen and (max-width: 768px) {
    .devil-search img {
        width: 200px; /* Obrazek ma szerokość 190px na telefonach */
    }
}

.meta-item.date {
    display: none; /* Ukrywa element całkowicie */
}

.archive-heading {
    background: linear-gradient(to right, #d60000, #920000); /* Gradient od lewej do prawej */
}

.no-results {
    color: yellow !important;
}

.search-modal .search-field {
font-size: 25px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/*********** przycisk logowania ************/

body.logged-in .auth-link {
    display: none !important; /* Ukrywa przycisk logowania */
}


.auth-link i {
    display: none; /* Ukrywa domyślną ikonę */
}

.auth-link::before {
    content: "";
    display: inline-block;
    width: 90px; /* Szerokość obrazka */
    height: 40px; /* Wysokość obrazka */
    background-image: url('../../images/logowanie.png'); /* Wstaw URL obrazka */
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* Zaokrąglenie (dla avatarów) */
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/*********** różne KOLORY tła ************/

.main-content {
    background-color: white !important;

}

.has-el-gap .elementor-column {
    background-color: #151516 !important;
}

.main-sidebar {
    background-color: black !important;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/*********** otwieranie menu mobilnego ************/

.offcanvas-toggle::before {
    content: "";
    display: block;
    width: 100px;
    height: 40px;
    background-image: url('../../images/hamburger-icon.png');
    background-size: cover;
}


.hamburger-icon {
    width: 0px !important;
    display: none !important;
  }

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */





/*********** zamykanie menu mobilnego ************/

  .tsi-times:before {
    content: none !important;  /* Usuwamy zawartość pseudoelementu */
    display: none !important;   /* Ukrywamy element */
}


.off-canvas.s-dark .close, .s-dark .off-canvas .close {
    content: "";
    display: block;
    margin-top: 10px;
    margin-right: 10px;
    width: 100px;  /* Dostosuj rozmiar */
    height: 50px;
    background-image: url('../../images/close-icon.png');
    background-size: cover;
}

 /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */










/*********** wysuwanie menu mobilnego z prawej strony ************/

.off-canvas {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%);

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */



.media-ratio .wp-post-image, .media-ratio > img {
    filter: contrast(130%);
}









/*********** KOMISARIAT POLICJI - ukrycie etykietki na miniaturce ***********/

@media (max-width: 768px) {
    .elementor-element-718f801 .l-post .c-overlay.p-bot-left {
        display: none !important;
    }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/*********** KOMISARIAT POLICJI - tytuł posta ***********/
@media (max-width: 768px) {
    .elementor-element-718f801 .post-title {
        text-align: justify; /* Wyrównuje tekst do obu krawędzi */
        word-spacing: 0.1em; /* Dostosowuje odstęp między słowami */
        display: -webkit-box; /* Umożliwia rozciąganie tekstu */
        -webkit-line-clamp: 3; /* Ogranicza tekst do 3 linii (możesz dostosować liczbę) */
        -webkit-box-orient: vertical; /* Wymusza pionowy układ tekstu */
        overflow: hidden; /* Ukrywa nadmiarowy tekst, jeśli nie mieści się w określonym limicie */
        line-height: 1.4em; /* Dostosowuje wysokość linii dla lepszego wyglądu */
    }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/*********** kolor buttona ZALOGUJ w formularzu logowania ***********/


.um a.um-button:hover, .um input[type=submit].um-button:hover {
    background-color: red !important;
}


.um a.um-button,
.um a.um-button.um-disabled:active,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:hover,
.um input[type=submit].um-button,
.um input[type=submit].um-button:focus {
    background-color: green !important;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/*********** latający nóż ***********/

@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(50px); }
    100% { transform: translateY(0px); }
}

.moving-image {
    animation: floatAnimation 3s ease-in-out infinite;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */






/*********** STRONA GŁÓWNA - scisniecie ostatnich postów i czerwony border************/


/* Domyślnie styl będzie obowiązywał na wszystkich urządzeniach */
.loop-list-sep {
    --grid-row-gap: 0px;
}

/* Media query dla urządzeń mobilnych (np. do 768px szerokości ekranu) */
@media (max-width: 768px) {
    .loop-list-sep {
        --grid-row-gap: 40px;  /* Przywrócenie domyślnego stylu */
    }
}


.elementor-7891 .elementor-element.elementor-element-b6a8510 .l-post {
   border: 1px solid red;
   padding-top: 20px;
   padding-bottom: 20px;
}





/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */



.cta-container {
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    border: 1px solid red;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(120deg, #ff0000, #8b0000); /* Gradient */
}


.cta-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    width: 100%;
    height: 100%;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cta-icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
}

.cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-text {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.cta-link:hover {
    color: #FFD700;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.tlo-zombie {
    background-image: url('../../images/zombie-main.png');
    background-position: right top; /* Obrazek na prawej górnej krawędzi */
    background-size: auto; /* Ustawienie oryginalnego rozmiaru obrazka */
    background-repeat: no-repeat; /* Obrazek się nie powtarza */
    padding: 20px; /* Daje przestrzeń wokół treści */
    color: white; /* Kolor tekstu */
    font-size: 20px; /* Możesz dostosować rozmiar czcionki */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Dodanie cienia tekstu dla lepszej widoczności */
    height: 200px; /* Ustaw wysokość kontenera według potrzeb */
    width: 100%; /* Ustala szerokość na 100% dostępnego obszaru */
}




/************************* DIALOGI **************************/


/***^^^^^** czarny */


.dialog-black {
    display: flex;
    align-items: center;
    background-color: #000000;
    color: #000000;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    max-width: fit-content;
    margin-bottom: 15px;
}

.dialog-black-icon {
    width: 37px;
    height: auto;
    margin-right: 15px;
}

.dialog-black-text {
    font-size: 0.9em;
    line-height: 1.4;
    font-weight: bold;
    color: white;
}


/***^^^^^** czerwony */

.dialog-red {
    display: flex;
    align-items: center;
    background-color: #930000;
    color: #000000;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    max-width: fit-content;
    margin-bottom: 15px;
}

.dialog-red-icon {
    width: 37px;
    height: auto;
    margin-right: 15px;
}

.dialog-red-text {
    font-size: 0.9em;
    line-height: 1.4;
    font-weight: bold;
    color: white;
}




/***^^^^^** niebieski */


.dialog-blue {
    display: flex;
    align-items: center;
    background-color: #378fd6; /* Niebieskie tło */
    color: #000000; /* Kolor tekstu */
    border-radius: 8px;
    padding: 15px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    max-width: fit-content;
    margin-bottom: 15px;
}

.dialog-blue-icon {
    width: 37px;
    height: auto;
    margin-right: 15px;
}

.dialog-blue-text {
    font-size: 0.9em;
    line-height: 1.4;
    font-weight: bold;
    color: white; /* Kolor tekstu na biały */
}




/************************* Nagłówek z czaszką w poście **************************/

/* Główna belka */
.post-belka {
    width: 100%; /* Ustawia szerokość na 100% */
    display: flex;
    flex-direction: column; /* Wiersze są ustawione w kolumnach */
    align-items: center; /* Wyśrodkowanie zawartości */
    padding: 20px 0; /* Odstęp wewnętrzny */
    background-color: #ffffff; /* Kolor tła belki */
}

/* Obrazek */
.post-belka-image img {
    width: 100%; /* Dopasowanie obrazu do szerokości wiersza */
    max-width: 100%; /* Maksymalna szerokość, aby obraz nie był za duży na szerokich ekranach */
    height: auto; /* Zachowanie proporcji obrazu */
}

/* Na urządzeniach mobilnych (maksymalna szerokość 768px) */
@media (max-width: 768px) {
    .post-belka-image img {
        height: 6vh; /* Zwiększona wysokość obrazka na telefonach */
        object-fit: cover; /* Dopasowanie obrazu, aby wypełnił dostępną przestrzeń */
    }
}

/* Tytuł */
.post-belka-title {
    font-size: 24px; /* Większa czcionka */
    font-weight: bold; /* Pogrubienie tekstu */
    color: black; /* Kolor tekstu */
    text-transform: uppercase; /* Duże litery */
    margin-bottom: 20px; /* Odstęp między wierszami */
    text-align: center; /* Wyśrodkowanie tekstu */
    padding: 4px;
}

/* Przyciski w kontenerze */
.post-belka-button {
    width: 100%;
    display: flex;
    justify-content: center; /* Wyśrodkowanie przycisku */
    margin-top: -10px; /* Zmniejszamy odstęp między wierszami */
}

/* Link z przyciskiem */
.post-belka-link {
    font-size: 14px; /* Mniejszy rozmiar czcionki */
    padding: 8px 20px; /* Odstępy wewnętrzne */
    background: linear-gradient(120deg, #ff0000, #8b0000); /* Domyślny gradient czerwony */
    color: #ffdd00; /* Intensywny żółty kolor czcionki */
    text-decoration: none; /* Usunięcie podkreślenia */
    border-radius: 3px; /* Zaokrąglone rogi */
    cursor: pointer; /* Zmieniamy kursor na "pointer" po najechaniu */
    transition: background-color 0.3s ease, color 0.3s ease; /* Płynna zmiana koloru tła i tekstu przy najechaniu */
}

/* Efekt hover na linku */
.post-belka-link:hover {
    background: linear-gradient(120deg, #0000ff, #00008b); /* Gradient niebieski na hover */
    color: white; /* Kolor tekstu */
}




/************************* Nagłówek z szatanem i header tekstowy w poście **************************/

.akapit-post-container {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    color: #000;
    border-radius: 0;
    overflow: hidden;
    text-align: center;
}

.akapit-post-header {
    background-image: url("../../images/szatanhead.png");
    background-size: contain; /* Dopasowanie obrazu */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: -20px;
    width: 100%;
    height: 100px;
}

.akapit-post-title {
    background-color: #000;
    color: #fff;
    padding: 2px 10px;
    border: 3px solid #f7f700;
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


.single .main-content .post-title {
    background-color: black;
border-color: red;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify;
    text-align-last: center; /* Ostatnia linia będzie wycentrowana */
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 21px;
    letter-spacing: 2px; /* Większy odstęp między literami */
    text-transform: uppercase; /* Zawsze duże litery */
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


.flowplayer.skin-custom {
    margin: 4em auto 4em auto;
    display: block;
   }

   .flowplayer .fp-splash, .flowplayer .fp-player .fp-splash {
    object-fit: fill;

    background-color: black; /* Redukcja efektu obramowania */
}






/* Główna klasa dla kontenera z obrazkami */
.blood-post-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

/* Styl dla pierwszego obrazka */
.blood-post-top img {
    max-width: 100%;
    height: auto;
}

/* Dostosowanie do większych ekranów (PC i tablet) */
@media (min-width: 768px) {
    .blood-post-top {
        justify-content: space-between;
    }

    .blood-post-top .second-image {
        max-width: 50%;
    }

    .blood-post-top img:first-child {
        max-width: 50%;
    }
}

/* Dostosowanie na urządzenia mobilne (poniżej 768px) */
@media (max-width: 767px) {
    .blood-post-top {
        justify-content: center;
        text-align: center;
    }

    .blood-post-top img {
        max-width: 110%;
    }

    .blood-post-top .second-image {
        display: none; /* Ukrywamy drugi obrazek na urządzeniach mobilnych */
    }
}




.trophy-title-container {
    width: 100%;
    height: 100%; /* Możesz dostosować wysokość */
    position: relative; /* Ustawiamy pozycjonowanie względne dla kontenera */
    overflow: visible; /* Umożliwia wychodzenie zawartości poza kontener */
}


    .trophy-title {
        position: absolute; /* Pozycjonujemy obrazek względem kontenera */
        top: -70px; /* Obrazek zaczyna się od góry kontenera */
        right: -15%; /* Obrazek wychodzi o 20px na prawo */
        width: 30%; /* Obrazek jest szerszy od kontenera */
        height: 50%; /* Obrazek wypełnia całą wysokość kontenera */
        background-size: cover; /* Obrazek wypełnia kontener */
        background-position: center; /* Obrazek jest wyśrodkowany */
        z-index: 10; /* Ustawiamy obrazek na wierzchu */
        animation: shake 0.5s ease-in-out infinite;
    }

    @keyframes shake {
        0% {
            transform: translateX(0) rotate(0deg); /* Początkowa pozycja */
        }
        25% {
            transform: translateX(-5px) rotate(-5deg); /* Wibracja w lewo */
        }
        50% {
            transform: translateX(5px) rotate(5deg); /* Wibracja w prawo */
        }
        75% {
            transform: translateX(-5px) rotate(-5deg); /* Wibracja w lewo */
        }
        100% {
            transform: translateX(0) rotate(0deg); /* Powrót do pozycji początkowej */
        }
    }







.single .main-content .post-title {
margin-bottom: 0px;
border-left: 2px solid red;
border-right: 2px solid red;
border-top: 1px dashed red;
}


.main-content .post-meta > :last-child {
    background: black;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
}



.s-head-modern .cat-labels {
    padding-bottom: 0px; !important
}


.post-meta .cat-labels .category {
    margin-bottom: 5px;
    margin-left: 0px;

}




/* Ukrycie starej ikony i białego kółka */
.l-post .format-overlay {
    background: none !important;  /* Usuwamy domyślną ikonę */
    border: none !important;      /* Usuwamy białe obramowanie */
    box-shadow: none !important;  /* Usuwamy cień wokół ikony */
    color: transparent;           /* Ukrywamy tekst (w razie potrzeby) */
}





/* Domyślny styl miniaturki - normalna */
.wp-post-image {
    transition: filter 0.3s ease-in-out; /* Płynne przejście */
}

/* Po najechaniu kursorem - czarno-biały i ciemniejszy */
.wp-post-image:hover {
    filter: grayscale(100%) contrast(150%) brightness(50%); /* Czarno-biały, zwiększony kontrast, ciemniejszy */
}





.country-info img {
    width: 30px; /* Zmieniaj w zależności od rozmiaru flagi */
    margin-right: 10px;
}

.country-info {
    margin-top: 20px;
    font-size: 1.2em;
}




.post-share-bot .share-links {

    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe (jeśli wysokość jest określona) */
    text-align: center; /* Dodatkowe wyrównanie tekstu */
    padding-top: 0px; !important
    gap: 10px; /* Dystans między elementami */
}

.post-share-bot  {
    display: inline; /* To zapewni, że ikony będą obok siebie */
}


.related-posts {
    background: black;
    padding: 15px;
    margin-top: 0px;
}

.single .main-content .related-posts .post-title {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
font-size: 14px;
padding-top: 0px;
margin-bottom: 5px;
}

.single .main-content .related-posts .post-title::before {
    content: "";
    display: inline-block;
    width: 24px;  /* Szerokość ikony */
    height: 24px; /* Wysokość ikony */
    background-image: url('https://img.icons8.com/?size=48&id=dmFJyDLsBa4t&format=png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    margin-right: 8px; /* Odstęp od tytułu */
    vertical-align: middle; /* Wyrównanie do środka tekstu */
}








/************************* JUSTIFY TYTUŁÓW **************************/

.elementor-7891 .elementor-element.elementor-element-b6a8510 .post-title {
    width: 100%;
    text-align: justify; /* Justify dla wszystkich linii */
    text-align-last: center; /* Ostatnia linia wycentrowana */
}

.elementor-7891 .elementor-element.elementor-element-bbf7712  .post-title {
    width: 100%;
    text-align: justify; /* Justify dla wszystkich linii */
    text-align-last: center; /* Ostatnia linia wycentrowana */
}

/*********** Krwawe Morderstwa ************/

.elementor-7891 .elementor-element.elementor-element-1526c2a  .post-title {
    width: 100%;
    text-align: justify; /* Justify dla wszystkich linii */
    text-align-last: center; /* Ostatnia linia wycentrowana */
}

/*********** Gliniarze w akcji ************/

.elementor-7891 .elementor-element.elementor-element-9530e86  .post-title {
    width: 100%;
    text-align: justify; /* Justify dla wszystkich linii */
    text-align-last: center; /* Ostatnia linia wycentrowana */
}


/*********** Ostry dyzur ************/

.elementor-7891 .elementor-element.elementor-element-b420321  .post-title {
    width: 100%;
    text-align: justify; /* Justify dla wszystkich linii */
    text-align-last: center; /* Ostatnia linia wycentrowana */
}






















/************************* OVERLAYE **************************/


/**************** EKSTREMALNIE BRUTALNE ****************/


.list-post .format-overlay.format-gallery::after {
    content: "";
    position: absolute;
    width: 880%;
    height: 800%;
    background-image: url('../../images/brutal-overlay.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    filter: hue-rotate(0deg);
    animation: hueBlink 1.5s ease-in-out infinite;
}

.format-overlay.format-gallery::after {
    content: "";
    position: absolute;
    width: 610%;
    height: 400%;
    background-image: url('../../images/brutal-overlay.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    filter: hue-rotate(0deg);
    animation: hueBlink 1.5s ease-in-out infinite;
}

@keyframes hueBlink {
    0% {
        filter: hue-rotate(0deg);  /* Czerwony */
    }
    25% {
        filter: hue-rotate(30deg);  /* Pomarańczowy */
    }
    50% {
        filter: hue-rotate(120deg);  /* Żółty */
    }
    75% {
        filter: hue-rotate(0deg);  /* Niebieski */
    }
    100% {
        filter: hue-rotate(0deg);  /* Powrót do czerwonego */
    }
}







/**************** ZŁOTE TRUMNY ****************/

@keyframes aggressiveBlink {
    0%, 80%, 100% {
        filter: brightness(100%) contrast(100%);
    }
    90% {
        filter: brightness(300%) contrast(150%);
    }
}

.format-overlay.format-image::after {
    content: "";
    position: absolute;
    width: 410%;
    height: 400%;
    background-image: url('../../images/top-overlay.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    animation: aggressiveBlink 3.5s ease-in-out infinite; /* 3s normal, 0.5s rozbłysk */
}








/**************** KOMPILACJA ****************/

.format-overlay.format-video::after {
    content: "";
    position: absolute;
    width: 410%;
    height: 400%;
    background-image: url('../../images/kompilacja-overlay.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    animation: rotateEffect 3s ease-in-out infinite;
}

@keyframes rotateEffect {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}





/**************** PROMO ****************/

.format-overlay.format-audio::after {
    content: "";
    position: absolute;
    width: 410%;
    height: 400%;
    background-image: url('../../images/promo-overlay.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    animation: frozen-lines 5s ease-in-out infinite;
}


@keyframes frozen-lines {
    0% {
        width: 410%;
        height: 400%;
        transform: rotate(0deg);
    }
    50% {
        width: 500%;
        height: 500%;
        transform: rotate(10deg);
    }
    100% {
        width: 410%;
        height: 400%;
        transform: rotate(0deg);
    }
}


}











/************************* LOSOWE VIDEO **************************/


/***^^^^^** stylowanie AI */

.ai-video-info {
    text-align: center;
    margin-top: 15px;  /* Możesz ustawić 0 lub mniejszą wartość, jeśli chcesz mniej przestrzeni */
    padding: 0;  /* Usuwamy padding */

}

.ai-video-title {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;  /* Wszystko wielkimi literami */
    color: #e30613;  /* Czerwona jaskrawa czcionka */
    margin: 0;  /* Usuwamy marginesy */
    padding-top: 15px;
    display: inline-block;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 1.2;  /* Zmniejszenie linii, aby przestrzeń się zmniejszyła */
}

.ai-video-description {
    font-size: 16px;
    color: #fff;  /* Biała czcionka */
    background-color: #000;  /* Czarne tło */
    padding: 2px 2px;
    margin-top: 5px;
    text-align: center;
}

.ai-video-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.ai-video-wrapper {
    --post-content-gaps: 0px; /* Nadpisujemy zmienną tylko w tym kontenerze */
}

.ai-video-header-wrapper {
    margin-bottom: -30px;
    z-index: 10;
}

.ai-video-header-image {
    width: 120px;
    height: auto;
    pointer-events: none;
    animation:
        video-header-animation1 10s ease-in-out infinite,
        video-header-animation2 8s ease-in-out infinite;
}

@keyframes video-header-animation1 {
    0% {
        filter: contrast(100%) brightness(100%);
    }
    25% {
        filter: contrast(2400%) brightness(2100%);
    }
    50% {
        filter: contrast(100%) brightness(100%);
    }
    60% {
        filter: contrast(2400%) brightness(3150%);
    }
    75% {
        filter: contrast(100%) brightness(100%);
    }
    100% {
        filter: contrast(100%) brightness(100%);
    }
}

@keyframes video-header-animation2 {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.09);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.09);
    }
    100% {
        transform: scale(1);
    }
}




.ai-video-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: black;
    overflow: hidden;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ai-video-lazy {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.ai-video-link {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
    background: transparent;
}

.ai-video-error {
    text-align: center;
    color: red;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}


/* *************************************** */



.promo-video-info {
    text-align: center;
    margin-top: 15px;
    padding: 0;
}

.promo-video-title {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    color: #e30613;
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 1.2;
}

.promo-video-description {
    font-size: 16px;
    color: #fff;
    background-color: #000;
    padding: 2px 2px;
    margin-top: 8px;
}

.promo-video-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.promo-video-wrapper {
    --post-content-gaps: 0px;
}

.promo-video-header-wrapper {
    margin-bottom: -35px;
    z-index: 10;
    margin-left: -98%;  /* Wartość początkowa dla pełnej szerokości */
    transform: rotate(-20deg);
}

.promo-video-header-image {
    width: 150px;
    height: auto;
    animation: ai-video-header-animation 3s ease-in-out infinite;
    pointer-events: none;
}

/* Media query: przy szerokości poniżej 768px, ustawiamy margin-left na 0, aby wycentrować obrazek */
@media (max-width: 1400px) {
    .promo-video-header-wrapper {
        margin-left: 0 !important;
        transform: rotate(0deg);
        margin-bottom: -20px;
    }
}

.promo-video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: black;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.promo-video-lazy {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.promo-video-link {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
    background: transparent;
}

.promo-video-error {
    text-align: center;
    color: red;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}

@keyframes promo-video-header-animation {
    0% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.1) translateY(-10px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}