/* === SOLID BACKGROUND (VBET dark navy) === */
body {
  background: #0f1323 !important;   /* VBET-like solid color */
  background-image: none !important; /* kill any images */
}

/* === CONTAINERS: LET THE BODY COLOR SHOW THROUGH === */
/* (removed `body` from this list so it keeps the solid color) */
html,
.theme-white,
.main-wrapper,
.app-container,
#root,
.page-content,
body > div,
.main-container,
.content-container,
.container,
.container-fluid,
.contentWrapper,
.content-bc,
.main-content,
.page,
.bc-page,
.bc-container,
.bc-content,
.card,
.bc-card,
.section,
.section-bc {
  background: transparent !important;
  background-color: transparent !important;
}

/* Footer also transparent */
.theme-white .footerContainerWrapper {
  background: transparent !important;
}



/* 🎨 Custom color palette */
:root {
  --hero: 167, 31, 103 !important;
  --hero-hover: 210, 38, 129 !important;
  --accent: 170, 127, 0 !important;
  --accent-hover: 220, 165, 0 !important;
  --b: 0, 12, 36 !important;
  --header: 0, 12, 36 !important;
  --menu: 0, 12, 36 !important;
  --tab-navigation: 0, 12, 36 !important;
}

/* 🔘 Promo Button */
.promo-btn {
  background: linear-gradient(45deg, #a71f67, #c61e77, #a71f67) !important;
  color: white !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.promo-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #a71f67, #69007f, #fc0987);
  opacity: 0;
  filter: blur(10px);
  transition: 0.5s;
  z-index: -1;
}
.promo-btn:hover::after {
  opacity: 1;
}

/* 🔻 Footer Transparency */
.theme-white .footerContainerWrapper {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* 🎯 Odds Styling — VBET Style */
.market-odd-bc {
  color: #FFD700 !important;
  font-size: 12px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: color 0.2s ease;
}
.market-bc {
  background-color: #2f3447 !important;
  transition: background-color 0.2s ease;
}
.market-bc:hover {
  background-color: #d80d83 !important;
}
.market-bc:hover .market-odd-bc {
  color: #ffffff !important;
}
.market-bc.active .market-odd-bc {
  color: #d80d83 !important;
}

/* 🟪 Bet Box Layout */
.slider-market-coefficient-container .market-bc {
  box-shadow: none !important;
  border: none !important;
  border-radius: 5px !important;
  width: 100px !important;
  height: 38px !important;
}
.slider-market-coefficient-container .market-bc:nth-child(2):not(:last-child),
.slider-market-coefficient-container .market-bc:nth-child(2):not(:last-child):hover {
  border-left: 4px solid #fff !important;
  border-right: 4px solid #fff !important;
  border-radius: 0 !important;
}

/* 🔍 Telegram Icon Cleanup */
.header-bc .hdr-main-content-bc .bc-i-telegram.header-icon {
  background-color: transparent !important;
}
.header-bc .hdr-main-content-bc .bc-i-telegram.header-icon:before {
  content: "" !important;
  width: 65px;
  height: 100%;
  background: none !important;
}

/* ⏳ Countdown Banner */
.slider-bc:first-child .countdown-banner-content {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.slider-bc:first-child .countdown-banner-content .countdown-banner-date {
  font-size: 70px !important;
  line-height: 60px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.slider-bc:first-child .countdown-banner-content .countdown-banner-names {
  font-size: 16px !important;
  color: #fff !important;
}

/* 👣 Odds Box Margin Fix */
.slider-market-coefficient-container .market-bc + .market-bc {
  margin-inline-start: initial !important;
}

/* 📱 For Very Wide Screens */
@media screen and (min-width: 1900px) {
  .slider-market-coefficient-container .market-bc {
    width: 120px !important;
  }
}

/* 🎯 Header Buttons */
a.btn.a-color.header-icon-text.bc-i-promotions {
  color: #ffffff !important;
}
a.btn.a-color.header-icon-text.bc-i-promotions:hover {
  color: #ffffff !important;
}

/* ✅ Navbar Style */
nav.nav-menu-container.header-navigation {
  margin: 0 -10px !important;
  border-radius: 0px !important;
  background: #0f1323 !important;
  padding: 0 10px !important;
  min-height: 36px !important;
  border-bottom: 2px solid #008358 !important;
}
ul.nav-menu.nav-menu-hide-items > li > a.nav-menu-item,
ul.nav-menu-other > li > a.nav-menu-item {
  font-size: 13px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  border-radius: 0px !important;
  background: none !important;
}
ul.nav-menu.nav-menu-hide-items > li > a.nav-menu-item:hover,
ul.nav-menu-other > li > a.nav-menu-item:hover,
ul.nav-menu-other > li > a.nav-menu-item.active,
ul.nav-menu.nav-menu-hide-items > li > a.nav-menu-item.active {
  color: #00cc66 !important;
  background: none !important;
}
ul.nav-menu.nav-menu-hide-items ul.nav-menu-sub {
  display: none !important;
}
ul.nav-menu.nav-menu-hide-items,
ul.nav-menu-other {
  justify-content: flex-start !important;
  gap: 6px !important;
}
ul.nav-menu-sub > li > a.nav-menu-item.active,
ul.nav-menu-sub > li > a.nav-menu-item:hover {
  border-bottom: 2px solid #00cc66 !important;
  border-top: none !important;
  box-shadow: none !important;
  background: none !important;
  color: #00cc66 !important;
}
ul.nav-menu-sub {
  border-top: none !important;
  box-shadow: none !important;
}
ul.nav-menu.nav-menu-hide-items {
  justify-content: center !important;
}

.footerLinkCols > .footerLinkCol {
  margin-inline: 20px;    /* horizontal margin in both LTR/RTL */
}

/* Increase horizontal spacing between footer columns */
.footerLinkCols {
  display: flex;          /* already there, but safe to repeat */
  justify-content: center;
  gap: 32px;              /* change this value to control distance */
}

/* (Optional) only on desktop so mobile stays tight */
@media (max-width: 768px) {
  .footerLinkCols {
    gap: 12px;
  }
}