.tab-faq {
    background: var(--corp-color-white);
    padding: 16px 0 82px 0;

    @media (width >=768px) {
        padding: 82px 0 105px 0;
    }

    @media (width >=1200px) {
        padding: 139px 0 89px 0;
    }
}

.tab-faq__eyebrow {
    color: var(--corp-color-neutral-black);
    opacity: 0.4;
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    line-height: var(--corp-type-mobile-body-1-line-height);
    margin-bottom: 16px;

    @media (width >=768px) {
        line-height: var(--corp-type-tablet-body-8-line-height);
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
        letter-spacing: -0.4px;
        margin-bottom: 24px;
    }
}

.tab-faq__heading {
    width: 100%;
    color: var(--corp-color-neutral-black);
    margin-bottom: 40px;
    font-weight: var(--fw-400);
    font-size: var(--corp-type-mobile-display-3-font-size);
    line-height: var(--corp-type-mobile-display-5-line-height);
    letter-spacing: -0.56px;

    strong {
        font-weight: var(--fw-400);
        color: var(--corp-color-primary);
    }

    @media (width >=768px) {
        margin-bottom: 32px;
        font-size: var(--corp-type-tablet-display-font-size);
        line-height: var(--corp-type-tablet-display-3xl-line-height);
        letter-spacing: -0.42px;
    }

    @media (width >=1200px) {
        color: var(--corp-color-primary);
        margin-bottom: 60px;
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        line-height: var(--corp-type-desktop-caption-6-line-height);
        letter-spacing: -1.5px;
    }
}

.tab-faq__content {
    display: flex;
    flex-direction: column;
    gap: 32px;

    @media (width >=768px) {
        flex-direction: row;
        align-items: flex-start;
        gap: 42px;
    }

    @media (width >=1200px) {
        gap: 60px;
    }
}


.tab-faq__tabs {
    display: none;

    @media (width >=768px) {
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: var(--corp-color-surface-300);
        border-radius: var(--corp-radius-lg);
        padding: 32px 24px;
    }

    @media (width >=1200px) {
        padding: 32px 24px;
        gap: 32px;
    }
}


.tab-faq__tab {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: var(--fw-500);
    color: var(--corp-color-neutral-black);
    opacity: 0.6;
    transition: all 0.3s ease;

    @media (width >=768px) {
        font-size: var(--corp-type-tablet-body-3-font-size);
        line-height: var(--corp-type-tablet-body-10-line-height);
        letter-spacing: -0.24px;
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-body-2-font-size);
        line-height: var(--corp-type-desktop-heading-6-line-height);
        letter-spacing: 0.16px;
    }
}

.tab-faq__tab.active {
    opacity: 1;
}


.tab-faq__list {
    flex: 1;
}

.tab-faq__item {
    border-bottom: 1px solid var(--secondary-gray-200);

    &[open] {
        .tab-faq__answer {
            display: block;
        }

        .tab-faq__answer-content {
            padding-bottom: 24px;
        }

        .tab-faq__icon--plus {
            display: none;
        }

        .tab-faq__icon--minus {
            display: block;
        }
    }
}

.tab-faq__answer {
    display: none;
}

.tab-faq__icon--minus {
    display: none;
}

.tab-faq__question {
    width: 100%;
    padding: 20px 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }

    &::marker {
        display: none;
    }

    @media (width >=768px) {
        padding: 14px 0;
    }

    @media (width >=1200px) {
        padding: 31.5px 0;
    }
}

.tab-faq__question-text {
    font-size: var(--corp-type-mobile-heading-2-medium-font-size);
    font-weight: var(--fw-400);
    line-height: var(--corp-type-mobile-heading-1-regular-line-height);
    letter-spacing: -0.16px;
    color: var(--corp-color-neutral-black);

    @media (width >=768px) {
        font-size: var(--corp-type-tablet-heading-1-font-size);
        line-height: var(--corp-type-cta-2-line-height);
        letter-spacing: -0.14px;
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-2-font-size);
        line-height: var(--corp-type-desktop-heading-2-line-height);
    }
}

.tab-faq__question-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--corp-color-primary);

    @media (width >=768px) {
        width: 16px;
        height: 16px;
    }

    @media (width >=1200px) {
        width: 32px;
        height: 32px;
    }
}

.tab-faq__answer-content {
    overflow: hidden;
    padding-right: 48px;
    padding-bottom: 0;
    font-size: var(--corp-type-mobile-tag-2-font-size);
    line-height: var(--corp-type-mobile-body-3-line-height);
    color: var(--corp-color-neutral-black);
    opacity: 0.8;

    @media (width >=768px) {
        max-width: 85%;
        font-size: var(--corp-type-tablet-body-1-font-size);
        line-height: var(--corp-type-tablet-body-8-line-height);
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        line-height: var(--corp-type-desktop-heading-5-line-height);
    }


    p {
        margin: 0 0 16px;
    }

    p:last-child {
        margin-bottom: 0;
    }

    ul,
    ol {
        margin: 0 0 16px;
        padding-left: 20px;
    }

    li {
        margin-bottom: 8px;
    }

    a {
        color: var(--corp-color-primary);
        text-decoration: underline;
    }
}


.tab-faq__dropdown-wrap {
    position: relative;
    display: block;

    @media (width >=768px) {
        display: none;
    }

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
        pointer-events: none;

        background:
            url('/corporate/icons/arrow-down-black.svg') no-repeat center / contain;
    }
}

.tab-faq__dropdown {
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-radius: var(--corp-radius-md);
    background-color: var(--corp-color-surface-300);
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-tag-1-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    font-weight: var(--fw-500);
    appearance: none;
    outline: none;
    cursor: pointer;
}