/* =====================================================================
   faq.css — public FAQ page (faq.php). Reuses country.css (.c-faq) +
   components.css (header/footer/buttons). Hero, search & category UI here.
   ===================================================================== */
.faq-section { padding-block: clamp(40px, 6vw, 76px); }

/* hero */
.faq-hero { position: relative; color: #fff; overflow: clip; isolation: isolate;
  background: linear-gradient(125deg, #0d1430, #1a2350 50%, #2a2f72); }
.faq-hero__mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px 360px at 85% -5%, rgba(91,91,245,.5), transparent 60%),
              radial-gradient(540px 340px at 6% 110%, rgba(16,201,142,.28), transparent 58%); }
.faq-hero__in { text-align: center; max-width: 760px; margin-inline: auto; padding-block: clamp(44px, 6vw, 80px); }
.faq-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #cfd6ff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 15px; border-radius: var(--r-pill); }
.faq-hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 4px rgba(16,201,142,.25); }
.faq-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; margin: 16px 0 0; }
.faq-hero h1 .grad { background: linear-gradient(110deg, #8fa2ff, #4be0b0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq-hero__sub { color: #c4cbe6; font-size: clamp(1.02rem, .95rem + .4vw, 1.18rem); margin: 16px auto 0; max-width: 540px; line-height: 1.6; }

/* search */
.faq-search { position: relative; max-width: 520px; margin: 28px auto 0; }
.faq-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-4); }
.faq-search input { width: 100%; font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: var(--r-pill); padding: 16px 20px 16px 50px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.faq-search input:focus { outline: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5), 0 0 0 4px rgba(143,162,255,.4); }

/* category filter pills */
.faq-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: var(--s-8); }
.faq-pill { font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer; transition: all var(--dur-2) var(--ease); }
.faq-pill:hover { border-color: var(--primary); color: var(--primary); }
.faq-pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.faq-pill small { opacity: .6; font-weight: 600; }
.faq-pill.is-active small { opacity: .85; }

/* groups (reuse .c-faq items) */
.faq-list { max-width: 880px; margin-inline: auto; }
.faq-group { margin-top: var(--s-8); }
.faq-group:first-child { margin-top: 0; }
.faq-group__h { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 16px; }
.faq-group__h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.faq-group__h .n { font-size: .82rem; font-weight: 700; color: var(--primary); background: var(--primary-tint); padding: 3px 10px; border-radius: var(--r-pill); }
.faq-group.is-hidden, .c-faq__item.is-hidden { display: none; }
.faq-empty { display: none; text-align: center; color: var(--ink-3); padding: 40px 0; }
.faq-empty.show { display: block; }
.faq-empty b { color: var(--ink); font-family: var(--font-display); }

/* "still have a question" CTA */
.faq-ask { max-width: 880px; margin: var(--s-10) auto 0; text-align: center; background: var(--ink); color: #cdd3ea;
  border-radius: var(--r-xl); padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; }
.faq-ask__mesh { position: absolute; inset: 0; opacity: .6; pointer-events: none;
  background: radial-gradient(500px 260px at 15% 0%, rgba(91,91,245,.4), transparent 60%), radial-gradient(480px 280px at 90% 100%, rgba(16,201,142,.22), transparent 58%); }
.faq-ask h2 { position: relative; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); letter-spacing: -.02em; }
.faq-ask p { position: relative; color: #aab2d8; margin-top: 8px; }
.faq-ask__cta { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.faq-ask .btn--glass { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.faq-ask .btn--glass:hover { background: rgba(255,255,255,.2); }

@media (max-width: 560px) { .faq-cats { gap: 7px; } .faq-pill { padding: 8px 13px; font-size: .84rem; } }