.section-affiliates-marketing-customer-faq {
    --faq-padding-vertical: 16px;
    --faq-padding-horizontal: 32px;
    --title-font-size: 28px;
    --list-padding-horizontal: var(--site-padding-horizontal);
    --p-font-size: 20px;
    --text-gap: 16px;

    @media (width <= 880px) {
        --title-font-size: 24px;
        --list-padding-horizontal: 0;
        --faq-padding-horizontal: 24px;
    }

    @media (width <= 660px) {
        --title-font-size: 20px;
        --faq-padding-horizontal: 16px;
        --p-font-size: 16px;
        --text-gap: 12px;
    }

    @media (width <= 320px) {
        --title-font-size: 16px;
        --faq-padding-vertical: 12px;
        --faq-padding-horizontal: 12px;
        --p-font-size: 16px;
        --text-gap: 12px;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        gap: 16px;
        width: 100%;
        padding: 0;

        .faq-item {
            --display-text: none;
            --color-border: #ccc;
            --color-title: #162749;
            --color-icon: var(--color-btm-orange);
            --icon-display: block;
            --icon-url: url('/assets/svg/sign-plus-P5HkcT8.svg');
            --background-title: #fff;

            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: stretch;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.2s linear;
            background-color: #fff;
            box-shadow: 0 0 0 1px var(--color-border);

            &:not([data-opened="true"]):not([data-opened="permanent"]):hover {
                --background-title: rgba(from var(--color-btm-orange) r g b / 0.15);
            }

            &[data-opened="permanent"],
            &[data-opened="true"] {
                --display-text: flex;
                --color-border: var(--color-btm-orange);
                --color-title: #fff;
                --color-icon: #fff;
                --icon-url: url('/assets/svg/sign-minus-sNypyTS.svg');
                --background-title: var(--color-btm-orange);
            }

            &[data-opened="permanent"] {
                --icon-display: none;
            }

            .faq-title {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                padding: var(--faq-padding-vertical) calc(var(--faq-padding-horizontal) * 2 + var(--title-font-size)) var(--faq-padding-vertical) var(--faq-padding-horizontal);
                color: var(--color-title);
                font-size: var(--title-font-size);
                line-height: 1;
                font-weight: 700;
                cursor: pointer;
                text-transform: capitalize;
                transition: all 0.2s linear;
                font-family: 'IBM Plex Sans', sans-serif;
                background-color: var(--background-title);

                &:after {
                    content: '';
                    display: var(--icon-display);
                    position: absolute;
                    right: var(--faq-padding-horizontal);
                    width: var(--title-font-size);
                    height: var(--title-font-size);
                    background-color: var(--color-icon);
                    mask: var(--icon-url) no-repeat center;
                }
            }

            .faq-text {
                display: var(--display-text);
                flex-direction: column;
                align-items: start;
                justify-content: start;
                gap: var(--text-gap);
                padding: var(--faq-padding-horizontal);
                border-radius: 16px;

                ul {
                    list-style-position: outside;
                    padding-left: calc(var(--faq-padding-horizontal) * 1.5);
                }

                p, li {
                    font-size: var(--p-font-size);
                    line-height: 1.5;
                    color: var(--color-btm-dark-grey);
                }

                blockquote {
                    padding: 16px;
                    border-radius: 8px;
                    border-left: 8px solid rgb(from var(--color-btm-dark-blue) r g b / 0.25);
                    background-color: #f7f8fb;
                }
            }
        }
    }
}