@import '../style';

#main {
    .main-container {
        background-image: url(../images/banner/my/v3/my-banner.jpg);

        .main-grid {
            .main-grid-left {
                .main-header {
                    margin-bottom: 1.5rem;
                }
            }

            .main-grid-right {
                .info-wrapper {
                    .info-container {
                        grid-template-columns: 2fr 20% 20% 18% 18%;

                        .info-item {
                            h4 {
                                font-size: 8px;
                                padding-left: 0;
                            }

                            .partner-logo {
                                width: unset;

                                p {
                                    font-size: 6px;
                                    margin-top: 0.2rem;
                                    margin-bottom: 0;
                                }

                                img {
                                    height: 2.5rem;
                                    width: auto;
                                }
                            }

                            .payment-container {
                                .payment-item {
                                    img {
                                        height: 1.4rem;
                                    }
                                }
                            }

                            .lang-box {
                                min-width: 8.5rem;
                                margin-top: 1.5rem;

                                .lang-dropdown-content {
                                    min-width: 15.5rem;
                                    width: 100%;
                                }
                            }

                            &.live-chat {
                                img {
                                    width: 85%;
                                    margin-top: 1rem;
                                }
                            }
                        }

                        .sponsor-stack {
                            display: flex;
                            gap: 0.4rem;

                            .sponsor-entry {
                                display: flex;
                                flex-direction: column;
                                gap: 0.1rem;

                                h4 {
                                    font-size: 8px;
                                    padding-left: 0;
                                }

                                img {
                                    height: 2.5rem;
                                    width: auto;
                                }

                                p {
                                    font-size: 6px;
                                    margin: 0;
                                    text-align: center;
                                }
                            }
                        }
                    }

                    h4 {
                        margin-bottom: 0.2rem;
                        font-size: 2.25rem;

                        &.v3-subtitle {
                            font-size: 1.65rem;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
    }
}

.header-sports-logos {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    .sport-logos-sub-row {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .sport-logo {
        height: 3.5rem;

        &[alt="CMD368"] {
            height: 2rem;
        }

        &[alt="SABA Sports"] {
            height: 3rem;
        }
    }

    .cross-icon {
        height: 1.3rem;
    }
}

.main-gradient {
    background: linear-gradient(0deg, #282828 0%, rgba(12, 10, 13, 0) 95.75%);
    mix-blend-mode: multiply;
    width: 100%;
    height: 50rem;
    position: absolute;
    bottom: 0%;
    pointer-events: none;
}

#section-form {
    .form-container {
        .tab-content {
            .space-50 {
                margin-bottom: 150px;
            }
        }
    }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
    #main {
        .main-container {
            background-image: url(../images/banner/my/v3/my-banner-tablet.png);
            background-size: 135% auto;
            background-position: left -8.37rem top -5rem;

            .main-grid {
                .main-grid-right {
                    .info-wrapper {
                        .info-container {
                            transform: scale(0.8);
                            transform-origin: left center;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #main {
        .main-container {
            background-image: url(../images/banner/my/v3/my-banner-tablet.png);
            background-size: 165% auto;
            background-position: left -18.37rem top;

            .main-grid {
                .main-grid-right {
                    .info-wrapper {
                        .info-container {
                            transform: scale(0.6);
                            transform-origin: left center;
                        }

                        .info-header {
                            margin-bottom: 0.7rem;
                            width: 80%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    body {
        background-color: #041f3f;
    }

    #main {
        .main-container {
            background-image: unset;

            .main-grid {
                .main-grid-left {
                    .main-header {
                        .logo {
                            img {
                                width: unset;
                            }
                        }

                        .mobile-container {
                            .info-header {
                                bottom: 10%;

                                h4 {
                                    font-size: 1.3rem;
                                    bottom: unset;

                                    &:nth-child(1) {
                                        font-size: 1.8rem;
                                    }

                                    &:nth-child(2) {
                                        width: unset;
                                    }
                                }
                            }
                        }
                    }
                }

                .header-sports-logos {
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 0.8rem 1.5rem;

                    .cross-icon {
                        display: none;
                    }

                    .sport-logo[alt="BK8 Sports"] {
                        flex: 0 0 100%;
                        display: block;
                        margin: 0 auto;
                        height: 2.5rem;
                    }

                    .sport-logos-sub-row {
                        justify-content: center;
                        gap: 1.5rem;

                        .sport-logo[alt="CMD368"] {
                            height: 1.5rem;
                        }

                        .sport-logo[alt="SABA Sports"] {
                            height: 2rem;
                            width: 100%;
                        }
                    }
                }

                .main-grid-right {
                    .info-wrapper {
                        .info-container {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: center;
                            gap: 1.5rem 1rem;
                            transform: none;

                            .info-item {
                                text-align: center;

                                h4 {
                                    font-size: 10px;
                                    text-align: center;
                                    margin-bottom: 0.5rem;
                                }

                                .lang-box {
                                    width: 12.5rem;
                                    margin-top: 0;
                                }
                            }

                            // 1 — Live Chat
                            .info-item:nth-child(4) {
                                order: 1;
                                width: 100%;
                                justify-content: center;
                            }

                            // 2 — Lang Box
                            .info-item:nth-child(5) {
                                order: 2;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                            }

                            // 3 — BK8 Gresini + Burnley (full width, side by side)
                            .info-item:nth-child(1) {
                                order: 3;
                                width: 100%;

                                .sponsor-stack {
                                    justify-content: center;
                                    gap: 2rem;

                                    .sponsor-entry {
                                        align-items: center;

                                        img {
                                            height: 3.5rem;
                                        }

                                        p {
                                            font-size: 9px;
                                            text-align: center;
                                            width: 70%;
                                        }
                                    }
                                }
                            }

                            // 4 — Official Sponsor / BWF logos (full width)
                            .info-item:nth-child(2) {
                                order: 4;
                                width: 100%;

                                .sponsor-stack {
                                    justify-content: center;
                                    gap: 2rem;

                                    .sponsor-entry {
                                        align-items: center;

                                        img {
                                            height: 3.5rem;
                                        }

                                        p {
                                            font-size: 9px;
                                            text-align: center;
                                            width: 70%;
                                        }
                                    }
                                }
                            }

                            // 5 — Quick Deposit (full width)
                            .info-item:nth-child(3) {
                                order: 5;
                                width: 100%;

                                .payment-container {
                                    display: flex;
                                    justify-content: center;
                                    gap: 0.4rem;
                                    flex-direction: row;

                                    .payment-item {
                                        display: contents;

                                        img {
                                            height: 1.5rem;
                                        }
                                    }
                                }

                                img {
                                    width: 2rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #section-form {
        margin-top: -10%;
    }
}


body.region-my,
body.region-sg {
    #main .main-container .main-grid .main-grid-right .info-wrapper .info-container .info-item .lang-box .lang-dropdown-content {
        min-width: 12.5rem;
        width: 100%;
    }
}

@media screen and (max-width: 538px) {
    #main {
        .main-container {
            .main-grid {
                .main-grid-left {
                    .main-header {
                        .mobile-container {
                            .info-header {
                                bottom: 5%;
                                padding: 0 0.8rem;

                                h4 {
                                    font-size: 1.1rem;

                                    &:nth-child(1) {
                                        font-size: 1.4rem;
                                    }

                                    &:nth-child(2) {
                                        width: unset;
                                    }

                                }
                            }
                        }
                    }
                }
            }
        }
    }
}