/* frame.css — sdílený vizuální rámec rezervačního toku (rezervace / platba / dokoncit).
   Styl převzat z homepage web/index.html (.topnav, hero). NEPŘEDEFINOVÁVÁ :root – používá
   proměnné definované inline v každé stránce (--forest, --ember, --cream, --sage, --line,
   --paper, --ink, --muted). Cache-bust: link jako frame.css?v=N.
   Prefix .rzf- (rezervace-frame), ať nekoliduje s inline třídami stránek (.card, .btn…). */

/* ---- Sticky hlavička = tmavá brand lišta s LOGEM + STEPPEREM + TELEFONEM (vše v jednom
        tmavém pruhu, aby stepper nebyl v prázdném bílém proužku). Auto-hide dle globálního
        standardu (schová se celá naráz). ---- */
.rzf-head{position:sticky;top:0;z-index:900;transition:transform .28s ease}
.rzf-head.rzf-hidden{transform:translateY(-100%)}
.rzf-top{background:var(--forest)}
.rzf-top-in{max-width:1080px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;
  gap:6px 18px;flex-wrap:wrap}
.rzf-logo{flex:0 0 auto;display:flex;align-items:center;line-height:0;order:0}
.rzf-logo img{height:42px;width:auto;display:block}
.rzf-back{order:1;margin-left:auto;color:var(--cream);text-decoration:none;font-size:.9rem;white-space:nowrap}
.rzf-back:hover{text-decoration:underline}
@media(max-width:520px){.rzf-logo img{height:36px}.rzf-back{font-size:.86rem}}

/* Plovoucí WhatsApp (stejný jako homepage/landing) – sekundární kontakt na jeden ťuk */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:940;width:56px;height:56px;border-radius:50%;
  background:#25D366;box-shadow:0 4px 14px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:31px;height:31px;fill:#fff}

/* Stepper uvnitř tmavé lišty. Mobil: vlastní řádek pod logem+tel; desktop: uprostřed mezi ně.
   overflow-x:auto = pojistka, ať stepper nikdy neroztáhne stránku. */
.rzf-steps-in{order:2;flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:5px 0 3px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rzf-steps-in::-webkit-scrollbar{display:none}
@media(min-width:760px){.rzf-steps-in{order:1;flex:1 1 auto;padding:0}.rzf-back{order:2}}
.rzf-step{display:inline-flex;align-items:center;gap:7px;color:var(--sage);font-size:.88rem;white-space:nowrap}
.rzf-num{width:21px;height:21px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.15);color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.76rem;font-family:system-ui}
.rzf-step.done{color:#bfe6c4}
.rzf-step.done .rzf-num{background:var(--ember);color:#0C1406}
.rzf-step.active{color:#fff;font-weight:700}
.rzf-step.active .rzf-num{background:var(--ember);color:#fff}
.rzf-sep{flex:0 1 40px;height:2px;background:rgba(255,255,255,.22);border-radius:2px;min-width:14px}
@media(max-width:440px){
  .rzf-step-lbl{display:none}                     /* úzký mobil: jen kolečka */
  .rzf-step.active .rzf-step-lbl{display:inline}  /* label jen u aktivního kroku */
}

/* ---- Slim foto-hero (obrázek per stránka přes --rzf-hero-img inline) ---- */
.rzf-hero{position:relative;color:#fff;background:var(--forest);overflow:hidden}
.rzf-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(12,20,6,.42),rgba(12,20,6,.66)),var(--rzf-hero-img,none);
  background-size:cover;background-position:center 42%}
.rzf-hero-in{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:44px 20px 46px}
.rzf-hero h1{color:#fff;margin:0 0 .28em;font-family:Georgia,"Times New Roman",serif;
  font-weight:600;line-height:1.12;font-size:clamp(1.7rem,4vw,2.4rem)}
.rzf-hero p{margin:0;color:var(--cream);max-width:54ch;font-size:clamp(1rem,2vw,1.12rem)}
@media(max-width:640px){.rzf-hero-in{padding:24px 20px 26px}.rzf-hero p{font-size:1rem}}

/* Bez foto pruhu (varianta pro transakční stránky – jen tmavý brand pruh) */
.rzf-hero.rzf-plain::before{background:var(--forest)}

/* ---- Dvousloupec + kontextový rail (sdílené: rezervace / platba / dokoncit) ----
   Wizard/obsah vlevo, kontextový rail vpravo; na mobilu rail sjede pod obsah. */
.rz-cols{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:900px){.rz-cols{grid-template-columns:minmax(0,1fr) 316px}}
/* flex + gap místo margin-bottom na kartách → poslední karta nemá spodní margin,
   sloupec končí přesně u karty a sticky rail se s ním dole zarovná (lící spodní hrany) */
.rz-main{min-width:0;display:flex;flex-direction:column;gap:22px}
.rz-main .card{margin-bottom:0}
.rz-rail{display:flex;flex-direction:column;gap:16px}
@media(min-width:900px){.rz-rail{position:sticky;top:118px}}
.rz-cols.done .rz-rail{display:none}          /* po odeslání: čisté potvrzení, rail pryč */
@media(min-width:900px){.rz-cols.done{grid-template-columns:1fr}}
/* rail komponenty */
.rail-photo{border-radius:14px;overflow:hidden;position:relative;min-height:148px;
  background:#0C1406 var(--rail-img) center/cover no-repeat;display:flex;align-items:flex-end;
  box-shadow:0 8px 24px rgba(15,23,10,.10)}
.rail-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,6,0),rgba(12,20,6,.74))}
.rail-photo b{position:relative;z-index:1;color:#fff;padding:14px 16px;font-family:Georgia,serif;font-size:1.02rem;font-weight:600}
.rail-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:0 8px 24px rgba(15,23,10,.06)}
.rail-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rail-facts b{display:block;font-family:Georgia,serif;font-size:1.08rem;color:var(--ink);line-height:1.1}
.rail-facts span{color:var(--muted);font-size:.8rem;line-height:1.35;display:block;margin-top:2px}
.rail-h{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-dk);margin:0 0 12px}
.rail-steps{list-style:none;margin:0;padding:0;counter-reset:rs}
.rail-steps li{position:relative;padding:0 0 12px 30px;color:var(--ink);font-size:.9rem;counter-increment:rs}
.rail-steps li:last-child{padding-bottom:0}
.rail-steps li::before{content:counter(rs);position:absolute;left:0;top:0;width:21px;height:21px;
  border-radius:50%;background:var(--cream);color:var(--ember-dk);font-weight:700;font-size:.76rem;
  display:flex;align-items:center;justify-content:center}
.rail-trust{font-size:.87rem;color:var(--muted);line-height:1.55}
.rail-trust b{color:var(--ink)}
.rail-trust a{color:var(--ember-dk)}
.rail-quote p{margin:0 0 8px;font-style:italic;color:var(--ink);font-size:.9rem;line-height:1.5}
.rail-quote .who{color:var(--muted);font-size:.82rem}
