/* ============================================================
   FOR SAVINGS — Funnel „Ověřte si nárok" (samostatná landing)
   Navazuje na tokeny z styles.css
   ============================================================ */

.fnl-body{
  margin:0; min-height:100vh; font-family:var(--font-body); color:var(--navy);
  background:var(--navy);
  background-image:
    radial-gradient(ellipse 70% 60% at 80% -5%, rgba(97,188,170,.30), transparent 60%),
    radial-gradient(ellipse 60% 55% at 10% 105%, rgba(58,115,156,.32), transparent 65%);
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.fnl-bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000, transparent 80%);
}

/* top bar */
.fnl-top{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(18px,5vw,46px); }
.fnl-top .logo .wm-img{ height:34px; display:block; }
.fnl-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.8); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); padding:8px 14px; border-radius:999px; }
.fnl-badge .d{ width:8px; height:8px; border-radius:50%; background:var(--grad); }

/* stage */
.fnl-main{ position:relative; z-index:2; flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:14px clamp(16px,5vw,40px) 40px; }
.fnl-card{
  width:100%; max-width:760px; background:#fff; border-radius:26px;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.6); overflow:hidden;
  display:flex; flex-direction:column;
}

/* progress */
.fnl-prog{ height:6px; background:var(--gray-100); }
.fnl-prog-bar{ height:100%; width:0%; background:var(--grad); border-radius:0 4px 4px 0; transition:width .5s var(--ease); }

.fnl-inner{ padding:clamp(26px,4vw,48px); }
.fnl-step-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.fnl-kicker{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--green-600); }
.fnl-count{ font-size:13px; color:var(--slate); font-weight:500; }

.fnl-q{ font-family:var(--font-head); font-weight:800; font-size:clamp(24px,3.4vw,34px); letter-spacing:-.01em; line-height:1.12; color:var(--navy); margin:0 0 8px; text-wrap:balance; }
.fnl-sub{ font-size:15.5px; color:var(--slate); margin:0 0 26px; max-width:52ch; }

/* option tiles */
.fnl-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fnl-opts.cols-1{ grid-template-columns:1fr; }
.fnl-opt{
  display:flex; align-items:center; gap:15px; text-align:left;
  background:var(--cream-200); border:1.5px solid var(--gray-200); border-radius:16px;
  padding:18px 20px; cursor:pointer; transition:transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s;
  font-family:inherit; width:100%;
}
.fnl-opt:hover{ transform:translateY(-2px); border-color:var(--green); box-shadow:0 14px 30px -18px rgba(97,188,170,.7); }
.fnl-opt.sel{ border-color:transparent; background:linear-gradient(135deg, rgba(116,185,105,.16), rgba(97,188,170,.16)); box-shadow:0 0 0 2px var(--green) inset; }
.fnl-opt .oic{ width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid var(--gray-200); display:grid; place-items:center; flex:none; transition:background .18s, border-color .18s; }
.fnl-opt .oic svg{ width:23px; height:23px; color:var(--steel); transition:color .18s; }
.fnl-opt.sel .oic{ background:var(--grad); border-color:transparent; }
.fnl-opt.sel .oic svg{ color:#0c1a14; }
.fnl-opt .otx b{ font-family:var(--font-head); font-weight:700; font-size:16.5px; color:var(--navy); display:block; line-height:1.2; }
.fnl-opt .otx small{ font-size:13px; color:var(--slate); }
.fnl-opt .chk{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--gray-200); display:grid; place-items:center; flex:none; transition:all .18s; }
.fnl-opt .chk svg{ width:14px; height:14px; color:#fff; opacity:0; transform:scale(.5); transition:all .18s; }
.fnl-opt.sel .chk{ background:var(--grad); border-color:transparent; }
.fnl-opt.sel .chk svg{ opacity:1; transform:scale(1); color:#0c1a14; }

/* nav row */
.fnl-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:26px; gap:14px; }
.fnl-back{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--slate); background:none; border:none; cursor:pointer; padding:8px 4px; transition:color .18s; }
.fnl-back:hover{ color:var(--navy); }
.fnl-back svg{ width:17px; height:17px; }
.fnl-back[hidden]{ visibility:hidden; }
.fnl-trust{ font-size:12.5px; color:var(--slate-300); display:flex; align-items:center; gap:7px; }
.fnl-trust svg{ width:15px; height:15px; color:var(--green); }

/* slide animation */
.fnl-slide{ animation:fnlIn .45s var(--ease); }
@keyframes fnlIn{ from{ opacity:0; transform:translateX(24px) } to{ opacity:1; transform:none } }
.fnl-slide.back{ animation:fnlInBack .45s var(--ease); }
@keyframes fnlInBack{ from{ opacity:0; transform:translateX(-24px) } to{ opacity:1; transform:none } }

/* ---------- result screen ---------- */
.fnl-result{ text-align:center; padding:clamp(28px,4vw,46px); position:relative; }
.fnl-badge-ok{ width:84px; height:84px; border-radius:50%; background:var(--grad); display:grid; place-items:center; margin:0 auto 22px; box-shadow:0 20px 50px -18px rgba(97,188,170,.8); animation:pop .6s var(--ease) both; }
.fnl-badge-ok svg{ width:44px; height:44px; color:#0c1a14; }
@keyframes pop{ 0%{ transform:scale(0); opacity:0 } 60%{ transform:scale(1.12) } 100%{ transform:scale(1); opacity:1 } }
.fnl-result h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(26px,3.6vw,38px); color:var(--navy); margin:0 0 12px; letter-spacing:-.01em; }
.fnl-result .rlead{ font-size:16px; color:var(--slate); max-width:46ch; margin:0 auto 26px; }
.fnl-figure{ display:flex; flex-direction:column; gap:14px; align-items:stretch; max-width:560px; margin:0 auto 30px; }
.fnl-figrow{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.fnl-figrow .fnl-fig{ flex:1 1 200px; }
.fnl-fig{ background:var(--navy); color:#fff; border-radius:18px; padding:22px 26px; min-width:200px; }
.fnl-fig.save{ text-align:center; padding:28px 30px; border:1.5px solid rgba(116,185,105,.55); box-shadow:0 20px 54px -22px rgba(97,188,170,.7); }
.fnl-fig.save .n{ font-size:clamp(30px,5vw,54px); white-space:nowrap; }
.fnl-fig.save .l{ font-size:14.5px; font-weight:600; color:rgba(255,255,255,.82); margin-top:10px; }
.fnl-fig.save .l .sub{ display:none; }
.fnl-fig .l .sub{ display:block; font-weight:400; font-size:11.5px; color:rgba(255,255,255,.5); margin-top:3px; }
.fnl-fig .n{ font-family:var(--font-head); font-weight:800; font-size:clamp(21px,4.2vw,28px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fnl-fig .l{ font-size:13px; color:rgba(255,255,255,.66); margin-top:8px; }
.fnl-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:30px; }
.fnl-chip{ font-size:13px; font-weight:500; color:var(--navy); background:var(--cream-200); border:1px solid var(--gray-200); border-radius:999px; padding:7px 14px; }

/* contact form on result */
.fnl-form{ max-width:460px; margin:0 auto; text-align:left; }
.fnl-form h3{ font-family:var(--font-head); font-weight:800; font-size:20px; text-align:center; margin:0 0 6px; }
.fnl-form .fsub{ font-size:14px; color:var(--slate); text-align:center; margin:0 0 22px; }
.fnl-field{ margin-bottom:14px; }
.fnl-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.fnl-field input{ width:100%; font-family:inherit; font-size:15px; color:var(--navy); padding:14px 16px; border:1.5px solid var(--gray-200); border-radius:13px; background:var(--cream-200); transition:border-color .18s, background .18s, box-shadow .18s; }
.fnl-field input::placeholder{ color:var(--slate-300); }
.fnl-field input:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 4px rgba(116,185,105,.14); }
.fnl-field .err{ display:none; font-size:12.5px; color:#d9694f; margin-top:6px; }
.fnl-field.invalid input{ border-color:#e0795f; background:#fff5f3; }
.fnl-field.invalid .err{ display:block; }
.fnl-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fnl-submit{ width:100%; justify-content:center; margin-top:6px; }
.fnl-consent{ font-size:12px; color:var(--slate); text-align:center; margin-top:14px; line-height:1.5; }

/* contact as its own funnel step */
.fnl-form-step{ max-width:none; }
.fnl-form-step .fnl-nav{ margin-top:22px; }

/* GDPR consent checkbox */
.fnl-check{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin-top:8px; }
.fnl-check input{ position:absolute; opacity:0; width:0; height:0; }
.fnl-check .box{ width:24px; height:24px; border-radius:7px; border:1.5px solid var(--gray-200); background:var(--cream-200); display:grid; place-items:center; flex:none; margin-top:1px; transition:background .18s, border-color .18s, box-shadow .18s; }
.fnl-check .box svg{ width:15px; height:15px; color:#0c1a14; opacity:0; transform:scale(.5); transition:opacity .18s, transform .18s; }
.fnl-check input:checked + .box{ background:var(--grad); border-color:transparent; }
.fnl-check input:checked + .box svg{ opacity:1; transform:scale(1); }
.fnl-check input:focus-visible + .box{ box-shadow:0 0 0 4px rgba(116,185,105,.2); }
.fnl-check .ctx{ font-size:13.5px; color:var(--navy); line-height:1.4; }
.fnl-check .ctx small{ display:block; color:var(--slate); font-size:12.5px; margin-top:2px; }
.fnl-check.invalid .box{ border-color:#e0795f; background:#fff5f3; }
.err-consent{ display:none; font-size:12.5px; color:#d9694f; margin:8px 0 0 36px; }
.fnl-check.invalid + .err-consent{ display:block; }

/* result callout (ozveme se …) */
.fnl-callout{ display:flex; align-items:center; gap:12px; text-align:left; background:var(--cream-200); border:1px solid var(--gray-200); border-radius:14px; padding:15px 20px; font-size:14.5px; color:var(--navy); max-width:450px; margin:0 auto 24px; }
.fnl-callout svg{ width:22px; height:22px; color:var(--green-600); flex:none; }
.fnl-callout b{ white-space:nowrap; }

/* success */
.fnl-done{ text-align:center; padding:clamp(40px,6vw,70px) clamp(20px,4vw,40px); }
.fnl-done .ok{ width:76px; height:76px; border-radius:50%; background:var(--grad); display:grid; place-items:center; margin:0 auto 22px; }
.fnl-done .ok svg{ width:38px; height:38px; color:#0c1a14; }
.fnl-done h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(24px,3.4vw,32px); color:var(--navy); margin:0 0 12px; }
.fnl-done p{ font-size:15.5px; color:var(--slate); max-width:42ch; margin:0 auto 26px; }

/* confetti */
.fnl-confetti{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.cft{ position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; opacity:.9; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.9 } }

@media (max-width:560px){
  .fnl-opts{ grid-template-columns:1fr; }
  .fnl-figure{ flex-direction:column; align-items:center; }
  .fnl-badge{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .fnl-slide,.fnl-slide.back,.fnl-badge-ok{ animation:none; }
  .fnl-prog-bar{ transition:none; }
  .cft{ display:none; }
}