/* =========================================================
   ZTM Kielce — Widget: Rozkłady jazdy (SPA)
   Spójny z header.css: te same zmienne --ztm-*, elevation,
   spacing grid 8px, font-scale, focus-visible itd.
   ========================================================= */

.ztm-rj-full {
	--ztm-rj-radius: 12px;
	--ztm-rj-radius-sm: 8px;
	--ztm-rj-accent-gold: #e3ab48;
	font-family: var(--ztm-font);
	color: #1c2230;
	background: var(--ztm-white);
	border-radius: var(--ztm-rj-radius);
	box-shadow: var(--ztm-elevation-2);
	max-width: var(--ztm-content-width);
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.ztm-rj-full * {
	box-sizing: border-box;
}

/* =========================================================
   TOPBAR — przełącznik zakładek + szukajka
   ========================================================= */

.ztm-rj-topbar {
	display: flex;
	align-items: center;
	gap: var(--ztm-space-2);
	padding: var(--ztm-space-2) var(--ztm-space-3);
	border-bottom: 1px solid var(--ztm-border-grey);
	background: var(--ztm-white);
	flex-wrap: wrap;
}

.ztm-rj-tabs-switch {
	display: flex;
	flex: 0 0 auto;
	background: #eef1f6;
	border-radius: var(--ztm-rj-radius-sm);
	padding: 0;
	overflow: hidden;
}

.ztm-rj-tab-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: none;
	background: transparent;
	color: var(--ztm-tabs-text);
	font-family: var(--ztm-font);
	font-size: calc(15.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	padding: 14px 64px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.ztm-rj-tab-btn svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	flex-shrink: 0;
}

.ztm-rj-tab-btn:hover:not(.is-active) {
	background: #e2e7f0;
	color: var(--ztm-navy);
}

.ztm-rj-tab-btn.is-active {
	background: var(--ztm-navy);
	color: var(--ztm-white);
}

/* Ulubione + Szukaj trzymane razem i dociśnięte do prawej krawędzi topbara */
.ztm-rj-search-group {
	display: flex;
	align-items: center;
	gap: var(--ztm-space-2);
	margin-left: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ztm-rj-fav-filter {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--ztm-text-muted);
	font-family: var(--ztm-font);
	font-size: calc(13px * var(--ztm-font-scale, 1));
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 0 12px;
	cursor: pointer;
	border-radius: var(--ztm-rj-radius-sm);
	transition: color 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.ztm-rj-fav-filter svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	flex-shrink: 0;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.ztm-rj-fav-filter:hover {
	background: #f0f4fb;
	color: var(--ztm-navy);
}

.ztm-rj-fav-filter.is-active {
	color: #d9930f;
}

.ztm-rj-fav-filter.is-active svg {
	fill: #d9930f;
}

.ztm-rj-search-wrap {
	display: flex;
	align-items: stretch;
	height: 44px;
	flex: 0 1 220px;
	max-width: 240px;
}

.ztm-rj-search {
	width: 100%;
	border: 1px solid var(--ztm-border-grey);
	border-right: none;
	border-radius: 7px 0 0 7px;
	padding: 0 16px;
	font-size: calc(15px * var(--ztm-font-scale, 1));
	font-family: var(--ztm-font);
	color: #1c2230;
	outline: none;
	min-width: 0;
}

.ztm-rj-search::placeholder {
	color: var(--ztm-text-muted);
}

.ztm-rj-search:focus {
	border-color: var(--ztm-navy);
}

.ztm-rj-search-btn {
	width: 48px;
	flex-shrink: 0;
	background: var(--ztm-navy);
	border: none;
	border-radius: 0 7px 7px 0;
	color: var(--ztm-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ztm-rj-search-btn:hover {
	background: var(--ztm-navy-dark);
}

.ztm-rj-search-btn svg {
	width: 18px;
	height: 18px;
}

/* =========================================================
   WIDOKI — przełączanie
   ========================================================= */

.ztm-rj-view {
	display: none;
	padding: var(--ztm-space-3);
}

.ztm-rj-view.is-active {
	display: block;
	animation: ztmRjFadeIn 0.28s ease both;
}

@keyframes ztmRjFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ztm-rj-view.is-active {
		animation: none;
	}
}

.ztm-rj-view-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: calc(13px * var(--ztm-font-scale, 1));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--ztm-text-muted);
	margin: 0 0 var(--ztm-space-2);
}

.ztm-rj-view-header svg {
	width: 20px;
	height: 20px;
	stroke: var(--ztm-navy);
}

.ztm-rj-empty {
	padding: var(--ztm-space-4) var(--ztm-space-2);
	text-align: center;
	color: var(--ztm-text-muted);
	font-size: calc(15px * var(--ztm-font-scale, 1));
}

/* Breadcrumb / powrót — wspólne dla widoków trasy i odjazdów */
.ztm-rj-breadcrumb {
	margin: 0 0 var(--ztm-space-2);
}

.ztm-rj-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: none;
	background-color: transparent;
	color: var(--ztm-tabs-text);
	font-family: var(--ztm-font);
	font-size: calc(14.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	padding: 10px 16px 10px 12px;
	cursor: pointer;
	transition: color 0.15s ease;
}

.ztm-rj-back svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
}

.ztm-rj-back:hover {
	color: var(--ztm-navy);
	background-color: transparent;
}

/* =========================================================
   WIDOK 1 — LISTA LINII
   ========================================================= */

.ztm-rj-linia {
	display: flex;
	align-items: stretch;
	gap: var(--ztm-space-2);
	border-bottom: 1px solid var(--ztm-border-grey);
	padding: var(--ztm-space-2);
	margin-bottom: var(--ztm-space-1);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
	animation: ztmRjFadeIn 0.22s ease both;
}

.ztm-rj-linia-nr {
	flex-shrink: 0;
	width: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ztm-rj-nr-val {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	background: var(--ztm-white);
	border: 1px solid var(--ztm-border-grey);
	color: var(--ztm-navy);
	font-weight: 800;
	font-size: calc(17px * var(--ztm-font-scale, 1));
	border-radius: 9px;
	padding: 8px 6px 7px;
	gap: 7px;
}

.ztm-rj-nr-val::after {
	content: "";
	display: block;
	width: 20px;
	height: 3px;
	border-radius: 2px;
	background: var(--ztm-rj-accent-gold);
}

.ztm-rj-linia-kierunki {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ztm-space-1);
	min-width: 0;
}

.ztm-rj-kierunek {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 7px;
	background: #f7f9fc;
	min-width: 0;
}

.ztm-rj-kierunek:hover,
.ztm-rj-kierunek:focus-visible {
	background: #eaf0fb;
}

.ztm-rj-arrow {
	width: 18px;
	height: 18px;
	stroke: var(--ztm-navy);
	flex-shrink: 0;
}

.ztm-rj-kierunek-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ztm-rj-kierunek-nazwa {
	font-weight: 700;
	font-size: calc(14.5px * var(--ztm-font-scale, 1));
	color: #1c2230;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-kierunek-od,
.ztm-rj-kierunek-do {
	font-size: calc(12.5px * var(--ztm-font-scale, 1));
	color: var(--ztm-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-kierunek-od strong,
.ztm-rj-kierunek-do strong {
	color: var(--ztm-tabs-text);
	font-weight: 700;
}

/* =========================================================
   WIDOK 2 — TRASA LINII
   ========================================================= */

.ztm-rj-trasa-header {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: #eef1f7;
	border-radius: var(--ztm-rj-radius-sm);
	padding: var(--ztm-space-2);
	margin-bottom: var(--ztm-space-2);
}

.ztm-rj-trasa-nr {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--ztm-white);
	border: 1px solid var(--ztm-border-grey);
	color: var(--ztm-navy);
	font-weight: 800;
	font-size: calc(19px * var(--ztm-font-scale, 1));
	min-width: 72px;
	height: 72px;
	padding: 8px 6px 7px;
	border-radius: 9px;
}

.ztm-rj-trasa-nr::after {
	content: "";
	display: block;
	width: 20px;
	height: 3px;
	border-radius: 2px;
	background: var(--ztm-rj-accent-gold);
}

.ztm-rj-trasa-kierunki {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ztm-rj-trasa-k {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ztm-rj-trasa-k:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.55);
}

.ztm-rj-trasa-k.is-active {
	background: var(--ztm-white);
	cursor: default;
}

.ztm-rj-trasa-k svg {
	width: 18px;
	height: 18px;
	stroke: var(--ztm-text-muted);
	flex-shrink: 0;
}

.ztm-rj-trasa-k.is-active svg {
	stroke: var(--ztm-navy);
}

.ztm-rj-trasa-k div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ztm-rj-trasa-k strong {
	color: var(--ztm-text-muted);
	font-size: calc(14.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-trasa-k span {
	color: var(--ztm-text-muted);
	font-size: calc(12.5px * var(--ztm-font-scale, 1));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-trasa-k.is-active strong {
	color: #1c2230;
}

.ztm-rj-trasa-k.is-active span {
	color: #4a5263;
}

/* Lista przystanków trasy — pionowa linia + kropki. position:relative,
   bo wewnątrz dokładany jest SVG z liniami widelca (patrz
   drawForkConnectors), pozycjonowany względem tego kontenera. */
.ztm-rj-trasa-lista {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Legenda — wyjaśnienie znaczenia kropek na liście */
.ztm-rj-trasa-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ztm-space-3);
	padding-bottom: var(--ztm-space-2);
	margin-bottom: var(--ztm-space-2);
	border-bottom: 1px solid var(--ztm-border-grey);
}

.ztm-rj-trasa-legend-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: calc(12.5px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: var(--ztm-text-muted);
}

.ztm-rj-trasa-legend-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ztm-white);
	border: 2.5px solid var(--ztm-navy);
	flex-shrink: 0;
}

.ztm-rj-trasa-legend-dot--end {
	background: var(--ztm-navy);
}

.ztm-rj-trasa-stop {
	display: flex;
	align-items: stretch;
	gap: var(--ztm-space-2);
}

.ztm-rj-trasa-stop-time {
	flex-shrink: 0;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: calc(11.5px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: var(--ztm-text-muted);
	text-align: right;
}

.ztm-rj-trasa-stop-line {
	width: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.ztm-rj-trasa-stop-line::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--ztm-border-grey);
	transform: translateX(-50%);
}

.ztm-rj-trasa-stop:first-child .ztm-rj-trasa-stop-line::before {
	top: 50%;
}

.ztm-rj-trasa-stop:last-child .ztm-rj-trasa-stop-line::before {
	bottom: 50%;
}

.ztm-rj-trasa-dot {
	position: relative;
	z-index: 1;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ztm-white);
	border: 2.5px solid var(--ztm-navy);
	margin: 14px 0;
	flex-shrink: 0;
}

.ztm-rj-trasa-dot--first,
.ztm-rj-trasa-dot--last {
	width: 14px;
	height: 14px;
	background: var(--ztm-navy);
}

.ztm-rj-trasa-stop-name {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 12px 10px;
	font-size: calc(15px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: #1c2230;
	border-radius: 6px;
}

.ztm-rj-trasa-stop-name:hover,
.ztm-rj-trasa-stop-name:focus-visible {
	color: var(--ztm-navy);
	background: #f0f4fb;
}

/* Lista + mapa jako JEDNA spójna karta, ułożona pionowo: wykres koralikowy
   (może zawierać rozgałęzienia/pętle) NAD mapą, zawsze pełna szerokość.
   Linia może kursować różnymi trasami/wariantami w zależności od kierunku
   lub pory dnia — lista musi więc mieć swobodę rozrastania się w pionie
   (bez wewnętrznego paska przewijania: scrolluje się cała strona/widget,
   nie osobny, zamknięty boks). */
.ztm-rj-trasa-split {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: 1px solid var(--ztm-border-grey);
	overflow: hidden;
	box-shadow: var(--ztm-elevation-1);
}

.ztm-rj-trasa-lista {
	width: 100%;
	min-width: 0;
	max-width: none;
	padding: var(--ztm-space-2) var(--ztm-space-3);
	border-right: none;
	border-bottom: 1px solid var(--ztm-border-grey);
	overflow-y: visible;
	max-height: none;
}

.ztm-rj-trasa-map-wrap {
	width: 100%;
	min-width: 0;
}

/* Mapa trasy (Leaflet) */
.ztm-rj-trasa-map {
	width: 100%;
	height: 420px;
	background: #eef1f6;
}

/* Leaflet domyślnie ustawia bardzo wysoki z-index na kontrolkach —
   ograniczamy go, żeby nie wyskakiwały ponad resztę interfejsu widgetu
   (np. ponad sticky nagłówek strony) podczas scrollowania. */
.ztm-rj-trasa-map .leaflet-pane,
.ztm-rj-trasa-map .leaflet-top,
.ztm-rj-trasa-map .leaflet-bottom {
	z-index: 5;
}

.ztm-rj-trasa-map .leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--ztm-text-muted);
}

/* Kontrolka zoom — zamiast domyślnych kanciastych, szarych kwadratów Leaflet:
   biały zaokrąglony panel z cieniem, granatowe ikony, spójny z resztą UI. */
.ztm-rj-trasa-map .leaflet-control-zoom {
	border: none !important;
	border-radius: var(--ztm-rj-radius-sm) !important;
	box-shadow: var(--ztm-elevation-2) !important;
	overflow: hidden;
}

.ztm-rj-trasa-map .leaflet-control-zoom a {
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
	background: var(--ztm-white) !important;
	color: var(--ztm-navy) !important;
	font-size: 18px !important;
	border: none !important;
	border-bottom: 1px solid var(--ztm-border-grey) !important;
}

.ztm-rj-trasa-map .leaflet-control-zoom a:last-child {
	border-bottom: none !important;
}

.ztm-rj-trasa-map .leaflet-control-zoom a:hover {
	background: #f0f4fb !important;
}

/* Marker pierwszego/ostatniego przystanku — kwadrat z ikoną autobusu,
   spójny kolorystycznie z resztą widgetu (granat). */
.ztm-rj-map-bus-icon span {
	display: block;
	position: relative;
	width: 28px;
	height: 28px;
	background: var(--ztm-navy);
	border: 3px solid var(--ztm-white);
	border-radius: 8px;
	box-shadow: var(--ztm-elevation-2);
}

.ztm-rj-map-bus-icon span::after {
	content: "";
	position: absolute;
	inset: 7px;
	background: var(--ztm-white);
	border-radius: 2px;
}

.ztm-rj-trasa-map .leaflet-tooltip {
	font-family: var(--ztm-font);
	font-size: calc(11.5px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: #1c2230;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--ztm-border-grey);
	border-radius: 5px;
	padding: 2px 7px;
	box-shadow: var(--ztm-elevation-1);
	white-space: nowrap;
}

.ztm-rj-trasa-map .leaflet-tooltip-right::before,
.ztm-rj-trasa-map .leaflet-tooltip-left::before {
	display: none;
}

/* Etykiety pierwszego/ostatniego przystanku — widoczne na stałe,
   wyraźnie wyróżnione (białe, pogrubione, granatowa ramka). */
.ztm-rj-trasa-map .ztm-rj-map-label--end {
	font-size: calc(12.5px * var(--ztm-font-scale, 1));
	font-weight: 800;
	color: #1c2230;
	background: var(--ztm-white);
	border: 1.5px solid var(--ztm-navy);
	border-radius: 6px;
	padding: 4px 9px;
	box-shadow: var(--ztm-elevation-2);
}

/* Etykiety przystanków pośrednich — tylko po najechaniu, subtelniejsze */
.ztm-rj-trasa-map .ztm-rj-map-label--hover {
	font-size: calc(11px * var(--ztm-font-scale, 1));
	font-weight: 600;
}

/* =========================================================
   ROZGAŁĘZIENIA TRASY — linia może kursować różnymi wariantami
   lub mieć przystanki "na żądanie" w bok od głównego przebiegu.
   Dwa mechanizmy, które można dowolnie łączyć w jednej trasie:

   1) „Boczne” — krótkie odnogi doczepione do JEDNEGO przystanku
      głównego przebiegu (np. przystanek ma warianty/alternatywne
      punkty w pobliżu). Główna trasa biegnie dalej bez zmian.

   2) „Widelec” (fork) — trasa dzieli się na kilka równoległych,
      wielo-przystankowych wariantów (inny przebieg ulicami), które
      albo później się łączą z powrotem w jedną trasę, albo kończą
      się osobno (dwa różne warianty końcowe / dwa różne początki).
   ========================================================= */

/* --- 1) Boczne odnogi doczepione do przystanku głównego --- */
.ztm-rj-trasa-boczne-wrap {
	display: flex;
	gap: 0;
	margin-left: 20px;
	padding-left: 22px;
	position: relative;
}

.ztm-rj-trasa-boczne-wrap::before {
	content: "";
	position: absolute;
	left: 0;
	top: -14px;
	bottom: 50%;
	width: 2px;
	background: var(--ztm-border-grey);
}

.ztm-rj-trasa-boczne-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.ztm-rj-trasa-boczne-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-size: calc(13px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: var(--ztm-text-muted);
}

.ztm-rj-trasa-boczne-item::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 50%;
	width: 22px;
	height: 2px;
	background: var(--ztm-border-grey);
}

.ztm-rj-trasa-boczne-item::after {
	content: "";
	position: absolute;
	left: -22px;
	top: 0;
	bottom: 50%;
	width: 2px;
	background: var(--ztm-border-grey);
}

.ztm-rj-trasa-boczne-item:first-child::after {
	top: 50%;
}

.ztm-rj-trasa-boczne-list .ztm-rj-trasa-boczne-item:not(:first-child)::after {
	top: -8px;
}

.ztm-rj-trasa-boczne-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ztm-white);
	border: 2px solid var(--ztm-text-muted);
	flex-shrink: 0;
}

.ztm-rj-trasa-boczne-name {
	color: #4a5263;
}

.ztm-rj-trasa-boczne-tag {
	flex-shrink: 0;
	font-size: calc(10px * var(--ztm-font-scale, 1));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--ztm-text-muted);
	background: #eef1f7;
	border-radius: 4px;
	padding: 2px 6px;
}

/* --- 2) Widelec: linia dzieli się na warianty --- prosty, liniowy styl,
   bez kart/teł/plakietek. Same łączniki (linie łamane między kropkami)
   RYSOWANE SĄ W JS JAKO SVG (patrz drawForkConnectors) na podstawie
   realnych, zmierzonych pozycji kropek — nie próbujemy tego zgadywać
   samym CSS-em, bo szerokość kolumn i długość nazw są zmienne. */
.ztm-rj-trasa-fork {
	position: relative;
}

/* Widelec na starcie trasy — kilka równoważnych kolumn (różne pętle
   początkowe), zbiegających się w jeden przystanek niżej. */
.ztm-rj-trasa-fork-start-cols {
	display: flex;
	align-items: flex-start;
	gap: var(--ztm-space-4, 32px);
	padding-bottom: 6px;
}

.ztm-rj-trasa-fork-start-cols .ztm-rj-trasa-fork-col {
	flex: 1 1 0;
	min-width: 0;
}

/* Warianty poboczne w środku/na końcu trasy — odchodzą w bok od
   głównej kolumny; odstęp zostawia miejsce na linię łącznika rysowaną
   w SVG nad tym obszarem. */
.ztm-rj-trasa-fork-secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--ztm-space-4, 32px);
	padding-top: 2px;
}

.ztm-rj-trasa-fork-col {
	position: relative;
	min-width: 0;
}

.ztm-rj-trasa-fork-col--offset {
	padding-left: 4px;
}

/* Wiersz bez kolumny czasu — używany w kolumnach widelca, żeby kropka
   siedziała blisko lewej krawędzi swojej kolumny (czas i tak nie ma tu
   sensu, bo to boczny/startowy wariant). */
.ztm-rj-trasa-stop--notime {
	gap: var(--ztm-space-2);
}

/* Wariant-kontekst (trasa się z powrotem łączy) — przyciemniony, bo to
   tylko informacja "tędy też czasem jeździ", a nie równorzędna opcja. */
.ztm-rj-trasa-fork-col--dim .ztm-rj-trasa-stop-name {
	color: var(--ztm-text-muted);
	font-weight: 500;
}

.ztm-rj-trasa-fork-col--dim .ztm-rj-trasa-dot {
	border-color: var(--ztm-text-muted);
}

.ztm-rj-trasa-fork-col--dim .ztm-rj-trasa-stop-line::before {
	background: #e3e6ee;
}

/* SVG z liniami widelca — nałożone na całą listę, nie wpływa na układ
   (position: absolute), nie przechwytuje kliknięć. */
.ztm-rj-trasa-fork-svg {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: visible;
}

.ztm-rj-trasa-fork-line {
	fill: none;
	stroke: var(--ztm-border-grey);
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ztm-rj-trasa-fork-line.is-dim {
	stroke: #dfe2ea;
}

/* Legenda dodatkowa dla wariantów/rozgałęzień */
.ztm-rj-trasa-legend-dot--fork {
	border-style: dashed;
}



/* Mapa: warianty tras rysowane innym stylem linii, żeby dało się je odróżnić */
.ztm-rj-trasa-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ztm-space-3);
	padding: 8px var(--ztm-space-2);
	border-top: 1px solid var(--ztm-border-grey);
	background: #f7f8fb;
	font-size: calc(12px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: var(--ztm-text-muted);
}

.ztm-rj-trasa-map-legend-item {
	display: flex;
	align-items: center;
	gap: 7px;
}

.ztm-rj-trasa-map-legend-swatch {
	width: 18px;
	height: 3px;
	border-radius: 2px;
	flex-shrink: 0;
}



.ztm-rj-odjazdy-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ztm-space-2);
	flex-wrap: wrap;
	margin-bottom: var(--ztm-space-2);
}

.ztm-rj-odjazdy-title {
	margin: 0;
	font-size: calc(20px * var(--ztm-font-scale, 1));
	font-weight: 800;
	color: #1c2230;
}

.ztm-rj-odjazdy-actions {
	display: flex;
	gap: var(--ztm-space-2);
}

.ztm-rj-odjazdy-action {
	display: flex;
	align-items: center;
	gap: 7px;
	border: none;
	background: transparent;
	color: var(--ztm-navy);
	font-family: var(--ztm-font);
	font-size: calc(13.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	padding: 4px;
	cursor: pointer;
}

.ztm-rj-odjazdy-action svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
}

.ztm-rj-odjazdy-action:hover {
	text-decoration: underline;
}

/* Karta przystanku */
.ztm-rj-stopcard {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--ztm-border-grey);
	border-radius: var(--ztm-rj-radius-sm);
	padding: var(--ztm-space-2);
	margin-bottom: var(--ztm-space-2);
}

.ztm-rj-stopcard > svg {
	width: 24px;
	height: 24px;
	stroke: var(--ztm-navy);
	flex-shrink: 0;
}

.ztm-rj-stopcard-name {
	flex: 1;
	font-size: calc(17px * var(--ztm-font-scale, 1));
	font-weight: 800;
	color: #1c2230;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ztm-rj-odjazdy-linia-badge {
	flex-shrink: 0;
	background: var(--ztm-navy);
	color: var(--ztm-white);
	font-weight: 800;
	font-size: calc(15px * var(--ztm-font-scale, 1));
	padding: 8px 14px;
	border-radius: 7px;
}

.ztm-rj-stopcard-fav {
	width: 38px;
	height: 38px;
	color: #c3cad6;
}

.ztm-rj-stopcard-fav:hover {
	color: var(--ztm-navy);
}

.ztm-rj-stopcard-fav.is-fav {
	color: var(--ztm-navy);
}

/* ── Bloki filtrów: Dzień / Linia / Godzina ── */
/* Duży panel wyróżnienia wybranej linii — numer, kierunek, czasomierz */
.ztm-rj-linia-highlight {
	display: none !important;
	align-items: center;
	gap: var(--ztm-space-3);
	background: var(--ztm-navy);
	border-radius: var(--ztm-rj-radius-sm);
	padding: var(--ztm-space-3);
	margin-bottom: var(--ztm-space-3);
	flex-wrap: wrap;
}

.ztm-rj-highlight-nr {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	background: var(--ztm-white);
	color: var(--ztm-navy);
	font-weight: 800;
	font-size: calc(30px * var(--ztm-font-scale, 1));
	border-radius: 12px;
}

.ztm-rj-highlight-info {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ztm-rj-highlight-label {
	font-size: calc(11px * var(--ztm-font-scale, 1));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ztm-blue-light);
}

.ztm-rj-highlight-info strong {
	font-size: calc(18px * var(--ztm-font-scale, 1));
	font-weight: 800;
	color: var(--ztm-white);
}

.ztm-rj-highlight-od-do {
	font-size: calc(13px * var(--ztm-font-scale, 1));
	color: var(--ztm-blue-light);
}

.ztm-rj-highlight-timer {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding-left: var(--ztm-space-3);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.ztm-rj-highlight-timer-label {
	font-size: calc(11.5px * var(--ztm-font-scale, 1));
	font-weight: 600;
	color: var(--ztm-blue-light);
}

.ztm-rj-highlight-clock {
	font-size: calc(28px * var(--ztm-font-scale, 1));
	font-weight: 800;
	color: var(--ztm-white);
	font-variant-numeric: tabular-nums;
}

.ztm-rj-highlight-clock--static {
	font-size: calc(22px * var(--ztm-font-scale, 1));
}

.ztm-rj-highlight-clock.is-now {
	color: var(--ztm-rj-accent-gold);
	animation: ztmRjPulse 1s ease-in-out infinite;
}

@keyframes ztmRjPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
	.ztm-rj-highlight-clock.is-now {
		animation: none;
	}
}


.ztm-rj-filter-block {
	margin-bottom: var(--ztm-space-3);
}

.ztm-rj-filter-label {
	font-size: calc(13px * var(--ztm-font-scale, 1));
	font-weight: 800;
	color: #1c2230;
	margin-bottom: var(--ztm-space-1);
}

.ztm-rj-filter-opt {
	font-weight: 500;
	color: var(--ztm-text-muted);
	text-transform: none;
}

.ztm-rj-pill {
	border: 1px solid var(--ztm-border-grey);
	background: var(--ztm-white);
	color: var(--ztm-tabs-text);
	font-family: var(--ztm-font);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Dzień — pozioma, przewijana belka (strzałka przewija, nie dokłada elementów) */
.ztm-rj-day-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	max-width: 640px;
}

.ztm-rj-day-pills {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}

.ztm-rj-day-pills::-webkit-scrollbar {
	display: none;
}

.ztm-rj-day-pill {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex-shrink: 0;
	min-width: 92px;
	padding: 10px 14px;
	border-radius: var(--ztm-rj-radius-sm);
}

.ztm-rj-day-pill strong {
	font-size: calc(14px * var(--ztm-font-scale, 1));
	font-weight: 700;
}

.ztm-rj-day-pill span {
	font-size: calc(12px * var(--ztm-font-scale, 1));
	color: var(--ztm-text-muted);
}

.ztm-rj-day-pill:hover:not(.is-active) {
	border-color: var(--ztm-navy);
}

.ztm-rj-day-pill.is-active {
	background: var(--ztm-navy);
	border-color: var(--ztm-navy);
	color: var(--ztm-white);
}

.ztm-rj-day-pill.is-active span {
	color: rgba(255, 255, 255, 0.75);
}

.ztm-rj-day-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	flex-shrink: 0;
	border: 1px solid var(--ztm-border-grey);
	background: var(--ztm-white);
	color: var(--ztm-tabs-text);
	border-radius: var(--ztm-rj-radius-sm);
	cursor: pointer;
}

.ztm-rj-day-more svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.ztm-rj-day-more:hover {
	border-color: var(--ztm-navy);
	color: var(--ztm-navy);
}

/* Linia */
.ztm-rj-linia-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ztm-rj-linia-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 52px;
	height: 50px;
	padding: 6px 14px 7px;
	border-radius: 9px;
	font-size: calc(14px * var(--ztm-font-scale, 1));
	font-weight: 700;
	color: var(--ztm-navy);
}

.ztm-rj-linia-pill::after {
	content: "";
	display: block;
	width: 16px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--ztm-rj-accent-gold);
}

.ztm-rj-linia-pill:hover:not(.is-active) {
	border-color: var(--ztm-navy);
}

.ztm-rj-linia-pill.is-active {
	background: var(--ztm-navy);
	border-color: var(--ztm-navy);
	color: var(--ztm-white);
}

.ztm-rj-linia-pill.is-active::after {
	background: var(--ztm-white);
}

/* "Wszystkie" to etykieta, nie numer — bez złotej kreski */
.ztm-rj-linia-pill[data-linia-nr=""] {
	flex-direction: row;
	align-self: center;
	padding: 0 16px;
	height: 50px;
}

.ztm-rj-linia-pill[data-linia-nr=""]::after {
	display: none;
}

.ztm-rj-linia-more {
	border-style: dashed;
	color: var(--ztm-text-muted);
}

/* Godzina */
.ztm-rj-godzina-row {
	display: flex;
	align-items: center;
	gap: var(--ztm-space-2);
}

.ztm-rj-godzina-slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 3px;
	background: var(--ztm-border-grey);
	outline: none;
}

.ztm-rj-godzina-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ztm-navy);
	border: 3px solid var(--ztm-white);
	box-shadow: 0 0 0 1px var(--ztm-navy);
	cursor: pointer;
}

.ztm-rj-godzina-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ztm-navy);
	border: 3px solid var(--ztm-white);
	box-shadow: 0 0 0 1px var(--ztm-navy);
	cursor: pointer;
}

.ztm-rj-godzina-clock {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--ztm-text-muted);
}

.ztm-rj-godzina-clock svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
}

/* Lista odjazdów */
.ztm-rj-dep-head {
	display: grid;
	grid-template-columns: 32px 64px 56px 1fr 64px 18px;
	gap: var(--ztm-space-2);
	padding: 0 var(--ztm-space-1) var(--ztm-space-1);
	font-size: calc(11.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--ztm-text-muted);
	border-bottom: 1px solid var(--ztm-border-grey);
}

.ztm-rj-dep-list {
	display: flex;
	flex-direction: column;
}

.ztm-rj-dep-row {
	display: grid;
	grid-template-columns: 32px 64px 56px 1fr 64px 18px;
	align-items: center;
	gap: var(--ztm-space-2);
	padding: var(--ztm-space-2) var(--ztm-space-1);
	border-bottom: 1px solid #f0f2f6;
	animation: ztmRjFadeIn 0.18s ease both;
	cursor: pointer;
}

.ztm-rj-dep-row:hover {
	background: #fafbfd;
}

/* Na desktop .ztm-rj-dep-left jest "niewidzialny" dla layoutu —
   jego dzieci wchodzą bezpośrednio do siatki grid wiersza. */
.ztm-rj-dep-left {
	display: contents;
}

.ztm-rj-dep-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ztm-text-muted);
}

.ztm-rj-dep-icon svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.ztm-rj-dep-time {
	font-weight: 800;
	font-size: calc(15px * var(--ztm-font-scale, 1));
	color: #1c2230;
}

.ztm-rj-dep-time.is-next {
	color: #c0392b;
}

.ztm-rj-dep-nr {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: var(--ztm-white);
	border: 1px solid var(--ztm-border-grey);
	color: var(--ztm-navy);
	font-weight: 800;
	font-size: calc(13px * var(--ztm-font-scale, 1));
	padding: 4px 8px 5px;
	border-radius: 6px;
	width: fit-content;
}

.ztm-rj-dep-nr::after {
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--ztm-rj-accent-gold);
}

.ztm-rj-dep-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ztm-rj-dep-info strong {
	font-size: calc(14.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	color: #1c2230;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-dep-info span {
	font-size: calc(12.5px * var(--ztm-font-scale, 1));
	color: var(--ztm-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-dep-eta {
	font-size: calc(13.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	color: var(--ztm-text-muted);
	text-align: right;
}

.ztm-rj-dep-eta.is-next {
	color: #c0392b;
}

.ztm-rj-dep-chevron {
	width: 16px;
	height: 16px;
	stroke: var(--ztm-text-muted);
	justify-self: end;
}

.ztm-rj-dep-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: 1px solid var(--ztm-border-grey);
	background: var(--ztm-white);
	color: var(--ztm-navy);
	font-family: var(--ztm-font);
	font-size: calc(14px * var(--ztm-font-scale, 1));
	font-weight: 700;
	padding: 12px;
	margin-top: var(--ztm-space-2);
	border-radius: var(--ztm-rj-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
}

.ztm-rj-dep-more:hover {
	background: #f0f4fb;
}

.ztm-rj-dep-more svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

/* =========================================================
   WIDOK 4 — LISTA PRZYSTANKÓW
   ========================================================= */

.ztm-rj-alpha-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--ztm-space-3);
	border-bottom: 1px solid var(--ztm-border-grey);
}

.ztm-rj-alpha-row .ztm-rj-day-more {
	border: none;
	background: transparent;
	flex-shrink: 0;
}

.ztm-rj-alpha-row .ztm-rj-day-more:hover {
	color: var(--ztm-navy);
}

.ztm-rj-alpha-bar {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-wrap: nowrap;
	gap: 2px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ztm-rj-alpha-bar::-webkit-scrollbar {
	display: none;
}

.ztm-rj-alpha-btn {
	flex-shrink: 0;
	border: none;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--ztm-tabs-text);
	font-family: var(--ztm-font);
	font-size: calc(14.5px * var(--ztm-font-scale, 1));
	font-weight: 700;
	min-width: 34px;
	height: 44px;
	padding: 0 12px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ztm-rj-alpha-btn:hover {
	color: var(--ztm-navy);
	background: #f7f9fc;
}

.ztm-rj-alpha-btn.is-active {
	color: var(--ztm-navy);
	border-bottom-color: var(--ztm-navy);
	font-weight: 800;
}

.ztm-rj-alpha-btn[data-letter="all"] {
	font-weight: 800;
}

.ztm-rj-grupa {
	margin-bottom: var(--ztm-space-3);
	animation: ztmRjFadeIn 0.22s ease both;
	transition: opacity 0.2s ease;
}

.ztm-rj-grupa-header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--ztm-white);
	border: 1px solid var(--ztm-border-grey);
	color: var(--ztm-navy);
	font-size: calc(14px * var(--ztm-font-scale, 1));
	font-weight: 800;
	border-radius: var(--ztm-rj-radius-sm);
	margin-bottom: var(--ztm-space-2);
}

.ztm-rj-przystanki-lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 2px;
	column-gap: var(--ztm-space-4);
}

.ztm-rj-przystanek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 4px;
	border-bottom: 1px solid #f0f2f6;
}

.ztm-rj-przystanek:hover {
	background: #fafbfd;
}

.ztm-rj-przystanek-nazwa {
	flex: 1;
	padding: 0;
	font-size: calc(15px * var(--ztm-font-scale, 1));
	font-weight: 500;
	color: #1c2230;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztm-rj-przystanek-nazwa:hover,
.ztm-rj-przystanek-nazwa:focus-visible {
	color: var(--ztm-navy);
	text-decoration: underline;
}

.ztm-rj-fav {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	color: #c3cad6;
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.ztm-rj-fav:hover {
	background: #f0f4fb;
	color: var(--ztm-navy);
}

.ztm-rj-fav.is-fav {
	color: var(--ztm-navy);
}

.ztm-rj-fav svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.ztm-rj-fav.is-fav svg {
	fill: currentColor;
}

/* =========================================================
   DOSTĘPNOŚĆ — spójna z header.css
   ========================================================= */

.ztm-rj-full a:focus-visible,
.ztm-rj-full button:focus-visible,
.ztm-rj-full input:focus-visible,
.ztm-rj-full [role="button"]:focus-visible {
	outline: 3px solid var(--ztm-navy);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.ztm-rj-full * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */

@media (max-width: 780px) {
	.ztm-rj-linia {
		flex-direction: column;
	}

	.ztm-rj-linia-nr {
		width: auto;
		align-self: flex-start;
	}

	.ztm-rj-nr-val {
		min-width: 56px;
		min-height: 36px;
	}

	.ztm-rj-linia-kierunki {
		grid-template-columns: 1fr;
	}

	.ztm-rj-trasa-header {
		flex-direction: column;
	}

	.ztm-rj-trasa-map {
		height: 300px;
	}

	.ztm-rj-przystanki-lista {
		grid-template-columns: 1fr;
	}

	.ztm-rj-stopcard {
		flex-wrap: wrap;
	}

	.ztm-rj-dep-head {
		display: none;
	}

	.ztm-rj-dep-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		padding: var(--ztm-space-2) var(--ztm-space-1);
	}

	/* Lewa kolumna: ikona autobusu + czas + numer linii */
	.ztm-rj-dep-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		flex-shrink: 0;
		width: 46px;
	}

	.ztm-rj-dep-row .ztm-rj-dep-icon { display: none; }

	/* Lewa część: czas + numer obok siebie w jednym wierszu */
	.ztm-rj-dep-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		width: auto;
		flex-shrink: 0;
	}

	.ztm-rj-dep-row .ztm-rj-dep-time {
		font-size: calc(15px * var(--ztm-font-scale, 1));
		font-weight: 800;
		white-space: nowrap;
	}

	.ztm-rj-dep-row .ztm-rj-dep-nr {
		width: auto;
	}

	.ztm-rj-dep-row .ztm-rj-dep-info strong {
		font-size: calc(14px * var(--ztm-font-scale, 1));
	}

	.ztm-rj-dep-row .ztm-rj-dep-info span {
		font-size: calc(13px * var(--ztm-font-scale, 1));
	}

	/* ETA widoczne na mobile — za X min / <1 min */
	.ztm-rj-dep-row .ztm-rj-dep-eta {
		display: block;
		flex-shrink: 0;
		font-size: calc(12px * var(--ztm-font-scale, 1));
		text-align: right;
		white-space: nowrap;
	}

	.ztm-rj-dep-row .ztm-rj-dep-time {
		font-size: calc(14px * var(--ztm-font-scale, 1));
		white-space: nowrap;
	}

	.ztm-rj-dep-row .ztm-rj-dep-nr {
		width: 100%;
		justify-content: center;
	}

	/* Środkowa kolumna: kierunek + przez — zajmuje całą wolną przestrzeń */
	.ztm-rj-dep-row .ztm-rj-dep-info {
		flex: 1;
		min-width: 0;
	}

	.ztm-rj-dep-row .ztm-rj-dep-info strong,
	.ztm-rj-dep-row .ztm-rj-dep-info span {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		word-break: break-word;
	}

	/* Kolumna ETA — schowana na mobile (nie ma miejsca) */
	.ztm-rj-dep-row .ztm-rj-dep-eta { display: none; }

	/* Chevron — po prawej krawędzi */
	.ztm-rj-dep-row .ztm-rj-dep-chevron {
		flex-shrink: 0;
		justify-self: auto;
	}

	.ztm-rj-day-pill {
		min-width: 78px;
	}
}

@media (max-width: 620px) {
	.ztm-rj-search-group {
		width: 100%;
		justify-content: space-between;
	}

	.ztm-rj-search-wrap {
		max-width: none;
		flex: 1 1 auto;
	}
}

@media (max-width: 560px) {
	.ztm-rj-topbar {
		flex-direction: column;
		align-items: stretch;
	}

	.ztm-rj-search-group {
		margin-left: 0;
	}

	.ztm-rj-odjazdy-top {
		flex-wrap: wrap;
	}

	.ztm-rj-stopcard-name {
		white-space: normal;
	}
}

@media (max-width: 420px) {
	.ztm-rj-fav-filter span,
	.ztm-rj-fav-filter {
		font-size: calc(12px * var(--ztm-font-scale, 1));
		padding: 0 8px;
	}

	.ztm-rj-day-pill {
		min-width: 70px;
		padding: 8px 10px;
	}

	.ztm-rj-linia-pill {
		min-width: 44px;
		height: 44px;
		padding: 5px 10px 6px;
	}
}