/*
 * ProductFAQ AI — Frontend Accordion Styles
 *
 * Specificity strategy (Fix #1 #3):
 *   All rules scoped under #epwf-[id] OR .epwf-wrap — giving us at least
 *   class+class specificity. Every layout-critical rule carries !important
 *   to defeat theme ul li / button / p resets (Fix #1 #4).
 *
 * Open state (Fix #2):
 *   aria-expanded="true" selector explicitly styled for all three variants.
 *
 * Hidden panels (Fix #4):
 *   .epwf-answer[hidden] uses display:none !important AND visibility:hidden !important
 *   so themes that force display:block are defeated.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. CSS Custom Properties
   Injected at runtime via wp_add_inline_style() in class-frontend.php.
   Defaults here are fallbacks only.
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap {
    --epwf-primary:     #7c3aed;
    --epwf-hover:       #6d28d9;
    --epwf-active:      #5b21b6;
    --epwf-text:        #1f2937;
    --epwf-answer-text: #374151;
    --epwf-bg:          #ffffff;
    --epwf-border:      #e5e7eb;
    --epwf-answer-bg:   #f9fafb;
    --epwf-q-fs:        15px;
    --epwf-a-fs:        14px;
    --epwf-q-pv:        14px;
    --epwf-q-ph:        18px;
    --epwf-a-pv:        12px;
    --epwf-a-ph:        18px;
    --epwf-item-gap:    0px;
    --epwf-wrap-mt:     32px;
    --epwf-wrap-mb:     32px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Wrapper
   Fix #1: High specificity — .woocommerce .epwf-wrap beats most theme rules.
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap,
.woocommerce .epwf-wrap,
.woocommerce-page .epwf-wrap {
    display:       block                    !important;
    margin-top:    var(--epwf-wrap-mt)      !important;
    margin-bottom: var(--epwf-wrap-mb)      !important;
    padding:       0                        !important;
    background:    var(--epwf-bg)           !important;
    color:         var(--epwf-text)         !important;
    font-size:     var(--epwf-q-fs)         !important;
    font-family:   inherit                  !important;
    line-height:   inherit                  !important;
    border:        none                     !important;
    box-shadow:    none                     !important;
    box-sizing:    border-box               !important;
}

/* Reset all children's box model */
.epwf-wrap *,
.epwf-wrap *::before,
.epwf-wrap *::after {
    box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Heading
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-heading,
.woocommerce .epwf-wrap .epwf-heading {
    display:     block               !important;
    font-size:   calc(var(--epwf-q-fs) * 1.35) !important;
    font-weight: 700                 !important;
    color:       var(--epwf-text)    !important;
    margin:      0 0 16px 0          !important;
    padding:     0                   !important;
    background:  none                !important;
    border:      none                !important;
    line-height: 1.3                 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Accordion list
   Fix #1: theme ul/ol rules reset
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-accordion,
.woocommerce .epwf-wrap .epwf-accordion {
    list-style:         none    !important;
    margin:             0       !important;
    padding:            0       !important;
    border:             none    !important;
    background:         none    !important;
    counter-reset:      none    !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Item (li / div)
   Fix #1: theme li rules (bullets, padding, margin) reset
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item,
.woocommerce .epwf-wrap .epwf-item {
    display:        block                           !important;
    list-style:     none                            !important;
    background:     var(--epwf-bg)                 !important;
    border-bottom:  1px solid var(--epwf-border)   !important;
    margin:         0 0 var(--epwf-item-gap) 0      !important;
    padding:        0                               !important;
    border-left:    none                            !important;
    border-right:   none                            !important;
    border-top:     none                            !important;
}
.epwf-wrap .epwf-item:last-child,
.woocommerce .epwf-wrap .epwf-item:last-child {
    border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Question button
   Fix #1: theme button/input reset. Fix #2: explicit open state style.
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item .epwf-q,
.woocommerce .epwf-wrap .epwf-item .epwf-q {
    display:         flex                               !important;
    align-items:     center                             !important;
    justify-content: space-between                      !important;
    gap:             12px                               !important;
    width:           100%                               !important;
    padding:         var(--epwf-q-pv) var(--epwf-q-ph) !important;
    background:      transparent                        !important;
    border:          none                               !important;
    border-radius:   0                                  !important;
    box-shadow:      none                               !important;
    cursor:          pointer                            !important;
    font-family:     inherit                            !important;
    font-size:       var(--epwf-q-fs)                  !important;
    font-weight:     600                                !important;
    line-height:     1.4                                !important;
    color:           var(--epwf-text)                   !important;
    text-align:      left                               !important;
    text-decoration: none                               !important;
    text-transform:  none                               !important;
    letter-spacing:  normal                             !important;
    margin:          0                                  !important;
    outline-offset:  2px                                !important;
    transition:      color 0.18s ease, background 0.18s ease !important;
}

/* Hover state */
.epwf-wrap .epwf-item .epwf-q:hover,
.woocommerce .epwf-wrap .epwf-item .epwf-q:hover {
    color:      var(--epwf-hover)   !important;
    background: transparent         !important;
}

/* Focus state (accessibility) */
.epwf-wrap .epwf-item .epwf-q:focus-visible,
.woocommerce .epwf-wrap .epwf-item .epwf-q:focus-visible {
    outline: 2px solid var(--epwf-primary) !important;
    outline-offset: 2px !important;
}

/* Fix #2: Open state — aria-expanded="true" */
.epwf-wrap .epwf-item .epwf-q[aria-expanded="true"],
.woocommerce .epwf-wrap .epwf-item .epwf-q[aria-expanded="true"] {
    color:      var(--epwf-active) !important;
    background: transparent        !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Question text span
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item .epwf-q .epwf-q-text,
.woocommerce .epwf-wrap .epwf-item .epwf-q .epwf-q-text {
    flex:           1         !important;
    display:        block     !important;
    margin:         0         !important;
    padding:        0         !important;
    font-size:      inherit   !important;
    font-weight:    inherit   !important;
    color:          inherit   !important;
    line-height:    inherit   !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Chevron icon
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item .epwf-q .epwf-chevron,
.woocommerce .epwf-wrap .epwf-item .epwf-q .epwf-chevron {
    display:     inline-flex    !important;
    align-items: center         !important;
    flex-shrink: 0              !important;
    width:       20px           !important;
    height:      20px           !important;
    color:       currentColor   !important;
    transition:  transform 0.25s ease !important;
    margin:      0              !important;
    padding:     0              !important;
}

.epwf-wrap .epwf-item .epwf-q .epwf-chevron svg,
.woocommerce .epwf-wrap .epwf-item .epwf-q .epwf-chevron svg {
    width:    20px !important;
    height:   20px !important;
    display:  block !important;
}

/* Fix #2: Rotate chevron when open */
.epwf-wrap .epwf-item .epwf-q[aria-expanded="true"] .epwf-chevron,
.woocommerce .epwf-wrap .epwf-item .epwf-q[aria-expanded="true"] .epwf-chevron {
    transform: rotate(180deg) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Answer panel — CLOSED state
   Fix #4: Double-lock with display + visibility + max-height so themes
   cannot force the panel open with display:block or visibility:visible.
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item .epwf-answer[hidden],
.woocommerce .epwf-wrap .epwf-item .epwf-answer[hidden] {
    display:    none                !important;
    visibility: hidden              !important;
    max-height: 0                   !important;
    overflow:   hidden              !important;
    margin:     0                   !important;
    padding:    0                   !important;
    border:     none                !important;
    opacity:    0                   !important;
    pointer-events: none            !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Answer panel — OPEN state (no [hidden] attribute)
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item .epwf-answer,
.woocommerce .epwf-wrap .epwf-item .epwf-answer {
    display:    block   !important;
    visibility: visible !important;
    overflow:   hidden  !important;
    margin:     0       !important;
    padding:    0       !important;
    opacity:    1       !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Answer inner content
   Fix #1: theme p / ul / li resets inside answer
───────────────────────────────────────────────────────────────────────────── */
.epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner,
.woocommerce .epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner {
    display:     block                              !important;
    padding:     var(--epwf-a-pv) var(--epwf-a-ph) !important;
    background:  var(--epwf-answer-bg)              !important;
    font-size:   var(--epwf-a-fs)                   !important;
    color:       var(--epwf-answer-text)            !important;
    line-height: 1.7                                !important;
    margin:      0                                  !important;
    border:      none                               !important;
}

/* Reset theme paragraph/list resets inside answers */
.epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner p,
.woocommerce .epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner p {
    margin-top:    0              !important;
    margin-bottom: 0.5em          !important;
    padding:       0              !important;
    font-size:     inherit        !important;
    color:         inherit        !important;
    line-height:   inherit        !important;
}
.epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner p:last-child,
.woocommerce .epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner p:last-child {
    margin-bottom: 0 !important;
}

.epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner ul,
.epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner ol,
.woocommerce .epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner ul,
.woocommerce .epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner ol {
    margin:      0 0 0.5em 1.2em !important;
    padding:     0               !important;
    list-style:  revert          !important;
}
.epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner li,
.woocommerce .epwf-wrap .epwf-item .epwf-answer .epwf-answer-inner li {
    margin-bottom: 0.25em !important;
    padding:       0      !important;
    list-style:    revert !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE VARIANTS
═══════════════════════════════════════════════════════════════════════════ */

/* ── Modern ── */
.epwf-wrap.epwf-modern .epwf-accordion,
.woocommerce .epwf-wrap.epwf-modern .epwf-accordion {
    border:        1px solid var(--epwf-border) !important;
    border-radius: 8px                          !important;
    overflow:      hidden                       !important;
    box-shadow:    0 2px 10px rgba(0,0,0,.07)  !important;
    background:    var(--epwf-bg)              !important;
}
.epwf-wrap.epwf-modern .epwf-item,
.woocommerce .epwf-wrap.epwf-modern .epwf-item {
    border-bottom: 1px solid var(--epwf-border) !important;
    border-left:   none !important;
    border-right:  none !important;
    border-top:    none !important;
}
.epwf-wrap.epwf-modern .epwf-item:last-child,
.woocommerce .epwf-wrap.epwf-modern .epwf-item:last-child {
    border-bottom: none !important;
}
/* Fix #2: Modern open state */
.epwf-wrap.epwf-modern .epwf-item .epwf-q[aria-expanded="true"],
.woocommerce .epwf-wrap.epwf-modern .epwf-item .epwf-q[aria-expanded="true"] {
    color:        var(--epwf-active)                    !important;
    border-left:  3px solid var(--epwf-primary)         !important;
    padding-left: calc(var(--epwf-q-ph) - 3px)         !important;
    background:   rgba(124, 58, 237, 0.04)              !important;
}

/* ── Minimal ── */
.epwf-wrap.epwf-minimal .epwf-accordion,
.woocommerce .epwf-wrap.epwf-minimal .epwf-accordion {
    border-top:    1px solid var(--epwf-border) !important;
    border-radius: 0                            !important;
    box-shadow:    none                         !important;
    background:    none                         !important;
    border-left:   none !important;
    border-right:  none !important;
    border-bottom: none !important;
}
.epwf-wrap.epwf-minimal .epwf-item,
.woocommerce .epwf-wrap.epwf-minimal .epwf-item {
    border-bottom: 1px solid var(--epwf-border) !important;
}
/* Fix #2: Minimal open state */
.epwf-wrap.epwf-minimal .epwf-item .epwf-q[aria-expanded="true"],
.woocommerce .epwf-wrap.epwf-minimal .epwf-item .epwf-q[aria-expanded="true"] {
    color:      var(--epwf-active) !important;
    background: transparent        !important;
}

/* ── Boxed ── */
.epwf-wrap.epwf-boxed .epwf-accordion,
.woocommerce .epwf-wrap.epwf-boxed .epwf-accordion {
    display:        flex          !important;
    flex-direction: column        !important;
    gap:            8px           !important;
    border:         none          !important;
    background:     none          !important;
    box-shadow:     none          !important;
    border-radius:  0             !important;
    overflow:       visible       !important;
}
.epwf-wrap.epwf-boxed .epwf-item,
.woocommerce .epwf-wrap.epwf-boxed .epwf-item {
    border:        1px solid var(--epwf-border) !important;
    border-radius: 6px                          !important;
    overflow:      hidden                       !important;
    margin-bottom: 0                            !important;
}
.epwf-wrap.epwf-boxed .epwf-item:last-child,
.woocommerce .epwf-wrap.epwf-boxed .epwf-item:last-child {
    border: 1px solid var(--epwf-border) !important;
}
/* Fix #2: Boxed open state */
.epwf-wrap.epwf-boxed .epwf-item .epwf-q[aria-expanded="true"],
.woocommerce .epwf-wrap.epwf-boxed .epwf-item .epwf-q[aria-expanded="true"] {
    color:        var(--epwf-active)                !important;
    background:   rgba(124, 58, 237, 0.04)          !important;
    border-left:  3px solid var(--epwf-primary)     !important;
    padding-left: calc(var(--epwf-q-ph) - 3px)     !important;
}
