/* ══════════════════════════════════════════════════════════════════════════
   MAPLETOP · KABÁT v2.3 — KALKULAČKA (funnel)
   ══════════════════════════════════════════════════════════════════════════
   Zdroj: heatable-redesign-v2.3-standalone.html — artboardy M1–M7
   (intro · krok kvízu · adresa a stavy validace · výsledky · kalendář ·
   kontrola objednávky · potvrzení) + spec list (KVÍZ, FORMULÁŘE, CENY,
   DOPORUČENÁ KARTA, STICKY CTA, MOTION, A11Y).

   ŽELEZNÉ PRAVIDLO TOHOTO SOUBORU
   ────────────────────────────────
   Mění se JEN VZHLED. Žádný řádek markupu, žádný řádek JS, žádný DOM háček.
   Proto zůstává v platnosti zlatý otisk enginu i bajtové porovnání motoru.
   Soubor se linkuje ZA inline <style> stránky, aby přebil bez !important.

   MOBIL JE PRVNÍ. Artboardy M1–M7 jsou 390 px; desktop je jejich rozšíření.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · PLOCHY A RYTMUS ──────────────────────────────────────────────── */
.wrap{max-width:1200px}
.screen.on{display:block}

/* ── 2 · HLAVIČKA A POSTUP (M2: „← · 3 / 8 · ~50 S · ✕") ───────────────── */
.fhead{background:transparent;border:0;box-shadow:none}
/* Segmentovaná lišta jako v návrhu (M2): jeden pruh, ale maskou rozřezaný
   na 8 dílků — bez zásahu do markupu a bez JS. */
.progline{height:4px;max-width:640px;margin:0 auto;background:#E4DED2;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(12.5% - 5px),transparent calc(12.5% - 5px) 12.5%);
          mask-image:repeating-linear-gradient(90deg,#000 0 calc(12.5% - 5px),transparent calc(12.5% - 5px) 12.5%)}
.progline i{display:block;height:4px;background:var(--accent);
  transition:width .3s cubic-bezier(.2,.8,.2,1)}
.progpill{margin-top:10px}
.progpill span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7C7473;background:transparent;padding:0}

/* ── 3 · INTRO (M1) ───────────────────────────────────────────────────── */
.intro{min-height:auto;padding:28px 20px 40px;align-items:flex-start}
.intro-col{max-width:560px;margin:0 auto;text-align:left;align-items:flex-start}
.intro-col h1,h1{font-weight:800;font-size:clamp(32px,8.6vw,44px);line-height:1.02;
  letter-spacing:-.04em;text-align:left}
.intro-sub{font-size:16px;line-height:1.55;color:#58504F;text-align:left;max-width:44ch}
.pc-form{width:100%;gap:12px}
.orsep{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A8384}
.trust-row{justify-content:flex-start}
.trust-it{font-size:13px;line-height:1.45;color:#58504F}

/* ── 4 · FORMULÁŘOVÁ POLE ─────────────────────────────────────────────────
   Spec: „Inputy bez borderu — plocha #F5F3ED, radius 14. Focus = outline 2 px
   offset −2. OK stav = brand-50 plocha." Původní pole byla pilulky s rámečkem. */
.inp,.fld .in,.field input,.field textarea,.field select,.sortsel,.kominbar input,.kominbar select{
  border:0;background:#F5F3ED;border-radius:14px;text-align:left;
  font-size:16px;font-weight:500;color:#231F20;padding:14px 16px;height:auto;min-height:52px;
  transition:background .18s cubic-bezier(.2,.8,.2,1),outline-color .18s}
.inp::placeholder,.fld .in::placeholder,.field input::placeholder,.field textarea::placeholder{color:#8A8384;font-weight:400}
.inp:focus,.fld .in:focus,.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid #B11F24;outline-offset:-2px;background:#fff}
.inp.bad,.fld .in.bad,.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  background:#FBEEEE;outline:2px solid #B11F24;outline-offset:-2px}
.field.ok input,.field.ok textarea{background:#FBEEEE;outline:2px solid rgba(177,31,36,.35);outline-offset:-2px}
.fld label,.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7C7473;font-weight:500}
.err{color:#B11F24;font-size:13px;line-height:1.45}

/* ── 5 · TLAČÍTKA (spec: active scale(.97), 180 ms) ───────────────────── */
.pill{font-weight:700;transition:background 180ms cubic-bezier(.2,.8,.2,1),
  color 180ms cubic-bezier(.2,.8,.2,1),transform 180ms cubic-bezier(.2,.8,.2,1)}
.pill:active{transform:scale(.97)}
.pill-accent{background:#ED1C24;color:#fff;font-weight:800}
.pill-accent:hover{background:#B11F24}
.pill-black{background:#231F20;color:#fff}
.pill-black:hover{background:#B11F24}
.pill-soft{background:#F5F3ED;color:#231F20}
.pill-soft:hover{background:#EFEBE3}
.btn-lg{min-height:56px;padding:16px 26px;font-size:16px}
.backbtn{gap:10px;font-weight:700}
.backbtn .rd{background:#F5F3ED;border:0}

/* ══ 6 · KVÍZ (M2) ════════════════════════════════════════════════════════
   Spec: „Karty 2×2 (mobil i desktop), vybraná = inverze (tmavá karta + check
   v pravém horním rohu)." Původní varianty byly pilulky — proto to působilo
   jako starý formulář v novém webu. */
.qwrap{max-width:640px;min-height:auto;align-items:stretch;
  padding:18px 0 40px;gap:6px;text-align:left}
h3.qh,.qh{font-weight:800;font-size:clamp(26px,7vw,34px);line-height:1.08;
  letter-spacing:-.035em;text-align:left}
.qsub{font-size:15px;line-height:1.5;color:#58504F;text-align:left;margin-top:2px;max-width:none}
.opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.opts.one{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.odd>.opt:last-child{grid-column:1/-1}

.opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;gap:6px;text-align:left;
  min-height:118px;padding:16px;border-radius:20px;border:0;
  background:#F5F3ED;color:#231F20;
  transition:background 180ms cubic-bezier(.2,.8,.2,1),
             transform 180ms cubic-bezier(.2,.8,.2,1),
             box-shadow 180ms cubic-bezier(.2,.8,.2,1)}
.opt:hover{background:#EFEBE3;transform:translateY(-3px);box-shadow:0 12px 30px -18px rgba(35,31,32,.28)}
.opt:active{transform:scale(.98)}
.opt .ic{margin-bottom:auto;color:#7C7473}
.opt .ic svg{width:30px;height:30px}
.opt .lb{display:flex;flex-direction:column;gap:3px}
.opt .lb b{font-size:15.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.opt .lb i{font-style:normal;font-size:12.5px;line-height:1.35;color:#7C7473}

/* vybraná = inverze + check v pravém horním rohu */
.opt .rd{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:999px;
  background:transparent;border:1.5px solid #D6D0C5;display:grid;place-items:center;
  transition:background 180ms,border-color 180ms,opacity 180ms}
.opt .rd svg{width:15px;height:15px;color:transparent}
.opt.sel{background:#2A2122;color:#fff;border:0}
.opt.sel .lb i{color:#CFC8C7}
.opt.sel .ic{color:#fff}
.opt.sel .rd{background:#ED1C24;border-color:#ED1C24}
.opt.sel .rd svg{color:#fff}
.opt:hover .rd{border-color:#B9B1B0}

.advice{border-radius:18px;background:#F5F3ED;border:0;font-size:14px;line-height:1.5;color:#58504F;padding:16px 18px}
.advice svg{color:#B11F24}
.qfoot{width:100%;justify-content:flex-start;margin-top:18px}

/* ── 7 · KARTY CEN (M4) — spec: číslo 800/−.045em, „Kč" 600/15 px muted ── */
.rc{border-radius:24px;border:0;box-shadow:0 12px 30px -18px rgba(35,31,32,.28);background:#fff}
.rc.feat,.rc.picked{box-shadow:0 30px 60px -30px rgba(35,31,32,.4)}
.rc-name{font-weight:800;letter-spacing:-.02em}
.pricebox .val{font-weight:800;letter-spacing:-.045em}
.pricebox .val sup,.pricebox .sub{font-weight:600;color:#7C7473}
.tag,.btag{border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.recap .ch{border-radius:999px;background:#F5F3ED;border:0;font-size:13px}
.kominbar{border-radius:20px;background:#F5F3ED;border:0}
.allgrid .rc{border-radius:20px}
.stopcard,.panel,.bundle,.modal,.loader-card,.gstrip,.conf .card{border-radius:24px;border:0;
  box-shadow:0 12px 30px -18px rgba(35,31,32,.28)}

/* ── 8 · KALENDÁŘ (M5) ────────────────────────────────────────────────── */
.day{border-radius:16px;border:0;background:#F5F3ED;transition:background 180ms,transform 180ms}
.day:hover{background:#EFEBE3;transform:translateY(-2px)}
.day.sel{background:#2A2122;color:#fff}
.day .dw{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em}

/* ── 9 · POTVRZENÍ (M7) ───────────────────────────────────────────────── */
.conf .tick-big{background:#ED1C24;color:#fff}
.conf h2{font-weight:800;letter-spacing:-.035em}

/* ── 10 · KROKOVADLO ──────────────────────────────────────────────────── */
.stp{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.stp .n{border-radius:999px}
.stp.on .n,.stp.done .n{background:#ED1C24;color:#fff}

/* ── 11 · DESKTOP (artboard 1440, obsah 1312) ─────────────────────────── */
@media (min-width:768px){
  .qwrap{max-width:720px;padding:32px 0 56px}
  .opt{min-height:132px;padding:18px}
  .opt .lb b{font-size:16.5px}
  .intro{padding:44px 20px 56px}
  .intro-col{max-width:640px}
}
@media (min-width:1024px){
  .opts{gap:14px}
}

/* ── 12 · REŽIM RÁMU — kalkulačka vsazená do hera homepage ────────────── */
html[data-embed] .qwrap{padding:6px 0 26px}
html[data-embed] h3.qh,html[data-embed] .qh{font-size:24px}
html[data-embed] .opt{min-height:104px;padding:14px;border-radius:18px}
html[data-embed] .opt .lb b{font-size:14.5px}
html[data-embed] .intro-col h1{font-size:26px}
html[data-embed] .wrap{padding:0 20px}