/* ============================================================
   VS izolace — konfigurátor: styly (scoped pod .vsk-scope)
   Generováno z vs-izolace-configurator/konfigurator.html
   ============================================================ */
/* ============================================================
   VS IZOLACE — KONFIGURÁTOR ZATEPLENÍ
   Čistý, minimalistický shadcn-style UI.
   Vše scopováno pod .vsk-scope, prefix tříd: vsk-
   ============================================================ */
.vsk-scope{
  /* neutrální zinc paleta */
  --vsk-bg:#fafafa;
  --vsk-card:#ffffff;
  --vsk-fg:#18181b;
  --vsk-muted-fg:#71717a;
  --vsk-subtle-fg:#a1a1aa;
  --vsk-border:#e4e4e7;
  --vsk-border-strong:#d4d4d8;
  --vsk-muted:#f4f4f5;
  /* značkový akcent (víno) */
  --vsk-accent:#8E2440;
  --vsk-accent-hover:#73182f;
  --vsk-accent-fg:#ffffff;
  --vsk-accent-soft:rgba(142,36,64,.06);
  --vsk-ring:rgba(142,36,64,.35);
  --vsk-radius:12px;
  --vsk-radius-lg:20px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:'cv11','ss01';
  color:var(--vsk-fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.vsk-scope *{box-sizing:border-box;margin:0;padding:0}
.vsk-scope button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.vsk-scope input,.vsk-scope textarea{font:inherit}
.vsk-scope img{max-width:100%;display:block}

/* ---------- sekce (bez karty, celá na bílé, vždy přes celou výšku okna) ---------- */
.vsk-card{
  width:100%;max-width:1240px;
  background:#fff;
  display:flex;flex-direction:column;justify-content:center;
}
/* v demu vyplní sekce celou výšku okna (100vh); v ostrém vložení zůstává auto */
/* hlavička — vystředěná, stepper nahoře na střed */
.vsk-head{
  padding:0 0 clamp(26px,3vw,42px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
}
.vsk-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--vsk-muted-fg)}
.vsk-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vsk-accent)}
.vsk-title{font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin-top:9px;color:var(--vsk-fg)}
.vsk-sub{margin:7px auto 0;color:var(--vsk-muted-fg);font-size:14px;line-height:1.5;max-width:520px}

/* kroky */
.vsk-steps{display:flex;align-items:center;gap:6px}
.vsk-panel .vsk-steps{margin-bottom:clamp(18px,2.4vw,26px)}
.vsk-panel .vsk-step-sep{flex:1}
.vsk-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--vsk-subtle-fg);transition:.2s}
.vsk-step b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--vsk-muted);border:1px solid var(--vsk-border);font-size:12px;font-weight:600;color:var(--vsk-muted-fg);transition:.2s}
.vsk-step span{display:none}
@media(min-width:720px){.vsk-step span{display:inline}}
.vsk-step.is-on{color:var(--vsk-fg)}
.vsk-step.is-on b{background:var(--vsk-accent);border-color:var(--vsk-accent);color:var(--vsk-accent-fg)}
.vsk-step.is-done{color:var(--vsk-fg)}
.vsk-step.is-done b{background:var(--vsk-fg);border-color:var(--vsk-fg);color:#fff}
.vsk-step-sep{width:18px;height:1px;background:var(--vsk-border)}
.vsk-step.is-done + .vsk-step-sep{height:2px;background:var(--vsk-fg)}
@media(min-width:720px){.vsk-step-sep{width:26px}}

/* ---------- tělo ---------- */
.vsk-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:940px){.vsk-body{grid-template-columns:1fr;gap:24px}}

/* ===== VIZUALIZACE (na bílé, přes levou polovinu) ===== */
.vsk-stage{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  background:#fff;
  overflow:visible;
}
.vsk-stage-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.vsk-stage-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--vsk-muted-fg);
  background:#fff;border:1px solid var(--vsk-border);
  padding:5px 11px;border-radius:999px;
}
.vsk-stage-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vsk-accent);box-shadow:0 0 0 3px rgba(142,36,64,.16)}
.vsk-stage-step{font-size:12px;font-weight:500;color:var(--vsk-subtle-fg);font-variant-numeric:tabular-nums}

/* plátno s domem */
.vsk-stage-canvas{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:0}
/* POKUS: náznak nebe za baráčkem — kružnice s gradientem jako hero nebe, fade do průhledna + blur */
.vsk-stage-canvas::before{
  content:"";position:absolute;left:50%;top:40%;z-index:0;
  width:min(96%,672px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    #7fb5da 0%, #bcdcef 34%, #eaf4fb 56%, rgba(234,244,251,0) 72%);
  /* fade nahoře (ať nezasahuje do nadpisu) i dole (ať nečouhá pod barákem) — nebe drží jen v horní části */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 14%,#000 38%,#000 58%,transparent 80%);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 14%,#000 38%,#000 58%,transparent 80%);
  filter:blur(16px);opacity:.83;pointer-events:none;
}
.vsk-house-img{position:relative;z-index:1}

/* ---- plovoucí technický nákres (krok 2) ---- */
.vsk-blueprint{
  position:absolute;left:-6px;bottom:-6px;
  width:clamp(150px,21vw,202px);aspect-ratio:1/1;
  pointer-events:none;opacity:0;transform:translateY(14px) scale(.88);
  transition:opacity .4s ease,transform .55s cubic-bezier(.2,.85,.25,1);
  z-index:6;
}
.vsk-blueprint.is-show{opacity:1;transform:none}
.vsk-bp-svg{width:100%;height:100%;display:block;overflow:visible}
.vsk-bp-face{stroke:#cfcfcf;stroke-width:1;stroke-linejoin:round}
.vsk-bp-wit{stroke:rgba(24,24,27,.32);stroke-width:.8}
.vsk-bp-dim{stroke:var(--vsk-accent);stroke-width:1}
.vsk-bp-tx{fill:#18181b;font:600 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.02em}
.vsk-bp-badge rect{fill:var(--vsk-accent)}
.vsk-bp-badge text{fill:#fff;font:700 9px/1 'Inter',system-ui,sans-serif;letter-spacing:.02em}
.vsk-bp-cap{fill:rgba(24,24,27,.4);font:600 7px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em}
.vsk-house-img{
  width:100%;max-width:none;height:auto;max-height:clamp(480px,50vw,720px);object-fit:contain;
  filter:drop-shadow(0 24px 32px rgba(24,24,27,.05));
  transform-origin:50% 90%;
}
@media(max-width:940px){.vsk-house-img{max-height:400px}}
/* "Jiná konstrukce": černobílý obrázek se sníženou sytostí, opacity 70 % */
.vsk-house-img.is-bw{filter:grayscale(1) drop-shadow(0 24px 32px rgba(24,24,27,.04));opacity:.7}
/* přechod: jelly squash/stretch bez fade (opacity zůstává 1) – párkrát poskočí a uklidní se */
.vsk-house-img.is-in{animation:vskImgJelly .64s ease-out both}
@keyframes vskImgJelly{
  0%{transform:scaleX(.95) scaleY(.95)}      /* naskočí mírně menší */
  26%{transform:scaleX(1.05) scaleY(.95)}    /* zmáčknutí: širší a nižší */
  60%{transform:scaleX(.97) scaleY(1.04)}    /* jediné vytažení nahoru */
  82%{transform:scaleX(1.008) scaleY(.995)}  /* jemné doznění (už ne nahoru) */
  100%{transform:scale(1)}                    /* klid */
}

/* popisek pod domem */
.vsk-stage-caption{position:relative;z-index:2;text-align:center;padding:4px 6px 6px}
.vsk-cap-name{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--vsk-fg)}
.vsk-cap-meta{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:9px;min-height:26px}
.vsk-cap-chip{
  font-size:12px;font-weight:500;color:var(--vsk-muted-fg);
  background:var(--vsk-muted);border:1px solid var(--vsk-border);
  padding:4px 11px;border-radius:999px;
}
.vsk-cap-chip.is-accent{background:var(--vsk-accent-soft);border-color:rgba(142,36,64,.22);color:var(--vsk-accent)}

/* ===== PANEL (parametry vpravo) ===== */
.vsk-panel{padding:2px 0;display:flex;flex-direction:column}
.vsk-pane{display:none;animation:vskFade .35s ease}
.vsk-pane.is-on{display:block}
@keyframes vskFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vsk-label{font-size:13px;font-weight:600;color:var(--vsk-fg);margin:22px 0 11px;display:flex;align-items:center;gap:8px}
.vsk-label:first-child{margin-top:0}
.vsk-label small{font-weight:450;color:var(--vsk-subtle-fg);font-size:12.5px}
.vsk-label-sep{width:2px;height:8px;border-radius:1px;align-self:center;background:var(--vsk-border);margin:0 -3px}
.vsk-help{position:relative;display:inline-flex}
.vsk-help-link{appearance:none;background:none;border:0;padding:0;font:inherit;font-weight:500;font-size:12.5px;color:var(--vsk-accent);cursor:pointer;opacity:.3;text-decoration:none;transition:opacity .15s ease}
.vsk-help-link:hover{opacity:.6}
.vsk-pop{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);z-index:50;width:min(320px,78vw);background:#fff;border:1px solid var(--vsk-border);border-radius:var(--vsk-radius);box-shadow:0 16px 38px rgba(24,24,27,.16);padding:14px 15px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.85,.25,1);font-weight:400}
.vsk-pop.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.vsk-pop::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:#fff;filter:drop-shadow(0 -1px 0 var(--vsk-border))}
.vsk-pop-t{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--vsk-subtle-fg);margin-bottom:11px}
.vsk-pop-row{display:block;font-size:12.5px;line-height:1.5;color:var(--vsk-muted-fg)}
.vsk-pop-row + .vsk-pop-row{margin-top:11px;padding-top:11px;border-top:1px solid var(--vsk-border)}
.vsk-pop-row b{display:block;font-weight:600;font-size:13px;color:var(--vsk-accent);margin-bottom:3px}

/* technologie */
.vsk-tech{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.vsk-tech{grid-template-columns:1fr}}
.vsk-scope .vsk-tech-card{
  position:relative;text-align:left;
  border:1px solid var(--vsk-border);border-radius:var(--vsk-radius);
  padding:14px 15px;background:#fff;transition:.18s;
  display:flex;flex-direction:column;gap:6px;
}
.vsk-scope .vsk-tech-card:hover{border-color:var(--vsk-border-strong);background:var(--vsk-muted)}
.vsk-scope .vsk-tech-card.is-active{border-color:var(--vsk-accent);background:var(--vsk-accent-soft);box-shadow:0 0 0 1px var(--vsk-accent)}
.vsk-tech-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:22px}
.vsk-tech-name{font-size:14.5px;font-weight:600;color:var(--vsk-fg);line-height:1.2}
.vsk-tech-badge{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--vsk-muted-fg);background:var(--vsk-muted);border:1px solid var(--vsk-border);padding:2px 7px;border-radius:999px;white-space:nowrap}
.vsk-tech-desc{font-size:12.5px;color:var(--vsk-muted-fg);line-height:1.45}
.vsk-tick{position:absolute;top:13px;right:13px;width:18px;height:18px;border-radius:50%;border:1px solid var(--vsk-border);background:#fff;display:grid;place-items:center;transition:.18s}
.vsk-tick svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:.18s}
.is-active .vsk-tick{background:var(--vsk-accent);border-color:var(--vsk-accent)}
.is-active .vsk-tick svg{opacity:1;transform:none}

/* výběr konstrukce */
.vsk-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:380px){.vsk-opts{grid-template-columns:1fr}}
.vsk-scope .vsk-opt{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:11px 12px;border:1px solid var(--vsk-border);border-radius:10px;
  background:#fff;color:var(--vsk-fg);font-size:13.5px;font-weight:500;
  text-align:left;transition:.16s;
}
.vsk-scope .vsk-opt:hover{border-color:var(--vsk-border-strong);background:var(--vsk-muted)}
.vsk-scope .vsk-opt.is-active{border-color:var(--vsk-accent);background:var(--vsk-accent-soft);box-shadow:0 0 0 1px var(--vsk-accent);color:var(--vsk-accent)}
/* jednotná ikona baráčku – zvýrazněná část konstrukce v primary, zbytek tmavý */
.vsk-opt svg.vsk-house-ico{width:24px;height:24px;flex:none;fill:none}
.vsk-opt svg.vsk-house-ico [stroke="black"]{stroke:var(--vsk-fg);transition:.16s}   /* obrys baráčku – tmavý */
.vsk-opt svg.vsk-house-ico [stroke="#8E2440"]{stroke:var(--vsk-accent)}             /* zvýrazněná konstrukce – primary */
.vsk-opt svg.vsk-house-ico [fill="#8E2440"]{fill:var(--vsk-accent)}                 /* výplň (otazník u „jiné") */
.vsk-opt span{flex:1;line-height:1.2}
.vsk-opt-check{width:15px;height:15px;flex:none;stroke:var(--vsk-accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:.16s}
.vsk-opt.is-active .vsk-opt-check{opacity:1;transform:none}

/* posuvníky */
.vsk-sliders{display:flex;flex-direction:column;gap:24px;margin-top:2px}
.vsk-slider-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.vsk-slider-name{font-weight:600;font-size:14px;color:var(--vsk-fg)}
.vsk-slider-val{display:flex;align-items:baseline;gap:5px}
.vsk-slider-val input{
  width:74px;text-align:right;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--vsk-fg);
  border:none;border-bottom:1.5px solid var(--vsk-border);background:transparent;padding:0 2px 2px;
  font-variant-numeric:tabular-nums;
}
.vsk-slider-val input:focus{outline:none;border-color:var(--vsk-accent)}
.vsk-unit{font-size:12.5px;font-weight:500;color:var(--vsk-muted-fg)}
.vsk-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(to right,var(--vsk-accent) var(--fill,40%),var(--vsk-border) var(--fill,40%));outline:none;cursor:pointer}
.vsk-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--vsk-accent);box-shadow:0 1px 4px rgba(24,24,27,.18);cursor:grab;transition:transform .14s}
.vsk-range::-webkit-slider-thumb:hover{transform:scale(1.1)}
.vsk-range::-webkit-slider-thumb:active{cursor:grabbing}
.vsk-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid var(--vsk-accent);box-shadow:0 1px 4px rgba(24,24,27,.18);cursor:grab}
.vsk-scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--vsk-subtle-fg);margin-top:8px}

/* odhad ceny */
.vsk-estimate{margin-top:26px;background:var(--vsk-muted);border-radius:var(--vsk-radius);padding:18px 20px}
.vsk-estimate-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--vsk-muted-fg)}
.vsk-estimate-val{font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--vsk-fg);margin-top:6px;font-variant-numeric:tabular-nums;transform-origin:0 50%;will-change:transform}
@keyframes vskPriceBump{0%{transform:scale(1)}28%{transform:scale(1.045)}100%{transform:scale(1)}}
.vsk-estimate-val.is-bump{animation:vskPriceBump .42s cubic-bezier(.2,.85,.25,1)}
.vsk-estimate-note{font-size:12.5px;color:var(--vsk-muted-fg);margin-top:8px;line-height:1.5}

/* shrnutí + formulář */
.vsk-summary{background:var(--vsk-muted);border-radius:var(--vsk-radius);padding:14px 16px;font-size:13.5px;line-height:1.65;margin-bottom:18px;color:var(--vsk-muted-fg)}
.vsk-summary b{color:var(--vsk-fg);font-weight:600}
.vsk-summary .vsk-edit{float:right;font-size:12.5px;font-weight:600;color:var(--vsk-accent);text-decoration:none;margin-left:12px}
.vsk-summary .vsk-edit:hover{text-decoration:underline}
.vsk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.vsk-grid{grid-template-columns:1fr}}
.vsk-field{display:flex;flex-direction:column;gap:6px}
.vsk-field.is-full{grid-column:1/-1}
.vsk-field label{font-size:12.5px;font-weight:500;color:var(--vsk-fg)}
.vsk-field label em{color:var(--vsk-accent);font-style:normal}
.vsk-field input,.vsk-field textarea{
  border:1px solid var(--vsk-border);border-radius:9px;padding:10px 12px;font-size:14px;
  background:#fff;color:var(--vsk-fg);transition:.15s;width:100%;
}
.vsk-field input::placeholder,.vsk-field textarea::placeholder{color:var(--vsk-subtle-fg)}
.vsk-field input:focus,.vsk-field textarea:focus{outline:none;border-color:var(--vsk-accent);box-shadow:0 0 0 3px var(--vsk-ring)}
.vsk-field input.is-error,.vsk-field textarea.is-error{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.vsk-field textarea{resize:vertical;min-height:72px}
/* ---- našeptávač adresy (Mapbox) ---- */
.vsk-ac{position:relative}
.vsk-ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid var(--vsk-border);border-radius:var(--vsk-radius);box-shadow:0 14px 30px rgba(24,24,27,.13);max-height:236px;overflow:auto;display:none}
.vsk-ac-list.is-open{display:block}
.vsk-ac-item{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--vsk-fg);cursor:pointer}
.vsk-ac-item:hover,.vsk-ac-item.is-active{background:var(--vsk-muted)}
.vsk-ac-item span{min-width:0;font-weight:500}
.vsk-ac-item small{display:block;color:var(--vsk-muted-fg);font-size:12px;font-weight:400}
.vsk-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--vsk-muted-fg);line-height:1.5;margin-top:14px;padding:2px;border-radius:8px}
.vsk-check + .vsk-check{margin-top:5px}
.vsk-check input{width:17px;height:17px;margin-top:1px;accent-color:var(--vsk-accent);flex:none}
.vsk-check a{color:var(--vsk-accent);font-weight:500}
.vsk-check.is-error{outline:2px solid #dc2626;outline-offset:2px}

/* navigace */
.vsk-nav{margin-top:auto;padding-top:24px;display:flex;gap:10px;align-items:center}
.vsk-scope .vsk-btn{border-radius:10px;padding:12px 20px;font-weight:600;font-size:14px;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.vsk-scope .vsk-btn-primary{background:var(--vsk-accent);color:var(--vsk-accent-fg);margin-left:auto;box-shadow:0 1px 2px rgba(142,36,64,.25)}
.vsk-scope .vsk-btn-primary:hover{background:var(--vsk-accent-hover)}
.vsk-scope .vsk-btn-primary:active{transform:translateY(1px)}
.vsk-scope .vsk-btn-ghost{color:var(--vsk-muted-fg);padding:12px 16px;border:1px solid var(--vsk-border)}
.vsk-scope .vsk-btn-ghost:hover{background:var(--vsk-muted);color:var(--vsk-fg)}
.vsk-fineprint{font-size:11.5px;color:var(--vsk-subtle-fg);text-align:center;margin-top:12px}
.vsk-fineprint-link{color:var(--vsk-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.vsk-fineprint-link:hover{color:var(--vsk-accent-hover)}

/* úspěch */
.vsk-success{display:none;text-align:center;padding:48px 10px;margin:auto 0;animation:vskFade .4s ease}
.vsk-success.is-on{display:block}
.vsk-success-icon{width:64px;height:64px;border-radius:50%;background:var(--vsk-accent);display:grid;place-items:center;margin:0 auto 18px;animation:vskPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes vskPop{from{transform:scale(0)}to{transform:scale(1)}}
.vsk-success-icon svg{width:30px;height:30px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vsk-success h3{font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--vsk-fg)}
.vsk-success p{color:var(--vsk-muted-fg);margin-top:8px;font-size:14px;line-height:1.55;max-width:380px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion: reduce){
  .vsk-scope *{animation:none!important;transition:none!important}
}
.vsk-scope :focus-visible{outline:2px solid var(--vsk-accent);outline-offset:2px;border-radius:8px}