.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: "Skrýt otevírací dobu";
    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;
}



/* spatnyMechanik.cz — shared visual system, October 2026 */
:root { --sm-ink:#14232d; --sm-muted:#566975; --sm-accent:#c9362e; --sm-line:#dce4e9; }
body { color:var(--sm-ink); background:#f4f7f9; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { color:var(--sm-ink); letter-spacing:-.025em; }
a { color:var(--sm-accent); }
a:hover { color:#97241e; }
:focus-visible { outline:3px solid #d85a4c; outline-offset:4px; }
header.header, header.header_in { background:#14232d; border-bottom:1px solid #ffffff20; padding:18px 32px; }
header.header.sticky { background:#14232d; }
#logo.logo-link { margin-top:0 !important; font-size:23px; letter-spacing:-.5px; }
#logo .logo { background:none; -webkit-text-fill-color:initial; }
#logo .logo-main, #logo .logo-dot { color:#fff; opacity:1; }
#logo .logo-bold { color:#fa7167; letter-spacing:0; }
header.header .main-menu > ul > li span > a, header.header_in .main-menu > ul > li span > a { color:#f3f6f8; font-size:15px; }
header.header .main-menu > ul > li span > a:hover, header.header_in .main-menu > ul > li span > a:hover { color:#fa7167; }
ul#top_menu li a.btn_top { background:#c9362e; color:white; border-radius:8px; padding:10px 18px; }
.hero_single.version_1 { height:auto; min-height:650px; background-attachment:scroll; background-position:center; text-align:left; }
.hero_single.version_1 .wrapper { min-height:650px; background:linear-gradient(90deg,rgba(12,24,33,.94),rgba(12,24,33,.77) 48%,rgba(12,24,33,.25)); padding:150px 0 80px; }
.hero-content { position:relative; }
.hero-eyebrow { display:block; color:#fca49e; font-size:12px; font-weight:700; letter-spacing:2px; margin-bottom:20px; }
.hero_single.version_1 h1 { color:#fff; font-size:clamp(34px,4.3vw,58px); line-height:1.12; font-weight:700; margin:0 0 22px; max-width:760px; }
.hero_single.version_1 .wrapper p { color:#e2e8ec; font-size:19px; text-shadow:none; margin:0 0 28px; max-width:650px; }
.workshop-search { max-width:790px; }
.workshop-search label { display:block; color:white; font-weight:500; font-size:14px; margin-bottom:8px; }
.search-field { display:flex; position:relative; background:white; border:1px solid white; border-radius:12px; padding:7px; box-shadow:0 14px 35px #0003; }
.search-field > i { color:#687b87; align-self:center; padding:0 12px; font-size:23px; }
.search-field #search-input { min-width:0; height:54px; border:0; box-shadow:none; background:transparent; padding:10px 8px; font-size:16px; color:var(--sm-ink); }
.search-field:focus-within { outline:3px solid #fca49e; outline-offset:3px; }
.search-button { border:0; border-radius:8px; background:var(--sm-accent); color:white; padding:0 23px; font-size:15px; font-weight:700; white-space:nowrap; }
.search-button:hover { background:#a82d26; }
#search-hint { display:block; color:#cbd6de; margin-top:12px; font-size:13px; }
#autocomplete-results { position:absolute; top:calc(100% + 8px); left:0; right:0; background:white; color:var(--sm-ink); border:1px solid var(--sm-line); border-radius:12px; max-height:320px; overflow:auto; z-index:1000; box-shadow:0 16px 40px #0003; text-align:left; }
#autocomplete-results a { display:block; padding:7px 0; }
#autocomplete-results strong { color:var(--sm-accent) !important; }
.hero-trust { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:30px; font-size:13px; color:#dce5ea; }
.hero-trust span::before { content:'✓'; margin-right:8px; color:#fca49e; }
.hero-trust a { color:white; text-decoration:underline; text-underline-offset:4px; }
.custom-underline::after { background:var(--sm-accent); width:48px; height:3px; }
.section_comments { background:#f4f7f9; scroll-margin-top:90px; }
.section_comments .main_title_3 { max-width:760px; margin:0 auto; }
.section_comments h2, .article-section-container h2 { font-weight:700 !important; font-size:32px !important; }
.section_comments .custom-underline::after { margin:16px auto 0; }
.section_comments h4 { font-size:18px; line-height:1.5; margin:0 0 12px; }
.section_comments .text-muted { color:var(--sm-muted) !important; }
.reviews-empty { margin:35px auto 0; max-width:790px; background:white; border:1px solid var(--sm-line); border-radius:16px; padding:32px; text-align:center; }
.empty-icon { color:var(--sm-accent); display:block; font-size:42px; line-height:1.2; margin-bottom:12px; }
.reviews-empty h3 { font-size:22px; font-weight:700; }
.reviews-empty p { max-width:540px; margin:10px auto 20px; color:var(--sm-muted); }
.empty-cta { display:inline-block; font-weight:700; }
#reccomended .item .review_listing { background:white !important; border:1px solid var(--sm-line) !important; border-radius:14px; box-shadow:0 6px 20px #14232d08 !important; }
#reccomended .owl-item { opacity:1; transform:none; }
.review_listing .card-footer { background:transparent; padding:16px 24px; }
.article-section-container { background:white !important; border-bottom:1px solid var(--sm-line); }
.article-list a { padding:18px 0; }
.call_section_3 { background:#e9eef2; }
.call_section_3 .wrapper { background:none; padding:45px 0; }
.call_section_3 .col-lg-5 { width:100%; float:none !important; }
.promo-overlay { max-width:none; margin:0 !important; border:1px solid var(--sm-line); border-radius:16px; box-shadow:none; padding:32px 38px; background:#14232d; animation:none; }
.promo-overlay h2 { color:white; font-weight:700 !important; margin-bottom:16px !important; }
.promo-overlay p { font-size:16px; margin:0 0 8px; }
.promo-highlight { color:#fca49e; }
.promo-btn { margin-top:16px; background:var(--sm-accent); color:white; border-radius:8px; box-shadow:none; padding:11px 20px; font-size:15px; }
.promo-btn:hover { background:#a82d26; transform:none; }
footer { background:#14232d; padding-top:48px; }
footer h3, footer h5 { color:#fff; }
footer a, footer ul li a { color:#d1dce3; }
footer a:hover { color:#fca49e; }
.cc-window { border-radius:12px; font-family:inherit; box-shadow:0 8px 32px #0003; }
.cc-btn { background:#c9362e !important; border-color:#c9362e !important; color:white !important; border-radius:6px; }
.review-form-container, .box_general, .box_general_2 { border-radius:14px; border:1px solid var(--sm-line); }
.form-control { font-size:16px; border-radius:8px; }
.comment-btn, .btn_1 { background:var(--sm-accent); color:#fff; border-radius:8px; }
@media (max-width:991px) {
 header.header, header.header_in { padding:16px 20px; }
 header .hamburger-inner, header .hamburger-inner::before, header .hamburger-inner::after { background:#fff !important; }
 .hero_single.version_1, .hero_single.version_1 .wrapper { min-height:620px; }
 .hero_single.version_1 .wrapper { padding:130px 0 65px; }
}
@media (max-width:767px) {
 #logo.logo-link { font-size:20px; }
 .hero_single.version_1 { background-position:58% center; }
 .hero_single.version_1 .wrapper { background:linear-gradient(90deg,#0c1821ed,#0c1821aa); padding:115px 0 45px; min-height:590px; }
 .hero-content { padding-left:24px; padding-right:24px; }
 .hero-eyebrow { font-size:10px; letter-spacing:1.1px; }
 .hero_single.version_1 h1 { font-size:36px; }
 .hero_single.version_1 .wrapper p { font-size:17px; }
 .search-field { flex-wrap:wrap; }
 .search-field #search-input { width:calc(100% - 50px); flex:1; font-size:16px; }
 .search-button { width:100%; min-height:46px; }
 .hero-trust { gap:10px 18px; font-size:12px; margin-top:24px; }
 .margin_60, .margin_60_35 { padding-top:40px; padding-bottom:40px; }
 .section_comments h2, .article-section-container h2 { font-size:27px !important; }
 .reviews-empty { padding:26px 20px; }
 .header-and-button { align-items:flex-start; flex-direction:column; gap:8px; }
 .promo-overlay { padding:28px 24px; }
 footer { padding-bottom:25px; }
 .floating-comment-btn { bottom:14px; right:14px; }
 .floating-btn { background:var(--sm-accent); }
 .info-line { flex-wrap:wrap; overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce) { .promo-overlay, .floating-btn { animation:none; transition:none; } }

.mm-menu { background:#14232d; color:#e2e8ec; }
.mm-menu .mm-navbar a, .mm-menu .mm-navbar > *, .mm-menu .mm-listview { color:#e2e8ec; }
#search-input { scroll-margin-top:110px; }

/* Road information remains available ahead of the Czech data integration. */
.road-section { background:white; border-bottom:1px solid var(--sm-line); }
.road-section h2 { font-weight:700 !important; font-size:32px !important; }
.road-section .header-and-button > div { display:flex; flex-wrap:wrap; gap:8px; }
.road-section .see-more-btn { border:1px solid var(--sm-line); border-radius:8px; padding:9px 15px; font-weight:600; }
.road-section .box_feat_2, .road-empty { border:1px solid var(--sm-line); border-radius:12px; padding:20px; box-shadow:none; background:#f4f7f9 !important; }
.road-section .all_categories { margin-bottom:0; }
.road-section .droga { background:#14232d; }
#kpd-alert-box { border-radius:12px; flex-wrap:wrap; gap:10px; }
@media(max-width:767px) { .road-section h2 { font-size:27px !important; } .road-section .utrudnienie-row { gap:12px; } }