/* =================================
   FAQ Accordion
   ================================= */

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.faq-accordion .accordion-item {
    position: relative;
    overflow: hidden;

    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

/* Hover */
.faq-accordion .accordion-item:hover {
    border-color: color-mix(
        in srgb,
        var(--color-primary) 35%,
        var(--color-border)
    );

    box-shadow: var(--shadow-md);
}

/* Header */
.faq-accordion .accordion-header {
    margin: 0;
}

/* Question button */
.faq-accordion .accordion-button {
    position: relative;

    min-height: 78px;
    padding:
        var(--space-5)
        calc(var(--space-8) + 24px)
        var(--space-5)
        var(--space-6);

    background-color: transparent;
    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);

    box-shadow: none;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}

/* Remove Bootstrap default arrow */
.faq-accordion .accordion-button::after {
    content: "+";

    position: absolute;
    left: var(--space-6);

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background-image: none;

    background-color: var(--color-surface);
    color: var(--color-primary-dark);

    border-radius: var(--radius-full);

    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    line-height: 1;

    transform: none;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal);
}

/* Open state */
.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* Minus icon */
.faq-accordion .accordion-button:not(.collapsed)::after {
    content: "−";

    background-color: var(--color-primary);
    color: var(--color-white);

    transform: rotate(180deg);
}

/* Remove Bootstrap focus shadow */
.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

/* Active item */
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: color-mix(
        in srgb,
        var(--color-primary) 45%,
        var(--color-border)
    );

    box-shadow:
        0 10px 30px rgba(63, 101, 92, 0.08);
}

/* Answer */
.faq-accordion .accordion-body {
    padding:
        var(--space-2)
        var(--space-16)
        var(--space-6)
        var(--space-6);

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);

    background-color: var(--color-white);
}

/* Open answer transition feeling */
.faq-accordion .accordion-collapse.show .accordion-body {
    animation: faqFadeIn 0.35s ease;
}

@keyframes faqFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* جلوگیری از هم‌پوشانی متن با دکمه باز و بسته شدن */
.faq-accordion .accordion-button {
    padding-left: 5rem !important;
    padding-right: var(--space-6);
}

/* آیکون همیشه فضای خودش را داشته باشد */
.faq-accordion .accordion-button::after {
    position: absolute;
    left: var(--space-5);
    flex-shrink: 0;
}

/* موبایل */
@media (max-width: 767.98px) {
    .faq-accordion .accordion-button {
        padding-left: 4.5rem !important;
        padding-right: var(--space-4);
    }
}