/* ===== PANDAPETIR88 EXACT COPY ===== */

.g8sggl * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* Container */
.g8sggl .g8sggl-b {
    background-color: #0f0f0f;
    padding: 10px;
}

/* Game Box */
.g8sggl .glbox {
    font-size: 0;
    position: relative;
    z-index: 0;
}

/* Game Card */
.g8sggl .glbox .gl {
    display: inline-block;
    width: 20%;
    font-size: 14px;
    padding: 8px;
}

/* Game Image */
.g8sggl .glbox .gl .glimg {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #050505;
    cursor: pointer;
    overflow: hidden;
}

.g8sggl .glbox .gl .glpic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.g8sggl .glbox .gl .glpic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover Overlay */
.g8sggl .glbox .gl .hwrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s;
}

.g8sggl .glbox .gl .glimg:hover .hwrap {
    opacity: 1;
}

.g8sggl .glbox .gl .hwrap .hbox {
    position: absolute;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.g8sggl .glbox .gl .hwrap .hbox .main {
    color: #352c02;
    background-color: #d9b300;
    text-align: center;
    width: 100%;
    display: block;
    text-transform: uppercase;
    padding: 8px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
}

/* RTP Container */
.rtp-container {
    position: relative;
    background: #1a1a1a;
    height: 22px;
    overflow: hidden;
}

.rtp-container .green {
    background: linear-gradient(90deg, #10b981, #34d399);
    height: 100%;
    float: left;
}

.rtp-container .yellow {
    background: linear-gradient(90deg, #FFC700, #FF8C00);
    height: 100%;
    float: left;
}

.rtp-container .red {
    background: linear-gradient(90deg, #ef4444, #f87171);
    height: 100%;
    float: left;
}

.rtp-container span {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Game Text (Name) */
.g8sggl .glbox .gl .gltext {
    background-color: #d9b300;
    color: #352c02;
    padding: 6px 10px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

/* Provider Logo */
.g8sggl .glbox .gl .glp {
    background-color: #222;
    text-align: center;
    background-size: auto 86%;
    background-repeat: no-repeat;
    min-height: 26px;
    background-position: center;
}

/* Provider Images */
.pvd.PP { background-image: url('/assets/images/providers/pra.webp'); }
.pvd.PG { background-image: url('/assets/images/providers/pgs.webp'); }
.pvd.NLC { background-image: url('/assets/images/providers/nlc.webp'); }
.pvd.HBN { background-image: url('/assets/images/providers/hbn.webp'); }
.pvd.MIC { background-image: url('/assets/images/providers/mic.webp'); }
.pvd.PLA { background-image: url('/assets/images/providers/pla.webp'); }
.pvd.PLS { background-image: url('/assets/images/providers/pls.webp'); }
.pvd.SPD { background-image: url('/assets/images/providers/spd.webp'); }
.pvd.RED { background-image: url('/assets/images/providers/rtr.webp'); }
.pvd.CQ9 { background-image: url('/assets/images/providers/cq9.webp'); }
.pvd.ADV { background-image: url('/assets/images/providers/adv.webp'); }
.pvd.FSP { background-image: url('/assets/images/providers/fsp.webp'); }
.pvd.JOK { background-image: url('/assets/images/providers/jok.webp'); }
.pvd.FAC { background-image: url('/assets/images/providers/fac.webp'); }
.pvd.YGR { background-image: url('/assets/images/providers/ygr.webp'); }
.pvd.R88 { background-image: url('/assets/images/providers/r88.webp'); }
.pvd.NEX { background-image: url('/assets/images/providers/nex.webp'); }
.pvd.AFB { background-image: url('/assets/images/providers/afg.webp'); }
.pvd.JLI { background-image: url('/assets/images/providers/jli.webp'); }
.pvd.\35 GS { background-image: url('/assets/images/providers/5gs.webp'); }
.pvd.NAU { background-image: url('/assets/images/providers/nau.webp'); }
.pvd.WON { background-image: url('/assets/images/providers/won.webp'); }
.pvd.HCG { background-image: url('/assets/images/providers/hcg.webp'); }
.pvd.JDB { background-image: url('/assets/images/providers/jdb.webp'); }
.pvd.HYD { background-image: url('/assets/images/providers/hyd.webp'); }

/* Responsive */
@media only screen and (max-width: 768px) {
    .g8sggl .glbox .gl {
        font-size: 12px;
    }
    .g8sggl .glbox .gl .hwrap {
        display: none;
    }
}

@media only screen and (max-width: 479px) {
    .g8sggl .glbox .gl {
        width: 33.33%;
        padding: 5px;
    }
    .g8sggl .glbox .gl .gltext {
        padding: 4px 10px;
    }
}

/* Load More */
.load-more-wrap {
    text-align: center;
    padding: 20px 0;
}

.load-more-wrap button {
    background-color: #d9b300;
    color: #352c02;
    border: none;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    text-transform: uppercase;
}

.load-more-wrap button:hover {
    background-color: #e6c200;
}

/* No Games */
.no-games-msg {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.no-games-msg i {
    font-size: 48px;
    color: #d9b300;
    margin-bottom: 15px;
}