/* css 3 kroku 5.3.2026 */
   #krok3 .ks-tool{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#1f2a37;
  max-width: 980px;
  margin: 0 auto;
}
#krok3 .ks-card{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}
#krok3 .ks-stack{ display:flex; flex-direction:column; gap:14px; }

#krok3 .ks-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
#krok3 .ks-title{
  margin:0;
  font-size: 20px;
  line-height:1.25;
  font-weight: 750;
}
#krok3 .ks-sub{
  margin:6px 0 0 0;
  color:#6b7280;
  font-size: 14px;
  line-height:1.35;
  max-width: 78ch;
}

#krok3 .ks-stepbadge{
  border:1px solid #d6dde6;
  background:#f8fafc;
  color:#334155;
  padding:6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

#krok3 .ks-step{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background:#ffffff;
}
#krok3 .ks-step.is-locked{
  opacity: .65;
  filter: grayscale(.1);
}
#krok3 .ks-step-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
#krok3 .ks-step-title{
  margin:0;
  font-size: 16px;
  font-weight: 800;
}
#krok3 .ks-step-desc{
  margin:6px 0 0 0;
  color:#6b7280;
  font-size: 13px;
  line-height: 1.35;
  max-width: 86ch;
}

#krok3 .ks-q{
  margin: 10px 0 10px 0;
  font-size: 14px;
  font-weight: 750;
}

#krok3 .ks-options{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
#krok3 .ks-options.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px){
  #krok3 .ks-options.cols-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px){
  #krok3 .ks-options{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  #krok3 .ks-options.cols-4{ grid-template-columns: 1fr; }
}

#krok3 .ks-opt{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fbfbfd;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, background .08s ease;
  position: relative;
  min-height: 96px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  text-align:left;
}
#krok3 .ks-opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-color:#cbd5e1;
  background:#ffffff;
}
#krok3 .ks-opt[aria-pressed="true"]{
  border-color:#2f6ea7;
  box-shadow: 0 0 0 3px rgba(47,110,167,.18);
  background:#ffffff;
}
#krok3 .ks-ico{
  width: 60px; height: 60px;
  border-radius: 16px;
  border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
  font-size: 30px;
  background:#fff;
  flex: 0 0 auto;

  /* roof overlay support */
  position: relative;
  padding-top: 8px;           /* pushes existing icon content slightly down */
  box-sizing: border-box;
}

#krok3 .ks-ico::before{
  content:"";
  position:absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 32px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%2070%22%3E%0A%20%20%3C%21--%20roof%20%28straight%2C%20broken%20only%20by%20window%29%20--%3E%0A%20%20%3Cpath%20d%3D%22M4%2054%20L80%2012%20L108.9%2028.0%22%20fill%3D%22none%22%20stroke%3D%22%23111827%22%20stroke-width%3D%2210%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%0A%20%20%3Cpath%20d%3D%22M145.4%2048.1%20L156%2054%22%20fill%3D%22none%22%20stroke%3D%22%23111827%22%20stroke-width%3D%2210%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%0A%0A%20%20%3C%21--%20gray%20interruption%20%28longer%20%2B%20lighter%2C%20reaches%20into%20black%29%20--%3E%0A%20%20%3Cpath%20d%3D%22M108.9%2028.0%20L145.4%2048.1%22%20fill%3D%22none%22%20stroke%3D%22%23D1D5DB%22%20stroke-width%3D%2214%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%0A%0A%20%20%3C%21--%20blue%20light%20BELOW%20roof/gray%20--%3E%0A%20%20%3Cpath%20d%3D%22M111.8%2022.7%20L148.3%2042.9%22%20fill%3D%22none%22%20stroke%3D%22%231D6FD6%22%20stroke-width%3D%226%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%0A%3C/svg%3E") no-repeat center;
  background-size: contain;
  pointer-events:none;
  opacity: 1;
}

#krok3 .ks-opt h4{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
#krok3 .ks-opt p{
  margin: 6px 0 0 0;
  color:#6b7280;
  font-size: 13px;
  line-height: 1.35;
}
#krok3 .ks-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  font-weight:650;
  width: fit-content;
}

#krok3 .ks-confirm{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#334155;
  font-size: 14px;
  display:none;
}
#krok3 .ks-confirm strong{ font-weight: 850; }

#krok3 .ks-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
#krok3 .ks-btn{
  border:1px solid #d1d5db;
  background:#fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 780;
  cursor:pointer;
}
#krok3 .ks-btn-primary{
  border-color:#2f6ea7;
  background:#2f6ea7;
  color:#fff;
}
#krok3 .ks-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
#krok3 .ks-btn-primary.is-ready{
  box-shadow: 0 10px 24px rgba(47,110,167,.28);
}

#krok3 .ks-hint{
  margin-top: 8px;
  color:#6b7280;
  font-size: 12px;
  line-height:1.35;
}
#krok3 .ks-hidden{ display:none !important; }

#krok3 .ks-progress{
  margin-top: 6px;
  display:flex;
  gap:8px;
  align-items:center;
  color:#6b7280;
  font-size: 12px;
}
#krok3 .ks-dot{
  width:8px; height:8px; border-radius:99px;
  background:#cbd5e1;
}
#krok3 .ks-dot.on{ background:#2f6ea7; }

/* ===== KROK 4 VÝSLEDEK ===== */
#krok3 .ks-result-main{
  font-size: 18px;
  font-weight: 850;
}
#krok3 .ks-result-explain{
  color:#334155;
  font-size: 14px;
  line-height:1.45;
}
#krok3 .ks-result-warn{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:12px;
  padding:12px;
  color:#7c2d12;
  font-size: 13px;
  display:none;
}
#krok3 .ks-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  font-weight:700;
  width: fit-content;
}
#krok3 .ks-mini{
  color:#6b7280;
  font-size:12px;
  line-height:1.35;
  margin-top: 6px;
}

/* ===== KROK 4 (nový layout) ===== */
#krok3 #ksStep4 .k4-wrap{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
#krok3 #ksStep4 .k4-section{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px 14px 12px;
  background:#fff;
}
#krok3 #ksStep4 .k4-secHead{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#krok3 #ksStep4 .k4-title{ margin:0; font-size:22px; line-height:1.15; letter-spacing:-.2px; }
#krok3 #ksStep4 .k4-ico{
  width:56px; height:56px;
  border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:30px;
  user-select:none;
}
#krok3 #ksStep4 .k4-ico svg{ width:34px; height:34px; display:block; }
#krok3 #ksStep4 .k4-ico{ color:#111827; }

#krok3 #ksStep4 .k4-ico-aha{ background:#ecfdf5; }
#krok3 #ksStep4 .k4-ico-pozor{ background:#fffbeb; }
#krok3 #ksStep4 .k4-ico-next{ background:#eef2ff; }
#krok3 #ksStep4 .k4-ico-next{ background:#16a34a; border-radius:10px; padding:6px; }

#krok3 #ksStep4 .k4-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 10px; }
#krok3 #ksStep4 .k4-chip{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.02);
  font-size:16px;
  line-height:1.1;
  white-space:nowrap;
}

#krok3 #ksStep4 .k4-verdict{
  font-size:20px;
  line-height:1.35;
  margin:0;
  font-weight:650;
  letter-spacing:-.2px;
}
#krok3 #ksStep4 .k4-explain{
  font-size:18px;
  line-height:1.45;
  margin-top:8px;
  color:rgba(0,0,0,.72);
}

#krok3 #ksStep4 .k4-box{
  font-size:18px;
  line-height:1.45;
  padding:12px 12px;
  border-radius:12px;
  background:rgba(245, 158, 11, .10);
  border:1px solid rgba(245, 158, 11, .25);
}
#krok3 #ksStep4 .k4-li{ margin:0 0 10px; }
#krok3 #ksStep4 .k4-li:last-child{ margin-bottom:0; }

#krok3 #ksStep4 .k4-next{ display:flex; flex-direction:column; gap:10px; }
#krok3 #ksStep4 .k4-rec{
  padding:12px 12px;
  border-radius:12px;
  background:rgba(99, 102, 241, .08);
  border:1px solid rgba(99, 102, 241, .18);
}
#krok3 #ksStep4 .k4-rec-title{ font-size:18px; font-weight:700; margin:0 0 6px; }
#krok3 #ksStep4 .k4-rec-text{ font-size:18px; line-height:1.45; margin:0; color:rgba(0,0,0,.78); }

/* Zvýšení typografie o 2 „řády“ pro celý krok 4 */
#krok3 #ksStep4 .ks-step-title{ font-size:28px; }
#krok3 #ksStep4 .ks-step-desc{ font-size:18px; }
#krok3 #ksStep4 .ks-hint{ font-size:16px; }

/* Mobilní drobnosti */
@media (max-width: 520px){
  #krok3 #ksStep4 .k4-title{ font-size:20px; }
  #krok3 #ksStep4 .k4-verdict{ font-size:19px; }
  #krok3 #ksStep4 .k4-chip{ font-size:15px; }
}

#krok3 #ksStep4 .k4-ico-next{ color:#16a34a; }
#krok3 #ksStep4 .k4-ico-next{ background:#16a34a; border-radius:10px; padding:6px; }
#krok3 #ksStep4 .k4-next-btn,
#krok3 #ksStep4 .k4-next-btn:hover{
  background:#16a34a;
  border-color:#16a34a;
  color:#ffffff;
}

/* KROK 4 – ikony */
#krok3 #ksStep4 .k4-ico svg{ width:34px; height:34px; display:block; }
#krok3 #ksStep4 .k4-ico{ color:#111827; }
#krok3 #ksStep4 .k4-ico-pozor{ background:#fffbeb; } /* keep section bg; sign itself is red/white */
#krok3 #ksStep4 .k4-ico-next{ color:#ffffff; }
#krok3 #ksStep4 .k4-ico-next{ background:#16a34a; border-radius:10px; padding:6px; } /* arrow uses currentColor -> white */

/* zelené CTA tlačítko (včetně hover) */
#krok3 #ksStep4 .k4-next-btn,
#krok3 #ksStep4 .k4-next-btn:hover,
#krok3 #ksStep4 .k4-next-btn:active{
  background:#16a34a !important;
  border-color:#16a34a !important;
  color:#ffffff !important;
}

/* NEXT CTA only */
#krok3 #ksStep4 .k4-next-btn{
  background-color:#16a34a !important;
  border-color:#16a34a !important;
  color:#ffffff !important;
}
#krok3 #ksStep4 .k4-next-btn *{
  color:#ffffff !important;
}

/* KROK 4: tlačítko Zpět má být 1:1 stejné jako v kroku 3 */
#krok3 #ksStep4 #ksBack3{
  border:1px solid #d1d5db;
  background:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-weight:780;
  cursor:pointer;
}
#krok3 #ksStep4 #ksBack3:hover{
  background:#f9fafb;
}

/* KROK 4 – mikro animace při zobrazení výsledku */
@keyframes krok3K4PopIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes krok3K4PulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(47,110,167,.20); }
  100% { box-shadow: 0 0 0 10px rgba(47,110,167,0); }
}

/* celé vyhodnocení */
#krok3 #ksStep4.k4-animate .k4-wrap{
  animation: krok3K4PopIn .28s ease-out both;
}

/* jemné postupné “naskočení” sekcí */
#krok3 #ksStep4.k4-animate .k4-section{
  opacity: 0;
  transform: translateY(10px);
  animation: krok3K4PopIn .32s ease-out both;
}

#krok3 #ksStep4.k4-animate .k4-s1{ animation-delay: .02s; }
#krok3 #ksStep4.k4-animate .k4-s2{ animation-delay: .08s; }
#krok3 #ksStep4.k4-animate .k4-s3{ animation-delay: .14s; }

/* CTA dostane decentní pulse, aby zrak našel “další krok” */
#krok3 #ksStep4.k4-animate #ksSendEmail{
  animation: krok3K4PulseRing .55s ease-out .22s both;
}

/* respekt k preferenci: méně pohybu */
@media (prefers-reduced-motion: reduce){
  #krok3 #ksStep4.k4-animate .k4-wrap,
  #krok3 #ksStep4.k4-animate .k4-section,
  #krok3 #ksStep4.k4-animate #ksSendEmail{
    animation: none !important;
    transform: none !important;
  }
}