/* =========================================================
   SOULULAB — FAQ ACCORDION
   Закрытые светлые, hover/open в цвет темы
   ========================================================= */

.soul-faq {
    position: relative;
}

.soul-faq__list,
.soul-faq-list {
    display: grid;
    gap: 14px;

    margin-top: 34px;
}

/* item: поддержка и details, и обычных div */
.soul-faq details,
.soul-faq__item {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    border-radius: 18px;
    border: 1px solid rgba(var(--theme-rgb), 0.14);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.84) 0%,
            rgba(255, 255, 255, 0.66) 42%,
            rgba(var(--theme-soft-rgb), 0.32) 100%
        );

    box-shadow:
        0 12px 24px rgba(32, 38, 48, 0.055),
        0 4px 10px rgba(32, 38, 48, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(var(--theme-rgb), 0.06);

    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);

    transition:
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 180ms ease;
}

/* question */
.soul-faq summary,
.soul-faq__question {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: 100%;
    min-height: 58px;
    padding: 0 22px;

    color: rgba(34, 27, 44, 0.82);

    cursor: pointer;
    list-style: none;
    border: 0;
    background: transparent;

    font-family: var(--font-main, var(--soul-font-main));
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;

    transition:
        color 220ms ease,
        text-shadow 220ms ease;
}

.soul-faq summary::-webkit-details-marker {
    display: none;
}

/* стрелка справа */
.soul-faq summary::after,
.soul-faq__question::after {
    content: "";

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg) translateY(-2px);
    opacity: 0.72;

    transition:
        transform 220ms ease,
        opacity 220ms ease;
}

/* answer */
.soul-faq__answer,
.soul-faq details > div,
.soul-faq details > p {
    position: relative;
    z-index: 2;

    padding: 0 22px 20px;

    color: rgba(34, 27, 44, 0.68);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}

/* hover: цвет темы */
.soul-faq details:hover,
.soul-faq__item:hover {
    transform: translateY(-1px);

    border-color: rgba(var(--theme-rgb), 0.38);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(var(--theme-rgb), 0.72) 48%,
            rgba(var(--theme-rgb), 0.92) 100%
        );

    box-shadow:
        0 14px 28px rgba(32, 38, 48, 0.08),
        0 0 18px rgba(var(--theme-rgb), 0.24),
        0 0 34px rgba(var(--theme-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

.soul-faq details:hover summary,
.soul-faq__item:hover .soul-faq__question {
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(20, 20, 24, 0.16);
}

/* open / active: остаётся в цвете темы */
.soul-faq details[open],
.soul-faq__item.is-open,
.soul-faq__item.is-active {
    border-color: rgba(var(--theme-rgb), 0.46);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(var(--theme-rgb), 0.72) 44%,
            rgba(var(--theme-rgb), 0.94) 100%
        );

    box-shadow:
        0 16px 32px rgba(32, 38, 48, 0.09),
        0 0 20px rgba(var(--theme-rgb), 0.30),
        0 0 42px rgba(var(--theme-rgb), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.soul-faq details[open] summary,
.soul-faq__item.is-open .soul-faq__question,
.soul-faq__item.is-active .soul-faq__question {
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(20, 20, 24, 0.16);
}

.soul-faq details[open] summary::after,
.soul-faq__item.is-open .soul-faq__question::after,
.soul-faq__item.is-active .soul-faq__question::after {
    transform: rotate(225deg) translate(-2px, -1px);
    opacity: 1;
}

.soul-faq details[open] .soul-faq__answer,
.soul-faq details[open] > div,
.soul-faq details[open] > p,
.soul-faq__item.is-open .soul-faq__answer,
.soul-faq__item.is-active .soul-faq__answer {
    color: rgba(255, 255, 255, 0.88);
}

/* базовая тема — не слишком голубая, больше sky-titanium */
html[data-theme="base"] .soul-faq details:hover,
html[data-theme="base"] .soul-faq__item:hover,
html[data-theme="base"] .soul-faq details[open],
html[data-theme="base"] .soul-faq__item.is-open,
html[data-theme="base"] .soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(148, 198, 230, 0.72) 42%,
            rgba(112, 154, 184, 0.92) 100%
        );

    border-color: rgba(148, 198, 230, 0.54);

    box-shadow:
        0 16px 32px rgba(54, 66, 80, 0.10),
        0 0 18px rgba(148, 198, 230, 0.30),
        0 0 40px rgba(148, 198, 230, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
    .soul-faq__list,
    .soul-faq-list {
        gap: 10px;
        margin-top: 24px;
    }

    .soul-faq summary,
    .soul-faq__question {
        min-height: 52px;
        padding: 0 16px;

        font-size: 14px;
    }

    .soul-faq__answer,
    .soul-faq details > div,
    .soul-faq details > p {
        padding: 0 16px 16px;
        font-size: 14px;
    }
}
/* =========================================================
   FAQ — READABLE COLORS FINAL
   Читаемые активные плашки FAQ
   ========================================================= */

/* закрытые вопросы */
.soul-faq details,
.soul-faq__item {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(248, 250, 252, 0.84) 48%,
            rgba(var(--theme-soft-rgb), 0.30) 100%
        ) !important;

    border-color: rgba(160, 170, 185, 0.22) !important;

    box-shadow:
        0 10px 22px rgba(36, 42, 54, 0.055),
        0 4px 10px rgba(36, 42, 54, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

.soul-faq summary,
.soul-faq__question {
    color: rgba(34, 27, 44, 0.84) !important;
}

.soul-faq summary::after,
.soul-faq__question::after {
    color: rgba(34, 27, 44, 0.62) !important;
}

/* hover и раскрытая плашка — общий вариант для цветных тем */
.soul-faq details:hover,
.soul-faq__item:hover,
.soul-faq details[open],
.soul-faq__item.is-open,
.soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(var(--theme-rgb), 0.78) 0%,
            rgba(var(--theme-rgb), 0.92) 52%,
            rgba(var(--theme-rgb), 1) 100%
        ) !important;

    border-color: rgba(var(--theme-rgb), 0.62) !important;

    box-shadow:
        0 16px 32px rgba(34, 28, 44, 0.12),
        0 0 20px rgba(var(--theme-rgb), 0.34),
        0 0 44px rgba(var(--theme-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

/* текст активной/hover плашки */
.soul-faq details:hover summary,
.soul-faq__item:hover .soul-faq__question,
.soul-faq details[open] summary,
.soul-faq__item.is-open .soul-faq__question,
.soul-faq__item.is-active .soul-faq__question {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(20, 20, 24, 0.22) !important;
}

/* стрелка активной/hover плашки */
.soul-faq details:hover summary::after,
.soul-faq__item:hover .soul-faq__question::after,
.soul-faq details[open] summary::after,
.soul-faq__item.is-open .soul-faq__question::after,
.soul-faq__item.is-active .soul-faq__question::after {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ответ внутри открытой плашки */
.soul-faq details[open] .soul-faq__answer,
.soul-faq details[open] > div,
.soul-faq details[open] > p,
.soul-faq__item.is-open .soul-faq__answer,
.soul-faq__item.is-active .soul-faq__answer {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 1px rgba(20, 20, 24, 0.14) !important;
}

/* BASE / SKY TITANIUM — делаем активную плашку темнее, чтобы белый текст читался */
html[data-theme="base"] .soul-faq details:hover,
html[data-theme="base"] .soul-faq__item:hover,
html[data-theme="base"] .soul-faq details[open],
html[data-theme="base"] .soul-faq__item.is-open,
html[data-theme="base"] .soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(130, 176, 205, 0.92) 0%,
            rgba(98, 144, 176, 0.96) 52%,
            rgba(78, 116, 146, 1) 100%
        ) !important;

    border-color: rgba(160, 210, 240, 0.68) !important;

    box-shadow:
        0 16px 32px rgba(48, 66, 82, 0.16),
        0 0 20px rgba(150, 205, 240, 0.34),
        0 0 46px rgba(150, 205, 240, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

/* у закрытых FAQ в base оставляем спокойный светлый вид */
html[data-theme="base"] .soul-faq details:not([open]),
html[data-theme="base"] .soul-faq__item:not(.is-open):not(.is-active) {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(248, 250, 252, 0.88) 52%,
            rgba(229, 236, 242, 0.48) 100%
        ) !important;

    border-color: rgba(160, 170, 185, 0.22) !important;
}
/* =========================================================
   FAQ — SOFT GRADIENT + DARK TEXT ON HOVER/OPEN
   Закрытые: белый → цвет темы
   Hover/Open: цвет темы, но текст графитовый
   ========================================================= */

/* закрытые плашки — больше градиента от белого к цвету темы */
.soul-faq details:not([open]),
.soul-faq__item:not(.is-open):not(.is-active) {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.84) 34%,
            rgba(var(--theme-rgb), 0.14) 68%,
            rgba(var(--theme-rgb), 0.24) 100%
        ) !important;

    border-color: rgba(var(--theme-rgb), 0.18) !important;

    box-shadow:
        0 10px 22px rgba(36, 42, 54, 0.055),
        0 4px 10px rgba(36, 42, 54, 0.035),
        0 0 18px rgba(var(--theme-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(var(--theme-rgb), 0.08) !important;
}

/* текст закрытых */
.soul-faq details:not([open]) summary,
.soul-faq__item:not(.is-open):not(.is-active) .soul-faq__question {
    color: rgba(34, 27, 44, 0.86) !important;
    text-shadow: none !important;
}

/* hover/open — цвет темы, но не слишком тёмный */
.soul-faq details:hover,
.soul-faq__item:hover,
.soul-faq details[open],
.soul-faq__item.is-open,
.soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(var(--theme-rgb), 0.44) 32%,
            rgba(var(--theme-rgb), 0.64) 68%,
            rgba(var(--theme-rgb), 0.74) 100%
        ) !important;

    border-color: rgba(var(--theme-rgb), 0.42) !important;

    box-shadow:
        0 14px 28px rgba(34, 28, 44, 0.10),
        0 0 18px rgba(var(--theme-rgb), 0.24),
        0 0 38px rgba(var(--theme-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}

/* главное: при наведении и раскрытии текст графитовый, не белый */
.soul-faq details:hover summary,
.soul-faq__item:hover .soul-faq__question,
.soul-faq details[open] summary,
.soul-faq__item.is-open .soul-faq__question,
.soul-faq__item.is-active .soul-faq__question {
    color: rgba(34, 27, 44, 0.92) !important;
    text-shadow: none !important;
}

/* стрелка тоже графитовая */
.soul-faq details:hover summary::after,
.soul-faq__item:hover .soul-faq__question::after,
.soul-faq details[open] summary::after,
.soul-faq__item.is-open .soul-faq__question::after,
.soul-faq__item.is-active .soul-faq__question::after {
    color: rgba(34, 27, 44, 0.72) !important;
    opacity: 1 !important;
}

/* ответ внутри открытой плашки — тоже читаемый графит */
.soul-faq details[open] .soul-faq__answer,
.soul-faq details[open] > div,
.soul-faq details[open] > p,
.soul-faq__item.is-open .soul-faq__answer,
.soul-faq__item.is-active .soul-faq__answer {
    color: rgba(34, 27, 44, 0.72) !important;
    text-shadow: none !important;
}

/* BASE / SKY TITANIUM — спокойнее, но тоже с градиентом */
html[data-theme="base"] .soul-faq details:not([open]),
html[data-theme="base"] .soul-faq__item:not(.is-open):not(.is-active) {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(248, 250, 252, 0.88) 34%,
            rgba(187, 214, 231, 0.30) 70%,
            rgba(148, 184, 207, 0.38) 100%
        ) !important;
}

/* BASE hover/open — титан + sky, но текст тёмный */
html[data-theme="base"] .soul-faq details:hover,
html[data-theme="base"] .soul-faq__item:hover,
html[data-theme="base"] .soul-faq details[open],
html[data-theme="base"] .soul-faq__item.is-open,
html[data-theme="base"] .soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(166, 202, 225, 0.54) 36%,
            rgba(126, 166, 194, 0.68) 72%,
            rgba(98, 132, 158, 0.74) 100%
        ) !important;

    border-color: rgba(150, 200, 230, 0.48) !important;
}
/* =========================================================
   FAQ — SOFTER ACTIVE GRADIENT END
   Смягчаем правый край активной/hover FAQ-плашки во всех темах
   ========================================================= */

/* hover/open — мягче окончание справа, без тёмного пятна */
.soul-faq details:hover,
.soul-faq__item:hover,
.soul-faq details[open],
.soul-faq__item.is-open,
.soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.52) 0%,
            rgba(255, 255, 255, 0.34) 24%,
            rgba(var(--theme-rgb), 0.36) 52%,
            rgba(var(--theme-rgb), 0.46) 76%,
            rgba(255, 255, 255, 0.26) 100%
        ) !important;

    border-color: rgba(var(--theme-rgb), 0.38) !important;

    box-shadow:
        0 14px 28px rgba(34, 28, 44, 0.09),
        0 0 18px rgba(var(--theme-rgb), 0.22),
        0 0 34px rgba(var(--theme-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.54),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
}

/* текст на активной/hover плашке оставляем читаемым графитовым */
.soul-faq details:hover summary,
.soul-faq__item:hover .soul-faq__question,
.soul-faq details[open] summary,
.soul-faq__item.is-open .soul-faq__question,
.soul-faq__item.is-active .soul-faq__question {
    color: rgba(34, 27, 44, 0.92) !important;
    text-shadow: none !important;
}

.soul-faq details[open] .soul-faq__answer,
.soul-faq details[open] > div,
.soul-faq details[open] > p,
.soul-faq__item.is-open .soul-faq__answer,
.soul-faq__item.is-active .soul-faq__answer {
    color: rgba(34, 27, 44, 0.72) !important;
    text-shadow: none !important;
}

/* BASE — Sky Titanium отдельно, чтобы справа не уходило в грязный серо-синий */
html[data-theme="base"] .soul-faq details:hover,
html[data-theme="base"] .soul-faq__item:hover,
html[data-theme="base"] .soul-faq details[open],
html[data-theme="base"] .soul-faq__item.is-open,
html[data-theme="base"] .soul-faq__item.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.58) 0%,
            rgba(248, 250, 252, 0.42) 26%,
            rgba(187, 214, 231, 0.46) 56%,
            rgba(148, 184, 207, 0.48) 78%,
            rgba(255, 255, 255, 0.30) 100%
        ) !important;

    border-color: rgba(148, 184, 207, 0.42) !important;

    box-shadow:
        0 14px 28px rgba(54, 66, 80, 0.09),
        0 0 18px rgba(148, 184, 207, 0.24),
        0 0 34px rgba(148, 184, 207, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
}