new-templane/resources/sass/components/_faq.scss

.faq {
    display: flex;
    flex-direction: column;
    gap: 16px;

    &__title {
        margin:0;
        margin-bottom: 24px;
        font-weight: 600;
        color: var(--text-color);
    }

    &__item {
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid var(--content-border-color);
        background: var(--content-bg-color);

        &.active {
            .faq__question::after {
                transform: rotate(45deg);
            }

            .faq__question::before {
                transform: rotate(-45deg);
            }

            .faq__answer {
                opacity: 1;
            }
        }
    }

    &__question {
        padding: 20px 56px 20px 24px;
        cursor: pointer;
        position: relative;
        user-select: none;
        transition: background-color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 16px;

        @include mobile{
            padding: 16px 56px 16px 16px;
        }

        h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            color: var(--text-color);
        }

        // Крестик с псевдоэлементами
        &::before,
        &::after {
            content: '';
            position: absolute;
            right: 24px;
            top: 50%;
            width: 16px;
            height: 2px;
            background-color: var(--text-color);
            transition: transform 0.3s ease;
        }

        &::before {
            transform: translateY(-50%);
        }

        &::after {
            transform: translateY(-50%) rotate(90deg);
        }
    }

    &__number {
        display: flex;
        width: 32px;
        height: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        aspect-ratio: 1/1;
        font-weight: 600;
        background-color: var(--accent-color);
        color: var(--text-color);
        flex-shrink: 0;
        border-radius:50%;
        @include mobile{
            width:26px;
            height:26px;
        }
    }

    &__question-title {
        flex: 1;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: var(--text-color);
    }

    &__answer {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        border-top:1px dashed var(--content-border-color); 

        p {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: var(--text-color);
            opacity: 0.8;
        }
    }

    &__answer-inner{
        padding:  24px;
    }
}