import { styled } from "styled-components";
import { device } from "@/app/components/common/Devices";
import { Colors, Gradient } from "@/app/components/common/variable";

export const FindAnsweSection = styled.section`
       .findYourans-wrapper{
        .findYourans-main-tab{
            border:1px solid #000000;
            padding:33px 30px;
            border-radius:90px;
            display:flex;
            align-items: center;
            .nav-pills{
                grid-gap:30px;
                .nav-item{
                    .nav-link{
                        font-size:20px;
                        line-height:1;
                        color:#333333;
                        background: ${Gradient.primary};
                        border-radius:60px;
                        padding:22px 61px;
                        transition:0.3s all ease-in-out;
                        &.active,&:hover{
                            background: ${Colors.primary};
                            color:${Colors.white};
                        }
                        @media (max-width:1500px){
                            padding:22px 50px;
                        }
                        @media ${device.laptop}{
                            padding:18px 34px;
                        }
                        @media ${device.laptopS}{
                            padding:16px 25px;
                            font-size:18px;
                            white-space:nowrap;
                        }
                       
                        @media ${device.tablet}{
                            font-size:16px; 
                            padding:14px 22px;
                        }
                    }
                }
                @media ${device.laptop}{
                    column-gap:20px;
                }
                @media ${device.laptopS}{
                    column-gap:12px;
                    flex-wrap:nowrap;
                    overflow:auto;
                    padding-bottom:10px;
                    padding-top:10px;
                    padding-right:20px;
                }
                
            }
            @media ${device.laptopS}{
                padding:20px 28px;
                position:relative;
                    &::before{
                        content:'';
                        position:absolute;
                        width:30px;
                        height:calc(100% - 40px);
                        right:26px;
                        top:20px;
                        background: rgb(255,255,255);
                        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
                        @media ${device.tablet}{
                            right:24px;
                        }
                    }
            }
            @media ${device.tablet}{
                padding:16px 28px;
            }
            @media ${device.mobile}{
                padding:14px 25px;
            }
        }
        .findYourans-sub-tab{
            margin-top:40px;
            .tab-content{
                .nav-pills{
                    grid-gap:20px;
                    .nav-item{
                        .nav-link{
                            font-size:18px;
                            line-height:1;
                            border:1px solid #C0C0C0;
                            padding:18.5px 23px;
                            background-color:transparent;
                            color:#333333;
                            border-radius:60px;
                            &.active,&:hover{
                                background: ${Colors.primary};
                                color:${Colors.white};
                                border-color:${Colors.primary};
                            }
                            @media ${device.laptop}{
                                padding:14px 18px;
                            }
                            @media ${device.laptopS}{
                                font-size:16px;
                            }
                            @media ${device.tablet}{
                                font-size:14px;
                                padding:12px 14px;
                            }
                            @media ${device.mobile}{
                                padding:10px 12px;
                            }
                        }
                    }
                    @media ${device.laptopS}{
                        column-gap:16px;
                        row-gap:20px;
                    }
                    @media ${device.tablet}{
                        column-gap:14px;
                        row-gap:16px;
                    }
                }
                .tab-content{
                    margin-top:80px;
                    .faqsAccordion-wrap{
                        .accordion{
                            display:flex;
                            flex-wrap:wrap;
                            row-gap:30px;
                            .accordion-item{
                                width:100%;
                                border:1px solid #C0C0C0;
                                border-radius:23px;
                                background-color:transparent;
                                overflow:hidden;
                                & + .accordion-item{
                                    border-top:1px solid #C0C0C0;
                                }
                                .accordion-header{
                                    .accordion-button{
                                        font-size:25px;
                                        line-height:1.2;
                                        font-weight:600;
                                        color:#222222;
                                        padding:30px 50px;
                                        background-color:transparent;
                                        border:0;
                                        box-shadow:none;
                                        @media ${device.laptop}{
                                            padding:20px 40px;
                                        }
                                        @media ${device.laptopS}{
                                            font-size:22px;
                                            padding:16px 36px;
                                        }
                                        @media ${device.tablet}{
                                            padding:16px 26px;
                                            font-size:20px;
                                        }
                                        @media ${device.mobile}{
                                            padding:16px 22px;
                                            font-size:18px;
                                        }
                                        @media ${device.mobileS}{
                                            padding:14px 22px;
                                            font-size:16px;
                                        }
                                    }
                                }
                                .accordion-collapse{
                                    .accordion-body{
                                        padding:0 50px 30px;
                                        font-size:20px;
                                        line-height:1.9;
                                        color:#333333;
                                        @media ${device.laptop}{
                                            padding:0 40px 20px;
                                        }
                                        @media ${device.laptopS}{
                                            padding:0 36px 16px;
                                            font-size:18px;
                                            line-height:1.6;
                                        }
                                        @media ${device.tablet}{
                                            padding:0 26px 16px;
                                            font-size:16px;
                                            line-height:1.4;
                                        }
                                        @media ${device.mobile}{
                                            padding:0 22px 16px;
                                        }
                                        @media ${device.mobile}{
                                            padding:0 22px 14px;
                                        }
                                    }
                                }
                                @media ${device.laptop}{
                                    border-radius:20px;
                                }
                                @media ${device.laptopS}{
                                    border-radius:16px;
                                }
                                @media ${device.mobile}{
                                    border-radius:12px;
                                }
                            }
                        }
                    }
                    @media ${device.laptop}{
                        margin-top:60px;
                    }
                    @media ${device.laptopS}{
                        margin-top:50px;
                    }
                    @media ${device.mobile}{
                        margin-top:40px;
                    }
                }
            }
            @media ${device.tablet}{
                margin-top:30px;
            }
        }
    }
    .tab-view{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-top: 20px;
        grid-gap: 20px;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        span{
            border-radius: 60px;
            @media ${device.mobile}{
                width: 100px !important;
                height: 40px !important;
                display: block;
            }
        }
    }
`;