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

/* ============================================================
   GLOBALNE USTAWIENIA
============================================================ */

body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700; /* Pogrubienie czcionki na całej stronie (400 to normal, 500 to medium) */
    font-size: 16px; /* Zmniejszenie rozmiaru dla lepszej czytelności pogrubionej czcionki */
    line-height: 1.45;
    color: #222;
    background: #ffffff;
    margin: 0;
    padding: 0;
}
.calendar-banner {
    width: 100%;
    text-align: center;
}

.line-grid {
    text-align: center;
}


h1, h2, h3 {
    margin: 15px 0 10px 0;
    font-weight: 600;
}

a {
    color: #0078ff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ============================================================
   TABELKI OGÓLNE
============================================================ */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 15px;
}

th, td {
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
}

th {
    background: #f0f0f0;
    font-weight: bold;
}

tr:nth-child(odd) { background: #ffffff; }
tr:nth-child(even) { background: #f7f7f7; }

.next-departure {
    background: #dfffe0;
    font-weight: bold;
}

/* ============================================================
   STRONA PRZYSTANKU — LAYOUT
============================================================ */


.stop-timetable {
    flex: 1;
}

.line-icon {
    display: inline-block;
    background: #0078ff;
    color: white;
    font-weight: bold;
    font-size: 26px;
    padding: 6px 14px;
    border-radius: 8px;
    margin-right: 10px;
}

/* ============================================================
   BUTTONY
============================================================ */

button,
.btn-primary,
input[type=submit] {
    background: #f3f3f3;
    border: 1px solid #bbb;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.2s;
}

button:hover,
.btn-primary:hover,
input[type=submit]:hover {
    background: #e6e6e6;
    border-color: #999;
}

button:active,
.btn-primary:active,
input[type=submit]:active {
    background: #ddd;
}

.btn-primary {
    background: #0077ff;
    color: white;
    border: none;
}
.btn-primary:hover {
    background: #005fcc;
}

/* ============================================================
   STRONA LINIA.PHP — NAGŁÓWEK
============================================================ */

.line-header {
    text-align: center;
    margin-bottom: 20px;
}

.line-header h1 {
    font-size: 40px;
    margin: 0;
}

.line-desc {
    font-size: 17px;
    color: #666;
}

/* ============================================================
   PRZYSTANKI.PHP — WERSJA PREMIUM
   Unikatowy, elegancki, nowoczesny wygląd
============================================================ */

/* GŁÓWNY KONTENER STRONY */
.przystanki-page2 {
    max-width: 1280px;
    margin: 0 auto;
}

/* NAGŁÓWKI */
.przystanki-page h2 {
    font-size: 36px;
    margin-bottom: 14px;
    font-weight: 800;
    color: #1d4ed8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.przystanki-page h3 {
    font-size: 22px;
    margin: 24px 0 12px;
    font-weight: 700;
    color: #333;
}

/* KAFELKI MIAST — KARTY */
.przystanki-page .city-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.przystanki-page .city-btn {
    background: linear-gradient(180deg, #f8faff, #eef2f8);
    border: 1px solid #d0d7e2;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.przystanki-page .city-btn:hover {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* WYSZUKIWARKA — PREMIUM */
.przystanki-page #stopSearch {
    width: 100%;
    max-width: 460px;
    padding: 12px 16px;
    border: 1px solid #cfd4da;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 14px;
    transition: 0.2s;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.przystanki-page #stopSearch:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18);
    outline: none;
}

/* WYNIKI WYSZUKIWANIA — KARTA */
.przystanki-page #allStopsList {
    background: #ffffff;
    border: 1px solid #d0d7e2;
    border-radius: 10px;
    padding: 12px;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.przystanki-page #allStopsList .stop-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.przystanki-page #allStopsList .stop-item:last-child {
    border-bottom: none;
}

.przystanki-page #allStopsList a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.przystanki-page #allStopsList a:hover {
    text-decoration: underline;
}

/* TABELA PRZYSTANKÓW — PREMIUM */
.przystanki-page .city-stops-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.przystanki-page .city-stops-table th {
    background: linear-gradient(180deg, #e9ecf1, #dfe3e8);
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #cfd4da;
    font-weight: 700;
    color: #333;
}

.przystanki-page .city-stops-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.przystanki-page .city-stops-table tr:hover td {
    background: #f5f7fb;
}

.przystanki-page .city-stops-table a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.przystanki-page .city-stops-table a:hover {
    text-decoration: underline;
}

/* PRZYCISK — PREMIUM */
.przystanki-page .btn-primary {
    background: #1d4ed8;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.przystanki-page .btn-primary:hover {
    background: #163fa3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* KONTENER FORMULARZA WYBORU LINII */
.przystanki-form-container {
    max-width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* TABELA LINII */
.lines-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.lines-table th {
    background: #f0f0f0;
    padding: 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

.lines-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
}

/* PRZYCISK */
.btn-primary {
    background: #0078ff;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
}

.btn-primary:hover {
    background: #005fcc;
}
/* ============================================================
   PRZYSTANKI.PHP — TABELA ODJAZDÓW (departures-table)
   Wersja premium + siatka + centrowanie
============================================================ */

/* GŁÓWNA TABELA */
.przystanki-page .departures-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    font-size: 16px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border: 1px solid #d0d7e2; /* zewnętrzna ramka */
}

/* NAGŁÓWKI */
.przystanki-page .departures-table th {
    background: linear-gradient(180deg, #e9ecf1, #dfe3e8);
    padding: 14px 12px;
    text-align: center; /* WYŚRODKOWANIE */
    border-bottom: 2px solid #cfd4da;
    border-right: 1px solid #d0d7e2; /* pionowe linie */
    font-weight: 700;
    color: #333;
    font-size: 15px;
}

.przystanki-page .departures-table th:last-child {
    border-right: none;
}

/* KOMÓRKI */
.przystanki-page .departures-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb; /* cienkie linie poziome */
    border-right: 1px solid #e5e7eb;  /* cienkie linie pionowe */
    vertical-align: middle;
    text-align: center; /* WYŚRODKOWANIE */
}

.przystanki-page .departures-table td:last-child {
    border-right: none;
}

/* HOVER NA WIERSZU */
.przystanki-page .departures-table tr:hover td {
    background: #f5f7fb;
}

/* NAJBLIŻSZY ODJAZD — PEŁNE OBRAMOWANIE + ZIELONY PULS */
.przystanki-page .departures-table .next-departure td {
    background-color: hsl(120, 40%, 92%);
    font-weight: 700;
    border: 2px solid hsl(120, 55%, 45%) !important; /* pełna ramka */
    animation: nextBlinkGreen 1.6s ease-in-out infinite;
}

/* ANIMACJA PULSU — TŁO + RAMKA */
@keyframes nextBlinkGreen {
    0% {
        background-color: hsl(120, 40%, 92%);
        border-color: hsl(120, 55%, 45%);
    }
    50% {
        background-color: hsl(120, 55%, 82%);
        border-color: hsl(120, 65%, 35%);
    }
    100% {
        background-color: hsl(120, 40%, 92%);
        border-color: hsl(120, 55%, 45%);
    }
}

/* LINK DO KIERUNKU */
.przystanki-page .departures-table a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.przystanki-page .departures-table a:hover {
    text-decoration: underline;
}

/* IKONKA TABORU */
.przystanki-page .departures-table .tabor-icon {
    height: 22px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}

/* WYŚRODKOWANIE TYLKO WYBRANYCH KOLUMN */
.przystanki-page .departures-table td,
.przystanki-page .departures-table th {
    text-align: center;
}

/* KOLUMNA TABOR — LEWA STRONA */
.przystanki-page .departures-table td:nth-child(3),
.przystanki-page .departures-table th:nth-child(3) {
    text-align: left;
}

/* ============================================================
   PRZYSTANKI.PHP — LINES-TABLE (lista linii)
   Wersja premium, spójna z departures-table i city-stops-table
============================================================ */

.przystanki-page .lines-table-wrapper {
    max-width: 1280px;
    margin: 20px auto 40px auto;
    overflow-x: auto;
}

.przystanki-page .lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border: 1px solid #d0d7e2;
}

/* NAGŁÓWKI */
.przystanki-page .lines-table th {
    background: linear-gradient(180deg, #e9ecf1, #dfe3e8);
    padding: 14px 12px;
    text-align: center;
    border-bottom: 2px solid #cfd4da;
    border-right: 1px solid #d0d7e2;
    font-weight: 700;
    color: #333;
    font-size: 15px;
}

.przystanki-page .lines-table th:last-child {
    border-right: none;
}

/* KOMÓRKI */
.przystanki-page .lines-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    vertical-align: middle;
    text-align: center;
}

.przystanki-page .lines-table td:last-child {
    border-right: none;
}

/* HOVER */
.przystanki-page .lines-table tr:hover td {
    background: #f5f7fb;
}

/* IKONKA LINII */
.przystanki-page .lines-table .line-icon-cell {
    text-align: center;
}

.przystanki-page .lines-table .line-icon {
    display: inline-block;
    background: #0078ff;
    color: #fff;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 18px;
}

/* LINKI */
.przystanki-page .lines-table a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.przystanki-page .lines-table a:hover {
    text-decoration: underline;
}


/* ============================================================
   HEADER — LEKKI, RÓWNY, NOWOCZESNY
============================================================ */


.header-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.header-line-btn {
    background: #f2f2f2;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    font-size: 14px;
}

.header-line-btn:hover {
    background: #e0e0e0;
}

/* ============================================================
   NOWY NAGŁÓWEK
============================================================ */
.main-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    gap: 20px;
}

.header-left {
    flex-shrink: 0; /* Zapobiega kurczeniu się logo */
}

.header-left .logo {
    height: 70px;
    width: auto;
    display: block;
}

.header-right {
    display: flex;
    flex-direction: column; /* Ustawiamy elementy jeden pod drugim */
    align-items: flex-end; /* Wyrównujemy je do prawej krawędzi */
    gap: 8px; /* Odstęp między updaterem a kalendarzem */
    flex-grow: 1;
    min-width: 0;
}

.updater-bar, .upd-wrap, .calendar-banner {
    text-align: right;
    font-size: 14px; /* Ujednolicamy rozmiar czcionki */
    color: #555;
}

.calendar-bar {
    width: 100%; /* Rozciągamy kontener kalendarza, aby jego zawartość mogła się wyrównać */
    overflow-x: auto;
}
.calendar-bar .days-container {
    justify-content: flex-end;
    flex-wrap: nowrap; /* Zapobiegamy zawijaniu się kafelków */
}

/* ============================================================
   KAFELKI LINII — POPRAWIONE
============================================================ */

.line-grid {
    max-width: 1800px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px 18px 4px 18px;
}
.line-tile {
    width: 52px;
    height: 52px;

    background: #ffffff; /* jak trip.php */
    color: #222;
    font-size: 20px;
    font-weight: 800; /* jak trip.php */

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px; /* jak trip.php */
    border: 2px solid #ccc; /* jak trip.php */
    box-shadow: inset 0 0 4px rgba(0,0,0,0.1); /* jak trip.php */

    text-decoration: none;
    transition: 0.15s;
}

/* HOVER — premium: niebieskie tło + biały tekst */
.line-tile:hover {
    background: #0078ff;
    color: #ffffff;
    border-color: #005fcc;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* TRAMWAJE — zachowujemy kolor, ale w nowym stylu */
.line-tile--tram {
    background: #ffffff;
    color: hsl(0, 0%, 0%);
    border-color: hsl(0, 0%, 0%);
}

/* ZKA — też w nowym stylu */
.line-tile--zka {
    background: #6c757d;
    color: #ffffff;
    border-color: #5a6268;
}


/* ============================================================
   TABELA PRZYSTANKÓW — ZMIENNE
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {

    --col-width: 638px; /* (1280px - 4px) / 2 */
    --gap: 4px;
}

/* ============================================================
   TP-WRAPPER — KONTENER TABELI
============================================================ */

.tp-wrapper {
    width: 1280px;
    max-width: 100%;
    margin: 10px auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch !important; /* <-- KLUCZOWE */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   TP-TOP-HEADER — NAGŁÓWEK TABELI
============================================================ */

.tp-top-header {
    width: 1280px !important;
    min-width: 1280px !important;
    max-width: 1280px !important;
    margin: 0 auto;

    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px 6px 0 0;
    padding: 12px 16px;

    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
}

.tp-line-box {
    min-width: 72px;
    height: 72px;
    padding: 6px 10px;
    border-radius: 12px;
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f5f7fb;
    color: #222;
    font-size: 34px;
}

/* ============================================================
   TP-TOP — TEKSTY W NAGŁÓWKU
============================================================ */

.tp-top-title {
    font-size: 19px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.tp-top-desc {
    font-size: 15px;
    color: #444;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
}

.tp-top-subtitle {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ============================================================
   TP-COLUMNS — DWIE KOLUMNY
============================================================ */

.tp-columns {
    display: flex;
    gap: 4px;
    width: 1280px;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    justify-content: center;
    margin: 0 auto;
}

/* ============================================================
   TP-COL — POJEDYNCZA KOLUMNA
============================================================ */

.tp-col {
    position: center;
    flex: 0 0 var(--col-width);
    width: var(--col-width);
    background: #fff;
    border: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

/* ============================================================
   TP-HEADER — NAGŁÓWEK KOLUMNY
============================================================ */

.tp-header {
    background: #f0f0f0;
    padding: 10px 16px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tp-title {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-toggle {
    background: #e8e8e8;
    border: 1px solid #bbb;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* ============================================================
   TP-ROW — WIERSZE TABELI
============================================================ */

.tp-row {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    cursor: pointer;
    transition: 0.15s;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-row:hover {
    background: #eef5ff;
}

.tp-variant {
    padding-left: 20px;
    border-left: 3px solid #ccc;
    font-style: italic;
    color: #555;
}

.hidden {
    display: none;
}

/* ============================================================
   TP-FOOTER — STOPKA TABELI
============================================================ */
.tp-footer {
    min-width: 1280px;
    width: 1280px;
    background: #fafafa;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 14px 18px;
    margin-top: 0;
    font-size: 14px;
    color: #444;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;

    margin-left: auto !important;   /* <-- DODAJ TO */
    margin-right: auto !important;  /* <-- I TO */
}
/* Ogólne style dla sekcji w stopce */
.tp-footer-section {

    padding: 0 10px;
}
/* Indywidualne szerokości dla każdej sekcji */
.tp-footer-section-1 { flex: 1;min-width: 240px; } /* Legenda - najszersza */
.tp-footer-section-2 { flex: 1;max-width: 200px; } /* Miasta - węższa */
.tp-footer-section-3 { flex: 2;min-width: 300px; } /* Informacje - najszersza */


.tp-footer-title {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 15px;
}

.tp-footer-item {
    margin: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}



/* ============================================================
   PRZYSTANEK.PHP — LEWA KOLUMNA
============================================================ */

.stop-layout {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 0 !important;
    width: 100%;
}


.stop-list {
    flex: 0 0 400px;
 
    background: #fafafa;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px 0 0 6px;
    margin: 0;
}


.stop-list h3 {
    text-align: center;
    margin-bottom: 10px;
}

.stop-item {
    padding: 3px 0;
    font-size: 15px;
}

.stop-main a {
    font-weight: 600;
    color: #222;
}

.stop-variant {
    padding-left: 22px;
    border-left: 2px solid #ccc;
    margin-left: 4px;
}

.stop-variant a {
    color: #444;
}

/* ============================================================
   PRZYSTANEK.PHP — PRAWA KOLUMNA
============================================================ */



.stop-timetable {
    flex: 1 1 0 !important;
    min-width: 650px !important;
    width: 100% !important;
}



.stop-timetable table {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
}
.stop-timetable h3 {
margin-left: 20px;
}

.stop-timetable th,
.stop-timetable td {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    border-right: 1px solid rgba(0,0,0,0.08);
    padding: 8px 10px;
    vertical-align: middle;
}

.stop-timetable th:last-child,
.stop-timetable td:last-child {
    border-right: none;
}

.stop-timetable tr:last-child td {
    border-bottom: none;
}

.stop-timetable th:nth-child(1),
.stop-timetable td:nth-child(1),
.stop-timetable th:nth-child(2),
.stop-timetable td:nth-child(2),
.stop-timetable th:nth-child(4),
.stop-timetable td:nth-child(4) {
    text-align: center;
}

.stop-timetable td:nth-child(2) img {
    float: left;
    margin-right: 6px;
}

/* ============================================================
   PRZYSTANEK.PHP — NAGŁÓWEK LEWEJ TABELI
============================================================ */

.stop-header,
.stop-list h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    margin-bottom: 14px;
    padding: 6px 0;
    color: #222;
    border-bottom: 1px solid #ddd;
}

/* ============================================================
   PRZYSTANEK.PHP — GŁÓWNY NAGŁÓWEK (ph-header)
============================================================ */

.ph-header {
    width: 100% !important;
    margin: 0 0 0 0 !important;

    background: #e9ecf1;
    color: #222;
    padding: 18px 20px;
    border-radius: 8px;
    border: 1px solid #cfd4da;

    display: flex;
    align-items: center;
    gap: 20px;

    box-sizing: border-box;
}


.ph-line-box {
    background: #ffffff;
    color: #1d4ed8;
    font-size: 32px;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 8px;
    min-width: 90px;
    text-align: center;
    border: 2px solid #1d4ed8;
    flex-shrink: 0;
}

.ph-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-long {
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.ph-desc {
    font-size: 14px;
    color: #555;
}

.ph-dir,
.ph-stop {
    font-size: 16px;
}

.ph-change {
    background: #1d4ed8;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.ph-change:hover {
    background: #163fa3;
}

/* ============================================================
   POJAZDY.PHP — WERSJA PREMIUM
   Tabela LIVE tramwajów w stylu przystanki.php
============================================================ */


/* ============================================================
   TRIP.PHP — WERSJA PREMIUM
============================================================ */

.trip-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* NAGŁÓWEK KURSU — JAK W LINIA.PHP */

.trip-header {
    display: flex;
    flex-direction: column; /* kurs pod spodem */
    background: #f5f5f5;
    padding: 32px 32px; /* POWIĘKSZONY BOX */
    border-radius: 14px;
    margin-bottom: 28px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    gap: 26px; /* większy odstęp między górą a dołem */
}

/* GÓRNA CZĘŚĆ: kwadrat + tekst obok */
.trip-header-left {
    display: flex;
    align-items: center; /* kwadrat i tekst w jednej linii */
    gap: 26px; /* więcej miejsca */
    width: 100%;
}

/* KWADRAT — powiększony, stabilny */
.route-short {
    font-size: 42px;
    font-weight: 800;
    color: #222;
    min-width: 90px;
    height: 90px; /* STAŁA WYSOKOŚĆ — NIE WYSTAJE */
    display: flex;
    justify-content: center;
    align-items: center; /* perfekcyjne centrowanie */
    background: #fff;
    padding: 0;
    border-radius: 10px;
    border: 2px solid #ccc;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}

/* TEKST OBOK KWADRATU */
.route-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center; /* tekst wyśrodkowany względem kwadratu */
}

.route-long {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.route-desc {
    font-size: 16px;
    color: #777;
    margin-top: 4px;
}

/* DOLNA CZĘŚĆ: kurs wyśrodkowany */
.trip-header-right {
    display: flex;
    flex-direction: column;
    align-items: left; /* WYŚRODKOWANIE */
    width: 100%;
}
.trip-course-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 10px 0 14px 0;
}

.trip-course-line b {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    display: inline-block;
}

.trip-id-value {
    font-size: 20px;
    font-weight: 700;
    color: #111;
}


.trip-id-label {
    font-size: 16px;
    font-weight: 700; /* TERAZ NA PEWNO POGRUBIONE */
    color: #333;
}
.trip-info-box {
    background: #ffffff;
    border: 1px solid #d0d7e2;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    font-size: 16px;
    line-height: 1.5;
    font-family: inherit; /* <<< TO NAPRAWIA WSZYSTKO */
}


/* Nagłówki wewnątrz strony */

.trip-page h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 24px 0 12px;
}

/* Karta informacji */

.trip-info-box {
    background: #ffffff;
    border: 1px solid #d0d7e2;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    font-size: 16px;
    line-height: 1.5;
}

.trip-info-box img {
    height: 42px;
    vertical-align: middle;
    margin-right: 8px;
}

.trip-info-box .low-floor {
    color: #008000;
    font-weight: bold;
}

/* Tabela przebiegu kursu */

.trip-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border: 1px solid #d0d7e2;
    font-size: 16px;
    text-align: center;
}

.trip-table th {
    background: linear-gradient(180deg, #e9ecf1, #dfe3e8);
    padding: 14px 12px;
    border-bottom: 2px solid #cfd4da;
    border-right: 1px solid #d0d7e2;
    font-weight: 700;
    color: #333;
}

.trip-table th:last-child {
    border-right: none;
}

.trip-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.trip-table td:last-child {
    border-right: none;
}

.trip-table tr:hover td {
    background: #f5f7fb;
}

.trip-table .time-cell {
    font-weight: 700;
    color: #111;
}

/* ============================================================
   GLOBALNY KWADRAT LINII — WSPÓLNY DLA CAŁEGO SYSTEMU
   (route-short, line-icon, line-tile, tp-line-box, ph-line-box)
============================================================ */

.route-short,
.tp-line-box,
.ph-line-box {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #222 !important;

    min-width: 100px !important;
    height: 90px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    background: #fff !important;
    padding: 0 !important;

    border-radius: 10px !important;
    border: 2px solid #ccc !important;

    box-shadow: inset 0 0 4px rgba(0,0,0,0.1) !important;

    text-decoration: none !important;
}

/* ============================================================
   LINES VALIDITY PAGE — PREMIUM TABLE
============================================================ */

.lines-validity-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px;
}

.lines-validity-page h1 {
    font-size: 34px;
    font-weight: 800;
    color: #1d4ed8;
    margin-bottom: 20px;
    text-align: center;
}

.lines-validity-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border: 1px solid #d0d7e2;
    font-size: 16px;
}

.lines-validity-table th {
    background: linear-gradient(180deg, #e9ecf1, #dfe3e8);
    padding: 14px 12px;
    border-bottom: 2px solid #cfd4da;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.lines-validity-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.lines-validity-table tr:hover td {
    background: #f5f7fb;
}
.days-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.day-tile {
    padding: 8px 12px;
    background: #eee;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    border: 2px solid transparent;
    min-width: 70px;
    text-align: center;
}

.day-tile:hover {
    background: #ddd;
}

.day-active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

/* ============================================================
   KOMUNIKATY — DOPASOWANE DO TP-TOP-HEADER
============================================================ */

/* Komunikaty — dopasowanie szerokości 1:1 do tp-top-header */
/* ===== Dopasowanie komunikatów do tp-top-header ===== */

/* 1) Szerokość identyczna jak header */
.linia-komunikaty {
    width: 100%; /* Zmieniono na 100% */
    max-width: 1280px; /* Ustawia maksymalną szerokość na 1280px */
    min-width: 320px; /* Minimalna szerokość dla małych ekranów */
    background: #F0F0F0 !important;
    margin: 0 auto !important;
    padding: 12px 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 0 0 6px 6px !important;

    box-shadow: none !important;
}

/* 2) Usunięcie WSZYSTKICH ramek wewnętrznych */
.linia-komunikaty * {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 3) Pozostawiamy tylko separator między wierszami */
.linia-komunikaty-row,
.kom-row {
    border-bottom: 1px solid #eee !important;
    padding: 8px 0 !important;
}

/* 4) Ostatni wiersz bez kreski */
.linia-komunikaty-row:last-child,
.kom-row:last-child {
    border-bottom: none !important;
}

/* 5) Opis rozwijany — bez ramek, bez tła */
.linia-komunikaty-item-desc,
.kom-desc-row {
    padding: 8px 0 !important;
    background: transparent !important;
}

.log-chip-inline {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 6px;
    background: #238636;
    border: 1px solid #2ea043;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    transition: 0.15s;
}

.log-chip-inline:hover {
    background: #2ea043;
    border-color: #3fb950;
}

/* ============================================================
   PRZYSTANEK.PHP — LISTA PRZYSTANKÓW (przeniesione z pliku)
============================================================ */

.stop-item {
    border-radius: 6px;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    margin: 1px 0;
}

.stop-item a {
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.stop-item:not(.stop-active):hover {
    background-color: #f0f5ff;
    transform: translateX(4px);
}

.stop-item-name {
    font-size: 14px;
    line-height: 1.4;
}

.stop-active { background-color: #e0f2ff; font-weight: bold; }
.stop-active a { color: #0056b3; }

.stop-item-arrow-img {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

/* ============================================================
   STYLE DLA POJAZD.PHP
============================================================ */

.pojazd-page {
    background-color: #f0f2f5;
}

.pojazd-page .pojazd-page-container {
    padding: 20px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pojazd-page .map-container {
    position: relative;
    width: 100%;
    height: 75vh;
    margin-bottom: 20px;
}

.pojazd-page #map {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.15);
    z-index: 1;
}

.pojazd-page .panel-toggle-btn {
    position: absolute;
    top: 15px;
    width: 64px;
    height: 64px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
    z-index: 1002;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pojazd-page .panel-toggle-btn:hover { background-color: #f4f4f4; }
.pojazd-page .panel-toggle-btn.left { left: 15px; }
.pojazd-page .panel-toggle-btn.right { right: 15px; }

/* Przyciski nawigacyjne na mapie (Karta pojazdu, Lista przystanków) */
.pojazd-page .map-nav-buttons {
    position: absolute;
    top: 75px;
    left: 15px;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Odstęp między przyciskami */
}

.pojazd-page .map-nav-btn {
    /* Dziedziczy część stylów z .panel-toggle-btn, ale z modyfikacjami */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 24px; /* Mniejsza czcionka */
    font-weight: 1200;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s;
    padding: 10px 15px; /* Dopasowane wypełnienie */
    width: auto; /* Szerokość dopasowana do treści */
}
.pojazd-page .map-nav-btn:hover { background-color: #f4f4f4; }

/* Nowy styl dla statycznego bloku informacji o pojeździe */
.pojazd-page .vehicle-info-static {
    position: absolute;
    top: 15px;
    left: 75px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 300px;
}
.pojazd-page .vehicle-info-static h3 { margin-top: 0; margin-bottom: 10px; font-size: 18px; color: #333; }
.pojazd-page .vehicle-info-static p { margin: 5px 0; font-size: 14px; line-height: 1.4; }
.pojazd-page .vehicle-info-static b { color: #003f7f; }

/* Panel z listą przystanków, wysuwany z lewej */
.pojazd-page .stops-list-panel {
    position: absolute;
    top: 0;
    height: 100%;
    width: 450px;
    max-width: 90%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    z-index: 1001;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    left: 0;
    transform: translateX(-100%);
    border-radius: 0 12px 12px 0;
}
.pojazd-page .stops-list-panel.open { transform: translateX(0); visibility: visible; opacity: 1; }
.pojazd-page .panel-content { padding: 20px; overflow-y: auto; flex-grow: 1; }
.pojazd-page .panel-header { padding: 15px 20px; border-bottom: 1px solid #ddd; }

.pojazd-page .stops-list-panel table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #e0e4e8; table-layout: fixed; }
.pojazd-page .stops-list-panel th { background: #f0f3f5; color: #333; padding: 10px; text-align: left; font-weight: 600; border-bottom: 2px solid #ddd; }
.pojazd-page .stops-list-panel td { padding: 8px 10px; border-bottom: 1px solid #ddd; }
.pojazd-page .stops-list-panel th, .pojazd-page .stops-list-panel td { border-right: 1px solid #e5e7eb; }
.pojazd-page .stops-list-panel th:last-child, .pojazd-page .stops-list-panel td:last-child { border-right: none; }
.pojazd-page .stop-time { font-weight: bold; color: #003f7f; text-align: center; }
.pojazd-page .tabor-icon { height:22px;vertical-align:middle;margin-right:6px; }
.pojazd-page .low-floor { font-size:20px;margin-left:6px; }
.pojazd-page .tram-wrapper { display: flex; align-items: center; gap: 4px; }
.pojazd-page .tram-box, .pojazd-page .tram-arrow-box { width: 40px; height: 40px; background: #ffffff; border: 2px solid #005bbb; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.pojazd-page .tram-box i { font-size: 26px; color: #005bbb; }
.pojazd-page .tram-arrow-box svg { transition: transform 0.2s linear; transform-origin: 50% 50%; will-change: transform; }
.pojazd-page .train-info-tooltip { background: transparent; border: none; box-shadow: none; padding: 0; }
.pojazd-page .train-info-box { background: #ffffff; border: 2px solid #005bbb; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: #003f7f; box-shadow: 0 2px 6px rgba(0,0,0,0.25); text-align: center; }
.pojazd-page .train-info-icon { height: 22px; margin: 4px 0; }
.pojazd-page .next-stop-row { background: #fff3cd !important; font-weight: bold; }
.pojazd-page .border-stop-row td { text-align: center; font-style: italic; color: #555; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; }
.pojazd-page .stop-distance { text-align: right; }