@use '../../utils/' as * ;

/*============= FAQ CSS AREA ===============*/

.vl-faq3{
    & .vl-section-title3{
        & .title{
            line-height: var(--ztc-specing-height44);
            padding-bottom: 0;
            @media #{$xs}{
                font-size: var(--ztc-font-size-font-s30);
                line-height: var(--ztc-specing-height40);
            }
        }
    }
}

.vl-accordion3{
    & .accordion-button:focus{
        outline: none;
        box-shadow: inherit;
    }
    & .accordion-item:first-of-type {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    & .accordion-item:last-of-type {
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit;
    }
    & .accordion-button:not(.collapsed){
        background-color: inherit;
        box-shadow: inherit;
    }
    & .accordion-item:not(.collapsed) {
        background: var(--ztc-text-text-12) !important;
        border-radius: 8px !important;
        & .accordion-button:not(.collapsed){
            box-shadow:inherit;
            color: var(--ztc-text-text-1);

            & span{
                background: var(--ztc-text-text-1);
                & img{
                    filter:none;
                }
            }
            & .accordion-button{
                color: var(--ztc-text-text-1);
            }
        }
        & .accordion-body{
            & p{
                color: rgba(255,255,255,0.80);
            }
        }
    }

    & .accordion-button:not(.collapsed){
        box-shadow:inherit;
        & span{
            & img{
                transform: rotate(-180deg);
                filter: none;
            }
        }
    }
    & .accordion-header .accordion-button {
        font-size: var(--ztc-font-size-font-s32);
        line-height: var(--ztc-specing-height32);
        font-family: var(--ztc-family-font2);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-11);
        padding-left: 48px;
        padding-top: 38px;
        position: relative;
        @media #{$md}{
            line-height: var(--ztc-specing-height44);
        }
        @media #{$xs}{
            font-size: var(--ztc-font-size-font-s22);
            line-height: var(--ztc-specing-height30);
            padding-left: 15px;
            padding-top: 15px;
        }
        & span{
            height: 48px;
            width: 48px;
            line-height:40px;
            border-radius:50px;
            background: var(--ztc-text-text-12);
            text-align:center;
            position: absolute;
            right:48px;
            @media #{$md}{
                right: 20px;
            }
            @media #{$xs}{
                right:7px;
            }
            & img{
                filter:brightness(0) invert(1);
            }
        }
    }
    & .accordion-item {
        border-radius: 8px;
        background: #FFF;
        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.09);
        border: inherit;
        margin-bottom: 32px;
        position: relative;
        z-index:1;
    }
    & .accordion-body {
        padding: inherit;
    }
    & .accordion-body p{
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-specing-height28);
        font-family: var(--ztc-family-font1);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-11);
        padding: 48px;
        padding-top: inherit;
        @media #{$xs}{
            padding: 15px;
        }
    }
    & .accordion-button.collapsed {
        padding-bottom: 38px;
        @media #{$xs}{
            padding-bottom: 15px;
        }
    }
    & .accordion-button::after{
        height:0;
    }
}


.vl-faq5{
    & .vl-section-title5{
        & .title{
            line-height: var(--ztc-specing-height44);
            padding-bottom: 0;
        }
    }
    & .vl-accordion3 .accordion-item:not(.collapsed){
        background: var(--ztc-text-text-6) !important;
    }
    & .vl-accordion3 .accordion-header .accordion-button span{
        background: var(--ztc-text-text-6) !important;
    }
    & .vl-accordion3 .accordion-item:not(.collapsed) .accordion-button:not(.collapsed) span {
        background: var(--ztc-text-text-1) !important;
    }
}

.vl-faq-inner{
    & .title{
        color: var(--ztc-text-text-3);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-specing-height44);
        font-family: var(--ztc-family-font2);
        font-weight: var(--ztc-weight-bold);
        @media #{$md}{
            font-size: var(--ztc-font-size-font-s34);
            line-height: var(--ztc-specing-height44);
        }
        @media #{$xs}{
            font-size: var(--ztc-font-size-font-s34);
            line-height: var(--ztc-specing-height44);
        }
    }
    & .vl-tab-item {
        display: flex;
        justify-content: center;
    }
    & .vl-accordion-item{
        border: 1px solid #E8E8E7;
        border-radius: 8px;
        margin-bottom: 20px;
        & .accordion-button {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
            font-size: 1rem;
            color: var(--bs-accordion-btn-color);
            text-align: left;
            background-color: #ffffff00;
            border: 0;
            border-radius: 0;
            overflow-anchor: none;
            transition: var(--bs-accordion-transition);
            padding: 24px 20px;
            font-size: 20px;
            line-height: 20px;
            font-weight: 700;
            color: var(--ztc-text-text-3);
            &:focus{
                box-shadow: none;
            }
            &:not(.collapsed){
                box-shadow: inherit;
            }
            
        }
        & .accordion-body {
            padding: 24px 20px;
            padding-top: 0;
            color: var(--ztc-text-text-2);
            font-size: 18px;
            line-height: 26px;
            font-weight: 600;
        }
        & .accordion-button:not(.collapsed){
            background: var(--ztc-text-text-4) !important;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        & .accordion-body:not(.collapsed){
            background: var(--ztc-text-text-4);
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
        }
    }
}

.vl-tab-item{
    border: 1px solid #E8E8E7;
    border-radius: 8px;
    padding: 12px 24px;
    margin-bottom: 48px;
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        background-color: var(--ztc-text-text-4);
        padding: 12px 24px;
        font-size: 20px;
        line-height: 18px;
        font-weight: 700;
        color: var(--ztc-text-text-3);
    }
    .nav-link {
        font-size: 20px;
        line-height: 18px;
        font-weight: 700;
        padding: 12px 24px;
        color: var(--ztc-text-text-3);
        background: #F6F4EE;
        @media #{$xs}{
            margin-bottom: 15px;
        }
    }
}


// Faq Home 10
.vl-faq-area-10{
    background: var(--ztc-bg-bg-9);
}
.vl-faq-content-wrap-10{
    margin-right: 50px;
    @media #{$md, $xs} {
        margin-right: 0;
    }
}

.vl-accordion3.vl-accordion10{
    & .accordion-button:focus{
        outline: none;
        box-shadow: inherit;
    }
    & .accordion-item:first-of-type {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    & .accordion-item:last-of-type {
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit;
    }
    & .accordion-button:not(.collapsed){
        background-color: inherit;
        box-shadow: inherit;
    }
    & .accordion-item:not(.collapsed) {
        background: var(--ztc-text-text-29) !important;
        border-radius: 8px !important;
        & .accordion-button:not(.collapsed){
            box-shadow:inherit;
            color: var(--ztc-text-text-27);
            & span{
                background: var(--ztc-text-text-1);
                & img{
                    filter:none;
                }
            }
            & .accordion-button{
                color: var(--ztc-text-text-1);
            }
        }
        & .accordion-body{
            & p{
                color: var(--ztc-text-text-30);
            }
        }
    }

    & .accordion-button:not(.collapsed){
        box-shadow:inherit;
        & span{
            & img{
                transform: rotate(-180deg);
                filter: none;
            }
        }
    }
    & .accordion-header .accordion-button {
        font-size: var(--ztc-font-size-font-s20);
        line-height: var(--ztc-specing-height20);
        font-family: var(--ztc-family-font2);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-27);
        padding-left: 24px;
        padding-top: 24px;
        position: relative;
        border-radius: 8px;
        @media #{$md}{
            line-height: var(--ztc-specing-height44);
        }
        @media #{$xs}{
            font-size: var(--ztc-font-size-font-s22);
            line-height: var(--ztc-specing-height30);
            padding-left: 15px;
            padding-top: 15px;
        }
        & span{
            height: 32px;
            width: 32px;
            line-height:32px;
            border-radius:50px;
            background: var(--ztc-text-text-28);
            text-align:center;
            position: absolute;
            right:48px;
            @media #{$md,$lg}{
                right: 20px;
            }
            @media #{$xs}{
                right:7px;
            }
            & img{
                filter:brightness(0) invert(1);
                margin-top: -2px;            
            }
        }
    }
    & .accordion-item {
        border-radius: 8px;
        background: #FFF;
        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.09);
        border: inherit;
        margin-bottom: 32px;
        position: relative;
        z-index:1;
    }
    & .accordion-body {
        padding: inherit;
    }
    & .accordion-body p{
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-specing-height28);
        font-family: var(--ztc-family-font1);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-11);
        padding: 24px;
        padding-top: inherit;
        @media #{$xs}{
            padding: 15px;
        }
    }
    & .accordion-button.collapsed {
        padding-bottom: 22px;
        @media #{$xs}{
            padding-bottom: 15px;
        }
    }
    & .accordion-button::after{
        height:0;
    }
}


/*============= FAQ CSS AREA ===============*/