/* ==========================================================================
   FAQ page (57) — "Dark Premium" pass (2026-07)
   --------------------------------------------------------------------------
   pages-pills.css already gave About/Terms/FAQ a cohesive light-cream
   "premium pill" system (soft-pill cards, gold accents, glass-gradient
   backgrounds) — genuinely premium, just built in the site's OLDER cream/
   gold palette rather than the dark #17150F→#0E0C09 / gold #F9E900 identity
   established for the home page and every agent-family page this pass.
   This brings FAQ specifically in line with that dark identity: the hero,
   category jump-nav pills, the "46 answers / 8 categories" stat line, every
   category's accordion FAQ pills, and the closing CTA.

   Scoped to `body.page-id-57` (NOT `body.w9-pillpage`, which also covers
   About/12 and Terms/14 — those two keep their existing cream design as-is;
   this file must never leak onto them). Enqueued after pages-pills.css
   (w9-inner-pages.php dependency) so it wins at equal specificity.

   DELIBERATE SCOPE LIMIT: the 8 category SECTIONS themselves
   (`.s5-sec--white`/`.s5-sec--cream`, the alternating cream/white rhythm)
   and their eyebrow/heading text are left untouched — dark ink already
   reads fine on that cream backdrop, and only the accordion PILLS inside
   each section go dark. This is the exact same "dark cards on a cream
   section" pattern already proven on the tier pages' agent search/grid
   section (agent-list-redesign.css) — recoloring every section too would
   also require re-solving each section's white wave-divider color for no
   real visual gain, since the repeating accordion pills (46 of them) are
   what a visitor actually reads, not the section shell.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
body.page-id-57 .s5-ihero {
    /* background-color/background-image split: Elementor's own lazy-load
       feature blocks background-image with !important on containers below
       the fold — same root cause diagnosed repeatedly on the agent pages
       (agent-list-redesign.css). The hero is the first container so it's
       unlikely to ever actually be lazy-blocked, but the split costs
       nothing and keeps this file consistent with the rest of the site's
       defensive pattern. */
    background-color: #17150F !important;
    background-image:
        radial-gradient(120% 180% at 100% -20%, rgba(249, 233, 0, .14), transparent 55%),
        linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}
/* bottom wave divider is a literal white SVG shape (w9-site5.php), drawn to
   blend a white hero into the white section below it — on a dark hero that
   same shape reads as a stray pale blob, so it's suppressed rather than
   recolored (same call made for every other converted hero this pass). */
body.page-id-57 .s5-ihero.s5-wave-b::after { background-image: none !important; }

body.page-id-57 .s5-ihero .s5-eyebrow .elementor-heading-title {
    background: rgba(249, 233, 0, .16) !important;
    color: #F9E900 !important;
}
body.page-id-57 .s5-ihero h1.elementor-heading-title { color: #FFFFFF !important; }
/* `.s5-hl` (the gold-highlighted word in the h1) is a gradient-clip effect
   (`background:var(--s5-grad); -webkit-text-fill-color:transparent`) — the
   exact pattern that went fully invisible elsewhere on this site whenever
   its background-image got blocked (agent-list-redesign.css section 8).
   Overriding `-webkit-text-fill-color` directly to a solid gold sidesteps
   that whole class of bug instead of re-fighting it: WebKit/Blink always
   prefer `-webkit-text-fill-color` over `color` when both are set, so this
   renders as flat gold regardless of what the gradient background does. */
body.page-id-57 .s5-ihero h1 .s5-hl {
    -webkit-text-fill-color: #F9E900 !important;
    color: #F9E900 !important;
}
body.page-id-57 .s5-ihero .s5-lede p { color: rgba(255, 255, 255, .76) !important; }

/* ---------- category jump-nav pills (.s5-jump) ---------- */
body.page-id-57 .s5-jump li a {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .85) !important;
    box-shadow: none !important;
}
body.page-id-57 .s5-jump li a:hover {
    border-color: rgba(249, 233, 0, .4) !important;
    box-shadow: 0 10px 24px -8px rgba(249, 233, 0, .25) !important;
    transform: translateY(-2px);
}
body.page-id-57 .s5-jump li a i {
    background: rgba(249, 233, 0, .14);
    color: #F9E900;
}

/* ---------- "৪৬ প্রশ্নের সরাসরি উত্তর · ৮ ক্যাটাগরিতে" stat pills ---------- */
body.page-id-57 .s5-faqstat span {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none !important;
    color: rgba(255, 255, 255, .78);
}
body.page-id-57 .s5-faqstat span b { color: #F9E900; }

/* ==========================================================================
   2. ACCORDION FAQ PILLS (.s5-faq) — the 46 Q&A rows across all 8
   categories. Section shells (cream/white) stay as-is; see file header.
   ========================================================================== */
body.page-id-57 .s5-faq .elementor-accordion-item {
    background: none !important;
    background-color: #1A170F !important;
    background-image: linear-gradient(160deg, #1A170F 0%, #0E0C09 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
body.page-id-57 .s5-faq .elementor-accordion-item::after {
    background: radial-gradient(closest-side, #F9E900, transparent 72%);
    opacity: .1;
}
body.page-id-57 .s5-faq .elementor-accordion-item:hover {
    border-color: rgba(249, 233, 0, .35) !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .5) !important;
}
body.page-id-57 .s5-faq .elementor-accordion-item:hover::after,
body.page-id-57 .s5-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active)::after { opacity: .18; }
body.page-id-57 .s5-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
    border-color: rgba(249, 233, 0, .4) !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(249, 233, 0, .12) inset !important;
}

body.page-id-57 .s5-faq .elementor-tab-title {
    color: rgba(255, 255, 255, .92) !important;
}
body.page-id-57 .s5-faq .elementor-tab-title:hover,
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active { color: #F9E900 !important; }

body.page-id-57 .s5-faq .elementor-tab-title::before {
    background: rgba(249, 233, 0, .14) !important;
    border-color: rgba(249, 233, 0, .3) !important;
    color: #F9E900 !important;
}
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active::before {
    background: linear-gradient(135deg, #F9E900 0%, #C9A200 100%) !important;
    color: #1A1500 !important;
}

body.page-id-57 .s5-faq .elementor-accordion-icon.elementor-accordion-icon-left {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
}
body.page-id-57 .s5-faq .elementor-tab-title:hover .elementor-accordion-icon,
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
    background: linear-gradient(135deg, #F9E900 0%, #C9A200 100%);
    color: #1A1500;
}

body.page-id-57 .s5-faq .elementor-tab-content {
    color: rgba(255, 255, 255, .7) !important;
}
body.page-id-57 .s5-faq .elementor-tab-content p { color: rgba(255, 255, 255, .7); }
body.page-id-57 .s5-faq .elementor-tab-content strong { color: #FFFFFF; }
body.page-id-57 .s5-faq .elementor-tab-content a { color: #F9E900; }

/* ==========================================================================
   3. CLOSING CTA — reuses the same `.b9g-glass--dark.b9g-mesh--navy` panel
   as agent-list/tier-pages/customer-service/etc, but `.b9g-mesh--navy`'s
   OWN default background (sections-glass.css) is still the old solid navy-
   teal gradient (`#08415C→#052A3D`) — the dark-premium override for that
   combo (agent-list-redesign.css) is scoped to `body.w9-agentpage`, which
   this page doesn't carry (`body.w9-pillpage` instead), so the panel here
   fell back to the un-converted navy. Text/eyebrow colors already come out
   correct either way (sections-glass.css's own `.b9g-glass--dark`/
   `.b9g-mesh--navy` rules already force gold eyebrow + white heading
   regardless of the backdrop color) — only the background itself needed
   fixing here. */
body.page-id-57 .b9g-glass--dark.b9g-mesh--navy {
    background-color: #17150F !important;
    background-image: linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-57 .s5-jump li a { transition: none !important; }
}