/* =========================================================
   Tema: Putih - Biru - Ungu
   Override untuk desktop-blue-magenta-css7410.css
   Ubah variabel di :root untuk menyesuaikan warna.
   ========================================================= */
:root {
    --wbp-bg: #ffffff;
    --wbp-surface: #f5f7ff;
    --wbp-surface-2: #eef1fd;
    --wbp-border: #dfe4f6;
    --wbp-text: #1f2a44;
    --wbp-muted: #5b6680;
    --wbp-blue: #2563eb;
    --wbp-blue-dark: #1d4ed8;
    --wbp-purple: #7c3aed;
    --wbp-purple-dark: #6d28d9;
    --wbp-gradient: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    --wbp-gradient-rev: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
    --wbp-shadow: 0 4px 16px rgba(37, 99, 235, .10);
}

/* ---------- Dasar ---------- */
html, body {
    background: var(--wbp-bg) !important;
    color: var(--wbp-text) !important;
}
p, body { color: var(--wbp-muted); }
h1, h2, h3, h4, h5, h6 { color: var(--wbp-text); }
a, a:focus { color: var(--wbp-blue); }
a:hover { color: var(--wbp-purple); }

/* ---------- Topbar ---------- */
.topbar-container {
    background: var(--wbp-surface) !important;
    border-bottom: 1px solid var(--wbp-border);
}
.topbar-left-section .topbar-item,
.topbar-left-section .topbar-item a { color: var(--wbp-text) !important; border-right-color: var(--wbp-border) !important; }
.topbar-left-section .topbar-item a:hover { color: var(--wbp-purple) !important; }
.topbar-left-section .topbar-item .live-chat { background: var(--wbp-blue) !important; color: #fff !important; }
.topbar-left-section .topbar-item .live-chat:hover { background: var(--wbp-purple) !important; }
.topbar-left-section .language-selector { background-color: #fff !important; border: 1px solid var(--wbp-border); }
.topbar-left-section .language-selector li { border-bottom-color: var(--wbp-border) !important; }
.topbar-left-section .language-selector li,
.topbar-left-section .language-selector a { color: var(--wbp-text) !important; }

/* ---------- Login panel ---------- */
.login-panel { color: var(--wbp-text) !important; }
.login-panel input[type=text],
.login-panel input[type=password],
.header_inputbox {
    background-color: #fff !important;
    border: 1px solid var(--wbp-border) !important;
    color: var(--wbp-text) !important;
}
.login-panel input::placeholder { color: #98a2b8; }
.login-panel .login-button { background: var(--wbp-blue) !important; color: #fff !important; }
.login-panel .login-button:hover { background: var(--wbp-blue-dark) !important; }
.login-panel .register-button { background: var(--wbp-purple) !important; color: #fff !important; }
.login-panel .register-button:hover { background: var(--wbp-purple-dark) !important; }
.login-panel .forgot-password-link { color: var(--wbp-blue) !important; }
.login-panel .forgot-password-link:hover { color: var(--wbp-purple) !important; }

/* ---------- Header & menu ---------- */
.site-header {
    background: #fff !important;
    border-bottom: 3px solid var(--wbp-purple) !important;
    box-shadow: var(--wbp-shadow);
}
.top-menu > li, .menu-slide > i { color: var(--wbp-text) !important; }
.top-menu > li:hover,
.top-menu > li[data-active="true"] { color: var(--wbp-purple) !important; }
.top-menu .game-list {
    background-color: rgba(255, 255, 255, .97) !important;
    border-top-color: var(--wbp-purple) !important;
    border-bottom-color: var(--wbp-purple) !important;
    box-shadow: var(--wbp-shadow);
}
.top-menu .game-list > li > a .background {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0) 0%, rgba(37, 99, 235, .35) 100%) !important;
    border-color: var(--wbp-blue) !important;
}

/* ---------- Banner ---------- */
.banner, .banner .slick-slide img { background: var(--wbp-surface) !important; }
.banner .carousel-indicators li { border-color: var(--wbp-blue) !important; }
.banner .carousel-indicators .active,
.banner .carousel-indicators .slick-active { background: var(--wbp-purple) !important; border-color: var(--wbp-purple) !important; }

/* ---------- Area info / pengumuman ---------- */
.home-info-container,
.telegram-banner-container {
    background: #fff !important;
    border-color: var(--wbp-border) !important;
}
.announcement-container {
    background: var(--wbp-gradient) !important;
    color: #fff !important;
}
.announcement-container > [data-section="title"],
.announcement-container > [data-section="date"] { color: #fff !important; }
.announcement-container > [data-section="announcements"] { background: #fff !important; border-radius: 4px; }
.announcement-container .announcement-list li { color: var(--wbp-text) !important; }

/* ---------- Progressive jackpot ---------- */
.home-progressive-jackpot { background-image: var(--wbp-gradient) !important; }
.home-progressive-jackpot .outer-container { background-color: #fff !important; }
.home-progressive-jackpot .inner-container { background-image: linear-gradient(#ede9fe, #dbeafe) !important; }
.home-progressive-jackpot .border-container { background-color: #fff !important; border-color: var(--wbp-purple) !important; }
.home-progressive-jackpot .jackpot-container { background-image: var(--wbp-gradient) !important; color: #fff !important; }
.home-progressive-jackpot .jackpot-inner-container { background-color: #1e1b4b !important; }
.home-progressive-jackpot .jackpot-border-container { border-color: var(--wbp-blue) !important; }
.home-progressive-jackpot .jackpot-currency { color: #c4b5fd !important; }
.home-progressive-jackpot .jackpot-play-section .jackpot-play-text { color: var(--wbp-purple) !important; }
.home-progressive-jackpot .jackpot-play-section .jackpot-play-text label { color: var(--wbp-blue) !important; }

/* ---------- Daftar game (judul miring) ---------- */
.home-game-list-container .container-title span,
.home-game-list-container .container-title span:after,
.popular-game-title-container .container-title span,
.popular-game-title-container .container-title span:after { background: var(--wbp-blue) !important; color: #fff !important; }
.home-game-list-container .container-title span,
.popular-game-title-container .container-title span { background: var(--wbp-gradient) !important; }
.home-game-list-container .container-title span:after,
.popular-game-title-container .container-title span:after { background: var(--wbp-purple) !important; }
.home-game-list-container .container-content,
.popular-game-title-container .container-content {
    border: 1px solid var(--wbp-border) !important;
    background: var(--wbp-surface) !important;
    border-radius: 0 6px 6px 6px;
}
.home-game-list-container .container-content .game-list .game-item .game-name,
.popular-game-title-container .container-content .game-list .game-item .game-name { color: var(--wbp-purple) !important; }
.home-game-list-container .container-content .game-list .game-item .provider-name,
.popular-game-title-container .container-content .game-list .game-item .provider-name { color: var(--wbp-muted) !important; }
.home-game-list-container .container-content .game-list::-webkit-scrollbar-thumb,
.popular-game-title-container .container-content .game-list::-webkit-scrollbar-thumb { background: #c7d2fe !important; }

.game-list-title, .game-list { background-color: transparent !important; }
.game-list .game-item { background-color: #fff !important; }
.game-list .game-name, .game-list .provider-name { background: var(--wbp-gradient) !important; color: #fff !important; }
.game-list .wrapper-container:hover { background: var(--wbp-surface-2) !important; }

/* ---------- Popular games (tab) ---------- */
.popular-games { background-color: var(--wbp-surface) !important; border: 1px solid var(--wbp-border); }
.popular-games [data-section="left"] .section-title { background: var(--wbp-gradient) !important; color: #fff !important; }
.popular-games .nav-tabs > li > a { background-color: #fff !important; color: var(--wbp-text) !important; border: 1px solid var(--wbp-border) !important; }
.popular-games .nav-tabs > li.active > a,
.popular-games .nav-tabs > li.active > a:hover,
.popular-games .nav-tabs > li.active > a:focus,
.popular-games .nav-tabs > li > a:hover { background-color: var(--wbp-purple) !important; color: #fff !important; border-color: var(--wbp-purple) !important; }
.popular-games .tab-pane,
.popular-games .popular-game-list { background-color: #fff !important; }
.popular-games .tab-content { border: 1px solid var(--wbp-border) !important; }
.popular-games .scrtabs-tab-scroll-arrow,
.scrtabs-tab-container { background-color: var(--wbp-blue) !important; color: #fff !important; }
.popular-games .popular-game-list .game-item:hover .link-container { background-color: rgba(37, 99, 235, .55) !important; }

/* ---------- Tombol main ---------- */
.play-now { background: var(--wbp-gradient) !important; color: #fff !important; border-color: transparent !important; }
.play-now:hover { background: var(--wbp-gradient-rev) !important; color: #fff !important; }
.large-game-list li .link-container .play-now { background: var(--wbp-gradient) !important; }
.free-play { background: #fff !important; color: var(--wbp-blue) !important; border: 1px solid var(--wbp-blue) !important; }
.free-play:hover { background: var(--wbp-blue) !important; color: #fff !important; }
.btn-primary,
.standard-button-group .btn-primary,
.modal-footer .btn-primary { background: var(--wbp-blue) !important; border-color: var(--wbp-blue) !important; color: #fff !important; }
.btn-primary:hover,
.standard-button-group .btn-primary:hover,
.modal-footer .btn-primary:hover { background: var(--wbp-purple) !important; border-color: var(--wbp-purple) !important; }

/* ---------- Jackpot winners ticker ---------- */
.jackpot-winners { background: var(--wbp-gradient) !important; }
.jackpot-winners .jackpot-winner-title { color: #fff !important; }
.jackpot-winners .winners-ticker-container { background: #fff !important; border-radius: 4px; }
.winners-ticker ul li .winner-info { color: var(--wbp-text) !important; }
.winners-ticker ul li .winner-amount { color: var(--wbp-purple) !important; font-weight: bold; }

/* ---------- Download APK ---------- */
.download-apk-container { background-color: var(--wbp-surface) !important; background-blend-mode: soft-light; }
.download-apk, .download-apk h2, .download-apk h3 { color: var(--wbp-text) !important; }
.download-apk-section i { color: var(--wbp-purple) !important; }
.download-apk .btn { background: var(--wbp-gradient) !important; color: #fff !important; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--wbp-surface) !important;
    border-top: 3px solid var(--wbp-blue);
}
.footer-section-title,
.site-info .site-info-title h3 { color: var(--wbp-purple) !important; }
.footer-links > li > a { color: var(--wbp-text) !important; }
.footer-links > li > a:hover { color: var(--wbp-purple) !important; }
.footer-links > li + li > a { border-left-color: var(--wbp-border) !important; }
.footer-separator { border-top-color: var(--wbp-border) !important; }
.copyright,
.site-description,
.site-info .site-info-title p,
.site-info .site-info-description h4,
.site-info .site-info-description p { color: var(--wbp-muted) !important; }
.site-description h1, .site-description h2, .site-description h3 { color: var(--wbp-text) !important; }
.site-description p, .site-description a, .site-description div { color: var(--wbp-muted) !important; }
.site-description a:hover { color: var(--wbp-purple) !important; }
.site-info .site-info-title { border-bottom-color: var(--wbp-border) !important; }
.site-info-container:not(:last-child):after { background-color: var(--wbp-border) !important; }
.site-info .site-info-description.with-seperator + .with-seperator { border-top-color: var(--wbp-border) !important; }
.contact-list > li a { background: #fff !important; color: var(--wbp-text) !important; border: 1px solid var(--wbp-border); }
.contact-list > li a i { background: var(--wbp-gradient) !important; color: #fff !important; }
.provider-container { color: var(--wbp-muted) !important; border-color: var(--wbp-border) !important; }
.provider-container > h5 { background: var(--wbp-gradient) !important; color: #fff !important; }

/* ---------- Modal (login, lupa password, dll) ---------- */
.modal-content { background: #fff !important; color: var(--wbp-text) !important; border: 1px solid var(--wbp-border) !important; }
.modal-header { background: var(--wbp-gradient) !important; border-bottom-color: transparent !important; }
.modal-header .modal-title,
.modal-content h4,
.modal-header .close { color: #fff !important; }
.modal-body p, .modal-body span { color: var(--wbp-muted) !important; }
.modal-footer { border-top-color: var(--wbp-border) !important; }
.form-control { background: var(--wbp-surface) !important; border: 1px solid var(--wbp-border) !important; color: var(--wbp-text) !important; }
.form-control:focus { border-color: var(--wbp-blue) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; }
.standard-form-title { background: var(--wbp-gradient) !important; color: #fff !important; }
.standard-form-note { background: var(--wbp-surface-2) !important; color: var(--wbp-text) !important; }
.standard-form-note span, .standard-form-note strong { color: var(--wbp-purple) !important; }

/* ---------- Lain-lain ---------- */
[data-container-background="background-banner"],
[data-container-background="others"],
[data-container-background="promotions"] { background-color: var(--wbp-bg) !important; }
.nav-tabs > li > a { color: var(--wbp-text); }
.nav-tabs > li > a:hover { background-color: var(--wbp-purple); color: #fff; }
.floating-action-button .floating-action-button-item {
    background: var(--wbp-gradient) !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 4px 24px 0 rgba(124, 58, 237, .35) !important;
}
.ztip-holder { background: #fff !important; color: var(--wbp-text) !important; box-shadow: var(--wbp-shadow); }
.search-popup-container { background: rgba(255, 255, 255, .97) !important; color: var(--wbp-text) !important; }