/* BulkVyapar FAQ — premium two-column knowledge base
   Scope: FAQ pages only. Existing global site UI is untouched. */

.faq-page{background:#f7faff;color:#0F2D55}

/* Hero */
.faq-hero{
  position:relative;
  overflow:hidden;
  padding:54px 0 42px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 18%,rgba(240,68,155,.18),transparent 28%),
    radial-gradient(circle at 73% 86%,rgba(255,122,31,.16),transparent 30%),
    linear-gradient(124deg,#0b214d 0%,#0a4fbf 54%,#2472C0 100%);
}
.faq-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 42%);
}
.faq-hero:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,#2472C0 0%,#2472C0 48%,#F77402 76%,#F77402 100%);
}
.faq-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:42px;
  align-items:center;
}
.faq-hero .eyebrow{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.11);
  color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.faq-hero h1,
.faq-hero-title{
  margin:13px 0 12px;
  max-width:880px;
  color:#fff;
  font-size:clamp(36px,4.4vw,58px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.045em;
}
.faq-hero p{
  max-width:780px;
  margin:0;
  color:#dbe8ff;
  font-size:15.5px;
  line-height:1.75;
}
.faq-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.faq-hero .btn-primary{
  background:linear-gradient(135deg,#2472C0,#2472C0);
  box-shadow:0 14px 32px rgba(0,27,80,.26);
}
.faq-hero .btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.36);
  background:rgba(255,255,255,.08);
}
.faq-hero-card{
  position:relative;
  padding:24px 24px 22px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  backdrop-filter:blur(14px);
  box-shadow:0 22px 55px rgba(0,22,65,.22);
}
.faq-hero-card:before{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  right:22px;
  height:3px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,#65a4ff,#F77402,#F77402);
}
.faq-hero-card-kicker{
  display:block;
  margin-bottom:11px;
  color:#d6e6ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.faq-hero-card strong{display:block;color:#fff;font-size:30px;line-height:1.15;letter-spacing:-.03em}
.faq-hero-card>span:not(.faq-hero-card-kicker){display:block;margin-top:7px;color:#fff;font-size:13px;font-weight:800}
.faq-hero-card small{display:block;margin-top:14px;color:#d7e6ff;font-size:11px;line-height:1.65}

/* Breadcrumb on individual FAQ URL */
.faq-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:17px;color:#bed5f8;font-size:10px}
.faq-breadcrumb a{color:#fff;font-weight:800}
.faq-breadcrumb a:hover{text-decoration:underline}

/* Main content */
.faq-content{padding-top:26px;padding-bottom:64px}
.faq-search-card{
  margin-bottom:20px;
  padding:17px 18px;
  border:1px solid #dbe6f5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 34px rgba(20,62,128,.075);
}
.faq-search-card>label{
  display:block;
  margin-bottom:8px;
  color:#4f6486;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.faq-search-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid #cfdced;
  border-radius:13px;
  background:#fbfdff;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.faq-search-box:focus-within{
  border-color:#8cb9ff;
  background:#fff;
  box-shadow:0 0 0 4px #eaf3ff;
}
.faq-search-box>span{color:#5c7396;font-size:21px}
.faq-search-box input{width:100%;padding:13px 0;border:0;outline:0;background:transparent;color:#0F2D55;font-size:13px}
.faq-search-box button{
  border:0;
  border-radius:9px;
  padding:7px 10px;
  background:#edf5ff;
  color:#0b5bd8;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

/* 20/80 layout */
.faq-workspace{
  display:grid;
  grid-template-columns:minmax(210px,19%) minmax(0,81%);
  gap:22px;
  align-items:start;
}
.faq-sidebar{min-width:0}
.faq-sidebar-inner{
  position:sticky;
  top:92px;
  max-height:calc(100vh - 112px);
  overflow:auto;
  padding:14px;
  border:1px solid #dce6f4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(20,62,128,.07);
  scrollbar-width:thin;
  scrollbar-color:#c4d5ec transparent;
}
.faq-sidebar-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding:2px 4px 11px;
  border-bottom:1px solid #edf2f8;
}
.faq-sidebar-head span{
  color:#17375f;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}
.faq-sidebar-head strong{
  color:#8a98ad;
  font-size:8.5px;
  font-weight:850;
  white-space:nowrap;
}
.faq-category-list{display:grid;gap:6px;margin-top:10px}
.faq-category-list button{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#49617f;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.faq-category-list button span{
  overflow:hidden;
  font-size:10.5px;
  font-weight:780;
  line-height:1.35;
}
.faq-category-list button b{
  min-width:25px;
  padding:4px 6px;
  border-radius:999px;
  background:#f0f5fc;
  color:#71839f;
  text-align:center;
  font-size:8.5px;
}
.faq-category-list button:hover{
  border-color:#d9e6f7;
  background:#f7fbff;
  color:#195FA8;
}
.faq-category-list button.active{
  border-color:#bcd5fb;
  background:linear-gradient(135deg,#edf5ff,#f9fbff);
  color:#0759d2;
  box-shadow:inset 3px 0 #2472C0;
}
.faq-category-list button.active b{background:#2472C0;color:#fff}
.faq-sidebar-note{
  display:grid;
  gap:3px;
  margin-top:12px;
  padding:11px;
  border:1px solid #f2dfc7;
  border-radius:12px;
  background:linear-gradient(135deg,#fffaf3,#fff);
}
.faq-sidebar-note strong{color:#9a5a16;font-size:9.5px}
.faq-sidebar-note span{color:#7c6b59;font-size:8.5px;line-height:1.45}

/* FAQ main column */
.faq-main{min-width:0}
.faq-main-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:15px;
  padding:3px 2px 0;
}
.faq-main-kicker{
  display:block;
  margin-bottom:3px;
  color:#2472C0;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.faq-main-head h2{
  margin:0;
  color:#0F2D55;
  font-size:22px;
  line-height:1.18;
  letter-spacing:-.025em;
}
.faq-visible-count{
  color:#71819b;
  font-size:9.5px;
  font-weight:850;
  white-space:nowrap;
}

.faq-category-section{margin:0 0 24px}
.faq-category-section>header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-end;
  margin-bottom:10px;
}
.faq-category-section>header>div{display:flex;gap:11px;align-items:flex-start}
.faq-category-section>header>div>span{
  display:grid;
  place-items:center;
  min-width:34px;
  height:34px;
  border:1px solid #d7e5f9;
  border-radius:10px;
  background:#edf5ff;
  color:#0e5fd7;
  font-size:10px;
  font-weight:950;
}
.faq-category-section h3{
  margin:0;
  color:#192b4d;
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.015em;
}
.faq-category-section header p{
  margin:3px 0 0;
  color:#76859d;
  font-size:9.5px;
  line-height:1.5;
}
.faq-category-section header>b{
  color:#7b8aa1;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}

.faq-list{display:grid;gap:8px}
.faq-item{
  overflow:hidden;
  border:1px solid #dfe7f2;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(20,62,128,.035);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.faq-item:hover{
  border-color:#c5d9f6;
  box-shadow:0 10px 28px rgba(20,62,128,.075);
  transform:translateY(-1px);
}
.faq-item.featured{border-color:#c8dcfb}
.faq-item.is-open{
  border-color:#9fc5ff;
  box-shadow:0 14px 36px rgba(9,108,247,.105);
  transform:none;
}
.faq-question-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:58px;
  padding:14px 15px 14px 17px;
  color:#182947;
  text-decoration:none;
}
.faq-question-text{
  margin:0;
  color:inherit;
  font-size:12.5px;
  font-weight:850;
  line-height:1.48;
  letter-spacing:-.005em;
}
h1.faq-question-text{
  font-size:16px;
  line-height:1.42;
  letter-spacing:-.015em;
}
.faq-plus{
  display:grid;
  place-items:center;
  width:30px;
  min-width:30px;
  height:30px;
  border:1px solid #d5e4fa;
  border-radius:9px;
  background:#eef5ff;
  color:#0a61df;
  font-style:normal;
  font-size:20px;
  font-weight:500;
  line-height:1;
  transition:.18s ease;
}
a.faq-question-link:hover .faq-plus{
  border-color:#2472C0;
  background:#2472C0;
  color:#fff;
}
.faq-question-current{background:linear-gradient(135deg,#f8fbff,#fff)}
.faq-plus-close{
  text-decoration:none;
  transform:rotate(45deg);
  border-color:#2472C0;
  background:#2472C0;
  color:#fff;
}
.faq-plus-close:hover{filter:brightness(.94)}
.faq-answer{
  padding:0 17px 18px;
  border-top:1px solid #edf2f8;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.faq-answer-label{
  display:inline-flex;
  margin-top:15px;
  padding:5px 8px;
  border-radius:999px;
  background:#eaf3ff;
  color:#0759cf;
  font-size:8px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.faq-answer p{
  margin:11px 0 0;
  color:#4c607e;
  font-size:12px;
  line-height:1.78;
}
.faq-answer-topics{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed #dfe7f2;
  color:#7b889c;
  font-size:9px;
  line-height:1.5;
}
.faq-answer-topics strong{color:#526885}

.faq-no-results{
  margin-bottom:20px;
  padding:28px;
  border:1px dashed #cbd8e9;
  border-radius:15px;
  background:#fff;
  text-align:center;
}
.faq-no-results strong,.faq-no-results span{display:block}
.faq-no-results strong{color:#1f3557;font-size:13px}
.faq-no-results span{margin:5px 0 11px;color:#74839a;font-size:10px}
.faq-no-results a{color:#2472C0;font-size:10px;font-weight:900}

/* Footer help panel */
.faq-bottom-card{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  margin-top:34px;
  padding:24px;
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 10%,rgba(240,68,155,.12),transparent 27%),
    linear-gradient(125deg,#0F2D55,#123d78);
  color:#fff;
  box-shadow:0 18px 40px rgba(16,32,82,.15);
}
.faq-bottom-card h2{margin:6px 0 6px;font-size:19px}
.faq-bottom-card p{margin:0;max-width:720px;color:#cad9ee;font-size:11px;line-height:1.65}
.faq-bottom-card>div:last-child{display:flex;gap:9px;flex-wrap:wrap}
.faq-bottom-card .eyebrow{background:rgba(255,255,255,.1);color:#fff}
.faq-bottom-card .btn-ghost{border-color:#5d7396;background:transparent;color:#fff}

/* 404 */
.faq-not-found{padding:70px 0}

/* Tablet/mobile */
@media(max-width:980px){
  .faq-hero{padding:44px 0 34px}
  .faq-hero-grid{grid-template-columns:1fr}
  .faq-hero-card{display:none}
  .faq-workspace{grid-template-columns:1fr}
  .faq-sidebar-inner{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    padding:12px;
  }
  .faq-sidebar-head{align-items:center}
  .faq-category-list{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:thin;
  }
  .faq-category-list button{
    flex:0 0 auto;
    width:auto;
    max-width:260px;
    grid-template-columns:auto auto;
    white-space:nowrap;
  }
  .faq-category-list button.active{box-shadow:inset 0 -3px #2472C0}
  .faq-sidebar-note{display:none}
}

@media(max-width:640px){
  .faq-hero h1,.faq-hero-title{font-size:34px}
  .faq-hero p{font-size:13px}
  .faq-hero-actions .btn{width:100%}
  .faq-content{padding-top:18px;padding-bottom:42px}
  .faq-search-card{padding:13px}
  .faq-main-head{align-items:flex-start;flex-direction:column;gap:5px}
  .faq-main-head h2{font-size:19px}
  .faq-category-section>header{align-items:flex-start}
  .faq-category-section>header>div>span{display:none}
  .faq-category-section h3{font-size:15px}
  .faq-category-section header p{font-size:9px}
  .faq-question-link{min-height:54px;padding:13px}
  .faq-question-text{font-size:11.5px}
  h1.faq-question-text{font-size:14px}
  .faq-plus{width:28px;min-width:28px;height:28px}
  .faq-answer{padding:0 13px 15px}
  .faq-answer p{font-size:11.5px}
  .faq-bottom-card{align-items:flex-start;flex-direction:column;padding:20px}
}


/* ==========================================================
   V5 — Desktop sticky knowledge-base workspace
   - Search stays under the existing site header
   - Topic sidebar stays visible below the search
   - Question column scrolls internally
   - Removes duplicate main "All Questions / 118 questions" header
   ========================================================== */

@media (min-width:981px){
  /* Existing public header is approximately this height.
     The search bar sticks immediately beneath it while the FAQ page is being read. */
  .faq-search-card{
    position:sticky;
    top:76px;
    z-index:24;
    margin-bottom:16px;
    box-shadow:0 10px 30px rgba(20,62,128,.10);
  }

  /* Keep the whole FAQ browser within the remaining viewport.
     The document can reach this workspace, then questions scroll inside it. */
  .faq-workspace{
    height:calc(100vh - 196px);
    min-height:560px;
    max-height:760px;
    overflow:visible;
    align-items:stretch;
  }

  .faq-sidebar{
    height:100%;
    min-height:0;
  }

  .faq-sidebar-inner{
    position:sticky;
    top:188px;
    height:100%;
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .faq-main{
    height:100%;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:7px;
    scrollbar-width:thin;
    scrollbar-color:#bfd0e8 transparent;
  }

  .faq-main::-webkit-scrollbar{width:8px}
  .faq-main::-webkit-scrollbar-track{background:transparent}
  .faq-main::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#c5d4e8;
  }

  /* With the duplicate top heading removed, start directly from topic content. */
  .faq-main > .faq-category-section:first-of-type{
    margin-top:0;
  }

  .faq-no-results{
    margin-top:0;
  }
}

/* Slightly denser question rhythm so roughly 10–12 closed questions
   fit in the internal viewport on common desktop screens. */
@media (min-width:1200px){
  .faq-list{gap:7px}
  .faq-question-link{
    min-height:52px;
    padding-top:11px;
    padding-bottom:11px;
  }
  .faq-question-text{font-size:12px}
  .faq-category-section{margin-bottom:20px}
  .faq-category-section>header{margin-bottom:8px}
}


/* ==========================================================
   V6 FIX — sticky topic panel + reliable category jump
   ========================================================== */

@media (min-width:981px){
  /*
   Sticky must live on the grid item itself.
   In V5 the inner card was sticky while its parent still moved with the page,
   which allowed the "Browse by topic" heading to disappear on body scroll.
  */
  .faq-sidebar{
    position:sticky;
    top:188px;
    align-self:start;
    height:calc(100vh - 208px);
    min-height:0;
    z-index:18;
  }

  .faq-sidebar-inner{
    position:relative;
    top:auto;
    height:100%;
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /*
   Keep the question scroller aligned with the topic panel.
   Topic clicks reset this internal scroller to the top via JS.
  */
  .faq-main{
    scroll-behavior:smooth;
  }
}


/* ==========================================================
   V7 — authoritative desktop sticky workspace fix
   Current site CSP blocks inline JS, so behavior is powered by
   /assets/js/faq.js (same-origin and CSP-safe).
   ========================================================== */

@media (min-width:981px){
  .faq-content{
    --faq-workspace-top:196px;
  }

  .faq-search-card{
    position:sticky;
    top:76px;
    z-index:40;
  }

  /*
   * Stick the WHOLE two-column workspace.
   * This keeps Browse by Topic visible instead of trying to make a
   * full-height child sticky inside an equally tall grid parent.
   */
  .faq-workspace{
    position:sticky;
    top:var(--faq-workspace-top);
    z-index:20;
    height:calc(100vh - var(--faq-workspace-top) - 12px);
    min-height:420px;
    max-height:none;
    overflow:hidden;
    align-items:stretch;
  }

  .faq-sidebar{
    position:relative;
    top:auto;
    align-self:stretch;
    height:100%;
    min-height:0;
    z-index:1;
  }

  .faq-sidebar-inner{
    position:relative;
    top:auto;
    height:100%;
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .faq-main{
    height:100%;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-behavior:auto;
  }
}


/* ==========================================================
   V8 — stable desktop FAQ workspace
   Fixes footer overlap and keeps category panel visually fixed
   while questions scroll internally.
   ========================================================== */

@media (min-width:981px){
  .faq-content{
    --faq-workspace-top:196px;
  }

  .faq-search-card{
    position:sticky;
    top:76px;
    z-index:40;
  }

  /*
   * Normal document flow.
   * The workspace is intentionally NOT sticky.
   * This prevents the support/footer area from sliding beneath it.
   */
  .faq-workspace{
    position:relative !important;
    top:auto !important;
    z-index:1;
    height:calc(100vh - var(--faq-workspace-top) - 18px);
    min-height:500px;
    max-height:760px;
    overflow:hidden;
    align-items:stretch;
  }

  .faq-sidebar{
    position:relative !important;
    top:auto !important;
    align-self:stretch;
    height:100%;
    min-height:0;
    z-index:2;
  }

  .faq-sidebar-inner{
    position:relative !important;
    top:auto !important;
    height:100%;
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .faq-main{
    height:100%;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-behavior:auto;
  }

  /*
   * Bottom support block stays in normal flow below the workspace.
   * It can no longer overlap the questions.
   */
  .faq-bottom-card{
    position:relative;
    z-index:1;
    margin-top:34px;
  }
}