/* ═══════════════════════════════════════════════════════════════════════════
   FSA FAQ Page — Вопросы и ответы
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Переменные ─────────────────────────────────────────────────────────── */

.fsafaq {
    --gold      : #C9A96E;
    --gold-l    : #E8D5B0;
    --gold-d    : #9A7840;
    --gold-p    : #FAF6F0;
    --pur       : #6B4FA0;
    --pur-l     : #9B7FCA;
    --pur-p     : #F2EDF9;
    --pur-d     : #4A3270;
    --ink       : #1A1008;
    --ink-m     : #4A3828;
    --ink-l     : #8C7060;
    --white     : #FFFFFF;
    --border    : #E8DDD5;
    --cream     : #F4EDE4;

    font-family : 'Inter', 'Nunito', -apple-system, sans-serif;
    color       : var(--ink);
    line-height : 1.75;
}

.fsafaq * {
    box-sizing : border-box;
}

.fsafaq p,
.fsafaq h2,
.fsafaq h3 {
    margin : 0;
}


/* ── Hero ───────────────────────────────────────────────────────────────── */

.fsafaq-hero {
    background      : linear-gradient(150deg, #1E0F40 0%, #3A2070 35%, #5C3D96 65%, #7A5CB8 100%) !important;
    padding         : 60px 48px 56px !important;
    text-align      : center !important;
    border-radius   : 20px !important;
    margin-bottom   : 0 !important;
    position        : relative !important;
    overflow        : hidden !important;
    box-shadow      : 0 8px 40px rgba(74,50,112,0.35) !important;
}

/* Декоративная сетка — тонкий орнамент */
.fsafaq-hero::before {
    content         : '' !important;
    position        : absolute !important;
    inset           : 0 !important;
    background-image:
        linear-gradient(rgba(201,169,110,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,110,0.06) 1px, transparent 1px) !important;
    background-size : 48px 48px !important;
    pointer-events  : none !important;
}

/* Золотое свечение слева снизу */
.fsafaq-hero::after {
    content         : '' !important;
    position        : absolute !important;
    inset           : 0 !important;
    background      :
        radial-gradient(ellipse at 15% 90%, rgba(201,169,110,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 10%, rgba(155,127,202,0.15) 0%, transparent 45%) !important;
    pointer-events  : none !important;
}

/* Иероглиф 問 (вопрос) — едва заметный декор */
.fsafaq-hero__decor {
    position        : absolute !important;
    right           : 32px !important;
    bottom          : -16px !important;
    font-family     : serif !important;
    font-size       : 220px !important;
    line-height     : 1 !important;
    color           : rgba(255,255,255,0.03) !important;
    pointer-events  : none !important;
    user-select     : none !important;
    z-index         : 0 !important;
}

.fsafaq-hero__tag {
    display         : inline-flex !important;
    align-items     : center !important;
    gap             : 8px !important;
    background      : rgba(201,169,110,0.15) !important;
    color           : #E8D5B0 !important;
    font-size       : 10px !important;
    font-weight     : 600 !important;
    letter-spacing  : 3px !important;
    text-transform  : uppercase !important;
    padding         : 7px 20px !important;
    border-radius   : 30px !important;
    border          : 1px solid rgba(201,169,110,0.35) !important;
    margin-bottom   : 22px !important;
    position        : relative !important;
    z-index         : 1 !important;
}

/* Точки-декор по бокам тега */
.fsafaq-hero__tag::before,
.fsafaq-hero__tag::after {
    content         : '✦' !important;
    font-size       : 7px !important;
    opacity         : 0.7 !important;
}

.fsafaq-hero__title {
    font-family     : 'Playfair Display', Georgia, serif !important;
    font-size       : clamp(30px, 5vw, 46px) !important;
    font-weight     : 700 !important;
    color           : #ffffff !important;
    margin          : 0 0 16px !important;
    line-height     : 1.15 !important;
    text-align      : center !important;
    width           : 100% !important;
    display         : block !important;
    position        : relative !important;
    z-index         : 1 !important;
    letter-spacing  : -0.5px !important;
    text-shadow     : 0 2px 20px rgba(0,0,0,0.2) !important;
}

.fsafaq-hero__sub {
    font-family     : 'Cormorant Garamond', Georgia, serif !important;
    font-size       : clamp(17px, 2.5vw, 21px) !important;
    font-weight     : 300 !important;
    font-style      : italic !important;
    color           : rgba(255,255,255,0.78) !important;
    display         : block !important;
    width           : 100% !important;
    max-width       : 480px !important;
    margin          : 0 auto !important;
    text-align      : center !important;
    line-height     : 1.6 !important;
    position        : relative !important;
    z-index         : 1 !important;
}

/* Золотая линия-разделитель под подзаголовком */
.fsafaq-hero__line {
    display         : block !important;
    width           : 48px !important;
    height          : 1px !important;
    background      : linear-gradient(90deg, transparent, var(--gold-l), transparent) !important;
    margin          : 20px auto 0 !important;
    position        : relative !important;
    z-index         : 1 !important;
}


/* ── Секция ─────────────────────────────────────────────────────────────── */

.fsafaq-section {
    padding         : 36px 36px;
    background      : var(--white);
}

.fsafaq-section--purple {
    background      : linear-gradient(145deg, #EDE5F8 0%, #E0D4F4 100%);
    padding         : 32px 36px;
}


/* ── Поиск ──────────────────────────────────────────────────────────────── */

.fsafaq-search {
    position        : relative;
    margin-bottom   : 20px;
}

.fsafaq-search__icon {
    position        : absolute;
    left            : 16px;
    top             : 50%;
    transform       : translateY(-50%);
    font-size       : 15px;
    pointer-events  : none;
    opacity         : 0.6;
}

.fsafaq-search__input {
    width           : 100% !important;
    padding         : 14px 48px 14px 46px !important;
    font-size       : 15px !important;
    font-family     : 'Inter', 'Nunito', sans-serif !important;
    color           : var(--ink) !important;
    background      : var(--cream) !important;
    border          : 1px solid var(--border) !important;
    border-radius   : 14px !important;
    outline         : none !important;
    box-shadow      : inset 0 1px 3px rgba(44,31,26,0.05) !important;
    transition      : border-color 0.2s, box-shadow 0.2s !important;
    line-height     : normal !important;
}

.fsafaq-search__input:focus {
    border-color    : var(--gold) !important;
    background      : var(--white) !important;
    box-shadow      : 0 0 0 3px rgba(201,169,110,0.15), inset 0 1px 3px rgba(44,31,26,0.04) !important;
}

.fsafaq-search__input::placeholder {
    color           : var(--ink-l);
    font-style      : italic;
}

.fsafaq-search__clear {
    position        : absolute;
    right           : 14px;
    top             : 50%;
    transform       : translateY(-50%);
    background      : none;
    border          : none;
    font-size       : 13px;
    color           : var(--ink-l);
    cursor          : pointer;
    display         : none;
    padding         : 4px;
    line-height     : 1;
}

.fsafaq-search__clear:hover {
    color           : var(--ink);
}


/* ── Вкладки категорий ──────────────────────────────────────────────────── */

.fsafaq-tabs {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 8px;
    margin-bottom   : 28px;
}

.fsafaq-tab {
    display         : inline-flex;
    align-items     : center;
    gap             : 6px;
    padding         : 8px 16px;
    font-size       : 13px;
    font-weight     : 500;
    font-family     : 'Inter', 'Nunito', sans-serif;
    color           : var(--ink-m);
    background      : var(--gold-p);
    border          : 1px solid rgba(201,169,110,0.3);
    border-radius   : 30px;
    cursor          : pointer;
    transition      : all 0.2s;
    white-space     : nowrap;
}

.fsafaq-tab:hover {
    background      : var(--gold-l);
    border-color    : var(--gold);
    color           : var(--ink);
}

.fsafaq-tab--active {
    background      : linear-gradient(135deg, var(--pur) 0%, var(--pur-d) 100%);
    border-color    : var(--pur-d);
    color           : #fff;
    box-shadow      : 0 3px 12px rgba(107,79,160,0.35);
}

.fsafaq-tab--active:hover {
    background      : linear-gradient(135deg, var(--pur-l) 0%, var(--pur) 100%);
    border-color    : var(--pur);
    color           : #fff;
}

.fsafaq-tab__count {
    font-size       : 11px;
    font-weight     : 700;
    background      : rgba(255,255,255,0.3);
    padding         : 1px 7px;
    border-radius   : 10px;
    letter-spacing  : 0;
}

.fsafaq-tab:not(.fsafaq-tab--active) .fsafaq-tab__count {
    background      : rgba(154,120,64,0.12);
    color           : var(--gold-d);
}


/* ── Группа вопросов ────────────────────────────────────────────────────── */

.fsafaq-group {
    margin-bottom   : 24px;
}

.fsafaq-group__title {
    font-family     : 'Playfair Display', Georgia, serif;
    font-size       : 18px;
    font-weight     : 600;
    color           : var(--pur-d);
    margin-bottom   : 12px;
    padding-bottom  : 10px;
    border-bottom   : 1px solid var(--border);
    display         : flex;
    align-items     : center;
    gap             : 10px;
}

.fsafaq-group__title::before {
    content         : '';
    display         : inline-block;
    width           : 3px;
    height          : 18px;
    background      : linear-gradient(180deg, var(--gold) 0%, var(--gold-d) 100%);
    border-radius   : 2px;
    flex-shrink     : 0;
}


/* ── Элемент аккордеона ─────────────────────────────────────────────────── */

.fsafaq-item {
    border          : 1px solid var(--border);
    border-radius   : 14px;
    margin-bottom   : 6px;
    overflow        : hidden;
    background      : var(--white);
    transition      : border-color 0.2s, box-shadow 0.2s;
}

.fsafaq-item:hover {
    border-color    : rgba(201,169,110,0.5);
    box-shadow      : 0 2px 12px rgba(44,31,26,0.06);
}

.fsafaq-item.open {
    border-color    : var(--gold);
    box-shadow      : 0 4px 20px rgba(201,169,110,0.15);
}

.fsafaq-item__btn {
    width           : 100% !important;
    background      : none !important;
    border          : none !important;
    padding         : 16px 18px !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : space-between !important;
    cursor          : pointer !important;
    text-align      : left !important;
    gap             : 12px !important;
    box-shadow      : none !important;
    outline         : none !important;
}

.fsafaq-item__btn:hover {
    background      : var(--gold-p) !important;
}

.fsafaq-item.open .fsafaq-item__btn {
    background      : linear-gradient(135deg, #FAF6F0 0%, #F5EDD8 100%) !important;
}

.fsafaq-item__q {
    font-size       : 15px;
    font-weight     : 500;
    color           : var(--ink);
    font-family     : 'Inter', 'Nunito', sans-serif;
    line-height     : 1.5;
    flex            : 1;
}

/* Стрелка — элегантный кружок */
.fsafaq-item__arrow {
    width           : 26px;
    height          : 26px;
    border-radius   : 50%;
    background      : var(--cream);
    border          : 1px solid var(--border);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 18px;
    color           : var(--gold-d);
    flex-shrink     : 0;
    transition      : transform 0.25s, background 0.2s, border-color 0.2s;
}

.fsafaq-item.open .fsafaq-item__arrow {
    transform       : rotate(180deg);
    background      : linear-gradient(135deg, var(--gold-l) 0%, var(--gold) 100%);
    border-color    : var(--gold);
    color           : var(--ink);
}

.fsafaq-item__body {
    display         : none;
    padding         : 0 18px 18px;
}

.fsafaq-item.open .fsafaq-item__body {
    display         : block;
}

/* Тонкая золотая черта над текстом ответа */
.fsafaq-item__body::before {
    content         : '';
    display         : block;
    height          : 1px;
    background      : linear-gradient(90deg, var(--gold-l), transparent);
    margin-bottom   : 14px;
    opacity         : 0.6;
}

.fsafaq-item__body p {
    font-size       : 14px !important;
    color           : var(--ink-m) !important;
    line-height     : 1.8 !important;
    max-width       : none !important;
}


/* ── Подсветка поиска ───────────────────────────────────────────────────── */

.fsafaq-mark {
    background      : rgba(201,169,110,0.3);
    color           : var(--ink);
    border-radius   : 3px;
    padding         : 1px 3px;
    font-weight     : 700;
}


/* ── Пустой результат поиска ────────────────────────────────────────────── */

.fsafaq-empty {
    text-align      : center;
    padding         : 48px 24px;
    color           : var(--ink-m);
}

.fsafaq-empty p {
    font-size       : 15px !important;
    line-height     : 1.7 !important;
    max-width       : none !important;
}

.fsafaq-empty p:first-child {
    font-family     : 'Playfair Display', Georgia, serif;
    font-size       : 18px !important;
    font-style      : italic;
    color           : var(--ink);
    margin-bottom   : 8px !important;
}


/* ── CTA ────────────────────────────────────────────────────────────────── */

.fsafaq-cta {
    background      : linear-gradient(150deg, #1E0F40 0%, #3A2070 40%, #5C3D96 75%, #7A5CB8 100%);
    border-radius   : 20px;
    padding         : 52px 40px;
    text-align      : center;
    position        : relative;
    overflow        : hidden;
    box-shadow      : 0 8px 40px rgba(74,50,112,0.3);
}

/* Та же сетка что и в hero */
.fsafaq-cta::before {
    content         : '';
    position        : absolute;
    inset           : 0;
    background-image:
        linear-gradient(rgba(201,169,110,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,110,0.05) 1px, transparent 1px);
    background-size : 48px 48px;
    pointer-events  : none;
}

/* Двойное свечение */
.fsafaq-cta::after {
    content         : '';
    position        : absolute;
    inset           : 0;
    background      :
        radial-gradient(ellipse at 20% 80%, rgba(201,169,110,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(155,127,202,0.1) 0%, transparent 45%);
    pointer-events  : none;
}

.fsafaq-cta__line {
    display         : block;
    width           : 48px;
    height          : 1px;
    background      : linear-gradient(90deg, transparent, var(--gold), transparent);
    margin          : 0 auto 24px;
}

.fsafaq-cta h3 {
    font-family     : 'Playfair Display', Georgia, serif !important;
    font-size       : 28px !important;
    font-weight     : 700 !important;
    color           : #fff !important;
    margin          : 0 0 12px !important;
    position        : relative;
    z-index         : 1;
    max-width       : none !important;
    letter-spacing  : -0.3px !important;
}

.fsafaq-cta p {
    font-family     : 'Cormorant Garamond', Georgia, serif !important;
    font-size       : 19px !important;
    font-style      : italic !important;
    color           : rgba(255,255,255,0.75) !important;
    margin          : 0 0 28px !important;
    line-height     : 1.6 !important;
    position        : relative;
    z-index         : 1;
    max-width       : none !important;
}

/* Кнопка — тёплая золотая, не outline */
.fsafaq-cta__btn {
    display         : inline-block !important;
    background      : linear-gradient(135deg, #C9A96E 0%, #A8823E 100%) !important;
    color           : #1A1008 !important;
    font-size       : 11px !important;
    font-weight     : 700 !important;
    padding         : 16px 48px !important;
    border-radius   : 40px !important;
    text-decoration : none !important;
    font-family     : 'Inter', 'Nunito', sans-serif !important;
    letter-spacing  : 2.5px !important;
    text-transform  : uppercase !important;
    border          : none !important;
    box-shadow      : 0 4px 20px rgba(201,169,110,0.4) !important;
    transition      : all 0.25s !important;
    position        : relative !important;
    z-index         : 1 !important;
}

.fsafaq-cta__btn:hover {
    background      : linear-gradient(135deg, #E8D5B0 0%, #C9A96E 100%) !important;
    color           : #1A1008 !important;
    box-shadow      : 0 6px 28px rgba(201,169,110,0.55) !important;
    transform       : translateY(-1px) !important;
    text-decoration : none !important;
}


/* ── Адаптив ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {

    .fsafaq-hero {
        padding     : 44px 24px 40px !important;
    }

    .fsafaq-section {
        padding     : 28px 20px;
    }

    .fsafaq-section--purple {
        padding     : 24px 20px;
    }

    .fsafaq-tabs {
        gap         : 6px;
    }

    .fsafaq-tab {
        font-size   : 12px;
        padding     : 7px 12px;
    }

    .fsafaq-cta {
        padding     : 40px 24px;
    }

    .fsafaq-cta__btn {
        padding     : 14px 32px !important;
        letter-spacing: 2px !important;
    }

}