/* Mapa parkingów przy Arenie (strefa-kibica.html, #parking; logika: assets/parking-map.js).
   Kolory ze zmiennych strony kibica. Parkingi w sprzedaży — granat klubu, wybrany — czerwony obrys;
   pasek barw na panelu w kolejności biały → niebieski → czerwony. */
.pk{display:grid;gap:16px;margin-top:26px}
@media (min-width:900px){.pk{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:22px}
  .pk:has(> .pk-panel[hidden]){grid-template-columns:minmax(0,1fr)}}      /* bez skryptu — sama mapa */
.pk-figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--wash)}
@media (min-width:640px){.pk-figure{padding:16px}}
.pk-svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;font-family:var(--body)}
.pk-svg text{text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}

/* tło: ulice, rondo, ogród, stadion */
.pk-road{fill:#DCD1D5}
.pk-island,.pk-tree{fill:#C9DEBE}
.pk-street{font-size:13px;font-weight:600;letter-spacing:.04em;fill:#4F3F45}
.pk-svg .pk-small{font-size:12.5px;font-weight:600;fill:var(--muted);text-anchor:start}
.pk-garden{fill:#E4EFDD;stroke:#CFE0C5}
.pk-garden-name{font-size:14px;font-weight:600;fill:#3F6A37}
.pk-stadium{fill:#E9DEE1;stroke:var(--line-2)}
.pk-joint{stroke:var(--line-2);stroke-width:1.5}
.pk-pitch{fill:#BFD9B1}
.pk-lines{fill:none;stroke:#fff;stroke-width:2;opacity:.85}
.pk-arena{font:800 19px var(--display);letter-spacing:.06em;text-transform:uppercase;fill:#355C2D}
.pk-stand{font-size:12.5px;font-weight:600;letter-spacing:.03em;fill:var(--muted)}
.pk-guests{fill:#D6CACE}
.pk-tiny{font-size:11px;font-weight:600;fill:var(--muted)}
.pk-compass{fill:var(--paper);stroke:var(--line-2)}
.pk-needle{fill:var(--ink)}
.pk-north{font:800 15px var(--display);fill:var(--ink)}

/* parkingi poza ogólną sprzedażą */
.pk-off rect{fill:#D9D1D4;stroke:#C7BCC0}
.pk-off-name{font-size:14px;font-weight:700;fill:#5E4E54}

/* parkingi w sprzedaży */
.pk-spot{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pk-spot:focus{outline:none}
.pk-hit{fill:transparent}
.pk-area{fill:var(--navy);stroke:var(--paper);stroke-width:2;transition:fill .18s ease,opacity .18s ease,stroke .18s ease}
.pk-name{font:800 19px var(--display);letter-spacing:.02em;text-transform:uppercase;fill:#fff}
.pk-tag rect{fill:var(--paper)}
.pk-tag text{font:800 17px var(--display);fill:var(--navy)}
.pk-badge{fill:var(--paper)}
.pk-badge-p{font:800 18px var(--display);fill:var(--navy)}
@media (hover:hover) and (pointer:fine){.pk-spot:hover .pk-area{fill:#2A4FBF}}
.pk-spot:focus-visible .pk-area{stroke:var(--accent);stroke-width:4;stroke-dasharray:7 4}
.pk-svg.has-selection .pk-spot:not(.on) .pk-area{opacity:.55}
.pk-spot.on .pk-area{fill:#2A4FBF;stroke:var(--red);stroke-width:4;filter:drop-shadow(0 4px 8px rgba(31,60,152,.45))}

.pk-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}
.pk-key{display:inline-block;width:12px;height:12px;margin-right:7px;border-radius:3px;vertical-align:-1px}
.pk-key-sale{background:var(--navy)}
.pk-key-off{background:#D9D1D4;border:1px solid #C7BCC0}

/* panel informacji — pod mapą na telefonie, obok na komputerze */
.pk-panel{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(58,6,17,.3)}
.pk-hint{margin:0;padding:18px 20px;font-size:14.5px;color:var(--muted)}
.pk-head{position:relative;padding:18px 20px 20px;background:var(--band);color:#fff;border-bottom:3px solid var(--band)}
.pk-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#fff 0 33.34%,var(--navy) 33.34% 66.67%,var(--red) 66.67%)}
.pk-head h3{margin:0;font:800 26px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.pk-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.pk-price b{font:800 36px/1 var(--display)}
.pk-body{display:grid;gap:12px;padding:16px 20px 20px;font-size:15px;color:var(--muted)}
.pk-body p{margin:0}
.pk-buy{min-height:48px;width:100%}
.pk-body .pk-how{font-size:13px}
.pk-in{animation:pk-in .24s ease-out}
@keyframes pk-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* kafelki połączone z mapą */
.tile[data-parking]{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color .15s ease,box-shadow .15s ease,transform .09s ease}
.tile[data-parking]::after{content:"Pokaż na mapie";margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:600;color:var(--navy)}
@media (hover:hover) and (pointer:fine){.tile[data-parking]:hover{border-color:var(--navy)}}
.tile[data-parking]:active{transform:scale(.98)}
.tile[data-parking]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile.pk-on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),0 14px 30px -18px rgba(31,60,152,.65)}
.tile.pk-on::after{content:"Wybrany na mapie";color:var(--red)}

@media (prefers-reduced-motion:reduce){
  .pk-in{animation:none}
  .tile[data-parking]:active{transform:none}
}