/* =============================================
   FAQ Page CSS (navy/blue theme)
   ============================================= */

:root {
  --faq-navy: #0d1b3e;
  --faq-navy-dark: #081227;
  --faq-blue: #2f6fed;
  --faq-blue-dark: #1f56c4;
  --faq-text: #4b5563;
  --faq-gray: #6b7280;
  --faq-border: #e5e7eb;
  --faq-bg: #f7f9fc;
}

a.free-quo, a.free-quo:hover, a.free-quo:visited,
#header a.free-quo, .wsmenu-list li a.free-quo { color: #fff !important; }

/* ── SECTION LAYOUT ───────────────────────────────────── */
.faq-section { background: #fff; padding: 50px 0 60px; }
.faq-grid { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }

/* ── SIDEBAR ──────────────────────────────────────────── */
.faq-sidebar { background: #fff; border: 1px solid var(--faq-border); border-radius: 14px; padding: 20px; position: sticky; top: 100px; }
.faq-sidebar h5 { font-size: 15px; font-weight: 800; color: var(--faq-navy); margin-bottom: 14px; }
.faq-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.faq-cat-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; transition: background .15s; }
.faq-cat-item:hover { background: var(--faq-bg); }
.faq-cat-item.active { background: var(--faq-blue); }
.faq-cat-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--faq-bg); color: var(--faq-blue); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.faq-cat-item.active .faq-cat-ico { background: rgba(255,255,255,.2); color: #fff; }
.faq-cat-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--faq-navy); }
.faq-cat-item.active .faq-cat-label { color: #fff; }
.faq-cat-count { font-size: 11px; font-weight: 700; color: var(--faq-gray); background: var(--faq-bg); border-radius: 20px; padding: 2px 9px; }
.faq-cat-item.active .faq-cat-count { background: rgba(255,255,255,.22); color: #fff; }

/* ── MAIN QUESTIONS ───────────────────────────────────── */
.faq-main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.faq-main-head h4 { font-size: 18px; font-weight: 800; color: var(--faq-navy); margin: 0; }
.faq-main-head a { font-size: 13px; font-weight: 700; color: var(--faq-blue); text-decoration: none; }
.faq-main-head a:hover { text-decoration: underline; }
.faq-main-head a i { margin-right: 4px; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff !important; border: 1px solid var(--faq-border) !important; border-radius: 12px; overflow: visible !important; max-height: none !important; height: auto !important; transition: border-color .15s; }
.faq-item.active { border-color: var(--faq-blue) !important; }
.faq-question { width: 100%; display: flex; align-items: center; gap: 12px; background: none !important; border: none !important; text-align: left; padding: 16px 18px; cursor: pointer; }
.faq-toggle-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--faq-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.faq-item:not(.active) .faq-toggle-ico { background: var(--faq-bg); color: var(--faq-blue); }
.faq-q-text { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--faq-navy) !important; }
.faq-chevron { display: none; }
.faq-answer { padding: 0 18px 18px 56px; max-height: none !important; height: auto !important; overflow: visible !important; }
.faq-answer p { font-size: 13.5px !important; color: var(--faq-text) !important; line-height: 1.75 !important; margin: 0 !important; text-decoration: none !important; font-weight: 400 !important; white-space: normal !important; overflow: visible !important; display: block !important; -webkit-line-clamp: unset !important; }

.faq-view-more { width: 100%; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--faq-border); border-radius: 12px; padding: 16px 18px; margin-top: 12px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--faq-navy); }
.faq-view-more:hover { background: var(--faq-bg); }
.faq-view-more .faq-toggle-ico { background: var(--faq-bg); color: var(--faq-blue); }

.faq-no-results { text-align: center; color: var(--faq-gray); font-size: 14px; margin-top: 20px; }

/* ── STILL HAVE A QUESTION ────────────────────────────── */
.faq-cta-box {
  margin-top: 40px; background: #eef4ff; border-radius: 16px; padding: 26px 30px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.faq-cta-ico { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--faq-blue); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.faq-cta-text { flex: 1; min-width: 220px; }
.faq-cta-text h5 { font-size: 17px; font-weight: 800; color: var(--faq-navy); margin-bottom: 4px; }
.faq-cta-text p { font-size: 13.5px; color: var(--faq-text); margin: 0; }
.faq-cta-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--faq-blue); color: #fff; font-weight: 700; font-size: 13.5px; padding: 12px 24px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.faq-cta-btn:hover { background: var(--faq-blue-dark); color: #fff; text-decoration: none; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 991px) {
  .faq-hero { padding: 120px 0 40px; text-align: center; }
  .faq-hero p { margin-left: auto; margin-right: auto; }
  .faq-search { margin: 0 auto; }
  .faq-hero-deco { display: none; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; }
  .faq-cat-list { flex-direction: row; flex-wrap: wrap; }
  .faq-cat-item { flex: 1 1 auto; }
}
@media (max-width: 575px) {
  .faq-hero h1 { font-size: 30px; }
  .faq-cta-box { flex-direction: column; text-align: center; }
}