/* ============================================================
   BetSafari Pro - Dark Theme Override
   ============================================================ */

/* ---- Variables ---- */
:root {
  --left-side: 220px;
  --sidebar-bg: #161b22;
  --body-bg: #0d1117;
  --card-bg: #1a2234;
  --card-border: #2a3a5c;
  --text-primary: #e6edf3;
  --text-muted: #8b949e;
  --header-bg: #161b22;
  --header-border: #2a3a5c;
  --odds-bg: #1e2d45;
  --odds-hover: #2a3f60;
  --odds-selected: hsl(var(--base));
  --live-red: #ef4444;
}

/* ---- Base ---- */
body {
  background: var(--body-bg) !important;
  color: var(--text-primary) !important;
}

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

p, span, label, small, .sm-text {
  color: var(--text-primary);
}

a {
  color: var(--text-primary);
}

/* ---- Header ---- */
.header-primary {
  background: #0d1117 !important;
  border-bottom: none !important;
  padding: 10px 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
}

.header-primary .text-white { color: var(--text-primary) !important; }
.header-primary .text-muted { color: var(--text-muted) !important; }

/* Nav links */
.primary-menu-container .nav-links a {
  color: var(--text-primary) !important;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.2s;
}
.primary-menu-container .nav-links a:hover {
  background: rgba(255,255,255,0.08);
}
.primary-menu-container .nav-links a.live-link {
  display: flex;
  align-items: center;
  gap: 5px;
}
.live-dot {
  width: 8px;
  height: 8px;
  background: var(--live-red);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Login / Sign Up buttons */
.btn--login {
  background: transparent !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
  padding: 7px 18px !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
}
.btn--login:hover {
  background: rgba(255,255,255,0.08) !important;
}
.btn--signup {
  background: hsl(var(--base)) !important;
  border: none !important;
  color: #fff !important;
  padding: 7px 18px !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
}
.btn--signup:hover {
  background: hsl(var(--base-dark)) !important;
}

/* Odds type select */
.select-lang .form-select {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
}

/* ===== Left Sports Sidebar ===== */
.sports-category {
  background: #0f1923 !important;
  border-right: none !important;
  width: 230px !important;
  padding-top: 0 !important;
}

/* Sidebar heading */
.sports-sidebar-heading {
  padding: 14px 16px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #6b7280 !important;
  text-transform: uppercase;
  border-bottom: none;
  margin-bottom: 2px;
}

/* Live button */
.sports-category__link.live-btn {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  max-height: unset !important;
  text-align: left !important;
  border-bottom: none !important;
  background: transparent !important;
  margin: 1px 6px !important;
  border-radius: 8px !important;
}
.sports-category__link.live-btn .sports-category__text {
  margin-top: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  color: #e6edf3 !important;
}
.sports-category__link.live-btn:hover { background: rgba(255,255,255,0.06) !important; }
.sports-category__link.live-btn.active { background: rgba(239,68,68,0.1) !important; border-left: none !important; }
.sports-category__link.live-btn.active .sports-category__text { color: #ef4444 !important; }

/* Individual sport links */
.sports-category__link {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 16px !important;
  max-height: unset !important;
  text-align: left !important;
  border-radius: 8px !important;
  margin: 1px 6px !important;
  position: relative;
  transition: background 0.15s;
}
.sports-category__link:hover { background: rgba(255,255,255,0.06) !important; }
.sports-category__link.active {
  background: rgba(34,197,94,0.1) !important;
  border-left: none !important;
}
.sports-category__link.active .sports-category__text { color: #4ade80 !important; }

/* Emoji icon container */
.sports-category__icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  text-align: center;
  flex-shrink: 0 !important;
  /* remove color override so emojis show their natural colors */
}
.sports-category__link.active .sports-category__icon {
  background: rgba(34,197,94,0.15) !important;
}
.sports-category__link.live-btn .sports-category__icon {
  background: rgba(239,68,68,0.15) !important;
}

.sports-category__text {
  font-size: 0.85rem !important;
  color: #c9d1d9 !important;
  margin-top: 0 !important;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500 !important;
}

/* Count badge */
.sport-count {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  padding: 2px 7px;
  border-radius: 20px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.sport-count--dim {
  background: rgba(255,255,255,0.07) !important;
  color: #4b5563 !important;
  font-weight: 600 !important;
}
.sports-category__link.active .sport-count {
  background: hsl(var(--base) / 0.2);
  color: hsl(var(--base));
}

/* Sidebar quick links section */
.sidebar-quick-links {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 8px 0;
  margin-top: 8px;
}
.sidebar-quick-links-title {
  padding: 10px 16px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.sidebar-quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 8px;
  margin: 1px 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #c9d1d9 !important;
  transition: background 0.15s;
}
.sidebar-quick-link:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary) !important;
}
.sidebar-quick-link i {
  font-size: 1rem;
  color: var(--text-muted);
  min-width: 20px;
  text-align: center;
}

/* ===== League Tabs (sub-category-drawer) ===== */
.sub-category-drawer {
  background-color: #161b22 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.sub-category-drawer__text {
  color: #8b949e !important;
  font-weight: 500 !important;
}
.sub-category-drawer__link {
  color: #8b949e !important;
  padding: 10px 8px !important;
}
.sub-category-drawer__link:hover .sub-category-drawer__text {
  color: #e6edf3 !important;
}
.sub-category-drawer__link.active {
  border-bottom: 2px solid #22c55e !important;
}
.sub-category-drawer__link.active .sub-category-drawer__text {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* Slick slider arrows — hidden (tabs are scrollable) */
.sub-category-drawer .slick-arrow,
.slick-prev, .slick-next {
  display: none !important;
}

/* ---- Main Content Area ---- */
.home-page {
  background: var(--body-bg) !important;
}

.sports-body {
  background: var(--body-bg) !important;
  padding: 1rem 1.25rem !important;
}

/* Section headers (Live Now, Featured Matches) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.section-title .live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--live-red);
  font-size: 0.85rem;
}
.section-title .live-indicator .live-dot {
  width: 8px;
  height: 8px;
}
.section-view-all {
  font-size: 0.8rem;
  color: hsl(var(--base)) !important;
  text-decoration: none;
}
.section-view-all:hover {
  text-decoration: underline;
}

/* ---- Legacy Match Cards (kept for other pages) ---- */
.sports-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
  margin-bottom: 0;
}

/* ---- New Vertical Match Card ---- */
.match-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.2s;
  height: 100%;
}
.match-card:hover { border-color: hsl(var(--base) / 0.5) !important; }
.match-card.live-card { border-color: rgba(239,68,68,0.4) !important; }

/* Card header */
.mc-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--card-border) !important;
  background: rgba(0,0,0,0.18) !important;
}
.mc-league {
  font-size: 0.76rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  flex: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-time {
  font-size: 0.76rem !important;
  color: #e2eaf4 !important;
  white-space: nowrap;
  margin-left: auto;
  font-weight: 500 !important;
}
.mc-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mc-stats-icon { font-size: 0.85rem; color: #e2eaf4 !important; }

/* Teams section */
.mc-teams {
  padding: 10px 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  flex: 1;
}
.mc-team {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mc-team-img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}
/* Override any avatar/letter-badge within team image */
.mc-team .sports-card__team-flag,
.mc-team .team-flag,
.mc-team .avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.65rem !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}
.mc-team-name {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.mc-market-title {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}

/* ===== Odds 3-column grid ===== */
.mc-odds {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-top: 1px solid var(--card-border) !important;
}
.mc-odds-outright {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
}
.mc-odd-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.mc-odd-label {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #d8e6f2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap;
  line-height: 1;
}
/* Odds button inside mc-odd-btn */
.mc-odd-btn .option-odd-list__item {
  width: 100% !important;
  padding: 8px 4px !important;
  border-radius: 6px !important;
  border: 1px solid var(--card-border) !important;
  background: var(--odds-bg) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.mc-odd-btn .option-odd-list__item:hover {
  background: var(--odds-hover) !important;
  border-color: hsl(var(--base)) !important;
}
.mc-odd-btn .option-odd-list__item .btn,
.mc-odd-btn .option-odd-list__item .oddBtn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: hsl(var(--base)) !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
}
.mc-odd-btn .option-odd-list__item .btn.active,
.mc-odd-btn .option-odd-list__item .oddBtn.active {
  color: #fff !important;
}
.mc-odd-btn .option-odd-list__item.active,
.mc-odd-btn .option-odd-list__item:has(.active) {
  background: hsl(var(--base) / 0.25) !important;
  border-color: hsl(var(--base)) !important;
}
.mc-odd-btn .option-odd-list__item .btn:disabled,
.mc-odd-btn .option-odd-list__item .oddBtn:disabled {
  color: var(--text-muted) !important;
}
.mc-odd-btn .option-odd-list__item .point {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* Card footer */
.mc-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 12px !important;
  border-top: 1px solid var(--card-border) !important;
  background: rgba(0,0,0,0.12) !important;
}
.mc-markets-link {
  font-size: 0.72rem !important;
  color: hsl(var(--base)) !important;
  text-decoration: none !important;
  background: hsl(var(--base) / 0.1) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}
.mc-markets-link:hover {
  background: hsl(var(--base) / 0.2) !important;
}
.mc-footer-live {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.7rem !important;
  color: var(--live-red) !important;
  font-weight: 600 !important;
}

.sports-card-wrapper {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  min-height: 90px;
}

/* Card left: team info */
.sports-card-left {
  background: var(--card-bg) !important;
  min-width: 180px;
  max-width: 220px;
  border-right: 1px solid var(--card-border);
  padding: 10px 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sports-card-heading {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 6px;
}

/* League/info line at top of card */
.sports-card__info {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sports-card__info-text {
  font-size: 0.72rem;
  color: var(--text-muted) !important;
  font-weight: 500;
}
.sports-card__stream {
  display: flex;
  align-items: center;
}
.sports-card__stream .text--danger {
  font-size: 0.7rem;
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239,68,68,0.15);
  color: var(--live-red) !important;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-badge .live-dot {
  width: 5px;
  height: 5px;
}

/* Team names */
.sports-card-body .team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.sports-card-body .team-name,
.sports-card-body .team span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sports-card-body .team img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 2px;
}

/* All markets link */
.sports-card-left-bottom a,
.sports-card-left-bottom .text--small {
  font-size: 0.72rem !important;
  color: hsl(var(--base)) !important;
  background: hsl(var(--base) / 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.sports-card-left-bottom a:hover {
  background: hsl(var(--base) / 0.2);
}
.sports-card-left-bottom {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

/* Odds inner sections */
.sports-card-inner {
  flex: 1;
  min-width: 100px;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  background: var(--card-bg) !important;
}
.sports-card-inner:last-child {
  border-right: none;
}

.sports-card-top-inner.sports-card-heading {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--card-border) !important;
  background: rgba(0,0,0,0.15) !important;
}
.team-select-title {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Odds buttons */
.option-odd-lists {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  flex: 1;
}
.option-odd-list__item {
  background: var(--odds-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 5px !important;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  padding: 6px 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.option-odd-list__item:hover {
  background: var(--odds-hover) !important;
  border-color: hsl(var(--base)) !important;
}
.option-odd-list__item.active,
.option-odd-list__item.selected {
  background: hsl(var(--base) / 0.2) !important;
  border-color: hsl(var(--base)) !important;
}
.option-odd-list__item .odds {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: hsl(var(--base)) !important;
}
.option-odd-list__item .locked i,
.option-odd-list__item .lock-icon {
  color: var(--text-muted) !important;
}
.option-odd-list__item .point {
  font-size: 0.75rem;
  color: var(--text-muted) !important;
}

/* ===== Betslip Panel ===== */
.betslip {
  background: #0f1923 !important;
  border-left: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Header Tabs */
.betslip-header {
  background: #0f1923 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 !important;
}
.bet-type {
  display: flex !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  flex-direction: row !important;
}
.bet-type__btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 13px 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bet-type__btn span {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}
.bet-type__btn:has(input:checked) {
  border-bottom-color: #22c55e !important;
}
.bet-type__btn:has(input:checked) span,
.bet-type__btn input:checked + span {
  color: #ffffff !important;
}
.betslip-inner {
  background: #0f1923 !important;
}

/* Betslip body */
.betslip__body {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 80px !important;
  background: #0f1923 !important;
}

/* Empty state */
.bs-empty.empty-slip-message {
  padding: 32px 16px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
}
.bs-empty-icon {
  font-size: 2.8rem !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.bs-empty-title {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #e6edf3 !important;
  margin: 0 !important;
}
.bs-empty-sub {
  font-size: 0.78rem !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* Footer */
.bs-footer {
  border-top: 1px solid #1f2937 !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #0f1923 !important;
}
.bs-section-label {
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Stake input */
.bs-stake-section { }
.bs-stake-input-wrap {
  display: flex !important;
  align-items: center !important;
  background: #1e293b !important;
  border: 1px solid #2d3748 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 42px !important;
}
.bs-currency {
  font-size: 0.8rem !important;
  color: #6b7280 !important;
  margin-right: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bs-stake-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.bs-stake-input::placeholder { color: #4b5563 !important; }
.bs-stake-input:focus { box-shadow: none !important; border: none !important; }

/* Breakdown rows */
.bs-breakdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #1f2937 !important;
}
.bs-breakdown-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.bs-breakdown-row > span:first-child {
  font-size: 0.82rem !important;
  color: #6b7280 !important;
}
.bs-breakdown-row > span:last-child {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #c9d1d9 !important;
}
.bs-you-win {
  padding-top: 8px !important;
  border-top: 1px solid #1f2937 !important;
  margin-top: 2px !important;
}
.bs-you-win > span:first-child {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #e6edf3 !important;
}
.bs-win-value {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #22c55e !important;
}

/* CTA Buttons */
.bs-cta-wrap { }
.bs-place-btn,
.bs-login-btn {
  width: 100% !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  background: #22c55e !important;
  border: none !important;
  color: #000 !important;
  transition: background 0.2s !important;
  text-transform: uppercase !important;
}
.bs-place-btn:hover,
.bs-login-btn:hover {
  background: #16a34a !important;
  color: #000 !important;
}

/* Override conflicting betslip rules */
.betslip .text-white,
.betslip p,
.betslip label { color: var(--text-primary) !important; }
.betslip input[type="number"].bs-stake-input {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

/* Empty betslip message (legacy) */
.empty-betslip,
.betslip .empty-message { color: var(--text-muted) !important; }

/* ---- Footer ---- */
.footer, .footer--light, .footer-bottom {
  background: var(--sidebar-bg) !important;
  border-top: 1px solid var(--header-border) !important;
  color: var(--text-muted) !important;
}
.footer a, .footer-bottom a {
  color: var(--text-muted) !important;
}
.footer a:hover, .footer-bottom a:hover {
  color: var(--text-primary) !important;
}

/* ---- Modal (Login) ---- */
.modal-content {
  background: var(--sidebar-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
}
.modal-content h4 {
  color: var(--text-primary) !important;
}
.modal-content .form-control {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
}
.modal-content .form-label {
  color: var(--text-muted) !important;
}
.modal-content .close {
  color: var(--text-muted) !important;
}

/* ---- Dashboard ---- */
.dashboard-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--card-border) !important;
}
.dashboard-sidebar .nav-link {
  color: var(--text-muted) !important;
}
.dashboard-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link.active {
  color: hsl(var(--base)) !important;
  background: hsl(var(--base) / 0.1) !important;
}
.dashboard-content {
  background: var(--body-bg) !important;
}
.widget-card,
.card,
.table-responsive {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
}
.card-header {
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
}
.table {
  color: var(--text-primary) !important;
}
.table thead th {
  background: rgba(0,0,0,0.2) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--card-border) !important;
}
.table td, .table th {
  border-color: var(--card-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0,0,0,0.1) !important;
}

/* ---- Misc ---- */
.form-control, .form--control {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
}
.form-control:focus {
  background: var(--card-bg) !important;
  border-color: hsl(var(--base)) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 2px hsl(var(--base) / 0.15) !important;
}
.form-control::placeholder {
  color: var(--text-muted) !important;
}
.dropdown-menu {
  background: var(--sidebar-bg) !important;
  border: 1px solid var(--card-border) !important;
}
.dropdown-item {
  color: var(--text-primary) !important;
}
.dropdown-item:hover {
  background: rgba(255,255,255,0.06) !important;
}
.breadcrumb-item, .breadcrumb-item a {
  color: var(--text-muted) !important;
}
.pagination .page-link {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
}
.pagination .page-item.active .page-link {
  background: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
}
.badge {
  font-size: 0.7rem;
}

/* Empty state */
.empty-message p {
  color: var(--text-muted) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--body-bg); }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== Sidebar Improvements ===== */

/* Green badge when sport has games */
.sport-count--green {
  background: rgba(34,197,94,0.18) !important;
  color: #22c55e !important;
  font-weight: 700 !important;
}
.sport-count--dim {
  background: rgba(255,255,255,0.06) !important;
  color: #4b5563 !important;
}
.sports-category__link.active .sport-count--green {
  background: rgba(34,197,94,0.3) !important;
  color: #4ade80 !important;
}

/* Expand arrow */
.sport-expand-arrow {
  font-size: 0.65rem !important;
  color: #4b5563 !important;
  flex-shrink: 0 !important;
  margin-left: 2px !important;
}
.sports-category__link.active .sport-expand-arrow {
  color: #22c55e !important;
}

/* Active state — green accent instead of base-color */
.sports-category__link.active {
  background: rgba(34,197,94,0.07) !important;
  border-left: 3px solid #22c55e !important;
}
.sports-category__link.active .sports-category__icon,
.sports-category__link.active .sports-category__text {
  color: #22c55e !important;
}

/* Quick links overhaul */
.sql-icon {
  font-size: 1rem !important;
  min-width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.sql-icon--live {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar-quick-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
}

/* ===== Navbar Active State ===== */
.primary-menu-container .nav-links li {
  position: relative;
}
.primary-menu-container .nav-links li a {
  position: relative !important;
  padding: 6px 12px 8px !important;
}
.primary-menu-container .nav-links li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 2px !important;
  background: transparent !important;
  border-radius: 1px !important;
  transition: background 0.2s !important;
}
.primary-menu-container .nav-links li a:hover::after,
.primary-menu-container .nav-links li a.active::after {
  background: #ffffff !important;
}
.primary-menu-container .nav-links li a.active {
  color: #ffffff !important;
}
/* Sign Up button — bright green like reference */
.btn--signup {
  background: #22c55e !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
}
.btn--signup:hover {
  background: #16a34a !important;
  color: #000 !important;
}
.btn--login {
  background: transparent !important;
  border: 1px solid #2d3748 !important;
  color: #e6edf3 !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
}
.btn--login:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* ---- Mobile ---- */
@media (max-width: 991px) {
  /* Sidebar: hidden off-screen by default, slides in when active */
  .sports-category {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 270px !important;
    z-index: 100000 !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sports-category.active-category-side {
    transform: translateX(0) !important;
  }

  /* Dark overlay backdrop behind the sidebar */
  .sports-category.active-category-side::before {
    content: '';
    position: fixed;
    top: 0;
    left: 270px;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: -1;
    pointer-events: auto;
  }

  .sports-body {
    width: 100% !important;
    padding: 0.75rem !important;
  }

  /* Cards: single column on mobile */
  .match-card { height: auto !important; }
  .col-md-6 { width: 100% !important; }

  /* Betslip: hidden on mobile, shown via app-nav */
  .betslip { display: none !important; }
  .betslip.open-betslip { display: flex !important; }
}

/* Mobile bottom nav bar */
.app-nav {
  background: #0f1923 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.app-nav__menu-link,
.app-nav__menu-link span,
.app-nav__menu-text {
  color: #8b949e !important;
}
.app-nav__menu-link.active .app-nav__menu-text,
.app-nav__menu-link:hover .app-nav__menu-text {
  color: #22c55e !important;
}
.app-nav__menu-link-important a {
  background: #22c55e !important;
  color: #000 !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
}
.app-nav__drawer {
  background: #0f1923 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.app-nav__drawer-link,
.app-nav__drawer-text {
  color: #c9d1d9 !important;
}

/* ===================================================
   MOBILE HORIZONTAL SPORT CATEGORY TABS
   =================================================== */
.mobile-sport-tabs {
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 500;
}
.mobile-sport-tabs__scroll {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding: 10px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  align-items: center;
}
.mobile-sport-tabs__scroll::-webkit-scrollbar { display: none; }

.mst-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8b949e;
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.07);
  transition: all 0.15s;
  text-decoration: none !important;
  line-height: 1;
}
.mst-tab:hover {
  color: #e6edf3 !important;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}
.mst-tab.active {
  color: #22c55e !important;
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.35);
}
.mst-live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #ef4444 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0;
}
.mst-tab.active .mst-live-dot {
  background: #22c55e !important;
}

/* ===================================================
   REDESIGNED MOBILE BOTTOM NAVIGATION
   =================================================== */
.app-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: #0d1117 !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}
.app-nav__menu {
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.app-nav__menu li {
  flex: 1 !important;
  display: flex !important;
}
.app-nav__menu-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 10px 4px 8px !important;
  text-decoration: none !important;
  position: relative !important;
  width: 100% !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  transition: background 0.15s !important;
}
.app-nav__menu-link:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* Icon container */
.app-nav__menu-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  color: #6b7280 !important;
}
.app-nav__menu-icon i {
  font-size: 1.35rem !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Label */
.app-nav__menu-text {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  display: block !important;
}

/* Active & hover states */
.app-nav__menu-link.active .app-nav__menu-icon,
.app-nav__menu-link.active .app-nav__menu-icon i {
  color: #22c55e !important;
}
.app-nav__menu-link.active .app-nav__menu-text {
  color: #22c55e !important;
}
.app-nav__menu-link:hover .app-nav__menu-icon,
.app-nav__menu-link:hover .app-nav__menu-icon i {
  color: #c9d1d9 !important;
}
.app-nav__menu-link:hover .app-nav__menu-text {
  color: #c9d1d9 !important;
}

/* Sports center button — green circle */
.app-nav__menu-link-important-container {
  width: 56px !important;
  height: 56px !important;
}
.app-nav__menu-link-important {
  width: 48px !important;
  height: 48px !important;
  background: #22c55e !important;
  border: 3px solid #0d1117 !important;
  color: #000 !important;
  font-size: 22px !important;
  top: -20px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(34,197,94,0.3) !important;
}
.app-nav__menu-link-important:hover {
  background: #16a34a !important;
  color: #000 !important;
}

/* Live dot in bottom nav */
.nav-live-dot {
  width: 11px !important;
  height: 11px !important;
  background: #ef4444 !important;
  border-radius: 50% !important;
  display: block !important;
  animation: pulse-dot 1.5s infinite !important;
}

/* Bet count badge */
.bet-count {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(6px) !important;
  background: #22c55e !important;
  color: #000 !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.bet-count.d-none { display: none !important; }

/* Hide old drawer (replaced by horizontal tabs) */
.app-nav__drawer { display: none !important; }

/* Bottom padding so content isn't hidden behind fixed nav */
@media (max-width: 991px) {
  .home-page {
    padding-bottom: 62px !important;
  }
  /* Keep sticky header visible above sport tabs */
  .header-primary {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
}

/* =====================================================
   MY BETS — Modern Card Design
   ===================================================== */
.mb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  overflow-y: auto;
}

/* Base card */
.mb-card {
  background: #1a2234;
  border-radius: 10px;
  border: 1px solid #2a3a5c;
  border-left: 3px solid #f59e0b;
  overflow: hidden;
}
.mb-card--won      { border-left-color: #22c55e; }
.mb-card--lost     { border-left-color: #ef4444; }
.mb-card--pending  { border-left-color: #f59e0b; }
.mb-card--refunded { border-left-color: #3b82f6; }

/* Card header */
.mb-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.18);
}
.mb-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mb-card__date {
  font-size: 0.68rem;
  color: #6b7280;
}

/* Status badges override */
.mb-card__status-badge .badge,
.mb-item__league .badge {
  font-size: 0.62rem !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}
.badge--success { background: rgba(34,197,94,0.18) !important; color: #22c55e !important; }
.badge--danger  { background: rgba(239,68,68,0.18) !important; color: #ef4444 !important; }
.badge--warning { background: rgba(245,158,11,0.18) !important; color: #f59e0b !important; }
.badge--primary { background: rgba(59,130,246,0.18) !important; color: #60a5fa !important; }
.badge--info    { background: rgba(14,165,233,0.18) !important; color: #38bdf8 !important; }

/* Card body */
.mb-card__body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual bet item (for multi bets) */
.mb-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mb-item:last-child { border-bottom: none; }

/* League row */
.mb-item__league {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.mb-item__league-name {
  font-size: 0.7rem;
  color: #8b949e;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Teams */
.mb-item__teams {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mb-item__team {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.mb-item__vs {
  font-size: 0.65rem;
  color: #4b5563;
  flex-shrink: 0;
}

/* Pick row */
.mb-item__pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mb-item__pick-label {
  font-size: 0.62rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.mb-item__pick-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: hsl(var(--base));
}
.mb-item__market-tag {
  font-size: 0.62rem;
  color: #6b7280;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Card footer */
.mb-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.15);
}
.mb-card__amount {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mb-card__amount-label {
  font-size: 0.6rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mb-card__amount-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: #e6edf3;
}
.mb-card__divider {
  color: #4b5563;
  font-size: 0.85rem;
}

/* Return amount color by status */
.mb-return-val--won     { color: #22c55e !important; }
.mb-return-val--lost    { color: #ef4444 !important; }
.mb-return-val--pending { color: #f59e0b !important; }
.mb-return-val--refunded { color: #60a5fa !important; }

/* =====================================================
   AUTH PAGES — Register / Login
   ===================================================== */
.login-page,
.register-page {
  min-height: 100vh;
  background-size: cover !important;
  background-position: center !important;
}

/* Dark overlay behind the form */
.login-page::before,
.register-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.65);
  z-index: 0;
  pointer-events: none;
}
.login-page .container,
.register-page .container {
  position: relative;
  z-index: 1;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Form card */
.login-form {
  background: rgba(15, 22, 36, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
}

/* Title */
.login-form__title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #e6edf3 !important;
  margin-bottom: 24px !important;
}
.login-form__title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: #22c55e;
  border-radius: 2px;
  margin-top: 8px;
}

/* Labels */
.login-form .form-label,
.login-form .form-check-label {
  color: #8b949e !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

/* Inputs */
.login-form .form-control,
.login-form .form--control {
  background: #0d1117 !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 8px !important;
  color: #e6edf3 !important;
  padding: 11px 14px !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: auto !important;
}
.login-form .form-control::placeholder,
.login-form .form--control::placeholder {
  color: #4b5563 !important;
}
.login-form .form-control:focus,
.login-form .form--control:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important;
  background: #0d1117 !important;
  color: #e6edf3 !important;
  outline: none !important;
}

/* Password toggle wrapper */
.login-form .input--group {
  border: 1px solid #2a3a5c !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #0d1117 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.login-form .input--group:focus-within {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important;
}
.login-form .input--group .form-control,
.login-form .input--group .form--control {
  border: none !important;
  box-shadow: none !important;
}
.login-form .input--group .input-group-text {
  background: #0d1117 !important;
  border: none !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  padding: 0 14px !important;
}
.login-form .input--group .input-group-text:hover {
  color: #e6edf3 !important;
}

/* Checkbox */
.login-form .custom--check {
  background: #0d1117 !important;
  border-color: #2a3a5c !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  flex-shrink: 0;
}
.login-form .custom--check:checked {
  background: #22c55e !important;
  border-color: #22c55e !important;
}
.login-form .sm-text,
.login-form .sm-text a {
  font-size: 0.78rem !important;
  color: #8b949e !important;
}
.login-form .sm-text a {
  color: #22c55e !important;
  text-decoration: none;
}
.login-form .sm-text a:hover { text-decoration: underline; }

/* Register / Submit button */
.login-form .btn--base.btn--xl {
  background: #22c55e !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 13px !important;
  border-radius: 8px !important;
  letter-spacing: 0.04em !important;
  transition: background 0.2s !important;
}
.login-form .btn--base.btn--xl:hover {
  background: #16a34a !important;
}

/* "Already have an account" row */
.login-form .t-link--base {
  color: #22c55e !important;
  font-weight: 600 !important;
}

/* Country select dropdown */
.login-form select.form--control {
  background: #0d1117 !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 8px !important;
  color: #e6edf3 !important;
  padding: 11px 14px !important;
  font-size: 0.9rem !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
.login-form select.form--control option {
  background: #0d1117 !important;
  color: #e6edf3 !important;
}

/* Phone input with country code prefix */
.login-form .mobile-code {
  background: #161b22 !important;
  border: none !important;
  color: #22c55e !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 0 12px !important;
  min-width: 52px !important;
}

/* Validation error text */
.login-form .text--danger {
  font-size: 0.75rem !important;
  color: #ef4444 !important;
  margin-top: 4px !important;
  display: block !important;
}

/* Mobile adjustments */
@media (max-width: 575px) {
  .login-form {
    padding: 28px 20px !important;
    border-radius: 12px !important;
  }
  .login-form__title { font-size: 1.2rem !important; }
}

/* =====================================================
   USER DASHBOARD — Base Layout
   ===================================================== */
.user-dashboard {
  background: var(--body-bg) !important;
  min-height: 100vh;
  padding: 24px 0 !important;
}
.dashboard-right h5 {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

/* Cards used in dashboard pages */
.custom--card,
.card.custom--card {
  background: #1a2234 !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.custom--card .card-body {
  padding: 24px !important;
}

/* =====================================================
   DEPOSIT PAGE
   ===================================================== */

/* Gateway list container */
.payment-system-list {
  background: #131c2e !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 10px !important;
  padding: 8px !important;
}

/* Individual gateway item */
.payment-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  background: rgba(255,255,255,0.03) !important;
}
.payment-item:last-child { margin-bottom: 0 !important; }
.payment-item:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.payment-item:has(.gateway-input:checked) {
  background: rgba(34,197,94,0.08) !important;
  border-color: rgba(34,197,94,0.35) !important;
}

/* Radio check indicator */
.payment-item__check {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid #4b5563 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
  background: transparent !important;
}
.payment-item:has(.gateway-input:checked) .payment-item__check {
  border-color: #22c55e !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15) !important;
}

.payment-item__info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}
.payment-item__name {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #c9d1d9 !important;
}
.payment-item:has(.gateway-input:checked) .payment-item__name {
  color: #22c55e !important;
}

.payment-item__thumb {
  width: 52px !important;
  height: 32px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.payment-item__thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 3px !important;
}

/* Right panel — deposit info */
.payment-system-list.p-3 {
  background: #131c2e !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 10px !important;
}

.deposit-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.deposit-info:last-of-type { border-bottom: none !important; }
.deposit-info .text {
  color: #8b949e !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}
.deposit-info__title .text { color: #8b949e !important; }
.deposit-info__input .text {
  color: #e6edf3 !important;
  font-weight: 600 !important;
  text-align: right !important;
}
.deposit-info.total-amount .text { color: #e6edf3 !important; font-weight: 700 !important; }

/* Amount input group */
.deposit-info__input-group.input-group {
  border: 1px solid #2a3a5c !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #0d1117 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.deposit-info__input-group.input-group:focus-within {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important;
}
.deposit-info__input-group .deposit-info__input-group-text {
  background: #0d1117 !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 0.9rem !important;
  padding: 10px 12px !important;
}
.deposit-info__input-group .form-control,
.deposit-info__input-group .form--control {
  background: #0d1117 !important;
  border: none !important;
  color: #e6edf3 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  box-shadow: none !important;
}
.deposit-info__input-group .form-control::placeholder { color: #4b5563 !important; }
.deposit-info__input-group .form-control:focus { box-shadow: none !important; }

/* Divider */
.deposit-form hr {
  border-color: rgba(255,255,255,0.07) !important;
  margin: 4px 0 !important;
}

/* Fee info icon */
.proccessing-fee-info i { color: #6b7280 !important; }

/* Confirm Deposit button */
.deposit-form .btn--base {
  background: #22c55e !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 13px !important;
  border-radius: 8px !important;
  letter-spacing: 0.04em !important;
  transition: background 0.2s !important;
  margin-top: 8px !important;
}
.deposit-form .btn--base:hover { background: #16a34a !important; }
.deposit-form .btn--base:disabled {
  background: #1f4030 !important;
  color: #4b5563 !important;
  cursor: not-allowed !important;
}

/* Info text at bottom */
.info-text .text {
  font-size: 0.75rem !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
}

/* Crypto message */
.crypto-message {
  font-size: 0.78rem !important;
  color: #f59e0b !important;
  background: rgba(245,158,11,0.08) !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  border-left: 3px solid #f59e0b !important;
}

/* =====================================================
   MARKETS PAGE — Odds List
   ===================================================== */

/* Page title */
.odd-list__title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

/* Match header banner */
.odd-list__head {
  background: linear-gradient(135deg, #1a3a2a 0%, #1a2234 100%) !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 10px !important;
}
.odd-list__team-name {
  color: #e6edf3 !important;
  font-weight: 600 !important;
}
.odd-list__team-divide {
  color: #6b7280 !important;
}
.odd-list__team-img-is {
  border-radius: 50% !important;
}

/* Accordion for each market */
.accordion--odd {
  background: transparent !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.accordion--odd .accordion-item {
  background: transparent !important;
  border: none !important;
}

/* Market title button */
.accordion--odd .accordion-button {
  background: rgba(0,0,0,0.2) !important;
  color: #22c55e !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border: none !important;
  box-shadow: none !important;
}
.accordion--odd .accordion-button::after {
  filter: brightness(0) invert(0.5) !important;
}
.accordion--odd .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(0.7) !important;
}

/* Accordion body */
.accordion--odd .accordion-collapse {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.accordion--odd .accordion-body {
  background: #1a2234 !important;
  padding: 8px !important;
}

/* Outcomes list */
.odd-list__outcomes {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Each outcome row */
.odd-list__outcomes li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #131c2e !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.odd-list__outcomes li:hover {
  background: #1e2d45 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Outcome name text */
.odd-list__outcome-text {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #c9d1d9 !important;
}

/* Odds button */
.odd-list__outcome.oddBtn {
  background: #1e2d45 !important;
  border: 1px solid #2a3a5c !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  min-width: 60px !important;
  text-align: center !important;
}
.odd-list__outcome.oddBtn:hover {
  background: #2a3f60 !important;
  border-color: hsl(var(--base)) !important;
}
.odd-list__outcome.oddBtn.active {
  background: hsl(var(--base) / 0.2) !important;
  border-color: hsl(var(--base)) !important;
}
.odd-list__outcome.oddBtn.locked {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Odds ratio number */
.odd-list__outcome-ratio {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: hsl(var(--base)) !important;
}
.odd-list__outcome.oddBtn.active .odd-list__outcome-ratio {
  color: #fff !important;
}