/* =========================================================
   NEXUS PLAY UI V3
   GLOBAL PRESENTATION LAYER
   Backend / PHP logic untouched
   ========================================================= */

:root{
    --v3-bg:var(--theme-background,#f7f5fa);
    --v3-surface:var(--theme-card,#ffffff);
    --v3-surface-soft:var(--theme-primary-soft,var(--v3-surface));
    --v3-text:var(--theme-text,#171522);
    --v3-muted:var(--theme-muted,#777382);
    --v3-border:var(--theme-border,#e8e3ec);
    --v3-primary:var(--theme-primary,var(--theme-accent,#ec3da0));
    --v3-secondary:var(--theme-secondary,#8050ed);
    --v3-gradient:linear-gradient(135deg,var(--v3-primary),var(--v3-secondary));
    --v3-radius:22px;
    --v3-shadow:0 12px 35px rgba(34,20,55,.07);
}

/* ---------- GLOBAL ---------- */

html{
    background:var(--v3-bg)!important;
}

body{
    background:var(--v3-bg)!important;
    color:var(--v3-text)!important;
    overflow-x:hidden!important;
}

body,
button,
input,
select,
textarea{
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

h1,h2,h3,h4,h5,h6{
    color:var(--v3-text)!important;
}

p{
    color:var(--v3-muted);
}

/* ---------- HEADER ---------- */

.topbar{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid var(--v3-border)!important;
    box-shadow:0 5px 24px rgba(30,20,50,.05)!important;
    backdrop-filter:blur(18px);
}

.topbar .container.nav,
.topbar .nav{
    width:min(1180px,calc(100% - 32px))!important;
    min-height:74px!important;
    margin:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:22px!important;
}

/* ---------- BRAND ---------- */

.topbar .brand{
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    color:var(--v3-text)!important;
    text-decoration:none!important;
}

.topbar .brand-mark{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    border-radius:14px!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    background:var(--v3-gradient)!important;
}

.topbar .brand-mark img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
}

.topbar .brand-text{
    display:flex!important;
    flex-direction:column!important;
    line-height:1.05!important;
}

.topbar .brand-text strong{
    font-size:17px!important;
    font-weight:900!important;
    color:var(--v3-text)!important;
}

.topbar .brand-text small{
    margin-top:5px!important;
    font-size:9px!important;
    letter-spacing:1.4px!important;
    font-weight:700!important;
    color:var(--v3-muted)!important;
}

/* ---------- DESKTOP NAV ---------- */

.topbar .navlinks{
    flex:1!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
}

.topbar .navlinks a{
    min-height:42px!important;
    padding:0 13px!important;
    display:inline-flex!important;
    align-items:center!important;
    border-radius:12px!important;
    color:var(--v3-muted)!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:750!important;
}

.topbar .navlinks a:hover{
    background:var(--v3-surface-soft)!important;
    color:var(--v3-primary)!important;
}

/* ---------- WALLET ---------- */

.topbar .wallet{
    min-height:46px!important;
    padding:0 15px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:9px!important;
    border:1px solid var(--v3-border)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:var(--v3-text)!important;
    text-decoration:none!important;
    font-weight:800!important;
    white-space:nowrap!important;
}

.topbar .wallet-icon{
    color:var(--v3-primary)!important;
}

/* ---------- AUTH HEADER ---------- */

.header-auth-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}

.header-auth-actions .header-login,
.header-auth-actions .header-register{
    min-height:44px!important;
    padding:0 17px!important;
    border-radius:13px!important;
    font-weight:800!important;
}

.header-auth-actions .header-login{
    background:#fff!important;
    color:var(--v3-text)!important;
    border:1px solid var(--v3-border)!important;
}

.header-auth-actions .header-register{
    background:var(--v3-gradient)!important;
    color:#fff!important;
    border:0!important;
}

/* ---------- MOBILE MENU ---------- */

.topbar .mobile-menu{
    width:46px!important;
    height:46px!important;
    display:none;
    place-items:center!important;
    margin-left:auto!important;
    border:1px solid var(--v3-border)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:var(--v3-text)!important;
}

/* ---------- GAME LOBBY ---------- */

.lobby,
.home-page{
    color:var(--v3-text)!important;
}

.lobby-head{
    margin-bottom:30px!important;
}

.lobby-head h1{
    font-size:clamp(38px,5vw,58px)!important;
    line-height:1!important;
    letter-spacing:-2px!important;
    font-weight:900!important;
}

.lobby-head p{
    font-size:16px!important;
}

.game-count{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:20px!important;
    box-shadow:var(--v3-shadow)!important;
}

.game-count strong{
    color:var(--v3-text)!important;
}

/* ---------- PROVIDERS ---------- */

.provider-row{
    scrollbar-width:none;
}

.provider-row::-webkit-scrollbar{
    display:none;
}

.provider{
    border:1px solid var(--v3-border)!important;
    background:#fff!important;
    color:var(--v3-text)!important;
    border-radius:15px!important;
    font-weight:800!important;
}

.provider.selected{
    background:linear-gradient(
        135deg,
        rgba(236,61,160,.12),
        rgba(128,80,237,.12)
    )!important;
    color:var(--v3-primary)!important;
    border-color:rgba(236,61,160,.25)!important;
}

/* ---------- SEARCH ---------- */

.game-search{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:none!important;
}

.game-search input{
    color:var(--v3-text)!important;
    background:#fff!important;
}

.game-search input::placeholder{
    color:var(--v3-muted)!important;
}

/* ---------- GAME CARDS ---------- */

.game-grid{
    gap:18px!important;
}

.game-card{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:20px!important;
    overflow:hidden!important;
    box-shadow:0 8px 25px rgba(30,20,50,.055)!important;
}

.game-card:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(30,20,50,.10)!important;
}

.game-card h3,
.game-card .game-name{
    color:var(--v3-text)!important;
}

.game-card .provider-name,
.game-card small{
    color:var(--v3-muted)!important;
}

.game-card .play-button,
.game-card .play,
.game-card a[class*="play"]{
    background:var(--v3-gradient)!important;
    color:#fff!important;
    border:0!important;
}

/* ---------- HOME HERO ---------- */

.home-hero{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:26px!important;
    box-shadow:var(--v3-shadow)!important;
    overflow:hidden!important;
}

.hero-eyebrow,
.section-eyebrow{
    color:var(--v3-primary)!important;
    font-weight:850!important;
    letter-spacing:2px!important;
}

.hero-content h1{
    color:var(--v3-text)!important;
    font-weight:900!important;
    letter-spacing:-2px!important;
}

.hero-content h1 span{
    background:var(--v3-gradient)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
}

.hero-primary,
.auth-submit,
.hero-actions .hero-primary{
    background:var(--v3-gradient)!important;
    color:#fff!important;
    border:0!important;
}

.hero-secondary{
    background:#fff!important;
    color:var(--v3-text)!important;
    border:1px solid var(--v3-border)!important;
}

/* ---------- CATEGORY ---------- */

.category-card{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:20px!important;
    box-shadow:0 8px 25px rgba(30,20,50,.05)!important;
}

.category-card strong{
    color:var(--v3-text)!important;
}

/* ---------- GLOBAL PROMOTION ---------- */

.global-promo-card{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:20px!important;
    overflow:hidden!important;
    box-shadow:var(--v3-shadow)!important;
}

.global-promo-button{
    background:var(--v3-gradient)!important;
    color:#fff!important;
}

/* ---------- AUTH PAGES ---------- */

.auth-page{
    min-height:100vh!important;
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(236,61,160,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(128,80,237,.12),
            transparent 32%
        ),
        var(--v3-bg)!important;
}

.auth-shell{
    background:#fff!important;
    border:1px solid var(--v3-border)!important;
    border-radius:26px!important;
    box-shadow:0 20px 60px rgba(30,20,50,.09)!important;
}

.auth-logo-mark{
    background:var(--v3-gradient)!important;
}

.auth-eyebrow{
    color:var(--v3-primary)!important;
}

.auth-header h1{
    color:var(--v3-text)!important;
    font-weight:900!important;
}

.auth-header p{
    color:var(--v3-muted)!important;
}

.auth-form label span{
    color:var(--v3-text)!important;
    font-weight:750!important;
}

.auth-form input,
.password-field input{
    background:#fff!important;
    color:var(--v3-text)!important;
    border:1px solid var(--v3-border)!important;
    border-radius:13px!important;
}

.auth-form input:focus,
.password-field input:focus{
    border-color:var(--v3-primary)!important;
    box-shadow:0 0 0 4px rgba(236,61,160,.10)!important;
    outline:none!important;
}

.auth-submit{
    border-radius:14px!important;
    min-height:52px!important;
}

.auth-error{
    border-radius:13px!important;
}

.auth-success{
    border-radius:13px!important;
}

/* ---------- DRAWER ---------- */

.mobile-drawer{
    background:#fff!important;
    color:var(--v3-text)!important;
}

.mobile-drawer-head{
    background:#fff!important;
    border-bottom:1px solid var(--v3-border)!important;
}

.mobile-drawer-nav a{
    color:var(--v3-text)!important;
    border-radius:13px!important;
}

.mobile-drawer-nav a:hover,
.mobile-drawer-nav a:focus{
    background:var(--v3-surface-soft)!important;
    color:var(--v3-primary)!important;
}

/* ---------- BOTTOM NAV ---------- */

.bottomnav{
    background:rgba(255,255,255,.97)!important;
    border-top:1px solid var(--v3-border)!important;
    box-shadow:0 -8px 25px rgba(30,20,50,.07)!important;
    backdrop-filter:blur(18px);
}

.bottomnav a{
    color:var(--v3-muted)!important;
}

.bottomnav a.active{
    color:var(--v3-primary)!important;
}

/* ---------- FLOATING CHAT ---------- */

.floating-chat{
    background:var(--v3-gradient)!important;
}

/* ---------- MOBILE ---------- */

@media(max-width:820px){

    body{
        padding-bottom:78px!important;
    }

    .topbar .container.nav,
    .topbar .nav{
        width:calc(100% - 20px)!important;
        min-height:68px!important;
        gap:10px!important;
    }

    .topbar .navlinks,
    .topbar .wallet,
    .header-auth-actions{
        display:none!important;
    }

    .topbar .mobile-menu{
        display:grid!important;
        flex:0 0 46px!important;
    }

    .topbar .brand{
        min-width:0!important;
        flex:1!important;
    }

    .topbar .brand-mark{
        width:44px!important;
        height:44px!important;
        flex:0 0 44px!important;
    }

    .topbar .brand-text strong{
        font-size:15px!important;
    }

    .topbar .brand-text small{
        font-size:8px!important;
    }

    main{
        max-width:none!important;
    }

    .lobby-head h1{
        font-size:42px!important;
    }

    .game-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:14px!important;
    }

    .game-card{
        border-radius:18px!important;
    }

    .home-hero{
        border-radius:22px!important;
    }

    .hero-content h1{
        font-size:38px!important;
        letter-spacing:-1.5px!important;
    }

    .auth-shell{
        border-radius:20px!important;
        margin:16px!important;
    }
}

@media(max-width:480px){

    .game-grid{
        gap:10px!important;
    }

    .game-card{
        border-radius:15px!important;
    }

    .hero-content h1{
        font-size:34px!important;
    }

    .hero-actions{
        gap:10px!important;
    }
}

/* =========================================================
   NEXUS PLAY V3 — GLOBAL TAKEOVER
   Presentation only.
   Backend / PHP / API / session untouched.
   ========================================================= */

html,
body {
    background: var(--v3-bg) !important;
    color: var(--v3-text) !important;
}

/* Main content */
main,
main.container,
.container {
    color: var(--v3-text) !important;
}

/* Generic surfaces */
.card,
.panel,
.section-card,
.game-card,
.game-item,
.category-card,
.featured,
.modal-content,
.stat-card,
.balance-card,
.transaction-card,
.promo-card,
.provider-card {
    background: var(--v3-surface) !important;
    color: var(--v3-text) !important;
    border-color: var(--v3-border) !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.card h1,
.card h2,
.card h3,
.card h4,
.panel h1,
.panel h2,
.panel h3 {
    color: var(--v3-text) !important;
}

/* Normal text */
p,
small,
.muted,
.text-muted,
.subtitle,
.description {
    color: var(--v3-muted) !important;
}

/* Inputs */
input,
select,
textarea,
.search-input,
.game-search,
.game-search input {
    background: var(--v3-surface) !important;
    color: var(--v3-text) !important;
    border-color: var(--v3-border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--v3-muted) !important;
}

/* Buttons */
button,
.btn,
.btn-primary,
.primary-btn,
button[type="submit"],
.play-btn,
.play-button,
.hero-primary {
    background: var(--v3-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Secondary buttons */
.btn-secondary,
.hero-secondary {
    background: var(--v3-surface) !important;
    color: var(--v3-text) !important;
    border: 1px solid var(--v3-border) !important;
}

/* Links */
a {
    color: var(--v3-primary);
}

a:hover {
    color: var(--v3-secondary);
}

/* Provider / category controls */
.provider,
.provider-tab,
.provider-card,
.category,
.category-card {
    border-color: var(--v3-border) !important;
}

.provider.selected,
.provider.active,
.provider-tab.active,
.provider-card.active {
    background: var(--v3-surface-soft) !important;
    color: var(--v3-primary) !important;
    border-color: var(--v3-primary) !important;
}

/* Tables */
table {
    color: var(--v3-text) !important;
}

th {
    color: var(--v3-text) !important;
}

td {
    color: var(--v3-muted) !important;
    border-color: var(--v3-border) !important;
}

/* Wallet / balance */
.wallet,
.balance,
.balance-card {
    background: var(--v3-surface) !important;
    color: var(--v3-text) !important;
    border-color: var(--v3-border) !important;
}

/* Drawer */
.mobile-drawer,
.mobile-drawer-head {
    background: var(--v3-surface) !important;
    color: var(--v3-text) !important;
    border-color: var(--v3-border) !important;
}

.mobile-drawer-nav a {
    color: var(--v3-text) !important;
}

.mobile-drawer-nav a:hover,
.mobile-drawer-nav a:focus {
    background: var(--v3-surface-soft) !important;
    color: var(--v3-primary) !important;
}

/* Bottom navigation */
.bottomnav {
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid var(--v3-border) !important;
}

.bottomnav a {
    color: var(--v3-muted) !important;
}

.bottomnav a.active {
    color: var(--v3-primary) !important;
}

/* Status */
.success {
    color: var(--nx-success, #22a06b) !important;
}

.danger,
.error {
    color: var(--nx-danger, #dc4c5b) !important;
}

/* Remove common legacy dark surfaces */
.topbar,
.bottomnav,
.drawer,
.sidebar,
.mobile-menu,
.mobile-drawer,
.home-hero,
.hero-secondary,
.game-card,
.category-card {
    box-shadow: 0 8px 30px rgba(40,25,60,.07) !important;
}

/* =========================================================
   END V3 GLOBAL TAKEOVER
   ========================================================= */

/* =========================================================
   V3 FINAL FIX — DARK CTA / TEXT CONTRAST
   ========================================================= */

.home-page .cta,
.home-page .cta-section,
.home-page .games-cta,
.home-page .all-games-cta,
.home-page section[class*="cta"],
.games-cta,
.all-games-cta {
    background: var(--v3-surface) !important;
    color: var(--v3-text) !important;
    border: 1px solid var(--v3-border) !important;
}

.home-page .cta h1,
.home-page .cta h2,
.home-page .cta h3,
.home-page .cta p,
.home-page .cta-section h1,
.home-page .cta-section h2,
.home-page .cta-section h3,
.home-page .cta-section p,
.home-page .games-cta h1,
.home-page .games-cta h2,
.home-page .games-cta h3,
.home-page .games-cta p,
.games-cta h1,
.games-cta h2,
.games-cta h3,
.games-cta p,
.all-games-cta h1,
.all-games-cta h2,
.all-games-cta h3,
.all-games-cta p {
    color: var(--v3-text) !important;
}

.home-page .cta p,
.home-page .cta-section p,
.home-page .games-cta p,
.games-cta p,
.all-games-cta p {
    color: var(--v3-muted) !important;
}

/* CTA eyebrow */
.home-page .cta .section-eyebrow,
.home-page .cta-section .section-eyebrow,
.home-page .games-cta .section-eyebrow,
.games-cta .section-eyebrow,
.all-games-cta .section-eyebrow {
    color: var(--v3-primary) !important;
}

/* CTA button tetap gradient */
.home-page .cta a,
.home-page .cta-section a,
.home-page .games-cta a,
.games-cta a,
.all-games-cta a {
    background: var(--v3-gradient) !important;
    color: #fff !important;
}

/* =========================================================
   END CTA FIX
   ========================================================= */

/* =========================================================
   V3 FINAL MOBILE SPACING
   ========================================================= */

@media(max-width:820px){

    /* Floating chat tidak menutupi konten */
    .floating-chat{
        right:16px!important;
        bottom:86px!important;
        z-index:1900!important;
    }

    /* Beri ruang aman sebelum bottom navigation */
    main{
        padding-bottom:36px!important;
    }

    /* Game grid tidak tertutup navigation */
    .game-grid{
        padding-bottom:18px!important;
    }

    /* CTA / section terakhir */
    .global-promo,
    .global-promo-card{
        margin-bottom:20px!important;
    }
}

@media(max-width:480px){

    .floating-chat{
        right:14px!important;
        bottom:84px!important;
    }

}

/* =========================================================
   END MOBILE SPACING
   ========================================================= */