/* ==========================================================================
   9wickets — "প্রশ্নোত্তর" (FAQ) REDESIGN v2 "Dark Pills" (loads LAST, after
   faq-pills.css)
   --------------------------------------------------------------------------
   Same dark-aurora premium language as hero-v5/why-v5/verify-v3/live-v2/
   platform-v2. The container (`.e-con.vk-faq`, vp0015) previously had NO
   section background of its own — just the default cream page bg showing
   through — this file paints the same full-bleed dark gradient the other
   redesigned sections use.
   Structural note: `.e-con.vk-faq` is BOTH the section shell AND (via
   vk-overrides.css's `max-width:var(--vk-max); margin:0 auto`) the content
   width-cap. Making the shell full-bleed means that cap has to move onto
   its three children individually (.vk-section__head already had its own
   760px cap; `.elementor-accordion` and `.vk-faq__more` get one added here)
   rather than wrapping them in a new div — no markup change needed.
   IMPORTANT: this stays a real Elementor `accordion` widget (w0013) on
   purpose — mu-plugins/9w-faq-schema.php derives the homepage's FAQPage
   JSON-LD by walking its settings.tabs at request time. Only presentation
   changes here, same as faq-pills.css before it; the widget's own
   frontend.js still drives open/close untouched.
   Scoped under .vk-faq (container + accordion, unchanged classes).
   ========================================================================== */

/* Full-bleed background — same fix pattern as why-v5.css / verify-v3.css /
   live-v2.css / platform-v2.css, but this container never had `.vk-section`
   in its class list (it's `.e-con.vk-faq`), so it's overriding
   vk-overrides.css's `.e-con.vk-faq{ max-width:var(--vk-max); margin:0
   auto }` directly rather than the shared `.vk-section` base rule. */
body.vk .e-con.vk-faq {
    position: relative;
    overflow: hidden;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding-top: clamp(28px, 3.2vw, 44px) !important;
    padding-bottom: clamp(28px, 3.2vw, 44px) !important;
    background: linear-gradient(180deg, #0B0906 0%, #14110A 55%, #17150F 100%) !important;
    border-top: 1px solid rgba(255, 199, 44, .14);
    border-bottom: 1px solid rgba(255, 199, 44, .14);
    isolation: isolate;
}
body.vk .e-con.vk-faq::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(34% 48% at 88% 12%, rgba(255, 199, 44, .16), transparent 68%),
        radial-gradient(32% 44% at 8% 88%, rgba(232, 162, 0, .12), transparent 65%);
    filter: blur(10px);
    animation: faq2-aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes faq2-aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}
body.vk .e-con.vk-faq > * { position: relative; z-index: 1; }

/* ---- head (eyebrow/heading/lead) ---- */
body.vk .vk-faq .vk-section__head .vk-eyebrow {
    background: rgba(255, 199, 44, .08) !important;
    border-color: rgba(255, 199, 44, .22) !important;
    color: #E9C266 !important;
}
body.vk .vk-faq .vk-section__head .vk-h2 { color: #FBF6EC !important; }
body.vk .vk-faq .vk-section__head .vk-h2 em {
    font-style: normal;
    color: #FFC72C !important;
    text-shadow: 0 0 26px rgba(255, 199, 44, .3);
}
body.vk .vk-faq .vk-section__head .vk-lead { color: #BFB6A0 !important; }

/* ---- accordion: width-cap now that the shell is full-bleed, plus the
   dark-glass re-skin (was cream/white pills) ---- */
body.vk .vk-faq .elementor-accordion {
    max-width: 820px;
    margin: 0 auto;
}
body.vk .vk-faq .elementor-accordion-item {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 199, 44, .16) !important;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.vk .vk-faq .elementor-accordion-item::after {
    background: radial-gradient(closest-side, #FFC72C, transparent 72%);
}
body.vk .vk-faq .elementor-accordion-item:hover {
    border-color: rgba(255, 199, 44, .4) !important;
    box-shadow: 0 20px 42px -18px rgba(0, 0, 0, .6) !important;
}
body.vk .vk-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
    border-color: rgba(255, 199, 44, .45) !important;
    box-shadow: 0 20px 42px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 199, 44, .14) inset !important;
}

body.vk .vk-faq .elementor-tab-title { color: #F5EFE0 !important; }
body.vk .vk-faq .elementor-tab-title:hover,
body.vk .vk-faq .elementor-tab-title.elementor-active { color: #FFE066 !important; }
body.vk .vk-faq .elementor-tab-title:focus-within { box-shadow: inset 0 0 0 2.5px #FFC72C !important; }

body.vk .vk-faq .elementor-tab-title::before {
    background: rgba(255, 199, 44, .1) !important;
    border-color: rgba(255, 199, 44, .24) !important;
    color: #FFC72C !important;
}
body.vk .vk-faq .elementor-tab-title.elementor-active::before {
    background: linear-gradient(135deg, #FFE066, #FFC72C) !important;
    color: #0A0500 !important;
}

body.vk .vk-faq .elementor-accordion-title { color: inherit !important; }

body.vk .vk-faq .elementor-accordion-icon.elementor-accordion-icon-left {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 199, 44, .2) !important;
    color: #F5EFE0 !important;
}
body.vk .vk-faq .elementor-tab-title:hover .elementor-accordion-icon,
body.vk .vk-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
    background: linear-gradient(135deg, #FFE066, #FFC72C) !important;
    border-color: transparent !important;
    color: #0A0500 !important;
}
body.vk .vk-faq .elementor-tab-title:hover .elementor-accordion-icon svg,
body.vk .vk-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
    fill: #0A0500 !important;
}

body.vk .vk-faq .elementor-tab-content { color: #BFB6A0 !important; }
body.vk .vk-faq .elementor-tab-content p { color: #BFB6A0 !important; }

/* ---- "more" button row: width-cap to match the accordion ---- */
body.vk .vk-faq .vk-faq__more {
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.vk .vk-faq .vk-btn--ghost {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 199, 44, .3) !important;
    color: #F5EFE0 !important;
}
body.vk .vk-faq .vk-btn--ghost:hover {
    background: rgba(255, 199, 44, .08) !important;
    border-color: rgba(255, 199, 44, .5) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.vk .e-con.vk-faq::before { animation: none !important; }
}