/* ==========================================================================
   Raja Ampat Diving — tab FAQ (markup dari inc/faq-tabs.php, JS di theme.js)
   Gaya gelap: tab aktif emas, accordion baris gelap dengan chevron.
   ========================================================================== */
.bcht-faqtabs { background: #0a1a2b; color: rgba(255, 255, 255, 0.86); }
/* band (pembayaran/CTA) biasanya menempel ke section sebelumnya yang warnanya sama — setelah section gelap beri jarak */
.bcht-faqtabs + .bcht-section--band { padding-top: var(--section-y); }
.bcht-faqtabs h2 { color: var(--white); }

/* daftar tab */
.bcht-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 clamp(28px, 4vw, 40px); }
.bcht-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px;
  background: transparent; color: var(--white) !important;
  font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bcht-tab__icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold); transition: color 0.2s ease; }
.bcht-tab:hover { border-color: var(--gold); }
.bcht-tab.is-active, .bcht-tab[aria-selected="true"] { background: var(--gold-dk); border-color: var(--gold-dk); }
.bcht-tab.is-active .bcht-tab__icon, .bcht-tab[aria-selected="true"] .bcht-tab__icon { color: var(--white); }
.bcht-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 899.98px) {
  .bcht-tabs__list {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity;
  }
  .bcht-tabs__list::-webkit-scrollbar { display: none; }
  .bcht-tab { scroll-snap-align: start; font-size: 14px; padding: 10px 15px; }
}

/* panel: tanpa JS semua tampil lengkap dengan h2; dengan JS h2 disembunyikan visual */
.bcht-tabs__panel + .bcht-tabs__panel { margin-top: 40px; }
.bcht-tabs.is-enhanced .bcht-tabs__panel { margin-top: 0; }
.bcht-tabs.is-enhanced .bcht-tabs__panel > h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bcht-tabs.is-enhanced .bcht-tabs__panel:not([hidden]) { animation: bcht-tab-in 0.3s ease; }
@keyframes bcht-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* accordion gelap */
.bcht-faqtabs .faq { max-width: none; }
.bcht-faqtabs .faq details {
  margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px;
  background: rgba(255, 255, 255, 0.045); box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bcht-faqtabs .faq details:hover { border-color: rgba(201, 168, 106, 0.35); }
.bcht-faqtabs .faq details[open] { background: rgba(255, 255, 255, 0.075); border-color: rgba(201, 168, 106, 0.45); box-shadow: none; }
.bcht-faqtabs .faq summary {
  min-height: 64px; padding: 18px 60px 18px 24px;
  font-family: var(--serif); font-size: clamp(15px, 1.5vw, 17px); letter-spacing: 0.03em; color: var(--white);
}
.bcht-faqtabs .faq summary::after {
  content: ""; right: 26px; width: 10px; height: 10px; margin-top: -7px;
  font-size: 0; line-height: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.85); border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg); transition: transform 0.3s var(--ease), border-color 0.2s ease;
}
.bcht-faqtabs .faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; border-color: var(--gold); }
.bcht-faqtabs .faq .fa { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, 0.78); }
.bcht-faqtabs .faq .fa a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599.98px) {
  .bcht-faqtabs .faq summary { padding: 16px 48px 16px 18px; min-height: 58px; }
  .bcht-faqtabs .faq summary::after { right: 20px; }
  .bcht-faqtabs .faq .fa { padding: 0 18px 18px; }
}