/*!
Theme Name: Gothic Up
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gothic-up
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Gothic Up is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# 1. Variables & Settings (Panel Sterowania)
--------------------------------------------------------------*/
:root {
	/* Wymiary */
	--container-width: 1320px;   /* Maksymalna szerokość strony (menu, stopka, grid) */
	--content-width: 900px;      /* Szerokość tekstu artykułu (optymalna do czytania) */
	--gutter: 24px;              /* Marginesy boczne na telefonach */
    --sidebar-width: 370px; /* Szerokość paska bocznego */
    --grid-gap: 40px;       /* Odstęp między treścią a paskiem */
    --admin-bar-height: 32px;   /*Wysokość paska admina */
    --navbar-height: 80px;  /* wysokość menu nawigacji */
	
	/* Kolory */
	--text-main: #a0a7ab;        /* Główny kolor tekstu */
	--text-light: #666666;       /* Kolor tekstu pobocznego */
	--accent-color: #d10000;     /* Kolor akcentu (np. linki po najechaniu) */
	--link-color: #dd163b;       /* Kolor linków */
	--bg-light: #f4f4f4;         /* Jasne tło */
    --bg-secondary: #131720;    /* Kolor dodatkowego tła (np. polecane wpisy lub sidebar */
	
	/* Fonty */
	--font-body: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Courier 10 Pitch", courier, monospace;
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --paragraph-size: 1.1REM;
}

/* =========================================
# 1.1 RESPONSYWNOŚĆ (Media Queries)
   ========================================= */

/* 1. ŚREDNIE EKRANY */
@media (max-width: 1400px) {
    :root {
        --sidebar-width: 370px; 
    }
}

/* 2. MAŁE EKRANY / TABLETY POZIOMO */
@media (max-width: 1100px) {
    :root {
        --sidebar-width: 300px; 
    }
}

/* 3. TABLETY PIONOWO I TELEFONY */
@media (max-width: 992px) {
    .site-layout-grid {
        grid-template-columns: 1fr;
        margin-top: 0 !important;
    }
    
    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .widget-area {
        width: 100%; 
        max-width: 100%;
    }
}
/* 4. Zależności względem admin bar dla zalogowanych */
body.admin-bar {
    --admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --admin-bar-height: 46px;
    }
}




/*--------------------------------------------------------------
# 2. PODSTAWOWE
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: inherit; }
html { box-sizing: border-box; line-height: 1.15; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);

    background-image: 
        linear-gradient(
            to bottom,
            rgba(11, 14, 20, 0.80) 0%,
            rgba(11, 14, 20, 0.90) 60%,
            rgba(11, 14, 20, 0.90) 80%,
            #0b0e14 90%,
            #0b0e14 100%  
        ),
        url('img/bg.webp');

    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll; 
    background-size: 100% 70vw, 100% 65vw;
    color: var(--text-main);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    overflow-x: hidden;
    padding-top: calc(80px + 32px);
}

.site-main {
    min-width: 0; 
}

@media (max-width: 768px) {
    body {
        background-size: 100% 100dvh;
    }
}

/* Obrazki i Grafiki */
img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; }
embed, iframe, object { max-width: 100%; }

/* Nagłówki */
h1, h2, h3, h4, h5, h6 { 
    clear: both; 
    color: #fff; 
    margin: 0 0 0.8em 0; 
    line-height: 1.2; 
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

/* Tekst */
p {
    margin-bottom: 1.5em;
    font-size: var(--paragraph-size);
    line-height: 1.7;
}
strong, b { font-weight: 700; }
em, i { font-style: italic; }
hr { background-color: #ddd; border: 0; height: 1px; margin: 2em 0; }

/* Listy */
ul, ol { margin: 0 0 0 1.5em; padding: 0; font-size: var(--paragraph-size); }
li { line-height: 1.7; }

/* Linki */
a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:active { color: var(--accent-color); }

/*Custom style do wtyczki Category Blocks */
.cpb-post-title {
    transition: .15s color;
}
.cpb-post-title:hover {
    color: var(--link-color);
}

/* ==========================================================
   STYLE TABEL WORDPRESS DLA MOTYWU "GOTHIC UP"
   ========================================================== */

/* Kontener tabeli - zapewnia responsywność */
.wp-block-table {
    margin: 2em auto;
    width: 100%;
    overflow-x: auto;
}

/* Główny styl tabeli */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(15, 20, 28, 0.6);
    color: #a3aab5;
    font-family: inherit;
    border: 1px solid #1f2633;
}

.wp-block-table th {
    background-color: #141924;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
    padding: 16px 24px;
    text-align: center;
    border: 1px solid #1f2633;
    border-bottom: 2px solid var(--link-color);
}

.wp-block-table td {
    padding: 16px 24px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #1f2633;
}

.wp-block-table tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.wp-block-table tbody tr:hover {
    background-color: #131720;
}

.wp-block-table td img {
    max-width: 80px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

/* ----------------------------------------------------------
   Responsywność
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .wp-block-table th,
    .wp-block-table td {
        padding: 12px 10px;
        font-size: 0.9em;
    }
    
    .wp-block-table td img {
        max-width: 50px; /* Mniejsze ikonki na telefonach */
    }
}

/*--------------------------------------------------------------
# 3. Layout System (Układ)
--------------------------------------------------------------*/

/* Kontener Główny (Dla Header, Footer, Gridu wpisów) */
.container {
	width: 92%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

/* Układ Artykułu */
.entry-content,
.entry-header,
.comments-area {
	max-width: var(--content-width);

}

.entry-content .alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}


.home .entry-content {
    max-width: 100%; /* Pozwól treści zająć całą szerokość kontenera (1320px) */
    padding-left: 0;
    padding-right: 0;
}

.home .entry-header {
    max-width: 100%;
    text-align: center; /* Wyśrodkowanie tytułu strony głównej */
}


@media (min-width: 768px) {
	.entry-content .alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}
	
	.entry-content .alignfull {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		max-width: 100vw;
	}
}
.site-layout-grid {
    display: grid;
    /* Domyślnie (Mobile): 1 kolumna */
    grid-template-columns: 1fr;
    margin-top: 3em;
    margin-bottom: 3em;
    width: 100%;
}

@media (min-width: 992px) {
    .site-layout-grid {
        /* Układ: Treść (auto) | Sidebar (sztywna szerokość) */
        grid-template-columns: 1fr var(--sidebar-width);
        align-items: start; /* Żeby sidebar nie rozciągał się na wysokość całej strony */
    }
}

.gup-gap {
    height: 30px;
}

/* =========================================
   SIDEBAR & WIDGETS
   ========================================= */

/* 1. Kontener paska bocznego (Sticky) */
@media (min-width: 992px) {
    .widget-area {
        position: -webkit-sticky;
        position: sticky;
        align-self: start;
        height: auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        /* Sidebar zaczyna się pod menu. */
        top: 120px; 
        transition: top 0.3s ease;
        z-index: 90; /* Żeby był nad tłem, ale pod menu */
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .widget-area::-webkit-scrollbar {
        display: none; /* Całkowicie ukrywa pasek */
        width: 0;
        background: transparent;}
    }

    .admin-bar .widget-area { top: 152px; }

@media (max-width: 991px) {
    /* Na telefonach sidebar spada na dół lub znika (zależnie od woli) */
    .widget-area { display: none; }
}

/* 2. Wygląd pojedynczego Widgeta */
.widget-area section.widget {
    background-color: var(--bg-secondary);
    padding: 30px;          /* Duży odstęp wewnątrz kafelka */
    margin-bottom: 30px;    /* Odstęp między kafelkami */
    border-radius: 12px;     /* Lekkie zaokrąglenie rogów */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Cień pod kafelkiem dla głębi */
    border-bottom: none;    /* Usuwamy starą linię oddzielającą */
}


/* 3. Tytuły Widgetów (Styl ze Screena: Napis + Pozioma Linia) */
.widget-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5em;
    padding-left: 0;
    margin-top: 0;
    border-left: none; 
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px; /* Odstęp między napisem a linią */
}

/* Biała linia za tytułem */
.widget-title::after {
    content: "";
    display: block;
    flex-grow: 1;       /* Linia zajmuje całą dostępną resztę miejsca */
    height: 2px;        /* Grubość linii */
    background-color: #fff; /* Biały kolor */
    opacity: 0.8;       /* Lekka przezroczystość */
}

/* 4. Listy wewnątrz widgetów (np. Kategorie, Archiwum) */
.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Linki w widgetach */
.widget ul li a {
    color: var(--text-main); /* Jasny tekst */
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    display: block;
    width: 100%;
}

.widget ul li a:hover {
    color: #fff; /* Biały przy najechaniu */
    transform: translateX(5px); /* Lekki ruch w prawo */
}

/* 5. Widget Wyszukiwarki (Dopasowany do pudełka) */
.widget_search .search-form { display: flex; }
.widget_search .search-field {
    border-radius: 3px 0 0 3px;
    border: 1px solid var(--border-color);
    border-right: none;
    background: rgba(0,0,0,0.2); /* Ciemniejsze tło inputa wewnątrz boxa */
    color: #fff;
}
.widget_search .search-submit {
    border-radius: 0 3px 3px 0;
    padding: 0 15px;
    background: var(--accent-color); /* Czerwony przycisk */
    border: 1px solid var(--accent-color);
}
.widget_search .search-submit:hover {
    background: #a00000; /* Ciemniejszy czerwony */
}


/* =========================================
   MODERN HERO HEADER (Avatar + Kategorie)
   ========================================= */

/* Tytuł nad zdjęciem */
.modern-title {
    margin-bottom: 20px;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #fff; /* Czarny */
}

/* Kontener zdjęcia */
.hero-image-container {
    position: relative;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 2em;
    background: #f0f0f0;
}

.hero-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gradient (tylko na dole, żeby tekst był czytelny) */
.hero-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Wysokość przyciemnienia */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    pointer-events: none; /* Kliknięcia przenikają przez gradient */
}

/* Pasek z treścią (Flexbox: Lewo - Prawo) */
.hero-content-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between; /* Rozpycha na boki */
    align-items: center; /* Wyrównuje w pionie */
    z-index: 2;
}

/* --- LEWA STRONA: AVATAR --- */
.hero-meta-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Avatar obrazek */
.meta-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 50%; /* Kółko */
    border: 2px solid #fff;
    object-fit: cover;
}

/* Teksty obok avatara */
.meta-text {
    flex-direction: column;
    line-height: 1.2;
}


/* Nazwa autora jako link */
a.meta-author-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;            /* Musi być biały na ciemnym tle */
    text-decoration: none;  /* Usuwamy podkreślenie */
    transition: color 0.2s ease;
}

/* Efekt po najechaniu na nazwę */
a.meta-author-name:hover {
    color: var(--accent-color); /* Np. czerwony */
}

/* Opcjonalnie: efekt po najechaniu na Avatar */
.meta-avatar:hover img {
    border-color: var(--accent-color); /* Obwódka avatara zmienia kolor */
    transform: scale(1.05); /* Lekkie powiększenie */
    transition: all 0.3s ease;
}

.meta-date-small {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    display: flex;
}

/* --- PRAWA STRONA: KATEGORIE --- */
.hero-meta-right .cat-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pojedynczy "Badge" kategorii */
.cat-badge, 
.more-trigger {
    background: rgba(255, 255, 255, 0.2); /* Półprzezroczyste tło */
    backdrop-filter: blur(5px); /* Rozmycie tła (Glassmorphism) */
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px; /* Pigułka */
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
}

.cat-badge:hover,
.cat-badge-more:hover .more-trigger {
    background: rgba(255, 255, 255, 0.3);
    color: #f0f0f0;
}

/* --- DROPDOWN (Lista wysuwana) --- */
.cat-badge-more {
    position: relative; /* Żeby lista wysuwała się względem tego przycisku */
    cursor: pointer;
}

.cat-dropdown {
    position: absolute;
    bottom: 120%; /* Wyskakuje nad przyciskiem */
    right: 0;
    background: #fff;
    min-width: 150px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    padding: 10px 0;
    
    /* Ukrywanie i animacja */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

/* Pokaż listę po najechaniu na "+X" */
.cat-badge-more:hover .cat-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Linki w dropdownie */
.cat-dropdown a {
    display: block;
    padding: 8px 15px;
    color: #333;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.cat-dropdown a:hover {
    background: #f4f4f4;
    color: var(--accent-color);
}

/* --- MOBILE (Responsywność) --- */
@media (max-width: 600px) {
    .modern-title {
        font-size: 1.8rem; /* Mniejszy tytuł */
    }
    
    .hero-content-strip {
        flex-direction: column; /* Jeden pod drugim */
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
    }
    
    .hero-meta-right {
        width: 100%;
    }
    
    .cat-badges {
        flex-wrap: wrap;
    }
}

/* =========================================
   GOTHIC UP - STYLIZACJA ARCHIWUM (SCREENSHOT MATCH)
   ========================================= */

/* --- 1. LAYOUT STRONY (Zgodny z page.php) --- */
.site-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px; /* Treść | Sidebar (szerokość ze screena) */
    gap: var(--grid-gap);
    margin-bottom: 60px;
    align-items: start;
}

@media (max-width: 992px) {
    .site-layout-grid {
        grid-template-columns: 1fr; /* Responsywność: 1 kolumna na tablecie */
    }
}

/* --- 2. GRID WPISÓW --- */
.posts-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dwie kolumny */
    gap: 30px; /* Odstęp między kafelkami */
    margin-top: 10px;
}

@media (max-width: 768px) {
    .posts-grid-wrapper {
        grid-template-columns: 1fr; /* 1 kolumna na telefonie */
    }
}

/* --- 3. KARTA WPISU (NEWS CARD) --- */
.news-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border: none; /* Brak obramowania, czysty styl */
}

/* Zdjęcie */
.news-thumbnail {
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 3px; /* Minimalne zaokrąglenie rogów */
    aspect-ratio: 16/9; /* Proporcje kinowe, jak na screenie */
}

.news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.news-thumbnail:hover img {
    transform: scale(1.03); /* Lekki zoom przy najechaniu */
}

/* Tytuł */
.news-title {
    font-family: sans-serif; /* Dostosuj do fontu motywu */
    font-size: 1.1rem; /* Rozmiar ok. 18px */
    font-weight: 700;
    text-transform: uppercase; /* WIELKIE LITERY */
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.news-title a {
    color: #fff; /* Biały tekst */
    text-decoration: none;
    transition: color 0.2s;
    font-family: var(--font-heading);
}

.news-title a:hover {
    color: var(--link-color);
}

/* Metadane (Autor, data, ikona) */
.news-meta {
    font-size: 0.8rem; /* Mały tekst (ok 13px) */
    color: #8f8f8f; /* Szary kolor tekstu */
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-author {
    display: flex;
    align-items: center;
}

/* Avatar autora */
.news-meta img.avatar {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: block;
}

/* Nazwa autora (CZERWONA jak na screenie) */
.author-name {

    font-weight: 600;
    font-family: Montserrat;
}

.author-name a {
    color: var(--text-main)
}

.author-name a:hover {
    color: var(--link-color);
}

.edit-link a {
    color: #c44d4d;
    margin-left: 5px;
    text-decoration: none;
}

/* Zajawka (Excerpt) */
.news-excerpt {
    font-size: 0.9rem;
    color: #aaa; /* Jasny szary, czytelny na ciemnym tle */
    line-height: 1.5;
}

.news-excerpt p {
    margin: 0; /* Usunięcie domyślnych marginesów akapitu */
}

/* --- 4. PAGINACJA --- */
.gothic-pagination {
    margin-top: 50px;
    padding-top: 20px;
}

.gothic-pagination ul {
    justify-content: center;
    display: flex;
    list-style: none;
    padding: 0;
    gap: 5px;
}

.gothic-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    color: #ccc;
    text-decoration: none;
    border-radius: 3px;
    font-size: 1.1rem;
    font-weight: 700;
}

.page-numbers a:hover {
color: var(--link-color);
}

.page-numbers.current {
color: #fff;
border: 3px solid;
border-color: var(--link-color);
border-radius: 50%;
}

.gothic-pagination .nav-icon-prev,
.gothic-pagination .nav-icon-next {
    display: none; 
}

.gothic-pagination .prev {
    position: relative;
}

.gothic-pagination .prev::before {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
}

.gothic-pagination .next {
    position: relative;
}

.gothic-pagination .next::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
}

/* =========================================
   FOOTER
   ========================================= */

.site-footer {
    background-color: #000;      /* Czarne tło */
    color: #666;                 /* Szary tekst poboczny */
    padding: 40px 0;
    font-size: 0.85rem;
    position: relative;
    z-index: 10;
}

.site-footer a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: #fff;
}

/* --- Menu Poziome (Wrapper) --- */
.footer-menu-wrapper {
    position: relative;          /* Kluczowe dla pozycjonowania strzałek */
    display: flex;
    align-items: center;         /* Centrowanie w pionie */
    justify-content: center;     /* Centrowanie w poziomie na desktopie */
    margin-bottom: 40px;         /* Odstęp od noty prawnej */
    padding: 0 40px;             /* Margines boczny, żeby strzałki nie wchodziły na krawędź */
    min-height: 50px;            /* Minimalna wysokość, żeby strzałki miały odniesienie */
}

/* Kontener nawigacji (Scrollowalny) */
.footer-navigation {
    overflow-x: auto;            /* Pozwala przewijać */
    overflow-y: hidden;
    white-space: nowrap;         /* Elementy w jednej linii */
    -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */
    scrollbar-width: none;       /* Ukryj pasek przewijania (Firefox) */
    max-width: 100%;
    
    /* Płynne przewijanie */
    scroll-behavior: smooth;
}

/* Ukryj pasek przewijania (Chrome/Safari) */
.footer-navigation::-webkit-scrollbar {
    display: none;
}

/* Lista menu */
.footer-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* Odstępy między elementami menu */
}

.footer-navigation li {
    display: inline-block;
    margin: 0; /* Reset marginesów motywu */
}

/* Linki w menu */
.footer-navigation a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95rem; /* Czytelny rozmiar */
    letter-spacing: 1px;
    color: #fff;        /* Biały kolor menu */
    padding: 10px 5px;  /* Pole kliknięcia */
    display: block;
}

.footer-navigation a:hover {
    color: #ddd; /* Lekkie przyciemnienie po najechaniu */
}

/* --- Strzałki (Arrows) - Wersja Skromna & Wyśrodkowana --- */
.menu-scroll-arrow {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem; /* Wyraźna ikona */
    cursor: pointer;
    line-height: 1;    /* Reset wysokości linii dla idealnego środka */
    padding: 10px;     /* Obszar kliknięcia */
    
    /* Pozycjonowanie absolutne względem .footer-menu-wrapper */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Idealne wyśrodkowanie w pionie */
    z-index: 5;
    
    /* Domyślnie ukryte (JS je włącza klasą .visible) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, color 0.2s ease;
}

/* Aktywna strzałka */
.menu-scroll-arrow.visible {
    opacity: 1;
    visibility: visible;
}

/* Hover na strzałkę */
.menu-scroll-arrow:hover {
    color: #ccc; /* Subtelna zmiana koloru */
}

/* Pozycje strzałek */
.arrow-left {
    left: 0;
}

.arrow-right {
    right: 0;
}

/* --- Nota Prawna --- */
.site-info-legal {
    text-align: center;
    color: #666;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.8rem;
    padding: 0 15px; /* Margines na telefonach */
}

/* --- Responsywność --- */
@media (max-width: 768px) {
    .footer-menu-wrapper {
        justify-content: flex-start; /* Na mobile menu startuje od lewej */
        padding: 0 35px; /* Miejsce na strzałki na małym ekranie */
    }
    
    .footer-navigation ul {
        gap: 20px; /* Mniejsze odstępy na telefonie */
    }
    
    .footer-navigation a {
        font-size: 0.85rem;
    }
}

/*--------------------------------------------------------------
# 4. Components
--------------------------------------------------------------*/

/* --- Breadcrumbs okruszki --- */

.gothic-page-header-wrapper {
background: rgba(0,0,0,0.2);
    padding-top: 40px;  /* Odstęp od menu */
    padding-bottom: 20px;
    text-align: left; /* WYRÓWNANIE DO LEWEJ */
}

/* 1. Stylizacja ścieżki */
.breadcrumbs-trail {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #949ba3;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.breadcrumbs-trail a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs-trail a:hover {
    color: var(--accent-color);
}

.breadcrumbs-trail .sep {
    margin: 0 8px;
    color: var(--accent-color); /* Czerwony znak ">" */
    font-weight: 800;
}

/* 2. Stylizacja Tytułu H1 */
h1.page-title-h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* Responsywność na telefonach */
@media (max-width: 768px) {
    .gothic-page-header-wrapper {
        padding-top: 20px;
    }
    h1.page-title-h1 {
        font-size: 1.8rem; /* Mniejszy tytuł na mobile */
    }
    .breadcrumbs-trail {
        font-size: 0.75rem;
    }
}

/* Forms */
button, input, select, textarea { font-family: inherit; font-size: 100%; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: var(--text-main);
	padding: 10px 12px;
	width: 100%;
	display: block;
}

/* Odstęp dla ikony Font Awesome w breadcrumbs */
.gothic-up-breadcrumbs .fa-home {
    margin-right: 6px;
    /* Opcjonalnie: kolor ikony */
    /* color: var(--accent-color); */
}

/* Wyrównanie w linii */
.gothic-up-breadcrumbs .home-link {
    display: inline-flex;
    align-items: center;
}

input:focus, textarea:focus { border-color: var(--accent-color); outline: none; }

button, input[type="submit"], input[type="button"], input[type="reset"] {
	background: #333;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	padding: 12px 24px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	transition: background 0.3s;
	display: inline-block;
}
button:hover, input[type="submit"]:hover { background: var(--accent-color); }

/* Tables */
table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%; }
th, td { border-bottom: 1px solid #eee; padding: 10px; text-align: left; }
th { font-weight: 700; }

/* Code / Pre */
pre { background: var(--bg-light); padding: 20px; overflow: auto; font-family: var(--font-mono); border-radius: 4px; }
code { background: none; color: #e83e8c; font-size: 87.5%; }

/* Media Elements */
figure { margin: 2em 0; }
figcaption { font-size: 0.85rem; color: var(--text-light); text-align: center; margin-top: 5px; }

/*----- Header Gothic Up -------*/

/* CSS Variables */
:root {
    --admin-bar-height: 0px;
}

body.admin-bar {
    --admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --admin-bar-height: 46px;
    }
}

/* Main Navigation Wrapper */
.gothic-up-navbar-wrapper {
    position: fixed;
    top: var(--admin-bar-height);
    height: var(--navbar-height);
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9998;
    transition: top 0.5s ease, opacity 0.5s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
    font-family: 'Montserrat', sans-serif;
    opacity: 1;
}

.gothic-up-navbar-wrapper.hidden {
    top: calc(var(--admin-bar-height) - 100px);
    opacity: 0.3;
}

.gothic-up-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 10px 15px;
    position: relative;
}

/* Responsive widths */
@media (min-width: 576px) { .gothic-up-navbar { max-width: 540px; } }
@media (min-width: 768px) { .gothic-up-navbar { max-width: 720px; } }
@media (min-width: 992px) { .gothic-up-navbar { max-width: 960px; } }
@media (min-width: 1200px) { .gothic-up-navbar { max-width: 1140px; } }
@media (min-width: 1400px) { .gothic-up-navbar { max-width: 1200px; } }

/* Logo */
.gothic-up-logo {
    width: 180px;
    height: 60px;
    display: flex;
    align-items: center;
}

.gothic-up-logo img {
    max-width: 100%;
    height: auto;
    transition: filter 0.3s ease;
}

.gothic-up-logo:hover img {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

/* Main Navigation */
.gothic-up-main-nav {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
}

@media (min-width: 992px) {
    .gothic-up-main-nav {
        display: flex;
    }
}

.gothic-up-main-nav > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.gothic-up-main-nav > ul > li {
    position: relative;
    margin-bottom: 0;
}

.gothic-up-main-nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    color: #e0e0e0 !important;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color 0.2s ease;
    background: transparent;
    position: relative;
}

.gothic-up-main-nav > ul > li:hover > a {
    color: #e4002b !important;
}

/* WordPress menu classes compatibility */
.gothic-up-main-nav .menu-item-has-children > a::after,
.gothic-up-main-nav .page_item_has_children > a::after {
    content: "▼";
    margin-left: 6px;
    font-size: 0.5rem;
    transition: transform 0.4s ease;
}

.gothic-up-main-nav .menu-item-has-children:hover > a::after,
.gothic-up-main-nav .page_item_has_children:hover > a::after {
    transform: rotate(180deg);
}

/* Ensure consistent styling for all menu items */
.gothic-up-main-nav ul li a {
    color: #e0e0e0 !important;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.gothic-up-main-nav ul li:hover > a {
    color: #e4002b !important;
}

/* Fix for custom menu items */
.gothic-up-main-nav .menu-item-type-custom > a,
.gothic-up-main-nav .menu-item-object-custom > a {
    color: #e0e0e0 !important;
}

.gothic-up-main-nav .menu-item-type-custom:hover > a,
.gothic-up-main-nav .menu-item-object-custom:hover > a {
    color: #e4002b !important;
}

/* Multi-level dropdown - ALL nested levels */
.gothic-up-main-nav .sub-menu,
.gothic-up-main-nav .children {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: #0d0d0d;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 20px rgba(0,0,0,0.9);
    z-index: 1000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 100dvh;
    width: max-content;
}

/* Nested submenus (2nd level and deeper) */
.gothic-up-main-nav .sub-menu .sub-menu,
.gothic-up-main-nav .children .children,
.gothic-up-main-nav .sub-menu .children,
.gothic-up-main-nav .children .sub-menu {
    top: -2px;
    left: 100%;
    margin-left: 0;
    z-index: 1001;
    transform: translateX(-20px) scale(0.95);
}

/* Show submenu on hover - works for all levels */
.gothic-up-main-nav li:hover > .sub-menu,
.gothic-up-main-nav li:hover > .children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Show nested submenus with horizontal animation */
.gothic-up-main-nav .sub-menu li:hover > .sub-menu,
.gothic-up-main-nav .children li:hover > .children,
.gothic-up-main-nav .sub-menu li:hover > .children,
.gothic-up-main-nav .children li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* All list items in submenus must be relative for nested menus */
.gothic-up-main-nav .sub-menu li,
.gothic-up-main-nav .children li {
    position: relative;
}

.gothic-up-main-nav .sub-menu a,
.gothic-up-main-nav .children a {
    display: block;
    padding: 12px 20px;
    color: #d0d0d0;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.gothic-up-main-nav .sub-menu a:hover,
.gothic-up-main-nav .children a:hover {
    color: #e4002b;
    padding-left: 25px;
}

/* Arrow for nested menu items */
.gothic-up-main-nav .sub-menu .menu-item-has-children > a::after,
.gothic-up-main-nav .children .page_item_has_children > a::after,
.gothic-up-main-nav .sub-menu .page_item_has_children > a::after,
.gothic-up-main-nav .children .menu-item-has-children > a::after {
    content: "▶";
    float: right;
    margin-left: 10px;
    font-size: 0.5rem;
}

/* Smart positioning for nested submenus */
.gothic-up-main-nav .sub-menu.open-right .sub-menu,
.gothic-up-main-nav .children.open-right .children,
.gothic-up-main-nav .sub-menu.open-right .children,
.gothic-up-main-nav .children.open-right .sub-menu,
.gothic-up-main-nav .sub-menu .sub-menu.open-right,
.gothic-up-main-nav .children .children.open-right {
    left: 100%;
    right: auto;
    margin-left: 0;
}

.gothic-up-main-nav .sub-menu.open-left .sub-menu,
.gothic-up-main-nav .children.open-left .children,
.gothic-up-main-nav .sub-menu.open-left .children,
.gothic-up-main-nav .children.open-left .sub-menu,
.gothic-up-main-nav .sub-menu .sub-menu.open-left,
.gothic-up-main-nav .children .children.open-left {
    left: auto;
    right: 100%;
    margin-right: 0;
    transform: translateX(20px) scale(0.95);
}

.gothic-up-main-nav .sub-menu .sub-menu.open-left:hover,
.gothic-up-main-nav .children .children.open-left:hover {
    transform: translateX(0) scale(1);
}

/* Arrow adjustment for left-opening menus */
.gothic-up-main-nav > li > a::after,
.gothic-up-main-nav .children > li > a::after {
    content: "◀" !important;
    float: left;
    margin-right: 10px;
    margin-left: 0;
}

/* Ensure WordPress generates proper structure */
.gothic-up-main-nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: #0d0d0d;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 20px rgba(0,0,0,0.9);
    z-index: 1000;
    pointer-events: none;
}

.gothic-up-main-nav ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Second level and deeper with horizontal animation */
.gothic-up-main-nav ul ul ul {
    top: -2px;
    left: 100%;
    margin-left: 0;
    z-index: 1001;
    transform: translateX(-20px) scale(0.95);
}

.gothic-up-main-nav ul ul li:hover > ul {
    transform: translateX(0) scale(1);
}

.gothic-up-main-nav ul ul li {
    position: relative;
}

/* Right Controls Container */
.gothic-up-controls {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Language and Search group */
.gothic-up-lang-search-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 12px;
}

/* Language Switcher Dropdown */
.gothic-up-lang-switcher {
    position: relative;
    margin: 0;
}

.gothic-up-lang-toggle {
    padding: 8px 12px;
    color: #d0d0d0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.gothic-up-lang-toggle::after {
    content: "▼";
    font-size: 0.5rem;
    transition: transform 0.3s ease;
}

.gothic-up-lang-switcher:hover .gothic-up-lang-toggle::after,
.gothic-up-lang-switcher.active .gothic-up-lang-toggle::after {
    transform: rotate(180deg);
}

.gothic-up-lang-toggle:hover {
    color: #e4002b;
    background: none;
}

.gothic-up-lang-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 100px;
    background: #0d0d0d;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-15px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 20px rgba(0,0,0,0.9);
    z-index: 1000;
}

.gothic-up-lang-switcher:hover .gothic-up-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.gothic-up-lang-dropdown a {
    display: block;
    padding: 10px 15px;
    color: #d0d0d0;
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: color 0.2s ease, padding-left 0.2s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.gothic-up-lang-dropdown a:hover,
.gothic-up-lang-dropdown a.active {
    color: #e4002b;
    padding-left: 20px;
}

/* Search Icon */
.gothic-up-search-toggle {
    background: none;
    border: none;
    color: #d0d0d0;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
    position: relative;
    margin: 0;
    line-height: 0;
}

.gothic-up-search-toggle:hover {
    color: #e4002b;
    background: none;
}

/* Social Media Icons Styles */
.gothic-up-social-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gothic-up-social-icons a {
    color: #d0d0d0;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.gothic-up-social-icons a:hover {
    transform: translateY(-2px);
}

/* Individual social media hover colors */
.gothic-up-social-icons a:hover .fa-facebook-f {
    color: #4267B2;
}

.gothic-up-social-icons a:hover .fa-discord {
    color: #7289DA;
}

.gothic-up-social-icons a:hover .fa-youtube {
    color: #FF0000;
}

/* Social Media Icons - Desktop visibility */
@media (max-width: 991px) {
    .gothic-up-social-icons {
        display: none !important;
    }
}

/* Social Media Icons in Mobile Menu */
.gothic-up-mobile-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid rgba(139, 0, 0, 0.2);
}

.gothic-up-mobile-social a {
    color: #d0d0d0 !important;
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    text-decoration: none !important;
    overflow: visible !important;
    position: relative !important;
}

.gothic-up-mobile-social a::before {
    display: none !important;
}

.gothic-up-mobile-social a:hover {
    transform: translateY(-2px);
    background: transparent !important;
    padding: 0 !important;
    padding-left: 0 !important;
    border-bottom: none !important;
}

.gothic-up-mobile-social a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gothic-up-mobile-social a:hover .fa-facebook-f {
    color: #4267B2;
}

.gothic-up-mobile-social a:hover .fa-discord {
    color: #7289DA;
}

.gothic-up-mobile-social a:hover .fa-youtube {
    color: #FF0000;
}

/* Mobile Menu Toggle */
.gothic-up-mobile-toggle {
    display: block;
    background: none;
    border: none;
    color: #d0d0d0;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

@media (min-width: 992px) {
    .gothic-up-mobile-toggle {
        display: none;
    }
    
    .gothic-up-mobile-social {
        display: none;
    }
}

.gothic-up-mobile-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #d0d0d0;
    margin: 5px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gothic-up-mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.gothic-up-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.gothic-up-mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu */
.gothic-up-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 80%;
    height: 100dvh;
    background: #0d0d0d;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    padding-top: calc(60px + var(--admin-bar-height));
    font-family: 'Montserrat', sans-serif;
}

.gothic-up-mobile-menu.active {
    right: 0;
}

.gothic-up-mobile-menu ul {
    font-size: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gothic-up-mobile-menu a {
    display: block;
    padding: 15px 20px;
    color: #d0d0d0;
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 0, 0, 0.2);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.gothic-up-mobile-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #8b0000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.gothic-up-mobile-menu a:hover {
    background: rgba(139, 0, 0, 0.2);
    color: #ffffff;
    padding-left: 30px;
}

.gothic-up-mobile-menu a:hover::before {
    transform: translateX(0);
}

.gothic-up-mobile-menu .menu-item-has-children > a {
    position: relative;
    display: flex;
    align-items: center;
}

.gothic-up-mobile-menu .menu-item-has-children > a::after {
    content: "►";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: transform 0.3s ease;
    line-height: 1;
}

.gothic-up-mobile-menu .menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(90deg);
}

.gothic-up-mobile-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    padding-left: 20px;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.gothic-up-mobile-menu .sub-menu.active {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.4s ease-in, opacity 0.3s ease-in;
}

.mobile-menu-icon {
    display: none;
    width: 40px; /* dostosuj rozmiar ikony do swoich potrzeb */
    height: auto;
    margin-right: 10px; /* odstęp ikony od tekstu */
    vertical-align: middle; /* wyrównanie do tekstu */
}

@media (max-width: 768px) {
    .mobile-menu-icon {
        display: inline-block;
    }
}

/* Mobile Menu Overlay */
.gothic-up-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9997;
    display: none;
    backdrop-filter: blur(5px);
}

.gothic-up-mobile-overlay.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- SEARCH ENGINE STYLES (Faster, Overlay Fix, Spinner, Clear Icon) --- */

/* Kontener główny - pasek pod menu */
.gothic-up-search-container {
    width: 100%;
    background: #0d0d0d; 
    padding: 20px 0;
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    /* WAŻNE: Overflow hidden tylko podczas animacji. */
    overflow: hidden; 
}

/* Klasy dla animacji - Przyspieszone do 0.25s */
.gothic-up-search-container.active {
    display: block;
    animation: slideOpen 0.25s ease-out forwards;
    overflow: visible; /* Pozwalamy wystawać wynikom gdy otwarte */
}

.gothic-up-search-container.closing {
    display: block;
    animation: slideClose 0.25s ease-in forwards;
    overflow: hidden !important; 
}

@keyframes slideOpen {
    from { 
        opacity: 1; 
        transform: translateY(-20px);
        max-height: 0;
        overflow: hidden;
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
        max-height: 500px;
        overflow: visible;
    }
}

@keyframes slideClose {
    from { 
        opacity: 1; 
        transform: translateY(0);
        max-height: 500px;
        overflow: hidden;
    }
    to { 
        opacity: 1; 
        transform: translateY(-20px);
        max-height: 0;
        overflow: hidden;
    }
}

/* Pudełko centrujące */
.gothic-up-search-box {
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    position: relative; 
}

.gothic-up-search-box form {
    position: relative;
    width: 100%;
    z-index: 20;
}

/* Pole input */
.gothic-up-search-box input[type="search"] {
    width: 100%;
    padding: 15px 20px;
    /* Zwiększony padding-right dla dwóch ikon */
    padding-right: 90px !important; 
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: #ffffff;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    transition: border-color 0.2s, background 0.2s;
}

.gothic-up-search-box input[type="search"]:focus {
    border-color: #8b0000;
    background: #1a1a1a;
}

/* 1. UKRYCIE SYSTEMOWEGO KRZYŻYKA */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none !important;
}

/* 2. STYLIZACJA NOWEGO KRZYŻYKA (Font Awesome) */
.search-clear-icon {
    position: absolute;
    right: 50px; /* Pozycja na lewo od lupy */
    top: 50%;
    transform: translateY(-50%);
    
    color: #6b7280; /* Kolor szary */
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    
    padding: 10px; /* Obszar kliknięcia */
    display: none; /* Domyślnie ukryty */
    
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

/* Kiedy JS doda styl visible, ta klasa zadba o flex */
.search-clear-icon.visible {
    display: flex !important;
}

.search-clear-icon:hover {
    color: #ffffff; /* Zmiana na biały przy hover */
}

/* Ikona lupy wewnątrz inputa */
.search-icon-display {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

/* --- WYNIKI WYSZUKIWANIA --- */

.gothic-up-search-results {
    position: absolute; 
    top: 100%; 
    left: 0;
    width: 100%;
    margin-top: 5px;
    background: #1a1a1a;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.9);
    z-index: 100;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
    border: 1px solid rgba(255,255,255,0.05);
}

.gothic-up-search-results.active {
    display: block;
    animation: fadeInResults 0.2s ease;
}

@keyframes fadeInResults {
    from { opacity: 1; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stylizacja elementów wyniku */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
    text-decoration: none !important;
}

.search-result-item:hover {
    background: rgba(255,255,255,0.08);
    text-decoration: none !important;
}

.search-result-thumb {
    width: 120px;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 3px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.search-result-item:hover .search-result-thumb img {
    transform: scale(1.05);
}

.search-result-content {
    flex: 1;
}

.search-result-title {
    display: block;
    color: #e0e0e0;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 5px;
    line-height: 1.3;
    text-decoration: none !important;
}

.search-result-item:hover .search-result-title {
    color: #e4002b;
    text-decoration: none !important;
}

.search-result-date {
    display: block;
    color: #888;
    font-size: 0.75rem;
}

/* Przycisk "Zobacz wszystkie" */
.search-show-all {
    display: block;
    text-align: center;
    padding: 15px;
    background: #292e38;
    color: white !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: background 0.2s;
}

.search-show-all:hover {
    background: #6b7280;
}

/* ANIMACJA ŁADOWANIA (SPINNER) */
.search-loading {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    border-top-color: #e4002b;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

/* Scrollbar dla wyników */
.gothic-up-search-results::-webkit-scrollbar { width: 6px; }
.gothic-up-search-results::-webkit-scrollbar-track { background: #1a1a1a; }
.gothic-up-search-results::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }


/* Touch device styles (bez zmian) */
.touch-device .gothic-up-main-nav .menu-item-has-children > a,
.touch-device .gothic-up-main-nav .page_item_has_children > a { position: relative; }
.touch-device .gothic-up-main-nav .touch-opened > .sub-menu,
.touch-device .gothic-up-main-nav .touch-opened > .children,
.touch-device .gothic-up-main-nav .touch-opened > ul { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.touch-device .gothic-up-main-nav .touching > a { background: rgba(228, 0, 43, 0.1); }
.touch-device .gothic-up-main-nav .touch-opened > a { color: #e4002b; }
.touch-device .gothic-up-main-nav .touch-opened > a::after { transform: rotate(180deg); }
.touch-device .gothic-up-main-nav .touch-opened .touch-opened > .sub-menu,
.touch-device .gothic-up-main-nav .touch-opened .touch-opened > .children { opacity: 1; visibility: visible; transform: translateX(0) scale(1); pointer-events: auto; }
.touch-device .gothic-up-main-nav .touch-opened > a::before { content: "✓"; position: absolute; left: 5px; color: #e4002b; font-size: 0.7rem; opacity: 0; animation: fadeInQuick 0.3s forwards; }
@keyframes fadeInQuick { to { opacity: 1; } }
.touch-device .gothic-up-main-nav a { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@media (max-width: 991px) { .touch-device .gothic-up-main-nav > ul > li > a { min-height: 44px; display: flex; align-items: center; } }
@media (max-width: 768px) {
    .gothic-up-lang-search-group { border-right: none; margin-right: 8px; }
    .gothic-up-lang-dropdown { left: auto; right: 0; transform: translateY(-15px); }
    .gothic-up-lang-switcher:hover .gothic-up-lang-dropdown { transform: translateY(0); }
}
@media (max-width: 480px) {
    .gothic-up-lang-switcher { display: none; }
    .gothic-up-lang-search-group { border-left: none; padding-left: 0; }
}
.gothic-up-mobile-menu .menu-item-type-custom > a,
.gothic-up-mobile-menu .menu-item-object-custom > a { color: #d0d0d0 !important; }

/* Author Box Styles (bez zmian) */
.author-archive .page-title { margin-bottom: 1.5rem; }
.author-box-archive { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 2.5rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: 12px; color: #fff; }
.author-avatar { flex: 0 0 120px; margin-right: 1.5rem; margin-bottom: 0; }
.author-avatar-img { border-radius: 50%; max-width: 100%; height: auto; display: block; }
.author-details { flex: 1; }
.author-details p { margin-top: 0; margin-bottom: 1rem; }
.author-details p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
    .author-box-archive { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
    .author-avatar { margin-right: 0; margin-bottom: 1rem; }
}

/* =========================================
   ADVANCED SEARCH PANEL
   ========================================= */

.advanced-search-panel {
    background-color: var(--bg-secondary);
    padding: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Układ siatki dla pól formularza */
.search-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    align-items: end;
}

/* Grupa (Etykieta + Pole) */
.search-group {
    display: flex;
    flex-direction: column;
}

.search-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

/* --- STYLIZACJA PÓL INPUT I SELECT --- */
.advanced-search-panel input[type="search"],
.advanced-search-panel input[type="date"],
.advanced-search-panel select.gothic-select {
    background: var(--bg-inputs); /* Bardzo ciemny (#080a0f) */
    border: 1px solid var(--border-color);
    color: #fff; /* Biały tekst */
    padding: 10px;
    border-radius: 3px;
    font-size: 0.9rem;
    width: 100%;
    height: 42px;
    outline: none;
    transition: border-color 0.2s;
    
    /* Ustawienie systemowego fontu dla placeholderów daty */
    font-family: inherit;
}

.advanced-search-panel input:focus,
.advanced-search-panel select:focus {
    border-color: var(--accent-color);
}

/* --- POPRAWKA WIDOCZNOŚCI KATEGORII (Select Dropdown) --- */
.advanced-search-panel select.gothic-select option {
    background-color: var(--bg-secondary);
    color: #fff;
    padding: 10px;
}

/* --- STYLIZACJA IKONY KALENDARZA (FONT AWESOME SVG) --- */
/* Ukrywamy domyślną ikonę i wstawiamy SVG z Font Awesome */
.advanced-search-panel input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0); /* Ukrywa systemowy symbol */
    opacity: 1;
    display: block;
    
    /* Ikona Font Awesome (Calendar Alt Solid) zakodowana jako tło */
    background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath fill="%23ffffff" d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"/%3E%3C/svg%3E') no-repeat center;
    
    background-size: 16px; /* Rozmiar ikony */
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 5px;
}

/* Zmiana koloru na czerwony po najechaniu na ikonę */
.advanced-search-panel input[type="date"]:hover::-webkit-calendar-picker-indicator {
    background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath fill="%23c44d4d" d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 16px;
}

/* --- POPRAWKA DLA WYSKAKUJĄCEGO KALENDARZA (Chromium) --- */
::-webkit-datetime-edit-fields-wrapper { background: var(--bg-inputs); }
::-webkit-datetime-edit-text { color: #888; padding: 0 2px; }
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field { color: #fff; }

/* --- PRZYCISK FILTRUJ --- */
.search-submit-btn {
    background: var(--accent-color);
    color: #fff;
    border: none;
    height: 42px;
    width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 3px;
}

.search-submit-btn:hover {
    background: #a00000;
}

/* --- KOMUNIKAT BRAK WYNIKÓW --- */
.no-results-container {
    padding: 40px;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/*---------------------
DODATKOWE--------------
---------------------*/

.gothicup-hero-main-header {
    margin-bottom: 20px;}

       .social-container1 {
            display: flex;
					width: 100%;
					gap: 2%;
        }

        .social-tile1 {
            width: 25%;
            height: 70px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            text-decoration: none;
            color: var(--text-main);
            font-size: 0.75em;
            transition: background-color 0.3s;
        }

.social-tile1 i {
font-size: 2.6em;
 margin-bottom: 5px;
        }

.social-tile1:hover {
color: white;
text-decoration: none;
        }

        .forum:hover { background-color: #366c36; }
        .facebook:hover { background-color: #3b5998; }
        .discord:hover { background-color: #7289da; }
        .youtube:hover { background-color: #c4302b; }

        .related_post_img img {
    	    height: 200px;
    object-fit: cover;
		border-radius: 1%;}

.related-post{
background-color: var(--bg-secondary);
padding: 15px;
border-radius: 12px;
}
                
.headline {
font-size: 18px;
margin: 0 !important;
padding-right: 10px;
padding-left: 10px;
font-family: var(--font-heading);
text-transform: uppercase;
display: flex;
align-items: center;
width: 100%;
color: #ffffff;
font-weight: 700;
}

.related-title {
text-transform: uppercase;
font-size: 1rem;
color: #fff;
font-family: var(--font-heading);
font-style: normal;
font-weight: 700;
}

.related-title > a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: .15s color;
    -o-transition: .15s color;
	transition: .15s color;}

.related-title > a:hover, .related-title > a.hover {
	color: #dd163b;}

.headline::before,
.headline::after {
    content: '';
    height: 4px;
    background-color: #fff;
    display: block;
}

.headline::before {
    width: 30px;
    margin-right: 15px;
}

.headline::after {
    flex-grow: 1;
    margin-left: 15px;
}

.post-list {
    display: flex;
    text-align: center;
    justify-content: center;}

    .related-post .post-list .item .post_thumb {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
}

.related-post .post-list .item .thumb img {
width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.dcf-load-more-btn {
    text-transform: none;
}

figure.wp-block-embed {
    width: 100% !important;
    max-width: 100%;}

    .wp-block-embed__wrapper {
    width: 100%;
    display: block;
}

.wp-block-embed iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;    
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid var(--border-color);
}

.entry-content .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wp-block-separator {
    display: block;
    margin: 1rem auto;
    cursor: default;
    border: 0;
    border-top: 4px solid #dd163b;
    max-width: 100px;
}

/* Przypisy */
ol:has(li[id^="przypis"]), 
.wp-block-footnotes {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid #dd163b; 
    padding: 1.5rem 1.5rem 1.5rem 2.5rem; 
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 0.85em; 
    color: #94a3b8; 
}

ol:has(li[id^="przypis"]) li, 
.wp-block-footnotes li {
    line-height: 1.6;
}

ol:has(li[id^="przypis"]) li:last-child, 
.wp-block-footnotes li:last-child {
    margin-bottom: 0;
}

ol:has(li[id^="przypis"]) li::marker, 
.wp-block-footnotes li::marker {
    color: #64748b;
    font-weight: 600;
}

ol:has(li[id^="przypis"]) li a, 
.wp-block-footnotes li a {
    color: #dd163b;
    text-decoration: none;
    transition: color 0.2s ease;
}

ol:has(li[id^="przypis"]) li a:hover, 
.wp-block-footnotes li a:hover {
    color: #ff3b5c; 
    text-decoration: underline;
}

/* Kontener tagów */
.post-tags-container {
    display: flex;
    flex-wrap: wrap;       /* Tagi przejdą do nowej linii, jeśli zabraknie miejsca */
    align-items: center;
    gap: 8px;             /* Odstępy między tagami */
}

/* Tekst "Tagi:" przed listą */
.tags-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;        /* Zgaszony szary */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Wygląd pojedynczego tagu (pigułki) */
.post-tags-container a {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: #fff;                           /* Czerwony tekst */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;                      /* Maksymalne zaokrąglenie - efekt pigułki */
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;                /* Płynna animacja najechania */
}

/* Efekt najechania kursorem (Hover) */
.post-tags-container a:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #f0f0f0;
}

.wp-block-image {
    margin: 0px 0px 21px;
}

.wp-element-caption {
    color: var(--text-main);
}

/* Zabezpieczenie obrazków z podpisami przed rozpychaniem ekranu na smartfonach */
.wp-block-image figure.aligncenter,
.wp-block-image figure.alignleft,
.wp-block-image figure.alignright,
.wp-block-image .aligncenter {
    display: table;
    max-width: 100%;
}

.wp-block-image figcaption {
    display: block !important;
    text-align: center;
}

.header-404 {
    clear: both;
    color: #fff;
    margin: 0 0 0.8em 0;
    line-height: 1.2;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.copyrights {
    font-size: var(--paragraph-size);
    text-align: center;
}

.wp-block-blockons-image-comparison.align-center {
    justify-content: center;
    text-align: center;
}

/* =========================================
   ZAKŁADKI MODYFIKACJI (baza modów)
   ========================================= */

/* Główny kontener */
.mod-tabs-wrapper {
    margin-bottom: 40px;
}

/* Lista nawigacyjna (pasek zakładek) */
.mod-tabs-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    background-color: #000;
    width: 100%;
}

/* Stylizacja strzałek */
.mod-tabs-arrow {
    position: absolute;
    top: 0;
    bottom: 0; /* Rozciąga strzałkę na całą wysokość menu */
    z-index: 10;
    color: #a0a0a0; /* Główny czerwony kolor Gothic Up */
    border: none;
    width: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Ukryte domyślnie, włączy je JS */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, color 0.3s;
}

/* Kiedy JS doda klasę visible */
.mod-tabs-arrow.visible {
    opacity: 1;
    visibility: visible;
}

/* Lewa strzałka z gradientem tła (estetyczne odcięcie) */
.mod-tabs-arrow.arrow-left {
    left: 0;
    background: linear-gradient(90deg, #000 50%, transparent 100%);
}

/* Prawa strzałka z gradientem tła */
.mod-tabs-arrow.arrow-right {
    right: 0;
    background: linear-gradient(270deg, #000 50%, transparent 100%);
}

.mod-tabs-arrow:hover {
    color: #fff; /* Po najechaniu zmienia kolor na biały */
}

.mod-tabs-nav {
    list-style: none !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    background-color: #000;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 0 0;
}

.mod-tabs-nav::-webkit-scrollbar {
    display: none;
}

/* Pojedynczy przycisk zakładki */
.mod-tab-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 12px 10px;
    background-color: transparent;
    color: #a0a0a0; /* Zgaszony szary dla nieaktywnych */
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-family: 'Montserrat';
}

/* Efekt najechania myszką (Hover) */
.mod-tab-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.03); /* Bardzo delikatne rozjaśnienie tła */
}

/* Aktywna zakładka */
.mod-tab-link.active {
    color: #ffffff;
    border-bottom: 2px solid #ffffff; /* Biała linia podkreślająca aktywną kartę */
    background-color: rgba(255, 255, 255, 0.05);
}

/* Kontener na treść */
.mod-tabs-content {
    min-height: 200px; /* Minimalna wysokość, żeby strona nie skakała zbytnio przy zmianie */
}

/* Ukrywanie i pokazywanie kart (z animacją) */
.mod-tab-pane {
    display: none;
    animation: fadeInTab 0.4s ease forwards;
}

.mod-tab-pane.active {
    display: block;
}

/* Animacja płynnego pojawiania się */
@keyframes fadeInTab {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Poprawka dla obrazka w karcie moda */
.hero-image-container-mod {
    position: relative;
    width: 100%;
    border-radius: 12px;
    background: #f0f0f0;
}
.hero-image-container-mod img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   STYLOWANIE KLASYCZNEJ GALERII WP (W ZAKŁADCE)
   ========================================= */

.mod-tab-pane .gallery {
    display: grid;
    gap: 15px; /* Odstęp między zdjęciami */
    margin: 0;
}

/* Obsługa ilości kolumn ustawianych w panelu WP */
.mod-tab-pane .gallery.gallery-columns-1 { grid-template-columns: 1fr; }
.mod-tab-pane .gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.mod-tab-pane .gallery.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.mod-tab-pane .gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.mod-tab-pane .gallery.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.mod-tab-pane .gallery.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Domyślny wygląd pojedynczego elementu */
.mod-tab-pane .gallery-item {
    margin: 0;
    text-align: center;
}

.mod-tab-pane .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Delikatna ramka */
    border-radius: 4px; /* Lekkie zaokrąglenie rogów */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Efekt najechania (Hover) dopasowany do klimatu Gothic UP */
.mod-tab-pane .gallery-item img:hover {
    transform: scale(1.03); /* Minimalne powiększenie */
    border-color: rgba(255, 255, 255, 0.5); /* Rozjaśnienie ramki */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Podpis pod zdjęciem (jeśli go dodasz) */
.mod-tab-pane .gallery-caption {
    font-size: 13px;
    color: #a0a0a0;
    padding-top: 8px;
    margin: 0;
}

/* RWD - Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
    /* Na tabletach wymuszamy maksymalnie 2 kolumny */
    .mod-tab-pane .gallery[class*="gallery-columns-"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* Na telefonach wymuszamy 1 kolumnę */
    .mod-tab-pane .gallery[class*="gallery-columns-"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Baza Modów Gothic UP - Główne Style
   ========================================================================== */

/* --------------------------------------------------------------------------
   CZĘŚĆ 1: STRONA GŁÓWNA BAZY MODÓW (Archiwum / Lista wyników)
   -------------------------------------------------------------------------- */

/* Kontener główny naprawiający szerokość motywu */
.mod-archive-main {
    width: 100%;
    max-width: none !important;
    display: block;
}

/* --- Sekcja Filtrów i Wyszukiwarki --- */
.mod-filters-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.mod-filter-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.filter-group label {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    font-family: var(--font-heading);
}

.filter-group input[type="text"],
.filter-group select {
    width: 100%;
    padding: 12px 15px;
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.filter-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    padding-right: 40px !important;
    cursor: pointer;
}

.filter-group input[type="text"]:focus,
.filter-group select:focus {
    outline: none;
    border-color: #dd163b;
}

/* --- Przyciski Filtrów --- */
.filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-filtruj {
    padding: 12px 35px !important;
    background-color: #dd163b !important;
    color: #000 !important;
    border: none !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-filtruj:hover {
    background-color: #eebb77 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(217, 160, 91, 0.2);
}

.btn-reset {
    padding: 12px 25px !important;
    background-color: transparent !important;
    color: #a0a0a0 !important;
    border: 1px solid #444 !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease !important;
    display: flex;
    align-items: center;
}

.btn-reset:hover {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #666 !important;
}

/* --- Siatka Wyników i Kafelki --- */
.mod-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
}

.mod-grid-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mod-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

.mod-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.mod-card-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #111;
}

.mod-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.mod-grid-card:hover .mod-card-thumbnail img {
    transform: scale(1.05);
}

.mod-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0) 50%);
}

.mod-card-badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    z-index: 2;
}

.badge {
    padding: 3px 8px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 3px;
    color: #fff;
}

.badge.platform { background-color: rgba(217, 160, 91, 0.9); color: #000; }
.badge.type { background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); }

.badge.likes {
    display: inline-block;
    padding: 3px 6px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.badge.likes i {
    color: #F91880;
    margin-right: 4px;
}

.mod-card-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.mod-card-title {
    margin: 0;
    font-size: 18px;
    color: #fff;
    line-height: 1.3;
    transition: color 0.2s;
}

.mod-grid-card:hover .mod-card-title {
    color: var(--link-color);
}


/* --------------------------------------------------------------------------
   CZĘŚĆ 2: KARTA POJEDYNCZEJ MODYFIKACJI
   -------------------------------------------------------------------------- */

/* --- Główny układ opływający (Float) --- */
.mod-layout-float {
    display: block; 
    width: 100%;
}

/* Rozbicie kontenerów dla poprawnego opływania tekstu */
.mod-tabs-content, 
.mod-tab-pane.active, 
.mod-news-list {
    overflow: visible !important;
    display: contents !important;
}

.mod-tab-pane:not(.active) {
    display: none !important;
}

/* --- Panel Boczny z informacjami --- */
.mod-sidebar-info {
    float: right; 
    width: clamp(240px, 35%, 340px);
    margin-left: 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

.mod-info-box {
    border-radius: 8px;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
}

.mod-info-box .widget-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.info-box-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.info-box-list li {
    display: flex;
    justify-content: space-between; 
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.info-box-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label { color: #888; font-weight: 500; font-family: var(--font-heading); }
.info-value { color: #ddd; text-align: right; max-width: 60%; }

.info-value a {
    color: var(--accent-color, #d9a05b); 
    text-decoration: none;
    transition: color 0.2s;
}

.info-value a:hover {
    color: var(--link-color, #fff);
}

.mod-tabs-content h1,
.mod-tabs-content h2,
.mod-tabs-content h3,
.mod-tabs-content h4,
.mod-tabs-content h5,
.mod-tabs-content h6,
.mod-tabs-content ul,
.mod-tabs-content ol,
.mod-tabs-content p {
    clear: none !important;
    margin-top: 0;
}

.mod-tabs-content p,
.mod-tabs-content ul {
    margin-bottom: 0.7em;
}

/* =========================================
   ZAKŁADKA DOWNLOAD
   ========================================= */

/* Kontener - nowoczesna siatka układająca kafelki obok siebie */
.mod-download-buttons {
    display: grid;
    /* auto-fill zamiast auto-fit zapobiega nadmiernemu rozciąganiu, gdy kafelków jest mało */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 15px;
    /* Celowo nie dajemy tu width: 100%, by grid ładnie opływał panel boczny! */
}

/* Pojedynczy kafelek */
.dl-btn {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    
    /* MAGIA: Wymuszamy ładne proporcje! 
       Kafelki zawsze będą miały idealny kształt, np. 4:3 (szerokość do wysokości). 
       Możesz też użyć 3/2, jeśli wolisz by były ciut szersze. */
    aspect-ratio: 4 / 3; 
    
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px; 
    text-decoration: none !important;
    color: #a0a0a0 !important; 
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Kontener na ikonę (Okrągłe tło) */
.dl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.dl-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor; /* Dziedziczy kolor przypisany w CSS niżej */
    transition: transform 0.3s ease;
}

/* --- OGÓLNY EFEKT HOVER DLA WSZYSTKICH KAFELKÓW --- */
.dl-btn:hover {
    color: #fff !important; /* Tekst rozjaśnia się na biało */
    transform: translateY(-5px); /* Uniesienie kafelka */
    background: rgba(255, 255, 255, 0.05);
}

.dl-btn:hover .dl-icon {
    transform: scale(1.1); /* Ikona lekko rośnie */
}


/* =========================================
   INDYWIDUALNE KOLORY PLATFORM
   ========================================= */

/* 1. GOTHIC UP (Twój główny serwer - Czerwony/Bordowy) */
.dl-gothicup .dl-icon { color: #dd163b; }
.dl-gothicup:hover { 
    border-color: #dd163b; 
    box-shadow: 0 10px 25px rgba(221, 22, 59, 0.15); 
}
.dl-gothicup:hover .dl-icon { 
    background: #dd163b; 
    color: #fff; 
}

/* 2. STEAM (Jasnoniebieski) */
.dl-steam .dl-icon { color: #66c0f4; }
.dl-steam:hover { 
    border-color: #66c0f4; 
    box-shadow: 0 10px 25px rgba(102, 192, 244, 0.15); 
}
.dl-steam:hover .dl-icon { 
    background: #66c0f4; 
    color: #000; 
}

/* 3. GOG (Fioletowy) */
.dl-gog .dl-icon { color: #c971ff; }
.dl-gog:hover { 
    border-color: #c971ff; 
    box-shadow: 0 10px 25px rgba(201, 113, 255, 0.15); 
}
.dl-gog:hover .dl-icon { 
    background: #c971ff; 
    color: #fff; 
}

/* 4. MOD DB (Czerwony) */
.dl-moddb .dl-icon { color: #ff3333; }
.dl-moddb:hover { 
    border-color: #ff3333; 
    box-shadow: 0 10px 25px rgba(255, 51, 51, 0.15); 
}
.dl-moddb:hover .dl-icon { 
    background: #ff3333; 
    color: #fff; 
}

/* 5. GOOGLE DRIVE (Niebieski Google) */
.dl-gdrive .dl-icon { color: #4285F4; }
.dl-gdrive:hover { 
    border-color: #4285F4; 
    box-shadow: 0 10px 25px rgba(66, 133, 244, 0.15); 
}
.dl-gdrive:hover .dl-icon { 
    background: #4285F4; 
    color: #fff; 
}

/* 6. ZEWNĘTRZNY SERWER (Biały/Szary) */
.dl-external .dl-icon { color: #a0a0a0; }
.dl-external:hover { 
    border-color: #fff; 
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1); 
}
.dl-external:hover .dl-icon { 
    background: #fff; 
    color: #000; 
}

/* --- Zakładka Aktualności na karcie moda --- */
.mod-news-item {
    display: flex; 
    gap: 25px;
    margin-bottom: 20px; 
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid #dd163b;
    padding: 20px;
    border-radius: 8px 6px 6px 8px;
    transition: background 0.3s;
    align-items: flex-start;
}

.mod-news-item:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* MAGIA: Drugi news i kolejne - wymuszenie szerokości 100% pod panelem */
.mod-news-item:nth-of-type(2) {
    clear: right !important; /* lub both */
}

.mod-news-thumbnail {
    flex-shrink: 0;
    width: 240px;
    border-radius: 4px;
    overflow: hidden;
}

.mod-news-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mod-news-item:hover .mod-news-thumbnail img {
    transform: scale(1.05); 
}

.mod-news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mod-news-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.mod-news-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 1.3;
}

.mod-news-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.mod-news-title a:hover {
    color: var(--link-color);
}

.mod-news-excerpt {
    font-size: 14px;
    color: #a0a0a0;
    margin-bottom: 12px;
    line-height: 1.5;
}

.mod-news-readmore {
    font-size: 13px;
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
    margin-top: auto; 
}

.mod-news-readmore:hover {
    color: var(--accent-color);
}

/* --- Odznaki wyszukiwania REST API --- */
.search-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    color: #fff;
}
.badge-post { background-color: #3b82f6; } 
.badge-mody { background-color: #f59e0b; }


.mod-news-readmore {
    display: inline-flex; /* Flexbox ustawia tekst i ikonę w jednym rzędzie */
    align-items: center;  /* Idealne wyśrodkowanie ikony w pionie względem tekstu */
    font-size: 13px;
    color: var(--link-color, #d9a05b); /* Domyślny kolor */
    text-decoration: none;
    font-weight: bold;
    margin-top: auto; 
    transition: color 0.3s ease;
    width: fit-content;   /* Zabezpieczenie przed rozciąganiem linku na całą szerokość */
}

/* Stylowanie samej strzałki SVG */
.mod-news-readmore svg {
    width: 16px; /* Lekkie zmniejszenie strzałki, by lepiej pasowała do fontu 13px */
    height: 16px;
    transition: transform 0.3s ease; /* Płynna animacja ruchu */
}

/* --------------------------------------------------------------------------
   CZĘŚĆ 3: RESPONSYWNOŚĆ (Media Queries zbiorcze dla obu widoków)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    
    /* Archiwum: Filtry dzielą się na 2 kolumny */
    .mod-filter-form {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Karta moda: Wyłączenie opływania, panel spada pod tekst lub na górę */
    .mod-sidebar-info {
        float: none; 
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }
    
    /* Karta moda (Aktualności): Wszystkie newsy na telefonie w pionie */
    .mod-news-item {
        flex-direction: column;
    }
    
    .mod-news-thumbnail {
        width: 100%;
    }
}

@media (max-width: 576px) {
    /* Archiwum: Filtry w jednej kolumnie na telefonach */
    .mod-filter-form {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        justify-content: center;
        flex-direction: column; 
    }
    
    .btn-filtruj, .btn-reset {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    .mod-filters-section {
        padding: 15px;
    }
}

@media (max-width: 992px) {
    /* Zamieniamy główny kontener w kolumnę Flexbox */
    .mod-layout-float {
        display: flex;
        flex-direction: column;
    }

    /* Wymuszamy, aby główna treść (Opis) była pierwsza (na górze) */
    .mod-tabs-content {
        order: 1;
    }

    /* Box z Informacjami dajemy na pozycję drugą (na dół) */
    .mod-sidebar-info {
        order: 2;
        margin-top: 40px; /* Dodajemy trochę oddechu, żeby box nie przyklejał się do tekstu wyżej */
    }
}
/* Baza modów Download w sidebarze */
/* Główny kontener wrapper */
.bmgup-download-wrapper {
    position: relative;
    display: block; /* Zmieniono, aby kontener zajął całą szerokość sidebara */
    width: 100%;
}

/* Nowy kontener dla przycisków */
.bmgup-action-row {
    display: flex;
    gap: 8px; /* Odstęp między przyciskami (możesz dostosować) */
    width: 100%;
}

/* Stylowanie głównego przycisku */
.bmgup-main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #d10000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    font-family: Montserrat;
    flex-grow: 1;
    height: 45px;
}

.bmgup-main-btn:hover {
    background-color: #a80000; /* Delikatny hover, żeby widać było interakcję */
}

/* Stylowanie nowych, kwadratowych przycisków */
.bmgup-square-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Stała szerokość */
    height: 45px; /* Stała wysokość (taka jak w bmgup-main-btn dla równej linii) */
    flex-shrink: 0; /* Chroni przed ściśnięciem przycisku */
    background-color: #292e38;
    color: #888;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 16px;
}

.bmgup-square-btn:hover {
    color: #ddd;
    background-color: #2f3541;
}

.bmgup-main-btn:hover {
    background-color: #dd163b;
}

/* -------------------------------------------
   STYLE DLA WYSUWANEJ LISTY
------------------------------------------- */
.bmgup-download-list {
    display: none; /* Domyślnie ukryte, kontrolowane przez JS */
    position: absolute;
    top: 100%;
    left: 0;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 260px;
    z-index: 1000;
    overflow: hidden;
}

/* Klasa aktywująca rozwinięcie (dodawana przez JS) */
.bmgup-download-list.bmgup-is-active {
    display: block;
}

/* Resetowanie stylów dla elementów listy */
.bmgup-download-list li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Stylowanie linków w liście */
.bmgup-download-list a.bmgup-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #334155;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Usunięcie dolnej linii dla ostatniego elementu w liście */
.bmgup-download-list li:last-child a.bmgup-btn {
    border-bottom: none;
}

/* Efekt najechania myszką na element listy */
.bmgup-download-list a.bmgup-btn:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

/* Kontener dla ikon */
.bmgup-download-list .bmgup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #64748b;
}

/* Wymuszanie odpowiedniego rozmiaru ikon SVG */
.bmgup-download-list .bmgup-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}


/* --- UKRYWANIE PRZYCISKÓW NA DESKTOPIE --- */
.mobile-sidebar-toggle,
.sidebar-close-btn {
    display: none;
}

/* --- WYGLĄD DLA DESKTOPÓW (Powyżej 991px) - Twój kod --- */
@media (min-width: 992px) {
    .widget-area-mody {
        position: -webkit-sticky;
        position: sticky;
        align-self: start;
        height: auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        top: 120px; 
        transition: top 0.3s ease;
        z-index: 90;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        background-color: var(--bg-secondary);
        border-radius: 12px;
    }

    .widget-area-mody::-webkit-scrollbar {
        display: none;
        width: 0;
        background: transparent;
    }
}
.admin-bar .widget-area-mody { top: 152px; }

/* --- WYGLĄD MOBILNY I EFEKT WYSUWANIA (Poniżej 992px) --- */
@media (max-width: 991px) {
    
    /* Przycisk otwierający wysuwany z boku panel */
    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px;
        background-color: var(--bg-secondary, #222); /* Wykorzystuje Twoją zmienną */
        color: #fff;
        border: 1px solid #444;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 20px;
        font-family: var(--font-heading);
    }

    .widget-area-mody {
        display: block; /* Usuwamy wcześniejsze display: none */
        position: fixed;
        top: 0;
        right: -100%; /* Ukryty poza prawą krawędzią ekranu */
        width: 320px;
        max-width: 100%; /* Zabezpieczenie dla bardzo wąskich ekranów */
        height: 100dvh;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        background-color: var(--bg-secondary, #1a1a1a);
        z-index: 999999; /* Musi przykryć całą stronę (menu, admin bar) */
        padding: 50px 20px 20px; /* Zwiększony górny padding na krzyżyk */
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.7);
        border-radius: 0; /* Na telefonie usuwamy border-radius dla lepszego wyglądu */
    }

.admin-bar .widget-area-mody {
        top: 32px;
        height: calc(100dvh - 32px);
    }

    /* Klasa dodawana przez JavaScript - wysuwa panel */
    .widget-area-mody.is-open {
        right: 0;
    }

    /* Przycisk "X" zamykający sidebar */
    .sidebar-close-btn {
        display: block;
        position: absolute;
        top: 0em;
        right: 0em;
        background: none;
        border: none;
        color: #888;
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        transition: color 0.2s ease;
        z-index: 1000000;
    }

    .sidebar-close-btn:hover {
        color: #d10000;
    }
}

.links-label i {
    color: #888;
    transition: color 0.2s ease-in-out;
    margin-right: 5px;
}

.links-label a:hover i {
    color: #ddd;
}

.links-label a {
    color: #888;
    transition: color 0.2s ease-in-out;
    margin-right: 5px;
}

.links-label a:hover {
    color: #ddd;
}

.links-label { 
    color: #888; 
    font-weight: 500;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.mods-action {
   /* padding: 25px 25px 0 25px; */
}

.wpulike-heart .wp_ulike_general_class {
 box-shadow: none !important;
}

.wpulike {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: normal;
    margin: 0;
    padding: 0 0 !important;
    height: 45px;
    width: 48px;
    border-radius: 4px;
    background-color: #292e38;
}

.wpulike-heart .count-box {
    color: #888 !important;
}

.wpulike-heart .wp_ulike_general_class {
    padding-left: 17px !important;
}


.wpulike-heart .count-box {
    padding: 0 0 0 12px !important;
}

.wpulike-heart button.wp_ulike_btn {
    padding: 0 !important;
}

/* --- Karta Moda (Widżet w newsie) --- */
.widget-card-mod-widget {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin: 30px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    align-items: center;
    gap: 20px;
}

.widget-card-mod-thumb-wrapper {
    flex-shrink: 0;
    width: 150px;
}

.widget-card-mod-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.widget-card-mod-no-img {
    width: 150px;
    height: 100px;
    background: #eee;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
}

.widget-card-mod-content {
    flex-grow: 1;
}

.widget-card-mod-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #fff;
}

.widget-card-mod-meta {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.widget-card-mod-btn {
    background-color: #d10000;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 0.85rem;
}

.bmgup-dropdown-container {
    position: relative;
    display: inline-block;
}

.bmgup-dropdown-container .bmgup-download-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    margin-top: 5px;
}

.bmgup-dropdown-container .bmgup-main-btn[aria-expanded="true"] + .bmgup-download-list {
    display: block;
}

.widget-card-mod-btn:hover {
    background-color: #dd163b;
    color: #ffffff;
}

.widget-card-mod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Responsywność dla smartfonów */
@media (max-width: 600px) {
    .widget-card-mod-widget {
        flex-direction: column;
        text-align: center;
    }
    .widget-card-mod-thumb-wrapper {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
}