/* Brending.hr - funnel.css: the 3-click plan funnel (#upit overlay + inline on /kontakt/), chat widget, search quick actions,
   "Moje obećanje". Jadran tokens from site.css :root. Mobile first: bottom sheet on phones, centred card on desktop. Plain hyphens only. */

body.is-locked{overflow:hidden}

/* ------------------------------------------------------------ overlay sheet */
.ov{opacity:0;transition:opacity .32s var(--ease)}
.ov.is-open{opacity:1}
.ov__sheet.fx-sheet{position:relative;max-height:min(94vh,94dvh);overscroll-behavior:contain;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(28px);transition:transform .5s var(--ease);animation:none}
.ov.is-open .ov__sheet.fx-sheet{transform:none}
.fx-sheet::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;border-radius:4px;background:var(--line-2);transform:translateX(-50%)}
.fx-x{position:absolute;top:16px;right:14px;z-index:2;width:40px;height:40px;background:var(--paper)}
@media (min-width:700px){
  .ov__sheet.fx-sheet{max-width:600px;padding:28px 32px 30px;transform:translateY(14px) scale(.985)}
  .fx-sheet::before{display:none}
  .fx-x{top:24px;right:24px}
}
@media (prefers-reduced-motion:reduce){.ov,.ov__sheet.fx-sheet{transition:none;transform:none}}

/* ------------------------------------------------------------ funnel shell */
.fx{--fx-r:16px;position:relative;min-width:0}
.kx__form,.kx__side{min-width:0}
.fx__hd{display:flex;align-items:center;gap:12px;padding:6px 52px 0 0;min-height:48px}
.fx--inline .fx__hd{padding-right:0}
.fx__av{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--soft)}
.fx__av img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.fx__on,.chw__on{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#2BB673;border:2px solid var(--paper)}
.fx__who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.fx__who b{font-weight:500;font-size:15.5px;letter-spacing:-.01em}
.fx__st{font-size:13px;color:var(--ink-3);line-height:1.35}
.fx__n{margin-left:auto;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.fx__bar{height:3px;border-radius:3px;background:var(--line);margin:14px 0 22px;overflow:hidden}
.fx__bar i{display:block;height:100%;background:var(--deep);border-radius:3px;transform-origin:0 50%;transform:scaleX(0);transition:transform .55s var(--ease)}
html[data-theme="dark"] .fx__bar i{background:var(--acc)}

.fx__b{min-height:200px}
.fx__b.is-in{animation:fxIn .45s var(--ease) both}
@keyframes fxIn{from{opacity:0;transform:translateY(12px)}}
.fx__q{font-size:clamp(26px,1.4vw + 19px,36px);font-weight:var(--hw);letter-spacing:-.03em;line-height:1.14;padding-bottom:.06em;margin:0;outline:none}
.fx__hint{display:flex;gap:8px;color:var(--ink-2);font-size:15px;margin:8px 0 0}

/* options */
.fx__o{display:grid;gap:8px;margin:20px 0 0}
.fx__opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 16px 12px 18px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--fx-r);color:var(--ink);
  transition:border-color .2s,background-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease);
  animation:fxOpt .5s var(--ease) both;animation-delay:calc(var(--n,0) * 40ms)}
@keyframes fxOpt{from{opacity:0;transform:translateY(10px)}}
.fx__ot{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;line-height:1.3;padding:2px 0}
.fx__ot b{font-weight:450;font-size:16.5px;letter-spacing:-.01em}
.fx__ot small{font-size:13.5px;color:var(--ink-3)}
.fx__opt>.i{width:18px;height:18px;color:var(--ink-3);transition:transform .3s var(--ease),color .2s}
.fx__kb{display:none;font:inherit;font-size:11.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;min-width:22px;height:22px;place-items:center;padding:0 5px;line-height:1}
@media (hover:hover) and (min-width:700px){.fx__kb{display:inline-grid}}
@media (hover:hover){.fx__opt:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow)}.fx__opt:hover>.i{transform:translateX(3px);color:var(--ink)}}
.fx__opt:active{transform:scale(.99)}
.fx__opt[aria-pressed="true"],.fx__opt.is-picked{border-color:var(--deep);background:var(--soft)}
.fx__opt.is-picked>.i{color:var(--deep);transform:translateX(4px)}
.fx__opt:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:var(--fx-r)}
.fx__o--grid{grid-template-columns:1fr 1fr;gap:7px}
.fx__o--grid .fx__opt{min-height:52px;padding:10px 10px 10px 14px;gap:8px}
.fx__o--grid .fx__ot b{font-size:14.5px;line-height:1.28}
.fx__o--grid .fx__opt>.i,.fx__o--grid .fx__kb{display:none}
@media (max-width:359px){.fx__o--grid{grid-template-columns:1fr}}

/* the question path, always visible on step 1 */
.fx__ask{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 0;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--fx-r);
  color:var(--ink);font-size:15.5px;text-align:left;transition:border-color .2s,background-color .2s}
.fx__ask span{flex:1}
.fx__ask .i{width:18px;height:18px;color:var(--deep)}
html[data-theme="dark"] .fx__ask .i{color:var(--acc)}
.fx__ask:hover{border-color:var(--ink);border-style:solid;background:var(--surface)}
.fx__ask--plan{border-style:solid;border-color:var(--line);margin-top:16px}

.fx__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;min-height:40px}
.fx__back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:var(--pill);color:var(--ink-2);font-size:14.5px;transition:background-color .2s,color .2s}
.fx__back .i{width:17px;height:17px}
.fx__back:hover{background:var(--soft);color:var(--ink)}
.fx__tip{font-size:13px;color:var(--ink-3)}

/* plan card */
.fx__plan{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px 18px 18px;box-shadow:var(--shadow)}
@media (min-width:700px){.fx__plan{padding:26px 26px 22px}}
.fx__pk{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13.5px;font-weight:450;color:var(--ink-2)}
.fx__pk .lid{width:9px;height:9px;border-radius:2.5px}
.fx__pn{font-size:clamp(30px,1.8vw + 22px,42px)}
.fx__why{color:var(--ink-2);margin:10px 0 0;font-size:16px;line-height:1.5}
.fx__ind{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--soft)}
.fx__it{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--deep);margin-bottom:4px}
html[data-theme="dark"] .fx__it{color:var(--acc)}
.fx__ind p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.fx__li{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.fx__li li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;animation:fxOpt .5s var(--ease) both;animation-delay:calc(120ms + var(--n,0) * 60ms)}
.fx__li .i{width:18px;height:18px;margin-top:2px;color:var(--deep)}
html[data-theme="dark"] .fx__li .i{color:var(--acc)}
.fx__steps{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;counter-reset:none}
.fx__steps li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.fx__steps b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);font-size:12px;font-weight:500;color:var(--ink)}
.fx__when{margin:12px 0 0;font-size:14px;color:var(--ink-3);line-height:1.5}
.fx__go{margin-top:18px}
.fx-sheet .fx__go{position:sticky;bottom:10px;z-index:2;box-shadow:0 -16px 20px 8px var(--surface),0 10px 0 10px var(--surface)}
.fx__more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;color:var(--ink-2);text-decoration:none}
.fx__more .i{width:16px;height:16px;transition:transform .3s var(--ease)}
.fx__more:hover{color:var(--ink)}.fx__more:hover .i{transform:translateX(3px)}

/* summary on the contact step */
.fx__sum{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 16px}
.fx__chips{display:flex;flex-wrap:wrap;gap:6px}
.fx__chips span{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:var(--pill);border:1px solid var(--line);font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.fx__chips span.is-plan{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.fx__edit{flex:none;font-size:13.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;min-height:30px}
.fx__edit:hover{color:var(--ink)}
.fx .fn__sub{margin:8px 0 18px}
.fx .fn__f{gap:12px}
.fx .fld input,.fx .fld textarea{font-size:17px}
.fx .fld textarea{min-height:84px}
.fx .fld textarea[aria-invalid="true"]{border-color:#C2410C}
.fx__send{margin-top:6px}
.fx .fn__alt{margin-top:2px}
.fx .fn__alt .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn.is-sending .fx__send{opacity:.7}

/* the promise, one line (funnel, cards) */
.pm-line{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink-2)}
.pm-line .i{width:19px;height:19px;flex:none;color:var(--deep);margin-top:1px}
html[data-theme="dark"] .pm-line .i{color:var(--acc)}
.pm-line b{font-weight:500;color:var(--ink)}
.pm-line a{color:var(--ink-2);white-space:nowrap}

/* inline (contact page) */
.fx--inline .fx__b{min-height:0}
.kx__form .fx__plan{box-shadow:none;background:var(--paper)}

/* ------------------------------------------------------------ chat widget */
.chw{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.chw[hidden]{display:none}
.chw.is-in{opacity:1;transform:none;pointer-events:auto}
@media (max-width:699px){body.has-consent .chw{opacity:0;pointer-events:none}}
.chw__bub{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:6px 18px 6px 6px;border-radius:var(--pill);background:var(--ink);color:var(--paper);
  box-shadow:var(--shadow-lg);text-align:left;transition:transform .3s var(--ease)}
.chw__bub:hover{transform:translateY(-2px)}
.chw__bub .chw__av{width:44px;height:44px}
.chw__bub .chw__on{border-color:var(--ink)}
.chw__t{display:flex;flex-direction:column;line-height:1.25}
.chw__t b{font-weight:500;font-size:15px}
.chw__t small{font-size:12.5px;opacity:.72}
.chw.is-open .chw__bub{transform:scale(.96)}
.chw__av{position:relative;flex:none;display:block;width:44px;height:44px;border-radius:50%;background:var(--soft)}
.chw__av img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%}
@media (max-width:420px){.chw__t small{display:none}.chw__bub{padding-right:16px;min-height:52px}.chw__bub .chw__av{width:40px;height:40px}}

.chw__panel{width:min(340px,calc(100vw - 28px));background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:14px 14px 14px;
  transform-origin:100% 100%;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.chw__panel[hidden]{display:none}
.chw__panel.is-on{opacity:1;transform:none}
.chw__hd{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chw__who{display:flex;flex-direction:column;flex:1;line-height:1.3;min-width:0}
.chw__who b{font-weight:500;font-size:15px}
.chw__who span{font-size:12.5px;color:var(--ink-3)}
.chw__x{width:36px;height:36px}
.chw__x .i{width:17px;height:17px}
.chw__msgs{display:flex;flex-direction:column;gap:6px;padding:12px 0 4px}
.chw__msg{margin:0;align-self:flex-start;max-width:92%;padding:10px 14px;border-radius:16px 16px 16px 6px;background:var(--soft);font-size:14.5px;line-height:1.45;color:var(--ink)}
.chw__panel.is-on .chw__msg{animation:fxOpt .45s var(--ease) both}
.chw__panel.is-on .chw__msg+.chw__msg{animation-delay:.12s}
.chw__qr{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 12px}
.chw__chip{min-height:38px;padding:0 14px;font-size:14px;background:var(--surface)}
.chw__panel.is-on .chw__chip{animation:fxOpt .45s var(--ease) both;animation-delay:calc(.2s + var(--n,0) * 50ms)}
.chw__alt{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.chw__alt .pill{flex:1;justify-content:center;min-height:40px;font-size:14px}

/* ------------------------------------------------------------ search quick actions */
.sq-wrap{display:grid;gap:12px;padding:6px 0 10px}
.sq{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--surface)}
.sq__h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:450;color:var(--ink-3)}
.sq__h .lid{width:8px;height:8px;border-radius:2px}
.sq__grid{display:grid;gap:6px}
@media (min-width:700px){.sq__grid{grid-template-columns:1fr 1fr}}
.sq__a{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--ink);border:1px solid transparent;transition:background-color .2s,border-color .2s}
a.sq__a:hover,.sq__a.is-act{background:var(--soft)}
.sq__a span:not(.sq__ic){display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sq__a b{font-weight:450;font-size:15.5px;overflow-wrap:anywhere}
.sq__a small{font-size:13px;color:var(--ink-3)}
.sq__ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--deep)}
html[data-theme="dark"] .sq__ic{color:var(--acc)}
.sq__ic .i{width:18px;height:18px}
.sq__a--go{margin-top:8px;border-color:var(--line)}
.sq__a--go>span:not(.sq__ic){flex:1}
.sq__a--go>.i{width:18px;height:18px;color:var(--ink-3)}
.sq__a--go .sq__ic{background:var(--acc);color:var(--on-acc)}
.sq__ans{font-size:clamp(20px,.8vw + 16px,24px);letter-spacing:-.02em;line-height:1.25;margin:0;padding-bottom:.04em}
.sq__sub{color:var(--ink-2);font-size:14.5px;margin:8px 0 14px}
.sq__go.is-act{box-shadow:0 0 0 3px var(--acc)}
.so__sh{width:100%;margin:12px 0 4px;font-size:13px;color:var(--ink-3)}
.so__sug{flex-wrap:wrap}
.so__sug+.so__sug{padding-top:4px}
.chip--q{gap:8px}
.chip--q .i{width:16px;height:16px}
.so__sug .chip.is-act{border-color:var(--ink);background:var(--soft)}

/* ------------------------------------------------------------ Moje obećanje (section) */
.pm{position:relative;display:grid;gap:22px;padding:28px 22px;border-radius:calc(var(--r) + 8px);background:var(--soft);overflow:hidden}
@media (min-width:1024px){.pm{grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px 56px}}
.pm__seal{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:var(--acc);color:var(--on-acc);transform:rotate(-12deg)}
.pm__seal .i{width:34px;height:34px;transform:rotate(12deg)}
@media (min-width:1024px){.pm__seal{width:112px;height:112px;border-radius:30px}.pm__seal .i{width:48px;height:48px}}
.pm__t .tag{margin-bottom:14px}
.pm__p{color:var(--ink-2);margin:14px 0 0;max-width:46ch}
.pm__li{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pm__li li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--surface);font-size:15.5px;line-height:1.45}
.pm__li .i{width:18px;height:18px;margin-top:2px;color:var(--deep)}
html[data-theme="dark"] .pm__li .i{color:var(--acc)}