/* ══════════════════════════════════════════════════════════════════════════
   MAPLETOP · kalk-v23.css — kabát kalkulačky podle návrhu 2.3 (M1–M7)
   Vrstva NAD stávajícím stylem stránky; sahá jen na vzhled, nikdy na motor.
   Stav obrazovky drží html[data-screen] (nastavuje kalk-v23.js podle .screen.on).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── společné ──────────────────────────────────────────────────────────── */
body{background:var(--paper)}
.pill{min-height:44px}
.pill-accent{font-weight:800}
.btn-lg{height:56px;font-size:18px;font-weight:800}
.pill-soft{background:#F0EEE8}
.in,.inp{background:#F5F3ED!important;border:0!important;border-radius:var(--r-input)!important;padding:16px 18px!important;font:600 16px/1.3 var(--font)!important;color:var(--ink)!important}
.in:focus,.inp:focus{outline:2px solid var(--accent)!important;outline-offset:2px}
.fld.ok .in{outline:2px solid var(--accent-h);outline-offset:0;background:var(--brand-50)!important}
.fld.err .in,.pc-form.bad .inp{outline:2px solid var(--danger);outline-offset:0;background:var(--brand-50)!important}
.fld label{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.stopcard{border-radius:var(--r-card)}
.telbig{font:800 22px/1 var(--font);color:var(--accent-h)}

/* ── hlavička: na otázkách tmavá, ← · průběh · ✕ ───────────────────────── */
.fhead{position:sticky;top:0;z-index:40;background:var(--paper)}
html[data-screen="q"] body{background:var(--brand-900)}
html[data-screen="q"] .fhead{background:var(--brand-900)}
html[data-screen="q"] .fhead .flogo,html[data-screen="q"] .fhead .hact,html[data-screen="q"] #steps{display:none!important}
html[data-screen="q"] .fhead-in{min-height:64px;padding:10px 18px;justify-content:space-between}
.ktop{display:none}
html[data-screen="q"] .ktop{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:640px;margin:0 auto}
.ktop button,.ktop a{width:44px;height:44px;border-radius:var(--r-pill);border:0;background:#3A2F30;color:#fff;display:grid;place-items:center;font:700 18px/1 var(--font);cursor:pointer}
.ktop .kprog{background:#3A2F30;color:#fff;font:500 11px/1 var(--mono);padding:9px 12px;border-radius:var(--r-pill);letter-spacing:.06em;text-transform:uppercase}
html[data-screen="q"] .progline{background:#453738;height:5px;border-radius:3px;max-width:604px;margin:0 auto;overflow:hidden}
html[data-screen="q"] .progline i{background:var(--accent);height:5px;border-radius:3px}
html[data-screen="q"] .progpill{display:none}

/* ── M2 · otázka: tmavá obrazovka, karty 2×2 s fotkou, inverze vybrané ──── */
html[data-screen="q"] .qwrap{max-width:604px;margin:0 auto;padding:18px 0 120px;align-items:flex-start}
html[data-screen="q"] .qh{color:#fff;font:800 30px/1.1 var(--font);letter-spacing:-.035em;text-align:left;max-width:none}
html[data-screen="q"] .qsub{color:#B0A0A1;text-align:left;font-size:15px}
html[data-screen="q"] .opts{gap:12px;margin-top:18px}
html[data-screen="q"] .opt{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:var(--r-18);background:#3A2F30;border:0;color:#fff;position:relative;min-height:120px;text-align:left;transition:background .18s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1)}
html[data-screen="q"] .opt:hover{background:#453738;transform:translateY(-2px)}
html[data-screen="q"] .opt:active{transform:scale(.97)}
html[data-screen="q"] .opt .rd{position:absolute;top:12px;right:12px;width:22px;height:22px;background:#5A4A4B}
html[data-screen="q"] .opt .rd svg{display:none}
html[data-screen="q"] .opt.sel{background:#fff;color:var(--ink)}
html[data-screen="q"] .opt.sel .rd{background:var(--accent)}
html[data-screen="q"] .opt.sel .rd svg{display:block;color:#fff;width:12px;height:12px}
html[data-screen="q"] .opt .kimg{height:66px;width:100%;border-radius:12px;background:#413435;display:grid;place-items:center;overflow:hidden}
html[data-screen="q"] .opt .kimg img{height:62px;width:auto}
html[data-screen="q"] .opt .kimg.qq{font:700 22px/1 var(--font);color:#A08E8F;border:1px dashed #5A4A4B;background:transparent}
html[data-screen="q"] .opt.sel .kimg{background:#F5F3ED}
html[data-screen="q"] .opt .ic{width:auto;height:auto;color:#fff}
html[data-screen="q"] .opt.sel .ic{color:var(--accent)}
html[data-screen="q"] .opt .ic svg{width:40px;height:32px}
html[data-screen="q"] .opt .lb{font:700 15px/1.2 var(--font)}
html[data-screen="q"] .opt .lb i{display:block;font:400 12px/1.4 var(--font);color:#B0A0A1;font-style:normal;margin-top:3px}
html[data-screen="q"] .opt.sel .lb i{color:#6B6465}
html[data-screen="q"] .opts.one .opt{min-height:0;flex-direction:row;align-items:center;padding:18px 16px;padding-right:44px}
html[data-screen="q"] .advice{background:#3A2F30;color:#C9BCBD;border-radius:var(--r-16);max-width:none;width:100%}
html[data-screen="q"] .advice svg{color:#fff}
html[data-screen="q"] .qfoot{display:none}
.kfoot{display:none}
html[data-screen="q"] .kfoot{display:block;position:fixed;left:0;right:0;bottom:0;padding:12px 18px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--brand-900) 60%,rgba(42,33,34,0));z-index:30}
html[data-screen="q"] .kfoot .pill{width:100%;max-width:604px;margin:0 auto;height:56px;font:800 18px/1 var(--font)}
html[data-screen="q"] .kfoot .pill[disabled]{background:#453738;color:#A08E8F}

/* ── M1 · intro ─────────────────────────────────────────────────────────── */
#s-intro h1{font:800 44px/1.02 var(--font);letter-spacing:-.045em}
#s-intro h1 .uline{color:var(--accent)}
#s-intro h1 .uline svg{display:none}
#s-intro .pc-form .inp{border-radius:var(--r-pill)!important;padding:17px 20px!important}
#s-intro .trust-row{justify-content:flex-start}

/* ── M4 · výsledky ──────────────────────────────────────────────────────── */
#s-results .head{font:800 34px/1.08 var(--font);letter-spacing:-.04em}
#s-results .recap{background:#fff;box-shadow:var(--sh-card)}
#s-results .recap .ch{font:600 12px/1 var(--font);background:#F5F3ED;padding:8px 11px;border-radius:var(--r-pill);margin:3px}
#s-results .cards{gap:16px}
#s-results .rc{border:0;border-radius:var(--r-card);background:#fff;box-shadow:var(--sh-card)}
#s-results .rc.feat{box-shadow:0 30px 60px -24px rgba(35,31,32,.45);transform:translateY(-8px)}
#s-results .rc-img{background:#F5F3ED;height:220px;border-radius:var(--r-18);margin:8px}
#s-results .rc .tag{background:var(--brand-50);color:var(--accent-h);font:700 11px/1 var(--mono);letter-spacing:.06em;padding:8px 11px;border-radius:var(--r-pill);text-transform:uppercase}
#s-results .rc.feat .tag:first-child{background:var(--accent);color:#fff}
#s-results .pricebox{border:0;background:#F5F3ED;border-radius:var(--r-16)}
#s-results .val{font:800 34px/1 var(--font);letter-spacing:-.04em}
#s-results .pmonth{font:400 12px/1.45 var(--font);color:var(--ink-3)}
#s-results .gstrip{background:var(--brand-900);border-radius:var(--r-sec)}
#s-results .kominbar{background:#fff;border-radius:var(--r-16);box-shadow:var(--sh-card)}
.masked{filter:none!important;opacity:1!important;pointer-events:auto!important;letter-spacing:0!important}

/* ── M5 · termín ────────────────────────────────────────────────────────── */
#s-booking .day{border:0;background:#fff;border-radius:var(--r-16);box-shadow:var(--sh-card);padding:12px 14px}
#s-booking .day.sel{background:var(--ink);color:#fff}
#s-booking .day .dw{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
#s-booking .day .dd{font:800 18px/1.2 var(--font)}

/* ── M7 · potvrzení ─────────────────────────────────────────────────────── */
#s-confirm .head{font:800 34px/1.08 var(--font);letter-spacing:-.045em}

/* ── mobil ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  #s-intro h1{font-size:38px}
  html[data-screen="q"] .qh{font-size:26px}
  html[data-screen="q"] .opts{gap:10px}
  html[data-screen="q"] .opt{padding:12px;min-height:0}
  #s-results .cards{grid-template-columns:1fr}
  #s-results .rc.feat{transform:none}
}