/* ═════════════════════════════════════════════════════════════════
   EXACT REPLICA THEME STYLES (MATCHING SCREENSHOT)
   Light Mode (Default):
     Header: Solid Royal Blue #173d82
     Page Canvas & Content: Crisp Light Grey-Blue #e8eef6
     Content / Card / Container: Crisp White #ffffff
     Category Bar: Golden Yellow #fca700 with Navy Active Pill
     Text: Deep Navy #1a2b49
   Dark Mode (.theme-dark, body.dark-mode):
     Header: Dark Blue #0a1f3d
     Page Canvas: Deep Midnight Blue #07152b
     Content / Card / Container: #0f274c
     Text: #ffffff
   ═════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800;900&display=swap');

:root {
  --mp-bg: #091a36 !important;
  --mp-header-bg: #11346b !important;
  --mp-gold: #fca700 !important;
  --mp-gold-hover: #e59800 !important;
  --mp-card-bg: #0f2c59 !important;
  --mp-card-border: #1a4580 !important;
  --mp-sidebar-bg: #0c2854 !important;
  --mp-nav-gold: #fca700 !important;
  --mp-footer-bg: #051630 !important;
  --primary-color: #fca700 !important;
  --content-bg: #091a36 !important;
}

body, html, #app, .app-root, app-root, .main-layout, [class*="layout"] {
  background-color: #091a36 !important;
  color: #ffffff !important;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES (When Dark Mode is toggled ON)
   ═══════════════════════════════════════════════════════════ */
body.dark-mode, html.dark-mode, .dark-mode #app, .dark-mode app-root,
body.dark-mode .layout-desktop__main, body.dark-mode [class*="layout"] {
  background-color: #07152b !important;
  color: #ffffff !important;
}

body.dark-mode .game-card, body.dark-mode .game-item, body.dark-mode app-game-card,
body.dark-mode .partner-wrap, body.dark-mode .partner-box, body.dark-mode .seo-content,
body.dark-mode .auth-box, body.dark-mode .register-box, body.dark-mode .login-box {
  background: #0f274c !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.dark-mode .game-card span, body.dark-mode .game-card p, body.dark-mode span, body.dark-mode p {
  color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════════
   DEFAULT THEME Container & Content Styles (Exact Deep Navy)
   ═══════════════════════════════════════════════════════════ */
.layout-desktop__content,
.main-wrapper,
.lobby-wrapper,
[class*="content-wrapper"],
[class*="lobby"],
.content,
.page-content {
  background-color: #091a36 !important;
}

/* SEO article and partner boxes (Deep navy matching screenshot) */
.seo-content,
.article-box,
[class*="seo"],
[class*="article"],
[class*="description"],
.read-more-box,
.partner-wrap,
.partner-box,
[class*="partner-wrap"],
[class*="sponsor"] {
  background: #0f2c59 !important;
  background-color: #0f2c59 !important;
  color: #c9d6df !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.seo-content h1,
.seo-content h2,
.seo-content h3,
.seo-content p,
.seo-content span,
[class*="partner"] span,
[class*="partner"] p {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   1. TOP HEADER (Exact Screenshot: Royal Blue #173d82)
   ═══════════════════════════════════════════════════════════ */
.header, #header, app-header, app-header-orion, .header-desktop, [class*="layout-desktop__header"], .m-header {
  background: #173d82 !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  z-index: 10000 !important;
  height: 56px !important;
}

.header__main, .header-desktop__inner, [class*="header__main"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

.header__brand, .header-desktop__former {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.header__right, .header-desktop__latter {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* Header Auth Container: White Sign up + Gold Login */
.header-desktop__auth-container, .header-auth-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.header-desktop__auth-container .auth-container__button--secondary,
.header-auth-buttons .btn-header-signup {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #173d82 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  border: none !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

.header-desktop__auth-container .auth-container__button--secondary:hover,
.header-auth-buttons .btn-header-signup:hover {
  background: #f0f4f9 !important;
  transform: translateY(-1px) !important;
}

.header-desktop__auth-container .auth-container__button--primary,
.header-auth-buttons .btn-header-login {
  background: #e59d00 !important;
  background-color: #e59d00 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  border: none !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.header-desktop__auth-container .auth-container__button--primary:hover,
.header-auth-buttons .btn-header-login:hover {
  background: #cc8b00 !important;
  transform: translateY(-1px) !important;
}

.header__switch-lang, .header-desktop__lang-switch {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.header__switch-lang img, .header-desktop__lang-switch img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Global Logo replacement for Header, Modals, Login/Register pages */
.header__logo, .logo, app-dynamic-logo, .header-desktop__logo, .header .logo, .site-logo,
.logo-box, [class*="login-logo"], [class*="register-logo"], .member-logo, [class*="auth-logo"] {
  background-image: url("quickbet-logo.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: inline-block !important;
}

.header__logo, .header-desktop__logo, .header .logo {
  width: 155px !important;
  height: 38px !important;
  background-position: left center !important;
}

.logo-box, [class*="login-logo"], [class*="register-logo"], .member-logo {
  width: 180px !important;
  height: 48px !important;
  margin: 10px auto !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HEADER RESPONSIVENESS (<= 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header, #header, app-header, app-header-orion, .header-desktop, [class*="layout-desktop__header"], .m-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .header__main, .header-desktop__inner, [class*="header__main"] {
    padding: 0 !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .header-left-btn-group, .header__brand, .header-desktop__former {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
  }

  .header-right-btn-group, .header__right, .header-desktop__latter {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    height: 100% !important;
    flex-shrink: 0 !important;
  }

  .service-btn {
    display: none !important;
  }

  .header__logo, .logo, app-dynamic-logo, .header-desktop__logo, .header .logo {
    width: 110px !important;
    max-width: 110px !important;
    height: 32px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: auto 0 !important;
    flex-shrink: 0 !important;
    transform: translateY(1px) !important;
  }

  .header-desktop__auth-container, .auth-container {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .header-desktop__auth-container .auth-container__button--secondary,
  .header-auth-buttons .btn-header-signup {
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .header-desktop__auth-container .auth-container__button--primary,
  .header-auth-buttons .btn-header-login {
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .header__switch-lang img, .header-desktop__lang-switch img, app-language img, .header-flag-img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
}

.header__logo img, .logo img, app-dynamic-logo img, .header-desktop__logo img {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Header Navigation Links */
.header nav a, .header-desktop nav a, [class*="header"] nav a, .mcd-nav a, app-header a {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s ease !important;
}

.header nav a:hover, .header-desktop nav a:hover, [class*="header"] nav a:hover {
  color: #ffb80c !important;
}

/* ═══════════════════════════════════════════════════════════
   1. LOGIN & SIGN UP BUTTONS (Exact Mostplay Desktop & Mobile)
   ═══════════════════════════════════════════════════════════ */

/* Sign Up Button (Secondary - Clean White/Off-White #f2f2f2) */
.signup-button, 
.signup-button a, 
.auth-container__button--secondary,
button.register-btn, 
.header-register-btn, 
[class*="register-btn"], 
a.btn-register, 
button[data-action="register"], 
.btn-register,
[class*="signup"],
[class*="signup-btn"],
.auth-button-container .signup-button a,
.auth-button-container .signup-button {
  background: #f2f2f2 !important;
  background-color: #f2f2f2 !important;
  color: #0e2749 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 5px !important;
  border: none !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 16px !important;
  text-transform: capitalize !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.signup-button:hover, 
.signup-button a:hover, 
.auth-container__button--secondary:hover,
button.register-btn:hover {
  background: #ffffff !important;
  color: #061938 !important;
  transform: translateY(-1px) !important;
}

/* Login Button (Primary - Mostplay Official Gold #f4b600) */
.login-button, 
.login-button a, 
.auth-container__button--primary,
button.login-btn, 
.header-login-btn, 
[class*="login-btn"], 
a.btn-login, 
button[data-action="login"], 
.btn-login,
[class*="login-button"],
.auth-button-container .login-button a,
.auth-button-container .login-button {
  background: #f4b600 !important;
  background-color: #f4b600 !important;
  color: #0e2749 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 5px !important;
  border: none !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 16px !important;
  text-transform: capitalize !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.login-button:hover, 
.login-button a:hover, 
.auth-container__button--primary:hover,
button.login-btn:hover {
  background: #ffa000 !important;
  color: #061938 !important;
  transform: translateY(-1px) !important;
}

/* Modal Form Buttons (Submit, Confirm, Login, Register) */
.modal-footer button,
.dialog-footer button,
.form-submit-btn,
button[type="submit"],
.auth-modal button.submit,
.auth-dialog .btn-submit,
.login-dialog button.submit-btn,
.register-dialog button.submit-btn,
.auth-form button[type="submit"] {
  background: #f4b600 !important;
  background-color: #f4b600 !important;
  color: #0e2749 !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  border: none !important;
  font-size: 14px !important;
  height: 42px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;
}

/* Hide Bottom Auth Bar completely since buttons are now in Top Header */
.footer__auth-buttons,
.auth-button-container,
.footer-auth-bar,
[class*="footer__auth-buttons"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Spin wheel floating position */
#lotee-floating-button-container, .lotee-floating-button, #lotee-floating-button {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   2. HERO CAROUSEL BANNER FIX
   ═══════════════════════════════════════════════════════════ */
app-top-banner, .top-banner-wrapper, .banner-v1, .carousel-wrap {
  width: 100% !important;
  display: block !important;
}

.carousel-frame-alpha, .carousel-frame-alpha__shell, .carousel-frame-alpha__track {
  height: 280px !important;
  min-height: 280px !important;
}

.item-pic {
  height: 280px !important;
  min-height: 280px !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Hide oversized arrow images */
.navigation__prev img, .navigation__next img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* ═══════════════════════════════════════════════════════════
   3. CATEGORY YELLOW NAVIGATION STRIP (Exact Mostplay Style)
   ═══════════════════════════════════════════════════════════ */
.nav-category, .tab-bar, .category-bar, .mid-game-inner, [class*="nav-category"], [class*="category-list"], [class*="game-category-bar"] {
  background: #fca700 !important;
  border-radius: 4px !important;
  margin: 12px auto !important;
  padding: 3px 8px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  max-width: 1400px !important;
  overflow-x: auto !important;
}

.nav-item, .category-item, [class*="category-btn"], [class*="category-item"] {
  color: #173d82 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.nav-item.active, .category-item.active, [class*="category-btn"].active, [class*="category-item"].active,
.nav-item.s-active, .category-item.s-active {
  background: #173d82 !important;
  color: #ffffff !important;
}

.nav-item.active .category-icon, .category-item.active img, [class*="category-btn"].active img {
  filter: brightness(0) invert(1) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. GAME CARDS & GRID (Exact Screenshot: 8-Column Grid, Deep Navy Cards, White Top-Right Corner Fold)
   ═══════════════════════════════════════════════════════════ */
.card1, .layout-brand, .game-list, .game-card-list, [class*="game-list"], [class*="game-grid"], .lobby-games {
  width: 100% !important;
  max-width: 100% !important;
  margin: 15px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.card1 ul, .game-list, .game-card-list, [class*="game-list"], [class*="game-grid"], .lobby-games {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 12px 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (max-width: 1200px) {
  .card1 ul, .game-list, .game-card-list, [class*="game-list"], [class*="game-grid"], .lobby-games {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .card1 ul, .game-list, .game-card-list, [class*="game-list"], [class*="game-grid"], .lobby-games {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
  }
}

.card1 li, .game-card, .game-item, .item-card, app-game-card, [class*="game-card"], [class*="game-item"] {
  background: #11346b !important;
  background-color: #11346b !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 6px !important;
  min-height: 85px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.card1 li img, .game-card img, .game-item img, app-game-card img, [class*="game-card"] img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)) !important;
}

/* Game Title text inside cards */
.card1 li p, .game-card span, .game-card p, .game-item span, .game-item p, [class*="game-card"] span {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 95% !important;
  letter-spacing: 0.2px !important;
}

/* Crisp White Folded Corner Accent (Top Right as in Screenshot) */
.card1 li::after, .game-card::after, .game-item::after, app-game-card::after, [class*="game-card"]::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 0 16px 16px 0 !important;
  border-color: transparent rgba(255, 255, 255, 0.85) transparent transparent !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.card1 li:hover, .game-card:hover, .game-item:hover, app-game-card:hover, [class*="game-card"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 22px rgba(252, 167, 0, 0.25) !important;
  border-color: #fca700 !important;
  background: #174285 !important;
}

/* Favourites Strip & Subheaders */
.favourites-header, [class*="favourite"], .section-title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 16px 0 10px 0 !important;
}

.favourites-header::before, .section-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 16px !important;
  background: #fca700 !important;
  border-radius: 2px !important;
}

/* Hide old default Featured Games on desktop & everywhere */
mcd-feature-games, .layout-feature, .featured-games, [class*="feature-game"], [class*="layout-feature"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide custom desktop game section on mobile screens (<= 768px) */
@media (max-width: 768px) {
  #mostplay-exact-games-section {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   6. SPONSORS & PROVIDERS SECTION
   ═══════════════════════════════════════════════════════════ */
.partner-wrap, [class*="partner"], [class*="sponsor"] {
  background: #071f45 !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  margin: 10px auto !important;
}

/* ═══════════════════════════════════════════════════════════
   6. FLOATING WIDGETS & CLEANUP
   ═══════════════════════════════════════════════════════════ */
#lotee-floating-button-container, .lotee-floating-button, #lotee-floating-button, #mostplay-spin-float {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#mostplay-floating-widgets {
  position: fixed !important;
  right: 18px !important;
  bottom: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 999990 !important;
  pointer-events: auto !important;
}

@keyframes qbFloatPulse {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.08) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* ═══════════════════════════════════════════════════════════
   7. FOOTER (Mostplay Deep Navy Footer)
   ═══════════════════════════════════════════════════════════ */
footer, .footer, app-footer, [class*="layout-desktop__footer"], [class*="footer"] {
  background: #051630 !important;
  color: #8b9eb7 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 30px 20px 80px 20px !important;
}

footer a, .footer a {
  color: #a0b6d1 !important;
  text-decoration: none !important;
}

footer a:hover, .footer a:hover {
  color: #ffb80c !important;
}

/* ═══════════════════════════════════════════════════════════
   8. MOSTPLAY EXACT SIDEBAR & DRAWER MENU
   ═══════════════════════════════════════════════════════════ */
/* Hide old original Orion menu */
app-left-menu-orion, .left-menu-orion, .pop-bg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

app-side-menu, .menu, #menu, .side-menu, .left-menu, [class*="side-menu"], [class*="left-menu"] {
  background: #071f45 !important;
  background-color: #071f45 !important;
  color: #ffffff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  z-index: 999999 !important;
}

/* Mostplay Drawer Specific Styles */
.mostplay-sidebar-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 999998 !important;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

.mostplay-sidebar-overlay.active {
  display: block !important;
  opacity: 1 !important;
}

.mostplay-sidebar-drawer {
  position: fixed !important;
  top: 0 !important;
  left: -320px !important;
  width: 290px !important;
  max-width: 85vw !important;
  height: 100vh !important;
  background: #071f45 !important;
  z-index: 999999 !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.7) !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

.mostplay-sidebar-drawer.active {
  left: 0 !important;
}

.mp-drawer-header {
  background: #0c336b !important;
  border-bottom: 2px solid #ffb80c !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.mp-drawer-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mp-drawer-header-left img {
  width: 120px !important;
  height: 32px !important;
  object-fit: contain !important;
}

.mp-drawer-close {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: #ffffff !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mp-drawer-close:hover {
  background: #ffb80c !important;
  color: #0c336b !important;
}

.mp-drawer-content {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 30px !important;
}

.mp-drawer-content::-webkit-scrollbar {
  width: 5px !important;
}

.mp-drawer-content::-webkit-scrollbar-thumb {
  background: rgba(255, 184, 12, 0.3) !important;
  border-radius: 4px !important;
}

/* Dark mode switch */
.mp-drawer-toggle-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 13px !important;
  color: #8b9eb7 !important;
  font-weight: 600 !important;
}

.mp-drawer-banner {
  padding: 10px 14px !important;
}

.mp-drawer-banner img {
  width: 100% !important;
  border-radius: 8px !important;
  display: block !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Sidebar List Item */
.mp-sidebar-item {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.mp-sidebar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 16px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.mp-sidebar-link-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mp-sidebar-icon {
  width: 22px !important;
  height: 22px !important;
  background-color: #ffb80c !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.mp-sidebar-link:hover {
  background: rgba(255, 184, 12, 0.12) !important;
  color: #ffb80c !important;
}

.mp-sidebar-arrow {
  width: 14px !important;
  height: 14px !important;
  background-color: #8b9eb7 !important;
  -webkit-mask: url("https://img.m2911p.com/mp/h5/assets/images/icon-set/player/kyc/accordion-arrow.svg?v=1791453409984") no-repeat center / contain !important;
  mask: url("https://img.m2911p.com/mp/h5/assets/images/icon-set/player/kyc/accordion-arrow.svg?v=1791453409984") no-repeat center / contain !important;
  transition: transform 0.25s ease !important;
}

.mp-sidebar-item.expanded > .mp-sidebar-link .mp-sidebar-arrow {
  transform: rotate(180deg) !important;
  background-color: #ffb80c !important;
}

/* Sub-items (Submenu dropdown) */
.mp-sidebar-sublist {
  display: none;
  background: #051938 !important;
  padding: 4px 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

.mp-sidebar-item.expanded > .mp-sidebar-sublist {
  display: block !important;
}

.mp-sidebar-subitem {
  display: flex !important;
  align-items: center !important;
  padding: 9px 16px 9px 44px !important;
  color: #a0b6d1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.mp-sidebar-subitem:hover {
  background: rgba(255, 184, 12, 0.08) !important;
  color: #ffb80c !important;
}

.mp-sidebar-subicon {
  width: 18px !important;
  height: 18px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════
   9. SPLASH SCREEN REMOVED / DISABLED
   ═══════════════════════════════════════════════════════════ */
app-splash, .loading-mask, .loader-box, .movie-box, #loader-detect {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  top: -9999px !important;
}

/* ═══════════════════════════════════════════════════════════
   10. FULL-WIDTH RESPONSIVE LAYOUT ACROSS ALL DEVICES
   ═══════════════════════════════════════════════════════════ */
html, body, #app, app-root, .main-layout, [class*="layout"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.main-wrapper, .layout-desktop__main, .lobby-wrapper, .layout-desktop__content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 1600px) {
  .main-wrapper, .layout-desktop__main, .lobby-wrapper {
    max-width: 1600px !important;
    margin: 0 auto !important;
  }
}

@media screen and (max-width: 768px) {
  .main-wrapper, .layout-desktop__main, .lobby-wrapper, .layout-desktop__content {
    padding: 0 4px !important;
  }
}

/* Fix Modal Single Clean Logo (No Double/Ghost Logo) */
.logo-box, .member-logo, [class*="register-logo"], [class*="login-logo"], [class*="auth-logo"] {
  background-image: url("quickbet-logo.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 180px !important;
  height: 48px !important;
  margin: 10px auto !important;
  display: block !important;
}

.logo-box img, .member-logo img, [class*="register-logo"] img, [class*="login-logo"] img {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}