/* =====================================================================
   VELKI100 — FAQ page · broadcast theme (white-on-yellow)
   ---------------------------------------------------------------------
   Loads on /faq-bd/ after page-broadcast.css. Themes the FAQ-specific
   pieces (search box, topic chips, accordion, help cards) to match home.
   Scoped under body.vk-bc; FAQ classes are unique to this page.
   ===================================================================== */

body.vk-bc {
    --ink:#0A0A0C; --yellow:#FFC21A; --yellow-2:#FFD24D; --red:#E4121F;
    --card:#fff; --line:rgba(10,10,12,.12); --ink-2:rgba(10,10,12,.72); --ink-3:rgba(10,10,12,.55);
    --bn:'Hind Siliguri', system-ui, sans-serif; --en:'Sora','Inter',system-ui,sans-serif;
}
body.vk-bc .vk-faq { background:transparent !important; }

/* ---- search box (in the yellow hero) → white pill ---- */
body.vk-bc .vk-faq__searchbox {
    background:#fff !important; border:1px solid rgba(10,10,12,.2) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.12) !important;
}
body.vk-bc .vk-faq__searchbox:focus-within { border-color:var(--ink) !important; box-shadow:0 18px 36px rgba(0,0,0,.18) !important; }
body.vk-bc .vk-faq__searchbox svg { color:var(--red) !important; }
body.vk-bc .vk-faq__searchbox input { color:var(--ink) !important; }
body.vk-bc .vk-faq__searchbox input::placeholder { color:var(--ink-3) !important; }

/* ---- topic chips ---- */
body.vk-bc .vk-faq__topics {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
    max-width:640px; margin:16px auto 0;
}
body.vk-bc .vk-faq__topics-lbl { font-family:var(--bn); font-size:13px; font-weight:700; color:rgba(10,10,12,.7); }
body.vk-bc .vk-faq__chip {
    font-family:var(--bn); font-size:13px; font-weight:700; cursor:pointer;
    padding:8px 15px; border-radius:999px; line-height:1;
    background:rgba(255,255,255,.7); border:1px solid rgba(10,10,12,.2); color:var(--ink);
    transition:transform .18s, background .18s, color .18s, border-color .18s;
}
body.vk-bc .vk-faq__chip:hover { transform:translateY(-2px); border-color:var(--ink); }
body.vk-bc .vk-faq__chip.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---- accordion → white cards ---- */
body.vk-bc .vk-faq__list { max-width:920px; }
body.vk-bc .vk-faq__item {
    background:#fff !important; border:1px solid var(--line) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.08) !important; border-radius:14px !important;
}
body.vk-bc .vk-faq__item:hover { border-color:rgba(10,10,12,.28) !important; }
body.vk-bc .vk-faq__item[open] {
    border-color:var(--ink) !important;
    box-shadow:0 22px 48px rgba(0,0,0,.16) !important;
}
body.vk-bc .vk-faq__item summary:hover { background:rgba(10,10,12,.03) !important; }
body.vk-bc .vk-faq__num {
    background:var(--yellow) !important; color:var(--ink) !important;
    box-shadow:0 6px 14px -4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
body.vk-bc .vk-faq__item[open] .vk-faq__num { background:var(--ink) !important; color:var(--yellow) !important; }
body.vk-bc .vk-faq__q { color:var(--ink) !important; }
body.vk-bc .vk-faq__chev {
    background:rgba(10,10,12,.05) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
}
body.vk-bc .vk-faq__item[open] .vk-faq__chev { background:var(--ink) !important; border-color:var(--ink) !important; color:var(--yellow) !important; }
body.vk-bc .vk-faq__answer { color:var(--ink-2) !important; }
body.vk-bc .vk-faq__answer a { color:var(--red) !important; text-decoration-color:rgba(228,18,31,.4) !important; }
body.vk-bc .vk-faq__empty { color:var(--ink-2) !important; }
body.vk-bc .vk-faq__empty h3 { color:var(--ink) !important; }
body.vk-bc .vk-faq__empty svg { color:rgba(10,10,12,.4) !important; }

/* ---- "still need help" channel cards ---- */
body.vk-bc .vk-faqhelp { max-width:var(--vk-max); margin:0 auto; padding:56px var(--vk-pad) !important; background:transparent !important; }
body.vk-bc .vk-faqhelp__head { text-align:center; max-width:720px; margin:0 auto 32px; }
body.vk-bc .vk-faqhelp__head .vk-eyebrow {
    display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
    background:rgba(10,10,12,.06); border:1px solid rgba(10,10,12,.2); color:var(--ink);
    font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
body.vk-bc .vk-faqhelp__head .vk-h2 {
    font-family:var(--bn); font-weight:700; color:var(--ink); font-size:clamp(24px,3.6vw,38px); line-height:1.2; margin:0 0 10px;
}
body.vk-bc .vk-faqhelp__head .vk-h2 em { font-style:normal; color:var(--red); position:relative; }
body.vk-bc .vk-faqhelp__head .vk-h2 em::after { content:""; position:absolute; left:0; right:0; bottom:.02em; height:.1em; background:var(--red); border-radius:2px; }
body.vk-bc .vk-faqhelp__head .vk-lead { font-family:var(--bn); color:var(--ink-2); font-size:15px; line-height:1.7; }
body.vk-bc .vk-faqhelp__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--vk-max); margin:0 auto; }
body.vk-bc .vk-faqhelp__card {
    --acc:#0A0A0C; position:relative; display:flex; flex-direction:column; text-decoration:none;
    padding:26px 22px 22px; border-radius:18px; background:#fff; border:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.1), inset 0 3px 0 var(--acc);
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
body.vk-bc .vk-faqhelp--wa  { --acc:#25D366; }
body.vk-bc .vk-faqhelp--cs  { --acc:#1877F2; }
body.vk-bc .vk-faqhelp--cmp { --acc:#E4121F; }
body.vk-bc .vk-faqhelp__card:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--acc) 45%, var(--line)); box-shadow:0 30px 60px rgba(0,0,0,.18), inset 0 3px 0 var(--acc); }
body.vk-bc .vk-faqhelp__icon {
    width:54px; height:54px; border-radius:14px; display:grid; place-items:center; color:#fff; margin-bottom:16px;
    background:linear-gradient(160deg, var(--acc), color-mix(in srgb, var(--acc) 62%, #000));
    box-shadow:0 12px 24px -8px color-mix(in srgb, var(--acc) 55%, transparent);
}
body.vk-bc .vk-faqhelp__card h3 { font-family:var(--bn); font-size:19px; font-weight:800; color:var(--ink); margin:0 0 7px; }
body.vk-bc .vk-faqhelp__card p { font-family:var(--bn); font-size:13.5px; color:var(--ink-2); line-height:1.6; margin:0 0 16px; flex:1; }
body.vk-bc .vk-faqhelp__go {
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    font-family:var(--bn); font-weight:800; font-size:13.5px; color:var(--ink);
    padding:10px 16px; border-radius:10px; background:rgba(10,10,12,.05); border:1px solid var(--line);
    transition:background .2s, color .2s, border-color .2s;
}
body.vk-bc .vk-faqhelp__go i { font-style:normal; transition:transform .2s; }
body.vk-bc .vk-faqhelp__card:hover .vk-faqhelp__go { background:var(--acc); color:#fff; border-color:transparent; }
body.vk-bc .vk-faqhelp__card:hover .vk-faqhelp__go i { transform:translateX(4px); }

@media (max-width:860px) { body.vk-bc .vk-faqhelp__grid { grid-template-columns:1fr; } }