/* ===== OK Nalog — FAQ section + FAQ chatbot (added on top of the Webflow export) ===== */
:root{
  --ok-yellow:#F5D44A; --ok-yellow-d:#e6c12f;
  --ok-ink:#15171c; --ok-muted:#5b6068; --ok-line:#ececec;
  --ok-bg:#fff; --ok-soft:#faf9f6;
}

/* ---------- FAQ section ---------- */
.ok-faq{font-family:Inter,system-ui,sans-serif;max-width:880px;margin:0 auto;padding:72px 20px 24px}
.ok-faq h2{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800;color:var(--ok-ink);text-align:center;margin:0 0 8px;letter-spacing:-.01em}
.ok-faq .ok-faq-sub{text-align:center;color:var(--ok-muted);margin:0 0 36px;font-size:1.02rem}
.ok-acc{border-top:1px solid var(--ok-line)}
.ok-acc-item{border-bottom:1px solid var(--ok-line)}
.ok-acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;
  cursor:pointer;text-align:start;padding:22px 4px;font-family:inherit;font-size:1.08rem;font-weight:600;color:var(--ok-ink)}
.ok-acc-q:hover{color:#000}
.ok-acc-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--ok-soft);border:1px solid var(--ok-line);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1;color:var(--ok-ink);transition:transform .3s,background .3s}
.ok-acc-item.open .ok-acc-ic{background:var(--ok-yellow);border-color:var(--ok-yellow);transform:rotate(45deg)}
.ok-acc-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.ok-acc-a-inner{padding:0 4px 24px;color:var(--ok-muted);line-height:1.7;font-size:1rem}
.ok-acc-a-inner a{color:#1f6feb;text-decoration:underline}
.ok-faq-note{margin-top:28px;background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:14px;
  padding:16px 18px;color:var(--ok-muted);font-size:.92rem;line-height:1.6}
.ok-faq-more{text-align:center;margin-top:24px}
.ok-faq-more a{display:inline-block;font-weight:600;color:var(--ok-ink);border-bottom:2px solid var(--ok-yellow);padding-bottom:2px;text-decoration:none}
.ok-faq-more a:hover{color:#000}
/* dedicated FAQ page header/footer */
.okfp{font-family:Inter,system-ui,sans-serif;color:var(--ok-ink)}
.okfp-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--ok-line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,5vw,40px)}
.okfp-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--ok-ink);text-decoration:none}
.okfp-brand img{width:34px;height:34px;object-fit:contain}
.okfp-nav{display:flex;align-items:center;gap:18px;font-size:.92rem}
.okfp-nav a{color:var(--ok-muted);text-decoration:none;font-weight:600}
.okfp-nav a:hover{color:var(--ok-ink)}
.okfp-lang a{color:var(--ok-muted);text-decoration:none;font-weight:700;padding:0 4px}
.okfp-lang a.on{color:var(--ok-ink)}
.okfp-foot{text-align:center;color:var(--ok-muted);font-size:.86rem;padding:36px 20px;border-top:1px solid var(--ok-line);margin-top:40px}
.okfp-foot a{color:var(--ok-ink);text-decoration:none;font-weight:600}

/* ---------- FAQ chatbot ---------- */
#ok-chat,#ok-chat *{box-sizing:border-box}
.ok-chat-btn{position:fixed;inset-inline-end:22px;inset-block-end:22px;z-index:9998;width:62px;height:62px;border-radius:50%;
  border:0;cursor:pointer;background:var(--ok-ink);box-shadow:0 10px 30px -8px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.ok-chat-btn:hover{transform:translateY(-2px) scale(1.04);background:#000}
.ok-chat-btn svg{width:28px;height:28px;color:#fff}
.ok-chat-panel{position:fixed;inset-inline-end:22px;inset-block-end:96px;z-index:9999;width:min(390px,calc(100vw - 32px));
  height:min(640px,calc(100vh - 120px));background:var(--ok-bg);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45);display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .28s,transform .28s,visibility .28s}
#ok-chat.open .ok-chat-panel{opacity:1;visibility:visible;transform:none}
.ok-chat-head{background:var(--ok-ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.ok-chat-head .av{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden}
.ok-chat-head .av img{width:84%;height:84%;object-fit:contain}
.ok-chat-head b{font-size:1rem;display:block}
.ok-chat-head span{font-size:.78rem;opacity:.7}
.ok-chat-x{margin-inline-start:auto;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;opacity:.8;line-height:1}
.ok-chat-x:hover{opacity:1}
.ok-chat-msgs{flex:1;overflow-y:auto;padding:18px;background:var(--ok-soft);display:flex;flex-direction:column;gap:12px}
.ok-msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:.93rem;line-height:1.55}
.ok-msg.bot{background:#fff;border:1px solid var(--ok-line);align-self:flex-start;border-bottom-left-radius:5px;color:var(--ok-ink)}
.ok-msg.me{background:var(--ok-ink);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.ok-msg a{color:#1f6feb;text-decoration:underline}
.ok-msg.me a{color:#fff}
.ok-chips-wrap{background:var(--ok-soft);border-top:1px solid var(--ok-line)}
.ok-chips-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;font-family:inherit;font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ok-muted);padding:10px 18px}
.ok-chips-toggle .arr{transition:transform .25s}
.ok-chips-wrap.collapsed .ok-chips{display:none}
.ok-chips-wrap.collapsed .ok-chips-toggle .arr{transform:rotate(-90deg)}
.ok-chips{display:flex;flex-wrap:nowrap;gap:8px;padding:0 18px 12px;background:var(--ok-soft);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ok-chips button{flex:0 0 auto;white-space:nowrap;font-family:inherit;font-size:.82rem;border:1px solid var(--ok-line);background:#fff;color:var(--ok-ink);
  border-radius:999px;padding:.5em .9em;cursor:pointer;transition:background .2s,border-color .2s}
.ok-chips button:hover{background:var(--ok-yellow);border-color:var(--ok-yellow)}
.ok-chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--ok-line);background:#fff}
.ok-chat-input input{flex:1;border:1px solid var(--ok-line);border-radius:999px;padding:.7em 1em;font-family:inherit;font-size:.92rem;color:var(--ok-ink)}
.ok-chat-input input:focus{outline:none;border-color:var(--ok-yellow-d)}
.ok-chat-input button{flex:0 0 auto;border:0;border-radius:50%;width:42px;height:42px;background:var(--ok-yellow);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ok-chat-input button:hover{background:var(--ok-yellow-d)}
.ok-chat-input button svg{width:18px;height:18px;color:var(--ok-ink)}
@media(prefers-reduced-motion:reduce){.ok-chat-panel,.ok-chat-btn,.ok-acc-a{transition:none}}
