/*
 * theme-dark-blue.css
 * Shifts the entire site from dark-green to dark-blue palette.
 * Loaded AFTER style.css / style-m.css so every declaration here wins.
 *
 * Strategy:
 *   1. Override CSS variables in :root  → covers all var(--based), var(--bg) etc.
 *   2. Override hard-coded green hex values by repeating the original selectors
 *      with the blue replacement color.
 *
 * Green → Blue mapping:
 *   #0a180a  (very dark green body bg)  → #050d1a  (very dark navy)
 *   #b7e74a  (lime green primary)       → #3d9de8  (bright blue)
 *   #3d792e  (dark green box/card)      → #0f2a5a  (dark navy card)
 *   #06a351 / #04a351  (mid green)      → #1b6fd4  (medium blue)
 *   #1a3b1c  (dark green menu/footer)   → #071126  (dark navy menu)
 *   #00371a  (very dark green)          → #071126
 *   #064d28  (dark forest green)        → #0a1e3d
 *   #1da0cb  (blue-teal accent, keep)   → #2d8cef  (brighter blue)
 *   #105a72  (dark teal)                → #1a4a90  (navy blue)
 *   #177d9e  (teal hover)               → #2060b8
 *   #171342  (dark purple nav)          → #0a1e3d
 *   #301d6e / #251e6a  (purple)         → #0d2650
 */

/* =============================================================
   1. CSS VARIABLE OVERRIDES
   ============================================================= */
:root {
  --bg:             #050d1a;   /* was #0a180a dark green */
  --based:          #3d9de8;   /* was #b7e74a lime-green  */
  --based-light:    #79bdf0;   /* derived: lighter blue   */
  --based-dark:     #2460a0;   /* derived: darker blue    */
  --based-accent:   #40a8f0;   /* derived: accent blue    */
  --box-bg:         #0f2a5a;   /* was #3d792e dark-green  */
  --box-border:     #3d9de8;   /* was #b7e74a lime-green  */
  --inner-box:      #07111f;   /* was #101010 near-black  */
  --primary-text:   #3d9de8;   /* was #b7e74aff           */
  --slider:         #1b6fd4;   /* was #06a351 green       */
  --btn-more-game:  #1b6fd4;   /* was #06a351 green       */
  --btn-login:      #3d9de8;   /* was --based             */
  --btn-register:   #0f2a5a;   /* was --box-bg            */
  --promotion-bg:   #3d9de8;   /* was #b7e74a             */
  --menu-bg:        #071126;   /* was #1a3b1c             */
  --footer-bg:      #071126;   /* was #1a3b1c             */
  --depo-box:       #0f2a5a;   /* was #3d792e             */
  --payment-box:    #3d9de8;   /* was #b7e74a             */
  --anouncement-icon: #2d8cef; /* was #009e6d             */
}

/* =============================================================
   2. BODY & PAGE STRUCTURE
   ============================================================= */
body {
  background-color: #050d1a !important;
}

/* =============================================================
   3. HEADER & TOP NAV
   ============================================================= */
.header-menu {
  background-color: #071126 !important;
}
/* Nav link text — force bright white so it's readable on dark navy */
.header-menu ul li a {
  color: #e8f4ff !important;
}
.header-menu ul li a p,
.header-menu ul li > a > span {
  color: #e8f4ff !important;
}
.header-menu ul li:hover a,
.header-menu ul li:hover a p {
  color: #3d9de8 !important;
}
.header-menu ul li.active a,
.header-menu ul li.active a p {
  color: #ffffff !important;
}
.header-menu ul li.active,
.header-menu ul li:hover {
  background-color: #0f2a5a !important;
}
.header-menu ul li.active {
  border-bottom-color: #3d9de8 !important;
}
.header-menu ul li .dropdown-menu__detail-list span {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
  color: #fff !important;
}
/* Dropdown balance header row */
.header-mdl__login-account ul li .dropdown-balance ul li:first-child {
  background: #1b6fd4 !important;
}
/* QR sidebar box */
.sidebar__qr-box {
  background-image: -webkit-linear-gradient(top, #1b6fd4 50%, #0f3a80 100%) !important;
  background-color: #1b6fd4 !important;
  box-shadow: 0 0 5px 0 #0f3a80 !important;
}
.sidebar__qr-box .icon-close {
  background-color: #0f3a80 !important;
}
.sidebar__qr-box .text-title {
  background: #0f3a80 !important;
}

/* =============================================================
   4. FOOTER
   ============================================================= */
footer .social-logo li a:focus,
footer .social-logo li a:hover {
  color: #3d9de8 !important;
}
footer .nav-bottom li a:focus,
footer .nav-bottom li a:hover {
  color: #3d9de8 !important;
}

/* =============================================================
   5. BUTTONS  (yellow/green → blue)
   ============================================================= */
.button--yellow,
.modal-forgot__dialog-body form .button--submit,
.modal-login__dialog-body form .button--register,
.modal-signup__dialog-body form .button--register {
  background-color: #3d9de8 !important;
  border-color:     #3d9de8 !important;
  color: #fff !important;
}
.button--yellow:hover,
.modal-forgot__dialog-body form .button--submit:hover,
.modal-login__dialog-body form .button--register:hover,
.modal-signup__dialog-body form .button--register:hover {
  background-color: #2d8cef !important;
  border-color:     #2d8cef !important;
  opacity: 1 !important;
}
.button--blue {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
}
.button--blue:hover {
  background-color: #1a60bf !important;
  border-color:     #1758b0 !important;
}
/* CTA play / matches footer button */
.matches__detail-footer .button-cta {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
  color: #fff !important;
}
.featured__detail-content .content-box__img .cta-play .button-play,
.featured__detail-content .content-box__img .cta-play .button-play2 {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
}
/* Game item buttons */
.home-games > .game-items > .box > .box-item button {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
  color: #fff !important;
}
/* Payment method button */
.payment-method .box-item .button-pay {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
  color: #fff !important;
}

/* =============================================================
   6. DEPOSIT / PAYMENT TABS & ACTIVE STATES
   ============================================================= */
.depo-select li.active {
  background-color: #0f2a5a !important;
  border-bottom-color: #3d9de8 !important;
}
.row-list-metode .btn-img.active {
  border-color: #3d9de8 !important;
  background-color: #0f2a5a !important;
}

/* =============================================================
   7. SIDEBAR / MOBILE MENU (g8m)
   ============================================================= */
.g8-bal .bbl-0 {
  background-color: #1b6fd4 !important;
}
.g8sggl .g8sggl-t,
.g8sggl .searchbar input {
  background-color: #0f2a5a !important;
  border-color:     #3d9de8 !important;
}
.g8sggl .g8sggl-c .ll .ii.aaa,
.g8sggl .g8sggl-c .ll .ii:hover,
.g8sggl .g8sggl-tarr {
  background-color: #1b6fd4 !important;
}
.g8sggl .glbox .gl .gltext,
.g8sggl .glbox .gl .hwrap .hbox .main {
  color: #3d9de8 !important;
}

/* =============================================================
   8. NAVIGATION ACTIVE / HOVER
   ============================================================= */
.info__left ul li.active,
.profile__nav ul li.active {
  background-color: #0f2a5a !important;
  border-left-color: #3d9de8 !important;
  color: #3d9de8 !important;
}

/* =============================================================
   9. MATCHES / SPORTS WIDGET
   ============================================================= */
.matches__top {
  background: linear-gradient(-207deg, #0a1e3d 50%, #1a4a90) !important;
}
.matches__pagination {
  background: #0d2650 !important;
}
.matches__detail-versus .club-detail__score-point,
.matches__top-close i {
  background-color: #1b6fd4 !important;
  color: #fff !important;
}

/* =============================================================
   10. FEATURED SECTION
   ============================================================= */
.featured__detail-title::after {
  background-color: #3d9de8 !important;
}
.featured__detail-content .content-box__text,
.featured__detail-content .content-box__title,
.featured__detail-content .content-box__text p,
.featured__detail-content .content-box__title p {
  color: #3d9de8 !important;
}

/* =============================================================
   11. MISSIONS (existing mission.css uses green tones)
   ============================================================= */
.miswrap .misbox .mishead {
  background-color: #071126 !important;
  border-bottom-color: #3d9de8 !important;
}
.miswrap .misbox .misbody,
.miswrap .misbox .misbody .mislist {
  background-color: #050d1a !important;
}
.miswrap .misbox .misbody .mislist .r span.btn-done {
  background-color: #1b6fd4 !important;
  border-color:     #1b6fd4 !important;
}
.miswrap .misbox .misbody .mislist .r a:hover {
  background-color: #2d8cef !important;
}
.miswrap .misbox .misbody .mislist.done .r a {
  background-color: #0f2a5a !important;
  color: #3d9de8 !important;
}
.mlwrap .mlbox .mlhead,
.mlwrap .mlbox .mlbody {
  background-color: #071126 !important;
}
.mlwrap .mlbox .mlbody .subbtn:hover {
  background-color: #2d8cef !important;
}

/* =============================================================
   12. SERVICES / MEMBER SERVICE
   ============================================================= */
.services .box .member-service a {
  background-color: #1b6fd4 !important;
  color: #fff !important;
}
.services .box-item .deposit-withdraw .card .circle-wrp {
  background-color: #071126 !important;
}

/* =============================================================
   13. REGISTER / DEPOSIT SUCCESS PAGES
   ============================================================= */
.register-success-body {
  background-color: #050d1a !important;
}
.register-success-body .header-title,
.deposit-success-body .header-title {
  background-color: #1b6fd4 !important;
  color: #fff !important;
}
.register-success-body .content-2,
.deposit-success-body .content-2 {
  background-color: #0a1e3d !important;
}
.register-success-body .content-2 hr,
.deposit-success-body .content-2 hr {
  border-color: #1b6fd4 !important;
}
.register-success-body .content-2 a,
.deposit-success-body .content-2 a {
  color: #3d9de8 !important;
}
.register-success-body .content-2 .wrapper-bottom .row-payment .card-payment,
.deposit-success-body .content-2 .wrapper-bottom .row-payment .card-payment {
  border-color: #1b6fd4 !important;
}

/* =============================================================
   14. KYC SECTION
   ============================================================= */
.kyc-section .header-section .kyc-title,
.kyc-section .kyc-notice,
.kyc-section .form-kyc .f-row .f-icon,
.kyc-section .form-kyc .f-row .f-field.otp-field > p,
.kyc-section .tnc-kyc {
  background-color: #1b6fd4 !important;
  color: #fff !important;
}

/* =============================================================
   15. DL-BB NAVIGATION
   ============================================================= */
.dl-bb a {
  color: #3d9de8 !important;
}

/* =============================================================
   16. MARQUEE / ANNOUNCEMENTS
   ============================================================= */
.slider .marquee {
  background: rgba(10, 30, 61, 0.6) !important;
}

/* =============================================================
   17. TEAL → DEEP BLUE (existing teal accents)
   ============================================================= */
/* Sidebar QR gradient already handled above */
/* Blue buttons already handled above */
/* Remaining teal → pure blue upgrade */
a { color: #3d9de8; }
a:hover { color: #79bdf0; }

/* =============================================================
   18. PURPLE PANELS → DARK NAVY
   ============================================================= */
/* Dropdown panels */
.header-mdl__login-account ul li .dropdown,
.header-mdl__login-account ul li .dropdown-balance {
  background-color: #0a1e3d !important;
}
.header-mdl__login-account ul li .dropdown ul li a,
.header-mdl__login-account ul li .dropdown-balance ul li {
  background: #0d2650 !important;
  border-color: #1a3a6b !important;
  color: #c2d4ec !important;
}
/* Override purple text inside dropdown spans */
.header-mdl__login-account ul li .dropdown ul li a span,
.header-mdl__login-account ul li .dropdown-balance ul li span {
  color: #c2d4ec !important;
}
.header-mdl__login-account ul li .dropdown ul li a:hover,
.header-mdl__login-account ul li .dropdown-balance ul li a:hover {
  background: #1b6fd4 !important;
  color: #fff !important;
}
/* Login button — white text on blue */
.header-mdl__login-form .button--login {
  color: #fff !important;
}
/* Username balance display text */
.header-mdl__login-account ul li:first-child span {
  color: #3d9de8 !important;
}

/* =============================================================
   19. PROGRESSIVE JACKPOT — shift green neon frame → blue
   ============================================================= */
/*
 * The jackpot widget uses a baked-in green neon background image.
 * We can't recolor an image directly, but CSS filter hue-rotate()
 * shifts the whole element's color wheel.
 *
 * Green sits at ~120° on the hue wheel; rotating +120° pushes it
 * to ~240° (blue/cyan). We rotate the parent (image + text together),
 * then counter-rotate the text container so the IDR / number colours
 * stay correct (they pick up var(--primary-text) = #3d9de8).
 */
.progressive-jackpot {
  filter: hue-rotate(120deg) saturate(1.15) brightness(1.05) !important;
}
/* Counter-rotate text-only container so it reads as pure blue, not cyan */
.progressive-jackpot .jackpot-container {
  filter: hue-rotate(-120deg) !important;
}
/* Also shift the separate "PROGRESSIVE JACKPOT" text image above the widget */
.progressive-jackpot-text-wrapper {
  filter: hue-rotate(120deg) saturate(1.15) brightness(1.05) !important;
}

/* =============================================================
   20. SCROLLBAR (webkit) — match dark blue theme
   ============================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #050d1a; }
::-webkit-scrollbar-thumb { background: #1b6fd4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3d9de8; }

/* =============================================================
   20. FORM INPUTS — keep readable on dark blue
   ============================================================= */
.form-control:focus {
  border-color: #3d9de8 !important;
  box-shadow: 0 0 0 2px rgba(61, 157, 232, 0.25) !important;
}

/* =============================================================
   21. BADGE — Otomatis / green tags → blue
   ============================================================= */
.badge-description.bg-green,
.badge-description.bg-green.fly {
  background-color: #1b6fd4 !important;
  color: #fff !important;
}