/* Struktura lejka. Kolory i zaokrąglenia idą przez zmienne --f-*, które
   nadpisuje theme.css — dzięki temu zmiana skórki nie dotyka tego pliku. */

:root{
  --f-card:#fff;          /* tło karty lejka */
  --f-head:#F3F8FD;       /* pasek nagłówka */
  --f-ink:#122033;
  --f-navy:#0E2540;
  --f-muted:#68798E;
  --f-line:#E4EDF6;
  --f-accent:#0E9BD1;     /* aktywny krok, obwódki */
  --f-soft:#EAF7FD;       /* tło zaznaczonej opcji */
  --f-ok:#17A673;         /* wielki przycisk telefonu */
  --f-radius:20px;
  --f-btn-radius:15px;
  --f-shadow:0 22px 56px rgba(14,37,64,.16);
}

.funnel{background:var(--f-card);border-radius:var(--f-radius);box-shadow:var(--f-shadow);overflow:hidden;color:var(--f-ink)}
.funnel-head{padding:17px 24px 14px;background:var(--f-head);border-bottom:1px solid var(--f-line)}
.funnel-head .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.funnel-head .funnel-title{font-size:18.5px;color:var(--f-navy);letter-spacing:-.02em}
.funnel-head .step{font-size:12.5px;font-weight:800;color:var(--f-muted);letter-spacing:.06em}
.funnel-head .prog{height:4px;background:var(--f-line);border-radius:999px;margin-top:12px;overflow:hidden}
.funnel-head .prog i{display:block;height:100%;background:var(--f-accent);transition:width .3s}
/* Stała wysokość: karta nie skacze przy zmianie kroku (1 usterka → 14 marek →
   wycena), a dłuższa treść przewija się wewnątrz. Wysokość dobrana pod ekran
   wyceny, czyli najwyższy z kroków. */
.funnel-body{padding:20px 24px 24px;height:var(--f-body-h,460px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-gutter:stable}

/* Slot na znak marki jest szerszy niż wysoki, bo połowa logotypów to napisy
   (SAMSUNG, HONOR, OPPO, vivo, ASUS) o proporcji nawet 6:1. Symbol kwadratowy
   ogranicza wysokość i zostaje wyśrodkowany, napis rozciąga się na szerokość —
   oba wypełniają slot tak samo mocno. */
.fopt .e{display:flex;align-items:center;justify-content:center;width:42px;height:26px;flex:none}
.fopt .e svg{width:100%;height:100%;fill:currentColor}

.fq{font-size:20px;font-weight:800;color:var(--f-navy);letter-spacing:-.02em;margin-bottom:14px}
.fq-sm{font-size:16.5px;margin:20px 0 10px}
.fq-center{text-align:center}

.fopts{display:grid;gap:10px}
.fopt{display:flex;align-items:center;gap:14px;width:100%;background:var(--f-card);border:2px solid var(--f-line);
  border-radius:var(--f-btn-radius);padding:17px 19px;font-size:18px;font-weight:700;color:var(--f-navy);
  cursor:pointer;text-align:left;transition:.12s;letter-spacing:-.01em;font-family:inherit}
.fopt:hover{border-color:var(--f-accent);transform:translateY(-2px)}
.fopt.open{border-color:var(--f-accent);background:var(--f-soft)}
.fopt.soft{border-style:dashed;color:var(--f-muted);font-size:16px;font-weight:600;background:transparent}
.fopt .e{font-size:25px;line-height:1}

.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-left:6px}
.fchip{background:var(--f-card);border:2px solid var(--f-line);border-radius:999px;padding:11px 17px;
  font-size:15.5px;font-weight:700;color:var(--f-navy);cursor:pointer;font-family:inherit}
.fchip:hover{border-color:var(--f-accent);background:var(--f-soft)}
.fchip.soft{border-style:dashed;color:var(--f-muted);font-weight:600}

.fback{background:none;border:none;color:var(--f-muted);font-size:14.5px;cursor:pointer;padding:0 0 10px;font-family:inherit}
.fback:hover{color:var(--f-navy)}

.fwhat{font-size:15px;color:var(--f-muted);font-weight:700}
.fprice{font-size:54px;font-weight:800;color:var(--f-navy);letter-spacing:-.04em;line-height:1;margin:4px 0 2px}
.ffacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.ffacts div{background:var(--f-head);border-radius:13px;padding:12px 10px;text-align:center}
.ffacts b{display:block;font-size:15.5px;color:var(--f-navy);letter-spacing:-.01em}
.ffacts span{font-size:12px;color:var(--f-muted)}

/* wybór terminu (wariant G) */
.fslots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.fslot{background:var(--f-card);border:2px solid var(--f-line);border-radius:13px;padding:14px 10px;
  font-size:15.5px;font-weight:700;color:var(--f-navy);cursor:pointer;font-family:inherit}
.fslot:hover{border-color:var(--f-accent)}
.fslot.on{background:var(--f-accent);border-color:var(--f-accent);color:#fff}
.fslot.soft{grid-column:1/-1;border-style:dashed;color:var(--f-muted);font-weight:600}

.fcall{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--f-ok);color:#fff;
  border-radius:var(--f-btn-radius);padding:19px;font-size:19px;font-weight:800;text-decoration:none}
.fcall:hover{filter:brightness(1.06);text-decoration:none}
.for{text-align:center;color:var(--f-muted);font-size:13.5px;margin:13px 0 10px}
.for a{color:var(--f-accent);font-weight:700}

.fnum{display:flex;gap:9px}
.fnum input{flex:1;padding:17px;border:2px solid var(--f-line);border-radius:var(--f-btn-radius);
  font-size:17.5px;font-family:inherit;min-width:0;background:var(--f-card);color:var(--f-ink)}
.fnum input:focus{outline:none;border-color:var(--f-accent)}
.fnum button{background:var(--f-navy);color:#fff;border:none;border-radius:var(--f-btn-radius);
  padding:0 22px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.fnum button:disabled{opacity:.6;cursor:progress}
.fnum input[readonly]{background:var(--f-head);color:var(--f-muted)}

/* Turnstile w trybie interaction-only zwykle nic nie rysuje, więc slot nie
   może rezerwować miejsca na zapas — rośnie dopiero, gdy widżet się pojawi. */
.fcap{display:flex;justify-content:center}
.fcap:not(:empty){margin-top:12px}

.fmsg{font-size:13px;margin:10px 0 0;line-height:1.45;font-weight:600}
.fmsg.is-err{color:#C0392B}

.ffoot{font-size:12px;color:var(--f-muted);margin:10px 0 0;line-height:1.45}
.ffoot-center{text-align:center;font-size:14px}
.fcheck{width:74px;height:74px;border-radius:50%;background:var(--f-ok);color:#fff;display:grid;place-items:center;
  font-size:36px;margin:4px auto 16px}

@media(max-width:980px){
  .ffacts{grid-template-columns:1fr;gap:6px}
  .ffacts div{display:flex;justify-content:space-between;text-align:left;padding:11px 15px}
}