/* ============================================
   responsive.css - Optimized for GADING22
   - Replaced min-device-width/max-device-width with min-width/max-width
     (device-width is deprecated in modern CSS)
   - Added tablet breakpoint styles
   - Added small mobile breakpoint
   ============================================ */

/* For Tablet View (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .pola-wrapper {
        padding: 0.8rem !important;
    }

    .rtp-card-img {
        width: 100% !important;
    }

    .icon-card-bg p {
        font-size: 0.75rem !important;
    }
}

/* For Mobile Portrait View (up to 480px) */
@media screen and (max-width: 480px) and (orientation: portrait) {

    html, body {
        max-width: 100%;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    .logo img {
        width: 13rem !important;
    }

    .pola-wrapper {
        width: 100% !important;
        padding: 0.58rem !important;
    }

    .rtp-card-img {
        width: 100% !important;
    }

    .slider, .swiper {
        width: 100%;
        height: 100%;
    }

    .icon-card-bg p {
        font-size: 0.6rem !important;
        font-weight: bold !important;
    }

    .icon-prov {
        justify-content: start !important;
    }

    .icon-card-bg img {
        width: 3rem !important;
    }

    .title-game {
        font-size: 1.2rem !important;
    }

    .item-nav-bottom {
        font-size: 0.7rem !important;
    }

    .icon-providers {
        top: 0.2rem !important;
        right: 0 !important;
    }
}

/* For Mobile Landscape View (up to 850px) */
@media screen and (max-width: 850px) and (orientation: landscape) {
    html, body {
        max-width: 100%;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }
}

/* For Small Mobile Phones (up to 640px) */
@media screen and (max-width: 640px) {
    .btn-play {
        font-size: 0.6rem !important;
    }
}

/* Extra small devices (up to 360px) */
@media screen and (max-width: 360px) {
    .logo img {
        width: 10rem !important;
    }

    .icon-card-bg p {
        font-size: 0.5rem !important;
    }

    .icon-card-bg img {
        width: 2.5rem !important;
    }

    .nav-btn-label {
        font-size: 0.7rem !important;
    }

    .btn-login, .btn-daftar {
        font-size: 0.8rem !important;
    }
}