/* ============================================================
   wizard.css — Styly pro PROGRESIVNÍ AKORDEON REZERVACE
   ============================================================
   Tento soubor obsahuje VŠECHNY styly potřebné pro nový wizard
   rezervace (4 stacked sekce: služba → termín → údaje → platba).
   Sekce mají tři stavy:
       .is-locked  → šedý, ne-interaktivní, hint „Nejdřív vyberte výše…"
       .is-active  → plně viditelný, obsah aktivní
       .is-done    → splněný krok (vlevo zelený check), zůstává otevřený
   Sekce se NEZAVÍRAJÍ — klient se může vrátit očima nahoru.

   Návaznost na app.js / wizard.js:
     • Karty služeb jsou klikatelné a po výběru dostanou .selected
     • Kalendář + timeline z app.js jsou uvnitř sekce 2
     • Submit tlačítko #wizard-submit je v sekci 3
     • Platební údaje + QR jsou v sekci 4
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1) AKORDEÓN: kontejner + jednotlivé sekce
   ───────────────────────────────────────────────────────────── */

/* Obal akordeonu — sloupec stacked sekcí, max šířka shodná se zbytkem
   stránky (--content-wide = 1200 px), aby rezervační sekce využívala
   stejnou plochu jako sekce „Služby" či „Ceník" nad ní.
   Sekce mezi sebou mají mezeru (gap), aby vizuálně oddělené karty
   stoupaly dolů (vizuál „kroky 1 → 2 → 3 → 4"). */
.wizard-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--content-wide);
  margin: 0 auto;
}

/* Jedna sekce wizardu — vzhled jako „karta" s rámečkem a stínkem.
   Stavy: výchozí (locked) je šedavý; .is-active dostane plnou barvu;
   .is-done navíc zelený levý okraj jako „splněný" indikátor. */
.wizard-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;                  /* aby zakulacené rohy ořezaly header */
  transition:
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    opacity var(--transition-interactive);
}

/* AKTIVNÍ sekce — barevný „aktivní" levý okraj + jemný stín. */
.wizard-section.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* HOTOVÁ sekce — zelený okraj, lehce ztlumený nadpis (krok je „mimo focus"). */
.wizard-section.is-done {
  border-color: var(--color-primary);
}

/* LOCKED sekce — podle uživatelské specifikace progresivního odhalování
   nemá být žádná budoucí (jen čeká na svůj krok) sekce viditelná. Skryjeme
   ji proto z layoutu úplně. Sekce zůstává v DOM — obsahuje formulářové
   prvky, na které odkazuje JS — jen ji nevykreslíme.
   Jakmile JS odebere třídu .is-locked (= wizardUnlockSection), sekce se
   objeví s plnou interaktivitou.
   Pozn.: pointer-events:none + opacity ze starší verze nejsou potřeba
   — display:none vše zakrývá. */
.wizard-section.is-locked {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   2) HEADER SEKCE: číslo + nadpis + inline status
   ───────────────────────────────────────────────────────────── */

.wizard-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}

/* Kulaté číslo kroku (vlevo) — defaultně šedé. Aktivní = primary barva.
   Hotové = zelený check (přepneme přes CSS pseudo-content). */
.wizard-section-num {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-base);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    border-color var(--transition-interactive);
}
.wizard-section.is-active .wizard-section-num {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.wizard-section.is-done .wizard-section-num {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
/* Trik: hotová sekce zobrazí ✓ místo čísla. Schováme původní text
   pomocí font-size:0 a vykreslíme check přes ::before s velkým fontem. */
.wizard-section.is-done .wizard-section-num {
  font-size: 0;
}
.wizard-section.is-done .wizard-section-num::before {
  content: "✓";
  font-size: var(--text-lg);
  font-weight: 800;
}

/* Nadpis sekce — vedle čísla. Font display, středně tučný. */
.wizard-section-title {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

/* Inline status v hlavičce (např. „Biorezonance — 1 200 Kč" v kroku 1).
   Push-doprava přes margin-left:auto. Text mírně ztlumený. */
.wizard-section-status {
  flex: 1 1 auto;
  text-align: right;
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.3;
}
.wizard-section-status.ok {
  color: var(--color-primary);
  font-weight: 500;
}
.wizard-section-status.warn {
  /* Varování při kolizi termínu po změně služby — výrazná červená. */
  color: #C62828;
  font-weight: 600;
  background: #FFEBEE;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}


/* ─────────────────────────────────────────────────────────────
   3) BODY SEKCE: vnitřní padding + locked hint
   ───────────────────────────────────────────────────────────── */

.wizard-section-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* Krátký popisek kroku — kursivně-jemný, pod headerem. */
.wizard-panel-desc {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5) 0;
  font-size: var(--text-sm);
}

/* Hint „Nejdřív vyplňte předchozí krok…" — viditelný JEN když je sekce locked.
   Default: skrytý. */
.wizard-locked-hint {
  display: none;
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-style: italic;
}
.wizard-section.is-locked .wizard-locked-hint {
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   4) SEKCE 1 — KARTY SLUŽEB
   ─────────────────────────────────────────────────────────────
   Grid karet. Klik = výběr služby + odemčení sekce 2.
   Karty mají vlastní hover/selected stavy. */

.service-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .service-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.service-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  cursor: pointer;
  transition:
    border-color var(--transition-interactive),
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.service-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.service-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.service-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.service-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
.service-card-price {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-primary);
  white-space: nowrap;
}
.service-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.service-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
/* Badge „Zdarma“ / další odznačky v kartě služby na kroku 1 rezervace.
   Dříve sytou green (#4CAF50) jsme nahradili olivovou primary barvou,
   aby ladila se zbytkem designu (CTA tlačítka, akcent barvy karet).
   Malá velikost, vyšší letter-spacing a uppercase dělá z badge čitelný
   indikator, ne dominantní prvek. */
.service-card-free-badge {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   5) SEKCE 2 — TERMÍN (kalendář + timeline)
   ─────────────────────────────────────────────────────────────
   Reuse existující calendar-container/timeline-container z app.js,
   přidáme jen layout wrapper a hlášku „vyberte datum/čas". */

.wizard-slot-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.wizard-slot-status.ok {
  background: var(--color-primary-highlight);
  border-style: solid;
  border-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────
   6) SEKCE 3 — OSOBNÍ ÚDAJE + SOUHRN + SUBMIT
   ─────────────────────────────────────────────────────────────
   Dvousloupcový layout: vlevo formulář, vpravo souhrn (sticky-ish). */

.wizard-step-personal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 860px) {
  .wizard-step-personal {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* Boxík s rekapitulací výběru z kroků 1+2 */
.wizard-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  align-self: start;
}
.wizard-summary h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.wizard-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px dashed var(--color-divider);
}
.wizard-summary-row:last-child {
  border-bottom: none;
}
.wizard-summary-label {
  color: var(--color-text-muted);
}
.wizard-summary-value {
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
}
.wizard-summary-total {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: var(--text-base);
}
.wizard-summary-total .wizard-summary-value {
  color: var(--color-primary);
}

/* Souhlas se storno podmínkami (checkbox) */
.wizard-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.wizard-consent input[type="checkbox"] {
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
}
.wizard-consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Řádek se submit tlačítkem — pod gridem formuláře, vycentrovaný doprava. */
.wizard-submit-row {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
}
.wizard-submit-row .btn-primary {
  min-width: 18rem;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}
.wizard-submit-row .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .wizard-submit-row .btn-primary {
    width: 100%;
    min-width: 0;
  }
}


/* ─────────────────────────────────────────────────────────────
   7) SEKCE 4 — PLATBA + STATUS BANNER + QR
   ───────────────────────────────────────────────────────────── */

/* Status banner — barva podle stavu (waiting/confirmed/expired). */
/* Status banner platby — 2-sloupcový flex layout.
   ------------------------------------------------
   Levy sloupec (status-icon + status-text) flex-roste,
   pravý sloupec (.wizard-payment-status-meta) je fixed-width
   countdown text. Při potvrzení / expiraci countdown zůstává
   prázdný (vymaže jej JS), banner se vizuálně nezmění. */
.wizard-payment-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  display: flex;
  /* align-items: flex-start — vrchní zarovnání všech tří sloupců (ikona, status-text, meta).
     Důvod: meta (pravý) má mít stejný baseline jako title vlevo. Center by metu vystředil
     proti celé levé části (title + subtitle), takže by viseI níž než title. */
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: 500;
}
/* Pravý sloupec banneru — countdown / „Platí do …".
   Sdílí barvu, typografii a velikost s title v levém sloupci
   (.wizard-payment-status .status-text strong). Tabular-nums zachovává
   stabilní šířku číslic v MM:SS / datu. */
.wizard-payment-status-meta {
  flex: 0 0 auto;                                  /* Neroste, nezabírá prostor levému sloupci. */
  font-variant-numeric: tabular-nums;              /* Stabilní šířka číslic v MM:SS. */
  white-space: nowrap;                             /* MM:SS nebo datum se nezalomí. */
  text-align: right;
  /* Žádné font-size / opacity overrides — meta dědí 1rem ze status banneru a má plnou krytí,
     aby vizuálně odpovídala title vlevo. */
}
.wizard-payment-status-meta strong {
  /* Žádný monospace font ani jiný weight — <strong> uvnitř mety dědí systémový font
     z body a default browser bold (font-weight: 700), aby vypadal stejně jako
     <strong> uvnitř title v levém sloupci. */
  font-weight: 700;
}
.wizard-payment-status.waiting {
  background: #FFF8E1;
  color: #8A6D3B;
  border: 1px solid #F0E0A8;
}
.wizard-payment-status.confirmed {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}
.wizard-payment-status.expired {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #EF9A9A;
}
.wizard-payment-status .status-icon {
  font-size: 1.5rem;
  flex: 0 0 auto;
  /* Ikona zůstane vystředěná proti celé levé části (title + subtitle), i když container
     používá align-items: flex-start pro zarovnání title a meta. Jinak by ikona
     visela nahoře a vedle subtitle by byl prázdný prostor. */
  align-self: center;
}
.wizard-payment-status .status-text {
  flex: 1 1 auto;
}
.wizard-payment-status .status-text strong {
  display: block;
  margin-bottom: 0.15rem;
}
.wizard-payment-status .status-text small {
  display: block;
  opacity: 0.85;
  font-size: var(--text-xs);
}

/* Spinner pulsing dot pro stav waiting. */
.wizard-payment-status.waiting .status-icon::after {
  content: "●";
  display: inline-block;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Layout dvou sloupců: vlevo údaje, vpravo QR. */
.wizard-payment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 780px) {
  .wizard-payment-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.wizard-payment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.wizard-payment-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

/* Řádek v platebních údajích: label vlevo, hodnota vpravo. */
.wizard-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
}
.wizard-pay-row:last-child {
  border-bottom: none;
}
.wizard-pay-label {
  color: var(--color-text-muted);
}
.wizard-pay-value {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-weight: 600;
  color: var(--color-text);
}
.wizard-pay-amount {
  color: var(--color-primary);
  font-size: var(--text-base);
}

/* QR kód container. */
.wizard-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wizard-qr-wrap img {
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: #fff;
  padding: var(--space-3);
}
.wizard-qr-wrap p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* Telefonní pomoc — pasivní text pod platebními kartami.
   ------------------------------------------------------
   Nahrazuje původní "Rezervace platí do …" (ten je nyní
   v banneru vpravo). Text, nikoli odkaz — účelem je jen
   info „kdyby něco", ne výzva k akci. */
.wizard-payment-help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-4);
  /* margin auto na obou stranách — elementy zdědí max-width od
     globálního `p` (~792px), takže samotný text-align nestačí:
     blok musí být vycentrován vůči rodiči. */
  margin-left: auto;
  margin-right: auto;
  width: 100%;                                       /* Při žádném max-width = plnou šířkou. */
}
.wizard-payment-help strong {
  color: var(--color-text);                        /* Telefon vizuálně zvýrazněn, ale ne klikatelný. */
  font-weight: 600;
  white-space: nowrap;                             /* Telefon se nezalomí mezi číslicemi. */
}

/* Tlačítko „Zkusit znovu" po expiraci. */
.wizard-retry {
  display: block;
  margin: var(--space-4) auto 0 auto;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-interactive);
}
.wizard-retry:hover {
  background: var(--color-primary-hover);
}

/* Cancel link na konci sekce 4 (zruš rezervaci ručně).
   ------------------------------------------------------
   Používáme flex centrování místo text-align, aby fungovalo
   bez ohledu na případné inline-styly nebo padding na rodiči.
   Gap ještě doručí konzistentní mezeru mezi span a a. */
.wizard-cancel-link {
  display: flex;
  justify-content: center;                         /* Horizontální centrování (silnější než text-align). */
  align-items: center;
  gap: 0.35em;                                     /* Mezera mezi „Potřebujete…" a odkazem. */
  flex-wrap: wrap;                                 /* Na mobilu se předělí na dva řádky, oba center. */
  width: 100%;                                     /* Plnou šířkou kontejneru — stabilní pivot. */
  /* Původní „display: block; text-align: center" selhávalo, protože
     globální `p { max-width: 792px }` zúžil element a margin nebyl
     auto. Margin auto + width 100% zaručí centrování nezávisle
     na případném max-width. */
  margin-top: var(--space-6);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;                              /* Fallback pro případný starší browser. */
}
.wizard-cancel-link a {
  color: var(--color-primary);
  text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────
   8) CTA „Rezervovat službu" v sekci „Služby"
   ─────────────────────────────────────────────────────────────
   Tlačítko žije v PATIČCE karty (.service-card-footer) vedle toggle
   „Více informací" / „Méně". Viditelnost je řízena z CSS přes třídu
   .is-expanded na rodičovské .service-card (přidává JS toggleService).
   Vzhled: kompaktní primary tlačítko (menší než hlavní CTA v hero),
   bez šipky v textu, na mobilu plná šířka pro snazší tap target. */

.service-book-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kompaktnější rozměry — záměrně menší než velký „Objednat se" v hero.
     Cíl: tlačítko nesmí dominovat patičce vedle textového toggle. */
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-xs);          /* o stupeň menší písmo než .service-toggle */
  line-height: 1.2;
  cursor: pointer;
  transition:
    background var(--transition-interactive),
    transform var(--transition-interactive);
  text-decoration: none;
}
.service-book-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* Na velmi úzkých obrazovkách (telefon na šířku karty pod ~540 px) se
   patička .service-card-footer láme díky flex-wrap. CTA pak roztáhneme
   na plnou šířku, aby se neztrácelo v rohu. */
@media (max-width: 540px) {
  .service-book-cta {
    width: 100%;
  }
}