/* ════════════════════════════════════════════════════════════
   17-rezervace.css

   Rezervacni pruvodce /rezervace - vlastni prefix `tw-`.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ══ REZERVACE (/rezervace) ══════════════════════════════════════════
   Vlastní prefix `tw-` (starší `wiz-` třídy zůstávají pro formulářové
   prvky sdílené s kroužky/akcemi - fieldsety, chipy, tipy).
   Barvy, poloměry a easingy jsou tokeny z theme.css, nic vlastního.

   Vizuální teze: jeden úzký sloupec uprostřed obrazovky, kde je v každý
   okamžik zvednutá právě jedna karta a hotové kroky pod ní leží ploché.
   Hloubka nese stav — uživatel nemusí číst, aby věděl, kde je.
   Jediný „efekt" na stránce je zamykací přejezd po sbaleném pruhu; všechno
   ostatní jen tiše nabíhá. */

/* Kroky se skrývají atributem `hidden`, ne třídou: display z .card/.tw-sum
   by ho jinak přebil a skrytý krok by zůstal vidět. */
.tw-page [hidden] { display: none !important; }

/* ── sloupec ── */
.tw-page {
  max-width: 580px; margin: 0 auto;
  padding: clamp(6rem, 14vh, 8rem) var(--pad) 5rem;
}

/* ── hlavička ── */
.tw-head { text-align: center; margin-bottom: 2.4rem; }
.tw-eyebrow {
  margin: 0; font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.tw-head h1 {
  margin: .55rem 0 .5rem; font-family: var(--font-head);
  font-size: clamp(2.1rem, 7vw, 2.9rem); font-weight: 700; letter-spacing: -.035em;
}
.tw-lead { margin: 0; color: var(--muted); font-size: .95rem; }

.tw-callback {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: 2rem 0 0; font-size: .85rem; color: var(--faint);
}
.tw-callback a { color: var(--muted); font-weight: 600; }
.tw-callback a:hover { color: var(--accent); }

/* ── karta kroku ──
   Otevřená karta je zvednutá, sbalený pruh leží na podkladu. Rozdíl ve
   stínu je jediné, co odlišuje „tady jsi" od „tohle máš hotové". */
/* Fixní hlavička by jinak ukousla vršek kroku, na který se doskrolluje. */
.tw-step { display: block; scroll-margin-top: 92px; }
/* Karta kroku má TLUMENÝ rámeček (`--soft`), ne plný.
   Otevřené kroky nejsou nikdy jen jeden: `render()` odemyká krok 2 i 3
   současně (obojí na podmínce „mám datum a nemám čas"), takže by nad sebou
   stály dvě zářící karty a ani jedna by nic nezvýrazňovala — přesně to,
   proč patří plná zelená jen aktivní pilulce.
   `--frame-bg` je barva ZA rámečkem, tedy stránka, ne karta: proto `--bg`,
   i když má karta `--surface`. */
.tw-step .tw-body {
  --frame-bg: var(--bg);
  margin-bottom: 12px; padding: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.tw-step h2 {
  margin: 0 0 1.1rem; text-align: center;
  font-family: var(--font-head); font-size: 1.15rem;
  font-weight: 600; letter-spacing: -.02em;
}
/* Formulář zůstává zarovnaný vlevo — vycentrované popisky polí se čtou hůř. */
#tw-step-4 .tw-body { text-align: left; }
/* `form label { margin-bottom: 12px }` platí i na chipy (jsou to <label>),
   takže zalomená řádka chipů se rozestoupila skoro na dvojnásobek mezery. */
#tw-step-4 .wiz-chip { margin-bottom: 0; }
#tw-step-4 .wiz-chips { gap: .45rem; }
#tw-step-4 .wiz-fieldset { margin: 1rem 0 1.1rem; }
#tw-step-4 .btn-finish { margin-top: .4rem; }

/* ── sbalený krok ── */
.tw-sum {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .8rem; width: 100%;
  margin-bottom: 10px; padding: 13px 16px; text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color var(--d-hover) var(--ease-out),
              background var(--d-hover) var(--ease-out);
}
.tw-sum:hover { border-color: var(--accent-border); background: var(--accent-dim); }
.tw-sum-ico { display: flex; flex: none; color: var(--accent); }
.tw-sum-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tw-sum-label {
  font-size: .64rem; font-weight: 600; line-height: 1; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.tw-sum-value {
  font-weight: 600; font-size: .96rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-sum-edit { flex: none; font-size: .78rem; color: var(--faint); }
.tw-sum:hover .tw-sum-edit { color: var(--accent); }

/* ── krok 1: nejbližší dny ──
   Týden je jeden řádek, ne mřížka: `auto-fit` ho lámal na 5 + 2 a rozpadlá
   druhá řádka vypadala jako chyba. Na úzkém displeji radši ujede do strany. */
.tw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tw-day, .tw-part {
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--d-hover) var(--ease-out),
              background var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out),
              transform var(--d-hover) var(--ease-out);
}
.tw-day { padding: 13px 2px; align-items: center; text-align: center; }
.tw-day:hover, .tw-part:hover {
  border-color: var(--accent-border); background: var(--accent-dim);
  transform: translateY(-2px);
}
.tw-day:active, .tw-part:active { transform: translateY(0) scale(.97); }
/* CZ "Dnes"/"Zítra" se do 7 dlaždic vejdou na jeden radek, EN "Tomorrow"
   ne - misto orizku prevalime na druhy radek (break-word, mensi pismo). */
.tw-day strong {
  font-size: .85rem; overflow-wrap: break-word; word-break: break-word;
  line-height: 1.05;
}
html[lang="en"] .tw-day strong { font-size: .74rem; }
.tw-day small, .tw-part small { font-size: .73rem; color: var(--muted); }
.tw-day:hover strong { color: var(--accent); }

.tw-more {
  display: block; margin: 1.1rem auto 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--faint); text-decoration: underline;
  text-underline-offset: 3px; transition: color var(--d-hover) var(--ease-out);
}
.tw-more:hover { color: var(--accent); }
.tw-cal-wrap { margin-top: 1rem; }

/* ── krok 2: herní plocha ──
   Stejný tvar jako dlaždice části dne (.tw-part), jen širší: nese název,
   kapacitu a cenu od. Vybraná plocha je jediná plná zelená — když svítí
   všechny, nesvítí žádná (pravidlo z manuálu). */
.tw-arenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tw-arena {
  display: flex; flex-direction: column; gap: 2px; padding: 15px 12px; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--d-hover) var(--ease-out),
              background var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out),
              transform var(--d-hover) var(--ease-out);
}
.tw-arena:hover {
  border-color: var(--accent-border); background: var(--accent-dim);
  transform: translateY(-2px);
}
.tw-arena:active { transform: translateY(0) scale(.97); }
.tw-arena strong { font-size: .98rem; }
.tw-arena small { font-size: .73rem; color: var(--muted); }
.tw-arena.selected {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); transform: none;
}
.tw-arena.selected small { color: var(--accent-ink); opacity: .72; }
.tw-arena.selected:hover { transform: translateY(-2px); background: var(--accent); }

/* ── krok 3: číselník ── */
.tw-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tw-step-btn {
  width: 48px; height: 48px; flex: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out),
              background var(--d-hover) var(--ease-out),
              transform var(--d-press) var(--ease-out);
}
.tw-step-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.tw-step-btn:active { transform: scale(.9); }
.tw-games-input {
  width: 92px; height: 56px; text-align: center;
  font-family: var(--font-head); font-size: 1.9rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  background: transparent; color: var(--text);
  border: 0; border-bottom: 2px solid var(--accent-border); border-radius: 0;
  /* Nativní šipky duplikují −/+ a na mobilu jsou nezasažitelné. */
  -moz-appearance: textfield; appearance: textfield;
}
.tw-games-input:focus { outline: none; border-bottom-color: var(--accent); }
.tw-games-input::-webkit-outer-spin-button,
.tw-games-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tw-hint { margin: 1rem 0 0; text-align: center; font-size: .85rem; }
/* Cena u počtu her. Akcentní barva schválně: je to jediné číslo v průvodci,
   které zákazníka zajímá dřív než termín. */
.tw-price { margin: .5rem 0 0; text-align: center; font-size: .95rem; color: var(--muted); }
.tw-price strong { color: var(--accent); font-size: 1.15rem; }
/* Degrese z ceníku ("6. hra by stála jen 100 Kč navíc"). Tišší než částka —
   je to argument, ne údaj, který zákazník hledá. Prázdný element nesmí držet
   místo, jinak nadpis pod ním poskočí při každé změně počtu her. */
.tw-price-next { margin: .25rem 0 0; text-align: center; font-size: .85rem; color: var(--faint); }
.tw-price-next:empty { display: none; }

/* ── krok 4: části dne + časy ── */
.tw-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.tw-part { padding: 15px 10px; }
.tw-part strong { font-size: .98rem; }
.tw-part.selected {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); transform: none;
}
.tw-part.selected small { color: var(--accent-ink); opacity: .72; }
.tw-part.selected:hover { transform: translateY(-2px); background: var(--accent); }
.tw-times { margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.tw-times .slot { padding: 11px 6px; }

/* ── pohyb ──
   Karty nabíhají zdola, dlaždice s odstupem po sobě, a zamčený krok
   jednou probleskne akcentem. Nic neběží ve smyčce. */
@keyframes tw-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes tw-tile {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tw-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes tw-bump {
  0%   { transform: translateY(6px); opacity: .4; }
  100% { transform: none; opacity: 1; }
}

.tw-head > * { animation: tw-rise 520ms var(--ease-out) both; }
.tw-head h1 { animation-delay: 70ms; }
.tw-lead { animation-delay: 140ms; }
.tw-callback { animation: tw-rise 520ms var(--ease-out) 260ms both; }

/* Přidává JS ve chvíli, kdy se karta poprvé objeví — ne při každém
   překreslení, jinak by celý sloupec poskakoval při každém kliknutí. */
.tw-anim-in { animation: tw-rise 460ms var(--ease-out) both; }

/* Zamykací přejezd: pruh se rozsvítí zleva doprava přesně jednou. */
.tw-sum::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(106, 190, 69, .22), transparent);
}
.tw-sum.tw-lock::after { animation: tw-sweep 640ms var(--ease-out); }
.tw-sum.tw-lock { border-color: var(--accent-border); }
.tw-sum.tw-lock .tw-sum-value { animation: tw-bump 380ms var(--ease-out) 140ms both; }

/* Dlaždice nabíhají po sobě — pořadí nastavuje JS přes --i. */
.tw-days > .tw-day,
.tw-parts > .tw-part,
.tw-times > .slot {
  animation: tw-tile 340ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.tw-games-input.tw-bump { animation: tw-bump 260ms var(--ease-out); }

.tw-page button:focus-visible,
.tw-page input:focus-visible,
.tw-page textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tw-page *, .tw-page *::after { animation: none !important; transition: none !important; }
  .tw-day:hover, .tw-part:hover { transform: none; }
}

@media (max-width: 480px) {
  .tw-step .tw-body { padding: 18px 14px; }
  /* Sedm dlaždic se na telefon nevejde čitelně — řádek ujíždí do strany
     a zaskakuje po dlaždicích, což je pořád srozumitelnější než zalomení. */
  .tw-days {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none;
  }
  .tw-days::-webkit-scrollbar { display: none; }
  .tw-day { flex: 0 0 72px; scroll-snap-align: start; }
  .tw-parts { grid-template-columns: 1fr; }
}