/* Sprawdź pozycję w Mapach Google. Zmienne kolorów i odstępów z /assets/css/site.css.
   Klasy z prefiksem mapy-, bo strona ma już swoje .siatka-punkt i .formularz. */

.mapy { padding: 8px var(--prawa) 48px var(--lewa); }
.mapy [hidden] { display: none !important; }   /* site.css nie ma ogolnej reguly, a .mapy-legenda czy .sym-znacznik maja wlasne display */
.mapy-uklad {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 32px;
  max-width: calc(var(--glowna) + var(--kol-odstep) + var(--bok));
  align-items: start;
}
.mapy-panel { min-width: 0; }

/* etapy */
.mapy-etapy { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: etap; font-size: 13px; color: var(--tekst-4); }
.mapy-etapy li { flex: 1; padding-top: 8px; border-top: 3px solid var(--ramka-2); counter-increment: etap; }
.mapy-etapy li::before { content: counter(etap) ". "; }
.mapy-etapy li.zrobiony { border-color: var(--niebieski-jasny); }
.mapy-etapy li.aktywny { border-color: var(--niebieski); color: var(--tekst); font-weight: 600; }

/* formularz */
.mapy-krok { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.mapy-krok legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; font-size: 18px; font-weight: 600; color: var(--tekst); }
.mapy-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--niebieski); color: #fff; font-size: 14px; }
.mapy-szukaj { display: flex; gap: 10px; align-items: stretch; }
.mapy-szukaj .pole { flex: 1; min-width: 0; }
.mapy-szukaj .przycisk { flex: none; }
.mapy-pola { display: grid; gap: 14px; }
.mapy-etykieta { margin: 16px 0 8px; font-size: 14px; color: var(--tekst-3); }
.mapy-h { margin: 0 0 8px; font-size: 22px; line-height: 1.3; }
.mapy-h3 { margin: 24px 0 8px; font-size: 17px; }
.mapy-podtytul { margin: 0 0 14px; font-size: 14px; color: var(--tekst-4); }
.mapy-male { font-size: 13px; color: var(--tekst-4); }
.mapy-link { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
.mapy-link:hover { color: var(--niebieski-3); }

/* kandydaci i wybrana firma */
.mapy-kandydaci:empty { display: none; }
.mapy-kandydaci { margin-top: 14px; }
.mapy-lista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ramka); border-radius: 12px; overflow: hidden; }
.mapy-lista li + li { border-top: 1px solid var(--ramka-2); }
.mapy-kand {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; padding: 10px 12px; border: 0; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.mapy-kand:hover, .mapy-kand:focus-visible, .mapy-kand.wskazany { background: var(--niebieski-tlo); }
.mapy-kand-nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--niebieski); color: #fff; font-size: 12px; font-weight: 600; }
.mapy-kand-nazwa { display: block; font-weight: 600; color: var(--tekst); overflow-wrap: anywhere; }
.mapy-kand-opis { display: block; font-size: 13px; color: var(--tekst-4); overflow-wrap: anywhere; }
.mapy-kand-tak { font-size: 13px; color: var(--niebieski-2); font-weight: 500; white-space: nowrap; }
.mapy-pytanie { margin: 0 0 8px; font-size: 14px; color: var(--tekst-3); }
.mapy-brak { margin: 10px 0 0; font-size: 14px; }
.mapy-wskaz { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--zolty-tlo); font-size: 14px; color: #5c3b00; }
.mapy-wskaz .pole { margin: 10px 0; }
.mapy-wskaz-rzad { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.mapy-wskaz .mapy-status { margin: 10px 0 0; }

.mapy-wybrana { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--niebieski-jasny); border-radius: 12px; background: #f6fafe; }
.mapy-wybrana-nazwa { margin: 0; font-size: 17px; font-weight: 600; color: var(--tekst); overflow-wrap: anywhere; }
.mapy-wybrana-opis { margin: 2px 0 0; font-size: 13px; color: var(--tekst-4); overflow-wrap: anywhere; }
.mapy-wybrana-pin { margin: 10px 0 0; font-size: 13px; color: var(--tekst-3); }
.mapy-wybrana-pin.przesunieta { color: var(--pomaranczowy); }
.mapy-wybrana-akcje { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }

.mapy-podpowiedzi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mapy-podpowiedzi:empty { display: none; }
.mapy-chip { padding: 5px 12px; border: 1px solid var(--ramka); border-radius: 16px; background: #fff; font: inherit; font-size: 13px; color: var(--tekst-2); cursor: pointer; }
.mapy-chip:hover, .mapy-chip[aria-pressed="true"] { border-color: var(--niebieski-jasny); background: var(--niebieski-tlo); color: var(--niebieski-3); }

.mapy-zasieg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mapy-zasieg label { position: relative; cursor: pointer; }
.mapy-zasieg input { position: absolute; opacity: 0; }
.mapy-zasieg span { display: block; padding: 9px 10px; border: 1px solid var(--ramka); border-radius: 10px; font-weight: 600; text-align: center; color: var(--tekst-2); }
.mapy-zasieg small { display: block; font-size: 12px; font-weight: 400; color: var(--tekst-4); }
.mapy-zasieg input:checked + span { border-color: var(--niebieski); background: var(--niebieski-tlo); color: var(--niebieski-3); box-shadow: inset 0 0 0 1px var(--niebieski); }
.mapy-zasieg input:focus-visible + span { outline: 2px solid var(--niebieski); outline-offset: 2px; }

.mapy-zgoda { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 18px 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--tekst-2); cursor: pointer; }
.mapy-zgoda input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--niebieski); }
.mapy-zgoda.blad span { color: var(--czerwony); }
.mapy-dokumenty { display: flex; gap: 16px; margin: 0 0 10px 32px; font-size: 13px; }
.mapy-krok .formularz-rodo { margin: 0 0 16px; }
.mapy-wyslij { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mapy-status { margin: 0; font-size: 14px; color: var(--tekst-3); }
.mapy-status:empty { display: none; }
.mapy-status.blad { color: var(--czerwony); }
.mapy-status.ok { color: var(--zielony); }
.przycisk[disabled] { opacity: .6; cursor: progress; }

/* sprawdzanie */
.mapy-sym { display: inline-block; margin: 0 0 10px; }
.mapy-postep { height: 6px; border-radius: 3px; background: var(--ramka-2); overflow: hidden; }
.mapy-postep-pasek { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--niebieski); transition: width .5s var(--e-std); }
.mapy-postep-opis { margin: 6px 0 14px; font-size: 13px; color: var(--tekst-4); }
.mapy-teraz { padding: 14px 16px; border-radius: 12px; background: var(--niebieski-tlo); }
.mapy-teraz-etykieta { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--niebieski-3); }
.mapy-teraz-tekst { margin: 0; font-size: 16px; line-height: 1.5; color: #0b3a82; min-height: 48px; }
.mapy-dziennik { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.mapy-dziennik li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ramka-2); animation: mapy-wjazd .35s var(--e-wej); }
.mapy-dziennik .mapy-pkt { position: static; }

/* wynik */
.mapy-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.mapy-kafel { padding: 12px 14px; border: 1px solid var(--ramka); border-radius: 12px; }
.mapy-kafel-liczba { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--tekst); }
.mapy-kafel-opis { display: block; font-size: 13px; color: var(--tekst-4); }
.mapy-kafel-zmiana { display: block; font-size: 12px; }
.mapy-kafel-zmiana.lepiej { color: var(--zielony); }
.mapy-kafel-zmiana.gorzej { color: var(--czerwony); }
.mapy-info { padding: 10px 12px; border-radius: 10px; background: var(--tlo-szare-2); font-size: 13.5px; color: var(--tekst-3); }
.mapy-info:empty { display: none; }
.mapy-konkurenci { margin: 0; padding: 0; list-style: none; }
.mapy-konkurenci li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ramka-2); }
.mapy-konkurenci strong { display: block; color: var(--tekst); overflow-wrap: anywhere; }
.mapy-konkurenci span { font-size: 13px; color: var(--tekst-4); }
.mapy-konkurenci .mapy-ile { text-align: right; white-space: nowrap; }
.mapy-uwagi { margin: 0; padding: 0; list-style: none; }
.mapy-uwagi li { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid var(--ramka); font-size: 14px; color: var(--tekst-3); }
.mapy-uwagi li.problem { border-color: var(--czerwony); }
.mapy-uwagi li.uwaga { border-color: var(--zolty); }
.mapy-uwagi li.ok { border-color: var(--zielony-2); }
.mapy-uwagi strong { display: block; color: var(--tekst); }
.mapy-cta { margin: 24px 0 8px; }
.mapy-cta .akcje { margin: 14px 0 0; }
.mapy-wykres svg { display: block; width: 100%; height: auto; }
.mapy-wykres .os { stroke: var(--ramka); stroke-width: 1; }
.mapy-wykres .linia { fill: none; stroke: var(--niebieski); stroke-width: 2.5; stroke-linejoin: round; }
.mapy-wykres .kropka { fill: #fff; stroke: var(--niebieski); stroke-width: 2.5; }
.mapy-wykres text { font-size: 11px; fill: var(--tekst-4); }
.mapy-wypisz { margin-top: 22px; font-size: 13px; color: var(--tekst-4); }
.mapy-lokalnie { margin-top: 18px; padding: 10px 14px; border: 1px dashed var(--ramka); border-radius: 10px; font-size: 13px; color: var(--tekst-3); }
.mapy-lokalnie p { margin: 4px 0; }
.mapy-ramka-info { padding: 12px 14px; border-radius: 10px; background: var(--zolty-tlo); }
.mapy-zajawka { margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--niebieski-tlo); }
.mapy-zajawka .mapy-h3 { margin: 0 0 6px; }
.mapy-zajawka p { margin: 0 0 12px; }
.mapy-zajawka .mapy-male { margin: 10px 0 0; }

/* widok na wejściu: karta z przykładowym wynikiem, w stylu symulacji #mapy na stronie głównej.
   Podkład to ten sam plik co w panelu ICTR na stronie głównej. */
.mapy-wzor { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--ramka); border-radius: 16px; overflow: hidden; background: #fff; }
/* zanim pojawi się prawdziwa mapa, karta ma wysokość lewej kolumny: mapa w karcie wypełnia to, co zostaje */
.mapy-uklad:not(.ma-mape) { align-items: stretch; }
.mapy-uklad:not(.ma-mape) .mapy-mapa-kolumna { position: static; display: flex; flex-direction: column; }
.mapy-uklad:not(.ma-mape) .mapy-wzor { flex: 1; }
.mapy-wzor-gora { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ramka-2); font-size: 12.5px; color: var(--tekst-4); }
.mapy-wzor-gora .sym-znacznik { flex: none; }
.mapy-wzor-tytul { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapy-wzor-licznik { flex: none; font-variant-numeric: tabular-nums; color: var(--tekst-3); }
.mapy-wzor-mapa { position: relative; flex: 1 1 auto; min-height: 250px; overflow: hidden; background: var(--lad); }
.mapy-wzor-tlo { position: absolute; left: calc(50% + 34px); top: calc(50% + 36px); width: 1500px; max-width: none; height: auto; transform: translate(-50%, -50%); }
.mapy-wzor-punkty { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; max-width: 100%; transform: translate(-50%, -50%); }
.mapy-wzor .mapy-pkt { position: absolute; margin: -15px 0 0 -15px; animation: none; }
.mapy-wzor .mapy-pkt.czeka, .mapy-wzor .mapy-pkt.teraz { margin: -7px 0 0 -7px; }
.mapy-wzor .mapy-pkt.teraz { animation: mapy-puls 1s infinite; }
.mapy-wzor .mapy-pkt.odkryty { animation: mapy-pop .3s var(--e-wej); }
.mapy-wzor .w0 { left: 50.0%; top: 50.0%; }
.mapy-wzor .w1 { left: 69.0%; top: 50.0%; }
.mapy-wzor .w2 { left: 59.5%; top: 33.5%; }
.mapy-wzor .w3 { left: 40.5%; top: 33.5%; }
.mapy-wzor .w4 { left: 31.0%; top: 50.0%; }
.mapy-wzor .w5 { left: 40.5%; top: 66.5%; }
.mapy-wzor .w6 { left: 59.5%; top: 66.5%; }
.mapy-wzor .w7 { left: 82.9%; top: 31.0%; }
.mapy-wzor .w8 { left: 50.0%; top: 12.0%; }
.mapy-wzor .w9 { left: 17.1%; top: 31.0%; }
.mapy-wzor .w10 { left: 17.1%; top: 69.0%; }
.mapy-wzor .w11 { left: 50.0%; top: 88.0%; }
.mapy-wzor .w12 { left: 82.9%; top: 69.0%; }
.mapy-wzor-lista { flex: none; padding: 8px 0 2px; border-top: 1px solid var(--ramka-2); }
.mapy-wzor-etykieta { margin: 0 14px 6px; font-size: 12px; color: var(--tekst-4); }
.mapy-wzor-lista ol { margin: 0; padding: 0; list-style: none; }
.mapy-wzor-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; }
.mapy-wzor-lista li.ty { background: var(--niebieski-tlo); }
.mapy-wzor-nr { font-size: 13px; font-weight: 600; color: var(--tekst-4); }
.mapy-wzor-kreski { display: grid; gap: 6px; }
.mapy-wzor-kreski span { display: block; height: 8px; border-radius: 4px; background: var(--ramka-2); }
.mapy-wzor-kreski span:first-child { width: 62%; background: #d2e3fc; }
.mapy-wzor-kreski span:last-child { width: 44%; }
.mapy-wzor-nazwa { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--link); }
.mapy-wzor-gw { display: inline-flex; gap: 1px; color: var(--zolty); }
.mapy-wzor-gw .ikona { width: 12px; height: 12px; }
.mapy-wzor-opis { display: block; font-size: 12px; color: var(--tekst-4); }
.mapy-wzor figcaption { flex: none; padding: 9px 14px 10px; border-top: 1px solid var(--ramka-2); font-size: 12.5px; color: var(--tekst-4); }
.mapy-wzor figcaption p { margin: 0; }
.mapy-wzor .mapy-legenda { margin: 0; }
/* prawdziwa mapa: spokojniejsze kolory podkładu, żeby punkty z pozycjami były czytelne */
.mapy-mapa .leaflet-tile-pane { filter: saturate(.55) brightness(1.04); }

/* pokaz na wejściu: punkty czekają, postać je obchodzi i odkrywa pozycje (mapy.js: pokaz) */
.mapy-wzor .mapy-pkt.czeka { margin: -7px 0 0 -7px; }
.mapy-wzor .mapy-pkt.odkryty { animation: mapy-pop .3s var(--e-wej); }
.mapy-wzor-osoba { position: absolute; left: -24px; top: -66px; z-index: 2; transition: transform linear; will-change: transform; pointer-events: none; }

/* blok pod polem firmy, zanim użytkownik wybierze firmę */
.mapy-start { margin: 4px 0 0; padding: 16px 18px 14px; border: 1px solid var(--ramka-2); border-radius: 16px; background: var(--tlo-szare); }
.mapy-start-tytul { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--tekst); }
.mapy-start .mapy-kafle { margin: 0 0 12px; }
.mapy-start .mapy-kafel { background: #fff; }
.mapy-start-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--tekst-3); }
.mapy-start-lista li { display: flex; align-items: flex-start; gap: 8px; }
.mapy-start-lista .ikona { width: 18px; height: 18px; margin-top: 2px; color: var(--zielony); }
.mapy-start-uwaga { margin: 12px 0 0; font-size: 12px; color: var(--tekst-4); }

/* mapa */
.mapy-mapa-kolumna { position: sticky; top: calc(var(--pasek-wid) + 16px); min-width: 0; }
.mapy-mapa {
  position: relative; z-index: 0; isolation: isolate;
  height: calc(100vh - var(--pasek-wid) - 72px); min-height: 460px; max-height: 760px;
  border: 1px solid var(--ramka); border-radius: 16px; overflow: hidden; background: var(--lad);
}
.mapy-mapa .leaflet-control-attribution { font-size: 10px; }
.mapy-mapa.wskazuj, .mapy-mapa.wskazuj.leaflet-grab { cursor: crosshair; }
.mapy-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; font-size: 12px; color: var(--tekst-4); }
.mapy-l::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.mapy-l.z::before { background: var(--zielony); }
.mapy-l.p::before { background: var(--zolty); }
.mapy-l.c::before { background: var(--czerwony); }
.mapy-l.s::before { background: #5f6368; }

/* telefon nad mapą: to, co widzi klient w danym punkcie */
.mapy-telefon {
  position: absolute; right: 14px; bottom: 30px; z-index: 2;
  width: 230px; padding: 12px 12px 10px; border: 6px solid #202124; border-radius: 26px;
  background: #fff; box-shadow: var(--cien-3); font-size: 12.5px;
}
.mapy-telefon-szukaj { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 16px; background: var(--tlo-szare); color: var(--tekst); font-weight: 500; }
.mapy-telefon-szukaj .ikona { width: 14px; height: 14px; color: var(--tekst-4); }
.mapy-telefon-gdzie { margin: 6px 2px 4px; font-size: 11px; color: var(--tekst-4); }
.mapy-telefon-lista { margin: 0; padding: 0; list-style: none; }
.mapy-telefon-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 5px 2px; border-top: 1px solid var(--ramka-2); }
.mapy-telefon-lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapy-telefon-lista li.ty { margin: 0 -4px; padding: 5px 6px; border-radius: 6px; background: var(--niebieski-tlo); color: var(--niebieski-3); font-weight: 600; }
.mapy-telefon-lista li.przerwa { border-top: 0; padding: 0 2px; color: var(--tekst-5); }

/* znaczniki na mapie (divIcon: pozycji nie ustawiamy na samej ikonie, robi to Leaflet) */
.mapy-ikona { background: none; border: 0; }
.mapy-pkt {
  display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%;
  background: #9aa0a6; color: #fff; font: 700 12px/1 var(--font); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  animation: mapy-pop .3s var(--e-wej);
}
.mapy-pkt.z { background: var(--zielony); }
.mapy-pkt.p { background: var(--zolty); color: #202124; }
.mapy-pkt.c { background: var(--czerwony); }
.mapy-pkt.s { background: #5f6368; font-size: 10px; }
.mapy-pkt.b { background: var(--ramka-2); color: var(--tekst-4); }
.mapy-pkt.srodek { box-shadow: 0 0 0 3px var(--niebieski), 0 1px 3px rgba(0, 0, 0, .35); }
.mapy-pkt.czeka { width: 14px; height: 14px; margin: 8px; background: #fff; border: 3px solid #9aa0a6; box-shadow: none; }
.mapy-pkt.teraz { width: 14px; height: 14px; margin: 8px; background: var(--niebieski); border-color: #fff; animation: mapy-puls 1s infinite; }
.mapy-kandydat { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; background: var(--niebieski); color: #fff; font: 700 12px/1 var(--font); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.mapy-pin { display: block; width: 30px; height: 42px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.mapy-pin .tlo { fill: var(--czerwony-2); }
.mapy-pin .srodek { fill: #a50e0e; }
.mapy-pin.wejscie .tlo { fill: var(--niebieski); }
.mapy-pin.wejscie .srodek { fill: #fff; }
/* kropka lokalizacji: telefon klienta, który przechodzi od punktu do punktu (mapy.js: HTML_OSOBA, ruch) */
.mapy-gps { position: relative; width: 24px; height: 24px; }
.mapy-gps-kropka {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%;
  background: var(--niebieski); box-shadow: 0 0 0 7px rgba(26, 115, 232, .2), 0 1px 3px rgba(0, 0, 0, .35); transition: opacity .2s;
}
.mapy-gps[data-ruch="telefon"] .mapy-gps-kropka, .mapy-gps[data-ruch^="gest"] .mapy-gps-kropka { opacity: 0; }
.mapy-gps .mapy-dymek { left: 50%; top: auto; bottom: 32px; transform: translateX(-50%); border-radius: 10px; }
.mapy-dymek {
  position: absolute; left: 40px; top: 0; padding: 4px 9px; border-radius: 10px 10px 10px 2px;
  background: #fff; box-shadow: var(--cien-2); font: 600 12px/1.3 var(--font); color: var(--tekst); white-space: nowrap;
}
.mapy-dymek:empty { display: none; }
.mapy-dymek.wynik-z { background: var(--zielony); color: #fff; }
.mapy-dymek.wynik-p { background: var(--zolty); }
.mapy-dymek.wynik-c { background: var(--czerwony); color: #fff; }
.mapy-dymek.wynik-s { background: #5f6368; color: #fff; }
.mapy-popup { min-width: 180px; font: 13px/1.45 var(--font); }
.mapy-popup strong { display: block; margin-bottom: 4px; font-size: 14px; }
.mapy-popup ol { margin: 4px 0 0; padding-left: 18px; }

@keyframes mapy-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes mapy-puls { 0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, .55); } 100% { box-shadow: 0 0 0 16px rgba(26, 115, 232, 0); } }
@keyframes mapy-wjazd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mapy-pkt, .mapy-dziennik li,   .mapy-postep-pasek { transition: none; }
}

@media (max-width: 959px) {
  .mapy-uklad { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mapy-mapa-kolumna { position: static; }
  .mapy-mapa { height: 340px; min-height: 0; }
  .mapy-wzor-mapa { flex: none; height: 280px; }
  .mapy-wzor-punkty { width: 260px; height: 260px; }
  .mapy-uklad.mapa-gora .mapy-mapa-kolumna { order: -1; }
  .mapy-uklad.mapa-gora .mapy-mapa { height: 52vh; min-height: 300px; }
  .mapy-telefon { display: none; }
}
@media (max-width: 599px) {
  .mapy-wzor-tytul { visibility: hidden; }
  .mapy-szukaj { flex-direction: column; }
  .mapy-zasieg span { padding: 8px 4px; }
  .mapy-kafel-liczba { font-size: 22px; }
  .mapy-etapy { font-size: 12px; }
}