/* Careway: nowe tła (wdrożone 2026-10-16, z podglądu v1–v11). Tylko tła, obramowania kart i tekst pomocniczy w kartach.
   Hero strony głównej (#top) bez zmian. Sekcje oznaczone data-tlo, mapy: data-mapa + mapa-europy.js. */
:root { --tlo-ciemny: #050f1b; --tlo-sredni: #081828; --tlo-jasny: #0b1f33; --tlo-stopka: #030912; --tlo-linia: rgba(255,255,255,.06); }

/* C. Sekcje pod hero: trzy płaskie odcienie granatu + cienka linia między sekcjami */
[data-tlo] { border-top: 1px solid var(--tlo-linia) !important; border-bottom: 0 !important; box-shadow: none !important; }
[data-tlo="jasny"] { background: var(--tlo-jasny) !important; }
[data-tlo="sredni"] { background: var(--tlo-sredni) !important; }
[data-tlo="ciemny"] { background: var(--tlo-ciemny) !important; }
footer { background: var(--tlo-stopka) !important; border-top: 1px solid var(--tlo-linia) !important; }

/* D. „Dla przewoźników” na głównej: bez kratki, łuki tras w prawym górnym rogu */
#przewoznicy > div[style*="background-image:linear-gradient(90deg,rgba(95,224,168"] { display: none !important; }
#przewoznicy::before { content: ""; position: absolute; top: 0; right: 0; width: min(560px, 62%); height: 340px;
  background: url("luki-przewoznicy.svg") no-repeat right top / contain; opacity: .55; pointer-events: none; }
@media (max-width: 700px) { #przewoznicy::before { opacity: .25; } }

/* F. Karty na granacie (usługi, opinie, formularze); :where() zostawia stare hovery stron w mocy */
:where([style*="background:linear-gradient(160deg,rgba(140,180,220"], .card, form[data-form], #przewoznicy div[style*="background:rgba(95,224,168,.06)"]) {
  background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.1) !important; }
:where([style*="background:linear-gradient(160deg,rgba(140,180,220"], .card, form[data-form]) p { color: #9fb0c4 !important; }
:where([style*="background:linear-gradient(160deg,rgba(140,180,220"], .card) .p { color: #9fb0c4 !important; }


/* B. Hero podstron: kropkowana mapa Europy zamiast kratki i ukośnej trasy */
section[data-mapa="przewoznicy"], section[data-mapa="auta"] {
  background: radial-gradient(70% 80% at 72% 40%, #123456, transparent 70%), linear-gradient(180deg, #0a1d33, #06121f) !important;
  isolation: isolate; }
section[data-mapa="przewoznicy"] > div[style*="background-image:linear-gradient(rgba(140,180,220,.09)"],
section[data-mapa="auta"] > div[style*="background-image:linear-gradient(rgba(140,180,220,.09)"],
section[data-mapa="przewoznicy"] > div[style*="linear-gradient(90deg,rgba(4,16,30,.9)"],
section[data-mapa="auta"] > div[style*="linear-gradient(90deg,rgba(4,16,30,.9)"],
section[data-mapa="przewoznicy"] > svg[data-anim] { display: none !important; }
section[data-mapa="przewoznicy"]::after, section[data-mapa="auta"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 120px; background: linear-gradient(180deg, rgba(6,18,31,0), #06121f); pointer-events: none; z-index: -1; }
@media (max-width: 899px) {
  section[data-mapa="przewoznicy"], section[data-mapa="auta"] {
    background: radial-gradient(90% 70% at 50% 45%, #123456, transparent 70%), linear-gradient(180deg, #0a1d33, #06121f) !important; }
}

/* E. Kontakt: ta sama mapa, osobny canvas za treścią */
section[data-mapa="kontakt"] { position: relative; isolation: isolate; }

.cw-mapa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.cw-mapa--kontakt { opacity: .5; }
/* na telefonie mapa leży za tekstem: przygaszona, żeby nie konkurowała z treścią */
@media (max-width: 899px) { .cw-mapa--przewoznicy, .cw-mapa--auta { opacity: .55; } }

/* ---- v2 (2026-10-16): podstrony — jedno tło pod hero, krótkie sekcje w siatce kart ---- */
footer[data-tlo-stopka="ciemny"] { background: var(--tlo-ciemny) !important; }
.s-siatka { padding: 64px 0 !important; }
@media (max-width: 639px) { .s-siatka { padding: 48px 0 !important; } }
.siatka-krotkich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) { .siatka-krotkich { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .siatka-krotkich { grid-template-columns: 1fr; } }
.karta-krotka { background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 16px; padding: 24px; min-width: 0; }
.karta-krotka__h { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; color: #fff; margin: 0 0 10px; text-wrap: balance; }
.karta-krotka .lead, .karta-krotka .p { font-size: 15.5px; line-height: 1.6; margin: 0; max-width: none; color: #9fb0c4 !important; }
.karta-krotka .h2row { margin: 0 0 12px; }
.karta-krotka .h2row .karta-krotka__h { margin: 0; }
.karta-krotka .ikona-karta { margin-bottom: 14px; }
/* karta w karcie (ramka „500 000 zł”, „Termin płatności”) — w siatce już bez własnej ramki */
.karta-krotka div[style*="background:linear-gradient(160deg,rgba(140,180,220"], .karta-krotka dl[style] { background: none !important; border: 0 !important; padding: 0 !important; }
.karta-krotka ol { max-width: none !important; }

/* ---- v3 (2026-10-16): karty z akcentem (wszystkie strony podglądu) ---- */
.kx { background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.1) !important; transition: border-color .2s ease; }
.kx--wyr { background: rgba(242,140,40,.06) !important; border-color: rgba(242,140,40,.55) !important; }
.kx:hover, .kx--wyr:hover { border-color: rgba(242,140,40,.5) !important; }
.kx:hover:not(.kx--wyr) { background: rgba(255,255,255,.035) !important; }
.kx--wyr:hover { background: rgba(242,140,40,.06) !important; }
.kx .p, .kx .lead { color: #c3cfdc !important; font-size: 16.5px !important; }
/* ikony: jeden styl na całej stronie — sama linia 1,5 px w #f28c28, bez pudełek */
.kx-ikona { display: block; line-height: 0; margin: 0 0 14px; color: #f28c28; }
.kx-ikona svg, .kx-pudelko svg, .kx .ikona-karta svg, .kx .ikona svg, .h2row .ikona svg { width: 36px !important; height: 36px !important; stroke: #f28c28 !important; stroke-width: 1.5 !important; fill: none; }
.kx-ikona svg *, .kx-pudelko svg *, .kx .ikona-karta svg *, .kx .ikona svg *, .h2row .ikona svg * { vector-effect: non-scaling-stroke; }
.kx-pudelko, .kx .ikona-karta, .kx .ikona, .h2row .ikona { width: auto !important; height: auto !important; background: none !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important; display: block !important; line-height: 0; }
.kx .ikona-karta { margin: 0 0 14px !important; }
.h2row .ikona { flex-shrink: 0; }
/* „O nas”: karty wartości bez górnej pomarańczowej kreski, pełne zaokrąglenie */
#o-nas .kx { border-radius: 12px !important; }
/* „Jak pracujemy”: wyróżniony ostatni krok — akcenty z zielonych na pomarańczowe */
#proces .kx--wyr > div[style*="#5FE0A8"] { background: linear-gradient(90deg, #F28C28, transparent) !important; }
#proces .kx--wyr div[style*="rgba(95,224,168,.3)"] { border-color: rgba(242,140,40,.45) !important; color: #FF9457 !important; }
/* siatki: liczba kolumn dobrana do liczby kart, bez samotnej karty w ostatnim rzędzie */
.kx-siatka { display: grid !important; }
.kx-siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.kx-siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.kx-siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.kx-siatka--6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.kx-siatka--5, .kx-siatka--5k { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.kx-siatka--5 > *, .kx-siatka--5k > * { grid-column: span 2; }
.kx-siatka--5 > :nth-child(4), .kx-siatka--5k > :nth-child(4) { grid-column: 2 / span 2; }
@media (min-width: 1200px) { .kx-siatka--5k { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .kx-siatka--5k > *, .kx-siatka--5k > :nth-child(4) { grid-column: auto; } }
@media (max-width: 1099px) { .kx-siatka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 1023px) { .kx-siatka--6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px) {
  .kx-siatka--2, .kx-siatka--3, .kx-siatka--4, .kx-siatka--5, .kx-siatka--5k, .kx-siatka--6 { grid-template-columns: 1fr !important; }
  .kx-siatka > *, .kx-siatka > :nth-child(4) { grid-column: auto !important; }
}

/* ---- v4 (2026-10-16): ciemniejsza skala teł (zmienne w :root), przejście hero → „Dla przewoźników” bez krawędzi ---- */
#przewoznicy[data-tlo="jasny"] { background: linear-gradient(180deg, #04101e 0, var(--tlo-jasny) 160px) !important; border-top: 0 !important; }
/* v4: tekst pomocniczy rozjaśniony do ≥ 4,5:1 na nowych tłach (tylko sekcje pod hero; hero bez zmian) */
[data-tlo] [style*="color:#7C94AC" i] { color: #7f97ae !important; }
[data-tlo] [style*="color:#6E88A2" i] { color: #7991a9 !important; }
[data-tlo] input::placeholder, [data-tlo] textarea::placeholder { color: #7990a8 !important; }
/* v5: „O nas” — pasek tras na tle sekcji; pauza po najechaniu (przy prefers-reduced-motion animację gasi reguła strony [data-anim]) */
.pasek-tras:hover .pasek-tras__tor { animation-play-state: paused !important; }
.pasek-tras [style*="border-radius:12px"] { box-shadow: none !important; }
/* v8: „Jak to wygląda” / „Jak zacząć” — JEDNA ciągła oś kroków: ::before na <ol>, od środka pierwszego kółka w dół listy.
   Odcinek poniżej ostatniego kółka zasłania ::after ostatniego punktu w kolorze tła karty (--tlo-osi), więc linia kończy się
   na środku ostatniego kółka przy każdej długości tekstu i szerokości ekranu. Kółka mają pełne (nieprzezroczyste) tło. */
.os-krokow { position: relative; --tlo-osi: #112030; }
.os-krokow::before { content: ""; position: absolute; left: calc(var(--kolko) / 2 - 1px); top: calc(var(--kolko) / 2); bottom: 0;
  border-left: 2px dashed rgba(242,140,40,.45); z-index: 0; pointer-events: none; }
.os-krokow > li { position: relative; z-index: 1; }
.os-krokow > li:last-child { margin-bottom: 0 !important; }
.os-krokow > li:last-child::after { content: ""; position: absolute; left: calc(var(--kolko) / 2 - 3px); width: 6px; top: var(--kolko); bottom: 0;
  background: var(--tlo-osi); z-index: -1; pointer-events: none; }
.os-krokow .krok-nr, .os-krokow > li > span:first-child { position: relative; z-index: 1; }
/* v9: karty opinii — wypełniony cudzysłów (SVG, bez czcionki) */
.kx-cytat { display: block; line-height: 0; margin: 0 0 12px; }
/* v10: „Dla przewoźników” w menu mobilnym — hover jak na komputerze ([data-h="1"]) */
.menu-przewoznicy-mob:hover { background: #1b3c60 !important; border-color: #3a6a9c !important; color: #fff !important; }
/* v11: „Warunki współpracy” — wiersze etykieta | wartość, cienka linia między wierszami */
.warunki { row-gap: 0 !important; }
.warunki dt, .warunki dd { padding-top: 12px !important; padding-bottom: 12px !important; }
.warunki dt { color: #9fb0c4 !important; padding-top: 15px !important; }
.warunki dd { color: #ffffff !important; }
.warunki dt:first-of-type, .warunki dd:first-of-type { padding-top: 0 !important; }
.warunki dt:first-of-type { padding-top: 3px !important; }
.warunki dt:not(:first-of-type), .warunki dd:not(:first-of-type) { border-top: 1px solid rgba(255,255,255,.06); }
.warunki dt:last-of-type, .warunki dd:last-of-type { padding-bottom: 0 !important; }
.warunki { column-gap: 0 !important; }
.warunki dt { padding-right: 22px !important; }
@media (max-width: 1023px) { .warunki { grid-template-columns: minmax(0, 38%) 1fr !important; } }

/* 2026-10-17: wąskie ekrany (320 px). Poniżej 360 px długie słowa w nagłówkach (np. DE „Transportorganisation”) łamią się
   zamiast wychodzić poza ekran — tylko tam, bo na szerszych ekranach dzielenie wyrazów zmieniało wygląd nagłówków
   (np. krok „Transportorganisation” na desktopie DE). Pola formularza wyceny auta nie wymuszają kolumny 300 px (tylko ten formularz). */
@media (max-width: 359px) { h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; } }
form[data-form="quote"] > div.grid2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }