/* Modern FAQ styles: tabs, accordion, badges, and category titles */
/* Scope under .qa-wrap to avoid bleeding into the rest of the site */

.qa-wrap{ --qa-accent: var(--qa-accent, #0d6efd); }

/* Tabs: pill style with subtle hover and strong active */
.qa-wrap .qa-tabs{ border-bottom: 0; gap: .35rem; flex-wrap: wrap; }
.qa-wrap .qa-tabs .nav-link{
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .4rem .85rem;
  color: var(--bs-secondary-color);
  background: transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.qa-wrap .qa-tabs .nav-link:hover{ background: rgba(0,0,0,.04); }
.qa-wrap .qa-tabs .nav-link.active{
  color: #fff;
  background: var(--qa-accent);
  box-shadow: 0 10px 24px rgba(13,110,253,.18);
}

/* Tab content container: rounded/shadow variants */
.qa-wrap .tab-content{ border: 1px solid var(--bs-border-color); border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.qa-wrap.qa-rounded .tab-content{ border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.qa-wrap.qa-shadow .tab-content{ box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* Compact mode paddings */
.qa-wrap.qa-compact .accordion-button{ padding: .55rem .8rem; }
.qa-wrap.qa-compact .accordion-body{ padding: .75rem .9rem; }

/* Accordion accent and focus */
.qa-wrap .accordion-button:not(.collapsed){
  background: rgba(13,110,253,.04);
  border-bottom: 1px solid var(--qa-accent) !important;
}
.qa-wrap .accordion-button:focus{ box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }
.qa-wrap.qa-rounded .accordion-item{ border-radius: 12px; overflow: hidden; }
.qa-wrap.qa-shadow .accordion-item{ box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* Category title: elegant, with accent bar */
.qa-wrap .qa-cat-title{
  position: relative;
  font-weight: 800;
  font-size: 1.05rem;
  margin: 1.25rem 0 .75rem;
  padding-left: .65rem;
}
.qa-wrap .qa-cat-title::before{
  content: "";
  position: absolute; left: 0; top: .2em;
  width: 4px; height: 1.2em; border-radius: 4px;
  background: var(--qa-accent);
  box-shadow: 0 6px 18px rgba(13,110,253,.18);
}

/* Badges for FAQ metadata */
.qa-wrap .qa-badge{ font-size:.7rem; padding:.15rem .4rem; border-radius:.35rem; border:1px solid rgba(0,0,0,.1); background:#f8f9fa; }
.qa-wrap .qa-badge-featured{ background: var(--qa-accent); color:#fff; border-color: transparent; }
.qa-wrap .qa-badge-new{ background:#d1e7dd; color:#0f5132; }
.qa-wrap .qa-badge-popular{ background:#fff3cd; color:#664d03; }

/* Tiny buttons */
.qa-wrap .btn-xs{ --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .35rem; --bs-btn-font-size: .75rem; }

/* Dark theme tweaks */
@media (prefers-color-scheme: dark){
  .qa-wrap .qa-tabs .nav-link:hover{ background: rgba(255,255,255,.06); }
  .qa-wrap .accordion-button:not(.collapsed){ background: rgba(59,130,246,.08); border-bottom-color: rgba(147,197,253,.35) !important; }
  .qa-wrap .qa-cat-title::before{ box-shadow: 0 6px 16px rgba(59,130,246,.28); }
}

/* Brief highlight ring when navigating to an item */
.qa-wrap .accordion-item.ring{ outline: 2px solid var(--qa-accent); outline-offset: 2px; border-radius: 8px; }