.date-picker {
      padding: 10px;
      font-size: 16px;
      border: 2px solid #ccc;
      border-radius: 4px;
      text-align: center;
    }

.email-input:valid { border: 2px solid #2ecc71; }
.email-input:invalid { border: 2px solid #e74c3c; }
.email-input {
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

.date-picker, .email-input {
    width: 100%;
    max-width: 100%;
}

.logo-link {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #EB611F; /* niebieski odcień */
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: inline-block;
}

.logo-link:hover, .logo-link:focus {
  color: black;
}

.custom-underline {
  position: relative;
  display: inline-block;
  /* Opcjonalnie - odstęp pod nagłówkiem */
  margin-bottom: 32px;
  
}

.custom-underline::after {
  content: "";
  display: block;
  width: 80px;           /* długość kreski */
  height: 4px;           /* grubość kreski */
  background: #EB611F;   /* kolor kreski */
  margin: 18px auto 0 0; /* odstęp i wyśrodkowanie */
  border-radius: 3px;
}

.review-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 42px 32px;
  max-width: 425px;
  margin: auto;
}

.review-form-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.review-form-main h2 {
  font-weight: 600;
  font-size: 28px;
  margin-bottom: 24px;
  margin-top: 7px;
}

.rating-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 20px;
  margin: 14px 0 0 0;
  color: #232323;
}

.stars {
  font-size: 26px;
  color: #d1d3d8;
  letter-spacing: 4px;
}

.review-form {
  margin-top: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.review-form input, .review-form textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #e3e3e9;
  border-radius: 7px;
  font-size: 16px;
  margin-bottom: 0;
  background: #f7f9fa;
}

.comment-input {
  min-height: 70px;
  resize: vertical;
}

.comment-btn {
  background: #ffc001;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 13px 0;
  font-size: 21px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 8px;
  width: 100%;
  transition: background 0.18s;
}

.comment-btn:hover {
  background: #ffcb38;
}

.other-reviews-info {
  width: 100%;
  text-align: center;
  font-size: 17px;
  color: #30343d;
  margin-top: 28px;
}



#autocomplete-results > div:hover { background: #f8f9fa; }


  .rating-row {
    margin: 6px 0;
    font-size: 16px;
	line-height: 1; /* Trochę ciaśniej */
  }
  .stars {
    display: inline-flex;
    gap: 4px;
    direction: rtl;
    unicode-bidi: bidi-override;
  }
  .stars span {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
  }
  .stars span:hover,
  .stars span:hover ~ span,
  .stars span.active,
  .stars span.active ~ span {
    color: #f5c518;
  }


  .rating {
    display: flex;
    /* Usunięto: flex-direction: row-reverse; */ 
    /* Usunięto: justify-content: flex-end; */
    
    gap: 8px;
    font-size: 25px;
}
.rating input {
    display: none;
}
/* Zmodyfikuj selektory na standardowe: */
/* Zaznaczenie gwiazdki i wszystkich na prawo od niej */
.rating input:checked ~ label, 
.rating label:hover ~ label {
    color: #ddd; /* Szare */
}
/* Zaznaczenie gwiazdki i wszystkich na LEWO od niej */
.rating input:checked + label,
.rating input:checked + label ~ label,
.rating label:hover,
.rating label:hover ~ label {
    color: #ffca2c; /* Zaznaczone - ZŁOTY/ZIELONY */
}
  /* Dla każdej kategorii osobny kontener */
  .category {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-family: Arial, sans-serif;
  }

  .category h5 {
    width: 170px;
    margin: 10 10px 0 10px;
    font-weight: normal;
  }


.rating {
  color: #999;
  font-size: 12px;
  font-size: 0.75rem;
}
.rating i {
  width: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  height: 20px;
  font-size: 12px;
  font-size: 0.75rem;
  display: inline-block;
  background-color: #32a067;
  color: #fff;
  line-height: 20px;
  text-align: center;
  margin-right: 2px;
}
.rating i.empty {
  background-color: #ccc;
}
.rating1 em {
  display: inline-block;
  margin-left: 10px;
}


  /* --- Konfiguracja podstawowa kontenera --- */
.custom-modal-content {
  background-color: #ffffff;
  border-radius: 8px; /* Zaokrąglone rogi */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Delikatny cień */
  padding: 20px;
  max-width: 450px; /* Nieco mniejsza szerokość niż 500px, wygląda lepiej */
  margin: 0 auto; /* Centrowanie w modalu */
  text-align: center;
}

/* --- Nagłówek --- */
.custom-modal-content .modal-header h6 {
  font-size: 1.5rem; /* Większa czcionka nagłówka */
  color: #333;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee; /* Linia oddzielająca */
  padding-bottom: 15px;
  font-weight: 600;
}

/* --- Treść i tekst --- */
.custom-modal-content .modal-body p {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* --- Pole formularza --- */
.custom-modal-content .form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
  box-sizing: border-box; /* Ważne, by padding nie zwiększał szerokości */
}

.custom-modal-content .form-input:focus {
  border-color: #007bff; /* Podświetlenie przy aktywności */
  outline: none;
}

/* --- Stopka i przycisk --- */
.custom-modal-content .modal-footer {
  margin-top: 20px;
}

.custom-modal-content .btn-confirm {
  background-color: #dc3545; /* Użycie koloru czerwonego/ostrzegawczego dla operacji usuwania */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s;
  width: 100%; /* Przycisk na całą szerokość */
}

.custom-modal-content .btn-confirm:hover {
  background-color: #c82333;
}

.promo-overlay {
  max-width: 420px;
  margin: 60px 0 0 80px;
  background: rgba(42,42,42,0.66);
  border-radius: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.19);
  padding: 38px 34px 32px 34px;
  color: #fff;
  text-align: left;
  animation: fadeInCard 0.7s;
}
.promo-overlay h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #fffbe3;
  text-shadow: 3px 3px 12px rgba(0,0,0,0.15);
}
.promo-overlay p {
  font-size: 1.18rem;
  margin: 0 0 14px 0;
}
.promo-highlight {
  font-weight: 600;
  color: #ffe660;
  margin-bottom: 18px;
}
.promo-btn {
  display: inline-block;
  padding: 13px 33px;
  background: #EB611F;
  color: #222;
  font-size: 1.09em;
  font-weight: 700;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.19);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.promo-btn:hover {
  background: #EB611F;
  color: #fff;
  transform: scale(1.05);
}
@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(30px);}
  to { opacity: 1; transform: translateY(0);}
}




.logo {
  display: inline; /* lub inline-block, ale testuj inline */
  background: linear-gradient(90deg, #EB611F 60%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #EB611F; /* fallback dla Safari */
}
.logo-main {
  color: #EB611F;
  letter-spacing: 0.5px;
}
.logo-bold {
  color: #EB611F;
  letter-spacing: 1.5px;
}
.logo-dot {
  color: #222;
  opacity: 0.77;
}

/* GŁÓWNA STRUKTURA KART */
.utrudnienia-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
}
.utrudnienie-karta {
    flex: 1 1 45%; 
    min-width: 300px; 
    border: 1px solid #EEF3F7;
    border-radius: 8px;
    margin-bottom: 10px; /* Dodatkowe miejsce na zrzucie ekranu */
}
.utrudnienie-karta a {
    display: block;
    text-decoration: none;
    color: #333;
}

/* SEKCJA GÓRNA - Flexbox dla A4, Opisu i Strzałek */
.header-droga {
    display: flex;
    align-items: center; /* Wyrównuje wszystko w pionie */
    padding: 15px 10px 15px 15px; /* Duży padding na górze/dole dla wysokości */
}

/* OZNACZENIE DROGI (A4 / A1) */
.droga {
    background-color: #3471B0; 
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;

    font-size: 1.2em;
    line-height: 1;
    min-width: 30px;
    text-align: center;
    /* Ustawia blok A4 na górze bloku, jeśli reszta ma wiele linii */
    align-self: flex-start; 
}

/* GŁÓWNY OPIS - Teraz cały jest pogrubiony */
.opis-caly {
    flex-grow: 1; 
    font-weight: bold; /* Cały tekst jest pogrubiony */
    line-height: 1.3;
    /* Zapewnia, że tekst jest poprawnie wyświetlany */
    display: block;
    padding-right: 10px;
}

/* PODWÓJNE STRZAŁKI */
.strzalki {
    font-size: 1.2em;
    color: #EB611F; 
    font-weight: bold;
    line-height: 1.2; /* Odstęp między strzałkami */
    white-space: nowrap; 
    text-align: right;
    margin-left: auto; /* Przesuwa strzałki na samą prawą stronę */
    
    /* DODATKOWE STYLOWANIE DLA EFEKTU LEKKIEGO WYCIĘCIA */
    padding-left: 10px;
    /* Opcjonalnie: background, aby przykryć tło, jeśli kursor jest inny */
}

/* SEKCJA DOLNA (SZCZEGÓŁY CZASOWE) */
.szczegoly-czas {
    font-weight: normal;
    font-size: 0.9em;
    padding: 5px 10px;
    /* Wyrównanie do lewej, ale wcięte, by zgadzało się z tekstem w górnej sekcji */
    text-align: left; 
    
    /* Wcięcie zgodne z marginesem A4 (30px + 15px) */
    padding-left: calc(30px + 15px + 15px); 
    
}


/* Ukryj przycisk na komputerach, pokaż tylko na mobile */
.floating-comment-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: transparent !important;   /* <── to najważniejsze */
    pointer-events: none;                   /* żeby kliknięcia przechodziły tylko przez sam przycisk */
}

.floating-btn {
    pointer-events: auto;                    /* tylko sam przycisk jest klikalny */
    /* reszta stylów bez zmian */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #EB611F;
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-decoration: none;
}

.floating-btn:hover {
    transform: scale(1.05);
    background: white;
}

/* ===== POKAŻ TYLKO NA MOBILE ===== */
/* Wersja najpopularniejsza – do 1024px */
@media (max-width: 1024px) {
    .floating-comment-btn {
        display: block;
    }
}

/* Jeśli chcesz jeszcze bardziej „mobile-only” – do 768px */
@media (max-width: 768px) {
    .floating-comment-btn {
        display: block;
    }
}

/* Delikatna animacja pulsowania (opcjonalna, ale ładnie wygląda) */
@keyframes pulse {
    0%   { box-shadow: 0 4px 15px rgba(233,30,99,0.4); }
    50%  { box-shadow: 0 4px 25px rgba(233,30,99,0.7); }
    100% { box-shadow: 0 4px 15px rgba(233,30,99,0.4); }
}

    /* Overlay – blokuje całą stronę */
        #loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9); /* Białe tło z przezroczystością */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Na wierzchu */
            transition: opacity 0.5s ease-out;
        }

        /* Spinner – klasyczna animacja */
        .spinner {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db; /* Niebieski */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Ukryj overlay po zakończeniu */
        .hidden {
            opacity: 0;
            pointer-events: none; /* Wyłącz interakcje */
        }

        /* Twoja treść strony */
        .content {
            padding: 20px;
            display: none; /* Ukryta na początku */
        }

/* ------------------------------------------- */
/* STYL DLA WYMAGANEGO I NIEZAZNACZONEGO CHECKBOXA */
/* ------------------------------------------- */

/* 1. Podświetlenie tekstu etykiety na czerwono */
.required-checkbox:has(input:required:invalid) {
    color: #EB611F !important; /* Oznacz tekst na czerwono, jeśli jest invalid */
}

.required-checkbox input:required:invalid ~ .checkmark {
    border-color: #EB611F !important; /* Ustaw czerwoną ramkę */
    /* Można też dodać lekki cień, aby bardziej rzucało się w oczy: */
}
.comment-input:required:invalid {
    /* Czerwona ramka */
    border: 2px solid #EB611F; 
    
    /* Dodatkowy efekt cienia, aby rzucało się w oczy */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4); 
}

/* Opcjonalnie: Powrót do normalnego stylu, gdy użytkownik wpisze treść (jest poprawny) */
.comment-input:valid {
    /* Ustawienie zielonej ramki lub przywrócenie domyślnej */
    border: 1px solid green; /* Możesz użyć koloru zielonego */
    box-shadow: none;
}


/* --- STYLES DLA NOWEGO UKŁADU GRID --- */

/* Konfiguracja nagłówka (pozycjonowanie tytułu i przycisku) */
.header-and-button {
    display: flex;
    justify-content: space-between; /* Rozdziela tytuł i przycisk */
    align-items: center;
    margin-bottom: 25px;
}

.section-title {
    font-size: 24px;
    /* Linia pod tytułem (jeśli używasz 'custom-underline' to zachowaj jej style tutaj) */
    border-bottom: 3px solid #FF6600; 
    padding-bottom: 5px;
}

.see-more-btn {
    white-space: nowrap;
    border-radius: 5px;
    color: #EB611F;
}

/* Właściwy układ Grid: 2 kolumny */
.article-list {
    display: grid;
    /* Tworzy dwie równe kolumny, z odstępem 30px między nimi */
    grid-template-columns: 1fr 1fr; 
    gap: 1px 30px; /* Mały odstęp w pionie, większy w poziomie */
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-list li {
    /* Usuwamy wszelkie domyślne obramowania z elementu listy, 
       które mogły powodować podwójne linie */
    border: none;
    padding: 0;
}

/* Stylizujemy separator LINIĄ NA DÓŁ tylko linku, a nie list */
.article-list a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: #333;
    /* JEDNA cienka linia pod każdym elementem */
    border-bottom: 1px solid #e0e0e0; 
    transition: background-color 0.3s;
}

.article-list a:hover {
    color: #FF6600;
    background-color: #f7f7f7;
}

/* Wyrównanie ikony */
.article-icon {
    color: #FF6600; 
    margin-right: 10px;
    font-size: 16px;
}

/* Układ dla mniejszych ekranów: jedna kolumna */
@media (max-width: 768px) {
    .article-list {
        grid-template-columns: 1fr; /* Zmienia się na jedną kolumnę */
    }
}


/* --- STYLES DLA TOAST NOTIFICATION --- */

.toast-message {
    /* Domyślny wygląd */
    visibility: hidden; /* Domyślnie ukryty */
    min-width: 250px;
    background-color: #333; /* Ciemne tło */
    color: #fff; /* Biały tekst */
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 9999; /* Zawsze na wierzchu */
    left: 50%;
    bottom: 30px; /* Pozycja: na dole ekranu */
    transform: translateX(-50%);
    font-size: 17px;
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

/* Klasa pokazująca notyfikację */
.toast-message.show {
    visibility: visible;
    opacity: 1;
    bottom: 40px; /* Delikatny ruch w górę */
}

.button-group {
    gap: 10px; /* Odstęp między przyciskami */
}

.btn-icon {
    /* Ustawienia rozmiaru i kształtu */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Okrągłe */
    
    /* Centrowanie ikony */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Wygląd ikon */
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}

/* 1. STYL PODSTAWOWY (NP. MAPA) - KOLOR POMARAŃCZOWY AKCENTU */
.btn-icon.primary {
    background-color: #C19716; /* Kolor akcentu */
    color: white;
}

/* 2. STYL DRUGORZĘDNY (NP. WWW) - BIAŁY LUB SUBTELNIE SZARY */
.btn-icon.secondary {
    background-color: #5A5B5C; /* Ciemniejszy, ale spójny z tłem */
    color: white;
}

/* 3. STYL OUTLINE (NP. UDOSTĘPNIJ) - PRZEZROCZYSTE TŁO */
.btn-icon.outline {
    background-color: transparent;
    border: 2px solid white; 
    color: white;
}

.btn-icon:hover {
    transform: scale(1.1);
}

.box_feat_2 {
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 12px;
}

.utrudnienie-row {
    display: flex;
    align-items: flex-start;        /* albo center, jeśli chcesz wyśrodkować w pionie */
    gap: 20px;                      /* odstęp między A1 a tekstem */
    line-height: 1.4;
}

.droga {
    flex: 0 0 50px;                 /* stała szerokość dla wszystkich dróg */
    padding: 6px 10px;
    background: #0d47a1;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 6px;
    text-align: center;
    margin-top: 2px;                /* lekkie przesunięcie, jeśli chcesz dokładnie jak na zdjęciu */
}

.droga-a1 {
    background: #0d47a1;            /* kolor A1 */
}

/* opcjonalnie inne drogi */
.droga-a2 { background: #d32f2f; }
.droga-a4 { background: #388e3c; }

.utrudnienie-text {
    flex: 1;                        /* zajmuje resztę miejsca */
    font-size: 15px;
}

.utrudnienie-text a {
    text-decoration: none;
    font-weight: 600;
}

.utrudnienie-text a:hover {
    text-decoration: underline;
}

.utrudnienie-text small {
    color: #666;
    font-size: 13px;
}


/* Definicja stylu dla znaku ograniczenia prędkości */
.speed-limit {
    /* Ustawienie wyglądu koła */
    display: inline-block;
    border: 3px solid red; /* Czerwona obwódka */
    border-radius: 50%; /* Zaokrąglenie, aby było koło */
    padding: 5px 10px; /* Wewnętrzne marginesy */
    
    /* Wyśrodkowanie tekstu */
    text-align: center;
    
    /* Styl tekstu */
    font-size: 1.0em;
    font-weight: bold;
    color: #222;
    background-color: white;
}

/* Opcjonalnie: Styl dla samego tekstu ograniczenia (np. bez 'km/h') */
.speed-number {
    font-size: 1.5em; /* Większa czcionka dla samej liczby */
    margin-right: 2px;
}

.speed-unit {
    font-size: 0.7em; /* Mniejsza czcionka dla 'km/h' */
    display: block; /* Przeniesienie 'km/h' pod spód */
    margin-top: -3px;
}


    .schedule-list {
        list-style: none;
        padding-left: 0; /* Usuwamy domyślny padding listy */
        margin-top: 1rem;
        font-size: 0.95em;
        max-width: 250px;
    }

    .schedule-list li {
        display: flex; /* Aktywujemy Flexbox dla każdego wiersza */
        justify-content: space-between; /* Rozsuwamy zawartość na krańce */
        padding: 0.25rem 0;
    }

    .schedule-list .day-name {
        font-weight: bold; /* Opcjonalnie: pogrubienie nazwy dnia */
        padding-right: 1rem;
    }

    .schedule-list .day-value {
        text-align: right; /* Wyrównanie wartości do prawej */
    }





/* nadpisanie niebieskiego zaznaczenia DataTables */
table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(255, 204, 204, 1) !important; /* tło zaznaczenia */
    color: #000 !important;                                           /* kolor tekstu */
}

/* Twoje klasy */
.zamknieta   { background-color: #ffcccc !important; font-weight: bold; }
.zwężenie    { background-color: #fff3cd !important; }
.aktualizacja{ text-align: center; margin: 20px 0; font-size: 1.1em; }

/* aktywna strona – tło pomarańczowe, tekst czarny */
.page-item.active .page-link {
    background-color: #ff7f00 !important; /* zostaje Twoje podświetlenie */
    border-color: #ff7f00 !important;
    color: #000 !important;               /* czarna czcionka */
}

/* pozostałe strony, jeśli chcesz też na czarno */
.page-link {
    color: #000 !important;
}



  
.rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0;
    flex-wrap: wrap; /* na bardzo małych ekranach przejdzie do dwóch linii */
}

.rating-label {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    min-width: 180px;
}

.rating-stars {
    display: flex;
    flex-direction: row-reverse; /* klikanie od lewej działa naturalnie */
    gap: 6px;
}

.rating-stars input {
    display: none;
}

.rating-stars label {
    font-size: 34px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Hover – podświetlanie wszystkich gwiazdek do tej, na którą najechaliśmy */
.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input:checked ~ label {
    color: #ffc107; /* ładny złoty kolor */
}

/* Zaznaczone gwiazdki */
.rating-stars input:checked ~ label {
    color: #ffc107;
}

/* Na mobile – żeby tekst nie był za wąski */
@media (max-width: 480px) {
    .rating-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .rating-label {
        min-width: auto;
    }
}


/* opinie w sieci */

.accordion-toggle {
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 1em;
    color: #333;
}

.accordion-toggle:hover {
    color: #000;
}

.accordion-toggle .arrow {
    transition: transform 0.3s ease;
    font-size: 1.1em;
}

.accordion-toggle[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

.accordion-toggle[aria-expanded="true"] .toggle-text {
    display: none;
}

.accordion-toggle[aria-expanded="true"]::after {
    content: "Ukryj godziny";
    font-weight: 600;
    color: white;
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 30px;
    margin: 0;
    list-style: none;
    font-size: 0.95em;
}

.accordion-panel.open {
    max-height: 500px;     /* wystarczy duża wartość, żeby wszystko się zmieściło */
    padding: 12px 30px;
    margin-top: 8px;
}

/* opcjonalnie – ładny separator */
.accordion-panel::before {
    content: "";
    display: block;
    height: 1px;
    background: #ddd;
    margin-bottom: 12px;
}