/* =========================================================
FAQ TABS — category navigation
Extends faq.css with tabbed category UI.
========================================================= */


/* =========================================================
TABS NAV
========================================================= */

.faq-tabs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;

  margin: 36px auto 48px;
  max-width: 980px;
}

.faq-tab{
  position: relative;

  padding: 11px 22px;

  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;

  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;
  white-space: nowrap;

  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.faq-tab:hover{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.faq-tab:active{
  transform: scale(0.97);
}

.faq-tab.is-active{
  background: #c9a84c;
  color: #1a1f3c;
  border-color: #c9a84c;
  font-weight: 600;
}

.faq-tab.is-active:hover{
  background: #e8d28d;
  border-color: #e8d28d;
  color: #1a1f3c;
}

/* small count badge inside tabs */
.faq-tab-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;

  background: rgba(255, 255, 255, 0.10);
  color: #c9a84c;

  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;

  transition: background .2s ease, color .2s ease;
}

.faq-tab.is-active .faq-tab-count{
  background: rgba(26, 31, 60, 0.25);
  color: #1a1f3c;
}


/* =========================================================
CATEGORIES (panels)
========================================================= */

.faq-category{
  display: none;
  animation: faqFadeIn .35s cubic-bezier(.2, .8, .2, 1);
}

.faq-category.is-active{
  display: block;
}

@keyframes faqFadeIn{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
RESPONSIVE — mobile horizontal scroll
========================================================= */

@media (max-width: 768px){

  .faq-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;

    /* allow tabs to extend beyond container padding for full-bleed scroll */
    margin: 24px -20px 36px;
    padding: 4px 20px;

    /* hide scrollbar but keep functionality */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .faq-tabs::-webkit-scrollbar{
    display: none;
  }

  .faq-tab{
    flex-shrink: 0;
    padding: 9px 18px;
    font-size: 0.82rem;
  }

  .faq-tab-count{
    min-width: 18px;
    height: 18px;
    font-size: 0.68rem;
  }

}