/*
 * Lokalizacja: mapa i okolica (2026-10-20, filtry i wszystkie miejsca 2026-10-22). Arkusz własny klocka, bo arkusz strony jest budowany z wyprzedzeniem
 * i nowe klasy użyte w sekcji by nie zadziałały. Wszystkie kolory ze zmiennych motywu strony (akcent, tło,
 * szarości); żadnej barwy wpisanej na stałe. Klasy mają przedrostek nbmap-, więc nic nie koliduje z resztą strony.
 */
.nbmap, .nbmap *, .nbmap *::before, .nbmap *::after { box-sizing: border-box; }
.nbmap {
  width: 100%;
  max-width: 2000px;
  margin: 2.5rem auto 0;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
}
.nbmap-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 440px);
  height: clamp(480px, calc(100vh - 7rem), 860px);
  height: clamp(480px, calc(100svh - 7rem), 860px);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  background-color: var(--color-surface-50);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary-950) 10%, transparent);
}
.nbmap-canvas { position: relative; min-width: 0; min-height: 0; background-color: var(--color-surface-100); }
.nbmap-fallback { display: block; width: 100%; height: 100%; border: 0; }
.nbmap-loading, .nbmap-empty {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1.5rem;
  color: var(--color-gray-600); text-align: center;
}
.nbmap-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Panel z listą miejsc */
.nbmap-panel {
  display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; padding: 1rem; overflow: hidden;
  border-left: 1px solid var(--color-gray-200); background-color: var(--color-surface-50);
}
.nbmap-panel-title { margin: 0; color: var(--color-primary-950); font: 700 1.125rem/1.3 var(--font-heading, inherit); }
.nbmap-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.75rem; }
.nbmap-panel-head .nbmap-panel-title { flex: 1 1 100%; }
.nbmap-count { margin: 0; color: var(--color-gray-600); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbmap-scroll { flex: 1 1 auto; min-height: 0; margin: 0 -0.5rem; padding: 0 0.5rem; overflow-y: auto; overscroll-behavior: contain; }
.nbmap-note { margin: 0; color: var(--color-gray-600); line-height: 1.5; }
.nbmap-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.nbmap-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.625rem; border: 1px solid transparent; border-radius: 0.75rem;
}
.nbmap-row[data-nbmap-i] { cursor: pointer; }
.nbmap-row[data-nbmap-i]:hover { background-color: var(--color-surface-100); }
.nbmap-row.is-active { border-color: var(--color-accent-500); background-color: color-mix(in srgb, var(--color-accent-500) 10%, var(--color-surface-50)); }
.nbmap-row:focus-visible { outline: 3px solid var(--color-primary-950); outline-offset: 2px; }
.nbmap-badge {
  display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-accent-500) 12%, var(--color-surface-50)); color: var(--color-accent-600);
}
.nbmap-icon { width: 1.25rem; height: 1.25rem; }
.nbmap-badge.is-food { background-color: var(--color-accent-600); color: var(--color-surface-50); }
.nbmap-badge.is-mall { background-color: var(--color-primary-950); color: var(--color-surface-50); }
.nbmap-name { display: block; color: var(--color-primary-950); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nbmap-meta { display: block; color: var(--color-gray-600); font-size: 0.875rem; line-height: 1.4; }
.nbmap-time { display: grid; justify-items: end; color: var(--color-gray-600); font-size: 0.8125rem; line-height: 1.15; white-space: nowrap; }
.nbmap-time strong { color: var(--color-accent-600); font: 700 1.125rem/1.1 var(--font-heading, inherit); font-variant-numeric: tabular-nums; }

/* Filtry nad mapą: jeden rząd, na wąskim ekranie przewijany w poziomie */
.nbmap-filters {
  display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; margin: 0 0 0.75rem; padding: 0.125rem 0.125rem 0.375rem;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.nbmap-filter {
  flex: none; display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.5rem; padding: 0.375rem 0.625rem 0.375rem 0.75rem; cursor: pointer;
  border: 1px solid var(--color-accent-500); border-radius: 999px; background-color: color-mix(in srgb, var(--color-accent-500) 10%, var(--color-surface-50));
  color: var(--color-primary-950); font: 600 0.875rem/1.2 inherit; font-family: inherit; white-space: nowrap;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.nbmap-filter-icon { display: grid; place-items: center; color: var(--color-accent-600); }
.nbmap-filter-icon svg { width: 1rem; height: 1rem; }
.nbmap-filter-count {
  min-width: 1.375rem; padding: 0.0625rem 0.375rem; border-radius: 999px; background-color: color-mix(in srgb, var(--color-accent-500) 18%, var(--color-surface-50));
  font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: center;
}
.nbmap-filter[aria-pressed="false"] {
  border-style: dashed; border-color: var(--color-gray-300); background-color: var(--color-surface-50); color: var(--color-primary-950); font-weight: 500; opacity: 0.6;
}
/* Nazwa z liczbą i napis „Włącz”/„Wyłącz” dzielą jedną komórkę siatki: szerokość przycisku jest stała, rząd nie skacze */
.nbmap-filter-swap { display: grid; justify-items: center; align-items: center; }
.nbmap-filter-swap > * { grid-area: 1 / 1; }
.nbmap-filter-main { display: inline-flex; align-items: center; gap: 0.4375rem; }
.nbmap-filter-alt { opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .nbmap-filter[aria-pressed="true"]:hover .nbmap-filter-main { opacity: 0; }
  .nbmap-filter[aria-pressed="true"]:hover .nbmap-filter-alt { opacity: 1; }
}
.nbmap-filter[aria-pressed="true"]:focus-visible .nbmap-filter-main { opacity: 0; }
.nbmap-filter[aria-pressed="true"]:focus-visible .nbmap-filter-alt { opacity: 1; }
/* Zachęta do kliknięcia: do pierwszego kliknięcia filtra wyłączone filtry łagodnie pulsują i na przemian pokazują „Włącz” (klasa is-nudge dokłada skrypt) */
.nbmap-filters.is-nudge .nbmap-filter[aria-pressed="false"] { animation: nbmap-filter-pulse 2s ease-in-out infinite; }
.nbmap-filters.is-nudge .nbmap-filter[aria-pressed="false"]:nth-child(3n+2) { animation-delay: -0.65s; }
.nbmap-filters.is-nudge .nbmap-filter[aria-pressed="false"]:nth-child(3n+3) { animation-delay: -1.3s; }
.nbmap-filters.is-nudge .nbmap-filter[aria-pressed="false"] .nbmap-filter-main { animation: nbmap-label-main 5s ease-in-out infinite; }
.nbmap-filters.is-nudge .nbmap-filter[aria-pressed="false"] .nbmap-filter-alt { animation: nbmap-label-alt 5s ease-in-out infinite; }
@keyframes nbmap-filter-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@keyframes nbmap-label-main { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nbmap-label-alt { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.nbmap-filter[aria-pressed="false"] .nbmap-filter-icon { color: var(--color-gray-600); }
.nbmap-filter[aria-pressed="false"]:hover { border-color: var(--color-accent-500); opacity: 0.9; }
/* Zapowiedź wyłączonych grup: chwilowe podświetlenie filtru i półprzezroczyste pinezki grupy (raz na wizytę, patrz skrypt) */
.nbmap-filter[aria-pressed="false"].is-preview {
  opacity: 1; animation: none; border-style: solid; border-color: var(--color-accent-500); background-color: color-mix(in srgb, var(--color-accent-500) 12%, var(--color-surface-50)); color: var(--color-primary-950);
  transform: translateY(-1px); box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary-950) 18%, transparent);
}
.nbmap-filter[aria-pressed="false"].is-preview .nbmap-filter-icon { color: var(--color-accent-600); }
.nbmap-filters-hint { margin: 0 0 0.25rem; color: var(--color-gray-700); font-size: 0.875rem; line-height: 1.4; }
.nbmap-pt.is-preview .nbmap-pin { animation: nbmap-preview 0.65s ease-in-out both; pointer-events: none; }
@keyframes nbmap-preview { 0% { opacity: 0; transform: scale(0.6); } 35%, 65% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } }
.nbmap-filter[aria-pressed="false"] .nbmap-filter-count { background-color: var(--color-surface-100); }
/* Jedzenie i galerie handlowe mają kolory swoich pinezek (jedzenie: akcent, zakupy z galeriami: kolor nagłówków). */
.nbmap-filter.is-food[aria-pressed="true"] { border-color: var(--color-accent-600); background-color: var(--color-accent-600); color: var(--color-surface-50); }
.nbmap-filter.is-shopping[aria-pressed="true"] { border-color: var(--color-primary-950); background-color: var(--color-primary-950); color: var(--color-surface-50); }
.nbmap-filter.is-food[aria-pressed="true"] .nbmap-filter-icon, .nbmap-filter.is-shopping[aria-pressed="true"] .nbmap-filter-icon { color: var(--color-surface-50); }
.nbmap-filter.is-food[aria-pressed="true"] .nbmap-filter-count, .nbmap-filter.is-shopping[aria-pressed="true"] .nbmap-filter-count { background-color: color-mix(in srgb, var(--color-surface-50) 24%, transparent); }
.nbmap-filter:focus-visible, .nbmap-filter-all:focus-visible { outline: 3px solid var(--color-primary-950); outline-offset: 2px; }
.nbmap-filter-all {
  flex: none; margin: 0 -0.5rem 0 auto; min-height: 2.5rem; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.5rem; background: none; cursor: pointer;
  color: var(--color-accent-600); font: 600 0.875rem/1.2 inherit; font-family: inherit; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px;
}

/* Znaczniki na mapie */
.nbmap .nbmap-pt { --s: 34px; background: none; border: 0; width: var(--s) !important; height: var(--s) !important; margin-left: calc(var(--s) / -2) !important; margin-top: calc(var(--s) / -2) !important; }
.nbmap-pin {
  display: grid; width: 100%; height: 100%; place-items: center; border: 2px solid var(--color-accent-600); border-radius: 999px;
  background-color: var(--color-surface-50); color: var(--color-accent-600);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary-950) 35%, transparent);
  transition: transform 0.12s, background-color 0.12s, color 0.12s;
}
.nbmap-pin svg { width: 55%; height: 55%; }
.nbmap-pt:hover .nbmap-pin { transform: scale(1.12); }
.nbmap-pt.is-active .nbmap-pin { background-color: var(--color-accent-600); color: var(--color-surface-50); transform: scale(1.2); }
/* Wyróżnione pinezki: jedzenie w pełnym kolorze akcentu, galerie handlowe w kolorze nagłówków; kolor nie jest jedyną różnicą, bo każda ma też swoją ikonę i większy rozmiar */
.nbmap .nbmap-pt.is-food, .nbmap .nbmap-pt.is-mall { --s: 44px; }
.nbmap-pt.is-food .nbmap-pin { border-color: var(--color-surface-50); background-color: var(--color-accent-600); color: var(--color-surface-50); }
.nbmap-pt.is-mall .nbmap-pin { border-color: var(--color-surface-50); background-color: var(--color-primary-950); color: var(--color-surface-50); }
.nbmap-pt.is-food.is-active .nbmap-pin, .nbmap-pt.is-mall.is-active .nbmap-pin { box-shadow: 0 0 0 3px var(--color-surface-50), 0 0 0 6px var(--color-primary-950); }
.nbmap .nbmap-pt.is-active { --s: 40px !important; }
.nbmap .nbmap-pt.is-food.is-active, .nbmap .nbmap-pt.is-mall.is-active { --s: 48px !important; }
/* Z daleka (przybliżenie 14 i mniej) zwykłe miejsca są kropkami, żeby kilkaset pinezek nie zasłaniało mapy; wyróżnione zostają czytelne */
.nbmap-canvas.is-far .nbmap-pt { --s: 12px; }
.nbmap-canvas.is-far .nbmap-pt .nbmap-pin { border-width: 1.5px; }
.nbmap-canvas.is-far .nbmap-pt:not(.is-food):not(.is-mall) .nbmap-pin svg { display: none; }
.nbmap-canvas.is-far .nbmap-pt.is-food, .nbmap-canvas.is-far .nbmap-pt.is-mall { --s: 28px; }
.nbmap-canvas.is-mid .nbmap-pt { --s: 26px; }
.nbmap-canvas.is-mid .nbmap-pt.is-food, .nbmap-canvas.is-mid .nbmap-pt.is-mall { --s: 36px; }
.nbmap-pt:focus-visible, .nbmap-home:focus-visible { outline: none; }
.nbmap-pt:focus-visible .nbmap-pin, .nbmap-home:focus-visible .nbmap-home-pin { outline: 3px solid var(--color-primary-950); outline-offset: 3px; }
.nbmap .nbmap-home { background: none; border: 0; }
.nbmap-home-pin {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border: 4px solid var(--color-surface-50); border-radius: 999px;
  background-color: var(--color-accent-600);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent-600) 25%, transparent), 0 2px 8px color-mix(in srgb, var(--color-primary-950) 45%, transparent);
}
/* Rozchodząca się fala: inwestycja widoczna od pierwszego spojrzenia, także po przybliżeniu i oddaleniu mapy */
.nbmap-home-pin::before {
  content: ""; position: absolute; inset: -4px; border: 3px solid var(--color-accent-600); border-radius: 999px; pointer-events: none;
  animation: nbmap-home-pulse 2s ease-out infinite;
}
@keyframes nbmap-home-pulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.nbmap-home-pin::after { content: ""; position: absolute; inset: 8px; border-radius: 999px; background-color: var(--color-surface-50); }
.nbmap-home-card {
  position: absolute; z-index: 1; bottom: 26px; left: 0; display: grid; gap: 1px; width: max-content; max-width: 240px; padding: 0.375rem 0.75rem;
  transform: translateX(-50%); border: 1px solid var(--color-gray-200); border-radius: 0.625rem;
  background-color: var(--color-surface-50); color: var(--color-primary-950); line-height: 1.25; text-align: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-950) 25%, transparent);
}
.nbmap-home.is-bottom .nbmap-home-card { top: 26px; bottom: auto; }
.nbmap-home.is-right .nbmap-home-card { top: 0; bottom: auto; left: 26px; transform: translateY(-50%); text-align: left; }
.nbmap-home.is-left .nbmap-home-card { top: 0; bottom: auto; left: auto; right: 26px; transform: translateY(-50%); text-align: right; }
.nbmap-home.is-top-right .nbmap-home-card { bottom: 18px; left: 14px; transform: none; text-align: left; }
.nbmap-home.is-top-left .nbmap-home-card { bottom: 18px; left: auto; right: 14px; transform: none; text-align: right; }
.nbmap-home.is-bottom-right .nbmap-home-card { top: 18px; bottom: auto; left: 14px; transform: none; text-align: left; }
.nbmap-home.is-bottom-left .nbmap-home-card { top: 18px; bottom: auto; left: auto; right: 14px; transform: none; text-align: right; }
.nbmap-home.is-legend .nbmap-home-card { display: none; }
.nbmap-home-card strong, .nbmap-legend strong { color: var(--color-accent-600); font-size: 0.9375rem; }
.nbmap-home-card span, .nbmap-legend span { color: var(--color-gray-700); font-size: 0.8125rem; }
.nbmap .nbmap-legend {
  display: grid; gap: 1px; max-width: min(260px, calc(100% - 20px)); margin: 0 0 12px 10px; padding: 0.375rem 0.75rem; border: 1px solid var(--color-gray-200); border-radius: 0.625rem;
  background-color: var(--color-surface-50); color: var(--color-primary-950); line-height: 1.25;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-950) 25%, transparent);
}
.nbmap .nbmap-legend[hidden] { display: none; }
.nbmap .leaflet-tooltip.nbmap-tip {
  padding: 0.375rem 0.625rem; border: 0; border-radius: 0.5rem; background-color: var(--color-primary-950); color: var(--color-surface-50);
  font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: normal; width: max-content; max-width: 260px; opacity: 1;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary-950) 40%, transparent);
}
.nbmap .leaflet-tooltip-top.nbmap-tip::before { border-top-color: var(--color-primary-950); }
.nbmap-hint {
  position: absolute; right: 0.5rem; top: 0.5rem; z-index: 500; max-width: calc(100% - 5rem); margin: 0; padding: 0.25rem 0.625rem; pointer-events: none;
  border-radius: 999px; background-color: color-mix(in srgb, var(--color-surface-50) 90%, transparent); color: var(--color-gray-700); font-size: 0.75rem;
}
.nbmap-notice {
  position: absolute; left: 50%; top: 0.75rem; z-index: 600; max-width: calc(100% - 6rem); margin: 0; padding: 0.5rem 0.875rem; transform: translateX(-50%);
  border: 1px solid var(--color-warning-500); border-radius: 0.625rem; background-color: var(--color-warning-50); color: var(--color-warning-900); font-size: 0.875rem; text-align: center;
}

/* Nadpisania Leafleta: czcionka, kontrolki i podpis autorów w stylu strony */
.nbmap .leaflet-container { background-color: var(--color-surface-100); font-family: inherit; font-size: 0.8125rem; }
.nbmap .leaflet-container a { color: var(--color-primary-700); }
.nbmap .leaflet-control-attribution { padding: 2px 8px; background-color: color-mix(in srgb, var(--color-surface-50) 88%, transparent); color: var(--color-gray-700); }
.nbmap .leaflet-bar { overflow: hidden; border: 1px solid var(--color-gray-300); border-radius: 0.75rem; box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary-950) 25%, transparent); }
.nbmap .leaflet-bar a, .nbmap .leaflet-touch .leaflet-bar a {
  width: 2.5rem; height: 2.5rem; border-bottom-color: var(--color-gray-200); background-color: var(--color-surface-50); color: var(--color-primary-950); line-height: 2.5rem;
}
.nbmap .leaflet-bar a:hover, .nbmap .leaflet-bar a:focus { background-color: var(--color-surface-100); }
.nbmap .leaflet-bar a:focus-visible { outline: 3px solid var(--color-primary-950); outline-offset: -3px; }
.nbmap .leaflet-bar a.nbmap-reset { display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.nbmap .nbmap-reset svg { display: block; }
.nbmap .leaflet-container:focus-visible { outline: 3px solid var(--color-primary-950); outline-offset: -3px; }

@media (max-width: 899px) {
  .nbmap { margin-top: 1.75rem; }
  .nbmap-frame { display: block; height: auto; }
  .nbmap-canvas { height: clamp(340px, 62vh, 560px); height: clamp(340px, 62svh, 560px); }
  .nbmap-panel { overflow: visible; border-left: 0; border-top: 1px solid var(--color-gray-200); }
  .nbmap-scroll { flex: none; max-height: 22rem; }
}
@media (pointer: coarse) {
  .nbmap-filter, .nbmap-filter-all { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nbmap-pin, .nbmap-filter { transition: none; }
  .nbmap-pt.is-preview .nbmap-pin { animation: none; }
  .nbmap-home-pin::before { display: none; }
  .nbmap-filters.is-nudge .nbmap-filter[aria-pressed="false"], .nbmap-filters.is-nudge .nbmap-filter-main, .nbmap-filters.is-nudge .nbmap-filter-alt { animation: none; }
}
.nbmap-panel-head .nbmap-filter-all { min-height: 0; padding: 0.125rem 0.5rem; font-size: 0.8125rem; }