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

:root {
    /* Nowe, bardziej "zielone" i spójne kolory */
    --primary-green: #4CAF50; /* Główny zielony */
    --light-green: #DCEDC8; /* Jasnozielony dla tła kółek i elementów */
    --dark-green: #388E3C; /* Ciemniejszy zielony dla tekstu/ikon */
    --accent-blue: #2196F3; /* Niebieski dla wody (opady) */
    --text-dark: #212121;
    --text-medium: #424242;
    --text-light: #616161;
    --text-lighter: #757575;
    --background-light: #F0F2F5;
    --background-white: #FFFFFF;
    --border-light: #EEEEEE;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.08);
    --shadow-strong: rgba(0, 0, 0, 0.15); /* Nowy cień */
}

/* WAŻNE: Dodano style dla html i body, aby zajęły całą dostępną przestrzeń */
html, body {
    height: 100%; /* Upewnia się, że html i body zajmują całą wysokość rodzica */
    width: 100%;  /* Upewnia się, że html i body zajmują całą szerokość rodzica */
    margin: 0; /* Usuwa domyślne marginesy */
    padding: 0; /* Usuwa domyślne paddingi */
    overflow: hidden; /* Zapobiega niechcianym paskom przewijania w iframe */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-light);
    box-sizing: border-box; /* Upewnij się, że padding i border są wliczone w szerokość */
    overflow-x: hidden; /* Zapobiega poziomemu przewijaniu */
}

.weather-container {
    background-color: var(--background-white);
    box-shadow: none; /* Usunięto cień, aby przylegało do krawędzi */
    overflow: hidden;
    width: 100%; /* ZAWSZE zajmuje 100% szerokości */
    max-width: 100%; /* Zabezpieczenie, aby nie przekraczało 100% */
    min-height: 100vh; /* Minimalna wysokość, aby zająć cały widok */
    height: 100%; /* Dodano dla pewności, że rozciągnie się w ramach rodzica w iframe */
    border-radius: 0; /* Usunięto zaokrąglenie rogów, aby przylegało do krawędzi */
}

/* --- Main Content Styling --- */
.main-content {
    padding: 30px; /* Padding dla całej sekcji głównej */
    padding-top: 10; /* Górny padding usunięty, bo mapa jest "na górze" */
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* --- Map Section with Current Weather Integrated --- */
.map-section {
    height: 400px; /* Znacznie zwiększona wysokość, aby pomieścić current-weather */
    background-color: #E0E0E0;
    border-radius: 15px; /* Przywrócono zaokrąglenie rogów mapy, wygląda ładniej */
    overflow: hidden;
    position: relative; /* KLUCZOWE: Baza dla pozycjonowania absolutnego child elements */
    margin-bottom: 30px;
    box-shadow: 0 5px 15px var(--shadow-light);
}

/* --- Slideshow Container (nowa sekcja) --- */
.slideshow-container {
    position: absolute; /* Pozycjonowanie absolutne w obrębie .map-section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Upewnia się, że obrazki nie wychodzą poza kontener */
    z-index: 1; /* Pod overlayami */
}

.slide {
    position: absolute; /* Obrazki nakładają się na siebie */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dopasowuje obrazek, pokrywając cały obszar */
    opacity: 0; /* Domyślnie ukryty */
    transition: opacity 1.5s ease-in-out; /* Płynne przejście */
}

.slide:first-child {
    opacity: 1; /* Pierwszy slajd widoczny domyślnie */
}

/* Nowy styl dla informacji o dacie i czasie */
.datetime-info {
    position: absolute;
    top: 20px; /* Od góry */
    left: 20px; /* Od lewej */
    background-color: rgba(0, 0, 0, 0.4); /* Ciemniejsze, półprzezroczyste tło */
    color: white; /* Biały tekst */
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    z-index: 10; /* Wyżej niż obrazek i inne overlaye */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Wyrównaj tekst do lewej */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Lekki cień dla czytelności */
}

.datetime-info .current-time {
    font-size: 1.8rem; /* Większa czcionka dla godziny */
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.datetime-info .current-date-day {
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.datetime-info .imieniny {
    font-size: 0.8rem;
    opacity: 0.9; /* Lekko przezroczysty, aby nie dominował */
}


.map-section .location-overlay {
    position: absolute; /* Zmieniono na ABSOLUTE, aby precyzyjnie umieścić */
    top: 20px; /* Konkretna pozycja od góry */
    right: 20px; /* Konkretna pozycja od prawej */
    margin: 0; /* Zresetowano margines po zmianie na absolute */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-medium);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Wyżej niż obrazek */
}

/* Current Weather Section - ZINTEGROWANA Z MAPĄ */
.current-weather {
    position: absolute; /* Zmieniono na ABSOLUTE, aby była nakładką na mapie */
    bottom: 0; /* Przykleja do dołu map-section */
    left: 0; /* Rozciąga od lewej */
    width: 100%; /* Rozciąga na całą szerokość rodzica */
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.3) 50%, transparent); /* Gradient, aby tekst był czytelny */
    padding: 20px 30px;
    padding-top: 50px; /* Większy padding u góry dla płynniejszego gradientu */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Wyrównuje elementy do dołu wewnątrz flex-kontenera */
    flex-wrap: wrap;
    z-index: 10; /* Wyżej niż obrazek */
    color: white; /* Biały tekst na tle gradientu */
}

.current-weather .temp-and-desc {
    text-align: left;
    flex-shrink: 0;
    margin-right: 30px;
    min-width: 150px;
}

.current-weather .temperature {
    font-size: 6rem;
    font-weight: 300;
    color: white;
    line-height: 1;
    margin-bottom: 5px;
    text-shadow: 0 2px 5px var(--shadow-strong); /* Lekki cień dla czytelności */
}

.current-weather .description {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9); /* Lekko przezroczysty biały */
    font-weight: 400;
    margin-top: -5px;
    text-shadow: 0 1px 3px var(--shadow-strong);
}

.current-conditions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end; /* Wyrównanie do prawej na większych ekranach */
    flex-grow: 1;
}

.condition-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2); /* Półprzezroczyste białe tło dla efektu "szkła" */
    backdrop-filter: blur(5px); /* Efekt rozmycia, jeśli przeglądarka wspiera */
    -webkit-backdrop-filter: blur(5px); /* Dla Safari */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Lekka ramka */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 3px 8px var(--shadow-medium);
    flex-shrink: 0;
}
 
.condition-circle .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: white; /* Biały tekst */
    line-height: 1.2;
}

.condition-circle .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8); /* Lekko przezroczysty biały */
    text-transform: uppercase;
    margin-top: 5px;
}

/* --- Tab Navigation --- */
.tab-navigation {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 20px;
}

.tab-button {
    background-color: transparent;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-lighter);
    outline: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-right: 15px;
}

.tab-button.active {
    color: var(--text-dark);
    border-bottom: 3px solid var(--primary-green);
    font-weight: 600;
}

.tab-button:hover:not(.active) {
    color: var(--text-medium);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* --- Hourly Forecast Grid (Inside tab-content) --- */
.hourly-forecast-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #BDBDBD #F5F5F5;
    flex-wrap: nowrap;
}

.hourly-forecast-grid::-webkit-scrollbar {
    height: 8px;
}

.hourly-forecast-grid::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: 10px;
}

.hourly-forecast-grid::-webkit-scrollbar-thumb {
    background: #BDBDBD;
    border-radius: 10px;
}

.hourly-item {
    flex-shrink: 0;
    width: 95px;
    height: 160px; /* Nieco większa wysokość, aby pomieścić dodatkowy tekst opadów */
    text-align: center;
    padding: 15px 0;
    background-color: var(--light-green);
    border-radius: 15px;
    margin-right: 15px;
    box-shadow: 0 2px 5px var(--shadow-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.hourly-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px var(--shadow-medium);
}

.hourly-item .time {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.hourly-item .icon-wrapper {
    font-size: 2.2rem;
    color: var(--text-medium);
    margin-bottom: 8px;
    height: 35px; /* Utrzymuje stałą wysokość ikon */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hourly-item .temp-val {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.hourly-item .precip-val,
.hourly-item .wind-val {
    font-size: 0.75rem; /* Zmniejszono, aby zmieściły się dwie linie opadów */
    color: var(--text-light);
    display: flex;
    flex-direction: column; /* Zmieniono na kolumnę dla opadów */
    align-items: center;
    justify-content: center;
    gap: 2px; /* Mniejsza przerwa między elementami w opadach */
    margin-top: 4px;
    line-height: 1.2; /* Lepsze odstępy między liniami */
}

.hourly-item .precip-val i {
    color: var(--accent-blue);
    font-size: 0.9rem; /* Zwiększ ikonę, aby była widoczna */
}

.hourly-item .wind-val {
    flex-direction: row; /* Wiatr może zostać w rzędzie */
}

.hourly-item .wind-val i {
    color: var(--dark-green);
}


/* --- Daily Forecast List (Inside tab-content) --- */
.daily-forecast-list {
    display: flex;
    flex-direction: column;
    background-color: var(--background-white); /* Tło dla całej listy */
    border-radius: 15px; /* Zaokrąglone rogi dla całej listy */
    box-shadow: 0 5px 15px var(--shadow-light); /* Cień dla całej listy */
    overflow: hidden; /* Upewnia się, że zaokrąglenia są widoczne */
}

.daily-item {
    display: flex;
    align-items: center;
    padding: 15px 20px; /* Zwiększony padding poziomy */
    border-bottom: 1px solid var(--border-light);
    text-align: center; /* Domyślne wyrównanie tekstu do środka dla wszystkich kolumn */
}

.daily-item:last-child {
    border-bottom: none;
}

.daily-item.daily-header {
    background-color: var(--primary-green); /* Zielone tło dla nagłówka */
    color: white; /* Biały tekst w nagłówku */
    font-weight: 700;
    padding: 12px 20px; /* Mniejszy padding dla nagłówka */
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.3); /* Lekka linia pod nagłówkiem */
}

.daily-item > div {
    flex: 1; /* Domyślnie wszystkie kolumny będą miały równą szerokość */
    padding: 0 5px; /* Lekki padding między kolumnami */
}

.daily-item .day {
    flex-basis: 15%; /* Mniejsza szerokość dla dnia */
    min-width: 80px; /* Minimalna szerokość, aby "dzisiaj", "jutro" się zmieściły */
    text-align: left; /* Dzień wyrównany do lewej */
    font-weight: 600;
    color: var(--text-dark);
}

.daily-item .icon-wrapper {
    flex-basis: 10%; /* Mniejsza szerokość dla ikony */
    font-size: 1.8rem; /* Większe ikony */
    color: var(--dark-green); /* Ikony w ciemnej zieleni */
    text-align: center;
}

.daily-item .temp-range {
    flex-basis: 15%; /* Stała szerokość dla temperatury */
    font-weight: 500;
    color: var(--text-dark);
    font-size: 1rem;
    text-align: center; /* Temperatura wyśrodkowana */
}

.daily-item .temp-range .min-temp {
    color: var(--text-light);
    font-weight: 400;
}

.daily-item .daily-param {
    flex: 1; /* Pozostałe parametry równa szerokość */
    display: flex;
    align-items: center;
    justify-content: center; /* Wyśrodkowanie zawartości w komórkach */
    font-size: 0.9rem;
    color: var(--text-medium);
    gap: 5px; /* Odstęp między ikoną a tekstem */
}

.daily-item .daily-param i {
    color: var(--text-light); /* Domyślny kolor dla ikon parametrów */
}

.daily-item .daily-param .fa-wind {
    color: var(--primary-green); /* Specyficzny kolor dla ikony wiatru */
}

.daily-item .daily-param .fa-cloud-showers-heavy {
    color: var(--accent-blue); /* Specyficzny kolor dla ikony opadów */
}

.daily-item .daily-sun-time {
    font-size: 0.85rem;
    white-space: nowrap; /* Zapobiega łamaniu się czasu */
}

.daily-item .daily-sun-time i {
    color: var(--primary-green); /* Ikony słońca w kolorze zielonym */
}

/* --- Error Message Styling --- */
.error-message {
    text-align: center;
    padding: 20px;
    background-color: #FFEBEE;
    color: #D32F2F;
    border: 1px solid #EF9A9A;
    border-radius: 10px;
    margin-top: 20px;
    font-weight: 500;
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 992px) {
    .weather-container {
        width: 100%;
        max-width: 100%;
    }
    .main-content {
        padding: 20px;
        padding-top: 0;
    }

    .map-section {
        height: 400px; /* Zmniejszona wysokość mapy na mniejszych ekranach */
        border-radius: 10px; /* Zaokrąglenie rogów mapy */
    }

    /* Zmniejszenie rozmiaru datetime-info na mniejszych ekranach */
    .datetime-info {
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        font-size: 1rem;
    }
    .datetime-info .current-time {
        font-size: 1.5rem;
    }
    .datetime-info .current-date-day {
        font-size: 0.9rem;
    }
    .datetime-info .imieniny {
        font-size: 0.75rem;
    }


    .current-weather {
        padding: 15px 20px;
        padding-top: 30px;
        flex-direction: column; /* Utrzymuje elementy w kolumnie na mniejszych ekranach */
        align-items: flex-start; /* Wyrównuje do lewej */
    }

    .current-weather .temp-and-desc {
        margin-right: 0;
        margin-bottom: 15px; /* Dodano odstęp po zmianie flex-direction */
    }

    .current-conditions {
        justify-content: flex-start; /* Kółka wyrównane do lewej */
        gap: 15px;
        width: 100%;
    }

    .condition-circle {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    .condition-circle .value {
        font-size: 1.1rem;
    }

    .hourly-forecast-grid {
        justify-content: flex-start;
    }

    /* Daily forecast adjustments */
    .daily-item {
        padding: 12px 15px; /* Mniejszy padding */
        font-size: 0.95rem;
    }
    .daily-item.daily-header {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
    .daily-item .day {
        flex-basis: 18%; /* Dzień może być nieco szerszy */
    }
    .daily-item .icon-wrapper {
        flex-basis: 12%; /* Ikona nieco szersza */
        font-size: 1.5rem;
    }
    .daily-item .temp-range {
        flex-basis: 18%; /* Temperatura nieco szersza */
        font-size: 0.95rem;
    }
    .daily-item .daily-param {
        font-size: 0.8rem; /* Mniejsza czcionka dla parametrów */
        gap: 3px;
    }
    .daily-item .daily-param i {
        font-size: 0.9rem; /* Mniejsze ikony */
    }
}

@media (max-width: 768px) {
    .weather-container {
        border-radius: 0; /* Zapewnia brak zaokrągleń dla pełnej szerokości */
    }
    .main-content {
        padding: 15px;
        padding-top: 0;
    }
    .map-section {
        height: 300px; /* Dalsze zmniejszenie wysokości mapy */
        border-radius: 0; /* Zapewnia brak zaokrągleń dla mapy */
    }
    /* Dalsze zmniejszenie rozmiaru datetime-info na mniejszych ekranach */
    .datetime-info {
        top: 10px;
        left: 10px;
        padding: 6px 10px;
        font-size: 0.9rem;
    }
    .datetime-info .current-time {
        font-size: 1.3rem;
    }
    .datetime-info .current-date-day {
        font-size: 0.8rem;
    }
    .datetime-info .imieniny {
        font-size: 0.7rem;
    }

    .map-section .location-overlay {
        font-size: 0.8rem;
        padding: 6px 10px;
        margin: 15px; /* Mniejsze marginesy */
    }
    .current-weather .temperature {
        font-size: 4.5rem;
    }
    .current-weather .description {
        font-size: 1.1rem;
    }
    .current-conditions {
        justify-content: center; /* Kółka wyśrodkowane na mniejszych tabletach */
        gap: 10px;
        width: 100%;
    }
    .condition-circle {
        width: 70px;
        height: 70px;
        margin: 5px;
    }
    .condition-circle .value {
        font-size: 1rem;
    }
    .condition-circle .label {
        font-size: 0.65rem;
    }
    .tab-button {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    .hourly-item {
        width: 75px;
        height: 140px;
        margin-right: 10px;
    }
    .hourly-item .time,
    .hourly-item .temp-val,
    .hourly-item .precip-val,
    .hourly-item .wind-val {
        font-size: 0.75rem;
    }
    .hourly-item .icon-wrapper {
        font-size: 1.8rem;
    }

    /* Daily forecast adjustments for smaller tablets */
    .daily-item {
        padding: 10px;
        font-size: 0.9rem;
    }
    .daily-item.daily-header {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    .daily-item .day {
        flex-basis: 20%;
        min-width: unset; /* Usuń min-width, jeśli jest problem na bardzo małych ekranach */
    }
    .daily-item .icon-wrapper {
        flex-basis: 15%;
        font-size: 1.3rem;
    }
    .daily-item .temp-range {
        flex-basis: 20%;
        font-size: 0.9rem;
    }
    .daily-item .daily-param {
        font-size: 0.75rem;
        flex-wrap: wrap; /* Zezwól na zawijanie się tekstu w komórkach, jeśli jest za długi */
        justify-content: center;
        text-align: center;
    }
    .daily-item .daily-sun-time {
        white-space: normal; /* Pozwól na zawijanie się tekstu czasu */
    }
}

@media (max-width: 600px) {
    /* Ustawienia dla małych telefonów w orientacji poziomej lub bardzo małych tabletów */
    .daily-item {
        flex-wrap: wrap; /* Pozwól na zawijanie się elementów w wierszu */
        justify-content: center; /* Wyśrodkuj zawartość */
        text-align: center;
        padding: 8px 5px;
    }
    .daily-item.daily-header {
        display: none; /* Ukryj nagłówek na najmniejszych ekranach, aby zaoszczędzić miejsce */
    }
    .daily-item > div {
        flex-basis: 100%; /* Każdy element w nowej linii */
        margin-bottom: 5px;
        padding: 0;
    }
    .daily-item .day {
        font-size: 1.1rem;
        text-align: center;
        margin-bottom: 10px;
    }
    .daily-item .icon-wrapper {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    .daily-item .temp-range {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .daily-item .daily-param {
        font-size: 0.85rem;
        justify-content: center;
        margin-bottom: 5px;
    }
    .daily-item .daily-param:last-child {
        margin-bottom: 0;
    }
}


@media (max-width: 480px) {
    .main-content {
        padding: 10px;
        padding-top: 0;
    }
    .map-section {
        height: 280px; /* Minimalna wysokość mapy */
    }
    /* Dalsze zmniejszenie rozmiaru datetime-info na najmniejszych ekranach */
    .datetime-info {
        top: 5px;
        left: 5px;
        padding: 5px 8px;
        font-size: 0.8rem;
    }
    .datetime-info .current-time {
        font-size: 1.1rem;
    }
    .datetime-info .current-date-day {
        font-size: 0.7rem;
    }
    .datetime-info .imieniny {
        font-size: 0.6rem;
    }

    .current-weather .temperature {
        font-size: 3.5rem;
    }
    .current-weather .description {
        font-size: 0.9rem;
    }
    .condition-circle {
        width: 60px;
        height: 60px;
        margin: 5px;
    }
    .condition-circle .value {
        font-size: 0.9rem;
    }
    .condition-circle .label {
        font-size: 0.65rem;
    }
    .hourly-item {
        width: 65px;
        height: 130px;
        padding: 10px 0;
    }
}



/* Modal (popup) styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 15px;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    position: relative;
    /* Dodaj poniższe dwie linie, aby zapobiec rozciąganiu w dół */
    max-height: 90vh; /* Ogranicza wysokość do 90% wysokości okna przeglądarki */
    display: flex;
    flex-direction: column;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#weatherChart {
    width: 100% !important; /* Ważne, aby zapewnić, że szerokość jest 100% */
    height: 400px !important; /* Ustaw stałą wysokość. Możesz dostosować tę wartość */
    /* Usunąłem poprzednie style, poniżej poprawiona wersja */
}

.chart-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.chart-button {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chart-button:hover {
    background-color: #e0e0e0;
}

.chart-button.active {
    background-color: #d1d1d1;
    font-weight: bold;
}

.chart-header h2 {
    text-align: center;
    margin-bottom: 0;
}

/* Zaktualizowane style dla kółek, aby były klikalne */
.condition-circle.clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.condition-circle.clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}