:root {
  /* used for mobile */
  --viewport-height: 100%;

  /* colors (deduplicated key ones) */
  --blue: #046df6;
  --darkBlue: rgb(5, 40, 90);
  --darkSlateBlue: #445c76;
  --dodgerBlue: #066ef6; /* keep just one */
  --ghostWhite: #f8f9fa;
  --green: #0fa810;
  --leaguesBlue: #05285a;
  --leaguesColor: #cdd4de;
  --solitude: #edf2f9;
  --topBar: rgb(168, 28, 28);
  /* --topBar: rgb(43, 144, 255); */
  --header: linear-gradient(125deg, rgb(76, 77, 99) 0%, rgb(57, 58, 60) 100%);
  /* --header: linear-gradient(125deg, rgb(0, 95, 200) 0%, rgb(0, 61, 129) 100%); */
  --sidebar: rgb(222, 222, 222);
  /* --sidebar: rgb(5, 40, 90); */

  /* grays (keep unique ones) */
  --gray: #ccc;
  --darkGray: #333;
  --gainsboro: #ddd;
  --medGray: #72777f;
  --veryLightGrey: #cacaca;

  /* gradients */
  --blueGradient: linear-gradient(90deg, var(--tiber) 0%, #0c0456 100%);

  /* global text colors */
  --global-font-color: #111;
  --global-colors-primary: var(--dodgerBlue);

  --font-1: "Roboto", sans-serif;
  --font-2: "Oswald", sans-serif;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--solitude);
  line-height: 1.6;
  font-family: var(--font-1);
  font-optical-sizing: auto;
  color: var(--global-font-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

* {
  box-sizing: border-box;
  -webkit-user-select: default;
  -moz-user-select: default;
  user-select: default;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  /* remove global styling or keep minimal */
  cursor: pointer;
}

/* safer focus style instead of removing it */
:focus {
  outline: 2px solid var(--dodgerBlue);
  outline-offset: 2px;
}

/* font-size helpers */
.fs-06 {
  font-size: 0.6rem;
}
.fs-07 {
  font-size: 0.7rem;
}
.fs-08 {
  font-size: 0.8rem;
}
.fs-09 {
  font-size: 0.9rem;
}
.fs-10 {
  font-size: 1rem;
}
.fs-12 {
  font-size: 1.2rem;
}
.fs-14 {
  font-size: 1.4rem;
}
.fs-16 {
  font-size: 1.6rem;
}
.fs-18 {
  font-size: 1.8rem;
}

.blueLight {
  background-color: var(--dodgerBlue);
}

.blueDark {
  background-color: var(--darkBlue);
}

header {
  background: var(--header);
  font-family: var(--font-2);
}

.top-bar {
  background-color: var(--topBar);
  padding: 0.25rem 0.5rem;
}
/* Sidebar */
.leagues-Sidebar {
  background-color: var(--sidebar);
  color: var(--darkGray);
  min-height: 100vh;
  height: auto;
  min-width: 320px;
  padding: 1rem;
  font-family: var(--font-2);
  font-size: 0.875rem;
  text-transform: uppercase;
}

.leagues-Sidebar h3 {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(248, 249, 250, 0.2);
}

.leagues-Sidebar a {
  display: block;
  padding: 0.25rem;
}

.leagues-Sidebar a:hover {
  background-color: var(--darkGray);
  color: #fff;
}

.leagues-Sidebar a.active {
  background-color: var(--darkGray);
  color: #fff;
  font-weight: 600;
}

.leagues-Sidebar .sport-icon {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.leagues-Sidebar .sport-icon-2 {
  width: 18px;
  height: 18px;
  line-height: 30px;
  opacity: 0.75;
  vertical-align: middle;
}

.leagues-Sidebar .sport-icon-small {
  max-width: 14px;
  max-height: 14px;
}

.leagues-Sidebar .btn-toggle {
  background: transparent;
  border: 0;
  color: var(--darkGray);
  padding: 0.25rem 0;
  font-weight: 400;
  font-size: 0.875rem;
  text-align: left;
  text-transform: uppercase;
}

.leagues-Sidebar .btn-toggle:hover,
.leagues-Sidebar .btn-toggle:active {
  background-color: var(--darkGray);
  color: #fff;
}

.leagues-Sidebar .btn-toggle:focus {
  box-shadow: none;
}

.leagues-Sidebar .btn-toggle i {
  transition: transform 0.2s ease;
}

.leagues-Sidebar .btn-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

.leagues-Sidebar .nav-link {
  color: var(--darkGray);
  font-size: 0.875rem;
}

.leagues-Sidebar .nav-link:hover {
  color: var(--medGray);
}

.leagues-Sidebar .collapse .nav-link {
  color: var(--darkGray);
}

.leagues-Sidebar .collapse .nav-link:hover {
  background-color: var(--darkGray);
  color: var(--ghostWhite);
}

/* odds & betslip */

.top-links-scroll a {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-family: var(--font-2);
  font-weight: 500;
  line-height: 1.1;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-right: 3px;
  text-wrap: nowrap;
  text-transform: uppercase;
  cursor: pointer;
}

.top-links-scroll a.active,
.top-links-scroll a:hover {
  background-color: #0d6efd;
  color: #fff;
}

.btn-period {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-family: var(--font-2);
  font-weight: 500;
  line-height: 1.1;
  border-radius: 4px 4px 0px 0px;
  margin-right: 3px;
  text-wrap: nowrap;
  cursor: pointer;
}

.btn-period.active,
.btn-period:hover {
  background-color: #dedede;
  border-bottom: 2px solid #c22424;
}

.odds-area {
  padding: 1rem;
}

.game-row {
  transition: background-color 0.15s ease-in-out;
}

.game-row:hover {
  background-color: #f8f9fa; /* or your custom accent color */
}

/* shared odds button styling */
.btn-bet {
  min-height: 48px; /* same height for every odds button */
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.1;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    transform 0.05s ease-in-out;
}

/* PRIMARY odds button (fav, current side, etc.) */
.btn-bet.btn-primary {
  background-color: #066ef6; /* your dodger blue */
  border-color: #066ef6;
  color: #fff;
}

.btn-bet.btn-primary:hover,
.btn-bet.btn-primary:focus {
  background-color: #0556c4;
  border-color: #0556c4;
  box-shadow: 0 0 0 0.15rem rgba(6, 110, 246, 0.25);
}

/* SECONDARY odds button (other side / alt lines) */
.btn-bet.btn-outline-secondary {
  background-color: #ffffff;
  border-color: #ced4da;
  color: #495057;
}

.btn-bet.btn-outline-secondary:hover,
.btn-bet.btn-outline-secondary:focus {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  box-shadow: 0 0 0 0.15rem rgba(173, 181, 189, 0.25);
}

/* CLICKED / SELECTED state – use Bootstrap's .active class */
.btn-bet.active {
  background-color: #198754; /* green “selected” state */
  border-color: #198754;
  color: #fff;
  box-shadow: 0 0 0 0.15rem rgba(25, 135, 84, 0.35);
  transform: translateY(1px);
}

main.d-flex {
  min-height: calc(100vh - 56px);
}

.leagues-Sidebar,
.odds-area {
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
}

.betSlip {
  padding: 1rem;
  min-width: 340px;
}

/* Desktop sticky bet slip */
@media (min-width: 768px) {
  .betSlip {
    position: sticky;
    top: 0; 
    max-height: 100vh; 
    overflow-y: auto; 
    align-self: flex-start; 
  }
}

/* little CASH OUT pill */
.btn-xs.btn-cashout {
  padding: 2px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 3px;
  background-color: #d1d8e5;
  border-color: #d1d8e5;
  color: #333f4c;
}

/* labels above inputs */
.bet-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
}

/* wager / to win fields */
.bet-input .input-group-text {
  background-color: #ffffff;
}

.bet-input-muted .input-group-text,
.bet-input-muted .form-control {
  background-color: #f5f5f5;
}

/* remove-all row */
.bet-remove-all {
  cursor: pointer;
}

.bet-remove-all:hover {
  background-color: #fdf2f2;
}

/* horizontal scroll strip on mobile */
@media (min-width: 576px) {
  body {
    font-size: 1.2em;
  }
}

@media (max-width: 767.98px) {
  body {
    padding-bottom: 98px;
  }

  .top-links-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .top-links-scroll::-webkit-scrollbar {
    display: none;
  }

  .cat-links-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cat-links-scroll::-webkit-scrollbar {
    display: none;
  }

  .odds-area {
    padding: 0.5rem;
  }

  .game-row .btn-bet span {
    font-size: 0.7rem;
  }
}

/* bottom nav base */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* above content, below modals */
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 64px;
}

/* nav items */
.mobile-bottom-nav__item {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
  color: #777777;
  padding-top: 6px;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* icon */
.mobile-bottom-nav__icon {
  font-size: 1.5rem;
  line-height: 1;
}

/* label */
.mobile-bottom-nav__label {
  font-size: 0.75rem;
  margin-top: 2px;
}

/* active state = blue like screenshot */
.mobile-bottom-nav__item.active {
  color: #066ef6; /* or use your --dodgerBlue variable */
}

.mobile-bottom-slip {
  position: fixed;
  bottom: 68px;
  left: 0;
  right: 0;
  z-index: 1040; /* above content, below modals */
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 30px;
}

@media (max-width: 767.98px) {
  .history-table thead {
    display: none;
  }

  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
  }

  .history-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-body-bg);
  }

  .history-table td {
    position: relative;
    padding-left: 40%;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    word-wrap: break-word;
  }

  .history-table td:last-child {
    border-bottom: none;
  }

  .history-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    top: 0.5rem;
    width: 35%;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: none;
    opacity: 0.8;
    white-space: normal;
  }
}