/* ==========================================================================
   9wickets — "প্রশ্নোত্তর" (Q&A/FAQ) section REDESIGN "Premium Pills" (loads LAST)
   --------------------------------------------------------------------------
   Re-skins the EXISTING native Elementor Accordion widget (w0013, container
   vp0015 / .vk-faq) into fully-rounded pill rows, instead of replacing it
   with a custom-HTML widget. Kept as a real accordion widget on purpose:
   wp-content/mu-plugins/9w-faq-schema.php derives the front page's FAQPage
   JSON-LD by walking `accordion`/`toggle` widgets' settings.tabs at request
   time — swapping w0013 for an `html` widget would silently zero out that
   schema. CSS-only re-skin carries no such risk and needs no new JS: the
   widget's own frontend.js already drives the open/close (adds/removes
   `.elementor-active`, toggles `aria-expanded`) and its `<a tabindex="0">`
   question is natively keyboard-operable (Enter/Space), so none of that is
   touched here — only presentation.

   Supersedes the base "vk-faq details list" look defined in vk-overrides.css
   §2 (body.vk .vk-faq .elementor-accordion*) — same "must load last" pattern
   as social-pills.css (.vk-sp-*) and platform-pills.css (.vk-pp-*), and
   several rules need `!important` to beat that base layer's own
   `!important`s (padding, border, color) — later source order plus matching
   `!important` wins the cascade tie.

   Closed pill:   fully rounded (999px) capsule row — numbered badge, question,
                  trailing circular chevron chip.
   Open pill:     radius eases to a large-but-not-fully-round 28px "soft pill"
                  (via :has()) so multi-line answer copy never looks stretched
                  into an oval. Falls back gracefully to a fully-round shape
                  in browsers without :has() support — still reads as a pill,
                  just with a rounder open state.
   Scope:         body.vk .vk-faq (container vp0015) only — every selector is
                  prefixed with it, nothing here can leak into the standalone
                  /faq/ page's unrelated .s5-faq accordions.

   Markup: unchanged Elementor accordion widget (post 11, widget w0013).

   COLOR CYCLE (2026-07 update): the section was a single flat gold tone —
   this pass gives each of the 8 pills its own accent hue, cycling through
   4 colors drawn from the site's extended accent set (gold/teal/coral/
   violet — same family already used for variety elsewhere on this page)
   via `:nth-child`. Every rule that used to read a hardcoded gold value
   (badge, glow, border, active state, chevron chip, question color) now
   reads the three local custom properties set below instead, so the
   colour lives in ONE place per item and every dependent rule follows it
   automatically. Site-wide `--vk-*` globals are untouched (they're pinned
   to gold by w9-color-override.php for every other component) — these are
   new, locally-scoped properties that only exist inside `.vk-faq`.
   ========================================================================== */

body.vk .vk-faq .elementor-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 0;
    counter-reset: vkfp;
}

/* ---- per-pill accent cycle (gold → teal → coral → violet, repeating) ----
   --vk-faq-a / --vk-faq-b : gradient start/end for this pill's accent
   --vk-faq-ink            : readable dark tint of the same hue, for text
   --vk-faq-14/30/42       : the same hue pre-mixed at 3 fixed alphas, used
                              for tint fills / hover borders / open borders
                              (kept as literal rgba() so no color-mix()
                              browser support is required) */
body.vk .vk-faq .elementor-accordion-item:nth-child(4n+1) {
    --vk-faq-a: #F9E900; --vk-faq-b: #E6D200; --vk-faq-ink: #8A7500;
    --vk-faq-14: rgba(230, 210, 0, .14); --vk-faq-30: rgba(230, 210, 0, .40); --vk-faq-42: rgba(230, 210, 0, .48);
}
body.vk .vk-faq .elementor-accordion-item:nth-child(4n+2) {
    --vk-faq-a: #4FD8E3; --vk-faq-b: #1F8E9A; --vk-faq-ink: #0E6570;
    --vk-faq-14: rgba(31, 142, 154, .14); --vk-faq-30: rgba(31, 142, 154, .38); --vk-faq-42: rgba(31, 142, 154, .46);
}
body.vk .vk-faq .elementor-accordion-item:nth-child(4n+3) {
    --vk-faq-a: #FF9169; --vk-faq-b: #E85A38; --vk-faq-ink: #B23D22;
    --vk-faq-14: rgba(232, 90, 56, .14); --vk-faq-30: rgba(232, 90, 56, .38); --vk-faq-42: rgba(232, 90, 56, .46);
}
body.vk .vk-faq .elementor-accordion-item:nth-child(4n+4) {
    --vk-faq-a: #B49CF0; --vk-faq-b: #7B5FD1; --vk-faq-ink: #5A3FB0;
    --vk-faq-14: rgba(123, 95, 209, .14); --vk-faq-30: rgba(123, 95, 209, .40); --vk-faq-42: rgba(123, 95, 209, .48);
}

/* ---- pill shell ---- */
body.vk .vk-faq .elementor-accordion-item {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 240, 0.9) 100%) !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: var(--vk-shadow-card);
    transition: border-radius .45s cubic-bezier(.2, .7, .15, 1), border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2, .7, .15, 1);
}

/* ambient glow, clipped to the pill's own rounded silhouette — tinted per
   item by the accent cycle above instead of a flat gold wash */
body.vk .vk-faq .elementor-accordion-item::after {
    content: '';
    position: absolute;
    inset: -45% -6%;
    background: radial-gradient(closest-side, var(--vk-faq-a), transparent 72%);
    opacity: .07;
    z-index: -1;
    filter: blur(28px);
    pointer-events: none;
    transition: opacity .5s ease;
}

body.vk .vk-faq .elementor-accordion-item:hover {
    border-color: var(--vk-faq-30) !important;
    box-shadow: var(--vk-shadow-card-hi);
}
body.vk .vk-faq .elementor-accordion-item:not(:has(.elementor-tab-title.elementor-active)):hover {
    transform: translateY(-3px);
}
body.vk .vk-faq .elementor-accordion-item:hover::after,
body.vk .vk-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active)::after {
    opacity: .22;
}

/* open state: settle into a big soft-pill radius instead of a stretched oval,
   with a faint accent-tinted wash layered under the existing cream gradient
   so the expanded card visibly "belongs" to its pill's own color */
body.vk .vk-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
    border-radius: 28px;
    border-color: var(--vk-faq-42) !important;
    box-shadow: var(--vk-shadow-card-hi), 0 0 0 1px var(--vk-faq-14) inset;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 252, 240, 0.86) 100%),
        radial-gradient(120% 140% at 0% 0%, var(--vk-faq-14), transparent 60%) !important;
}

/* ---- the clickable question row ---- */
body.vk .vk-faq .elementor-tab-title {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 22px 17px 16px !important;
    border: 0 !important;
    margin: 0;
    cursor: pointer;
    outline: none;
    font-family: var(--vk-font-bn);
    font-size: 16px;
    font-weight: 700;
    color: var(--vk-text) !important;
    transition: color .3s ease;
}
body.vk .vk-faq .elementor-tab-title:hover,
body.vk .vk-faq .elementor-tab-title.elementor-active {
    color: var(--vk-faq-ink) !important;
}
/* the real focusable/keyboard target is the inner <a tabindex="0">, not this
   div (it only carries role="button"/aria-expanded) — use :focus-within so
   the ring shows on the whole pill row regardless of which node has focus */
body.vk .vk-faq .elementor-tab-title:focus-within {
    box-shadow: inset 0 0 0 2.5px var(--vk-faq-b);
}
body.vk .vk-faq .elementor-accordion-title:focus-visible {
    outline: none;
}

/* numbered badge — CSS counter (plain decimal, cross-browser safe) */
body.vk .vk-faq .elementor-tab-title::before {
    counter-increment: vkfp;
    content: counter(vkfp, decimal-leading-zero);
    order: 0;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vk-faq-14);
    border: 1px solid var(--vk-faq-30);
    color: var(--vk-faq-ink);
    font-family: var(--vk-font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
body.vk .vk-faq .elementor-tab-title.elementor-active::before {
    background: linear-gradient(135deg, var(--vk-faq-a) 0%, var(--vk-faq-b) 100%);
    border-color: transparent;
    color: #FFFFFF;
}

/* question text — sits between the badge and the trailing chevron chip */
body.vk .vk-faq .elementor-accordion-title {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit !important;
    font-size: 16px;
    line-height: 1.4;
}

/* trailing chevron chip (re-styles Elementor's own icon span, no markup change) */
body.vk .vk-faq .elementor-accordion-icon.elementor-accordion-icon-left {
    order: 3;
    float: none !important;
    margin: 0 0 0 auto;
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(30, 27, 20, .05);
    border: 1px solid rgba(30, 27, 20, .12);
    color: var(--vk-text);
    transition: transform .45s cubic-bezier(.2, .7, .15, 1), background .35s ease, color .35s ease, border-color .35s ease;
}
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, var(--vk-faq-a) 0%, var(--vk-faq-b) 100%);
    border-color: transparent;
    color: #FFFFFF;
}
/* Elementor's own generated CSS sets `.elementor-active .elementor-accordion-icon
   svg { fill: var(--e-global-color-accent) }` (a literal gold hex, not
   currentColor) — that wins over the `color:#FFFFFF` above since `fill`
   doesn't inherit from `color`. On this gold-gradient chip that renders as
   a gold chevron on a gold background (invisible), same bug already fixed
   on the standalone /faq/ page (pages-pills.css) — same fix here. */
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: #FFFFFF !important;
}
body.vk .vk-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
    transform: rotate(180deg);
}
/* keep a single glyph (chevron-down, rotated for "up") — smoother than the
   widget's default instant swap between two separate icon/svg nodes */
body.vk .vk-faq .elementor-accordion-icon-opened { display: none !important; }
body.vk .vk-faq .elementor-accordion-icon-closed { display: block !important; }
body.vk .vk-faq .elementor-accordion-icon svg { width: 13px; height: 13px; display: block; }

/* ---- answer ---- */
body.vk .vk-faq .elementor-tab-content {
    padding: 0 24px 20px 66px !important;
    border: 0 !important;
    font-family: var(--vk-font-bn);
    font-size: 15px;
    line-height: 1.85;
    color: var(--vk-text-mid);
    animation: vkFaqFade .4s ease both;
}
body.vk .vk-faq .elementor-tab-content p { margin: 0 0 10px; color: var(--vk-text-mid); }
body.vk .vk-faq .elementor-tab-content p:last-child { margin-bottom: 0; }

@keyframes vkFaqFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
    body.vk .vk-faq .elementor-tab-title { padding: 15px 18px 15px 14px !important; gap: 13px; font-size: 15px; }
    body.vk .vk-faq .elementor-tab-title::before { width: 28px; height: 28px; font-size: 11px; }
    body.vk .vk-faq .elementor-accordion-icon.elementor-accordion-icon-left { width: 34px; height: 34px; }
    body.vk .vk-faq .elementor-tab-content { padding: 0 20px 18px 57px !important; font-size: 14.5px; }
}
@media (max-width: 560px) {
    body.vk .vk-faq .elementor-tab-title { gap: 11px; padding: 14px 16px 14px 12px !important; }
    body.vk .vk-faq .elementor-tab-title::before { width: 25px; height: 25px; font-size: 10px; }
    body.vk .vk-faq .elementor-accordion-icon.elementor-accordion-icon-left { width: 30px; height: 30px; }
    body.vk .vk-faq .elementor-accordion-icon svg { width: 11px; height: 11px; }
    body.vk .vk-faq .elementor-tab-content { padding: 0 16px 16px 12px !important; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-faq .elementor-accordion-item,
    body.vk .vk-faq .elementor-accordion-icon.elementor-accordion-icon-left,
    body.vk .vk-faq .elementor-tab-title { transition: none !important; }
    body.vk .vk-faq .elementor-tab-content { animation: none !important; }
}

/* The "সব প্রশ্ন দেখুন / কাস্টমার সার্ভিস" button row (widget vp0014) sits
   directly against the last accordion pill with 0px gap (the container's
   flex `gap` is 0 and neither the accordion nor the button row carries its
   own margin) — add breathing room above it. */
body.vk .vk-faq .vk-faq__more { margin-top: 32px !important; }
@media (max-width: 560px) {
    body.vk .vk-faq .vk-faq__more { margin-top: 24px !important; }
}