/* ==========================================================================
   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).
   ========================================================================== */

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

/* ---- 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 gold glow, clipped to the pill's own rounded silhouette */
body.vk .vk-faq .elementor-accordion-item::after {
    content: '';
    position: absolute;
    inset: -45% -6%;
    background: radial-gradient(closest-side, var(--vk-gold-2), transparent 72%);
    opacity: .05;
    z-index: -1;
    filter: blur(28px);
    pointer-events: none;
    transition: opacity .5s ease;
}

body.vk .vk-faq .elementor-accordion-item:hover {
    border-color: rgba(200, 134, 11, .38) !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: .16;
}

/* open state: settle into a big soft-pill radius instead of a stretched oval */
body.vk .vk-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
    border-radius: 28px;
    border-color: rgba(200, 134, 11, .4) !important;
    box-shadow: var(--vk-shadow-card-hi), 0 0 0 1px rgba(200, 134, 11, .10) inset;
}

/* ---- 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-gold-3) !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-gold);
}
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: rgba(200, 134, 11, .10);
    border: 1px solid rgba(200, 134, 11, .22);
    color: var(--vk-gold-3);
    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: var(--vk-grad-gold);
    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: var(--vk-grad-gold);
    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; }
}