/**
 * DUNIATOTO Mobile Dashboard Styles
 * 
 * A comprehensive stylesheet for enhancing the mobile dashboard experience
 * with custom styling, gold gradients, and improved visual hierarchy.
 */

/* =====================================================
   VARIABLES
   ===================================================== */
:root {
    /* Color Palette */
    --base-text-color: #ffffff;
    --primary-text-color: #121212;
    --secondary-text-color: #054fb8;
    --highlight-color: #c30a3d;
    --border-color: #054fb8;
    
    /* Gradients */
    --title-gradient: linear-gradient(to bottom, #368dea 0%, #3da1e3 50%, #054fb8 100%);
    --gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 20%, #b38728 35%, #aa771c 50%, #fcf6ba 65%, #d5ad6a 80%, #b38728 100%);
    
    /* Dimensions */
    --game-container-height: 150px;
    --title-height: 60px;
    
    /* Typography */
    --title-font-size: 14px;
    --output-large-number-font-size: 3rem;
    --output-small-number-font-size: 1.875rem;
    
    /* Spacing */
    --standard-padding: 0.75rem;
    --title-padding-top: 2.875rem;
    
    /* Visual Effects */
    --border-radius: 10px;
    --backdrop-blur: blur(3px);
    --text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    --text-stroke-width: 1px;
    --text-stroke-color: #d4af37;
}

/* =====================================================
   LAYOUT & BACKGROUND
   ===================================================== */
#pg-main {
    background-color: #1e1e1e !important;
    padding-top: 10px;
}

/* Ensure scroll-to-top button is visible */
.scrollup {
    position: fixed !important;
}

/* =====================================================
   HEADER & NAVIGATION
   ===================================================== */
/* Top lobby content area with blur effect */
.lobby-content-top {
    position: absolute;
    z-index: 10;
    top: 65px;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.12) !important;
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    overflow: hidden;
    -webkit-backdrop-filter: var(--backdrop-blur) !important;
    backdrop-filter: var(--backdrop-blur) !important;
}

/* Adjust margins for elements following the lobby header */
.lobby-content-top ~ main .main-content,
.lobby-content-top ~ main .inner-wrap:first-child,
.lobby-content-top ~ main .fullcontent > .inner-wrap:first-of-type,
.lobby-content-top ~ main .referral-load,
.lobby-content-top ~ main .invoice-load,
.lobby-content-top ~ main .hadiah-load,
.lobby-content-top ~ main > .container:first-child {
    margin-top: 98px !important;
}

.lobby-content-top ~ main #prize-container .inner-wrap:first-child {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

.lobby-content-top ~ main .referral-load ~ .container {
    background-color: #636363 !important;
}

/* Running text ticker */
.marquee.running-text {
    position: relative;
    z-index: 10;
    width: 100%;
}

.marquee.running-text .marquee-parent .marquee-child {
    color: var(--base-text-color) !important;
}

/* Login area */
.login-wrapper {
    position: relative;
    z-index: 10;
}

.wrapper2 .iconuserlogin,
.wrapper2 .iconkeylogin {
    z-index: 10;
}

/* Main sidebar styling */
.mb-sidenav {
    background: var(--title-gradient) !important;
    color: var(--primary-text-color) !important;
}

.mb-sidenav .sidenav-header .buttonWrap {
    background: var(--title-gradient) !important;
    color: var(--base-text-color) !important;
    -webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.26) !important;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.26) !important;
}

.mb-sidenav .side-link-container > li {
    border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
}

.mb-sidenav .side-link-container > li .side-link .side-link-desc .side-link-text {
    color: var(--base-text-color) !important;
}

.mb-sidenav .side-link-container > li .side-link .side-link-dot {
    background-color: rgba(255, 255, 255, 0.41) !important;
}

.mb-sidenav .side-link-container > li .side-link .side-link-dot.active {
    background-color: var(--base-text-color) !important;
}

/* Header deposit button */
.header-after-login .buttn-header-deposit.butt0 {
    background: var(--title-gradient) !important;
    color: var(--base-text-color) !important;
}

/* =====================================================
   GAME CONTAINERS & TITLES
   ===================================================== */
/* Game containers styling */
.game-togel a.game-lobby-content,
.game-wrapper .game-lobby-content,
div#lobtoto > a {
    border: inset 2px var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    height: var(--game-container-height) !important;
    -webkit-backdrop-filter: var(--backdrop-blur) !important;
    backdrop-filter: var(--backdrop-blur) !important;
}

/* Game title base styling */
.game-title {
    background: var(--title-gradient) !important;
    color: var(--primary-text-color) !important;
    padding: 5px !important;
}

/* Game wrapper title styling */
.game-wrapper .game-lobby-content .game-title {
    color: var(--base-text-color) !important;
    font-size: var(--title-font-size) !important;
    height: var(--title-height) !important;
    font-weight: bold !important;
    letter-spacing: -1px !important;
    width: 100% !important;
    padding-top: var(--title-padding-top) !important;
    padding-left: var(--standard-padding) !important;
    padding-right: var(--standard-padding) !important;
    margin-top: -70px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Game title elements */
.game-title > span {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}

.game-title > em {
    font-style: normal !important;
    text-align: center !important;
    white-space: nowrap !important;
    -o-text-overflow: ellipsis !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0% !important;
    flex: 1 1 0% !important; 
}

/* Game container elements */
.pool-container .pool-content .item-data {
    z-index: 2 !important;
}

.game-wrapper .game-lobby-content .effect7:after,
.game-wrapper .game-lobby-content .effect7:before {
    left: 0 !important;
    right: 0 !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

/* =====================================================
   GAME NUMBERS & TIMERS
   ===================================================== */
/* Game numbers styling with gold gradient */
#game-togel-all .game-wrapper .game-lobby-content.game-container .effect7 .game-angka .lobby-game-angka-keluar,
#game-togel-all .game-wrapper .game-lobby-content .pool-container .game-angka .lobby-game-angka-keluar {
    font-weight: 600 !important;
    background: var(--gold-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: var(--text-shadow) !important;
    -webkit-text-stroke: var(--text-stroke-width) var(--text-stroke-color) !important;
}

/* Large game numbers */
#game-togel-all .game-wrapper .game-lobby-content.game-container .effect7 .game-angka .lobby-game-angka-keluar {
    font-size: var(--output-large-number-font-size) !important;
}

/* Small game numbers */
#game-togel-all .game-wrapper .game-lobby-content .pool-container .game-angka .lobby-game-angka-keluar {
    font-size: var(--output-small-number-font-size) !important;
}

/* Live game indicator */
.game-wrapper .game-lobby-content .game-lobby-bottom .game-lobby-live-wrapper .game-lobby-live {
    color: var(--base-text-color) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    background-color: var(--highlight-color) !important;
    padding: 0.5rem var(--standard-padding) !important;
    border-radius: 0.5rem !important;
}

/* Timer styling */
.game-wrapper .game-lobby-content .game-lobby-bottom .timer-game {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* =====================================================
   POOL CONTAINERS
   ===================================================== */
.game-lobby-content > .pool-container {
    height: var(--game-container-height) !important;
    overflow: visible !important;
}

.game-lobby-content > .pool-container > img {
    left: 0;
    top: 0;
}

.game-lobby-content > .pool-container > .pool-content {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* =====================================================
   ARCADE & SLOT GAMES
   ===================================================== */
/* Arcade game items */
#game-arcade .arcade-content .arcade-content-item > span {
    color: var(--base-text-color);
    display: block;
    margin-top: 4px;
}

/* Slot game containers */
#game-slot .slot-content,
#game-elottery .slot-content {
    background: none !important;
}

#game-slot .slot-content img,
#game-elottery .slot-content .elottery-items {
    border: 1px solid var(--border-color);
}

#game-elottery .slot-content .elottery-items { 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #0E131C;
}

/* =====================================================
   HISTORY PAGES
   ===================================================== */
/* Page titles */
.body-mobile .title-page,
.body-mobile .history-number-wrapper ~ .content-history > h3 {
    font-size: 1.75rem !important;
    background: var(--title-gradient) !important;
    color: var(--primary-text-color) !important;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

/* History buttons container */
.body-mobile .history-number-wrapper > .games-btn-container {
    padding: 0;
    background-color: transparent;
    border: none !important;
    border-radius: 0;
    gap: 0.25rem !important;
}

/* History buttons */

/* History buttons */
.body-mobile .history-number-wrapper > .games-btn-container > .btn-games-wrapper .btn-game-hs,
.body-mobile .games-btn-container > .btn-games-wrapper .btn-game-hs {
    font-size: 12px !important;
    text-transform: uppercase;
    border: 1px solid var(--border-color) !important;
    font-weight: 600;
    background: var(--title-gradient) !important;
    color: var(--primary-text-color) !important;
}


.body-mobile .history-number-wrapper > .games-btn-container > .btn-games-wrapper .btn-game-hs {
    font-size: 11px !important;
}

/* History tables */
.body-mobile .content-history .table-history-warapper {
    border: 1px solid var(--border-color);
    padding: 0 !important;
    background: var(--primary-text-color) !important;
}

.body-mobile .content-history .table-history-warapper .table-history {
    margin-bottom: 0 !important;
    font-size: 12px !important;
}

.body-mobile .content-history .table-history-warapper .table-history td,
.body-mobile .content-history .table-history-warapper .table-history th {
    border: 1px solid var(--border-color) !important;
}

.body-mobile .content-history .table-history-warapper .table-history th {
    border-top: none !important;
}

.body-mobile .content-history .table-history-warapper .table-history th:last-child,
.body-mobile .content-history .table-history-warapper .table-history td:last-child {
    border-right: none !important;
}

.body-mobile .content-history .table-history-warapper .table-history .td-detail-link > a {
    color: var(--secondary-text-color) !important;
    font-weight: 700;
}

/* Pagination */
.body-mobile .content-history .history-pagination {
    -webkit-box-pack: space-evenly !important;
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 1rem !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.body-mobile .content-history .history-pagination .pagination-items.active > span {
    color: var(--base-text-color) !important;
}

.body-mobile .content-history .history-pagination .pagination-items > span > svg {
    width: 18px !important;
    height: 18px !important;
}

/* =====================================================
   CONTENT PANELS
   ===================================================== */
/* Panel styling */
.body-mobile .fullcontent > .inner-wrap > .panel-grey:first-of-type {
    text-align: center;
    background: var(--primary-text-color) !important;
    border-radius: 4px;
    border: 1px solid white;
}

/* Text content in panels */
.body-mobile .fullcontent > .inner-wrap > font:nth-of-type(1),
.body-mobile .fullcontent > .inner-wrap > h4:nth-of-type(1) {
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
    text-align: center;
}

.body-mobile .fullcontent > .inner-wrap > font:nth-of-type(1) a,
.body-mobile .fullcontent > .inner-wrap > h4:nth-of-type(1) a {
    color: #ffbf27;
    display: inline-block;
    text-decoration: underline !important;
}

.body-mobile .fullcontent > .inner-wrap > font:nth-of-type(2),
.body-mobile .fullcontent > .inner-wrap > h4:nth-of-type(2) {
    display: block;
    font-size: 12px;
    margin-bottom: 8px;
    text-align: center;
}

.body-mobile .fullcontent > .inner-wrap > font:nth-of-type(2) span,
.body-mobile .fullcontent > .inner-wrap > h4:nth-of-type(2) {
    color: var(--base-text-color) !important;
    display: inline-block;
}

/* Banner containers */
.body-mobile .fullcontent > .inner-wrap > .banner-container {
    margin-top: 8px !important;
}

.body-mobile .fullcontent ~ .banner-container {
    background: rgba(0, 0, 0, 0.38) !important;
    padding: 0 10px;
    height: 71px !important;
}

/* Misc elements */
.body-mobile #pindah {
    padding: 0 !important;
    background: none !important;
}

.body-mobile .panel-blue {
    border: 1px solid var(--border-color) !important;
}

/* =====================================================
   ALTERNATIVE LINKS SECTION
   ===================================================== */
.body-mobile .alternative-link-group {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--border-color) !important;
    padding: 12px !important;
    background: var(--title-gradient) !important;
    color: var(--primary-text-color) !important;
    margin-bottom: 16px;
}

.body-mobile .alternative-link-group .alternative-link-group__body {
    display: block;
}

.body-mobile .alternative-link-group h4 {
    color: var(--primary-text-color) !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 10px !important;
    display: block;
}

.body-mobile .alternative-link-group p {
    font-size: 14px !important;
    color: var(--primary-text-color) !important;
    text-align: center;
}

/* Table layout for links */
.body-mobile .alternative-link-group table {
    width: 100%;
}

.body-mobile .alternative-link-group table,
.body-mobile .alternative-link-group table tr td {
    border: 1px solid var(--primary-text-color);
    border-collapse: collapse;
}

.body-mobile .alternative-link-group table tr td {
    padding: 6px !important;
}

.body-mobile .alternative-link-group table tr button {
    background: none !important;
    outline: none !important;
    border: none !important;
    font-weight: 600 !important;
}

/* Info text with icon */
.body-mobile .alternative-link-group .alternative-link-group__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 4px;
}