/* ═══════════════════════════════════════════════════════════════════════
   LH Stay Guide — príručka príchodu a odchodu

   Tokeny a komponenty podľa docs/guest-checkin/stay-guide-spec.html.
   Odchýlka od specu §03: stránka má aj tmavú schému (rozhodnutie 2026-09-22).
   Svetlá zostáva predvolená mimo systémovej preferencie — musí byť čitateľná
   na slnku pred bránou.

   Fonty sa deklarujú v templates/partials/head.php (absolútne URL do témy).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokeny ─────────────────────────────────────────────────────────── */
:root {
  --g-ground:     #F5F2ED;
  --g-surface:    #FFFFFF;
  --g-surface-2:  #FAF8F5;
  --g-header:     #14120E;
  --g-ink:        #14120E;
  --g-ink-2:      #57534C;
  --g-ink-3:      #7A746B;
  --g-rule:       #E4DFD7;
  --g-outline:    #14120E;

  /* Plochy, ktoré musia ostať tmavé v oboch schémach — ikonová dlaždica,
     telo ovládača, WhatsApp tlačidlo. Nesmú používať --g-ink: ten sa
     v tmavej schéme prevráti na svetlý a dlaždica zbelie. */
  --g-solid:      #14120E;
  --g-solid-ink:  #FFFFFF;

  --g-gold:       #E8C547;   /* výplň — nikdy text na svetlom (spec §04/1) */
  --g-gold-ink:   #8A6B10;   /* zlatá v textovej role */
  --g-gold-wash:  #FFFBEA;
  --g-gold-line:  #E8C547;
  --g-green:      #3DB87A;
  --g-green-ink:  #2E8C5C;
  --g-green-wash: rgba(61,184,122,0.09);
  --g-wa:         #25D366;   /* výhradne glyf WhatsApp */

  --g-r-card: 20px;
  --g-r-box:  14px;
  --g-r-btn:  12px;
  --g-r-img:  12px;
  --g-r-chip: 999px;

  --g-wrap:   600px;         /* e-mail má 580 px, stránka je jeho pokračovanie */
  --g-pad:    20px;

  --g-f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --g-f-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: light;
}

/* Tmavá schéma. Zlatá si mení rolu: na tmavom už text unesie,
   takže --g-gold-ink prestáva byť tlmená a stane sa samotnou zlatou. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-ground:     #14120E;
    --g-surface:    #1E1B17;
    --g-surface-2:  #262219;
    --g-header:     #0B0A08;
    --g-ink:        #F3F0EA;
    --g-ink-2:      #BBB4AA;
    --g-ink-3:      #8C857A;
    --g-rule:       #322D26;
    --g-outline:    #6B6459;
    --g-solid:      #2E2921;
    --g-solid-ink:  #F3F0EA;
    --g-gold-ink:   #E8C547;
    --g-gold-wash:  rgba(232,197,71,0.10);
    --g-gold-line:  rgba(232,197,71,0.45);
    --g-green-ink:  #5FD79A;
    --g-green-wash: rgba(61,184,122,0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --g-ground:     #14120E;
  --g-surface:    #1E1B17;
  --g-surface-2:  #262219;
  --g-header:     #0B0A08;
  --g-ink:        #F3F0EA;
  --g-ink-2:      #BBB4AA;
  --g-ink-3:      #8C857A;
  --g-rule:       #322D26;
  --g-outline:    #6B6459;
  --g-solid:      #2E2921;
  --g-solid-ink:  #F3F0EA;
  --g-gold-ink:   #E8C547;
  --g-gold-wash:  rgba(232,197,71,0.10);
  --g-gold-line:  rgba(232,197,71,0.45);
  --g-green-ink:  #5FD79A;
  --g-green-wash: rgba(61,184,122,0.12);
  color-scheme: dark;
}

/* ── Základ ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body.g {
  margin: 0;
  background: var(--g-ground);
  color: var(--g-ink);
  font-family: var(--g-f-body);
  font-size: 16px;              /* spodná hranica — pod ňou iOS Safari zoomuje */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.g-app { max-width: var(--g-wrap); margin: 0 auto; padding-bottom: 16px; }

.ic { width: 20px; height: 20px; flex: 0 0 auto; }

img { max-width: 100%; display: block; }

/* Autorské display: flex/grid nižšie by prebilo [hidden] z UA štýlov —
   jazykový popover aj panel pomoci by ostali natrvalo otvorené. */
[hidden] { display: none !important; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--g-gold-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
/* Jediná veľká tmavá plocha stránky (spec §04/7). V tmavej schéme je
   tmavší než pozadie, aby sa od neho stále odlíšil. */
.g-header {
  background: var(--g-header);
  color: #FFFFFF;
  padding: 16px var(--g-pad) 24px;
  padding-top: max(16px, env(safe-area-inset-top));
}

.g-header__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.g-header__tools { display: flex; align-items: center; gap: 8px; }

.g-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--g-gold);
}

.g-h1 {
  font-family: var(--g-f-display);
  font-size: clamp(32px, 9vw, 52px);
  line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--g-gold); margin: 0 0 10px;
}

.g-sub { font-size: 16px; color: rgba(255,255,255,0.78); margin: 0 0 18px; max-width: 46ch; }

.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--g-r-chip); padding: 7px 13px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  font-size: 14px; font-weight: 500; color: #FFFFFF;
}
.g-chip .ic { width: 16px; height: 16px; color: var(--g-gold); }

/* Čas odchodu na príchode vedie na /stay/departure/. Šípka vpravo a zlatý okraj
   pri hover — bez nich by chip vyzeral rovnako ako čas príchodu vedľa neho a nikto
   by ho neťukol. Šípka je v spritu nadol, otáča sa ako pri kartách dopravy. */
.g-chip--link { text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.g-chip--link .g-chip__chev { width: 14px; height: 14px; margin-left: 2px; transform: rotate(-90deg); color: rgba(255,255,255,0.7); }
.g-chip--link:hover { border-color: var(--g-gold); background: rgba(255,255,255,0.12); }

.g-apt { margin: 16px 0 0; font-size: 13px; color: rgba(255,255,255,0.55); }

/* ── Úzka hlavička v krokoch ────────────────────────────────────────── */
/* Plná hlavička (~235 px na 375 × 812) patrí len úvodu, kde hosť zisťuje, kde je.
   V kroku by po každom „Ďalej“ zabrala tretinu obrazovky a hosť by musel scrollovať
   k tomu, čo má robiť. data-view nastavuje stay.js; bez JS atribút nie je a ostáva
   plná hlavička. Nadpis ostáva <h1>, len menší — čítačka ho nájde stále.

   .g-header__top a .g-header__progress sú display: contents, takže ich deti sa
   stanú priamo bunkami mriežky: nadpis · krok | nástroje / pruh cez celú šírku. */
.g-header__progress { display: none; }

:root[data-view="step"] .g-header,
:root[data-view="welcome"] .g-header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 10px; row-gap: 10px;
  padding-bottom: 14px;
}
:root[data-view="step"] .g-header__top,
:root[data-view="welcome"] .g-header__top,
:root[data-view="step"] .g-header__progress { display: contents; }

:root[data-view="step"] :is(.g-eyebrow, .g-sub, .g-chips, .g-apt),
:root[data-view="welcome"] :is(.g-eyebrow, .g-sub, .g-chips, .g-apt) { display: none; }

:root[data-view="step"] .g-h1,
:root[data-view="welcome"] .g-h1 {
  grid-column: 1; grid-row: 1;
  font-size: 26px; line-height: 1; margin: 0;
}
:root[data-view="step"] .g-header__tools,
:root[data-view="welcome"] .g-header__tools { grid-column: 3; grid-row: 1; }

.g-header__step {
  grid-column: 2; grid-row: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.72);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.g-header__step::before { content: "·"; margin-right: 8px; color: rgba(255,255,255,0.4); }

.g-header__bar {
  grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.16); overflow: hidden;
}
.g-header__bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--g-gold); transition: width 0.25s ease;
}

/* Priebeh je v kroku už v hlavičke — v karte by bol druhýkrát. Ostáva „← Prehľad“. */
:root[data-view="step"] .g-screen .g-progress__label,
:root[data-view="step"] .g-screen .g-progress__bar { display: none; }

/* Nadpis dostane fokus programovo po prepnutí kroku (čítačka ho prečíta).
   Nie je to ovládací prvok, rámček by pôsobil ako chyba. */
.g-h1[tabindex="-1"]:focus, .g-steptitle[tabindex="-1"]:focus,
.g-welcome__title[tabindex="-1"]:focus { outline: none; }

/* ── Jazykový prepínač a téma ───────────────────────────────────────── */
.g-lang { position: relative; }

.g-lang__trigger, .g-theme {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  border-radius: var(--g-r-chip);
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: #FFFFFF; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.g-theme { width: 34px; padding: 0; justify-content: center; }

.g-flag {
  width: 22px; height: 16.5px; border-radius: 2px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(20,18,14,0.14);   /* inak PL splynie s bielym */
}
.g-lang__chev { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.16s; }
.g-lang__trigger[aria-expanded="true"] .g-lang__chev { transform: rotate(180deg); }

.g-lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 210px; margin: 0; padding: 6px; list-style: none;
  background: var(--g-surface); border: 1px solid var(--g-rule);
  border-radius: var(--g-r-box);
  box-shadow: 0 12px 34px rgba(20,18,14,0.22);
}
.g-lang__item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px;
  padding: 0 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--g-ink); font-family: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.g-lang__item .g-flag { width: 24px; height: 18px; }
.g-lang__item span { flex: 1 1 auto; }
.g-lang__item em { font-style: normal; font-size: 11px; color: var(--g-ink-3); letter-spacing: 0.06em; }
.g-lang__item:hover { background: var(--g-surface-2); }
.g-lang__item.is-active { background: var(--g-gold-wash); font-weight: 600; }

/* Ikona sa mení podľa aktívnej schémy — tlačidlo ukazuje, čo sa stane po kliknutí. */
.g-theme__moon { display: none; }
:root[data-theme="dark"] .g-theme__sun { display: none; }
:root[data-theme="dark"] .g-theme__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-theme__sun { display: none; }
  :root:not([data-theme="light"]) .g-theme__moon { display: block; }
}

/* ── Obrazovky wizardu ──────────────────────────────────────────────── */
.g-main { padding: 0 var(--g-pad); }

.g-screen { padding-top: 22px; }
.g-screen[hidden] { display: none; }

/* Bez JS sa zobrazia všetky kroky pod sebou — stránka ostane čitateľná. */
.no-js .g-screen[hidden] { display: block; }
.no-js .g-nav, .no-js .g-progress__bar { display: none; }

.g-card {
  background: var(--g-surface);
  border: 1px solid var(--g-rule);
  border-radius: var(--g-r-card);
  padding: var(--g-pad);
}
.g-card + .g-card { margin-top: 16px; }
.g-card + .g-btn, .g-nav { margin-top: 16px; }

.g-cardtitle { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.g-cardnote  { font-size: 14px; color: var(--g-ink-3); margin: 0 0 16px; }

/* ── Voľba dopravy ──────────────────────────────────────────────────── */
.g-modes { display: flex; flex-direction: column; gap: 10px; }

.g-mode {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px; min-height: 72px; text-align: left; cursor: pointer;
  background: var(--g-surface-2);
  border: 1.5px solid transparent; border-radius: var(--g-r-box);
  color: var(--g-ink); font-family: inherit;
}
.g-mode:hover { border-color: var(--g-rule); }
.g-mode.is-active { border-color: var(--g-gold-line); background: var(--g-gold-wash); }
.g-mode.is-disabled { opacity: 0.5; cursor: not-allowed; }
.g-mode__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.g-mode__title { font-size: 17px; font-weight: 600; }
.g-mode__note  { font-size: 13px; color: var(--g-ink-3); }
.g-mode__chev  { transform: rotate(-90deg); color: var(--g-ink-3); }

.g-tilebox {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--g-r-box);
  background: var(--g-solid); color: var(--g-gold);
  display: flex; align-items: center; justify-content: center;
}
.g-tilebox .ic { width: 22px; height: 22px; }
.g-tilebox--lg { width: 58px; height: 58px; margin-bottom: 14px; }
.g-tilebox--lg .ic { width: 28px; height: 28px; }

/* ── Prehľad krokov ─────────────────────────────────────────────────── */
.g-overview { list-style: none; margin: 0; padding: 0; }
.g-overview li + li { border-top: 1px solid var(--g-rule); }

.g-overview button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 0; min-height: 52px;
  background: none; border: 0; cursor: pointer;
  color: var(--g-ink); font-family: inherit; font-size: 16px; text-align: left;
}
.g-overview__num {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 999px;
  border: 1.5px solid var(--g-outline); color: var(--g-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.g-overview__title { flex: 1 1 auto; }
.g-overview__meta  { font-size: 13px; color: var(--g-ink-3); }
.g-overview li.is-done .g-overview__num {
  background: var(--g-green); border-color: var(--g-green); color: #FFFFFF;
}
.g-overview li.is-done .g-overview__title { color: var(--g-ink-3); }

/* ── Priebeh ────────────────────────────────────────────────────────── */
.g-progress {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 8px 12px; margin-bottom: 4px;
}
.g-progress__back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--g-ink-3); font-family: inherit; font-size: 13px; font-weight: 600;
}
.g-progress__back .ic { width: 16px; height: 16px; }
.g-progress__label {
  justify-self: end; font-size: 13px; font-weight: 600; color: var(--g-ink-3);
  font-variant-numeric: tabular-nums;
}
.g-progress__bar {
  grid-column: 1 / -1; height: 4px; border-radius: 999px;
  background: var(--g-rule); overflow: hidden;
}
.g-progress__bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--g-gold); transition: width 0.25s ease;
}

/* ── Krok ───────────────────────────────────────────────────────────── */
.g-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.g-stepnum {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 999px;
  border: 1.5px solid var(--g-outline); color: var(--g-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.g-step__head { flex: 1 1 auto; }
.g-steptitle { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 2px 0 0; }
.g-stepmeta  { font-size: 13px; color: var(--g-ink-3); margin: 4px 0 0; }
.g-steptext  { font-size: 16px; color: var(--g-ink-2); margin: 16px 0 0; }
.g-steptext b, .g-boxtext b, .g-caption b { color: var(--g-ink); font-weight: 600; }

/* ── Adresný / kódový box ───────────────────────────────────────────── */
.g-outbox {
  border: 1.5px solid var(--g-outline); border-radius: var(--g-r-box);
  padding: 16px; margin-top: 16px;
}
.g-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-ink-3); margin: 0 0 6px; }
.g-value { font-size: 17px; font-weight: 600; margin: 0 0 14px; }

.g-coderef {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
  padding: 14px 16px; border-radius: var(--g-r-box);
  background: var(--g-surface-2); border: 1px dashed var(--g-rule);
}
.g-coderef .ic { color: var(--g-ink-3); margin-top: 2px; }
.g-coderef .g-boxtext { margin: 0; font-size: 15px; }

/* ── Boxy: varovanie / info / potvrdenie ────────────────────────────── */
.g-warn, .g-info, .g-ok {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--g-r-box); padding: 16px; margin-top: 16px;
}
.g-boxic {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.g-boxic .ic { width: 17px; height: 17px; }
.g-boxbody { flex: 1 1 auto; min-width: 0; }
.g-boxtitle { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.g-boxtext  { font-size: 15px; margin: 0; color: var(--g-ink-2); }

/* Žltý box len pre to, čo hosťa stojí peniaze alebo čas (spec §04/3). */
.g-warn { background: var(--g-gold-wash); border: 1px solid var(--g-gold-line); }
.g-warn .g-boxic { background: var(--g-gold); color: #14120E; }
.g-warn .g-boxtext { color: var(--g-ink); font-weight: 500; }

.g-info { background: var(--g-surface-2); border: 1px solid var(--g-rule); }
.g-info .g-boxic { background: var(--g-solid); color: var(--g-gold); }

.g-ok { background: var(--g-green-wash); border: 1px solid rgba(61,184,122,0.5); }
.g-ok .g-boxic { background: var(--g-green); color: #FFFFFF; }

/* ── Fotky ──────────────────────────────────────────────────────────── */
.g-figure { margin: 16px 0 0; }

.g-figimg {
  border-radius: var(--g-r-img) var(--g-r-img) 0 0; overflow: hidden;
  background: var(--g-surface-2);
}
.g-figimg img { width: 100%; height: auto; }

/* Placeholder — pomenuje súbor, ktorý ešte nie je nahratý. */
.g-figph {
  aspect-ratio: 4 / 3; border-radius: var(--g-r-img) var(--g-r-img) 0 0;
  border: 1px dashed var(--g-rule); border-bottom: 0; background: var(--g-surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.g-figph__name  { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--g-ink-3); }
.g-figph__label { font-size: 13px; color: var(--g-ink-3); }

/* Popisok je inštrukcia, nie poznámka — tmavý a polotučný (spec §05). */
.g-caption {
  font-size: 15px; font-weight: 600; color: var(--g-ink);
  background: var(--g-surface-2); border: 1px solid var(--g-rule); border-top: 0;
  border-radius: 0 0 var(--g-r-img) var(--g-r-img); padding: 12px 14px; margin: 0;
}

/* ── Diaľkový ovládač ───────────────────────────────────────────────── */
/* Počet bodiek je tvar, nie iba farba — musí fungovať aj pre farbosleptého hosťa. */
.g-remote {
  display: flex; gap: 18px; align-items: center; margin-top: 16px;
  padding: 16px; border-radius: var(--g-r-box);
  background: var(--g-surface-2); border: 1px solid var(--g-rule);
}
.g-remote__body {
  display: grid; grid-template-columns: repeat(2, 34px); gap: 8px;
  padding: 12px 10px; border-radius: 12px;
  background: var(--g-solid); flex: 0 0 auto;
}
.g-remote__btn {
  width: 34px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
}
.g-remote__btn.is-unused { opacity: 0.32; }
.g-remote__btn.is-active { background: var(--g-gold); box-shadow: 0 0 0 3px rgba(232,197,71,0.28); }

.g-remote__dots { display: grid; grid-template-columns: repeat(2, 5px); gap: 2px; justify-content: center; }
.g-remote__dots[data-n="1"] { grid-template-columns: 5px; }
.g-remote__dots i { width: 5px; height: 5px; border-radius: 999px; background: #FFFFFF; display: block; }
.g-remote__btn.is-active .g-remote__dots i { background: #14120E; }
.g-remote__dots.is-inline { grid-template-columns: repeat(2, 5px); }
.g-remote__dots.is-inline[data-n="1"] { grid-template-columns: 5px; }
.g-remote__dots.is-inline i { background: var(--g-ink-2); }

.g-remote__side  { flex: 1 1 auto; min-width: 0; }
.g-remote__which { font-size: 16px; font-weight: 600; margin: 0; }
.g-remote__hint  { font-size: 13px; color: var(--g-ink-3); margin: 10px 0 0; }
.g-remote__list  { list-style: none; margin: 6px 0 0; padding: 0; }
.g-remote__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 3px 0; }

/* ── Smerovky v garáži ──────────────────────────────────────────────── */
/* Šípka je tvar, nie fotka. Hosť za volantom ju prečíta na jeden pohľad,
   kým na fotke tmavej garáže hľadá, čím sa líši od predchádzajúcej. */
.g-turns {
  margin-top: 16px; padding: 16px; border-radius: var(--g-r-box);
  background: var(--g-surface-2); border: 1px solid var(--g-rule);
}
.g-turn {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.g-turn + .g-turn { border-top: 1px solid var(--g-rule); }
.g-turn__n {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px;
  background: var(--g-solid); color: var(--g-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.g-turn__arrow { width: 38px; height: 38px; color: var(--g-gold-ink); }
.g-turn__label { font-size: 18px; font-weight: 600; }

/* ── Tlačidlo poschodia vo výťahu ───────────────────────────────────── */
.g-floor {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
  padding: 16px; border-radius: var(--g-r-box);
  background: var(--g-surface-2); border: 1px solid var(--g-rule);
}
/* Kreslené podľa skutočného tlačidla vo výťahu: kovový rámik, tmavá čelná
   plocha, vyrytá jednotka a červený svetelný prstenec po stlačení.

   Červená je tu výnimka zo spec §04/4 (tá ju vyhradzuje pre kresby vo fotkách).
   Dôvod: nie je to prvok rozhrania, ale podobizeň fyzického tlačidla — rovnako
   ako grafika ovládača. Keby bol prstenec zlatý, hosť by v kabíne hľadal zlaté
   tlačidlo a nenašiel by ho. Preto sú tu hodnoty natvrdo a nie tokenmi:
   tlačidlo vyzerá rovnako v svetlej aj tmavej schéme, lebo v skutočnosti tiež. */
.g-floor__btn {
  width: 66px; height: 58px; flex: 0 0 auto;
  border-radius: 16px; padding: 3px;
  background: linear-gradient(158deg, #8A857E 0%, #4A4640 46%, #6E6962 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  display: flex;
}
.g-floor__btn > span {
  flex: 1 1 auto; border-radius: 13px;
  background: linear-gradient(168deg, #35322E, #23211E);
  box-shadow: inset 0 0 0 2px #E23A2E, inset 0 0 9px rgba(226,58,46,0.55), 0 0 12px rgba(226,58,46,0.30);
  display: flex; align-items: center; justify-content: center;
  color: #CFCAC2; font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,0.14), 0 -1px 1px rgba(0,0,0,0.65);
}
.g-floor__text { font-size: 16px; color: var(--g-ink-2); margin: 0; }

/* ── Odškrtávacia položka ───────────────────────────────────────────── */
.g-check {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 13px 16px; min-height: 52px; cursor: pointer;
  border-radius: var(--g-r-box); border: 1.5px solid var(--g-rule); background: var(--g-surface-2);
}
.g-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.g-check__box {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px;
  border: 1.5px solid var(--g-outline); color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.g-check__box .ic { width: 15px; height: 15px; }
.g-check__label { font-size: 15px; font-weight: 500; }
.g-check:has(input:checked) { border-color: var(--g-green); background: var(--g-green-wash); }
.g-check:has(input:checked) .g-check__box { background: var(--g-green); border-color: var(--g-green); color: #FFFFFF; }
.g-check:has(input:focus-visible) { outline: 2px solid var(--g-gold-ink); outline-offset: 2px; }

/* ── Tlačidlá ───────────────────────────────────────────────────────── */
/* Tri typy, žiadny štvrtý. Na mobile vždy plná šírka, min. 52 px. */
.g-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; padding: 14px 20px;
  border-radius: var(--g-r-btn); border: 1.5px solid transparent;
  font-family: var(--g-f-body); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1;
}
.g-welcome .g-btn + .g-btn { margin-top: 10px; }
.g-btn--primary   { background: var(--g-gold); color: #14120E; }
.g-btn--whatsapp  { background: var(--g-solid); color: var(--g-solid-ink); }
.g-btn--secondary { background: transparent; color: var(--g-ink); border-color: var(--g-outline); }
.g-btn[disabled]  { opacity: 0.4; cursor: not-allowed; }
.g-wa-glyph { color: var(--g-wa); }   /* zelená výhradne v glyfe (spec §04/6) */

.g-outbox .g-btn { margin-top: 0; }

/* Navigácia kroku: Späť je užšie, Ďalej dominuje. */
.g-nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.g-nav .g-btn { margin-top: 0; }
.g-nav .g-btn--secondary { width: auto; padding: 14px 18px; }

/* ── Záverečná obrazovka ────────────────────────────────────────────── */
.g-card--welcome { text-align: center; position: relative; overflow: hidden; }

/* ── Konfety ────────────────────────────────────────────────────────── */
/* Bez knižnice a bez obrázka: 36 prvkov, animujú sa len transform a opacity,
   takže to beží na GPU a po 3,4 s sa vrstva zmaže z DOM. Pri
   prefers-reduced-motion sa nespustí vôbec. */
.g-confetti { position: absolute; inset: 0 0 auto; height: 0; pointer-events: none; }
.g-confetti i {
  position: absolute; top: -10px; width: 8px; height: 13px; opacity: 0;
  animation: g-fall linear forwards; will-change: transform, opacity;
}
@keyframes g-fall {
  0%   { opacity: 0; transform: translate3d(0, -10px, 0) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, 320px), 0) rotate(var(--rot, 540deg)); }
}
@media (prefers-reduced-motion: reduce) { .g-confetti { display: none; } }
.g-card--welcome .g-tilebox { margin-left: auto; margin-right: auto; }
.g-welcome__title {
  font-family: var(--g-f-display); font-size: 34px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--g-gold-ink); margin: 0 0 10px; line-height: 1;
}
.g-welcome__text { font-size: 16px; color: var(--g-ink-2); margin: 0; }

/* Na uvítacej obrazovke sú dve tlačidlá pod sebou — apartmán a „znova“ */
.g-welcome .g-btn + .g-btn { margin-top: 10px; }

/* Odkaz na apartmán na úvode — text, nie tlačidlo: nemá súperiť so „Začať“ */
.g-textlink {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 14px; padding: 10px 0; background: none; border: 0; cursor: pointer;
  color: var(--g-ink-2); font-family: inherit; font-size: 14px; text-align: center;
}
.g-textlink b { color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; }
.g-textlink .ic { width: 15px; height: 15px; color: var(--g-gold-ink); }

/* ── Váš apartmán — témy na rozbalenie ──────────────────────────────── */
/* <details>, naraz otvorená jedna téma (name + poistka v stay.js). Zbalená téma
   nesie pod názvom jednu vetu s tým najdôležitejším — hosť často nemusí nič otvárať. */
.g-apt-title[tabindex="-1"]:focus { outline: none; }
.g-topics { display: flex; flex-direction: column; gap: 10px; }

.g-topic {
  background: var(--g-surface-2); border: 1.5px solid transparent;
  border-radius: var(--g-r-box);
}
.g-topic[open] { border-color: var(--g-rule); background: var(--g-surface); }

.g-topic__head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; min-height: 72px; cursor: pointer; list-style: none;
  scroll-margin-top: 72px;
}
.g-topic__head::-webkit-details-marker { display: none; }
.g-topic__head:focus-visible { outline: 2px solid var(--g-gold-ink); outline-offset: 2px; border-radius: var(--g-r-box); }
.g-topic__label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g-topic__title { font-size: 17px; font-weight: 600; }
.g-topic__note  { font-size: 13px; color: var(--g-ink-3); }
.g-topic__chev  { flex: 0 0 auto; color: var(--g-ink-3); transition: transform 0.2s ease; }
.g-topic[open] .g-topic__chev { transform: rotate(180deg); }
.g-topic[open] .g-topic__note { display: none; }   /* po otvorení to povie obsah */

.g-topic__body { padding: 0 16px 16px; }
.g-topic__body > :first-child { margin-top: 0; }

/* Návod k spotrebiču — piktogram tlačidla ako na paneli, číslo kroku v rohu */
.g-howto { list-style: none; margin: 0; padding: 0; }
.g-howto__item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; position: relative; }
.g-howto__item + .g-howto__item { border-top: 1px solid var(--g-rule); }
.g-howto__key {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px;
  border: 1.5px solid var(--g-outline); color: var(--g-ink);
  display: flex; align-items: center; justify-content: center;
}
.g-howto__key .ic { width: 22px; height: 22px; }
.g-howto__n {
  position: absolute; left: 30px; top: 8px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--g-gold); color: #14120E;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.g-howto__text { font-size: 15px; color: var(--g-ink-2); margin: 0; padding-top: 2px; }
.g-howto__text b { color: var(--g-ink); font-weight: 600; }

/* Zoznam: pravidlá s ikonou, farby kontajnerov, „nepatrí do umývačky“ */
/* Nadpis podsekcie návodu (napr. Cappuccino pod krokmi kávy) — oddeliť od predošlého bloku */
.g-topic__body > .g-label { margin-top: 36px; }
.g-list { margin-top: 16px; }
.g-topic__body > .g-list:first-child { margin-top: 0; }
.g-list .g-label { margin-bottom: 6px; }
.g-list ul { list-style: none; margin: 0; padding: 0; }
.g-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 15px; }
.g-list__ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  background: var(--g-solid); color: var(--g-gold);
  display: flex; align-items: center; justify-content: center;
}
.g-list__ic .ic { width: 19px; height: 19px; }
.g-list--no .g-list__ic { background: none; color: var(--g-ink-3); width: 22px; height: 22px; }
.g-list--no .g-list__ic .ic { width: 16px; height: 16px; }
.g-list__swatch {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

/* ── Pätička ────────────────────────────────────────────────────────── */
/* Spodný priestor patrí pätičke, nie prázdnu za ňou: plávajúce tlačidlo sa
   pri odrolovaní nadol usadí do neho. Stránka tak končí pätičkou a tlačidlo
   je len doplnok nad ňou — nie prvok, kvôli ktorému stránka pokračuje ďalej. */
.g-footer {
  margin: 36px var(--g-pad) 0; padding: 22px var(--g-pad);
  padding-bottom: calc(64px + max(16px, env(safe-area-inset-bottom)));
  background: var(--g-header); border-radius: var(--g-r-card); color: #FFFFFF;
}
.g-footer__title { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.g-footer .g-btn--whatsapp { background: rgba(255,255,255,0.1); color: #FFFFFF; border-color: rgba(255,255,255,0.2); }
.g-footer__meta { font-size: 13px; color: rgba(255,255,255,0.55); margin: 14px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.g-footer__meta a { color: rgba(255,255,255,0.8); }

/* Cieľ posunu po výbere dopravy — bez odsadenia by karta sedela natesno
   pod hranou obrazovky a vyzerala by odrezaná. */
#g-overview-card { scroll-margin-top: 14px; }

/* ── Plávajúce tlačidlo pomoci ──────────────────────────────────────── */
.g-fab { position: fixed; right: 16px; z-index: 50; bottom: max(16px, env(safe-area-inset-bottom)); }
.g-fab__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--g-solid); color: var(--g-solid-ink);
  font-family: inherit; font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(20,18,14,0.28);
}
.g-fab__wa { color: var(--g-wa); }
.g-fab__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px));
  background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: var(--g-r-box);
  padding: 16px; box-shadow: 0 12px 34px rgba(20,18,14,0.22);
}
.g-fab__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.g-fab__text  { font-size: 14px; color: var(--g-ink-2); margin: 0 0 14px; }

/* ── Stránka pre neplatný odkaz ─────────────────────────────────────── */
.g-app--blocked { padding: 56px var(--g-pad); text-align: center; }
.g-app--blocked .g-tilebox { margin: 0 auto 16px; }
.g-blocked__title { font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.g-blocked__text  { font-size: 16px; color: var(--g-ink-2); margin: 0 0 20px; }

/* ── Responzívnosť a prístupnosť ────────────────────────────────────── */
@media (min-width: 620px) {
  .g-header { border-radius: 0 0 var(--g-r-card) var(--g-r-card); }
  .g-app { padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .g-fab, .g-nav, .g-progress, .g-lang, .g-theme { display: none !important; }
  .g-screen[hidden] { display: block !important; }
}