/* ============================
   ODDZILLO TYPOGRAPHY SYSTEM
   Google Fonts: Syne, Space Mono, DM Sans
   ============================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Preloader - dark background to prevent blue flash between pages */
.preloader {
  background-color: #111118 !important;
}
.preloader__img,
.preloader__img img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
html {
  background-color: #111118 !important;
}


/* ----- DM Sans: Body / UI / Navigation ----- */
body,
html {
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif !important;
}

/* Navigation */
.header-primary,
.header-primary *,
.header-menu,
.header-menu a,
.header-primary .nav-link,
.header-primary a {
  font-family: 'DM Sans', sans-serif !important;
}

/* Sidebar */
.sports-category__text,
.sports-category__link {
  font-family: 'DM Sans', sans-serif !important;
}

/* Sub-category / league tabs */
.sub-category-drawer,
.sub-category-drawer * {
  font-family: 'DM Sans', sans-serif !important;
}

/* Bet slip UI text */
.bet-type__btn span,
.betslip-item-stake__label,
.betslip-item-league__name,
.betslip-item-market__type,
.betslip-item-market__label,
.betslip-item-return__text,
.betslip__list-match,
.login-message-text,
.empty-slip-message {
  font-family: 'DM Sans', sans-serif !important;
}

/* Buttons (general) */
.btn,
button,
select,
.form-select,
.place-btn button,
.place-btn .btn {
  font-family: 'DM Sans', sans-serif !important;
}

/* Footer */
.footer,
.footer * {
  font-family: 'DM Sans', sans-serif !important;
}

/* Labels, small text */
label,
small,
.text--small,
p {
  font-family: 'DM Sans', sans-serif !important;
}

/* ----- Syne: Headlines / Brand / Display ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* Logo / Brand */
.logo,
.logo *,
.site-logo,
.navbar-brand,
.logo__text {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* Banner / Hero text */
.banner-slider h1,
.banner-slider h2,
.banner-slider h3,
.banner-slider p,
.banner-slider .banner-content *,
.hero-slider h1,
.hero-slider h2,
.hero-slider p,
.hero-slider *,
.banner-slider * {
  font-family: 'Syne', sans-serif !important;
}

/* Team names (display weight) */
.sports-card__team-name,
.betslip-item-team__name {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Footer headings */
.footer__title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* ----- Space Mono: Data / Labels / Code / Odds ----- */

/* Odds buttons */
.oddBtn,
.oddBtn * {
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
}

/* Odds in bet slip */
.betslip-item-market__score {
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
}

/* Return amounts */
.bet-return-amount,
.total-return-amount,
.bet-return span {
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
}

/* Match dates / times */
.sports-card__info-text,
.sports-card-heading span {
  font-family: 'Space Mono', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
}

/* Column headers (1, X, 2, SPREADS, TOTAL) */
.team-select-title {
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Currency labels & numeric inputs */
.betslip-input-inner,
.input-group-text,
.betslip__list-ratio input,
.betslip__footer input.amount,
.investAmount,
input[type="number"] {
  font-family: 'Space Mono', monospace !important;
}

/* Stake label */
.betslip__list-ratio > span {
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
}

/* All Markets link */
.sports-card-left-bottom a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* Decimal odds dropdown */
.decimal-odds,
.odds-format {
  font-family: 'Space Mono', monospace !important;
}


/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !important;
}

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: #ff7000;
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}

.cookies-card {
  width: 520px;
  padding: 30px;
  color: hsl(var(--heading));
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all 0.5s;
  background: hsl(var(--dark-300));
  border-radius: 5px;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: hsl(var(--heading));
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: hsl(var(--heading));
}



/* ============================
   BET SLIP SELECTION CARD
   ============================ */

/* --- Card Container --- */
.betslip-item {
  background-color: #111118 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 10px !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
}

/* --- Card Header (League + Close) --- */
.betslip-item-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #1e1e2a !important;
  background-color: rgba(15, 23, 42, 0.5) !important;
}

.betslip-item-league {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.betslip-item-league i {
  color: #64748b !important;
  font-size: 14px !important;
}

.betslip-item-league__name {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

/* Close Button */
.betslip-item-close {
  background: rgba(239, 68, 68, 0.1) !important;
  border: none !important;
  color: #94a3b8 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  padding: 0 !important;
}

.betslip-item-close:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #FF2D78 !important;
}

/* --- Card Body --- */
.betslip-item-body {
  padding: 12px 14px !important;
  background: transparent !important;
}

/* --- Teams --- */
.betslip-item-teams {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.betslip-item-team {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.betslip-item-team__logo {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.betslip-item-team__name {
  color: #e2e8f0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* --- Market Type & Odds --- */
.betslip-item-market {
  margin-bottom: 12px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(30, 41, 59, 0.5) !important;
}

.betslip-item-market__type {
  color: #39FF14 !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.betslip-item-market__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.betslip-item-market__label {
  color: #e2e8f0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.betslip-item-market__score {
  color: #39FF14 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* --- Stake Input --- */
.betslip-item-stake {
  margin-bottom: 8px !important;
}

.betslip-item-stake__label {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.betslip-item-stake .input-group {
  display: flex !important;
  align-items: center !important;
  background-color: #0A0A0F !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.betslip-item-stake .input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: #39FF14 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
}

.betslip-item-stake .input-group-text:last-child {
  display: none !important;
}

.betslip-item-stake .form-control,
.betslip-item-stake .investAmount,
.betslip-item-stake input {
  background-color: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  text-align: right !important;
  outline: none !important;
  box-shadow: none !important;
}

.betslip-item-stake .form-control:focus,
.betslip-item-stake input:focus {
  box-shadow: none !important;
  outline: none !important;
}

.betslip-item-stake .input-group:focus-within {
  border-color: #39FF14 !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}

/* --- Potential Winnings --- */
.betslip-item-return {
  padding-top: 8px !important;
}

.betslip-item-return__text {
  color: #39FF14 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.betslip-item-return .bet-return-amount {
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}

/* --- Validation Messages --- */
.betslip-item .validation-msg,
.betslip-item .text--danger {
  color: #FF2D78 !important;
  font-size: 0.75rem !important;
  margin-top: 4px !important;
}

/* --- Additional Betslip Polish --- */
.betslip-select.mb-2,
.betslip-select {
  border-bottom: 1px solid #1e1e2a !important;
  padding-bottom: 12px !important;
}

/* Reduce empty area height */
.betslip__body {
  max-height: 280px !important;
  overflow-y: auto !important;
}

.empty-slip-message {
  padding: 24px 12px !important;
}

/* Hide the duplicate enter amount input in footer-bottom */
.betslip__footer-bottom .form-control.betslip-form {
  display: none !important;
}

/* Refine footer border radius */
.betslip__footer {
  border-radius: 0 0 12px 12px !important;
}


/* ============================
   MY BETS TAB - Dark Theme
   ============================ */

/* My Bets Container */
.mybet-container {
  background-color: transparent !important;
  padding: 12px !important;
}

/* Login Message */
.login-message {
  background-color: #111118 !important;
  border: 1px dashed #1e1e2a !important;
  border-radius: 10px !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

.login-message-text {
  color: #475569 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* My Bets list items (when logged in) */
.mybet-container .bet-item,
.mybet-container .mybet-item,
.mybet-container .card,
.mybet-container .list-group-item {
  background-color: #111118 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  margin-bottom: 8px !important;
}

/* General overrides for any white panels inside betslip */
.betslip-inner {
  background-color: transparent !important;
}

.betslip-inner .card,
.betslip-inner .card-body {
  background-color: #111118 !important;
  border-color: #1e1e2a !important;
  color: #e2e8f0 !important;
}


/* Fix body font override */
html body,
body.home-page,
body {
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif !important;
}

@media (max-width: 767px) {
  .cookies-card {
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
  }
}

.hover-input-popup {
  position: relative;
  z-index: 9999;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px !important;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: "";
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: "";
  font-family: "Line Awesome Free";
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}

.show-filter {
  display: none;
}

@media (max-width: 767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}

/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05),
    6px 4px 19px rgb(115 103 240 / 20%);
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: hsl(var(--border)) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: hsl(var(--border)) !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid hsl(var(--border));
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-track {
  background: hsl(var(--dark-300));
  border-radius: 5px;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb {
  background: hsl(var(--dark-100));
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--dark-100));
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  display: none;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: 0.3s;
}

.select2-container--default .select2-selection--single {
  border-color: hsl(var(--border)) !important;
  border-width: 1px !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  height: 100% !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 31px !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: hsl(var(--dark-300)) !important;
  color: hsl(var(--heading)) !important;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}
.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-radius: 0.375rem !important;
}

.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: hsl(var(--base));
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: hsl(220 20% 10%);
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: #cccccf59;
  --hover-border-color: hsl(var(--base));
  background-color: hsl(var(--card-bg));
  border-radius: 5px;
  height: 100%;
}

.payment-system-list.is-scrollable {
  max-height: min(340px, 70vh);
  overflow-x: auto;
  padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: hsl(var(--dark) / 0.07);
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  border: 1px solid hsl(var(--card-border));
  border-top-color: var(--border-color);
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.payment-item:first-child {
  border-top-color: hsl(var(--card-border));
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid var(--hover-border-color);
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid transparent;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid hsl(var(--base));
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width));
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid hsl(var(--base));
  display: inline-block;
  border-radius: 100%;
}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
    width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
}

.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
    align-self: center;
    padding-left: 5px;
  }
}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;
}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 600;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: hsl(var(--card-bg));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover + .payment-item__btn {
  border-top-color: hsl(var(--card-border));
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

label.required:after {
  content: "*";
  color: #dc3545 !important;
  margin-left: 2px;
}

.mobile-code {
  cursor: pointer;
  padding-right: 5px;
  font-size: 0.875rem;
  font-weight: 500;
}

.text--extra-small {
  font-size: 0.625rem !important;
}

.text--small {
  font-size: 0.75rem !important;
}

.social-login-btn {
  border: 1px solid hsl(var(--border));
}

.register-disable {
  padding-block: 80px;
  width: 100%;
  background-color: hsl(var(--card-bg));
  color: hsl(var(--heading));
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-disable-image img {
  width: 100%;
}

.register-disable-title {
  color: hsl(var(--heading) / 0.8);
  font-size: 42px;
  margin-bottom: 18px;
}

.register-disable-icon {
  font-size: 16px;
  background: rgb(255, 15, 15, 0.07);
  color: rgb(255, 15, 15, 0.8);
  border-radius: 3px;
  padding: 6px;
  margin-right: 4px;
}

.register-disable-desc {
  color: hsl(var(--heading) / 0.5);
  font-size: 18px;
  max-width: 565px;
  width: 100%;
  margin-bottom: ;
  :32px ;
}

.register-disable-footer-link {
  color: hsl(var(--heading));
  background-color: hsl(var(--base));
  padding: 13px 24px;
  border-radius: 6px;
  text-decoration: none;
}

.register-disable-footer-link:hover {
  background-color: hsl(var(--base) / 0.8);
  color: hsl(var(--heading));
}

@media (max-width: 1199px) {
  .payment-item {
    padding: 10px 6px;
  }
  .payment-item__name {
    font-size: 0.875rem;
  }
}


.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
  background-color: hsl(var(--base)) !important;
}

/* =============================================
   OddZillo Dark Theme - Custom CSS Override
   ============================================= */

/* === ROOT VARIABLES === */
:root {
  --oz-bg-primary: #0A0A0F;
  --oz-bg-secondary: #111118;
  --oz-bg-card: #111118;
  --oz-bg-card-hover: #1a1a26;
  --oz-bg-sidebar: #0A0A0F;
  --oz-bg-header: #0A0A0F;
  --oz-bg-input: #1a1a26;
  --oz-accent: #39FF14;
  --oz-accent-dark: #2ED910;
  --oz-accent-glow: rgba(57, 255, 20, 0.15);
  --oz-text-primary: #f1f5f9;
  --oz-text-secondary: #94a3b8;
  --oz-text-muted: #64748b;
  --oz-border: #1e1e2a;
  --oz-border-light: #2a2a3a;
  --oz-red: #FF2D78;
  --oz-live-red: #FF2D78;
  --oz-positive: #39FF14;
  --oz-negative: #FF2D78;
    --oz-purple: #8B5CF6;
    --oz-orange: #FF6B35;
    --oz-gold: #FFD700;
    --oz-pink: #FF2D78;
    --oz-gradient: linear-gradient(135deg, #39FF14, #8B5CF6);
  --oz-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === GLOBAL OVERRIDES === */
body {
  background-color: var(--oz-bg-primary) !important;
  color: var(--oz-text-primary) !important;
  font-family: var(--oz-font) !important;
}

main.home-page {
  background-color: var(--oz-bg-primary) !important;
}

a {
  color: var(--oz-accent) !important;
}

a:hover {
  color: #4ade80 !important;
}

/* === HEADER === */
.header-primary {
  background-color: var(--oz-bg-header) !important;
  border-bottom: 1px solid var(--oz-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.header-primary .container-fluid {
  background: transparent !important;
}

.header-primary .logo img {
  filter: brightness(1.2) !important;
}

.header-primary .primary-menu-container .text-white,
.header-primary nav a,
.header-primary .sm-text {
  color: var(--oz-text-secondary) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 1.2px !important;
  transition: color 0.2s ease !important;
}

.header-primary nav a:hover,
.header-primary .sm-text:hover {
  color: var(--oz-accent) !important;
}

.header-primary nav a.active {
  color: var(--oz-accent) !important;
}

.header-primary .select-lang .form-select,
.header-primary .oddsType {
  background-color: var(--oz-bg-card) !important;
  color: var(--oz-text-primary) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.header-primary .user-profile-btn {
  background-color: transparent !important;
  border: 1px solid var(--oz-border) !important;
  color: var(--oz-text-primary) !important;
  border-radius: 8px !important;
  padding: 6px 16px !important;
  font-size: 0.85rem !important;
}

.header-primary .user-profile-btn:hover {
  border-color: var(--oz-accent) !important;
  color: var(--oz-accent) !important;
}

.header-primary .dropdown-menu {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

.header-primary .dropdown-item {
  color: var(--oz-text-primary) !important;
}

.header-primary .dropdown-item:hover {
  background-color: var(--oz-bg-card-hover) !important;
  color: var(--oz-accent) !important;
}

/* === SIDEBAR (Sports Category) === */
.sports-category {
  background-color: var(--oz-bg-sidebar) !important;
  border-right: 1px solid var(--oz-border) !important;
  padding-top: 10px !important;
}

.sports-category__link {
  color: var(--oz-text-secondary) !important;
  transition: all 0.2s ease !important;
  border-radius: 0 !important;
  padding: 12px 15px !important;
  border-left: 3px solid transparent !important;
}

.sports-category__link:hover {
  background-color: var(--oz-bg-card) !important;
  color: var(--oz-text-primary) !important;
  border-left-color: var(--oz-accent) !important;
}

.sports-category__link.active {
  background-color: rgba(34, 197, 94, 0.08) !important;
  color: var(--oz-accent) !important;
  border-left-color: var(--oz-accent) !important;
}

.sports-category__link.active .sports-category__text {
  color: var(--oz-accent) !important;
  font-weight: 600 !important;
}

.sports-category__text {
  color: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

.sports-category__icon {
  color: inherit !important;
}

.sports-category__link.live-btn {
  background-color: rgba(220, 38, 38, 0.1) !important;
  color: var(--oz-live-red) !important;
  border-left-color: var(--oz-live-red) !important;
  margin-bottom: 5px !important;
}

.sports-category__link.live-btn .sports-category__text {
  color: var(--oz-live-red) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 1.5px !important;
}

/* === BANNER / HERO === */
.banner-slider,
.hero-slider {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--oz-border) !important;
}

.banner_slide {
  border-radius: 16px !important;
}

.banner_image {
  border-radius: 16px !important;
}

/* === LEAGUE TABS (Sub Category Drawer) === */
.sub-category-drawer {
  background-color: var(--oz-bg-secondary) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin-bottom: 16px !important;
}

.sub-category-drawer__list {
  gap: 4px !important;
}

.sub-category-drawer__link {
  background-color: transparent !important;
  color: var(--oz-text-secondary) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.sub-category-drawer__link:hover {
  background-color: var(--oz-bg-card-hover) !important;
  color: var(--oz-text-primary) !important;
}

.sub-category-drawer__link.active {
  background-color: rgba(57, 255, 20, 0.12) !important;
  color: #39FF14 !important;
  border: 1px solid rgba(57, 255, 20, 0.35) !important;
}

.sub-category-drawer__flag-img {
  border-radius: 4px !important;
}

/* === MATCH CARDS === */
.betting-body {
  background-color: transparent !important;
}

.sports-card {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.sports-card:hover {
  border-color: var(--oz-border-light) !important;
  background-color: var(--oz-bg-card-hover) !important;
}

.sports-card-wrapper {
  background-color: transparent !important;
  border: none !important;
}

.sports-card-left {
  background-color: transparent !important;
  border: none !important;
}

.sports-card-heading {
  background-color: transparent !important;
  border-bottom: 1px solid var(--oz-border) !important;
  color: var(--oz-text-muted) !important;
}

.sports-card__info-text {
  color: var(--oz-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}

.sports-card__team {
  padding: 6px 0 !important;
}

.sports-card__team-name {
  color: var(--oz-text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

.sports-card__team-flag-img {
  border-radius: 4px !important;
  width: 20px !important;
  height: 20px !important;
}

.sports-card-body {
  background: transparent !important;
}

.sports-card-inner {
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid var(--oz-border) !important;
}

.sports-card-top-inner {
  border-bottom: 1px solid var(--oz-border) !important;
}

.team-select-title {
  color: var(--oz-text-muted) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

/* === ODDS BUTTONS === */
.option-odd-lists {
  background: transparent !important;
}

.option-odd-list__item {
  border: none !important;
}

.oddBtn,
.option-odd-list__item .btn {
  background-color: var(--oz-bg-input) !important;
  color: var(--oz-text-primary) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
  min-width: 55px !important;
}

.oddBtn:hover,
.option-odd-list__item .btn:hover {
  background-color: var(--oz-accent-glow) !important;
  border-color: var(--oz-accent) !important;
  color: var(--oz-accent) !important;
}

.oddBtn.active,
.option-odd-list__item .btn.active,
.oddBtn.selected {
  background-color: var(--oz-accent) !important;
  border-color: var(--oz-accent) !important;
  color: #fff !important;
}

.sports-card-left-bottom {
  border-top: 1px solid var(--oz-border) !important;
}

.sports-card-left-bottom a {
  color: var(--oz-accent) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
}

/* === BET SLIP === */
/* ============================
   BET SLIP - OddZillo Style
   ============================ */
.betslip {
  background-color: #0A0A0F !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* --- Header Tabs --- */
.betslip-header {
  background-color: #0A0A0F !important;
  border-bottom: 1px solid #1e1e2a !important;
  padding: 0 !important;
}

.bet-type {
  display: flex !important;
  gap: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.bet-type__btn {
  flex: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  position: relative !important;
}

.bet-type__btn span {
  display: block !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
}

.bet-type__btn input:checked + span {
  background-color: transparent !important;
  color: #39FF14 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.bet-type__btn span:hover {
  color: #94a3b8 !important;
}

/* --- Empty Selection Area --- */
.betslip__body {
  background-color: transparent !important;
  padding: 16px 12px !important;
  min-height: auto !important;
}

.betslip__list {
  background-color: transparent !important;
  border: none !important;
  min-height: auto !important;
}

.empty-slip-message {
  color: #475569 !important;
  font-size: 0.8rem !important;
  text-align: center !important;
  padding: 30px 16px !important;
  border: 1px dashed #1e1e2a !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.4) !important;
}

.empty-slip-message img {
  width: 48px !important;
  height: 48px !important;
  opacity: 0.3 !important;
  margin-bottom: 8px !important;
}

/* --- Footer / Controls --- */
.betslip__footer {
  background-color: #111118 !important;
  border-top: 1px solid #1e1e2a !important;
  padding: 14px !important;
}

/* Dropdown (Single / Multibet) */
.betslip-select {
  margin-bottom: 12px !important;
}

.betslip-select .form-select,
.betslip-select select {
  background-color: #0A0A0F !important;
  color: #e2e8f0 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
}

.betslip-select .form-select:focus,
.betslip-select select:focus {
  border-color: #39FF14 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}

/* Stake Section */
.betslip-righ {
  padding: 0 !important;
}

.betslip__list-ratio {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.betslip__list-ratio > span {
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.betslip__list-ratio .position-relative {
  flex: 1 !important;
}

.betslip-input-inner {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #39FF14 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  z-index: 2 !important;
}

.betslip__list-ratio input[type="number"],
.betslip__footer input.amount {
  background-color: #0A0A0F !important;
  color: #e2e8f0 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  padding: 10px 14px 10px 50px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  width: 100% !important;
  text-align: right !important;
}

.betslip__list-ratio input[type="number"]:focus,
.betslip__footer input.amount:focus {
  border-color: #39FF14 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}

/* Singles count */
.betslip__list-content {
  margin: 8px 0 !important;
}

.betslip__list-match {
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* Returns */
.bet-return {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-top: 1px solid #1e1e2a !important;
  margin-top: 4px !important;
}

.bet-return span {
  color: #e2e8f0 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.bet-return .total-return-amount {
  color: #39FF14 !important;
  font-weight: 700 !important;
}


/* --- Bet Slip Overrides (fix base BetLab styles) --- */
.bet-type__btn {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
}

.bet-type__btn:first-child,
.bet-type__btn:last-child {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
}

.betslip__body {
  border: none !important;
  outline: none !important;
}

.betslip__list {
  border: none !important;
  outline: none !important;
  min-height: 0 !important;
}

/* Make empty area more compact */
.empty-slip-message {
  margin: 0 !important;
}

.betslip__body {
  max-height: none !important;
}

/* --- Footer Bottom Row --- */
.betslip__footer-bottom {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #1e1e2a !important;
}

.betslip__footer-bottom .betslip-form,
.betslip__footer-bottom input[type="number"] {
  display: none !important;
}

/* Trash / Delete All Button */
.betslip__footer-bottom .delete-btn,
.betslip__footer-bottom .deleteAll {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #FF2D78 !important;
  border-radius: 8px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 1rem !important;
}

.betslip__footer-bottom .delete-btn:hover,
.betslip__footer-bottom .deleteAll:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Place Bet Button */
.place-btn {
  flex: 1 !important;
}

.place-btn .btn,
.place-btn .betslip__footer-btn,
.place-btn button {
  width: 100% !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  background: #39FF14 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
}

.place-btn .btn:hover,
.place-btn .betslip__footer-btn:hover,
.place-btn button:hover {
  background: #2ED910 !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
  transform: translateY(-1px) !important;
}



.deleteAll,
.delete-btn {
  background-color: var(--oz-bg-input) !important;
  color: var(--oz-red) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 8px !important;
}

/* === MY BETS TAB === */
.mybet-container,
.single-bet {
  background: transparent !important;
}

.bets__list,
.bet-list-item {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 8px !important;
  color: var(--oz-text-primary) !important;
}

/* === FOOTER === */
.footer,
.footer--light {
  background-color: var(--oz-bg-header) !important;
  border-top: 1px solid var(--oz-border) !important;
  color: var(--oz-text-secondary) !important;
}

.footer__title {
  color: var(--oz-text-primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.footer a {
  color: var(--oz-text-muted) !important;
}

.footer a:hover {
  color: var(--oz-accent) !important;
}

.footer .social-list__icon {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  color: var(--oz-text-secondary) !important;
}

.footer .social-list__icon:hover {
  background-color: var(--oz-accent) !important;
  border-color: var(--oz-accent) !important;
  color: #fff !important;
}

/* === MOBILE APP NAV === */
.app-nav {
  background-color: var(--oz-bg-header) !important;
  border-top: 1px solid var(--oz-border) !important;
}

.app-nav a {
  color: var(--oz-text-muted) !important;
}

.app-nav a:hover,
.app-nav a.active {
  color: var(--oz-accent) !important;
}

/* === LOGIN MODAL === */
.login-modal .modal-content {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 16px !important;
}

.login-modal .modal-body {
  color: var(--oz-text-primary) !important;
}

.login-modal .form-group label {
  color: var(--oz-text-secondary) !important;
}

.login-modal .form-control,
.login-modal input {
  background-color: var(--oz-bg-input) !important;
  color: var(--oz-text-primary) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 8px !important;
}

.login-modal .btn-primary,
.login-modal button[type="submit"] {
  background: var(--oz-accent) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* === BET CONFIRMATION MODAL === */
.modal-content {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  color: var(--oz-text-primary) !important;
  border-radius: 16px !important;
}

/* === COOKIES CARD === */
.cookies-card {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  color: var(--oz-text-primary) !important;
  border-radius: 12px !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--oz-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--oz-border-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--oz-text-muted);
}

/* === MISC ELEMENTS === */
.form-control,
.form--control {
  background-color: var(--oz-bg-input) !important;
  color: var(--oz-text-primary) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 8px !important;
}

.form-control:focus,
.form--control:focus {
  border-color: var(--oz-accent) !important;
  box-shadow: 0 0 0 3px var(--oz-accent-glow) !important;
}

.btn-light {
  background-color: var(--oz-bg-input) !important;
  color: var(--oz-text-primary) !important;
  border-color: var(--oz-border) !important;
}

/* Back to top button */
.back-to-top {
  background-color: var(--oz-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* Selection highlight */
::selection {
  background-color: var(--oz-accent) !important;
  color: #fff !important;
}

/* === PAGE-SPECIFIC: INNER PAGES === */
.page-wrapper,
.content-area,
.dashboard-body,
.main-content {
  background-color: var(--oz-bg-primary) !important;
  color: var(--oz-text-primary) !important;
}

/* Cards on inner pages */
.card {
  background-color: var(--oz-bg-card) !important;
  border: 1px solid var(--oz-border) !important;
  border-radius: 12px !important;
  color: var(--oz-text-primary) !important;
}

.card-header {
  background-color: var(--oz-bg-secondary) !important;
  border-bottom: 1px solid var(--oz-border) !important;
  color: var(--oz-text-primary) !important;
}

/* Tables */
.table {
  color: var(--oz-text-primary) !important;
}

.table thead th {
  background-color: var(--oz-bg-secondary) !important;
  color: var(--oz-text-muted) !important;
  border-color: var(--oz-border) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.table td {
  border-color: var(--oz-border) !important;
  color: var(--oz-text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--oz-bg-card) !important;
  color: var(--oz-text-primary) !important;
}

/* Pagination */
.pagination .page-link {
  background-color: var(--oz-bg-card) !important;
  color: var(--oz-text-primary) !important;
  border-color: var(--oz-border) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--oz-accent) !important;
  border-color: var(--oz-accent) !important;
  color: #fff !important;
}

/* Badges */
.badge {
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* Typography adjustments */
h1, h2, h3, h4, h5, h6 {
  color: var(--oz-text-primary) !important;
}

p {
  color: var(--oz-text-secondary) !important;
}

/* Smooth transitions on interactive elements */
a, button, .btn, input, select {
  transition: all 0.2s ease !important;
}

/* === RESPONSIVE FIXES === */
@media (max-width: 991px) {
  .sports-category {
    background-color: var(--oz-bg-sidebar) !important;
  }

  .betslip {
    background-color: var(--oz-bg-sidebar) !important;
  }
}

@media (max-width: 767px) {
  .sports-card {
    border-radius: 8px !important;
  }

  .betslip {
    border-radius: 0 !important;
  }
}

/* =============================================
   SIDEBAR - Flat & Minimal (Clean)
   ============================================= */

.sports-category {
  width: 100px !important;
  min-width: 100px !important;
  background-color: #0A0A0F !important;
  border-right: 1px solid #1e1e2a !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* -- Base link -- */
.sports-category__link {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 20px 10px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.5) !important;
  background: none !important;
  overflow: visible !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.sports-category__link .sports-category__icon {
  font-size: 20px !important;
  line-height: 1 !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
}

.sports-category__link .sports-category__icon i,
.sports-category__link .sports-category__icon .custom-icon {
  color: inherit !important;
}

.sports-category__link .sports-category__text {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
}

.sports-category__link:hover {
  background: rgba(255,255,255,0.02) !important;
  border-left-color: #334155 !important;
}

.sports-category__link:hover .sports-category__icon {
  color: #94a3b8 !important;
}

.sports-category__link:hover .sports-category__text {
  color: #94a3b8 !important;
}

/* -- LIVE ONLY -- */
.sports-category__link.live-btn {
  background: none !important;
  border-left-color: #FF2D78 !important;
  height: auto !important;
}

.sports-category__link.live-btn .sports-category__icon {
  color: #FF2D78 !important;
}

.sports-category__link.live-btn .sports-category__icon i {
  color: #FF2D78 !important;
}

/* live-btn always has .active too, so we need this specificity */
nav.sports-category a.live-btn span.sports-category__text {
  color: #FF2D78 !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

nav.sports-category a.live-btn .sports-category__icon,
nav.sports-category a.live-btn .sports-category__icon i {
  color: #FF2D78 !important;
}

.sports-category__link.live-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 6px !important;
  height: 6px !important;
  background: #FF2D78 !important;
  border-radius: 50% !important;
  animation: live-dot 1.5s ease-in-out infinite !important;
}

.sports-category__link.live-btn::before {
  content: none !important;
  display: none !important;
}

@keyframes live-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* -- Active sport -- */
.sports-category__link.active:not(.live-btn) {
  background: none !important;
  border-left-color: #39FF14 !important;
  height: auto !important;
}

.sports-category__link.active:not(.live-btn) .sports-category__icon {
  color: #39FF14 !important;
}

nav.sports-category a.active:not(.live-btn) span.sports-category__text {
  color: #39FF14 !important;
  font-weight: 700 !important;
}

/* Fix sidebar items stretching */
.sports-category__link {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  align-self: stretch !important;
}

.sports-category__list {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  overflow: visible !important;
  height: auto !important;
}

/* =============================================
   ALL MARKETS PAGE - Dark Theme
   ============================================= */

/* Match banner gradient → Zillo Gradient */
.odd-list__head {
  background: #39FF14 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.odd-list__team-name {
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}
.odd-list__team-divide {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-family: 'Space Mono', monospace !important;
}

/* Markets heading */
.odd-list__title {
  color: #f1f5f9 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* Accordion market cards */
.accordion--odd .accordion-item {
  background-color: #111118 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Market card header (Moneyline, etc.) */
.accordion--odd .accordion-header {
  background-color: transparent !important;
}
.accordion--odd .accordion-button {
  background-color: #111118 !important;
  color: #f1f5f9 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
}
.accordion--odd .accordion-button:not(.collapsed) {
  background-color: #111118 !important;
  color: #f1f5f9 !important;
  box-shadow: none !important;
}
.accordion--odd .accordion-button::after {
  filter: invert(1) brightness(2) !important;
}
.accordion--odd .accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Accordion body */
.accordion--odd .accordion-body {
  background-color: #111118 !important;
  padding: 0 !important;
}

/* Outcome rows */
.accordion--odd .odd-list__outcomes {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.accordion--odd .flex-between,
.accordion--odd li.flex-between {
  background-color: #0A0A0F !important;
  border-bottom: 1px solid #1e1e2a !important;
  padding: 14px 20px !important;
  transition: background-color 0.2s ease !important;
}
.accordion--odd .flex-between:last-child {
  border-bottom: none !important;
}
.accordion--odd .flex-between:hover {
  background-color: #1a1a26 !important;
}

/* Team/outcome name text */
.accordion--odd .odd-list__outcome-text {
  color: #e2e8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
}

/* Odds buttons in market view */
.accordion--odd .odd-list__outcome.oddBtn {
  background-color: #1a1a26 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
  min-width: 60px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}
.accordion--odd .odd-list__outcome.oddBtn:hover {
  background-color: rgba(57, 255, 20, 0.1) !important;
  border-color: #39FF14 !important;
  color: #39FF14 !important;
}
.accordion--odd .odd-list__outcome.oddBtn.active,
.accordion--odd .odd-list__outcome.oddBtn.selected {
  background-color: #39FF14 !important;
  border-color: #39FF14 !important;
  color: #0A0A0F !important;
}

/* Collapse borders */
.accordion--odd .accordion-collapse {
  border-top: 1px solid #1e1e2a !important;
}

/* Login Button - Subtle Solid */
.btn.btn--signup {
  background-color: #111118 !important;
  color: #39FF14 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
}
.btn.btn--signup:hover {
  background-color: #1a1a26 !important;
  border-color: #39FF14 !important;
  color: #39FF14 !important;
}
/* Hide broken icon in Login button */
.btn.btn--signup .la.la-sign-in {
  display: none !important;
}

/* Footer Bottom Bar */
.footer-bottom {
  background-color: #0A0A0F !important;
  border-top: 1px solid #1e1e2a !important;
  padding: 16px 0 !important;
}
.footer-bottom .xsm-text,
.footer-bottom .xsm-text * {
  color: #64748b !important;
  font-family: 'DM Sans', sans-serif !important;
}
.footer-bottom .t-link--base {
  color: #39FF14 !important;
}
/* Hide payment logos */
.footer-bottom .col-sm-6 ul {
  display: none !important;
}

/* =============================================
   NEWS PAGE - Dark Theme
   ============================================= */

/* News article cards */
.post-card {
  background-color: #111118 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}
.post-card:hover {
  border-color: #2a2a3a !important;
  transform: translateY(-2px) !important;
}

/* Card image area */
.post-card__thumb {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}
.post-card__thumb img {
  border-radius: 0 !important;
}

/* Card content area */
.post-card__content {
  padding: 20px !important;
  background-color: #111118 !important;
}

/* Date text */
.post-card__content .text-muted,
.post-card__content small {
  color: #64748b !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.8rem !important;
}

/* Article title */
.post-card__title a,
.post-card__title a.text--base {
  color: #f1f5f9 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.post-card__title a:hover {
  color: #39FF14 !important;
}

/* Article excerpt text */
.post-card__content p {
  color: #94a3b8 !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.6 !important;
}

/* Read More button */
.post-card .btn.btn--base,
a.btn.btn--base {
  background-color: #39FF14 !important;
  color: #0A0A0F !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.2s ease !important;
}
.post-card .btn.btn--base:hover,
a.btn.btn--base:hover {
  background-color: #2ED910 !important;
  color: #0A0A0F !important;
}

/* News page background */
.blog-section,
.news-section,
section.py-5 {
  background-color: #0A0A0F !important;
}

/* =============================================
   CONTACT PAGE - Dark Theme
   ============================================= */

/* Contact info cards */
.contact-card {
  background-color: #111118 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
}
.contact-card__icon {
  background-color: #39FF14 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
}
.contact-card__title {
  color: #f1f5f9 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}
.contact-card__text {
  color: #94a3b8 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Contact form panel */
.login-form {
  background-color: #111118 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  padding: 30px !important;
}
.login-form__title {
  color: #f1f5f9 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* Form labels */
.login-form .form-label,
.login-form label {
  color: #94a3b8 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}
.login-form .form-label .required,
.login-form label sup {
  color: #FF2D78 !important;
}

/* Form inputs */
.login-form .form-control,
.login-form .form--control,
.login-form input,
.login-form textarea {
  background-color: #1a1a26 !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 12px 16px !important;
}
.login-form .form-control:focus,
.login-form .form--control:focus,
.login-form input:focus,
.login-form textarea:focus {
  border-color: #39FF14 !important;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.1) !important;
  outline: none !important;
}

/* Send Message button */
.login-form .btn.btn--base,
.login-form .btn.btn--xl {
  background-color: #39FF14 !important;
  color: #0A0A0F !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: background-color 0.2s ease !important;
}
.login-form .btn.btn--base:hover,
.login-form .btn.btn--xl:hover {
  background-color: #2ED910 !important;
}

/* =============================================
   SHARED - Inner Page Banner / Breadcrumb
   ============================================= */
.banner {
  position: relative !important;
}
.banner::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #39FF14, #8B5CF6) !important;
}

/* ============================
   NEWS DETAIL PAGE - Date Badge Fix
   ============================ */
.blog-details__thumb .post__date .date {
  background-color: #39FF14 !important;
  color: #0A0A0F !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}
.blog-details__thumb .post__date .month {
  background-color: #111118 !important;
  color: #f1f5f9 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
}

/* ============================
   NEWS & CONTACT - Additional Refinements
   ============================ */

/* News card title hover - green accent like home page */
.post-card__title a:hover,
.post-card__title a.text--base:hover {
  color: #39FF14 !important;
  transition: color 0.2s ease !important;
}

/* News detail social share icons - consistent green styling */
.blog-social__link li a {
  border-color: #1e1e2a !important;
  color: #94a3b8 !important;
  background-color: #111118 !important;
  transition: all 0.2s ease !important;
}
.blog-social__link li a:hover {
  border-color: #39FF14 !important;
  color: #39FF14 !important;
  background-color: rgba(57, 255, 20, 0.08) !important;
}

/* News detail sidebar - Recent Updates section */
.sidebar .post__title a {
  color: #39FF14 !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: color 0.2s ease !important;
}
.sidebar .post__title a:hover {
  color: #2ED910 !important;
}
.sidebar .small-post {
  border-bottom-color: #1e1e2a !important;
}

/* Contact form - improved input focus glow */
.login-form .form-control:focus,
.login-form .form--control:focus,
.login-form input:focus,
.login-form textarea:focus {
  border-color: #39FF14 !important;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.15) !important;
}

/* Contact card hover effect */
.contact-card:hover {
  border-color: #39FF14 !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}
.contact-card {
  transition: all 0.3s ease !important;
}

/* Banner section heading font consistency */
.banner .banner__content h2,
.banner .banner__content h1 {
  font-family: 'Syne', sans-serif !important;
  color: #f1f5f9 !important;
}

/* ============================
   FOOTER - Remove Wave Lines
   ============================ */
.footer::before,
.footer::after,
.footer--light::before,
.footer--light::after,
.footer--dark::before,
.footer--dark::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* ============================
   FOOTER - Social Icons Restyle
   Dark outlined circles with green accent
   ============================ */
.footer .social-list__icon {
  background-color: #111118 !important;
  border: 2px solid #2a2a3a !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.footer .social-list__icon:hover {
  border-color: #39FF14 !important;
  background-color: rgba(57, 255, 20, 0.08) !important;
}

/* Remove colored backgrounds from individual icons */
.footer .social-list__icon i,
.footer .social-list__icon span,
.footer .social-list__icon .fab,
.social-list__icon [class*="facebook"],
.social-list__icon [class*="twitter"],
.social-list__icon [class*="linkedin"],
.social-list__icon [class*="instagram"] {
  background: none !important;
  background-color: #111118 !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: #94a3b8 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 16px !important;
  transition: color 0.3s ease !important;
}

.footer .social-list__icon:hover i,
.footer .social-list__icon:hover span,
.footer .social-list__icon:hover .fab {
  color: #39FF14 !important;
}

/* ============================
   FIX: Restore Font Awesome icons in footer
   Override the .footer * font-family rule for icon elements
   ============================ */
.footer .fab,
.footer .fas,
.footer .far,
.footer .fal,
.footer .fad,
.footer .fa-brands,
.footer [class*="fa-"] {
  font-family: "Font Awesome 6 Brands" !important;
}
.footer .fas,
.footer .far,
.footer .fal,
.footer .fad {
  font-family: "Font Awesome 6 Free" !important;
}
.footer .social-list__icon i,
.footer .social-list__icon span {
  font-family: inherit !important;
}
.footer .social-list__icon .fab,
.footer .social-list__icon .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
}
.footer .social-list__icon .fas,
.footer .social-list__icon .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* ============================
   FIX: Override default blue social icon backgrounds with #111118
   Targets the exact selectors from main.css
   ============================ */
.social-list__icon i,
.social-list__icon span {
  background-color: #111118 !important;
  background: #111118 !important;
  background-image: none !important;
  color: #94a3b8 !important;
}
.social-list__icon [class*="facebook"] {
  background-color: #111118 !important;
  background: #111118 !important;
  color: #94a3b8 !important;
}
.social-list__icon [class*="twitter"] {
  background-color: #111118 !important;
  background: #111118 !important;
  color: #94a3b8 !important;
}
.social-list__icon [class*="linkedin"] {
  background-color: #111118 !important;
  background: #111118 !important;
  color: #94a3b8 !important;
}
.social-list__icon [class*="instagram"] {
  background-color: #111118 !important;
  background: #111118 !important;
  background-image: none !important;
  color: #94a3b8 !important;
}
.social-list__icon i:hover,
.social-list__icon span:hover,
.social-list__icon [class*="facebook"]:hover,
.social-list__icon [class*="twitter"]:hover,
.social-list__icon [class*="linkedin"]:hover,
.social-list__icon [class*="instagram"]:hover {
  background-color: #111118 !important;
  background: #111118 !important;
  color: #39FF14 !important;
}

/* ============================
   NAVBAR - Match home page layout on all pages
   Force user-header-primary to use full-width like home
   ============================ */
.user-header-primary .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ========================================
   CONTACT SECTION - Brand Refresh
   ======================================== */

/* Center the form when left column is empty */
.contact-section .row {
  justify-content: center !important;
}

/* Hide the empty left column */
.contact-section .col-lg-5 {
  display: none !important;
}

/* Make form column wider and centered */
.contact-section .col-lg-6 {
  flex: 0 0 66.666% !important;
  max-width: 66.666% !important;
}

/* Section overlay for better contrast */
.contact-section {
  position: relative !important;
  padding: 80px 0 !important;
}

.contact-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(10,10,15,0.6) 0%, rgba(17,17,24,0.8) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.contact-section > .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Form card styling */
.contact-section .login-form {
  background: rgba(17, 17, 24, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 16px !important;
  padding: 48px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(57, 255, 20, 0.03) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.contact-section .login-form:hover {
  border-color: rgba(57, 255, 20, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 80px rgba(57, 255, 20, 0.06) !important;
}

/* Form title */
.contact-section .login-form__title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 8px !important;
}

/* Green underline accent below title */
.contact-section .login-form__title::after {
  content: '' !important;
  display: block !important;
  width: 50px !important;
  height: 3px !important;
  background: #39FF14 !important;
  margin-top: 12px !important;
  border-radius: 2px !important;
}

/* Labels */
.contact-section .login-form label {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #8888AA !important;
  margin-bottom: 8px !important;
}

/* Input fields */
.contact-section .login-form .form-control,
.contact-section .login-form .form--control,
.contact-section .login-form input[type="text"],
.contact-section .login-form input[type="email"],
.contact-section .login-form textarea {
  background-color: rgba(26, 26, 37, 0.7) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 14px 18px !important;
  transition: all 0.3s ease !important;
}

.contact-section .login-form .form-control:focus,
.contact-section .login-form .form--control:focus,
.contact-section .login-form input:focus,
.contact-section .login-form textarea:focus {
  background-color: rgba(26, 26, 37, 0.9) !important;
  border-color: #39FF14 !important;
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.1) !important;
  outline: none !important;
}

.contact-section .login-form .form-control::placeholder,
.contact-section .login-form input::placeholder,
.contact-section .login-form textarea::placeholder {
  color: #555566 !important;
  font-size: 14px !important;
}

/* Textarea specific */
.contact-section .login-form textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Submit button */
.contact-section .login-form .btn--base,
.contact-section .login-form button[type="submit"] {
  background: #39FF14 !important;
  color: #0A0A0F !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 16px 28px !important;
  border: none !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(57, 255, 20, 0.2) !important;
}

.contact-section .login-form .btn--base:hover,
.contact-section .login-form button[type="submit"]:hover {
  background: #2ee00f !important;
  box-shadow: 0 6px 30px rgba(57, 255, 20, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Responsive - stack form full width on mobile */
@media (max-width: 991px) {
  .contact-section .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .contact-section .login-form {
    padding: 32px 24px !important;
  }
}

/* ========================================
   BETTING SECTION - Brand Refresh
   Sports Cards, Odds, Nav, Bet Slip
   ======================================== */

/* --- Left Sidebar Nav (Live Only / Football) --- */
.sports-category {
  background: rgba(17, 17, 24, 0.95) !important;
  border-right: 1px solid #1e1e2a !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.sports-category__link {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #8888AA !important;
  transition: all 0.25s ease !important;
  border-radius: 8px !important;
  padding: 12px 8px !important;
}

.sports-category__link:hover,
.sports-category__link.active {
  color: #39FF14 !important;
  background: rgba(57, 255, 20, 0.06) !important;
}

.sports-category__link.active .sports-category__icon svg,
.sports-category__link.active .sports-category__icon i {
  color: #39FF14 !important;
  fill: #39FF14 !important;
}

/* Live button pulse */
.sports-category__link.live-btn .sports-category__text {
  color: #FF2D78 !important;
}

.sports-category__link.live-btn:hover {
  background: rgba(255, 45, 120, 0.06) !important;
}

/* --- Sub-Category Drawer (League tabs) --- */
.sub-category-drawer {
  background: rgba(17, 17, 24, 0.9) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 10px !important;
  padding: 6px !important;
  backdrop-filter: blur(8px) !important;
}

.sub-category-drawer__list .slick-slide a,
.sub-category-drawer__link {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8888AA !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  transition: all 0.25s ease !important;
}

.sub-category-drawer__list .slick-slide a:hover,
.sub-category-drawer__link:hover {
  color: #f1f5f9 !important;
  background: rgba(57, 255, 20, 0.06) !important;
  border-color: rgba(57, 255, 20, 0.15) !important;
}

.sub-category-drawer__list .slick-slide a.active,
.sub-category-drawer__link.active {
  color: #39FF14 !important;
  background: rgba(57, 255, 20, 0.12) !important;
  border: 1px solid rgba(57, 255, 20, 0.35) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
}

/* --- Sports Cards (Match rows) --- */
.sports-card {
  background: rgba(17, 17, 24, 0.85) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.sports-card:hover {
  border-color: rgba(57, 255, 20, 0.15) !important;
  box-shadow: 0 4px 24px rgba(57, 255, 20, 0.04) !important;
}

/* Card heading (date/time row + column headers) */
.sports-card-heading {
  border-bottom: 1px solid rgba(30, 30, 42, 0.8) !important;
}

.sports-card__info-text {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  color: #6b6b88 !important;
}

/* Column header labels (1, X, 2, Spreads, Total) */
.team-select-title {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
}

/* Team names */
.sports-card__team-name {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f1f5f9 !important;
  letter-spacing: 0.5px !important;
}

/* Team flag images */
.sports-card__team-flag-img {
  border-radius: 50% !important;
  border: 2px solid #1e1e2a !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: cover !important;
}

/* All Markets link */
.sports-card-left-bottom a,
a.text--small[href*="markets"] {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  color: #39FF14 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.sports-card-left-bottom a:hover,
a.text--small[href*="markets"]:hover {
  color: #2ee00f !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.3) !important;
}

/* --- Odds Buttons --- */
.oddBtn,
.option-odd-list__item .btn {
  background: rgba(26, 26, 38, 0.8) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
  min-width: 54px !important;
}

.oddBtn:hover,
.option-odd-list__item .btn:hover {
  background: rgba(57, 255, 20, 0.08) !important;
  border-color: rgba(57, 255, 20, 0.25) !important;
  color: #39FF14 !important;
  transform: translateY(-1px) !important;
}

/* Active/Selected odd button */
.oddBtn.active,
.option-odd-list__item .btn.active {
  background: #39FF14 !important;
  border-color: #39FF14 !important;
  color: #0A0A0F !important;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.3), 0 2px 8px rgba(57, 255, 20, 0.2) !important;
  text-shadow: none !important;
}

/* Disabled/empty odd buttons */
.option-odd-list__item .btn:not(.oddBtn),
.option-odd-list__item .btn[disabled] {
  background: rgba(17, 17, 24, 0.5) !important;
  border-color: rgba(30, 30, 42, 0.5) !important;
  color: #444455 !important;
  cursor: default !important;
}

/* Spreads & Total labels */
.sports-card-inner .sports-card-heading span:not(.team-select-title) {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
}

/* --- Bet Slip Sidebar --- */
.betslip {
  background: rgba(10, 10, 15, 0.95) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}

/* Bet Slip Header (tabs) */
.betslip-header {
  background: rgba(17, 17, 24, 0.9) !important;
  border-bottom: 1px solid #1e1e2a !important;
}

.betslip-header label {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #8888AA !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
}

.betslip-header label:has(input:checked),
.betslip-header label.active {
  color: #39FF14 !important;
  border-bottom: 2px solid #39FF14 !important;
}

/* Bet Slip Items */
.betslip-item {
  background: rgba(17, 17, 24, 0.6) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}

.betslip-item:hover {
  border-color: rgba(57, 255, 20, 0.15) !important;
}

.betslip-item-header {
  background: rgba(26, 26, 38, 0.4) !important;
  border-bottom: 1px solid rgba(30, 30, 42, 0.6) !important;
  padding: 10px 12px !important;
}

/* Betslip team names */
.betslip-item .team-name,
.betslip-item-body span {
  font-family: 'DM Sans', sans-serif !important;
  color: #f1f5f9 !important;
}

/* Market type label (e.g. "Moneyline 3 Way") */
.betslip-item .market-name,
.betslip-item-body .text-success,
.betslip-item-body [class*="market"] {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #39FF14 !important;
}

/* Odds value in betslip */
.betslip-item .odds-value,
.betslip-item-body .fw-bold {
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
  color: #39FF14 !important;
  font-size: 18px !important;
}

/* Stake input */
.betslip-item input[type="number"],
.betslip .form-control,
.betslip .form--control {
  background: rgba(26, 26, 37, 0.7) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.betslip-item input[type="number"]:focus,
.betslip .form-control:focus,
.betslip .form--control:focus {
  border-color: #39FF14 !important;
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.1) !important;
  outline: none !important;
}

/* Stake label */
.betslip-item label,
.betslip label {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
}

/* Currency badge (ZLW) */
.betslip .input-group-text,
.betslip-item .currency-badge {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #39FF14 !important;
  background: rgba(57, 255, 20, 0.08) !important;
  border: 1px solid rgba(57, 255, 20, 0.15) !important;
  border-radius: 6px !important;
}

/* Potential winnings */
.betslip-item .potential-winnings,
.betslip-item [class*="potential"] {
  font-family: 'Space Mono', monospace !important;
  font-size: 12px !important;
  color: #8888AA !important;
}

.betslip-item .potential-winnings span,
.betslip-item [class*="potential"] span {
  color: #39FF14 !important;
  font-weight: 700 !important;
}

/* --- Bet Slip Footer --- */
.betslip__footer {
  background: rgba(17, 17, 24, 0.6) !important;
  border-top: 1px solid #1e1e2a !important;
  padding: 16px !important;
}

/* Bet type select (Single/Multibet) */
.betslip__footer .form-select,
.betslip-select select {
  background: rgba(26, 26, 37, 0.7) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
}

/* Returns display */
.bet-return,
.betslip__footer .bet-return {
  font-family: 'Space Mono', monospace !important;
  font-size: 12px !important;
  color: #8888AA !important;
}

.bet-return span,
.betslip__footer .bet-return span {
  color: #39FF14 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* Place Bet button */
.place-btn .btn,
button.place-bet-btn,
.betslip__footer-bottom .place-btn .btn {
  background: #39FF14 !important;
  color: #0A0A0F !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(57, 255, 20, 0.2) !important;
}

.place-btn .btn:hover,
button.place-bet-btn:hover,
.betslip__footer-bottom .place-btn .btn:hover {
  background: #2ee00f !important;
  box-shadow: 0 6px 30px rgba(57, 255, 20, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Delete all button */
.deleteAll,
.delete-btn {
  background: rgba(255, 45, 120, 0.1) !important;
  border: 1px solid rgba(255, 45, 120, 0.2) !important;
  border-radius: 8px !important;
  color: #FF2D78 !important;
  transition: all 0.2s ease !important;
}

.deleteAll:hover,
.delete-btn:hover {
  background: rgba(255, 45, 120, 0.2) !important;
  border-color: #FF2D78 !important;
}

/* Close button on bet slip items */
.betslip-item-header button,
.betslip-item .close-btn {
  color: #6b6b88 !important;
  transition: color 0.2s ease !important;
}

.betslip-item-header button:hover,
.betslip-item .close-btn:hover {
  color: #FF2D78 !important;
}

/* --- Hero Slider / Banner --- */
.hero-slider,
.banner-slider {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #1e1e2a !important;
}

/* --- Scrollbar Styling --- */
.sports-body::-webkit-scrollbar,
.betslip::-webkit-scrollbar,
.betslip__body::-webkit-scrollbar {
  width: 4px !important;
}

.sports-body::-webkit-scrollbar-track,
.betslip::-webkit-scrollbar-track,
.betslip__body::-webkit-scrollbar-track {
  background: #0A0A0F !important;
}

.sports-body::-webkit-scrollbar-thumb,
.betslip::-webkit-scrollbar-thumb,
.betslip__body::-webkit-scrollbar-thumb {
  background: #1e1e2a !important;
  border-radius: 4px !important;
}

.sports-body::-webkit-scrollbar-thumb:hover,
.betslip::-webkit-scrollbar-thumb:hover,
.betslip__body::-webkit-scrollbar-thumb:hover {
  background: #39FF14 !important;
}

/* --- Mobile Bottom Nav --- */
.app-nav {
  background: rgba(10, 10, 15, 0.95) !important;
  border-top: 1px solid #1e1e2a !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.app-nav a {
  font-family: 'Space Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  transition: color 0.2s ease !important;
}

.app-nav a:hover,
.app-nav a.active {
  color: #39FF14 !important;
}

/* --- Responsive adjustments --- */
@media (max-width: 991px) {
  .sports-card {
    border-radius: 10px !important;
  }
  .oddBtn,
  .option-odd-list__item .btn {
    font-size: 12px !important;
    padding: 6px 8px !important;
    min-width: 44px !important;
  }
  .betslip {
    border-radius: 12px 12px 0 0 !important;
  }
}

/* ========================================
   FIX: Double line under BET SLIP tab
   ======================================== */

/* Remove the double line - only keep the active tab indicator */
.betslip-header {
  border-bottom: none !important;
}

.bet-type {
  border-bottom: 1px solid #1e1e2a !important;
}

/* Active tab - single clean underline */
.bet-type__btn {
  border-bottom: 2px solid transparent !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: -1px !important;
}

.bet-type__btn:has(input:checked) {
  border-bottom-color: #39FF14 !important;
  color: #39FF14 !important;
}

.bet-type__btn span {
  color: inherit !important;
}

/* ========================================
   NAVBAR LOGO - Text-based OddZillo
   Hide image, show text via CSS
   ======================================== */

/* Hide the logo image */
.header-primary .logo a img,
.logo a img[alt="logo"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* Create text-based logo */
.header-primary .logo a {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  padding: 4px 0 !important;
}

/* "Odd" part in white */
.header-primary .logo a::before {
  content: 'Odd' !important;
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* "Zillo" part in neon green */
.header-primary .logo a::after {
  content: 'Zillo' !important;
  color: #39FF14 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* Also fix admin sidebar logo if needed */
.sidebar-brand .logo a::before {
  content: 'Odd' !important;
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

.sidebar-brand .logo a::after {
  content: 'Zillo' !important;
  color: #39FF14 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* Responsive logo size */
@media (max-width: 767px) {
  .header-primary .logo a {
    font-size: 22px !important;
  }
}

/* FIX: Remove duplicate border on span inside bet-type tabs */
.bet-type__btn span {
  border-bottom: none !important;
  border: none !important;
  color: inherit !important;
}

/* ========================================
   MY BETS SECTION - Visibility & Brand Fix
   ======================================== */

/* Bet list container */
.mybet-container {
  padding: 12px !important;
}

/* Individual bet card */
.mybet-container .bet-list-item {
  background: rgba(17, 17, 24, 0.9) !important;
  border: 1px solid #1e1e2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s ease !important;
}

.mybet-container .bet-list-item:hover {
  border-color: rgba(57, 255, 20, 0.15) !important;
}

/* Each bet-single selection within a multi-bet */
.mybet-container .bet-single {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(30, 30, 42, 0.8) !important;
  position: relative !important;
}

.mybet-container .bet-single:last-child {
  border-bottom: none !important;
}

/* Left accent bar for each pick */
.mybet-container .bet-single::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 3px !important;
  background: #39FF14 !important;
  border-radius: 0 2px 2px 0 !important;
  opacity: 0.6 !important;
}

/* Market type (Head to Head 3 way) */
.mybet-container .bet-market_type {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #f1f5f9 !important;
}

/* Status badges */
.mybet-container .badge--warning,
.mybet-container .badge {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.mybet-container .badge--warning {
  color: #FFD700 !important;
  background: rgba(255, 215, 0, 0.1) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
}

.mybet-container .badge--success {
  color: #39FF14 !important;
  background: rgba(57, 255, 20, 0.1) !important;
  border: 1px solid rgba(57, 255, 20, 0.25) !important;
}

.mybet-container .badge--danger {
  color: #FF2D78 !important;
  background: rgba(255, 45, 120, 0.1) !important;
  border: 1px solid rgba(255, 45, 120, 0.25) !important;
}

/* League name */
.mybet-container .betslip-item-league {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 !important;
}

.mybet-container .betslip-item-league__name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: #8888AA !important;
}

.mybet-container .betslip-item-league i {
  color: #6b6b88 !important;
}

/* Team names */
.mybet-container .bet-single__team {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #c8c8d8 !important;
}

.mybet-container .bet-single__vs {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  color: #555566 !important;
  text-transform: uppercase !important;
}

/* Selected team pick highlight */
.mybet-container .bet-single__selected-team {
  margin-top: 8px !important;
  padding: 6px 12px !important;
  background: rgba(57, 255, 20, 0.06) !important;
  border: 1px solid rgba(57, 255, 20, 0.15) !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.mybet-container .bet-single__selected-team .name {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #39FF14 !important;
}

/* Footer - Stake & Win amounts */
.mybet-container .bet-list-item__footer {
  background: rgba(26, 26, 38, 0.5) !important;
  border-top: 1px solid #1e1e2a !important;
  padding: 12px 16px !important;
}

.mybet-container .bet-single-info__item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 0 !important;
}

.mybet-container .bet-single-info__item .label {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8888AA !important;
}

.mybet-container .bet-single-info__item .value {
  font-family: 'Space Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}

/* Win amount highlight in green */
.mybet-container .bet-single-info__item:last-child .value {
  color: #39FF14 !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.2) !important;
}

/* Empty state / login message */
.mybet-container .empty-slip-message,
.mybet-container [class*="login"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #6b6b88 !important;
  text-align: center !important;
  padding: 24px 16px !important;
}