/**
 * Product experience — FAQ (Rioiz / Themesflat-style two-column + accordion-wrap).
 * Ported minimal rules from Rioiz styles.css + PE band overrides.
 */

/* ---- Section rhythm (matches .tf-spacing-1) ---- */
#faq.section-faqs.tf-spacing-1 {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 991px) {
    #faq.section-faqs.tf-spacing-1 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

#faq .rioiz-pe-faq__heading {
    display: grid;
    gap: 12px;
    max-width: 34rem;
}

@media (min-width: 992px) {
    #faq .section-faqs .accordion-wrap,
    #faq .accordion-wrap {
        padding-left: 20px;
    }
}

#faq .accordion-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---- Accordion (+ icon) — scoped ---- */
#faq .accordion-item .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#faq .accordion-item .icon {
    display: block;
    height: 24px;
    width: 24px;
    position: relative;
    flex-shrink: 0;
}

#faq .accordion-item .icon::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 2px;
    background-color: var(--Text-primary, var(--site-heading-color));
    transition: 0.25s ease-in-out;
}

#faq .accordion-item .icon::before {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 16px;
    background-color: var(--Text-primary, var(--site-heading-color));
    transition: 0.25s ease-in-out;
}

#faq .accordion-item .accordion-title {
    width: 100%;
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

#faq .accordion-item .accordion-title:not(.collapsed) .icon::after {
    opacity: 0;
}

#faq .accordion-item .accordion-title:not(.collapsed) .icon::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

#faq .accordion-item .accordion-faqs-content {
    padding-top: 12px;
}

#faq .accordion-item.style-1 {
    padding: 24px 24px 23px;
    border-bottom: 1px solid var(--Line, var(--site-border-color));
}

@media (max-width: 575px) {
    #faq .accordion-item.style-1 {
        padding-left: 0;
        padding-right: 0;
    }
}

#faq .accordion-item.style-1 .accordion-title {
    width: 100%;
}

#faq .accordion-item.style-1 .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#faq .accordion-item.style-1 .accordion-title:not(.collapsed) .icon::after {
    opacity: 0;
}

#faq .accordion-item.style-1 .accordion-title:not(.collapsed) .icon::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

#faq .accordion-item.style-1:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#faq .accordion-item.style-1 .accordion-faqs-content p:last-child {
    margin-bottom: 0;
}

/* ---- Default (light) section shell ---- */
#faq.rioiz-pe-faq:not(.rioiz-pe-page-band--dark) {
    background:
        radial-gradient(ellipse 75% 45% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 7%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--site-light-bg-color) 55%, var(--site-surface-color)) 0%, var(--site-surface-color) 100%);
    border-top: 1px solid color-mix(in srgb, var(--site-heading-color) 6%, transparent);
}

#faq.rioiz-pe-page-band--light.rioiz-pe-faq {
    background:
        radial-gradient(ellipse 80% 50% at 50% -15%, color-mix(in srgb, var(--site-primary-color) 8%, transparent), transparent 50%),
        linear-gradient(180deg, var(--site-surface-color) 0%, color-mix(in srgb, var(--site-light-bg-color) 35%, var(--site-surface-color)) 100%);
}

/* ---- Dark band ---- */
#faq.rioiz-pe-page-band--dark.rioiz-pe-faq {
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 12%, transparent), transparent 52%),
        linear-gradient(180deg, var(--site-dark-bg-color) 0%, color-mix(in srgb, var(--site-dark-bg-color) 88%, var(--site-tertiary-color) 12%) 100%);
    border-top-color: var(--rioiz-hairline-inverse);
}

#faq.rioiz-pe-page-band--dark .rioiz-pe-faq__heading .title {
    color: var(--site-ink-light) !important;
}

#faq.rioiz-pe-page-band--dark .rioiz-pe-faq__heading .sub,
#faq.rioiz-pe-page-band--dark .rioiz-pe-faq__heading .text_primary-color {
    color: color-mix(in srgb, var(--site-primary-color) 65%, var(--site-ink-light) 35%) !important;
}

#faq.rioiz-pe-page-band--dark .rioiz-pe-faq__heading .text_secondary {
    color: color-mix(in srgb, var(--site-ink-light) 72%, var(--site-muted-color) 28%) !important;
}

#faq.rioiz-pe-page-band--dark .accordion-item.style-1 {
    border-bottom-color: var(--rioiz-hairline-inverse);
}

#faq.rioiz-pe-page-band--dark .accordion-item.style-1 .title {
    color: var(--site-ink-light) !important;
}

#faq.rioiz-pe-page-band--dark .accordion-item .icon::after,
#faq.rioiz-pe-page-band--dark .accordion-item .icon::before {
    background-color: var(--site-ink-light) !important;
}

#faq.rioiz-pe-page-band--dark .accordion-item .accordion-faqs-content .text_secondary {
    color: color-mix(in srgb, var(--site-ink-light) 70%, var(--site-muted-color) 30%) !important;
}