/* ═══════════════════════════════════════════════════════════════════
   REZERVACE — pětikrokový výběr termínu

   Hotové kroky se sbalí na jeden řádek se souhrnem, otevřený se
   rozvine. Barvy, písma i poloměry přebírá ze základních tokenů —
   žádná nová paleta, jen nová skladba.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Krok ────────────────────────────────────────────────── */
.krok {
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.krok:last-child { border-bottom: 0; }

.krok-hlavicka {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 15px 0;
  background: none; border: none; cursor: pointer;
  color: var(--light);
  font-family: var(--ff-sans); font-size: .95rem;
  text-align: left;
  transition: color var(--t), opacity var(--t);
}
.krok-hlavicka:disabled { cursor: default; opacity: .38; }
/* Sbalený krok je jen připomínka volby — stačí mu užší řádek.
   Otevřený zůstává vzdušnější, protože v něm zákazník vybírá. */
.krok:not(.is-open) .krok-hlavicka { padding: 11px 0; }
.krok-hlavicka:not(:disabled):hover .krok-popisek { color: var(--gold); }

.krok-cislo {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(212,168,80,.35);
  border-radius: 50%;
  font-size: .74rem; font-weight: 600;
  color: var(--gold);
  transition: var(--t);
}
.krok.is-open  .krok-cislo { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.krok.is-done  .krok-cislo { background: rgba(212,168,80,.14); }
.krok.is-done  .krok-cislo::before { content: '✓'; }
.krok.is-done  .krok-cislo { font-size: .8rem; }
.krok.is-done  .krok-cislo { color: var(--gold); }

/* číslo se u hotového kroku nahradí fajfkou */
.krok.is-done .krok-cislo { text-indent: -999em; position: relative; }
.krok.is-done .krok-cislo::before {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-indent: 0;
}

.krok-popisek {
  font-weight: 600; letter-spacing: .02em;
  transition: color var(--t);
  flex-shrink: 0;
}
.krok-souhrn {
  margin-left: auto; text-align: right;
  color: var(--gold); font-size: .86rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Bez min-width:0 je minimální šířka flex položky rovná celému
     textu — dlouhý souhrn („Holení břitvou · 450 Kč · 35 min")
     pak roztáhne celou kartu mimo obrazovku místo zkrácení. */
  min-width: 0;
}
.krok.is-open .krok-souhrn { display: none; }

/* Tělo kroku se rozbaluje. Používáme grid-template-rows, protože
   height:auto nejde animovat. */
.krok-telo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease), opacity .25s ease;
  opacity: 0;
}
/* Rozbalování přes 0fr → 1fr funguje jen s jedním potomkem,
   proto je uvnitř obal .krok-obsah. */
.krok-obsah { overflow: hidden; min-height: 0; }
.krok.is-open .krok-telo {
  grid-template-rows: 1fr;
  opacity: 1;
}
.krok.is-open .krok-obsah { padding-bottom: 22px; }

.krok-pozn {
  margin-top: 14px;
  font-size: .8rem; color: var(--muted);
}
.krok-pozn strong { color: var(--gold); font-weight: 600; }

/* ── Volba: služba ───────────────────────────────────────── */
.volba-sluzba,
.volba-barber {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  color: var(--light); cursor: pointer;
  text-align: left;
  transition: border-color var(--t), background var(--t);
  margin-bottom: 8px;
  font-family: var(--ff-sans);
}
.volba-sluzba:hover,
.volba-barber:hover { border-color: rgba(212,168,80,.45); background: rgba(212,168,80,.04); }
.volba-sluzba.je-vybrano,
.volba-barber.je-vybrano { border-color: var(--gold); background: rgba(212,168,80,.08); }

.volba-foto {
  width: 52px; height: 52px; flex-shrink: 0;
  overflow: hidden; border-radius: 3px;
  background: var(--dark-4);
  display: block;
}
.volba-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(35%); }
.volba-foto--kruh { border-radius: 50%; }
.volba-kdokoliv {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--ff-serif); font-size: 1.4rem; color: var(--gold);
  border: 1px dashed rgba(212,168,80,.4); border-radius: 50%;
}

.volba-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.volba-nazev { font-size: .95rem; font-weight: 500; }
.volba-detail { font-size: .78rem; color: var(--muted); }
.volba-cena {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--ff-serif); font-size: 1.15rem; font-weight: 700;
  color: var(--gold);
}

/* ── Volba: den ──────────────────────────────────────────── */
.dny-pas {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.dny-pas::-webkit-scrollbar { display: none; }

.volba-den {
  flex: 0 0 auto;
  width: 60px; padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  color: var(--light); cursor: pointer;
  transition: border-color var(--t), background var(--t);
  font-family: var(--ff-sans);
}
.volba-den:hover { border-color: rgba(212,168,80,.45); }
.volba-den.je-vybrano { border-color: var(--gold); background: rgba(212,168,80,.1); }
.den-zkr { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.volba-den.je-vybrano .den-zkr { color: var(--gold); }
.den-cislo { font-family: var(--ff-serif); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.den-mesic { font-size: .68rem; color: var(--muted); }

/* ── Volba: čas ──────────────────────────────────────────── */
.casy-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.volba-cas {
  padding: 11px 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  color: var(--light); cursor: pointer;
  font-family: var(--ff-sans);
  font-size: .9rem; font-variant-numeric: tabular-nums;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.volba-cas:hover:not([disabled]) { border-color: var(--gold); background: rgba(212,168,80,.06); }
.volba-cas.je-vybrano { border-color: var(--gold); background: var(--gold); color: var(--dark); font-weight: 600; }
.volba-cas.je-obsazeno {
  color: var(--muted); cursor: not-allowed;
  text-decoration: line-through;
  border-color: rgba(255,255,255,.05);
  opacity: .55;
}

/* ── Souhrn nad kontaktem ────────────────────────────────── */
/* Volby jsou vidět už ve sbalených krocích nad formulářem, takže
   je souhrn nezopakuje po řádcích — jen shrne termín a cenu na
   jeden pruh. Formulář tím zůstane nad ohybem. */
.souhrn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* display:flex by přebil atribut hidden, proto ho vracíme zpět */
  border: 1px solid rgba(212,168,80,.2);
  border-radius: 4px;
  padding: 11px 16px;
  margin-bottom: 18px;
  background: rgba(212,168,80,.04);
}
.souhrn[hidden] { display: none; }
.souhrn-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: .84rem;
}
.souhrn-text strong { color: var(--white); font-weight: 500; }
.souhrn-text span { color: var(--muted); font-size: .78rem; }
.souhrn-cena {
  flex-shrink: 0;
  font-family: var(--ff-serif); font-size: 1.2rem; font-weight: 700;
  color: var(--gold);
}

.chyba {
  color: #e2765f; font-size: .84rem;
  min-height: 1.2em; margin-bottom: 8px;
}

/* ── Formulář uvnitř rezervace ───────────────────────────── */
/* Těsnější než kontaktní formulář na stránce — pod pěti kroky
   by se jinak roztáhl přes celou obrazovku. */
#rezervace .form-group { margin-bottom: 14px; }
#rezervace .form-group label { margin-bottom: 6px; }
#rezervace .form-group input,
#rezervace .form-group textarea { padding: 11px 14px; }
#rezervace .form-group textarea { min-height: 62px; }
#rezervace .form-submit { margin-top: 4px; }

/* ── Potvrzení ───────────────────────────────────────────── */
/* .form-success má v components.css display:none, tady ho pouštíme
   podle atributu hidden místo přepisování stylu z JavaScriptu. */
#rezervace-hotovo { display: none; }
#rezervace-hotovo:not([hidden]) { display: block; }
#rezervace-krokovnik[hidden] { display: none; }
.rezervace-detail {
  font-family: var(--ff-serif); font-size: 1.15rem;
  color: var(--white) !important; line-height: 1.55;
  margin-bottom: 14px;
}
#rezervace-znovu { margin-top: 26px; }

/* ── Odznak zavřeno v hero ───────────────────────────────── */
.hero-badge .dot.je-zavreno {
  background: #8a8a8a;
  box-shadow: none;
  animation: none;
}