/* ================================================================
   css/faq.css — Halaman FAQ & Pusat Bantuan
   Gaya Minimalis & Modern Menggunakan Variabel base.css
   ================================================================ */

/* Page Background */
body.faq-page {
  background-color: rgb(var(--clr-white));
}

/* Overlap Card Container */
#faq-card.page-card-overlap {
  background-color: rgb(var(--clr-white));
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgb(var(--clr-border));
}

/* ══════════════════════════════════════════════════════════════════
   1. CATEGORY NAVIGATION (Left Column)
   ══════════════════════════════════════════════════════════════════ */
.faq-category-nav {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-cat-btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: rgb(var(--clr-heading));
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.faq-cat-btn:hover {
  background: rgba(var(--clr-primary), 0.05);
  color: rgb(var(--clr-primary));
}

.faq-cat-btn.active {
  background: rgba(var(--clr-primary), 0.07);
  color: rgb(var(--clr-primary));
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════
   2. FAQ ACCORDION LIST (Minimalist Border Bottom)
   ══════════════════════════════════════════════════════════════════ */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid rgb(var(--clr-border));
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 4px;
  cursor: pointer;
  color: rgb(var(--clr-heading));
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.2s ease;
  box-shadow: none !important;
}

.faq-question-btn:hover {
  color: rgb(var(--clr-primary));
}

.faq-question-title {
  flex: 1;
}

.faq-circle-icon {
  font-size: var(--fs-md);
  color: rgb(var(--clr-sub));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}

.faq-question-btn:not(.collapsed) .faq-circle-icon {
  transform: rotate(-90deg);
  color: rgb(var(--clr-primary));
}

.faq-question-btn:not(.collapsed) {
  font-weight: 600;
  color: rgb(var(--clr-primary));
}

/* Accordion Body / Content */
.faq-collapse {
  transition: height 0.3s ease;
}

.faq-answer-content {
  color: rgb(var(--clr-body));
  font-size: var(--fs-md);
  line-height: 1.75;
  padding: 0 4px 20px 4px;
}

.faq-answer-content p {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════
   3. RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .faq-category-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .faq-cat-btn {
    white-space: nowrap;
    width: auto;
    padding: 8px 16px;
  }
}

@media (max-width: 767.98px) {
  .faq-question-btn {
    font-size: var(--fs-md);
    padding: 14px 2px;
  }

  .faq-answer-content {
    font-size: var(--fs-base);
  }
}