/* ==========================================================================
   Główny Plik Stylów - Ciemny Motyw Oliwkowy (z W3.CSS) - Poprawiona Wersja Dark Mode
   ========================================================================== */

/* --- Definicje Zmiennych Kolorów (Paleta Dark Mode) --- */
:root {
    /* === Podstawowe Kolory Ciemnego Motywu === */
    --main-bg-color: #1E2117;           /* Głęboka, bardzo ciemna zieleń/czerń */
    --main-text-color: #E0E0E0;         /* Jasnoszary tekst dla lepszego kontrastu niż czysta biel */
    --card-panel-bg: #2C3325;           /* Ciemna oliwka, lekko jaśniejsza od tła */
    --input-bg-color: #252A20;          /* Tło inputów - jeszcze ciemniejsze niż karty */
    --border-color-subtle: #4A5344;     /* Subtelny kolor ramki (np. dla inputów, separatorów) */

    /* === Kolory Tekstu === */
    --header-color: #A9B77D;            /* Stonowany jasno-oliwkowy dla nagłówków sekcji */
    --link-color: #8F9C8C;              /* Stonowany zielono-szary dla linków */
    --link-hover-color: #A9B77D;        /* Jaśniejszy na hover (jak nagłówki) */
    --placeholder-color: #888888;       /* Ciemniejszy szary dla placeholderów */
    --grey-text-color: #AAAAAA;         /* Jaśniejszy szary dla mniej ważnych tekstów */

    /* === Kolory Akcentujące / Akcji (Stonowane) === */
    --action-bg-color: #556B2F;         /* Ciemna oliwka dla przycisków (DarkOliveGreen) */
    --action-text-color: #F0FFF0;       /* Bardzo jasny tekst na przyciskach */
    --accent-hover-bg-color: #6A7762;   /* Lekko jaśniejsza oliwka na hover przycisku */

    --accent-border-color: #A9B77D;     /* Kolor akcentujący ramki (np. focus inputu) */
    --accent-hover-border-color: #556B2F; /* Dopasowany do koloru akcji */

    /* === Paski / Elementy Nawigacyjne === */
    --navbar-bg-color: #181A14;         /* Jeszcze ciemniejsze tło dla górnego paska */
    --breadcrumbs-bg-color: #3A4135;    /* Ciemne tło dla paska breadcrumbs/tytułu */

    /* === Warianty motywu W3.CSS (dostosowane do dark mode) === */
    /* L - jaśniejsze odcienie, D - ciemniejsze */
    --w3-theme-l5-bg: #3A4135; --w3-theme-l5-text: #D2DED0; /* Użyte np. dla breadcrumbs */
    --w3-theme-l4-bg: #4A5344; --w3-theme-l4-text: #CED9CB; /* Użyte np. dla border-color-subtle */
    --w3-theme-l3-bg: #5A6553; --w3-theme-l3-text: #B9C5B6;
    --w3-theme-l2-bg: #6A7762; --w3-theme-l2-text: #A4B0A1; /* Użyte np. dla hover przycisku */
    --w3-theme-l1-bg: #7A8971; --w3-theme-l1-text: var(--main-text-color);
    --w3-theme-d1-bg: #252A20; --w3-theme-d1-text: var(--main-text-color); /* Użyte dla input-bg */
    --w3-theme-d2-bg: #1E2117; --w3-theme-d2-text: var(--main-text-color); /* Jak tło główne */
    --w3-theme-d3-bg: #181A14; --w3-theme-d3-text: var(--main-text-color); /* Jak navbar */
    --w3-theme-d4-bg: #121410; --w3-theme-d4-text: var(--main-text-color);
    --w3-theme-d5-bg: #0C0E0A; --w3-theme-d5-text: var(--main-text-color);

    --w3-theme-light-bg: #A9B77D; --w3-theme-light-text: #000000; /* Jasny akcent - tekst ciemny */
    --w3-theme-dark-bg: var(--main-bg-color); --w3-theme-dark-text: var(--main-text-color);
    --w3-theme-action-bg: var(--action-bg-color); --w3-theme-action-text: var(--action-text-color);

    /* Domyślne tło i tekst dla klasy .w3-theme */
    --w3-theme-bg: var(--card-panel-bg); --w3-theme-text: var(--main-text-color);

    --w3-text-theme-color: var(--header-color);
    --w3-border-theme-color: var(--border-color-subtle); /* Domyślna ramka tematyczna */

    /* Standardowe Kolory W3 (bez zmian) */
    --w3-color-green: #689F38; --w3-color-green-text: #fff;
    --w3-color-yellow: #FBC02D; --w3-color-yellow-text: #000;
    --w3-color-orange: #F57C00; --w3-color-orange-text: #fff;
    --w3-color-red: #D32F2F; --w3-color-red-text: #fff;
    --w3-color-purple: #7B1FA2; --w3-color-purple-text: #fff;
    --w3-color-maroon: #880E4F; --w3-color-maroon-text: #fff;

    /* Zastąpienie Jasnoszarego */
    --w3-light-grey-replacement: var(--w3-theme-l5-bg); /* Używamy ciemnego odcienia */
    --input-border-color: var(--border-color-subtle); /* Używamy zdefiniowanej subtelnej ramki */
}


/* --- Podstawowe Style Strony --- */
body {
    background-color: var(--main-bg-color) !important;
    color: var(--main-text-color) !important;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* --- Górny Pasek Nawigacyjny --- */
/* Załóżmy, że ma klasę .top-navbar lub używa w3-top */
.w3-top {
    background-color: var(--navbar-bg-color) !important;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
}
.w3-top .w3-bar-item {
    color: var(--main-text-color) !important;
}
.w3-top .w3-button:hover {
    background-color: var(--accent-hover-bg-color) !important;
    color: var(--action-text-color) !important;
}

/* --- Pasek Breadcrumbs / Tytuł Strony --- */
/* Załóżmy, że ma klasę .breadcrumbs-bar lub .page-title-bar */
.breadcrumbs-bar, .page-title-bar {
    background-color: var(--breadcrumbs-bg-color) !important;
    color: var(--main-text-color) !important;
    padding: 8px 16px; /* Przykładowy padding */
    margin-bottom: 16px; /* Odstęp od reszty treści */
}
.breadcrumbs-bar a, .page-title-bar a {
    color: var(--link-color) !important;
}
.breadcrumbs-bar a:hover, .page-title-bar a:hover {
    color: var(--link-hover-color) !important;
}

/* --- Typografia --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--header-color) !important;
    line-height: 1.3;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 600; /* Lekko pogrubione dla hierarchii */
}
h1 { font-size: 24px; color: var(--main-text-color) !important; margin-top: 5px; } /* Główny tytuł */
h2 { font-size: 20px; }
h3 { font-size: 18px; } /* Np. tytuły sekcji: Informacje, Opinie */

p {
    margin-top: 0;
    margin-bottom: 5px; /* Dodaj trochę oddechu między paragrafami */
    font-size: 15px; /* Przywróć domyślny rozmiar dla lepszej czytelności */
    line-height: 1.6;
}

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

/* --- Nadpisania Motywu W3.CSS --- */
/* Używamy zmiennych zdefiniowanych w :root */
.w3-theme-l5 {color: var(--w3-theme-l5-text) !important; background-color: var(--w3-theme-l5-bg) !important;}
.w3-theme-l4 {color: var(--w3-theme-l4-text) !important; background-color: var(--w3-theme-l4-bg) !important;}
.w3-theme-l3 {color: var(--w3-theme-l3-text) !important; background-color: var(--w3-theme-l3-bg) !important;}
.w3-theme-l2 {color: var(--w3-theme-l2-text) !important; background-color: var(--w3-theme-l2-bg) !important;}
.w3-theme-l1 {color: var(--w3-theme-l1-text) !important; background-color: var(--w3-theme-l1-bg) !important;}
.w3-theme-d1 {color: var(--w3-theme-d1-text) !important; background-color: var(--w3-theme-d1-bg) !important;}
.w3-theme-d2 {color: var(--w3-theme-d2-text) !important; background-color: var(--w3-theme-d2-bg) !important;}
.w3-theme-d3 {color: var(--w3-theme-d3-text) !important; background-color: var(--w3-theme-d3-bg) !important;}
.w3-theme-d4 {color: var(--w3-theme-d4-text) !important; background-color: var(--w3-theme-d4-bg) !important;}
.w3-theme-d5 {color: var(--w3-theme-d5-text) !important; background-color: var(--w3-theme-d5-bg) !important;}

.w3-theme-light {color: var(--w3-theme-light-text) !important; background-color: var(--w3-theme-light-bg) !important;}
.w3-theme-dark {color: var(--w3-theme-dark-text) !important; background-color: var(--w3-theme-dark-bg) !important;}
.w3-theme-action {color: var(--w3-theme-action-text) !important; background-color: var(--w3-theme-action-bg) !important;}

.w3-theme {color: var(--w3-theme-text) !important; background-color: var(--w3-theme-bg) !important;}
.w3-text-theme {color: var(--w3-text-theme-color) !important;}
.w3-border-theme {border-color: var(--w3-border-theme-color) !important;}

.w3-hover-theme:hover {color: var(--action-text-color) !important; background-color: var(--accent-hover-bg-color) !important;}
.w3-hover-text-theme:hover {color: var(--link-hover-color) !important;} /* Lepszy hover dla tekstu */
.w3-hover-border-theme:hover {border-color: var(--accent-hover-border-color) !important;}

/* --- Nadpisania Komponentów W3.CSS --- */
/* Karty używają teraz subtelnie jaśniejszego tła niż tło strony */
.w3-card, .w3-card-2, .w3-card-4 {
    background-color: var(--card-panel-bg) !important;
    color: var(--main-text-color) !important; /* Jasny tekst jest OK na tym tle */
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); /* Standardowy cień w3 */
}

/* Przyciski - ciemne tło, jasny tekst */
.w3-button {
    background-color: var(--action-bg-color) !important;
    color: var(--action-text-color) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500; /* Lekko pogrubiony tekst przycisku */
    text-transform: none; /* Wyłącz wielkie litery jeśli w3.css je dodaje */
    border-radius: 4px; /* Lekkie zaokrąglenie */
}
.w3-button:hover {
    background-color: var(--accent-hover-bg-color) !important;
    color: var(--action-text-color) !important;
}

.w3-bar .w3-bar-item.w3-button {
    /* Domyślne dla paska: przezroczyste tło, jasny tekst */
    color: var(--main-text-color) !important;
    background-color: transparent !important;
}
.w3-bar .w3-bar-item.w3-button:hover {
    background-color: var(--accent-hover-bg-color) !important;
    color: var(--action-text-color) !important;
}


/* Wejścia (Inputs) */
.w3-input, .w3-select {
    background-color: var(--input-bg-color) !important;
    color: var(--main-text-color) !important;
    border: 1px solid var(--input-border-color) !important; /* Dodaj '1px solid' */
    border-radius: 4px; /* Lekkie zaokrąglenie */
}
.w3-input::placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1; /* Pełna widoczność placeholdera */
}
.w3-input:focus, .w3-select:focus {
    border-color: var(--accent-border-color) !important; /* Akcent na focus */
    outline: none; /* Usuń domyślny outline przeglądarki */
    box-shadow: 0 0 0 2px rgba(169, 183, 125, 0.3); /* Opcjonalny delikatny cień na focus */
}
/* Styl dla select, aby pasował do input */
.w3-select {
    padding: 8px; /* Dopasuj padding jak w input */
    height: 38.5px; /* Dopasuj wysokość jak w input */
}


/* Tagi / Panele kolorowe (AQI itp.) - bez zmian */
.w3-tag.w3-green, .w3-panel.w3-green { background-color: var(--w3-color-green) !important; color: var(--w3-color-green-text) !important; }
.w3-tag.w3-yellow, .w3-panel.w3-yellow { background-color: var(--w3-color-yellow) !important; color: var(--w3-color-yellow-text) !important; }
.w3-tag.w3-orange, .w3-panel.w3-orange { background-color: var(--w3-color-orange) !important; color: var(--w3-color-orange-text) !important; }
.w3-tag.w3-red, .w3-panel.w3-red { background-color: var(--w3-color-red) !important; color: var(--w3-color-red-text) !important; }
.w3-tag.w3-purple, .w3-panel.w3-purple { background-color: var(--w3-color-purple) !important; color: var(--w3-color-purple-text) !important; }
.w3-tag.w3-maroon, .w3-panel.w3-maroon { background-color: var(--w3-color-maroon) !important; color: var(--w3-color-maroon-text) !important; }

/* Modal / Dropdown */
.w3-modal-content, .w3-dropdown-content {
     background-color: var(--card-panel-bg) !important; /* Tło jak karty */
     color: var(--main-text-color) !important; /* Jasny tekst */
     border: 1px solid var(--border-color-subtle); /* Dodaj delikatną ramkę */
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); /* Mocniejszy cień dla modali */
}
.w3-dropdown-content {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); /* Standardowy cień dla dropdown */
    border-radius: 4px; /* Zaokrąglenie */
}
.w3-dropdown-content .w3-bar-item { /* Elementy w dropdown */
    color: var(--main-text-color) !important;
}
.w3-dropdown-content .w3-bar-item:hover {
    background-color: var(--accent-hover-bg-color) !important;
    color: var(--action-text-color) !important;
}


/* Zastąpienie standardowych kolorów W3 */
.w3-light-grey { background-color: var(--w3-light-grey-replacement) !important; color: var(--main-text-color) !important; }
.w3-text-grey, .w3-text-dark-grey,
.fas.w3-text-grey, .fas.w3-text-dark-grey {
    color: var(--grey-text-color) !important;
}

/* --- Twoje Niestandardowe Klasy --- */
/* .w3-box - jeśli go używasz, dostosuj tło i kolor do potrzeb */
.w3-box {
    background-color: var(--card-panel-bg) !important; /* Np. jak karta */
    color: var(--main-text-color) !important;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

/* Styl dla sekcji komentarza (np. "Spoko, fajnie") */
/* Załóżmy, że ma klasę .comment-box lub używa w3-panel */
.comment-box {
    background-color: var(--input-bg-color) !important; /* Ciemniejsze tło, jak input */
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px; /* Odstęp od gwiazdek/nazwy */
    border: 1px solid var(--border-color-subtle);
}


ol {
    padding-inline-start: 20px; /* Standardowe wcięcie listy */
    margin: 0px 0px 10px; /* Usunięty margines boczny */
}

/* --- KALENDARZ W3.CSS --- */
.calendar-weekdays li {
    display: inline-block;
    width: 14.28%;
    color: var(--grey-text-color); /* Szary tekst dla dni tygodnia */
    background: transparent;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9em; /* Mniejszy rozmiar */
    border: none;
    padding: 4px 0;
}
.calendar-days li {
    display: inline-block;
    width: 14.28%;
    min-height: 40px; /* Nieco mniejsza wysokość */
    line-height: 40px; /* Wycentrowanie tekstu w pionie */
    text-align: center;
    margin-bottom: 4px;
    font-size: 1em;
    color: var(--main-text-color);
    background: transparent;
    border-radius: 50%; /* Kółka */
    padding: 0; /* Usunięcie paddingu */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.calendar-days li:hover {
    background-color: var(--border-color-subtle); /* Subtelne tło na hover */
}
/* Aktywny dzień */
.calendar-days li .active,
.calendar-days li.active {
    background: var(--w3-theme-action-bg);
    color: var(--w3-theme-action-text) !important;
    font-weight: bold;
}
/* Dzisiejszy dzień */
.calendar-days li.today {
    border: 1px solid var(--accent-border-color); /* Zaznaczenie ramką zamiast tła */
    line-height: 38px; /* Dostosowanie line-height z powodu ramki */
}
.calendar-days li.empty {
    color: #555;
    background: transparent;
    cursor: default;
}
.calendar-days li.empty:hover {
    background-color: transparent; /* Brak hover dla pustych */
}

@media screen and (max-width:720px) {
    .calendar-weekdays li, .calendar-days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
    .calendar-weekdays li, .calendar-days li {width: 12.5%;}
    .calendar-days li { min-height: 36px; line-height: 36px; }
    .calendar-days li.today { line-height: 34px; }
}
@media screen and (max-width: 290px) {
    .calendar-weekdays li, .calendar-days li {width: 12.2%;}
}

/* Usuwamy float z W3.CSS i zastępujemy go Flexboxem */
.modern-places-list {
    display: flex;
    flex-wrap: wrap;
}

/* 
  To kluczowy element:
  Sprawia, że każda kolumna (.w3-col) staje się kontenerem flex.
  Dzięki temu link <a> wewnątrz (Twój kafelek) może się rozciągnąć
  na całą dostępną wysokość.
*/
.modern-places-list > .w3-col {
    display: flex;
    flex-direction: column;
}

/* 
  To drugi kluczowy element:
  Sprawia, że Twój kafelek (.modern-place-card) rośnie,
  aby wypełnić całą wysokość swojej kolumny.
*/
.modern-places-list > .w3-col > .modern-place-card {
    flex-grow: 1;
}

/* Kontener odwracający kolejność gwiazdek, co jest kluczowe dla logiki CSS */
.interactive-rating {
    display: inline-block;
    direction: rtl; /* Od prawej do lewej */
}

/* Stylizacja samych gwiazdek (etykiet) */
.interactive-rating label {
    cursor: pointer;
    color: #ccc; /* Kolor nieaktywnej gwiazdki - delikatny szary */
    transition: color 0.2s ease-in-out;
}

/* Magia dzieje się tutaj: */

/* 1. Zmień kolor gwiazdki, nad którą jest kursor ORAZ wszystkich gwiazdek "przed" nią (dzięki direction: rtl) */
.interactive-rating label:hover,
.interactive-rating label:hover ~ label {
    color: var(--w3-color-yellow); /* Kolor z palety W3.CSS - amber */
}

/* 2. Utrzymaj kolor dla zaznaczonej opcji i gwiazdek "przed" nią */
.interactive-rating input[type="radio"]:checked ~ label {
    color: var(--w3-color-yellow); /* Kolor z palety W3.CSS - amber */
}

/* Ukrywa element wizualnie, ale zostawia go dostępnym dla przeglądarki i czytników ekranu */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

hr { 
    margin: 5px;
}

.w3-margin{
    margin:8px!important}
    
.w3-margin-top{
    margin-top:8px!important}

.w3-margin-bottom{
    margin-bottom:8px!important
}

.w3-margin-left{
    margin-left:8px!important
}
    
.w3-margin-right{
    margin-right:8px!important
}