@import 'main';

.support-details {
    .support-details__wrapper {
        h2 {
            font-size: 30px;
            font-weight: 600;
            line-height: 40px;
            margin-bottom: 32px;
            color: #023130;
        }
        .container__qg,
        .container__how-to-video,
        .container__faq {
            padding-top: 48px;
            padding-bottom: 64px;
        }
        .container__qg,
        .container__how-to-video {
            border-bottom: 1px solid #0000001A;
        }
        .container__qg {
            .qg__wrapper {
                display: flex;
                gap: 24px;
                @media screen and (max-width: 768px) {
                    flex-direction: column;
                }
                .qg__left,
                .qg__right {
                    border-radius: 16px;
                    overflow: hidden;
                }
                .qg__left {
                    width: 35%;
                    padding: 16px;
                    background: white;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    @media screen and (max-width: 768px) {
                        width: 100%;
                    }
                    .image__btn-wrapp {
                        display: flex;
                        justify-content: end;
                        align-items: center;
                        gap: 4px;
                    }
                }
                .qg__right {
                    width: 65%;
                    @media screen and (max-width: 768px) {
                        width: 100%;
                    }
                    ul {
                        background: white;
                        li.qg__table-header {
                            background: #0000001A;
                            span {
                                font-weight: 600;
                                &:first-child {
                                    border-right: 1px solid #0000001A;
                                }
                            }
                        }
                        li {
                            display: flex;
                            justify-content: space-between;
                            padding: 8px 0;
                            border-bottom: 1px solid #0000001A;
                            padding: 0;
                            &:last-child {
                                border-bottom: none;
                            }
                            span {
                                width: 50%;
                                padding: 18px 16px;
                                &:first-child {
                                    border-right: 1px solid #0000001A;
                                }
                            }
                        }
                    }
                }
            }
        }
        .container__how-to-video {
            article {
                .htv__video-wrapper {
                    aspect-ratio: 410 / 230;
                    overflow: hidden;
                    border-radius: 16px;
                    img {
                        object-fit: cover;
                        object-position: center;
                        width: 100%;
                    }
                    video {
                        height: 100%;
                    }
                }
                h3 {
                    font-size: 20px;
                    font-weight: 500;
                    letter-spacing: -0.02em;
                    margin-top: 20px;
                    color: #000000;
                }
            }
            .htv__video-wrapper {
                position: relative;
                width: 100%;
                height: 0;
                padding-bottom: 56.25%;
                /* 16:9 aspect ratio */
                cursor: pointer;
                overflow: hidden;
                transition: transform 0.3s ease;
            }

            .htv__video-wrapper:hover {
                transform: scale(1.02);
            }

            .htv__video-wrapper video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }

            .htv__video-wrapper:active video {
                transform: scale(0.98);
            }
        }
        .container__faq {
            h2 {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .faq__wrapp {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 20px;

                @media screen and (max-width: 768px) {
                    grid-template-columns: 1fr;
                }
                .faq__column {
                    details {
                        background: white;
                        border-radius: 16px;
                        border: 1px solid #0000001A;
                        padding: 24px 24px 24px 16px;
    
                        break-inside: avoid;
                        margin-bottom: 10px;
    
                        @media screen and (max-width: 768px) {
                            width: 100%;
                        }
                        summary {
                            display: flex;
                            justify-content: space-between;
                            font-size: 20px;
                            font-weight: 600;
                            color: #023130;
                            &::after {
                                display: block;
                                content: "";
                                width: 28px;
                                height: 28px;
                                background-image:
                                    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOOSURBVHgB3ZsxctNAFIb/3VDQYTpPmjjDASJT0RFqKMwJICdIOIFNB11yAsIJSGagTrhAonQ0gNJk3KH0sZb/aWVjOxaWbFmW9puRpchrxf+8t7tv9z0rFI3nNeRVDg3sGHvdUAqt8WbGIOBJjpBtvvPsw/fPUTAKRWBF7fJh+3yix3MDC0ChIV/OeT6l2GMUwHICrbB9WudgUVFpUGSgKDYC3lNsgAVZTOAKhc0iMujx9HkRoRvIi+d1KOyLVuhQ3EOUAP/fLk3RQbN5i37fz/XZzC2t1boUdoB1YnCYuG2YpXk2gZ7XEqspOyKuHemfHIVfZHHZ+QKtuDM2bKFCZBX5f4EVFTcki8h0gRUXN2SeyNkCOaBQ3GXVxQ2hSD8ReW/g0Smf6dZFnKBsWNhNeW8Kz3vLqeATaggDgte04sn4vUmBNel3aST9sT3uqtMu+qau4gT57hR0MHUvgdaja/5G/QnpqttDK44syIse3KAxbsWRQKPwHCvm19dv+Mlj5SiuS23sjAfxDY6cZfS9rc1NlES8AOdxEluQ4jpwDCVWROKiqgT3LJt45UM31XzZRQmr8jUQb35pXZE13ioQbdrYzugqO9IHH8FVuIWpOcBsw11k0scW3KWldNszWBKJUIqexIObGzx59RLLouE4hVgwK4OLy/i88bSNshALXsNdApkH/8BRGK5da2ZwruAo3OIPxUVzJTPqhKTfdOSwQFrPH1owU6amZoR3TIlr2ZwxDloxyfvbiZ5D6REcg5riDeB4T2YAdkbrpitd+F4z/CopqggGSRHDaF9Ue16Pf3XhAgrH0YW/J5ejWJSj6SEcGWyiiCnuhH/BtuwEu9AX1WTZycRqwgErBrTe8fiNyeUSrch9/T3UFEYu94qG7tfJ9Ps/1GbzMa+eoU4oHEWX/ofp2zMXvDRzr2aTv7hmb9Ybs1f0Et1IttRWA1adIErJzwtzy0iYMzxDdZOiQ3FBWoNMhUAVFTlXnDB/04kPiB9ULXf1o4ylXNl21azItoxUWDcyWmYUZ5vnZIPJUmNj1hbKRQpk3w2mykTmkbte1PT7vmk2T5XGLcpJ3IQ0w0cJQIzv5566cltwAjsA9XglCdQWiiWM3TFi+JixNnQWywkcQ1xXqnKNFbvoujLkF7qSoldZoy4jbEhhAsd5wKwxA3cvLkWmWGOtO53kkQ1nESSFdLI55N/ZnxYUGuz/BfEFR8hzR8kmAAAAAElFTkSuQmCC);
                                background-position: center;
                                background-repeat: no-repeat;
                                background-size: contain;
                                margin-left: 6px;
                                transition: .2s;
                            }
                        }
                        &[open]>summary::after {
                            transform: rotate(180deg);
                            background-image:
                                url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUKSURBVHgB3Vo7dttGFH0zdM5JF5TqTK9Ao1TpxHTprKxAygqslKlErSDSCkStwHaXztQGQmgFoTt3YWmfI2J837wZYAhBJgRAMsB7DjFDfAZz8ebzfoq6hjEJH/mnifat1BOlaBzfZi0tUfBvhXtuUKaUpnPqGIq6gJCaoLE3aNGgTKgBQHSFwxzle5CdUQdoR1CIvYF0TkukbtHyXGWUQorpCB3/nKbL+NEfjRnfEY0zlrCGdC1NcHo/XAfJpQJZXD+n0rOPQTOCFcRQ3mDYvUOHZujQipoApPExJhbtUkQ2szRFcd2E6OMJGnMEYn/jwbFv4AZfenrX8fz5wRizFqLH/J8lig94/tihW5+gSO1My0ufjFjFe8d45wfyHxRML/ywrTVK6hHESyC1t0pWxBWeOs/+TS/oGaGNOcV7z1BNvDR/rTNktxMUch/8kFxmNRt+EkTSrEtSbWswIpd6cs0WkK6AqeL7ZOqQVN9oKCZ3nS3SE+oR9IGZoTjeRrKaoHylRS65RXpAPYQ6MAsvydQ+MLr0A8+ebcy5nsJK35ZK1MKzqnvuS9CYE0zkK9RWIHfw3RaUupCFZ4Fagv7+jv6+iy+PyjdjaF457UTRX3aR/kN9x6dPK7W39wX9/Q2/X2hv7xrnPofL5SF6nA/NZ97n2iBL0wvMwzn3HYRO42sFQRH11D3Q43n3EJwax1CwaETrctBRZepvmPV+3lUBKiNLEbUklmJOEBr8IZdZRpc0UFRJUQhi5Qx7Hr5ESkNFJEX8JnzKEQS5I1fa4UovABzeu5KlSIGgH55rYT9oOIObnNAMD1ONw4REpOkgF5cyoK6x6kbCyWgtNh4bkje0I1CeC3PT1k9GEhfeTkCJBBn7PAd/4pouTg4e68AFLkyNBeYV1+92SILEbhVBomA4Wq7B5mvmQmSwBUKbnuu2yPiDt3D+Bl4vqC0K86pT8NzJjKG2Hm5NLTGip0MXbbeW4BpfeIQvbTseopgvy3UH8Qmeg0uUL2EivdqJjZ4hpt9/qC15H/zfn24UEeopxnzAKPiosevf8p9R0Gh2AEE7w0q84kXGbYp2hwhSkCDCbzordv1D2hEE4521syBB3vlN7MsYLNgz6INEHPnSkXnBjE9o+Jjwwcf9ZaPX3pKHaF/TwJFb8og2u5IP3pJfKWYvBvAwgaiwH565kiCqGgctvBSVqvbxDwG5u1AVrpdcF8Vqyp7s4UoRiwuIuXg+XJ/n4XShbA9cikoivyy9jbSTDWuiJMVTGgrQ1zymkolXLaAqfHYERfUtDSh85oO1CTSXP8oWyH17kONryg1VFwvv9eZfxOs53HdZZV5VGrwQ85Q3fxZ7PrZ7iI3sj8wHj0qotuhZu+FoaQgP/2w6d0m0hjFXYc/7VvbH1jSSKC/lwUD/syJKI6EaeTu1EoEem3zzZGiQlLTd6YQGsiKbQQL+32ML4a0gTm3pLJWreEGCQMYUyoBTZp9NmtCqFKe1KB9iwGrpFpROk/EiwIN2YkXTGbsTlmZQEC47D5yWiUmC7J/rUprINjTzZvO81LAdbaHSQZqpJbd/zhtLVfZcjja/joitvNQumixwzd310qGQmcEugnE4zWQ5nzSTeAdLdnmPNCvHIYYn6ViHIBX7hVoRC2hHMAIPXbR2ZIVsU+2H9eBbTnpdy0hovSV1RjDGC8wfTjb3wyzxXu+Xpds+khDi/dUlr99JlLnTffYrsbQnyfQseocAAAAASUVORK5CYII=);
                        }
                        .faq__content {
                            font-size: 16px;
                            font-weight: 500;
                            color: #023130CC;
                            padding-top: 16px;
                        }
                    }
                }
            }
        }
    }
}