/*
 * Rezervační rozhraní — mobile-first (zadání §4.3 a NFR).
 *
 * Plán sálu si veze vlastní styly v `mapa.css`; tady je jen obal, kroky,
 * formulář a spodní lišta. Barvy a rozměry sedadel se NEPŘEPISUJÍ — jsou
 * ve sdílených proměnných, aby plán na webu, v rozhraní a v editoru vypadal
 * stejně.
 */

/* `display: flex` přebíjí výchozí `[hidden] { display: none }` prohlížeče —
   skrytá lišta i blok Organizace by zůstaly vidět. Platí pro všechno uvnitř
   rozhraní, i pro samotnou lištu, která je mimo `.frida-rozhrani`. */
.frida-rozhrani [hidden],
.fr-lista[hidden] { display: none !important; }

.frida-rozhrani {
  --fr-ink: #15181e;
  --fr-ink-2: #414855;
  --fr-ink-3: #6e7684;
  --fr-line: #dde2ea;
  --fr-akcent: #2353b2;
  --fr-plocha: #f5f7fa;

  /* Nadpisové písmo webu — tutéž rodinu má motiv na h1–h6 a na všech svých
     nadpisových třídách (`field-gothic-xxcondensed` ve `style.css`). Rozhraní
     si ji nebere přes `inherit` (to by šlo jen po stromu), ale opisem, ať
     krokovník sedí ke zbytku stránky. `sans-serif` na konci je pojistka pro
     případ, že by se kit Typekitu nenačetl (pasti §22). */
  --fr-nadpis: field-gothic-xxcondensed, sans-serif;

  /* Písmo TLAČÍTEK webu. Motiv dává každému `button` `field-gothic` (užší řez
     než nadpisový `-xxcondensed`), verzálky a prostrkání `.08em` — a přesně
     tak vypadají tlačítka na celém webu. Rozhraní si ho dřív u některých
     ovládacích prvků schválně vypínalo (`text-transform: none`), aby je motiv
     nepřebil, jenže tím z nich udělalo cizí formulářové prvky: „Najít místa"
     byl bílý obdélníček s běžným písmem uprostřed webu psaného verzálkami
     (hlášení Toma 21. 9. 2026). Teď se motiv nevypíná, jen opisuje — vzhled
     tak drží i tam, kde má rozhraní vlastní specificitu.
     `sans-serif` na konci je pojistka, kdyby se kit Typekitu nenačetl
     (pasti §22). */
  --fr-tlacitko: field-gothic, sans-serif;

  /* `width:100%` a `min-width:0` schválně: motiv webu dává obsah do flexu,
     takže by se `main` roztáhl na svou `max-width` podle širokého obsahu
     (plán arény má přes 1900 px) a přetekl by z okna. Ověřeno v prohlížeči
     na mobilním rozměru 14. 9. 2026. */
  width: 100%;
  min-width: 0;
  max-width: 56rem;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px 16px 128px;   /* dole místo pro přilepenou lištu */
  color: var(--fr-ink);
}

/* Plán je uvnitř posuvného okna — nesmí tlačit na šířku stránky. */
.frida-rozhrani .fr-usek,
.frida-rozhrani .fr-plan-lista { min-width: 0; max-width: 100%; }

/* ── ukazatel postupu ─────────────────────────────────────────── */

.fr-kroky {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  counter-reset: none;
}
.fr-krok {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 10px;
  border-top: 3px solid var(--fr-line);
  font-size: .82rem;
  color: var(--fr-ink-3);
  min-width: 0;
}
.fr-krok.je-tady { border-top-color: var(--fr-akcent); color: var(--fr-ink); }
.fr-krok.je-hotovy { border-top-color: var(--fr-akcent); color: var(--fr-ink-2); }
.fr-krok-cislo {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fr-line);
  color: var(--fr-ink-2);
  display: grid; place-items: center;
  /* Číslo je odznak, ne nadpis — kondenzované číslice jsou v kolečku 22 px
     nečitelné, takže tady zůstává základní písmo. */
  font-family: inherit;
  font-size: .78rem; font-weight: 700;
}
.fr-krok.je-tady .fr-krok-cislo,
.fr-krok.je-hotovy .fr-krok-cislo { background: var(--fr-akcent); color: #fff; }
/* Názvy kroků čte divák jako nadpisy jednotlivých fází, a tak i vypadají —
   stejné písmo, verzálky a prostrkání jako nadpisy webu (pokyn Toma 16. 9.).
   Kondenzované písmo unese víc textu, proto může být větší než původních
   .82rem, aniž by se čtyři kroky přestaly vejít na řádek. */
.fr-krok-nazev {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fr-nadpis);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* na úzkém displeji stačí čísla — názvy kroků by se zalomily do sloupce */
@media (max-width: 480px) {
  .fr-krok-nazev { display: none; }
  .fr-krok.je-tady .fr-krok-nazev { display: inline; }

  /* Na telefonu má být vidět PLÁN, ne hlavička nad ním. Než se sedadla
     přestala scvrkávat (0.57.0), byl plán tak malý, že se místo vešlo;
     ve skutečné velikosti ukusovala hlavička s krokovníkem, titulkem
     a legendou 40 % displeje a sedadla začínala až pod polovinou obrazovky.
     Nic se neschovává, jen se stahují rozestupy. */
  .fr-kroky { margin-bottom: 12px; }
  .fr-hlavicka { margin-bottom: 12px; padding: 10px 16px; }
  .fr-titul { font-size: 1.25rem; }
  .fr-podtitul { font-size: .8rem; }
  .frida-rozhrani .frida-vst-legenda { margin-bottom: 0; }
  .fr-plan-lista { margin-bottom: 6px; }
  .frida-rozhrani .frida-vst-jeviste { margin-bottom: .6em; }

  /* Legenda a zoom POD plán (0.74.0). Na 390 px zabíraly nad plánem dva řádky
     chipů plus dvě tlačítka, takže první sedadlo začínalo skoro pod okrajem
     obrazovky. Ceny si divák přečte, až ho zajímají; plán potřebuje vidět hned.
     Řeší se pořadím ve flexu, ne přesunem v HTML — pořadí pro čtečku
     i pro Tab zůstává tak, jak dává smysl významově. */
  .frida-rozhrani .fr-usek[data-usek="1"] { display: flex; flex-direction: column; }
  .frida-rozhrani .fr-usek[data-usek="1"] .fr-plan-okno { order: 1; }
  .frida-rozhrani .fr-usek[data-usek="1"] .fr-plan-lista { order: 2; margin: 10px 0 0; }
  .frida-rozhrani .fr-usek[data-usek="1"] .fr-zavreno { order: 3; }
}

/* ── hlavička akce ────────────────────────────────────────────── */

/* Tmavý pruh s kontextem — drží se přes všechny čtyři kroky (0.74.0).
   Dvě věci najednou: divák od kroku 2 pořád vidí, CO kupuje, a nákup přestane
   být bílá krabice bez vztahu k webu. Barva je `--modra-tmava` motivu (#041a21),
   tatáž, kterou má jeviště v plánu — pruh a jeviště si tím odpovídají.
   Přetéká do stran přes odsazení rozhraní (16 px), aby to byl opravdu pruh,
   ne další kartička; na širším plátně se odsazení zvětšuje, proto `-16px`
   drží jen tam, kde se `padding` nemění. */
.fr-hlavicka {
  margin: 0 -16px 16px;
  padding: 14px 16px;
  background: #041a21;
  color: #fff;
}
.fr-titul {
  font-family: var(--fr-nadpis);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem); line-height: 1.15;
  letter-spacing: .01em; text-transform: uppercase;
  margin: 0 0 2px; color: #fff;
}
/* Světlá modrá motivu (`--accent`) na #041a21 = 8,6 : 1; šedá `--fr-ink-2`
   by tu byla nečitelná. */
.fr-podtitul { margin: 0; color: #a9c6e4; font-size: .9rem; }

/* Přepínač jazyka CS / SK (K-01, 28. 9. 2026) — vpravo v pruhu, název se
   kolem něj zalomí. Jen text, žádné vlajky (pravidlo 9: ikony jednobarevné).
   Plocha 28 × 28 px je nad minimem WCAG 2.5.8 (24 px). Specifičnost přebíjí
   obecné `button:not(…)` z motivu. */
.frida-rozhrani .fr-jazyk {
  float: right;
  display: flex; gap: 4px;
  margin: 0 0 4px 12px;
}
.frida-rozhrani .fr-jazyk button {
  min-width: 28px; min-height: 28px;
  margin: 0; padding: 0 6px;
  border: 1px solid rgba(169, 198, 228, .5); border-radius: 4px;
  background: transparent; color: #a9c6e4;
  font-family: inherit; font-size: .75rem; font-weight: 700; line-height: 1;
  letter-spacing: .06em; text-transform: none;
  cursor: pointer;
}
.frida-rozhrani .fr-jazyk button:hover { border-color: #a9c6e4; color: #fff; }
.frida-rozhrani .fr-jazyk button[aria-pressed="true"] { background: #a9c6e4; border-color: #a9c6e4; color: #041a21; }
.frida-rozhrani .fr-jazyk button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fr-stav, .fr-zavreno { color: var(--fr-ink-2); padding: 16px 0; }
.fr-zavreno {
  background: var(--fr-plocha);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  font-size: 1.05rem;
}
.fr-chyba {
  background: #f8e3e3;
  color: #8b1a1a;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: .94rem;
}
.fr-info { background: #e3ebf9; border-radius: 4px; padding: 12px 16px; }

/* ── formulář ─────────────────────────────────────────────────── */

.fr-usek h2 { font-size: 1.3rem; margin: 0 0 6px; }
.fr-registrace { color: var(--fr-ink-3); font-size: .92rem; margin: 0 0 18px; }

.fr-formular { display: flex; flex-direction: column; gap: 14px; }

/* Text a formulář se čtou do zhruba 60–70 znaků. Bez tohohle stropu bylo pole
   pro e-mail na 1440px široké 1052 px — dvojnásobek — a krok 2 vypadal jako
   nedodělaný, i když fungoval. Plánu se strop netýká, ten chce všechnu šířku. */
.frida-rozhrani .fr-usek[data-usek="2"],
.frida-rozhrani .fr-usek[data-usek="3"],
.frida-rozhrani .fr-usek[data-usek="4"] { max-width: 40rem; margin-inline: auto; }
.fr-radek { display: flex; flex-wrap: wrap; gap: 14px; }
.fr-radek > .fr-pole { flex: 1 1 12rem; }
.fr-pole { display: flex; flex-direction: column; gap: 5px; }
.fr-pole label { font-size: .85rem; color: var(--fr-ink-2); }
.fr-nepovinne { color: var(--fr-ink-3); font-weight: 400; }
.fr-pole input {
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--fr-line);
  border-radius: 4px;
  background: #fff;
  color: var(--fr-ink);
  min-width: 0;
}
.fr-pole input:focus-visible { outline: 2px solid var(--fr-akcent); outline-offset: 1px; }
/* Proč chceme telefon (V-07) — drobně pod polem, ne v popisku, ať se řádek
   s Městem nerozjede. */
.fr-pole-proc { font-size: .8rem; line-height: 1.35; color: var(--fr-ink-3); }

.fr-zaskrtnuti { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.fr-zaskrtnuti input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.fr-organizace { display: flex; flex-direction: column; gap: 14px; }

/* ── přilepená lišta ──────────────────────────────────────────── */

.fr-lista {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #fff;
  border-top: 1px solid var(--fr-line);
  box-shadow: 0 -2px 16px rgba(21, 24, 30, .08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.fr-lista-obsah { min-width: 0; flex: 1 1 14rem; }
.fr-lista-obsah p { margin: 0; }
.fr-pocet { font-weight: 600; font-size: .95rem; }
.fr-sedadla {
  color: var(--fr-ink-3);
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-casovac { color: #b4531a; font-size: .84rem; font-variant-numeric: tabular-nums; }

.fr-lista-akce { display: flex; align-items: center; gap: 12px; flex: none; }
.fr-cena { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fr-dal, .fr-zpet {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}
/* Barva textu potřebuje `!important` a dvojitý selektor: motiv webu vnucuje
   každému `button` `color: var(--base-3) !important`, tedy BÍLOU. Bez toho
   svítilo neaktivní „Pokračovat" bíle na světle šedé — poměr **1,3 : 1**,
   prakticky neviditelné (změřeno na stagingu 16. 9. 2026) — a „Zpět" by bylo
   bílé na bílém. `!important` je jen tam, kde ho má i motiv. */
.frida-rozhrani .fr-dal { background: var(--fr-akcent); color: #fff !important; }
/* Neaktivní tlačítko musí zůstat čitelné: že je vypnuté, říká vybledlý podklad
   bez akcentu, ne nečitelný text. `--fr-ink-3` dávalo proti `--fr-line` jen
   3,9 : 1, proto o stupeň tmavší `--fr-ink-2` (7,4 : 1). */
.frida-rozhrani .fr-dal[disabled] { background: var(--fr-line); color: var(--fr-ink-2) !important; cursor: default; }
.frida-rozhrani .fr-zpet { background: #fff; border-color: var(--fr-line); color: var(--fr-ink-2) !important; }
.fr-dal:focus-visible, .fr-zpet:focus-visible { outline: 2px solid var(--fr-akcent); outline-offset: 2px; }

/* Odkaz zpátky na představení pod hláškou „Hotovo" — `/vstupenky/<id>/` je
   krok v nákupu, ne místo, kde má divák skončit. */
.fr-zpet-odkaz {
  display: inline-block; margin-top: 8px;
  color: var(--fr-akcent); font-weight: 600; text-decoration: none;
}
.fr-zpet-odkaz:hover { text-decoration: underline; }

/* ── popisek sedadla ──────────────────────────────────────────────
   Vzhled je schválně stejný jako popisek v administraci (`.frida-tip`
   ve `sprava.css`) — jde o tutéž věc a obsluha má vidět totéž co divák.
   Vlastní třída proto, že oba stylopisy se nikdy nenačtou spolu a mít
   dvě definice jednoho jména by byla past.

   Visí na `<body>`, takže musí být nad vrstvou s nákupem (`z-index: 100000`
   ve `vrstva.css`) — jinak by ho vrstva překryla přesně tam, kde je plán.
   `pointer-events: none` je povinné: popisek stojí nad sedadlem a bez toho
   by mu bral kliky. */
.fr-tip {
  position: fixed; z-index: 100001; transform: translate(-50%, -100%);
  max-width: 20rem; padding: .45rem .6rem;
  border-radius: 6px; background: #10161f; color: #fff;
  font-size: .8rem; line-height: 1.45; pointer-events: none;
  box-shadow: 0 6px 18px rgba(16, 22, 31, .3);
}
.fr-tip[hidden] { display: none !important; }
/* U prstu popisek nemíří dolů na sedadlo, ale do strany — posun si počítá JS,
   tady jen ať se neroztahuje přes půl displeje. */
.fr-tip.je-u-prstu { max-width: min(20rem, calc(100vw - 5rem)); }
.fr-tip b { display: block; }
.fr-tip-radek { display: block; color: rgba(255, 255, 255, .78); }

/* Popisek s tlačítkem musí jít chytit myší. Jinak má `pointer-events: none`
   schválně — visí nad plánem a jinak by bral kliky sedadlům pod sebou. */
.fr-tip.je-s-akci { pointer-events: auto; }

/* **Můstek přes mezeru nad sedadlem.** Popisek stojí 8 px nad sedadlem a cesta
   myší k němu tedy vede přes plán — `pointerout` ho zhasl dřív, než k němu
   kurzor došel („zmizí dřív, než k němu stihnu myší dojet", Tom 21. 9. 2026).
   Neviditelný pruh nad i pod popiskem tu mezeru překlene: kurzor z něj
   technicky nevyjede, protože pseudoprvek patří pořád popisku.

   Nad i pod schválně — u horního okraje okna se popisek překlápí pod sedadlo
   a mezera je pak na druhé straně. */
.fr-tip.je-s-akci::before,
.fr-tip.je-s-akci::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
}
.fr-tip.je-s-akci::before { bottom: 100%; }
.fr-tip.je-s-akci::after { top: 100%; }
/* Popisek visí na `<body>`, ne uvnitř `.frida-rozhrani` — motiv webu se k němu
   proto dostane přes holé `button` a vnutí mu `padding: 17px 25px !important`
   (54 px vysoké tlačítko v popisku, měřeno 21. 9. 2026). Odsazení a písmo si
   tedy bereme zpátky taky s `!important`; verzálky v `field-gothic` naopak
   necháváme, tak mluví tlačítka na celém webu. */
.fr-tip .fr-tip-tl {
  display: block; width: 100%; margin: .5rem 0 0;
  font-size: .72rem !important; letter-spacing: .06em; line-height: 1;
  padding: .55rem .7rem !important; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px;
  background: transparent !important; color: #fff !important;
}
.fr-tip .fr-tip-tl:hover { background: rgba(255, 255, 255, .14); }
.fr-tip .fr-tip-tl:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Popisek je pomůcka navíc; kdo si vypnul animace, o nic nepřijde. */
@media (prefers-reduced-motion: no-preference) {
  .fr-tip { animation: fr-tip-do .12s ease-out; }
  @keyframes fr-tip-do { from { opacity: 0; } to { opacity: 1; } }
}

/* Plán se na mobilu posouvá; rozměry sedadel řídí sdílené proměnné.

   STÍN U OKRAJE (0.74.0): na 390 px se boční balkony do plánu nevejdou a plán
   jde posunout — ale nebylo to poznat a divák o ně přišel. Řeší to dva páry
   gradientů: bílé „víko" jede s obsahem (`local`), tmavý stín stojí (`scroll`),
   takže se stín ukáže JEN na té straně, kde ještě něco je. Bez řádky JS a bez
   měření, které by se muselo opakovat při každém zoomu. */
.frida-rozhrani .frida-vst-plan-posuv {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;   /* ať se kontejner nikdy nenafoukne obsahem */
}

/* Stín musí ležet NAD sedadly. Klasický trik s gradienty v `background`
   posuvu vypadal v testu správně (čtyři gradienty na místě), ale na telefonu
   nebyl vidět vůbec: pozadí se kreslí POD obsah a krajní sedadla ho zakryla.
   Proto překryv na obalu a třídy z JS, které vědí, na kterou stranu ještě
   něco je. `pointer-events: none`, ať to nebere kliky sedadlu pod sebou. */
.fr-plan-okno { position: relative; }
.fr-plan-okno::before,
.fr-plan-okno::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 26px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease-out;
}
.fr-plan-okno::before {
  left: 0;
  background: linear-gradient(to right, rgba(4, 26, 33, .22), rgba(4, 26, 33, 0));
}
.fr-plan-okno::after {
  right: 0;
  background: linear-gradient(to left, rgba(4, 26, 33, .22), rgba(4, 26, 33, 0));
}
.fr-plan-okno.je-vlevo::before,
.fr-plan-okno.je-vpravo::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fr-plan-okno::before, .fr-plan-okno::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frida-rozhrani * { scroll-behavior: auto !important; }
}

/* ── plán ─────────────────────────────────────────────────────── */

.fr-plan-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.fr-zoom { display: flex; gap: 6px; flex: none; }
/* Motiv webu dělá z každého `button` svoje velké CTA (verzálky, padding,
   `color: var(--base-3) !important`). Tlačítka zoomu pak byla na bílém podkladu
   prázdná — bílá na bílé (doloženo na stagingu 16. 9. ve vrstvě na detailu
   představení). Dvě třídy proti jedné značce a `!important` jen tam, kde ho má
   i motiv. Stejný důvod jako u sedadel níž. */
.frida-rozhrani .fr-zoom button {
  font: inherit !important;
  line-height: 1;
  /* Stejná výška a stejné ostré rohy jako nabídka počtu a „Najít místa" vedle:
     je to jedna lišta a nemá vypadat jako tři různé aplikace. */
  width: 41px; height: 41px;
  padding: 0 !important;
  letter-spacing: normal;
  text-transform: none;
  border: 1px solid var(--vst-tmava);
  border-radius: 0;
  background: #fff;
  color: var(--vst-tmava) !important;
  cursor: pointer;
}
.frida-rozhrani .fr-zoom button[disabled] { border-color: var(--fr-line); color: var(--fr-line) !important; cursor: default; }
.frida-rozhrani .fr-zoom button:focus-visible { outline: 2px solid var(--fr-akcent); outline-offset: 2px; }

/* Motiv webu si stylizuje `button` a přebil by barvu sedadla (na zkušebním
   motivu z nich byly šedé obdélníky). Dvě třídy tedy proti jedné značce. */
/* Barvy sedadel na webu — JEDINÉ místo, kde jsou. `mapa.css` se načítá dřív,
   takže by tu stejně prohrál; proměnné stavů si ale bere odtamtud, aby podle
   nich mohla kreslit i legenda. */
.frida-rozhrani .frida-vst-sedadlo {
  background: var(--barva, #6b7280);
  /* Barvu čísla dopočítá `rozhrani.js` podle podkladu (`barvaTextu`) — na
     světlém pásmu vyjde tmavá, na tmavém bílá. `!important` je povinné: motiv
     webu má na tlačítka `color: var(--base-3) !important`, tedy natvrdo bílou,
     a bez něj svítí číslo bíle i na světle modrém sedadle (3,06 : 1).
     Platí i pro stavy níž — jinak by je tenhle řádek přebil. */
  color: var(--text, #fff) !important;
  border: 0;
}
/* Číslo na VOLNÉM sedadle je bílé. Přebíjí to `barvaTextu()` z
   `plan-spolecne.js`, která podle světlosti podkladu volí tmavou.

   ROZHODNUTO, neotvírat znovu: Tom si to vyžádal 16. 9. 2026, dostal obě
   varianty vedle sebe i s naměřenými čísly a bílou potvrdil. Není to omyl
   ani nedodělek.
   POZOR, je to rozhodnutí proti měření: na dnešní modré pásmo (#4e98de) má
   bílá **3,06 : 1**, zatímco tmavá měla 5,85 : 1. WCAG AA chce u drobného
   textu 4,5 : 1. Bílá vyjde nad 4,5 : 1 teprve u pásem tmavších než zhruba
   #4a4a4a — u světlých pásem je to horší, ne lepší.
   V administraci zůstává výpočet beze změny. */
.frida-rozhrani .frida-vst-sedadlo[data-stav="volne"] { color: #fff !important; }

/* Obsazené místo se nesmí plést s volným — a odstínem samotným to uhlídat
   NEJDE: volné sedadlo má barvu cenového pásma, kterou si Frída volí sama,
   takže žádná jedna šedá nemá 3 : 1 proti všem možným pásmům zároveň
   (16. 9. 2026 vycházelo volné ↔ obsazené na 1,90 : 1). Rozlišují ho proto
   dva signály, které na barvě pásma nezávisí: skoro prázdná výplň, takže
   působí jako díra v řadě, a zřetelný tmavý obrys — 4,5 : 1 proti podkladu.
   Stejná úvaha jako u blokací v administraci: „mimo prodej" je stav, ne barva.
   Číslo se schválně neukazuje, sedadlo se nedá koupit. */
.frida-rozhrani .frida-vst-sedadlo[data-stav="nedostupne"],
.frida-rozhrani .frida-vst-sedadlo[disabled] {
  background: var(--vst-obsazeno); color: transparent !important;
  border: 1px solid var(--vst-obsazeno-obrys); cursor: not-allowed;
}
/* Vybrané sedadlo má proti volnému poměr jen 2 : 1 — zelená a modrá se liší
   odstínem, ne světlostí, takže barvou samotnou to divák nerozezná a při
   barvosleposti vůbec. Bílý prstenec uvnitř to řešil od 0.57.x; od 0.74.0 nese
   sedadlo navíc **fajfku** — signál, který se dá pojmenovat („zaškrtnuté je
   vaše"), přečte se i na 24 px a stejně ho ukazuje legenda. Prstenec zůstává:
   odděluje sedadlo od sousedů v téže barvě.
   Díky tomu barva u vybraného sedadla nenese význam sama — a zelená se mohla
   vrátit do palety cenových pásem, odkud ji 16. 9. vytlačila právě tahle
   kolize (`docs/pasti.md` §101).
   Číslo se schovává, ne přepisuje: `::after` kreslí fajfku přes celou plochu,
   takže se nemíchá s textem uvnitř tlačítka. */
.frida-rozhrani .frida-vst-sedadlo[data-stav="moje"] {
  position: relative;
  background: var(--vst-moje); color: transparent !important;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--vst-moje);
}
.frida-rozhrani .frida-vst-sedadlo[data-stav="moje"]::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15em; font-weight: 700; line-height: 1;
}

/* „Vyberte mi místa" — nejrychlejší cesta k nákupu pro toho, kdo do plánu
   klikat nechce.

   **Je to NABÍDKA nad plánem, ne ovladač v liště** (pokyn Toma 21. 9. 2026:
   „klient si toho vůbec nevšiml"). Do 0.110.23 to byla trojice popisek +
   nabídka + tlačítko v jednom řádku s legendou a zoomem: na desktopu měla
   stejnou váhu jako výzdoba a na mobilu ležela **pod plánem**, kam divák
   doroluje, až když si vybral sám. Tedy přesně tam a tehdy, kdy už je to
   k ničemu.

   Co se změnilo: vlastní blok s podbarvením, věta, která říká co se stane
   a proč to chtít, a místo nad plánem — na mobilu i na desktopu. Podbarvení
   je `--fr-plocha-info`, táž světlá modrá jako `.fr-info`; je to nabídka,
   ne varování, takže žádný rámeček ani vykřičník. */
.frida-rozhrani .fr-navrh {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
  margin: 0 0 14px; padding: 14px 16px;
  background: #e3ebf9;
}
.frida-rozhrani .fr-navrh[hidden] { display: none; }
.frida-rozhrani .fr-navrh-text {
  margin: 0; min-width: 0; flex: 1 1 18rem;
  font-size: .95rem; line-height: 1.45; color: var(--fr-ink);
}
.frida-rozhrani .fr-navrh-ovladani { display: flex; align-items: center; gap: 10px; flex: none; }

/* Popisek nabídky nese větu vedle, do očí patří jen ovládání. Pro čtečku
   ale zůstat MUSÍ — je to `<label for>` té nabídky. */
.frida-rozhrani .fr-navrh-popis {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Společný tvar pro nabídku počtu i pro tlačítko — aby seděly na stejné
   účaří a měly stejnou výšku, musí mít stejné písmo i odsazení. */
.frida-rozhrani .fr-navrh-pocet,
.frida-rozhrani .fr-navrh .fr-navrh-tl.fr-navrh-tl {
  font-family: var(--fr-tlacitko);
  font-size: .95rem; font-weight: 400; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--vst-tmava);
  border-radius: 0;
  cursor: pointer;
}

.frida-rozhrani .fr-navrh-pocet {
  /* Systémový vzhled `<select>` pryč: zaoblené rohy a barevná šipka z OS byly
     na téhle stránce to jediné, co nevypadalo jako web. Šipka je vlastní,
     jednobarevná a plochá (pravidlo 9 v CLAUDE.md) — kreslí se na pozadí,
     takže nepotřebuje obal navíc. */
  appearance: none; -webkit-appearance: none;
  background-color: var(--vst-bila);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23041a21' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
  color: var(--vst-tmava);
}

/* Motiv webu si stylizuje `button` a přebil by i tohle — dvě třídy proti
   jedné značce, stejně jako u sedadel (pasti §92). Barvy potřebují
   `!important` jen proto, že ho má i motiv (`color: var(--base-3)`). */
.frida-rozhrani .fr-navrh .fr-navrh-tl.fr-navrh-tl {
  /* `!important` u odsazení: motiv webu vnucuje každému `button`
     `padding: 17px 25px !important` (velké CTA na stránce). Bez tohohle bylo
     tlačítko o deset pixelů vyšší než nabídka počtu vedle a lišta se rozjela.
     `!important` je jen tam, kde ho má i motiv. */
  padding: 12px 18px !important;
  background: var(--vst-tmava) !important; color: var(--vst-bila) !important;
  transition: opacity .15s;
}
.frida-rozhrani .fr-navrh .fr-navrh-tl.fr-navrh-tl:hover:not(:disabled) { opacity: .85; }
.frida-rozhrani .fr-navrh .fr-navrh-tl.fr-navrh-tl:disabled { opacity: .5; cursor: default; }
.frida-rozhrani .fr-navrh-pocet:focus-visible,
.frida-rozhrani .fr-navrh .fr-navrh-tl.fr-navrh-tl:focus-visible {
  outline: 2px solid var(--fr-akcent); outline-offset: 2px;
}

/* Na telefonu pod sebe: věta, pak ovládání přes celou šířku. Nabídka počtu
   se roztáhne do zbylého místa, tlačítko si drží svou. */
@media (max-width: 480px) {
  .frida-rozhrani .fr-navrh { display: block; padding: 12px 14px; }
  .frida-rozhrani .fr-navrh-text { margin: 0 0 10px; }
  .frida-rozhrani .fr-navrh-ovladani { display: flex; }
  .frida-rozhrani .fr-navrh-pocet { flex: 1 1 auto; min-width: 0; }
  .frida-rozhrani .fr-navrh .fr-navrh-tl.fr-navrh-tl { flex: none; }
}

/* ── přesun celého výběru („Přesunout jinam") ─────────────────
   Pokladna to umí od začátku („Přesadit"); tohle je totéž očima diváka
   (pokyn Toma 21. 9. 2026). Klepnutím se vybere cíl, náhled ukáže, kam
   skupina dosedne — a když se tam nevejde, řekne to a nestane se nic. */
/* Věta stojí v LIŠTĚ, pod výpisem vybraných sedadel. Nad plánem byla daleko
   od místa, kam se míří, a hlavně: od chvíle, kdy se cíl přebarvuje zeleně,
   už je to jen doplněk, ne hlavní sdělení. V liště je vidět pořád, nezabírá
   plánu výšku a stojí hned vedle „Zrušit přesun". */
.frida-rozhrani .fr-presun {
  margin: 2px 0 0;
  font-size: .84rem; font-weight: 600; color: var(--fr-ink-2);
}
.frida-rozhrani .fr-presun[data-stav="ok"] { color: #1f7a3d; }
.frida-rozhrani .fr-presun[data-stav="nevejde"] { color: #8b1a1a; }

/* V režimu přesunu je plán CÍLOVNÍK, ne seznam sedadel k odklikání — ať je
   to poznat i kurzorem. Obsazená sedadla zůstávají neklikatelná sama od sebe. */
.frida-rozhrani.je-presun .frida-vst-sedadlo:not(:disabled) { cursor: crosshair; }

/* **Samotný prstenec NESTAČÍ.** Zkusil jsem ho a Tom ho 21. 9. 2026 neviděl
   („to zvýraznění přesunu není prakticky vidět") — tenký obrys na modrém
   sedadle zanikne. Pokladna si přitom touž zkušeností prošla už 14. 9.
   s Martinem a vyřešila ji takhle: **cíl se přebarví a zbytek plánu ztlumí.**
   Přebírám to i s hodnotami, ať se ty dva plány chovají stejně.

   Výplň se tu tedy PŘEBÍJÍ, ačkoli jinde drží cenové pásmo. Je to v pořádku:
   je to odpověď na rozdělaný úkon, trvá jen po dobu míření a jakmile divák
   klepne nebo přesun zruší, barvy jsou zpátky. */
.frida-rozhrani.je-presun .frida-vst-sedadlo { opacity: .45; }
.frida-rozhrani.je-presun .frida-vst-sedadlo.je-presun-cil,
.frida-rozhrani.je-presun .frida-vst-sedadlo.je-presun-nevejde { opacity: 1; }
/* Odkud se stěhuje — zřetelně ustupuje do pozadí, ať je vidět, že se to místo
   opouští. */
.frida-rozhrani.je-presun .frida-vst-sedadlo.je-presun-zdroj { opacity: .22; }

.frida-rozhrani.je-presun .frida-vst-sedadlo.je-presun-cil {
  background: #1f7a3d !important; color: #fff !important;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #1f7a3d;
}
.frida-rozhrani.je-presun .frida-vst-sedadlo.je-presun-nevejde {
  background: #8b1a1a !important; color: #fff !important;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #8b1a1a;
}

/* Tlačítko v liště. Vedle „Pokračovat" má být zřetelně druhořadé — obrys,
   ne výplň —, jinak by si s ním divák pletl hlavní krok. */
.frida-rozhrani .fr-lista .fr-presun-tl.fr-presun-tl {
  font: inherit; font-weight: 600;
  padding: 11px 16px; cursor: pointer;
  border: 1px solid var(--fr-line); border-radius: 4px;
  background: #fff !important; color: var(--fr-ink-2) !important;
}
.frida-rozhrani .fr-lista .fr-presun-tl[hidden] { display: none !important; }

/* **Na myši tlačítko v liště NENÍ** — tam se přesun nabízí v popisku nad
   vybraným sedadlem, tedy tam, kde divák zrovna je (pokyn Toma 21. 9. 2026:
   „to tlačítko je nepraktické"). Zůstává jediné, k čemu je na myši potřeba:
   zrušit rozdělaný přesun.

   **Na dotyku zůstává**, protože hover na telefonu neexistuje: tapnutí na
   vlastní sedadlo ho rovnou odznačí, takže by se k přesunu nedalo dostat
   vůbec. `@media (hover: hover)` tohle rozlišuje spolehlivěji než hádání
   podle šířky okna. */
@media (hover: hover) and (pointer: fine) {
  .frida-rozhrani:not(.je-presun) .fr-lista .fr-presun-tl.fr-presun-tl {
    display: none !important;
  }
}
.frida-rozhrani.je-presun .fr-lista .fr-presun-tl.fr-presun-tl {
  border-color: var(--fr-akcent); color: var(--fr-akcent) !important;
}

/* ── okno s otázkou („Budete sedět zvlášť") ──────────────────────
   Proužek nad plánem se dal přehlédnout: je kousek od místa, kam se divák
   v tu chvíli dívá, vypadá jako chyba, a když ho minul, jen nechápal, proč
   mu další sedadla nejdou vybrat (hlášení Toma 21. 9. 2026). Okno práci
   zastaví, zeptá se a nabídne obě odpovědi.

   `.fr-otazka[hidden]` se tu NEŘEŠÍ: `<dialog>` schovává prohlížeč sám
   přes `:not([open])`, a pravidlo `.frida-rozhrani [hidden]` výš na něj
   nedosáhne, protože okno je v horní vrstvě. */
.frida-rozhrani .fr-otazka {
  /* 32 rem schválně: na užší okno se „Ano, chceme sedět zvlášť" zlomí
     doprostřed a dvě tlačítka vedle sebe pak vypadají jako čtyři řádky. */
  width: min(32rem, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 24px;
  border: 0;
  border-radius: 8px;
  background: var(--vst-bila, #fff);
  color: var(--fr-ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.frida-rozhrani .fr-otazka::backdrop { background: rgba(10, 14, 20, .55); }
.frida-rozhrani .fr-otazka-nadpis {
  font-family: var(--fr-nadpis);
  font-size: 1.5rem;
  margin: 0 0 10px;
}
.frida-rozhrani .fr-otazka-text { margin: 0 0 20px; color: var(--fr-ink-2); }

/* Odpovědi pod sebou: na mobilu se dvě tlačítka vedle sebe nevejdou, aniž
   by se text zlomil doprostřed slova. Hlavní odpověď je nahoře. */
.frida-rozhrani .fr-otazka-tlacitka { display: flex; flex-direction: column-reverse; gap: 8px; }

/* Odpovědi mluví stejně jako tlačítka webu — verzálky v `field-gothic`,
   prostrkání `.08em`, ostré rohy. Dvě třídy proti jedné značce (motiv si
   stylizuje každý `button`, pasti §92) a `!important` u odsazení a barev
   jen tam, kde ho má i motiv. */
.frida-rozhrani .fr-otazka .fr-otazka-ano.fr-otazka-ano,
.frida-rozhrani .fr-otazka .fr-otazka-ne.fr-otazka-ne {
  font-family: var(--fr-tlacitko);
  font-size: 1rem; font-weight: 400; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  width: 100%; padding: 15px 20px !important; cursor: pointer;
  border: 1px solid var(--vst-tmava); border-radius: 0;
}
.frida-rozhrani .fr-otazka .fr-otazka-ano.fr-otazka-ano {
  background: var(--vst-tmava) !important; color: var(--vst-bila) !important;
}
.frida-rozhrani .fr-otazka .fr-otazka-ne.fr-otazka-ne {
  background: var(--vst-bila) !important; color: var(--vst-tmava) !important;
}

/* Vedle sebe až tam, kde se obě odpovědi vejdou na JEDEN řádek. Ve
   verzálkách s prostrkáním jsou širší, než se čeká — na 30 rem se lámaly. */
@media (min-width: 34rem) {
  .frida-rozhrani .fr-otazka-tlacitka { flex-direction: row; justify-content: flex-end; }
  .frida-rozhrani .fr-otazka .fr-otazka-ano.fr-otazka-ano,
  .frida-rozhrani .fr-otazka .fr-otazka-ne.fr-otazka-ne { width: auto; }
}

/* Místo, které by výběrem zůstalo osamocené (pravidlo z londýnských divadel,
   podnět Toma 16. 9. 2026). Je to ODPOVĚĎ NA KLIK, ne stav sedadla — proto
   obrys a ne výplň: výplň drží cenové pásmo a to se nesmí přebít. Po šesti
   vteřinách zmizí sám.

   Jednobarevný obrys, žádná ikona (pravidlo 9 v CLAUDE.md). Okrová je barva
   „pozor" napříč celým systémem. */
.frida-rozhrani .frida-vst-sedadlo.je-osamocene {
  outline: 3px solid #b5730f; outline-offset: 1px; z-index: 2;
  animation: fr-osamocene 1.1s ease-in-out 3;
}
@keyframes fr-osamocene {
  0%, 100% { outline-color: #b5730f; }
  50%      { outline-color: rgba(181, 115, 15, .25); }
}
@media (prefers-reduced-motion: reduce) {
  .frida-rozhrani .frida-vst-sedadlo.je-osamocene { animation: none; }
}

/* Plán se zmenšuje transformem; obal dostane dopočítanou velikost v JS. */
.frida-rozhrani .frida-vst-plan { position: relative; }