/* =========================================================
   MBG366 SAFE FINAL THEME
   Fokus:
   - wallpaper tetap terlihat jelas
   - tidak ubah layout / width / height / flex / grid
   - warna seragam MBG366
   - selector dibuat sempit agar tidak merusak bagian lain
   ========================================================= */

:root {
  --mbg-wallpaper-desktop: url("https://supportmbg366.site/assets/img/mbg366-fifa-wallpaper-desktop.webp");
  --mbg-wallpaper-mobile: url("https://supportmbg366.site/assets/img/mbg366-fifa-wallpaper-mobile.webp");

  --mbg-blue: #00d9ff;
  --mbg-blue-soft: rgba(0, 217, 255, 0.55);
  --mbg-blue-glow: rgba(0, 217, 255, 0.20);

  --mbg-purple: #8d35ff;
  --mbg-purple-soft: rgba(141, 53, 255, 0.38);
  --mbg-purple-glow: rgba(141, 53, 255, 0.18);

  --mbg-pink: #ff38d4;
  --mbg-gold: #ffd966;

  --mbg-panel: rgba(0, 0, 0, 0.34);
  --mbg-panel-strong: rgba(0, 0, 0, 0.54);
  --mbg-text: #ffffff;
  --mbg-muted: rgba(255, 255, 255, 0.84);

  --mbg-radius: 10px;
  --mbg-radius-lg: 14px;
}

/* =========================================================
   1) WALLPAPER TETAP JELAS
   ========================================================= */

html,
body {
  margin: 0 !important;
  min-height: 100% !important;
  background-color: #000 !important;
  color: var(--mbg-text) !important;
  overflow-x: hidden !important;
}

body {
  background-image: var(--mbg-wallpaper-desktop) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

@media (max-width: 768px) {
  body {
    background-image: var(--mbg-wallpaper-mobile) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
}

/* wrapper dan container transparan, tanpa ubah layout */
.wrapper,
#content,
#maincontent,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
#maincontent > .container,
#content > .container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .container,
  #maincontent > .container,
  #content > .container {
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   2) RESET YANG AMAN
   ========================================================= */

img {
  opacity: 1 !important;
  filter: none !important;
  max-width: 100% !important;
}

a {
  color: #ffffff !important;
  text-decoration: none !important;
}

a:hover {
  color: #56ecff !important;
}

.text-dark,
.text-black,
.text-muted,
[class*="text-muted"] {
  color: var(--mbg-muted) !important;
}

/* =========================================================
   3) NAVBAR / MENUBAR / FOOTER
   ========================================================= */

nav.menubar,
nav.navbar,
.navbar,
.navbar-dark,
.bg-dark,
.fixed-bottom,
.mobile-navbar,
.bottom-nav,
.bottom-menu,
.footer,
.footer-menu {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.70) 0%,
      rgba(0, 72, 122, 0.46) 30%,
      rgba(38, 24, 110, 0.52) 65%,
      rgba(110, 17, 132, 0.48) 100%
    ) !important;
  border: 1px solid var(--mbg-blue-soft) !important;
  box-shadow:
    0 0 10px var(--mbg-blue-glow),
    0 0 16px var(--mbg-purple-glow) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

nav.menubar *,
nav.navbar *,
.navbar *,
.fixed-bottom *,
.mobile-navbar *,
.bottom-nav *,
.bottom-menu *,
.footer *,
.footer-menu * {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.90),
    0 0 4px rgba(0, 217, 255, 0.16) !important;
}

/* =========================================================
   4) MENU KATEGORI
   ========================================================= */

.menu,
.menu-list,
.category,
.category-menu,
.game-menu,
.nav-menu,
.quick-menu {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(8, 18, 48, 0.24) 100%
    ) !important;
  border: 1px solid rgba(0, 217, 255, 0.30) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.10) !important;
}

.menu *,
.menu-list *,
.category *,
.category-menu *,
.game-menu *,
.nav-menu *,
.quick-menu * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* =========================================================
   5) ANNOUNCEMENT
   ========================================================= */

#announcement,
.announcement-bar {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 83, 124, 0.30) 50%,
      rgba(87, 20, 122, 0.30) 100%
    ) !important;
  border: 1px solid rgba(0, 217, 255, 0.50) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.14) !important;
}

#announcement *,
.announcement-bar * {
  color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 217, 255, 0.12) !important;
}

/* =========================================================
   6) LOGIN AREA
   ========================================================= */

#row-login .card,
#row-login .card-body,
#quicklogin .card,
#quicklogin .card-body,
.login,
.login-form,
.login-box,
.member-login,
#login,
#loginForm {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.60) 100%
    ) !important;
  border: 1px solid rgba(0, 217, 255, 0.58) !important;
  border-radius: var(--mbg-radius-lg) !important;
  box-shadow:
    0 0 10px rgba(0, 217, 255, 0.20),
    0 0 14px rgba(141, 53, 255, 0.12) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  color: #ffffff !important;
}

form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

label,
.form-label {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92) !important;
}

input,
select,
textarea,
.form-control {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.66) 0%,
      rgba(8, 16, 36, 0.74) 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 217, 255, 0.66) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.45),
    0 0 6px rgba(0, 217, 255, 0.08) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  background: rgba(0, 0, 0, 0.82) !important;
  color: #ffffff !important;
  border-color: var(--mbg-blue) !important;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.34) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.74) !important;
}

button,
.btn,
a.btn,
input[type="submit"],
button[type="submit"],
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
  background:
    linear-gradient(
      135deg,
      var(--mbg-blue) 0%,
      #2e8dff 32%,
      var(--mbg-purple) 68%,
      var(--mbg-pink) 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9px !important;
  font-weight: 900 !important;
  box-shadow:
    0 0 8px rgba(0, 217, 255, 0.18),
    0 0 12px rgba(141, 53, 255, 0.12) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88) !important;
}

/* =========================================================
   7) JUDUL SECTION
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.90),
    0 0 6px rgba(0, 217, 255, 0.16) !important;
}

/* =========================================================
   8) ROW TOGEL - TIDAK UBAH UKURAN, HANYA TEMA
   ========================================================= */

#row-togel,
#carousel-togel,
#carousel-togel .owl-stage-outer,
#carousel-togel .owl-stage {
  background: transparent !important;
}

#row-togel .owl-item > div,
#row-togel .owl-item .card,
#row-togel .owl-item .card-body,
#row-togel .owl-item .item {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(10, 18, 35, 0.80) 100%
    ) !important;
  border: 1px solid rgba(0, 217, 255, 0.80) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 10px rgba(0, 217, 255, 0.24),
    inset 0 0 8px rgba(0, 217, 255, 0.06) !important;
  overflow: hidden !important;
}

#row-togel .owl-item *,
#row-togel .owl-item .card *,
#row-togel .owl-item .item * {
  color: #ffffff !important;
  background: transparent !important;
}

#row-togel .number,
#row-togel [class*="number"],
#row-togel [class*="result"],
#row-togel strong,
#row-togel b {
  color: var(--mbg-blue-2) !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 6px rgba(0, 217, 255, 0.92),
    0 0 10px rgba(0, 217, 255, 0.32) !important;
}

#row-togel small,
#row-togel .time,
#row-togel [class*="time"],
#row-togel [class*="clock"] {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* =========================================================
   9) SEARCH BAR
   ========================================================= */

input[type="search"],
.search-box input,
.search-game input,
input[placeholder*="cari"],
input[placeholder*="Cari"] {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(7, 14, 34, 0.74) 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 217, 255, 0.68) !important;
  border-radius: 9px !important;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.10) !important;
}

.search-box button,
.search-game button,
button.search-btn,
[class*="search"] button {
  background:
    linear-gradient(
      135deg,
      var(--mbg-blue) 0%,
      var(--mbg-purple) 68%,
      var(--mbg-pink) 100%
    ) !important;
  border-radius: 9px !important;
}

/* =========================================================
   10) GRID GAME / POPULER / SLOT / CASINO / TERBARU
   Hanya border + background. Tidak sentuh ukuran item.
   ========================================================= */

.row.g-1 > * > a,
.row.g-1 > * .card,
.row.g-1 > * .game-item,
.row.g-1 > * .provider-item,
.row.g-1 > * .slot-item,
.row.g-1 > * .popular-item {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.14) 0%,
      rgba(0, 0, 0, 0.28) 100%
    ) !important;
  border: 1px solid rgba(141, 53, 255, 0.50) !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 8px rgba(141, 53, 255, 0.16),
    0 0 10px rgba(0, 217, 255, 0.06) !important;
  overflow: hidden !important;
}

.row.g-1 img {
  display: block !important;
  border-radius: 9px !important;
}

/* =========================================================
   11) PROVIDER GRID
   ========================================================= */

.provider-list .card,
.provider-list a,
[class*="provider"] .card,
[class*="provider"] a {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.48) 100%
    ) !important;
  border: 1px solid rgba(0, 217, 255, 0.44) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.12) !important;
}

/* =========================================================
   12) PANEL INFO / LONGTAIL
   ========================================================= */

#longtail-content,
.glassmorphism,
.article,
.artikel,
.news,
.news-list {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.52) 100%
    ) !important;
  border: 1px solid rgba(0, 217, 255, 0.40) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 8px rgba(0, 217, 255, 0.12),
    0 0 10px rgba(141, 53, 255, 0.08) !important;
}

#longtail-content p,
.glassmorphism p,
.article p,
.artikel p,
.news p,
#longtail-content li,
.glassmorphism li,
.article li,
.artikel li,
.news li {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* =========================================================
   13) LIVE CHAT
   ========================================================= */

.chat,
.livechat,
.live-chat,
#livechat,
[class*="chat"] {
  z-index: 2147483000 !important;
}