/* Mapa lokali. Kolory pochodzą z ustawień (Jawność cen → Wygląd → Mapy) jako zmienne CSS. */
.jcd-map { --jcd-map-sw: 2px; margin: 1.5em 0; font-size: 15px; line-height: 1.4; }
.jcd-map *, .jcd-map *::before, .jcd-map *::after { box-sizing: border-box; }
.jcd-map-stage { position: relative; line-height: 0; border-radius: 14px; overflow: hidden; }
.jcd-map-img { display: block; width: 100%; height: auto; max-width: none; margin: 0; border-radius: 0; }
.jcd-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jcd-shape { cursor: pointer; stroke-width: var(--jcd-map-sw); vector-effect: non-scaling-stroke; transition: fill-opacity .15s, stroke-width .15s; outline: none; }
.jcd-shape.is-available { fill: var(--jcd-a-fill); stroke: var(--jcd-a-stroke); fill-opacity: var(--jcd-a-op); }
.jcd-shape.is-reserved { fill: var(--jcd-r-fill); stroke: var(--jcd-r-stroke); fill-opacity: var(--jcd-r-op); }
.jcd-shape.is-unavailable { fill: var(--jcd-u-fill); stroke: var(--jcd-u-stroke); fill-opacity: var(--jcd-u-op); }
.jcd-shape.is-available:hover, .jcd-shape.is-available.is-active { fill-opacity: var(--jcd-a-op-h); }
.jcd-shape.is-reserved:hover, .jcd-shape.is-reserved.is-active { fill-opacity: var(--jcd-r-op-h); }
.jcd-shape.is-unavailable:hover, .jcd-shape.is-unavailable.is-active { fill-opacity: var(--jcd-u-op-h); }
.jcd-shape:hover, .jcd-shape.is-active { stroke-width: calc(var(--jcd-map-sw) + 1px); }
.jcd-shape:focus-visible { stroke: #fff; stroke-width: 3px; }

.jcd-tip { position: absolute; z-index: 5; width: max-content; max-width: min(300px, calc(100% - 16px)); line-height: 1.4; pointer-events: auto; }
.jcd-tip[hidden] { display: none; }
.jcd-tip-card { padding: 14px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 28, 25, .18), 0 1px 3px rgba(16, 28, 25, .1); font-variant-numeric: tabular-nums; }
.jcd-tip-card.is-available { background: var(--jcd-a-bg); color: var(--jcd-a-text); --tip-accent: var(--jcd-a-accent); }
.jcd-tip-card.is-reserved { background: var(--jcd-r-bg); color: var(--jcd-r-text); --tip-accent: var(--jcd-r-accent); }
.jcd-tip-card.is-unavailable { background: var(--jcd-u-bg); color: var(--jcd-u-text); --tip-accent: var(--jcd-u-accent); }
.jcd-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jcd-tip-head strong { font-size: 1.05em; }
.jcd-tip-status { font-size: .78em; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--tip-accent); background: color-mix(in srgb, var(--tip-accent) 12%, transparent); white-space: nowrap; }
.jcd-tip-sub { font-size: .85em; opacity: .7; margin-top: 2px; }
.jcd-tip-rows { display: flex; gap: 16px; margin: 10px 0 0; padding: 0; }
.jcd-tip-rows div { display: flex; flex-direction: column; }
.jcd-tip-rows dt { font-size: .72em; text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin: 0; }
.jcd-tip-rows dd { margin: 0; font-weight: 600; }
.jcd-tip-price { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jcd-tip-price b { font-size: 1.25em; color: var(--tip-accent); }
.jcd-tip-price small { opacity: .7; }
.jcd-tip-links { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.jcd-tip-link { color: var(--tip-accent); font-weight: 600; font-size: .9em; }
.jcd-tip-btn { display: inline-block; padding: 7px 12px; border-radius: 9px; background: var(--tip-accent); color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: .9em; }
.jcd-tip-btn:hover { filter: brightness(1.08); }
.jcd-tip-custom a { color: var(--tip-accent); }

.jcd-map-legend { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 10px 0 0; padding: 0; font-size: .9em; }
.jcd-map-legend li { display: flex; align-items: center; gap: 6px; margin: 0; }
.jcd-map-legend span { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }
.jcd-map-legend .is-available span { border-color: var(--jcd-a-stroke); background: color-mix(in srgb, var(--jcd-a-fill) 35%, transparent); }
.jcd-map-legend .is-reserved span { border-color: var(--jcd-r-stroke); background: color-mix(in srgb, var(--jcd-r-fill) 35%, transparent); }
.jcd-map-legend .is-unavailable span { border-color: var(--jcd-u-stroke); background: color-mix(in srgb, var(--jcd-u-fill) 35%, transparent); }
.jcd-map-legend b { opacity: .6; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .jcd-shape { transition: none; } }