/* FAQ page styles extracted from inline styles in faq.php */
body.faq-page { font-family: 'Inter', system-ui, Roboto, sans-serif; background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%); color: #0f172a; }
.faq-hero { padding: 72px 0 32px; text-align: center; }
.faq-hero h1 { font-family: 'Poppins', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 6px; color: #0b1220; }
.faq-hero p { color: #475569; max-width: 880px; margin: 0 auto 12px; font-size: 1.05rem; }

.faq-container { max-width: 1100px; margin: 0 auto 90px; padding: 0 20px; }
.faq-section { background: #fff; border-radius: 14px; padding: 30px; box-shadow: 0 12px 40px rgba(15,23,42,0.06); margin-bottom: 28px; border: 1px solid rgba(15,23,42,0.04); }
.faq-section h2 { font-family: 'Poppins', sans-serif; font-size: 1.625rem; color: #0f172a; margin-bottom: 18px; }

.faq-support-section {
  position: relative;
  overflow: hidden;
  padding: 34px 34px 36px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(59,130,246,0.10);
  box-shadow: 0 16px 50px rgba(15,23,42,0.07);
}

.faq-support-section::after {
  content: '';
  position: absolute;
  inset: auto -42px -42px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, rgba(99,102,241,0) 70%);
  pointer-events: none;
}

.faq-support-section h2 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.faq-support-section p {
  margin: 0;
  max-width: 920px;
  color: #475569;
  line-height: 1.8;
  font-size: 1.03rem;
}

.faq-support-section a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,0.35);
}

.faq-support-section a:hover {
  color: #1d4ed8;
  border-bottom-color: rgba(29,78,216,0.65);
}

/* Accordion styling and spacing between items */
.faq-accordion .accordion-item { border: none; margin-bottom: 12px; }
.faq-accordion .accordion-button {
  font-weight: 700;
  color: #0b1220;
  background: linear-gradient(90deg, rgba(99,102,241,0.04), rgba(99,102,241,0.02));
  border-radius: 10px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(11,18,32,0.03);
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(99,102,241,0.09), rgba(99,102,241,0.03));
  color: #06102a;
}
.faq-accordion .accordion-collapse { margin-top: 8px; }
.faq-accordion .accordion-body { color: #374151; padding: 16px 18px 22px; background: #fbfdff; border-radius: 8px; }

.keyword-box { background: linear-gradient(90deg,#eef2ff,#fbfdff); border-left: 4px solid #6366f1; padding: 14px; border-radius: 8px; margin-top: 14px; }
.keyword-code { background: #0b1220; color: #e6eef8; padding: 6px 10px; border-radius: 6px; display: inline-block; font-family: monospace; }
.keyword-usage { margin-top:8px; color:#334155; }
.keyword-json { margin-top:12px; }
.keyword-json code { background:#f3f4f6; padding:8px; border-radius:6px; display:block; white-space:pre; }

@media (max-width:768px) {
  .faq-hero { padding: 36px 0 20px; }
  .faq-section { padding: 18px; }
  .faq-support-section { padding: 20px; }
  .faq-accordion .accordion-button { padding: 14px 12px; }
  .faq-container { padding: 0 14px; }
}