@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* --- Definicja zmiennych kolorystycznych --- */
:root {
    /* Kolory z panelu admina (tryb dzienny) */
    --color-primary-gradient: var(--color-primary, #667eea);
    --color-secondary-gradient: var(--color-secondary, #764ba2);
    --color-accent: var(--color-accent-val, #667eea);
    --color-accent-rgb: var(--color-accent-rgb-val, 102, 126, 234);

    /* Paleta dzienna */
    --color-bg: #F9FAFB; /* gray-50 */
    --color-bg-secondary: #FFFFFF; /* white */
    --color-text-primary: #1F2937; /* gray-800 */
    --color-text-secondary: #6B7280; /* gray-500 */
    --color-border: #E5E7EB; /* gray-200 */
    --color-action-secondary-bg: #E5E7EB; /* gray-200 */
    --color-action-secondary-text: #1F2937; /* gray-800 */
}

html[data-theme='dark'] {
    /* Kolory z panelu admina (tryb nocny) */
    --color-primary-gradient: var(--color-primary, #667eea);
    --color-secondary-gradient: var(--color-secondary, #764ba2);
    --color-accent: var(--color-accent-dark-val, #A3BFFA);
    --color-accent-rgb: var(--color-accent-dark-rgb-val, 163, 191, 250);

    /* Paleta nocna */
    --color-bg: var(--color-dark-bg, #111827);
    --color-bg-secondary: var(--color-dark-card-bg, #1F2937);
    --color-text-primary: var(--color-dark-text, #F3F4F6);
    --color-text-secondary: #9CA3AF; /* gray-400 */
    --color-border: #374151; /* gray-700 */
    --color-action-secondary-bg: #374151; /* gray-700 */
    --color-action-secondary-text: #F3F4F6; /* gray-200 */
}

/* --- Przełącznik Motywu --- */
html[data-theme='dark'] .icon-sun { display: inline-block; }
html[data-theme='dark'] .icon-moon { display: none; }
html:not([data-theme='dark']) .icon-sun { display: none; }
html:not([data-theme='dark']) .icon-moon { display: inline-block; }

/* --- Dark Mode Overrides (Nadpisanie klas Tailwind) --- */
html[data-theme='dark'] .bg-white { background-color: var(--color-bg-secondary); }
html[data-theme='dark'] .bg-gray-50 { background-color: var(--color-bg); }
html[data-theme='dark'] .bg-gray-100 { background-color: #1a2233; }
html[data-theme='dark'] .text-gray-900,
html[data-theme='dark'] .text-gray-800,
html[data-theme='dark'] .text-gray-700 { color: var(--color-text-primary); }
html[data-theme='dark'] .text-gray-600,
html[data-theme='dark'] .text-gray-500 { color: var(--color-text-secondary); }
html[data-theme='dark'] .border-b,
html[data-theme='dark'] .border-t,
html[data-theme='dark'] .border { border-color: var(--color-border); }
html[data-theme='dark'] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
html[data-theme='dark'] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
html[data-theme='dark'] .hover\:bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.05); }
html[data-theme='dark'] .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.08); }


* {
    font-family: 'Inter', sans-serif;
}

/* --- ZMIANA: Przejścia kolorów są globalne i nie zależą od przełącznika animacji --- */
body, a, button, input, div, section, article {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}


body {
    background-color: var(--color-bg);
}

.gradient-bg {
    background: linear-gradient(135deg, var(--color-primary-gradient) 0%, var(--color-secondary-gradient) 100%);
}

/* ========================================================================= */
/* ### NOWY BLOK: GLOBALNE ZAWIJANIE TEKSTU ###                            */
/* ========================================================================= */

/*
 * Zapobiega "rozpychaniu" layoutu na mobile przez długie,
 * niełamliwe słowa (np. w tytułach, linkach).
 */
p, h1, h2, h3, h4, h5, h6, a, span, li, blockquote {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ### POCZĄTEK MODYFIKACJI ### */
.news-ticker {
    /* Domyślna, szybsza prędkość dla mobile */
    animation: scroll 15s linear infinite;
}

/* Dla ekranów od 768px wzwyż (tablety, desktopy), spowalniamy animację */
@media (min-width: 768px) {
    .news-ticker {
        animation-duration: 30s;
    }
}
/* ### KONIEC MODYFIKACJI ### */

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* --- ZMIANA: Efekt podniesienia karty tylko gdy animacje są włączone --- */
.animations-enabled .card-hover {
    transition-property: transform, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.animations-enabled .card-hover:hover {
    transform: translateY(-5px);
}

.breaking-news {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.tab-active {
    border-bottom: 3px solid var(--color-accent);
    color: var(--color-accent);
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* --- ZMIANA: Animacja fade-in tylko gdy animacje są włączone --- */
.animations-enabled .animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0f0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- ZMIANA: Efekt skalowania badge'a tylko gdy animacje są włączone --- */
.animations-enabled .category-badge {
    transition: transform 0.2s ease;
}

.animations-enabled .category-badge:hover {
    transform: scale(1.05);
}

.fb-comments,
.fb-comments iframe[style],
.fb-comments span {
    width: 100% !important;
}

.has-events {
    position: relative;
    cursor: pointer;
}
.has-events::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
}

.event-tab-active {
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

.tooltip-event-link {
    display: block;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #4a5568;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tooltip-event-link:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }

.hover\:text-accent:hover { color: var(--color-accent); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }

.group:hover .group-hover\:text-accent { color: var(--color-accent); }
.group:hover .group-hover\:bg-accent { background-color: var(--color-accent); }

.hover\:bg-accent-dark:hover {
    background-color: var(--color-accent);
    filter: brightness(0.9);
}
.group:hover .group-hover\:bg-accent-dark {
    background-color: var(--color-accent);
    filter: brightness(0.9);
}

.bg-accent-light {
    background-color: rgba(var(--color-accent-rgb), 0.1);
}
.promo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 50px;
}

.promo-wrapper {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.promo-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    transform: translate(0, -50%);
    background-color: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(2px);
    color: #64748b;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    z-index: 10;
    border: 1px solid rgba(226, 232, 240, 0.9);
}
#hourly-forecast-container > div {
    transition: all 0.3s ease-in-out;
}

.hourly-active {
    transform: scale(1.1);
    background-image: linear-gradient(135deg, var(--color-primary-gradient), var(--color-secondary-gradient)) !important;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border: 2px solid rgba(255,255,255,0.5);
}

.hourly-active i {
    color: white !important;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.video-overlay:hover {
    background-color: rgba(0,0,0,0.5);
}

.play-button {
    width: 5rem;
    height: 5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease;
}

.animations-enabled .play-button:hover {
    transform: scale(1.1);
}

.play-button i {
    font-size: 2.25rem;
    color: #1f2937;
    padding-left: 0.5rem;
}
.video-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.animations-enabled .video-container:hover img {
    transform: scale(1.05);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.buzzy-featured-frame {
    border: 3px solid var(--color-accent);
}

.buzzy-badge {
    position: absolute;
    top: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.buzzy-badge-tl {
    left: 1rem;
    background-color: rgba(132, 204, 22, 0.8);
}

.buzzy-badge-tr {
    right: 1rem;
    background-color: rgba(245, 158, 11, 0.8);
}

.buzzy-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .buzzy-badge-text {
        display: none;
    }
    
    .buzzy-badge-tl {
        padding: 0.5rem;
    }
}
/* --- STYLES FOR LANDING PAGE THEME TOGGLE --- */
 #landing-theme-toggle {
     position: fixed;
     bottom: 1.5rem;
     left: 1.5rem;
     z-index: 99;
     width: 3rem;
     height: 3rem;
     border-radius: 9999px;
     background-color: var(--color-bg-secondary);
     color: var(--color-text-primary);
     border: 1px solid var(--color-border);
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .animations-enabled #landing-theme-toggle:hover {
     transform: scale(1.1);
     border-color: var(--color-accent);
     color: var(--color-accent);
 }
 
 #landing-theme-toggle .icon-sun,
 #landing-theme-toggle .icon-moon {
     font-size: 1.25rem;
 }
 
/* --- STYLES FOR PROSE (POST CONTENT) --- */
.prose {
    overflow-wrap: break-word;
    word-break: break-word;
}
 
html[data-theme='dark'] .prose {
    color: var(--color-text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
}

html[data-theme='dark'] .prose h1,
html[data-theme='dark'] .prose h2,
html[data-theme='dark'] .prose h3,
html[data-theme='dark'] .prose h4,
html[data-theme='dark'] .prose strong {
    color: var(--color-text-primary);
}

html[data-theme='dark'] .prose blockquote {
    color: var(--color-text-secondary);
    border-left-color: var(--color-border);
}

/* Specjalna klasa dla jasnych boksów w trybie dziennym, aby miały tło w trybie nocnym */
html[data-theme='dark'] .bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.05); /* Używamy lekkiej transparencji dla subtelnego efektu */
}

html[data-theme='dark'] .prose a {
    color: var(--color-accent);
}

html[data-theme='dark'] .prose ul > li::before {
    background-color: var(--color-text-secondary);
}

/* ### NOWY BLOK - LOGIKA PRZEŁĄCZANIA LOGO ### */
.logo-dark-mode {
    display: none;
}
html[data-theme='dark'] .logo-dark-mode {
    display: block;
}
html[data-theme='dark'] .logo-light-mode {
    display: none;
}

/* ### NOWY BLOK - INTELIGENTNE PRZYCINANIE TEKSTU ### */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================================================= */
/* NOWY BLOK: ULEPSZENIA RESPONSIVE                                          */
/* ========================================================================= */

/* -- Płynna Typografia -- */
h1, .text-4xl { font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3rem); /* text-4xl to 5xl */ }
h2, .text-3xl { font-size: clamp(1.875rem, 1.575rem + 1.5vw, 2.25rem); /* text-3xl to 4xl */ }
h3, .text-2xl { font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* text-2xl to 3xl */ }
h4, .text-xl { font-size: clamp(1.25rem, 1.175rem + 0.375vw, 1.5rem); /* text-xl to 2xl */ }
body { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); }

/* -- Header przyklejony do góry i zmniejszający się przy scrollowaniu -- */
.animations-enabled header.sticky {
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.animations-enabled header.header-scrolled {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
html[data-theme='dark'] .animations-enabled header.header-scrolled {
    background-color: var(--color-dark-card-bg);
}
.animations-enabled header.header-scrolled .h-10 {
    height: 2rem;
    transition: height 0.3s ease-in-out;
}

/* ========================================================================= */
/* NOWY BLOK: Klasy pomocnicze i komponenty                                */
/* ========================================================================= */

/* --- Klasy pomocnicze dla Aspect Ratio (proporcji obrazu/wideo) --- */
.aspect-w-16 { --tw-aspect-w: 16; }
.aspect-h-9 { --tw-aspect-h: 9; }
.aspect-w-4 { --tw-aspect-w: 4; }
.aspect-h-3 { --tw-aspect-h: 3; }
.aspect-w-1 { --tw-aspect-w: 1; }
.aspect-h-1 { --tw-aspect-h: 1; }

[class*='aspect-w-'] {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
}

[class*='aspect-w-'] > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* --- Inteligentne Opakowanie Tabel i Iframe'ów (Responsive) --- */
.table-responsive-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 1.5em 0;
}

.animations-enabled .table-responsive-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--color-bg-secondary) 90%);
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.animations-enabled .table-responsive-wrapper.is-scrolled-to-end::after {
    opacity: 0;
}

.prose table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9em;
}

.prose th,
.prose td {
    border: 1px solid var(--color-border);
    padding: 10px 15px;
    text-align: left;
    white-space: nowrap;
}

.prose th {
    background-color: var(--color-bg);
    font-weight: 700;
}

html[data-theme='dark'] .prose th {
    background-color: rgba(255, 255, 255, 0.05);
}

.responsive-iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 1.5em 0;
    border-radius: 8px;
}

.responsive-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ### NOWY BLOK: Animacja "trzęsienia" dla przycisków ### */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

.animations-enabled .animate-shake {
    /* Uruchom animację po 3 sekundach, powtarzaj w nieskończoność co ok. 5 sekund */
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) 3s infinite;
}

/* ### NOWY BLOK: Semantyczne klasy kolorów dla motywów Dzień/Noc ### */
.bg-main { background-color: var(--color-bg); }
.bg-card { background-color: var(--color-bg-secondary); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.border-main { border-color: var(--color-border); }
.bg-action-secondary { background-color: var(--color-action-secondary-bg); }
.text-action-secondary { color: var(--color-action-secondary-text); }
.hover\:bg-action-secondary-hover:hover { filter: brightness(0.95); }
html[data-theme='dark'] .hover\:bg-action-secondary-hover:hover { filter: brightness(1.2); }

/* ========================================================================= */
/* ### NOWY BLOK: POPRAWKA GLOBALNA DLA PRZYCISKÓW (LINKÓW) ###              */
/* ========================================================================= */

/*
 * Ta reguła usuwa domyślne podkreślenie z linków (<a>), które
 * są stylizowane na przyciski (czyli mają zdefiniowany kolor tła).
 * Dotyczy to również elementów w stanie :hover.
 */
a[class*="bg-"],
a[class*="bg-"]:hover {
    text-decoration: none !important;
}

/* ========================================================================= */
/* ### NOWY BLOK: KOMPONENTY INFOGRAFICZNE (v1.0) ###                        */
/* ========================================================================= */

/*
 * UWAGA: Te klasy muszą być dodawane do elementów, które NIE MAJĄ
 * klasy .prose (lub są w kontenerze z klasą .not-prose).
 * Wtyczka "typography" nadpisuje wiele stylów.
*/

/* --- 1. Nagłówek Infograficzny --- */
.infographic-header {
    display: flex;
    align-items: center;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.infographic-header i {
    margin-right: 0.75rem;
    color: var(--color-accent);
}

/* --- 2. Karta Informacyjna --- */
.infographic-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-left-width: 4px;
}
.infographic-card i {
    font-size: 2rem;
    flex-shrink: 0;
}
.infographic-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}
.infographic-card p {
    margin: 0;
    font-size: 1rem;
}
/* Warianty kolorystyczne */
.infographic-card--alert {
    background-color: #FFFBEB; /* amber-50 */
    border-color: #F59E0B; /* amber-500 */
    color: #92400E; /* amber-800 */
}
.infographic-card--alert i { color: #F59E0B; }
html[data-theme='dark'] .infographic-card--alert {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #F59E0B;
    color: #FDE68A; /* amber-200 */
}
.infographic-card--info {
    background-color: #EFF6FF; /* blue-50 */
    border-color: #3B82F6; /* blue-500 */
    color: #1E40AF; /* blue-800 */
}
.infographic-card--info i { color: #3B82F6; }
html[data-theme='dark'] .infographic-card--info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3B82F6;
    color: #BFDBFE; /* blue-200 */
}

/* --- 3. Lista z Ikonami --- */
.infographic-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.infographic-list li {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}
.infographic-list li::before {
    content: "\f00c"; /* Domyślna ikona 'check' */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-accent);
    margin-right: 1rem;
    font-size: 1.25rem;
    margin-top: 0.125rem; /* Delikatne wyrównanie */
}
/* Warianty ikon */
.infographic-list--when li::before { content: "\f017"; } /* clock */
.infographic-list--where li::before { content: "\f3c5"; } /* map-marker-alt */
.infographic-list--what li::before { content: "\f129"; } /* info-circle */
/* ========================================================================= */
/* ### NOWY BLOK: ZAAWANSOWANE KOMPONENTY INFOGRAFICZNE (v2.0) ###           */
/* ========================================================================= */

/* --- 4. Ozdobny Separator --- */
.infographic-divider {
    text-align: center;
    margin: 2.5rem 0;
    border: 0;
}
.infographic-divider::after {
    content: "\f111 \f111 \f111"; /* Ikony kółek */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-border);
    font-size: 0.75rem;
    letter-spacing: 0.5em;
}

/* --- 5. Inicjał (Drop Cap) --- */
.drop-cap::first-letter {
    font-size: 4rem; /* 4x większy niż normalny tekst */
    font-weight: 700;
    color: var(--color-accent);
    float: left;
    line-height: 0.8;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
}

/* --- 6. Cytat (Pull Quote) --- */
.pull-quote {
    margin: 2rem 0;
    padding: 1.5rem;
    padding-left: 3.5rem;
    position: relative;
    border-left: 4px solid var(--color-accent);
    background-color: var(--color-bg);
    border-radius: 0 8px 8px 0;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    color: var(--color-text-primary);
}
.pull-quote::before {
    content: "\f10d"; /* Ikona cudzysłowu */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 1rem;
    top: 1.25rem;
    font-size: 2rem;
    color: var(--color-accent);
    opacity: 0.8;
}

/* --- 7. Oś Czasu --- */
.infographic-timeline {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0;
    position: relative;
}
.infographic-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.25rem;
    height: 100%;
    width: 4px;
    background-color: var(--color-border);
    border-radius: 2px;
}
.infographic-timeline li {
    position: relative;
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}
.infographic-timeline li:last-child {
    padding-bottom: 0;
}
.infographic-timeline li::before {
    content: '';
    position: absolute;
    left: 0.625rem; /* (2.5rem - 1.25rem) / 2 */
    top: 0.25rem;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    border: 4px solid var(--color-accent);
    z-index: 1;
}
.infographic-timeline .timeline-date {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}
.infographic-timeline .timeline-title {
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}
.infographic-timeline .timeline-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* ========================================================================= */
/* ### NOWY BLOK: REKLAMA WYSUWANA (TOP BAR) v2.0 ###                          */
/* ========================================================================= */

#top-ad-bar-container {
    /* Ustawiamy overflow: hidden, aby animacja max-height działała poprawnie */
    overflow: hidden;
    /* Płynne przejście dla wysokości, aby uniknąć skoków treści */
    transition: max-height 0.5s ease-in-out;
}

.promo-container.top-slide-down {
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    z-index: 90;
    
    /* Domyślnie schowane i niewidoczne */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20%);
    
    /* Definiujemy płynne przejścia dla wszystkich animowanych właściwości */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* Klasa dodawana przez JS, aby wysunąć reklamę */
.promo-container.top-slide-down.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Wewnętrzny wrapper, aby wycentrować treść reklamy (bez zmian) */
.promo-container.top-slide-down .promo-wrapper {
    position: relative;
    padding: 8px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Przycisk zamykania (bez zmian) */
#top-ad-close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

#top-ad-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--color-text-primary);
}

/* Usunięto klasę body.top-ad-active, ponieważ JS będzie teraz zarządzał max-height kontenera */


/* ========================================================================= */
/* ### NOWY BLOK: REKLAMA WYSUWANA OD DOŁU (BOTTOM BAR) ###                   */
/* ========================================================================= */

#bottom-ad-bar-container {
    /* Pusty kontener, który może być usunięty przez JS, jeśli reklama nie jest potrzebna */
}

.promo-container.bottom-slide-up {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    position: fixed; /* Nakładka na treść */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 90;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.promo-container.bottom-slide-up.is-visible {
    transform: translateY(0);
}

/* Dostosowanie wewnętrznego wrappera, aby przycisk zamykania miał punkt odniesienia */
.promo-container.bottom-slide-up .promo-wrapper {
    position: relative;
    padding: 8px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Przycisk zamykania jest identyczny jak w top-bar, więc używa tych samych stylów */
#bottom-ad-close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

#bottom-ad-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--color-text-primary);
}

/* ========================================================================= */
/* ### NOWY BLOK: REKLAMA PEŁNOEKRANOWA (VIGNETTE) ###                      */
/* ========================================================================= */

#vignette-ad-container {
    /* Pusty kontener, który będzie zarządzał widocznością */
}

.vignette-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.vignette-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.vignette-content {
    position: relative;
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 380px; /* Optymalny rozmiar dla reklam 300x250 i 336x280 */
    width: 100%;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.vignette-overlay.is-visible .vignette-content {
    transform: scale(1);
}

.vignette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.vignette-header .vignette-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

#vignette-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: transform 0.2s;
}

#vignette-close-btn:hover {
    transform: scale(1.2);
    color: var(--color-text-primary);
}

.vignette-body {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================================================= */
/* ### NOWY BLOK: PASEK AKCJI (POST ACTION BAR) v1.0 ###                   */
/* ========================================================================= */

#post-action-bar {
    /* Style domyślne (Desktop) */
    margin: 2rem 0;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--color-bg);
}

#post-action-bar .container {
    justify-content: center;
}

.action-button, .action-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
    cursor: pointer;
}

.action-button {
    background-color: var(--color-action-secondary-bg);
    color: var(--color-action-secondary-text);
    border: 1px solid var(--color-border);
}

.action-button:hover {
    filter: brightness(0.95);
}

html[data-theme='dark'] .action-button:hover {
     filter: brightness(1.2);
}


.action-button-primary {
    background-color: var(--color-accent);
    color: white;
    flex-grow: 1; /* Na mobile przycisk "Kup" zajmuje więcej miejsca */
}

.action-button-primary:hover {
    filter: brightness(0.9);
}


/* Style dla Mobile (poniżej 768px) */
@media (max-width: 767px) {
    #post-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        z-index: 50;
        /* Dodajemy trochę "safe area" dla iPhone */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
        transform: translateY(100%);
        animation: slideUp 0.5s 0.5s ease-out forwards;
    }

    /* Dodajemy padding na dole body, aby pasek nie zasłaniał treści */
    body {
        padding-bottom: 80px;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}
/* ========================================================================= */
/* ### NOWY BLOK: Zaawansowany Rotator Reklam v2.0 ###                       */
/* ========================================================================= */

.ad-rotator-container {
    position: relative;
    /* Wysokość zostanie ustawiona dynamicznie przez JS */
    min-height: 50px; /* Minimalna wysokość na czas ładowania */
    transition: min-height 0.3s ease-in-out;
}

.ad-rotator-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.ad-rotator-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-rotator-slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Tylko aktywny slajd wpływa na pozycjonowanie */
}

.ad-rotator-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0;
}

.ad-rotator-container:hover .ad-rotator-nav {
    opacity: 1;
}

.ad-rotator-nav:hover {
    background-color: white;
    color: var(--color-accent);
}

.ad-rotator-nav.prev {
    left: 10px;
}

.ad-rotator-nav.next {
    right: 10px;
}

/* ========================================================================= */
/* ### NOWY BLOK: MODUŁ GADŻETÓW (v1.3) ###                                */
/* ========================================================================= */

.gadget-container {
    position: fixed;
    z-index: 990;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    /* Domyślny transform dla gadżetów dolnych */
    transform: translateY(20px);
}

.gadget-container.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pozycjonowanie */
.gadget-container.bottom-right {
    bottom: 1.5rem;
    right: 1.5rem;
}
.gadget-container.bottom-left {
    bottom: 1.5rem;
    left: 1.5rem;
}

/* Przycisk zamykania - Ogólny wygląd */
.gadget-close-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s, background-color 0.2s;
    z-index: 20;
    backdrop-filter: blur(2px);
}
.gadget-close-btn:hover {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.7);
}

/* Specyficzne pozycjonowanie przycisku zamykania */
.gadget-sticky-video .gadget-close-btn,
.gadget-lead-popup-content .gadget-close-btn {
    top: 8px;
    right: 8px;
}
.gadget-sticky-icon .gadget-close-btn {
    top: -8px;
    right: -8px;
}
.gadget-alert-bar .gadget-close-btn {
    width: 24px;
    height: 24px;
    font-size: 14px;
    background-color: transparent;
    color: var(--color-text-secondary);
    box-shadow: none;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}
.gadget-alert-bar .gadget-close-btn:hover {
    background-color: var(--color-action-secondary-bg);
}


/* --- 1. Gadżet: Przyklejona ikona --- */
.gadget-sticky-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--color-accent);
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.animations-enabled .gadget-sticky-icon a:hover {
    transform: scale(1.1) rotate(10deg);
}
.gadget-sticky-icon i {
    font-size: 28px;
}

/* --- 2. Gadżet: Przyklejone Wideo --- */
.gadget-sticky-video {
    width: 280px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    border: 1px solid var(--color-border);
}
.gadget-sticky-video.gadget-video-short {
    width: 200px; /* Węższy dla pionowego formatu */
}
.gadget-video-player {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9; /* Domyślne proporcje */
    background-color: #000;
}
.gadget-video-short .gadget-video-player {
    aspect-ratio: 9 / 16; /* Pionowe proporcje dla Shortsów */
}
.gadget-video-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.gadget-container.is-clickable:hover .gadget-video-thumbnail {
    transform: scale(1.05);
}
.gadget-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.3);
    font-size: 24px;
    color: white;
    transition: background-color 0.3s;
    z-index: 15;
}
.gadget-video-player:hover .gadget-play-icon {
    background-color: rgba(0,0,0,0.5);
}
.gadget-video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.gadget-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
    backdrop-filter: blur(2px);
    pointer-events: none; /* Odznaka nie przechwytuje kliknięć */
}

.gadget-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
}

/* --- 3. Gadżet: Pasek Ogłoszeniowy --- */
.gadget-alert-bar {
    position: fixed; /* ### ZMIANA: z 'sticky' na 'fixed' ### */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-100%); /* ### ZMIANA: Ukrycie paska na górze ### */
    z-index: 995; /* ### NOWOŚĆ: Wyższy z-index ### */
}
.gadget-alert-bar.is-visible {
    transform: translateY(0);
}
.gadget-alert-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 4rem;
    text-align: center;
    position: relative;
}
.gadget-alert-bar p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}
.gadget-alert-bar-button {
    background-color: var(--color-accent);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: filter 0.2s;
    text-decoration: none !important;
}
.gadget-alert-bar-button:hover {
    filter: brightness(0.9);
}

/* --- 4. Gadżet: Popup --- */
.gadget-lead-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.gadget-lead-popup.is-visible {
    opacity: 1;
    visibility: visible;
}
.gadget-lead-popup-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.gadget-lead-popup-content {
    position: relative;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 2.5rem;
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}
.gadget-lead-popup.is-visible .gadget-lead-popup-content {
    transform: scale(1);
}
.gadget-lead-popup-icon {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.gadget-lead-popup h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.gadget-lead-popup-body {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}
.gadget-lead-popup-body p {
    margin: 0.5em 0;
}
.gadget-lead-popup-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.gadget-lead-popup-form input,
.gadget-lead-popup-body input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
}
.gadget-lead-popup-form button,
.gadget-lead-popup-body button {
    background-color: var(--color-accent);
    color: white;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: filter 0.2s;
}
.gadget-lead-popup-form button:hover,
.gadget-lead-popup-body button:hover {
    filter: brightness(0.9);
}

@media (max-width: 768px) {
    .gadget-container.bottom-right { bottom: 1rem; right: 1rem; }
    .gadget-container.bottom-left { bottom: 1rem; left: 1rem; }
    .gadget-sticky-video { width: 200px; }
    .gadget-sticky-video.gadget-video-short { width: 140px; }
    .gadget-alert-bar-content { flex-direction: column; padding: 0.75rem 2.5rem; gap: 0.5rem; }
}
.video-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* NOWY BLOK DLA SHORTÓW */
.video-container.video-container--short {
    aspect-ratio: 9 / 16;
    max-width: 320px; /* Ograniczamy maksymalną szerokość, aby nie rozciągał się na cały ekran na desktopie */
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px; /* Zaokrąglone rogi, typowe dla Shortsów */
}
/* KONIEC NOWEGO BLOKU */

.video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* ========================================================================= */
/* ### NOWY BLOK: MECHANIZM BLOKOWANIA ZGODY COOKIES ###                     */
/* ========================================================================= */

/* Dodaje półprzezroczyste tło i rozmycie do całej strony */
html.consent-pending::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 99; /* Wysoko, ale niżej niż baner cookies */
}

/* Ukrywa wszystkie gadżety, gdy zgoda nie została jeszcze wyrażona */
html.consent-pending .gadget-container {
    display: none !important;
}

/* Upewnia się, że sam baner cookies jest widoczny ponad tłem */
#cookie-consent-container {
    z-index: 100;
}