/* Блок FAQ — аккордеон в стиле витрины (карточки, градиент, +/-) */

.faq-section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background: linear-gradient(
        180deg,
        var(--white) 0%,
        var(--bg-warm) 22%,
        var(--bg-warm) 100%
    );
    position: relative;
}

.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--primary-color) 18%, transparent) 35%,
        color-mix(in srgb, var(--secondary-color) 22%, transparent) 65%,
        transparent 100%
    );
    pointer-events: none;
}

.faq-section .section-header {
    margin-bottom: 2.25rem;
}

/* Перебиваем палитру Bootstrap Accordion (CDN) */
.faq-accordion {
    --bs-accordion-color: var(--dark);
    --bs-accordion-bg: var(--white);
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: var(--card-radius);
    --bs-accordion-inner-border-radius: var(--card-radius);
    --bs-accordion-btn-padding-x: 1.35rem;
    --bs-accordion-btn-padding-y: 1.125rem;
    --bs-accordion-btn-color: var(--dark);
    --bs-accordion-btn-bg: var(--white);
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--primary-on-light);
    --bs-accordion-active-bg: var(--white);
    --bs-accordion-body-padding-x: 1.35rem;
    --bs-accordion-body-padding-y: 0;
    --faq-item-gap: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: var(--faq-item-gap);
}

.faq-accordion .accordion-item {
    margin-bottom: 0;
    border: var(--border-subtle);
    border-radius: var(--card-radius);
    border-left: 4px solid transparent;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s ease,
        border-left-color 0.35s ease,
        transform 0.35s ease;
}

.faq-accordion .accordion-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-accordion .accordion-item:has(.accordion-collapse.show) {
    border-color: color-mix(in srgb, var(--primary-color) 22%, var(--neutral-warm));
    border-left-color: var(--primary-color);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.faq-accordion .accordion-header {
    margin: 0;
}

.faq-accordion .accordion-button {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1rem, 0.45vw + 0.92rem, 1.0625rem);
    line-height: 1.45;
    color: var(--dark) !important;
    background: var(--white) !important;
    padding: 1.125rem 1.25rem 1.125rem 1.15rem;
    outline: none;
    box-shadow: none !important;
    gap: 1rem;
    transition:
        color 0.3s ease,
        background 0.3s ease;
}

.faq-accordion .accordion-button:hover {
    color: var(--primary-on-light) !important;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--white)) !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--primary-on-light) !important;
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--primary-color) 10%, var(--white)) 0%,
        color-mix(in srgb, var(--secondary-color) 5%, var(--white)) 100%
    ) !important;
    box-shadow: none !important;
}

.faq-accordion .accordion-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none !important;
    border-color: transparent;
    z-index: auto;
}

.faq-accordion .accordion-item:focus-within:not(:has(.accordion-collapse.show)) {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.faq-accordion .accordion-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
    z-index: 1;
}

/* Круг +/- вместо стрелки Bootstrap */
.faq-accordion .accordion-button::after {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1;
    color: var(--primary-on-light);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--white));
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 50%;
    background-image: none !important;
    transform: none !important;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    content: '−';
    color: var(--white);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-color: transparent;
    transform: none !important;
}

.faq-accordion .accordion-collapse {
    border: none;
}

.faq-accordion .collapsing {
    transition:
        height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease;
}

.faq-accordion .accordion-body {
    padding: 0.35rem 1.35rem 1.4rem 1.15rem;
    font-size: var(--text-base);
    line-height: var(--line-height-loose);
    color: var(--gray);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-color) 4%, var(--white)) 0%,
        var(--white) 100%
    );
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 12%, var(--neutral-warm));
}

.faq-accordion .accordion-collapse.show .accordion-body {
    animation: faqAnswerFade 0.35s ease forwards;
}

@keyframes faqAnswerFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .faq-accordion .accordion-button {
        padding: 1rem 1rem 1rem 0.95rem;
        font-size: 1rem;
    }

    .faq-accordion .accordion-button::after {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 1.2rem;
    }

    .faq-accordion .accordion-body {
        padding: 0.25rem 1.1rem 1.15rem 0.95rem;
    }

    .faq-accordion .accordion-item:has(.accordion-collapse.show) {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-accordion .accordion-item,
    .faq-accordion .accordion-button,
    .faq-accordion .accordion-button::after,
    .faq-accordion .collapsing {
        transition: none;
    }

    .faq-accordion .accordion-item:has(.accordion-collapse.show) {
        transform: none;
    }

    .faq-accordion .accordion-collapse.show .accordion-body {
        animation: none;
    }
}