/* Shared sections used across all pages: socials, testimonials, sale-banner */

#accordion, #faq, footer, .sub-footer {
    background: #FEFDFC;
}

#socials {
    background: #FEFDFC;

    .container {
        padding:       80px 0;
        border-bottom: 1px solid #F1F0EF;

        .section-title {
            max-width:      845px;
            margin-bottom:  64px;

            & h2 {
                font-size:   32px;
                font-weight: 600;
                line-height: 40px;
                color:       #000000;
            }

            & p {
                max-width:   656px;
                margin:      0 auto;
                font-size:   16px;
                line-height: 22px;
                color:       #4F4F4F;
            }

            &:has(.btn) {
                p {
                    margin-bottom: 30px;
                }
            }
        }

        .social-items-cards {
            display:               grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap:            0;
            row-gap:               0;
            max-width:             1078px;
            margin:                0 auto;

            .social-item {
                position:       relative;
                display:        flex;
                flex-direction: column;
                gap:            12px;
                padding:        32px 24px;
                border-right:   1px solid rgba(0, 0, 0, 0.05);
                border-bottom:  1px solid rgba(0, 0, 0, 0.05);

                &:nth-child(3n) {
                    border-right: none;
                }

                &:nth-last-child(-n+2) {
                    border-bottom: none;
                }

                .social-head {
                    display:     flex;
                    align-items: center;
                    gap:         10px;

                    & svg {
                        width:       24px;
                        height:      24px;
                        flex-shrink: 0;
                    }

                    .name {
                        font-size:   14px;
                        font-weight: 600;
                        line-height: 20px;
                        color:       #000000;
                    }
                }

                .desc {
                    font-size:   12px;
                    font-weight: 400;
                    line-height: 18px;
                    color:       #4F4F4F;
                }
            }
        }
    }
}

#testimonials {
    background: #FEFDFC;

    .container {
        padding:       80px 0;

        .section-title {
            max-width:     656px;
            margin-bottom: 56px;

            & h3 {
                font-size:   32px;
                font-weight: 600;
                line-height: 40px;
                color:       #000000;
            }

            & p {
                max-width:   518px;
                margin:      0 auto;
                font-size:   16px;
                line-height: 22px;
                color:       #4F4F4F;
            }
        }

        .testimonials-slider {
            width: 100%;
        }

        .testimonials-cards {
            display:              flex;
            gap:                  20px;
            width:                100%;
            box-sizing:           border-box;
            padding:              14px 0 40px;
            overflow-x:           auto;
            overflow-y:           hidden;
            scroll-behavior:      smooth;
            scroll-snap-type:     x mandatory;
            scrollbar-width:      none;

            &::-webkit-scrollbar {
                display: none;
            }

            .testimonial-card {
                flex:              0 0 calc((100% - 40px) / 3);
                background:        #FFFFFF;
                padding:           30px;
                box-sizing:        border-box;
                display:           flex;
                flex-direction:    column;
                align-items:       center;
                justify-content:   flex-start;
                gap:               24px;
                border-radius:     30px;
                box-shadow:        0 14px 22px 0 rgba(0, 0, 0, 0.06);
                scroll-snap-align: start;

                .rate {
                    display: flex;
                    gap:     12px;

                    & svg {
                        width:  18px;
                        height: 18px;

                        & path {
                            fill: #FAC515;
                        }
                    }
                }

                .content {
                    display:        flex;
                    flex-direction: column;
                    align-items:    center;
                    text-align:     center;
                    width:          100%;

                    .name {
                        font-size:   18px;
                        font-weight: 600;
                        line-height: 24px;
                        color:       #242424;
                    }

                    .status {
                        font-size:   12px;
                        font-weight: 400;
                        line-height: 18px;
                        color:       #242424;
                        margin-top:  4px;
                    }

                    .feedback {
                        font-size:   14px;
                        font-weight: 400;
                        line-height: 20px;
                        color:       #4F4F4F;
                        margin-top:  32px;
                    }
                }
            }
        }

        .testimonials-nav {
            display:         flex;
            gap:             30px;
            align-items:     center;
            justify-content: center;
            margin-top:      24px;

            .testimonials-nav-btn {
                display:         inline-flex;
                align-items:     center;
                justify-content: center;
                width:           24px;
                height:          24px;
                padding:         0;
                background:      transparent;
                border:          none;
                cursor:          pointer;
                color:           #000000;
                transition:      opacity 0.2s ease;

                & svg {
                    width:  24px;
                    height: 24px;
                }

                &:hover {
                    opacity: 0.7;
                }

                &:disabled {
                    opacity: 0.3;
                    cursor:  default;
                }
            }
        }
    }
}

#saleBanner {
    padding: 0;

    .sale-banner {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             24px;
        padding:         40px 60px;
        background: linear-gradient(186deg, #FFE5EC -9.21%, rgba(255, 237, 235, 0.76) 6.49%, #FEFDFC 55.39%);

        .banner-icon {
            display:        inline-flex;
            align-items:    center;
            flex-shrink:    0;
            padding:        0;

            & img {
                width:  74px;
                height: 74px;
            }
        }

        .banner-content {
            display:        flex;
            flex-direction: column;
            align-items:    center;
            gap:            32px;
            width:          100%;
            max-width:      none;
            margin:         0;
            padding:        0;
            text-align:     center;

            & h4 {
                max-width:   850px;
                margin:      0;
                padding:     0;
                font-size:   32px;
                font-weight: 600;
                line-height: 40px;
                color:       #18181B;
            }

            .key-opportunities {
                display:         flex;
                flex-wrap:       wrap;
                gap:             10px;
                align-items:     center;
                justify-content: center;

                & button {
                    background: transparent;
                    padding:    9px 14px;
                    font-size:    12px;
                    line-height:  18px;
                    font-weight:  600;
                    color:        #18181B;

                    &:after {
                        border-radius: 36px;
                        border:        2px solid rgba(180, 174, 247, 0.20);
                    }

                    & svg path {
                        stroke: #16B364;
                    }
                }
            }
        }

        .banner-actions {
            display:         flex;
            flex-direction:  row;
            gap:             10px;
            align-items:     center;
            justify-content: center;
            margin-top:      16px;

            .btn_ghost {
                background: transparent;
                color:      #18181B;

                &:hover {
                    background: rgba(24, 24, 27, 0.04);
                }

                &:after {
                    border: none;
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    #socials {
        .container {
            padding: 60px 0;

            .section-title {
                margin-bottom: 40px;

                & h2 {
                    font-size:   28px;
                    line-height: 36px;
                }
            }
        }
    }

    #testimonials {
        .container {
            .testimonials-cards {
                .testimonial-card {
                    padding: 30px 20px;
                }
            }
        }
    }

    #saleBanner {
        padding: 0;

        .sale-banner {
            padding: 40px;

            .banner-content {
                & h4 {
                    font-size:   28px;
                    line-height: 36px;
                }
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    #socials {
        .container {
            .section-title {
                & h2 {
                    font-size:   24px;
                    line-height: 32px;
                }
            }

            .social-items-cards {
                grid-template-columns: repeat(2, 1fr);

                .social-item {
                    &:nth-child(3n) {
                        border-right: 1px solid rgba(0, 0, 0, 0.05);
                    }

                    &:nth-child(2n) {
                        border-right: none;
                    }
                }
            }
        }
    }

    #testimonials {
        .container {
            .testimonials-cards {
                .testimonial-card {
                    flex: 0 0 calc((100% - 20px) / 2);
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .faq-testimonials-wrap {
        display:        flex;
        flex-direction: column;

        #testimonials {
            order: -1;
        }
    }

    #socials {
        .container {
            padding: 32px 0;
        }
    }

    #testimonials {
        .container {
            padding: 40px 0;

            .section-title {
                margin-bottom: 32px;

                & h3 {
                    font-size:   26px;
                    line-height: 32px;
                }
            }

            .testimonials-cards {
                gap: 20px;

                .testimonial-card {
                    flex: 0 0 100%;
                }
            }
        }
    }
}

@media screen and (max-width: 600px) {
    #socials {
        .container {
            padding: 50px 0;

            .social-items-cards {
                grid-template-columns: 1fr;

                .social-item {
                    border-right: none;

                    &:nth-child(2n),
                    &:nth-child(3n) {
                        border-right: none;
                    }

                    &:nth-last-child(-n+2) {
                        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                    }

                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    #testimonials {
        .container {
            .section-title {
                max-width: 330px;
            }

            .testimonials-cards {
                gap: 16px;

                .testimonial-card {
                    padding: 30px 20px;
                }
            }
        }
    }

    #saleBanner {
        padding: 40px 0 0;

        .sale-banner {
            padding: 32px 20px;

            .banner-content {
                gap: 24px;

                & h4 {
                    font-size:   22px;
                    line-height: 28px;
                }
            }

            .banner-actions {
                width:          100%;
            }
        }
    }
}