.wp-block-faqmate-faq {
    // Prevent layout shift
    position: relative;

    .asfa__container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        // Prevent margin collapse
        position: relative;
    }

    // Single FAQ item
    .single-faq {
        // Isolate layout to prevent shifts
        position: relative;
        contain: layout style;
        // Prevent margin collapse
        overflow: hidden;
    }

    .asfa__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
        padding: 10px;
        background: #e0e0e0;
        border-radius: 3px;
        // Prevent text selection causing shifts
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        // Cursor pointer
        cursor: pointer;
        // Prevent focus outline shift
        outline-offset: -2px;
        // Ensure stable positioning
        position: relative;

        &:focus {
            outline: 2px solid rgba(0, 0, 0, 0.3);
            outline-offset: -2px;
        }

        .asfa__heading_txt {
            width: 100%;
            text-decoration: none;
            // Prevent margin collapse
            display: block;
        }
    }

    .asfa__heading_tag,
    .asfa__subheading_tag {
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        // Prevent text from causing shifts
        display: block;
    }

    .asfa__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        // Prevent icon from causing layout shifts
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        // Hardware acceleration
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        transition: transform 0.3s ease;

        svg {
            width: 1em;
            height: 1em;
            font-size: 20px;
            display: block;
        }

        img {
            max-width: 1em;
            display: block;
        }

        .asfa__collapse,
        .asfa__expand {
            display: flex;
            align-items: center;
            justify-content: center;
            // Ensure icons don't shift
            width: 100%;
            height: 100%;
        }

        .asfa__expand {
            display: none;
        }

        &.asfa__active_icon {
            .asfa__collapse {
                display: none;
            }

            .asfa__expand {
                display: flex;
            }
        }
    }

    .asfa__body {
        display: none;
        // Remove default padding during animation
        padding: 0;
        overflow: hidden;
        // Hardware acceleration for smoother animation
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: height;
        // Ensure smooth transition
        transition: height 0.3s ease-in-out;
        // Prevent margin collapse
        position: relative;

        &.asfa__active {
            display: block;
        }
    }

    .asfa__body_inner {
        // Apply padding to inner element instead
        padding: 10px;
        // Prevent margin collapse with tiny padding
        padding-top: 10.01px;
        padding-bottom: 10.01px;
        // Ensure stable layout
        display: block;
        position: relative;
    }

    // Ensure answer content doesn't cause shifts
    .answer {
        margin: 0;

        p {
            margin: 0 0 1em 0;

            &:last-child {
                margin-bottom: 0;
            }
        }

        * {
            max-width: 100%;
        }
    }
    /* Auto Numbering Styles */
    .asfa__numbering {
        display: inline-block;
        font-weight: 600;
        margin-right: 8px;
        color: inherit;
    }

    .asfa__heading_txt.numbering-after .asfa__numbering {
        margin-right: 0;
        margin-left: 8px;
    }

    .asfa__heading_txt.has-numbering {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .asfa__heading_txt.numbering-after {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    /* Optional: Add some color variations */
    .single-faq .asfa__numbering {
        transition: color 0.3s ease;
    }

    .single-faq.asfa__active_accordion .asfa__numbering {
        color: #0073e6;
    }

    /* Responsive spacing */
    @media (max-width: 768px) {
        .asfa__numbering {
            margin-right: 6px;
        }

        .asfa__heading_txt.numbering-after .asfa__numbering {
            margin-left: 6px;
        }
    }
}

.faq-append-btn {
    margin-top: 10px;
    text-align: center;
    background-color: #0000ff;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: #0000cc;
    }
}

// Global smooth scroll prevention during accordion animation
html.accordion-animating {
    scroll-behavior: auto !important;
}

// Prevent any anchor scroll behavior
.wp-block-faqmate-faq a[href^='#'] {
    scroll-behavior: auto !important;
}