/* ============================================
   DAGA GAME SLIDER — Layout & Structural CSS
   (Image URLs PHP se dynamically generate hoti hain)
   ============================================ */

/* --- GameList Container --- */
.GameList .swiper-wrapper { height: auto !important; }

.GameList {
    display: flex;
    width: 100%;
    padding: 0 8px;
    height: calc(100vh - 200px);
}

.GameList .GameList_L,
.GameList .GameList_R { padding-top: 8px; }

.GameList .GameList_L { transform: initial; }

/* --- Left Nav Panel --- */
.GameList_L {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    padding-right: 2%;
    flex: 19%;
}

.GameList_L [class*="btn_GL"].on { border: 1px solid #3281d0; }

.GameList_RBox > .swiper-wrapper { flex-direction: column; }

/* --- Left Nav Buttons --- */
.btn_GL {
    height: calc((100% - 70px) / 8);
    min-height: 48px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1px;
    background-color: #e7f1fb;
    margin-bottom: 8px;
    cursor: pointer;
}

.btn-GL-title {
    margin: .2vh 0 0;
    font-size: 11px;
    text-align: center;
    color: #535867;
    line-height: 1em;
    font-weight: 700;
}

/* --- Left Nav Icons (URLs PHP se aati hain) --- */
.GameList_L [class*="ic_GL"] {
    min-height: 18px;
    min-width: 18px;
    width: 3vh;
    height: 3vh;
}

.ic_GLhot   { background-repeat: no-repeat; background-size: 100% auto; }
.ic_GLlive  { background-repeat: no-repeat; background-size: 75% auto; }
.ic_GLloto  { background-repeat: no-repeat; background-size: 75% auto; }
.ic_GLsport { background-repeat: no-repeat; background-size: 75% auto; }
.ic_GLslot  { background-repeat: no-repeat; background-size: 75% auto; }
.ic_GLchess { background-repeat: no-repeat; background-size: 75% auto; }
.ic_GLfish  { background-repeat: no-repeat; background-size: 75% auto; }
.ic_GLesport{ background-repeat: no-repeat; background-size: 75% auto; }

/* --- Right Content Box --- */
.GameList_RBox { flex: 82%; }

.GameList_R {
    height: 408px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.GameList_R [class*="btn_GLhot"] { height: calc(35% - 10px); }

.GameList_R [class*="btn_GL"],
.boxGL { width: calc(50% - 4px); }

.GameList_R [class*="btn_GL"] {
    border-radius: 10px;
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 75px;
    cursor: pointer;
}

[class*="btn_GL"] { margin-bottom: 8px; }

/* --- Card Text --- */
.t_GL { margin: 10px 15px; }

.GameList_R_title {
    font-size: 1em;
    color: #535867;
    line-height: 1em;
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.GameList_R .t_GL img {
    height: 47px;
    margin-top: -3px;
    width: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* --- Card Image Overlay --- */
.GameList_R .img_GL {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    border-radius: 10px;
}

.GameList_R .img_GL::after {
    content: "";
    background-position: 1em -1px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: auto;
}

.GameList_R [class*="btn_GLhot"] .img_GL:after {
    background-size: 100% auto;
    width: 148px;
    height: 100px;
}

/* --- HOT Slide Card sizes --- */
.btn_GLhotLive,
.btn_GLhotLoto,
.btn_GLhotSport,
.btn_GLhotSlot,
.btn_GLhotCool { background-size: cover; }

/* HOT slide overlays */
.btn_GLhotLoto .img_GL:after,
.btn_GLhotLive .img_GL:after { height: 100%; background-position-y: bottom; }
.btn_GLhotSlot .img_GL:after { background-position-y: 22%; }
.btn_GLhotCool .img_GL:after { animation: aniCI 3s step-end infinite; -webkit-animation: aniCI 3s step-end infinite; }

/* Jackpot badge */
.btn_GLhotLive .GL_jackpot {
    background-size: cover;
    width: 47px;
    height: 42px;
    position: absolute;
    top: 10px;
    right: 1px;
    z-index: 2;
}

/* Cool – In Live */
.btn_GLhotCool .t_GL {
    display: flex;
    align-items: flex-start;
    text-align: center;
    flex-direction: column;
}

.GameList_R .btn_GLhotCool .t_GL img { margin-top: 2px; height: 20px; }

.aniTxt { margin-top: 4px; position: relative; z-index: 1; }

.aniTxt:before {
    content: "";
    border: 2px solid #d9b442;
    background-color: #000;
    box-sizing: border-box;
    border-radius: 100px;
    width: 52px;
    height: 24px;
    position: absolute;
    top: 0; left: 0;
    opacity: .7;
    z-index: -1;
}

.aniTxt:after {
    width: 62px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-position: left top;
    animation: aniCI 3s step-end infinite;
    -webkit-animation: aniCI 3s step-end infinite;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}

.btn_GLhotCool,
.boxGL { height: calc(30% - 10px) !important; min-height: 93px !important; }

/* Bottom box */
.btn_GLhotStudio,
.btn_GLhotCAO {
    background: linear-gradient(135deg, #e3ebff 0%, #daddfe 50%, #ccbef7 100%);
    height: calc(50% - 4px) !important;
    width: 100% !important;
}

.boxGL .t_GL .GameList_R_title { min-width: 81px; }

.boxGL .t_GL {
    display: flex;
    align-items: center;
    margin: 0;
    text-align: center;
    height: 100%;
}

.GameList_R .boxGL .t_GL img { max-height: 60%; height: 9vw; margin: auto; }

/* --- HOT/NEW Badges --- */
.GL_hot, .GL_new {
    width: 52px; height: 52px;
    background-size: cover;
    position: absolute;
    right: 0; top: 0;
    z-index: 2;
}

/* --- Sport logos --- */
.logo_CAO {
    display: flex;
    width: calc(47px + 0.5vw);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.GameList_R .logo_CAO .tb-spanish { height: 28px; margin-top: -10px; }

/* ============================================
   LIVE CASINO SLIDE
   ============================================ */
.glr-live-casino [class*="btn_GL"] { height: calc((100% - 40px) / 5); }

.glr-common [class*="btn_GL"] { background: linear-gradient(to bottom, #b2d2ed 0%, #d1e6f6 100%); }

.glr-common .t_GL { display: flex; flex-direction: column; align-items: center; }

.glr-common .img_GL:after { height: 100%; }

.w50-all .t_GL { width: 40%; }

.w50-all .img_GL:after {
    width: 20vh; height: 15.5vh;
    max-height: 105px; max-width: 200px;
    background-size: 100% auto;
}

.btn_GLliveKU:after { background-size: 100% auto; content: ""; }

.btn_GLliveDG  .img_GL:after { background-position-y: 33%; }
.btn_GLliveAES .img_GL:after { background-position-y: 44%; }
.btn_GLliveEVO .img_GL:after { background-position-y: 11%; }
.btn_GLliveWM  .img_GL:after { background-position-y: 66%; }
.btn_GLliveAG  .img_GL:after { background-position-y: 22%; }
.btn_GLliveSA  .img_GL:after { background-position-y: 77%; }
.btn_GLliveGPI .img_GL:after { background-position-y: 88%; }
.btn_GLliveXG  .img_GL:after { background-position-y: 55%; }
.btn_GLliveOB  .img_GL:after { background-position-y: 99%; }

/* ============================================
   XO SO / LOTO SLIDE
   ============================================ */
.btn_GLlotoKU,
.btn_GLlotoBBIN { background-color: #b2d2ed; }

.btn_GLlotoKU { background-size: 100% 100%; }

.glr-loto .img_GL:after,
.glr-chess .img_GL:after { width: 55.7vw; height: 100%; max-height: 54vw; }

.glr-loto .img_GL:after { background-size: 100% auto; }

.btn_GLlotoBBIN .img_GL:after { background-position-y: 50%; }

.glr-loto .btn_GLlotoKU   .img_GL:after { background-position: 0 0;      height: 225px; width: 230px; }
.glr-loto .btn_GLlotoBBIN .img_GL:after { background-position: 0 -208px; height: 199px; width: 208px; }

.GameList_R.cls-title-center .t_GL {
    display: flex; flex-direction: column;
    align-items: center; margin: 10px 0 0 0; width: 35%;
}

.GameList .GameList_R .w100 { width: 100%; display: flex; align-items: center; }

/* ============================================
   SPORTS SLIDE
   ============================================ */
.glr-sports .img_GL:after,
.glr-fish .img_GL:after { width: 22vh; height: 15vh; max-height: 105px; max-width: 200px; }

.glr-sports .img_GL:after { background-size: 100% auto; }

.btn_GLsportKU .logo_CAO { width: calc(100px + 0.5vw); }

.btn_GLsportKU  .img_GL:after { right: 20%; }
.btn_GLsportJZ  .img_GL:after { background-position-y: 11%; }
.btn_GLsportSB  .img_GL:after { background-position-y: 33%; }
.btn_GLsportCMD .img_GL:after { background-position-y: 55%; }
.btn_GLsportAI  .img_GL:after { background-position-y: 66%; }
.btn_GLsportAG  .img_GL:after { background-position-y: 44%; }
.btn_GLsportOB  .img_GL:after { background-position-y: 88%; }

.glr-sports .t_GL,
.glr-games .t_GL { width: 30%; margin-top: 15px; }

/* ============================================
   GAMES / SLOTS SLIDE
   ============================================ */
.glr-games [class*="btn_GL"] { height: calc((100% - 40px) / 5); }

.glr-games .img_GL:after {
    background-size: 100% auto;
    height: 15.5vh; width: 22vh;
    max-height: 105px; max-width: 200px;
}

.btn_GLslot3D  .img_GL:after { background-position-y: 66%; }
.btn_GLslotPG  .img_GL:after { background-position-y: 12%; }
.btn_GLslotFC  .img_GL:after { background-position-y: 99%; }
.btn_GLslotBNG .img_GL:after { background-position-y: 23%; }
.btn_GLslotCQ9 .img_GL:after { background-position-y: 33%; }
.btn_GLslotDS  .img_GL:after { background-position-y: 44%; }
.btn_GLslotPLS .img_GL:after { background-position-y: 88%; }
.btn_GLslotKA  .img_GL:after { background-position-y: 55%; }
.btn_GLslotRK5 .img_GL:after { background-position-y: 77%; }

.btn_GLslot3D .img_GL:after,
.btn_GLslotFC .img_GL:after { background-position-x: .1em; }

/* ============================================
   DOI KHANG / CHESS SLIDE
   ============================================ */
.glr-chess .img_GL:after {
    background-size: 100% auto;
    background-position-x: right;
}

.GameList_R [class*="btn_GLchess"] .img_GL:after { background-size: 100% auto; }

.GameList_R [class*="btn_GLchess"].btn_GLchess3D .img_GL:after { background-position: 0 0;      height: 225px; width: 230px; }
.GameList_R [class*="btn_GLchess"].btn_GLchessV8 .img_GL:after { background-position: 0 -225px; height: 225px; width: 230px; }

/* ============================================
   BAN CA / FISH SLIDE
   ============================================ */
.glr-fish .t_GL { width: 30%; }

.glr-fish .img_GL:after { background-size: 100% auto; }

.btn_GLfish3D .img_GL:after { right: 20%; background-position-x: right; }
.btn_GLfishDS  .img_GL:after { background-position-y: 33%; }
.btn_GLfishAG  .img_GL:after { background-position-y: 22%; }
.btn_GLfishKA  .img_GL:after { background-position-y: 55%; }
.btn_GLfishKS  .img_GL:after { background-position-y: 11%; }
.btn_GLfishCQ9 .img_GL:after { background-position-y: 77%; }
.btn_GLfishV8  .img_GL:after { background-position-y: 88%; }

/* ============================================
   E-SPORTS SLIDE
   ============================================ */
.glr-esports .t_GL { width: 40%; }

.glr-esports .img_GL:after { background-size: 100% auto; width: 55vw; }

.glr-esports .btn_GLesportIM .img_GL:after { background-position: 0 0;      height: 160px; width: 164px; }
.glr-esports .btn_GLesportSB .img_GL:after { background-position: 0 -160px; height: 160px; width: 164px; }
.glr-esports .btn_GLesportOB .img_GL:after { background-position: 0 -320px; height: 160px; width: 164px; }

/* ============================================
   LEFT NAV — ACTIVE STATE
   ============================================ */
[class*="btn_GL"].on [class*="ic_GL"] {
    position: relative;
    background: none;
}

[class*="btn_GL"].on [class*="ic_GL"]:before {
    display: block;
    content: "";
    width: 3.8vh; height: 3.8vh;
    margin: auto;
    position: absolute;
    left: calc(50% - 1.9vh);
    z-index: 2;
    background-repeat: no-repeat;
    background-size: 100% auto;
    animation: aniGame 0.8s ease-out infinite;
    -webkit-animation: aniGame 0.8s ease-out infinite;
}

[class*="btn_GL"].on [class*="ic_GL"]:after {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    display: block;
    content: "";
    width: 4vh; height: 4vh;
    margin: auto;
    position: absolute;
    left: calc(50% - 2vh);
    bottom: -2vh;
    z-index: 2;
    animation: aniShadow 0.8s ease-out infinite;
    -webkit-animation: aniShadow 0.8s ease-out infinite;
}

[class*="btn_GL"].on .ic_GLslot:before {
    background-size: 100% auto;
    width: 5vh; height: 3.5vh;
    left: -35%;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes aniCI {
    from { background-position-y: top; }
    33%  { background-position-y: 11.11%; }
    66%  { background-position-y: 22.22%; }
    to   { background-position-y: top; }
}

@keyframes aniGame {
    0%   { bottom: -.1vh; }
    50%  { bottom: .75vh; }
    100% { bottom: -.1vh; }
}

@keyframes aniShadow {
    0%   { width: 3.6vh; left: calc(50% - 1.8vh); }
    50%  { width: 1.4vh; left: calc(50% - 0.7vh); opacity: .5; }
    100% { width: 3.6vh; left: calc(50% - 1.8vh); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media only screen and (max-width: 849px) {
    .GameList { height: calc(100vh - 300px); }
    .btn_GL   { width: 65px; }
}

@media (max-width: 768px) {
    .GameList { height: calc(100vh - 300px); }
}