/*
 * visual10 - sala numerowana: jedna linia nad planem (przełącznik „Plan sali | Lista miejsc”, krótka podpowiedź dla
 * klawiatury i czytnika, status dostępności), plan sali (SVG, web/portal/js/seats.js) na całą szerokość panelu
 * z legendą pod spodem, pod nimi „Wybrane miejsca” z sumą i „Do kasy”. Obok planu stoją dopiero od 1600 px
 * szerokości okna - wtedy panel wychodzi poza kolumnę treści (term.css), więc plan dalej ma ~1050-1200 px;
 * węższy ekran oddaje całą szerokość planowi (1172 px przy oknie ≥ 1280 px).
 * Kolory: miejsca wolne w kolorze ceny (z konfiguracji sali), wybrane w kolorze marki z obrysem i ✓,
 * zajęte szare z kreskowaniem (stan nie tylko kolorem).
 */

/* ---------------------------------------------------------------- układ panelu miejsc */

.p-seats-main { min-width: 0; }

/* „Wybrane miejsca” pod planem: lista wybranych i podsumowanie z „Do kasy” obok siebie, gdy się mieszczą */
.p-seats-side {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 32px;
  margin-top: 20px;
  border-top: 1px solid var(--p-line);
}
.p-seats-pick { flex: 999 1 420px; min-width: 0; }
.p-seats-buy {
  flex: 1 1 320px;
  min-width: 0;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--p-radius);
  background: var(--p-bg);
}
.p-seats-buy .p-tp-foot { margin-top: 0; padding-top: 0; border-top: 0; }
.p-seats-buy .p-tp-hold { margin-top: 10px !important; }

/* bardzo szeroki ekran: „Wybrane miejsca” w kolumnie obok planu (panel jest wtedy szerszy - term.css) */
@media (min-width: 1600px) {
  .p-tp .p-seats-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0 28px;
    align-items: start;
  }
  .p-seats-side {
    display: block;
    position: sticky;
    top: 16px;
    margin-top: 0;
    padding: 4px 0 0 28px;
    border-top: 0;
    border-left: 1px solid var(--p-line);
  }
  .p-seats-side .p-tp-pickedh { margin-top: 8px !important; }
}

/* okno na telefonie: plan → legenda → wybrane, suma z „Do kasy” przyklejona do dołu okna przez całą treść
   (bez pośrednich pudełek - przyklejenie działa w granicach rodzica) */
.p-tp-dialog .p-seats-side, .p-tp-dialog .p-seats-buy { display: contents; }
.p-tp-dialog .p-seats-buy .p-tp-foot {
  margin: 12px -16px 0;
  padding: 12px 16px 8px;
  border-top: 1px solid var(--p-line);
}
.p-tp-dialog .p-seats-buy .p-tp-hold { margin: 0 !important; padding: 0 0 18px; }
/* niskie ekrany (320×568): plan krótszy, żeby przyklejona stopka „Do podsumowania” nie zasłaniała dołu planu
   i przycisków zoomu (stoją w prawym dolnym rogu planu) */
@media (max-width: 767.98px) and (max-height: 640px) {
  .p-tp-dialog .p-sm-view {
    height: calc(100dvh - 250px);
    max-height: calc(100dvh - 250px);
  }
  /* przyciski zoomu u góry planu i w jednym rzędzie (mniej miejsca) - dół planu bywa pod przyklejoną stopką okna */
  .p-tp-dialog .p-sm-zoom { top: 12px; bottom: auto; flex-direction: row; }
}

/* nagłówek panelu w treści strony sali: tylko dla czytników (tytuł i data są w nagłówku strony) */
@media (min-width: 768px) {
  .p-tp[data-mode="seats"]:not(.is-sheet) .p-tp-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* jedna linia nad planem: przełącznik widoków (segment), podpowiedź, status dostępności (do prawej) */
.p-seats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.p-seg {
  flex: none;
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: var(--p-r-md, 16px);
  background: var(--p-line);
}
.p-body .p-seg button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--p-r-sm, 12px);
  background: transparent;
  color: var(--p-ink);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.p-body .p-seg button[aria-pressed="true"] {
  background: var(--p-surface);
  box-shadow: 0 1px 3px rgba(21, 22, 26, .18), inset 0 -2px 0 var(--brand-strong);
}
/* podpowiedź: widoczna krótka wersja (pełny tekst w dymku title), czytnik dostaje pełny opis (p-sr, aria-describedby) */
.p-seats-help {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0 !important;
  font-size: 13px;
  line-height: 18px;
  color: var(--p-ink-2);
}
.p-seats-help-vis { display: flex; align-items: flex-start; gap: 6px; cursor: help; }
.p-seats-help-vis .p-ic { margin-top: 0; color: var(--p-muted); }
.p-seats-avail { flex: none; margin-left: auto; }

/* ---------------------------------------------------------------- plan sali */

.p-seatmap-box { margin-top: 10px; }
@media (max-width: 767.98px) {
  /* telefon: przełącznik i status w jednej linii (bez ikon w przyciskach), podpowiedź tylko dla czytników -
     plan ma być od razu widoczny; za wąsko (< 375 px) status przechodzi pod przełącznik */
  .p-seats-bar { gap: 8px; margin-bottom: 10px; }
  .p-seg { flex: 1 1 auto; }
  .p-body .p-seg button { flex: 1; justify-content: center; padding: 0 10px; }
  .p-body .p-seg button .p-ic { display: none; }
  .p-seats-help {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .p-seats-avail { margin-left: 0; font-size: 12px; padding: 0 8px; }
}
.p-seatmap-sectors { margin: 0 0 8px !important; font-weight: 600; }
.p-seatmap-back { margin: 0 0 8px; }

/* legenda pod planem (zawsze rozwinięta) */
.p-sm-legendbox { margin: 12px 0 0; }
.p-sm-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.p-sm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px 0 8px;
  border-radius: var(--p-r-pill, 999px);
  background: var(--p-surface);
  box-shadow: inset 0 0 0 1px var(--p-line);
  font-size: 13px;
  line-height: 1.2;
}
.p-sm-chip i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(21, 22, 26, .35);
}
.p-sm-chip.is-taken i {
  background: repeating-linear-gradient(45deg, #e4e6ea 0 3px, #9aa0aa 3px 4.5px);
}
.p-sm-chip.is-mine i {
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--p-ink);
  position: relative;
}
.p-sm-chip.is-mine i::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
/* legenda: miejsce dla osoby na wózku (ikona), miejsce z opisem („i”) - kształt i tekst, nie tylko kolor */
.p-sm-chip.is-wheel i, .p-sm-chip.is-note i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #15161a;
  color: #fff;
  box-shadow: none;
}
.p-sm-chip.is-wheel svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.p-sm-chip.is-wheel svg circle { fill: currentColor; stroke: none; }
.p-sm-chip.is-note i { font: 700 11px/16px Georgia, "Times New Roman", serif; font-style: italic; }
/* cena strefy z ulgami: pod nią mniejszym pismem rodzaje biletu z cenami */
.p-sm-chip.has-sub { flex-basis: 100%; align-items: flex-start; padding-top: 7px; padding-bottom: 7px; border-radius: var(--p-r-md, 14px); }
.p-sm-chip.has-sub i { margin-top: 0; }
.p-sm-chip-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-sm-chip-sub { font-size: 12px; line-height: 16px; color: var(--p-ink-2); }
@media (max-width: 767.98px) {
  .p-sm-legendbox { margin-top: 10px; }
  .p-sm-legend { gap: 6px; }
  .p-sm-chip { min-height: 28px; gap: 6px; padding: 0 10px 0 6px; font-size: 12px; }
}

.p-sm-view {
  position: relative;
  /* wysokość ustawia seats.js według proporcji sali - tu granice: przewinięty plan mieści się w oknie (nad paskiem
     systemu - core.css --p-safe-b; ekspres bez core.css: 0) */
  height: min(calc(100vh - 140px - var(--p-safe-b, 0px)), 900px);
  height: min(calc(100dvh - 140px - var(--p-safe-b, 0px)), 900px);
  min-height: 260px;
  max-height: min(calc(100vh - 140px - var(--p-safe-b, 0px)), 900px);
  max-height: min(calc(100dvh - 140px - var(--p-safe-b, 0px)), 900px);
  border-radius: var(--p-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--p-line);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.p-sm-view.is-dragging { cursor: grabbing; }
.p-tp-dialog .p-sm-view { height: 56vh; min-height: 240px; max-height: 60vh; }
/* szkielet planu przed wczytaniem forSale.json (_v10termPanel.php): proporcje sali z serwera (--p-sm-ar = 1 / (wys./szer.
   × 1,08), PortalSeatPlan) w tych samych granicach co plan - seats.js nadaje narysowanemu planowi dokładnie tę wysokość;
   legenda szkieletu ma te same pozycje (kolory cen dopiero z planu) */
.p-seatmap-host .p-sm-view.p-sm-skel {
  /* szerokość określona (nie auto) - inaczej przeglądarka przenosi max-height przez proporcje na szerokość */
  width: 100%;
  height: auto;
  aspect-ratio: var(--p-sm-ar, 16 / 10);
  cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
  .p-seatmap-host .p-sm-view.p-sm-skel {
    background: linear-gradient(100deg, #fff 30%, #f2f3f5 50%, #fff 70%) 0 0 / 250% 100% #fff;
    animation: p-sm-skel 1.6s linear infinite;
  }
  @keyframes p-sm-skel { from { background-position: 100% 0; } to { background-position: -150% 0; } }
}
.p-sm-skel-legend .p-sm-chip.is-free i { background: var(--p-line); }
.p-sm-svg { display: block; width: 100%; height: 100%; }
.p-sm-image { opacity: .85; }
.p-sm-seat { cursor: pointer; stroke: rgba(21, 22, 26, .45); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.p-sm-seat.is-taken { cursor: not-allowed; stroke: #b6bac2; }
.p-sm-seat.is-mine { fill: var(--brand); stroke: var(--p-ink); stroke-width: 2.5px; }
.p-sm-check { fill: none; stroke: var(--brand-ink); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* miejsce dla osoby na wózku (ikona po przybliżeniu) i miejsce z opisem („i” w rogu) */
.p-sm-wheel { fill: none; stroke: #15161a; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.p-sm-wheel circle { fill: #15161a; stroke: none; }
.p-sm-wheel.is-taken { stroke: #5b616b; }
.p-sm-wheel.is-taken circle { fill: #5b616b; }
.p-sm-info { pointer-events: none; }
.p-sm-info circle { fill: #15161a; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.p-sm-info text { fill: #fff; font-weight: 700; font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.p-sm-nums text { fill: #15161a; font-weight: 700; pointer-events: none; font-family: var(--p-font); }
.p-sm-deco text, .p-sm-sector text { fill: #3e434d; font-weight: 600; font-size: 14px; pointer-events: none; font-family: var(--p-font); }
.p-sm-sector.is-open { cursor: pointer; }
.p-sm-sector.is-open path { stroke: #15161a; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.p-sm-sector.is-open:hover path { stroke-width: 3px; }

.p-sm-tip {
  position: absolute;
  z-index: 3;
  /* szerokość treści, najwyżej 260 px i nie szerzej niż plan - dłuższy opis łamie się w dymku zamiast wychodzić
     poza krawędź sali (plan ma overflow: hidden); seats.js trzyma dymek w granicach planu */
  width: max-content;
  max-width: min(260px, calc(100% - 16px));
  padding: 6px 10px;
  border-radius: var(--p-r-sm, 10px);
  background: var(--p-ink);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  pointer-events: none;
  overflow-wrap: anywhere;
}
/* dymek sektora (widok ogólny sali): nazwa, wolne miejsca, strefy z cenami (kolor jak na planie sektora), pod nimi ulgi,
   „Kliknij, aby wybrać miejsca” - szerszy na listę biletów, w tych samych granicach planu */
.p-sm-tip.is-sector {
  max-width: min(320px, calc(100% - 16px));
  padding: 8px 12px 9px;
  font-weight: 400;
}
.p-sm-tip-h { display: block; font-size: 14px; font-weight: 700; }
.p-sm-tip-st, .p-sm-tip-sub, .p-sm-tip-hint { display: block; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .84); }
.p-sm-tip-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.p-sm-tip-list li { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.p-sm-tip-list li > span { min-width: 0; }
/* kolor strefy z jasnym obrysem - ciemne kolory cen (granat) widać na ciemnym dymku */
.p-sm-tip-list i {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
}
.p-sm-tip-main { display: block; font-weight: 600; }
.p-sm-tip-hint { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .22); }
.p-sm-hint {
  position: absolute;
  left: 8px;
  right: 64px;
  bottom: 8px;
  z-index: 2;
  margin: 0 !important;
  padding: 6px 10px;
  border-radius: var(--p-r-sm, 12px);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 10px rgba(21, 22, 26, .14);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  pointer-events: none;
}
.p-sm-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-radius: var(--p-r-md, 14px);
  background: var(--p-surface);
  box-shadow: 0 4px 16px rgba(21, 22, 26, .16);
  overflow: hidden;
}
.p-body .p-sm-zoom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--p-surface);
  color: var(--p-ink);
  cursor: pointer;
}
.p-body .p-sm-zoom button + button { border-top: 1px solid var(--p-line); }
.p-body .p-sm-zoom .p-sm-zoom-fit { font-size: 12px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--p-ink); }
.p-body .p-sm-zoom button:hover { background: var(--p-bg); }
.p-body .p-sm-zoom button:focus-visible { outline-offset: -3px; }

@media (forced-colors: active) {
  .p-sm-seat.is-mine { fill: Highlight; stroke: CanvasText; }
  .p-sm-check { stroke: HighlightText; }
  .p-sm-wheel { stroke: CanvasText; }
  .p-sm-wheel circle, .p-sm-info circle { fill: CanvasText; }
  .p-sm-info text { fill: Canvas; }
  .p-seg button[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* ---------------------------------------------------------------- kolory strony instytucji (body.p-th, core.css)

   Plan sali jest jak mapa: kolory miejsc (ceny z konfiguracji sali), numery i opisy sektorów są dobrane do jasnego tła,
   więc plan ma jasne tło (--p-map-bg: kolor kart, gdy jest jasny, inaczej biały) i neutralne kolory tekstu skórki. */
.p-th :where(.p-sm-view) {
  --p-ink: #15161a;
  --p-ink-2: #3e434d;
  --p-muted: #5b6170;
  --p-line: #e4e6ea;
  --p-line-2: #d5d8de;
  --p-bg: #f2f3f5;
  --p-on-ink: #ffffff;
  color: #15161a;
  color-scheme: light;
}
.p-th .p-sm-view { background: var(--p-map-bg); }


/* numer i ikona wózka na ciemnym kolorze ceny (seats.js: isDark) - białe */
.p-sm-nums text.is-light { fill: #fff; }
.p-sm-wheel.is-light { stroke: #fff; }
.p-sm-wheel.is-light circle { fill: #fff; }