/*
 * visual10 - strona zamówienia (/os/<culture>/<hash>) i strony powrotu z płatności (external).
 * Wzór: kanwa Design C6 („Bilety po zakupie”): zielony baner stanu, bilety jako karty z kodem QR
 * (telefon: przewijane w bok z przyciąganiem do środka, licznik, strzałki i kropki - carousel.js; desktop: siatka),
 * PDF i portfel. Przy terminie „Informacje o wydarzeniu”: okno Portal.dialog (telefon - arkusz od dołu), bez JS <details>.
 */

.p-ord { max-width: 960px; }
.p-ord-note { margin: 12px 0; }

/* stan „opłacone” */
.p-ord-ok {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--p-radius);
  background: var(--p-ok-bg);
}
.p-ord-ok-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--p-r-pill, 999px);
  background: var(--p-ok-dot);
  color: #fff;
}
.p-ord-ok-h { margin: 0; font-size: 21px; line-height: 26px; font-weight: 800; }
/* nagłówek dostaje fokus programowo (po opłaceniu) - to nie jest element do obsługi, bez ramki */
.p-ord-ok-h:focus, #p-ord-h1:focus { outline: none; }
.p-ord-ok-p { margin: 4px 0 0 !important; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.p-ord-ok-nr { margin: 2px 0 0 !important; font-size: 13px; line-height: 18px; color: #2f4a3b; }
@media (min-width: 768px) {
  .p-ord-ok { padding: 20px 24px; }
  .p-ord-ok-h { font-size: 28px; line-height: 34px; }
}

/* bilety terminu */
.p-ord-term { margin-top: 22px; }
/* nagłówek terminu: tytuł i data, „Informacje o wydarzeniu” obok (desktop) albo pod nimi (telefon, nad paskiem biletów) */
.p-ord-term-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.p-ord-term-txt { flex: 1 1 340px; min-width: 0; }
.p-ord-term-h { margin: 0; }
.p-ord-term-when { margin: 2px 0 0 !important; font-size: 14px; line-height: 20px; color: var(--p-muted); }
.p-ord-info-btn { flex: none; gap: 8px; max-width: 100%; }
.p-ord-info-btn .p-ic { stroke-width: 2; }
/* akcje terminu: „Informacje o wydarzeniu” i obok kwadratowa ikona „Dodaj do kalendarza” (calmenu.js) */
.p-ord-term-top { position: relative; }
.p-ord-term-acts { display: flex; align-items: center; gap: 8px; flex: none; max-width: 100%; min-width: 0; }
/* najwęższe telefony (320 px): przycisk „Informacje o wydarzeniu” + ikona kalendarza nie mieszczą się w jednym
   wierszu obok tekstu - akcje pod tekstem i z zawijaniem, inaczej strona przewija się w poziomie */
@media (max-width: 359.98px) {
  .p-ord-term-top { flex-direction: column; align-items: stretch; }
  .p-ord-term-acts { flex-wrap: wrap; }
  .p-ord-info-btn { flex: 1 1 auto; min-width: 0; }
}
.p-ord-cal-btn { width: 44px; min-width: 44px; padding: 0; flex: none; list-style: none; }
.p-ord-cal-btn::-webkit-details-marker { display: none; }
.p-ord-cal-btn .p-ic { stroke-width: 2; }
.p-ord-cal-btn[aria-expanded="true"], .p-ord-cal-nojs[open] > .p-ord-cal-btn { background: var(--p-bg); box-shadow: inset 0 0 0 1.5px var(--p-ink-2); }
/* menu: telefon - pełna szerokość pod wierszem nagłówka (pozycja względem .p-ord-term-top), desktop - pod ikoną do prawej */
.p-ord-cal-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 6px;
  border-radius: var(--p-r-md, 14px);
  background: var(--p-surface);
  box-shadow: var(--p-shadow-lg), 0 0 0 1px var(--p-line);
  list-style: none;
}
.p-ord-cal-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: var(--p-r-sm, 10px);
  color: var(--p-ink) !important;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.p-ord-cal-opt:hover { background: var(--p-bg); }
.p-ord-cal-opt .p-ic { flex: none; }
@media (min-width: 768px) {
  .p-ord-term-top { align-items: center; }
  .p-ord-cal { position: relative; }
  .p-ord-cal-menu { left: auto; right: 0; width: max-content; min-width: 260px; max-width: min(360px, calc(100vw - 32px)); }
}
@media (forced-colors: active) {
  .p-ord-cal-menu { border: 1px solid CanvasText; }
  .p-ord-cal-btn[aria-expanded="true"], .p-ord-cal-nojs[open] > .p-ord-cal-btn { border-width: 2px; }
}
.p-ord-tickets {
  list-style: none;
  margin: 0;
  padding: 2px 2px 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-radius: var(--p-r-lg, 20px);
}
.p-ord-tickets:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.p-ord-ticket { scroll-snap-align: center; scroll-snap-stop: always; min-width: 0; }
@media (max-width: 767.98px) {
  /* telefon, kilka biletów: pasek na całą szerokość ekranu, bilet na środku, sąsiednie widać po obu stronach
     (bilet najwyżej 440 px - telefon poziomo, mały tablet) */
  .p-ord-tickets:not(.is-single) {
    margin: 0 calc(-1 * var(--p-gutter));
    padding: 4px max(28px, calc(50% + var(--p-gutter) - 220px)) 14px;
  }
  /* fokus w obrębie ekranu (pasek sięga krawędzi) */
  .p-ord-tickets:not(.is-single):focus-visible { outline-offset: -3px; }
  /* z carousel.js: pozycję pokazują licznik i kropki - bez paska przewijania i numeru w rogu biletu */
  .is-carousel .p-ord-tickets { scrollbar-width: none; }
  .is-carousel .p-ord-tickets::-webkit-scrollbar { display: none; }
  .is-carousel .p-ord-tk-nr { display: none; }
}
@media (min-width: 768px) {
  .p-ord-tickets {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
}
.p-ord-swipe { margin: 0 !important; text-align: center; }

/* licznik „Bilet 1 z 3” i strzałki nad paskiem, kropki pod nim (carousel.js; bez JS ukryte, desktop - siatka bez nich) */
.p-ord-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 4px; }
.p-ord-count { margin: 0 !important; font-size: 16px; line-height: 22px; font-weight: 700; }
.p-ord-nav { display: flex; gap: 8px; flex: none; }
.p-ord-arrow { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--p-r-pill, 999px); }
.p-ord-arrow .p-ic { stroke-width: 2.2; }
/* podświetlenie tylko z myszą - na dotyku :hover zostaje po stuknięciu i udawałby przycisk nieaktywny */
.p-ord-arrow:hover { background: var(--p-surface); }
@media (hover: hover) {
  .p-ord-arrow:not([aria-disabled="true"]):hover { background: var(--p-bg); }
}
/* nieaktywny na końcu paska: bez wypełnienia, przygaszony (fokus zostaje na przycisku) */
.p-ord-arrow[aria-disabled="true"], .p-ord-arrow[aria-disabled="true"]:hover { background: transparent; opacity: .5; }
.p-ord-dots { display: flex; justify-content: center; gap: 6px; padding: 0 0 2px; }
.p-ord-dots span { width: 8px; height: 8px; border-radius: var(--p-r-pill, 999px); background: #b7bcc5; transition: width .2s, background-color .2s; }
.p-ord-dots span.is-on { width: 22px; background: var(--brand-strong); }
@media (prefers-reduced-motion: reduce) {
  .p-ord-dots span { transition: none; }
}
@media (forced-colors: active) {
  /* bez cienia bilet nie miałby krawędzi - sąsiednie bilety w pasku zlewałyby się z tłem */
  .p-ord-tk { border: 1px solid CanvasText; }
  .p-ord-arrow[aria-disabled="true"] { color: GrayText !important; border-color: GrayText; }
  .p-ord-dots span { background: CanvasText; }
  .p-ord-dots span.is-on { background: Highlight; }
}

.p-ord-tk {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--p-surface);
  border-radius: var(--p-r-lg, 20px);
  box-shadow: var(--p-shadow-tk, 0 2px 10px rgba(21, 22, 26, .08));
  overflow: hidden;
}
.p-ord-tk-band { height: 6px; background: var(--brand); }
.p-ord-tk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px 0; }
.p-ord-tk-name { font-size: 17px; line-height: 22px; font-weight: 700; overflow-wrap: anywhere; }
.p-ord-tk-nr { flex: none; font-size: 13px; color: var(--p-muted); }
.p-ord-qr { display: flex; justify-content: center; padding: 14px 18px 8px; }
.p-ord-qr-svg { display: block; width: 208px; height: 208px; max-width: 100%; }
.p-ord-code { margin: 0 !important; text-align: center; font-size: 16px; letter-spacing: .14em; font-weight: 600; overflow-wrap: anywhere; padding: 0 12px; }
.p-ord-tk-cut { position: relative; height: 28px; margin-top: 12px; }
.p-ord-tk-cut::before, .p-ord-tk-cut::after {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--p-r-pill, 999px);
  background: var(--p-bg);
}
.p-ord-tk-cut::before { left: -14px; }
.p-ord-tk-cut::after { right: -14px; }
.p-ord-tk-cut { background: linear-gradient(var(--p-line-2), var(--p-line-2)) center / calc(100% - 44px) 2px no-repeat; }
/* data | godzina: kolumna godziny na treść, data dostaje resztę - „sob. 10.10.2026” w jednej linii na wąskim bilecie */
/* dwie równe kolumny: długa godzina („w godzinach otwarcia”) zawija się u siebie, zamiast zgniatać datę obok */
.p-ord-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 6px 18px 0; }
.p-ord-kv dt { font-size: 12px; line-height: 16px; color: var(--p-muted); }
.p-ord-kv dd { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: break-word; }
/* data i godzina: łamanie tylko na spacjach, nigdy w środku liczby („18.10.20 / 26”) */
.p-ord-kv dd.p-num { overflow-wrap: normal; word-break: keep-all; }
/* miejsce w całej szerokości - słowa („Nienumerowane”) nie łamią się w środku na wąskim bilecie */
.p-ord-kv .is-wide { grid-column: 1 / -1; }
.p-ord-tk-acts { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 16px 18px 18px; }
.p-ord-wallet { border-radius: var(--p-r-pill, 999px); }

/* informacje o wydarzeniu: bez JS rozwijane pod nagłówkiem terminu, z JS ta sama treść w oknie (order.js) */
.p-ord-info { margin: 0 0 14px; border-radius: var(--p-radius); background: var(--p-surface); box-shadow: var(--p-shadow); }
.p-ord-info-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--p-radius);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.p-ord-info-sum::-webkit-details-marker { display: none; }
.p-ord-info-sum::after {
  content: "";
  width: 9px;
  height: 9px;
  margin: -4px 4px 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.p-ord-info[open] .p-ord-info-sum::after { margin-top: 4px; transform: rotate(-135deg); }
.p-ord-info .p-ord-info-body { padding: 4px 16px 16px; }
.p-ord-info-top { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; }
.p-ord-info-top.no-poster { grid-template-columns: minmax(0, 1fr); }
.p-ord-info-poster { display: block; width: 100%; height: auto; aspect-ratio: 322 / 456; object-fit: cover; border-radius: var(--p-r-sm, 10px); background: var(--p-bg); }
.p-ord-info-dl { display: grid; gap: 12px; margin: 0; }
.p-ord-info-dl dt { font-size: 13px; line-height: 18px; color: var(--p-muted); }
.p-ord-info-dl dd { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.p-ord-info-addr { font-weight: 400; color: var(--p-ink-2); }
.p-ord-info-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.p-ord-info-acts .p-btn { flex: 1 1 200px; }
.p-ord-info-acts .p-btn-quiet { min-height: 52px; }
.p-ord-info-sub { margin: 20px 0 6px; font-size: 17px; line-height: 24px; font-weight: 700; }
.p-ord-info-desc { font-size: 15px; line-height: 23px; color: var(--p-ink-2); overflow-wrap: anywhere; }
.p-ord-info-desc p:last-child { margin-bottom: 0; }
/* okno: nad tytułem „Informacje o wydarzeniu”, na dole „Zamknij” (na telefonie pod kciukiem po przewinięciu opisu) */
.p-ord-info-head { min-width: 0; }
.p-ord-info-kicker { margin: 0 0 2px !important; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--p-muted); }
.p-ord-info-h { overflow-wrap: anywhere; }
.p-ord-info-h:focus { outline: none; }
.p-ord-info-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.p-ord-info-foot { padding: 0 16px 18px; }
@media (min-width: 768px) {
  .p-ord-info-dlg { width: min(640px, calc(100vw - 64px)); }
  .p-ord-info-dlg .p-dialog-head { padding: 22px 24px 14px; }
  .p-ord-info-dlg .p-dialog-body { padding: 0 24px 20px; }
  .p-ord-info-foot { padding: 0 24px 22px; }
  .p-ord-info-h { font-size: 22px; line-height: 28px; }
  .p-ord-info-top { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; }
}
@media (forced-colors: active) {
  .p-ord-info, .p-ord-info-dlg { border: 1px solid CanvasText; }
  .p-ord-info-sum::after { border-color: CanvasText; }
}

/* zwrócony bilet / karnet (zwrot części zamówienia): przygaszony pas, zamiast kodu QR oznaczenie „Zwrócony” i zdanie */
.p-ord-tk.is-returned .p-ord-tk-band { background: var(--p-line-2); }
.p-ord-tk.is-returned .p-ord-tk-name { color: var(--p-ink-2); }
.p-ord-tk-void { display: grid; justify-items: center; gap: 10px; padding: 22px 18px 6px; text-align: center; }
.p-ord-tk-void p { margin: 0 !important; font-size: 15px; line-height: 22px; color: var(--p-ink-2); }
.p-ord-item-ret { vertical-align: middle; margin-left: 4px; }

/* karty podarunkowe kupione w zamówieniu: numer (kod do płatności), wartość, saldo */
.p-ord-gifts { margin-top: 22px; }
.p-ord-gift-list { display: grid; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .p-ord-gift-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.p-ord-gift { padding: 14px 0 16px; border-radius: var(--p-r-md, 14px); background: var(--p-bg); }
.p-ord-gift-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 18px !important; font-weight: 700; overflow-wrap: anywhere; }
.p-ord-gift-kv { margin-top: 10px; }
.p-ord-gift > .p-ord-gift-kv:first-child { margin-top: 0; }
.p-ord-gift-nr { font-size: 20px !important; line-height: 26px !important; letter-spacing: .1em; overflow-wrap: anywhere; }
.p-ord-gift-hint { margin: 12px 0 0 !important; }
@media (forced-colors: active) {
  .p-ord-gift { border: 1px solid CanvasText; }
}

.p-ord-items { margin-top: 22px; }
.p-ord-items ul { margin: 0; padding-left: 20px; }
.p-ord-tip {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0 0 !important;
  padding: 12px 14px;
  border-radius: var(--p-r-md, 14px);
  background: var(--p-surface);
  font-size: 14px;
  line-height: 20px;
}
.p-ord-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.p-ord-foot .p-btn { flex: 1 1 260px; }

/* oczekiwanie na płatność */
.p-ord-state { max-width: 640px; }
.p-ord-status { text-align: center; padding: 8px 0 4px; }
.p-ord-retry-in { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--p-ink-2); font-variant-numeric: tabular-nums; }
.p-ord-status .p-h3 { margin: 12px 0 6px; }
.p-ord-spin {
  width: 44px;
  height: 44px;
  margin: 4px auto 0;
  border-radius: 50%;
  border: 4px solid var(--p-line);
  border-top-color: var(--brand-strong);
  animation: p-ord-spin .9s linear infinite;
}
@keyframes p-ord-spin { to { transform: rotate(360deg); } }
.p-ord-sum { display: grid; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--p-line); }
.p-ord-sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.p-ord-sum dt { color: var(--p-ink-2); }
.p-ord-sum dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.p-ord-retry { margin-top: 14px; }
.p-ord-retry .p-check { font-size: 14px; line-height: 20px; }
.p-ord-retry .p-check a { color: var(--p-ink); font-weight: 600; }
.p-ord-retry .p-error { margin: 0 0 8px !important; }
/* „Zapłać ponownie”: wybór metody (kafle i okna BLIK / karty - summary.css), pod kaflami wskazówka wybranej metody */
.p-ord-methods { margin: 0 0 14px; }
.p-ord-methods > legend { margin-bottom: 8px; }
.p-ord-method-hint { margin: 10px 0 0 !important; }
.p-ord-banks { margin-top: 14px; }
.p-ord-reload { margin: 14px 0 0 !important; text-align: center; }
.p-ord-hint { margin: 12px 0 0 !important; }

/* strony powrotu z płatności */
.p-ord-return { max-width: 640px; }
.p-ord-return .p-btn { min-width: 220px; }

/* sprzedaż zakończona (messages/noRepertoire): „Inne terminy tego wydarzenia” - wiersze-linki z datą, godziną, miejscem */
.p-noterm-src { margin: 0 0 6px !important; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.p-noterm { margin-top: 16px; }
.p-noterm .p-h3 { margin: 0; }
.p-noterm-count { margin: 2px 0 12px !important; font-size: 14px; }
.p-noterm-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.p-noterm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--p-r-md, 14px);
  border: 1.5px solid var(--p-line-2);
  background: var(--p-surface);
  color: var(--p-ink) !important;
  text-decoration: none;
}
.p-noterm-row:hover { border-color: var(--p-ink); }
.p-noterm-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-weight: 700; }
.p-noterm-time { font-weight: 800; }
.p-noterm-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; flex: 1 1 160px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--p-ink-2); overflow-wrap: anywhere; }
.p-noterm-st { flex: none; }
.p-noterm-go { flex: none; margin-left: auto; color: var(--p-muted); }
.p-noterm-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.p-noterm-acts .p-btn { flex: 1 1 240px; }
@media (forced-colors: active) {
  .p-noterm-row { border-color: LinkText; }
}

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

.p-th .p-ord-ok-nr { color: var(--p-ink-2); }
/* wycięcia biletu w kolorze tła strony (w kontekście karty --p-bg to wypełnienie karty) */
.p-th .p-ord-tk-cut::before, .p-th .p-ord-tk-cut::after { background: var(--p-page); }
.p-th .p-ord-dots span { background: var(--p-line-2); }
.p-th .p-ord-dots span.is-on { background: var(--brand-strong); }

/* ---------------------------------------------------------------- druk (Ctrl+P na stronie biletów) */
/* bez nawigacji, paska koszyka, doku i przycisków; białe tło i ciemny tekst także dla ciemnych marek (domyślnie
   przeglądarka nie drukuje teł, a tekst zostawał biały); karuzela telefonu rozwinięta - każdy bilet w całości */
@media print {
  .p-groups, .p-header, .p-dock, .p-cartbar, .p-footer, .p-tools, .p-ord-term-acts, .p-ord-tk-acts, .p-ord-tip,
  .p-ord-sum, .p-ord-retry, .p-ord-reload, .p-ord-nav, .p-ord-dots, .p-ord-ok-p .p-btn, .p-dialog, .p-staffnote { display: none !important; }
  html, body, .p-body { background: #fff !important; color: #000 !important; }
  .p-wrap, .p-wrap * { color: #000 !important; text-shadow: none !important; }
  .p-ord-tickets, .p-ord-tickets.is-carousel { display: block !important; overflow: visible !important; scroll-snap-type: none !important; }
  .p-ord-ticket { width: auto !important; max-width: 100% !important; margin: 0 0 8mm !important; break-inside: avoid; page-break-inside: avoid; }
  .p-ord-tk { border: 1px solid #000 !important; box-shadow: none !important; background: #fff !important; }
  .p-ord-tk-band { background: #000 !important; }
  .p-ord-tk-cut::before, .p-ord-tk-cut::after { display: none !important; }
  .p-ord-qr-svg { max-width: 48mm; }
}