/* ===== Bets page (#/bets) ===== */
.betsPage .pageOverlay__inner { max-width: var(--width-layout); }

.betBalance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}
.betBalance__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
}
.betBalance__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.betBalance__hint {
  font-size: 12px;
  color: var(--color-support-2);
  max-width: 420px;
}
.betBalance__stats {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
}
.betBalance__stats:hover { text-decoration: underline; }

/* ---------- betting statistics (profile) ---------- */
.statsWrap { display: grid; gap: 14px; }
.statsKpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.statCard {
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  padding: 14px;
  display: grid;
  gap: 4px;
}
.statCard--accent { border-color: var(--color-primary); }
.statCard__label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
}
.statCard__value { font-size: 22px; font-weight: 800; color: var(--color-white); font-variant-numeric: tabular-nums; }
.statCard__sub { font-size: 11px; color: var(--color-support-2); }

.statsWrap .pos { color: var(--color-green); }
.statsWrap .neg { color: var(--color-red); }

.statsMini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.statsMini > div {
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.statsMini span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-support-2);
}
.statsMini b { font-size: 14px; color: var(--color-white); font-variant-numeric: tabular-nums; }

.statsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.statsPanel {
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  padding: 14px;
  overflow-x: auto;
}
.statsPanel__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
}
.statsTable { width: 100%; border-collapse: collapse; font-size: 12px; }
.statsTable th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-support-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.statsTable td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-support-4);
  font-variant-numeric: tabular-nums;
}
.statsTable tbody tr:last-child td { border-bottom: 0; }
.statMarket { min-width: 170px; color: var(--color-white); font-weight: 600; }
.statBar {
  display: block;
  margin-top: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-secondary-3);
  overflow: hidden;
}
.statBar i { display: block; height: 100%; background: var(--color-primary); }
.statEmpty { color: var(--color-support-3); font-size: 12px; padding: 10px 2px; }

.selRow { padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
.selRow:last-child { border-bottom: 0; }
.selRow__name { font-size: 12px; font-weight: 700; color: var(--color-white); }
.selRow__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-secondary-3);
  margin: 6px 0 4px;
  overflow: hidden;
}
.selRow__bar i { display: block; height: 100%; background: var(--color-green); }
.selRow__meta { font-size: 11px; color: var(--color-support-2); display: flex; justify-content: space-between; gap: 8px; }

.statsForm { display: grid; gap: 12px; }
.statsForm__dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.statsForm__label { font-size: 12px; color: var(--color-support-2); margin-right: 6px; }
.formDot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.formDot--won { background: var(--color-green); }
.formDot--lost { background: var(--color-red); }
.statsForm__split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.statType { background: var(--color-support-2); border-radius: 8px; padding: 10px; display: grid; gap: 3px; }
.statType span { font-size: 11px; color: var(--color-support-2); text-transform: uppercase; font-weight: 700; }
.statType b { font-size: 15px; }
.statType small { font-size: 11px; color: var(--color-support-3); }

@media (max-width: 760px) {
  .statsKpis, .statsMini { grid-template-columns: 1fr 1fr; }
  .statsGrid { grid-template-columns: 1fr; }
  .statsForm__split { grid-template-columns: 1fr; }
}

/* Match rows with odds */
.betGroup + .betGroup { margin-top: 12px; }
.betRow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-divider);
}
.betRow:first-child { border-top: 0; }
.betRow__info { min-width: 0; flex: 1; }
.betRow__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.betRow__team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
}
.betRow__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betRow__team--away { justify-content: flex-end; }
.betRow__crest { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.betRow__vs {
  min-width: 52px;
  text-align: center;
  font-weight: 800;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.betRow__meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-support-3);
}
.betRow__live {
  color: var(--color-primary);
  font-weight: 800;
}

.betRow__odds {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.betRow__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.betAllBtn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-secondary-3);
  background: transparent;
  color: var(--color-support-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.betAllBtn:hover { background: var(--color-secondary-3); color: var(--color-white); border-color: var(--color-primary); }

/* All markets modal */
.marketsBox {
  max-width: 780px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.marketsMatch {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 10px;
}
.marketsList {
  overflow-y: auto;
  max-height: 64vh;
  display: grid;
  gap: 14px;
  padding-right: 6px;
}
.mktsGroup { border-top: 1px solid var(--color-divider); padding-top: 10px; }
.mktsGroup:first-child { border-top: 0; padding-top: 0; }
.mktsName {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-support-2);
  margin-bottom: 8px;
}
.mktsOutcomes { display: flex; flex-wrap: wrap; gap: 6px; }
.mktsOdd {
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.mktsOdd span { font-size: 11px; color: var(--color-support-2); font-weight: 700; }
.mktsOdd b { font-size: 12px; }
.oddBtn {
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-secondary-3);
  background: var(--color-secondary-1);
  color: var(--color-support-2);
  font-size: 10px;
  font-weight: 700;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.oddBtn b {
  font-size: 13px;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.oddBtn:hover { background: var(--color-secondary-3); border-color: var(--color-primary); }
.oddBtn:hover b { color: var(--color-primary); }
.oddBtn.is-suspended,
.oddBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--color-secondary-1);
  border-color: var(--color-secondary-3);
}
.oddBtn.is-suspended b,
.oddBtn:disabled b { color: var(--color-support-2); }
.oddBtn.is-suspended:hover,
.oddBtn:disabled:hover { border-color: var(--color-secondary-3); background: var(--color-secondary-1); }
.oddBtn.is-suspended:hover b,
.oddBtn:disabled:hover b { color: var(--color-support-2); }

/* My bets */
.myBets {
  margin-top: 18px;
  padding: 14px;
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
}
.myBetRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-support-2);
  border-radius: 6px;
}
.myBetRow__name { font-size: 13px; font-weight: 700; color: var(--color-white); }
.myBetRow__meta { font-size: 11px; color: var(--color-support-2); margin-top: 2px; }
.betStatus {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.betStatus--open { background: rgba(255, 0, 70, 0.15); color: var(--color-primary); }
.betStatus--won { background: rgba(0, 214, 143, 0.15); color: var(--color-green); }
.betStatus--lost { background: rgba(220, 0, 0, 0.15); color: var(--color-red); }
.betStatus--void { background: var(--color-secondary-3); color: var(--color-support-2); }

/* Bet modal */
.betModalBox { max-width: 380px; }
.betModal__match {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}
.betModal__pick {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-support-2);
}
.betModal__pick b { color: var(--color-primary); }
.betModal__quick { display: flex; gap: 6px; margin: -2px 0 10px; }
.betQuick {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--color-secondary-3);
  background: transparent;
  color: var(--color-support-2);
  font-size: 11px;
  font-weight: 700;
}
.betQuick:hover { background: var(--color-secondary-3); color: var(--color-white); }
.betModal__potential {
  font-size: 12px;
  color: var(--color-support-2);
  margin-bottom: 12px;
}
.betModal__potential b { color: var(--color-green); }
.betModal__submit { width: 100%; }

@media (max-width: 640px) {
  .betRow { flex-direction: column; align-items: stretch; gap: 8px; }
  .betRow__right { flex-direction: column; align-items: stretch; }
  .betRow__odds { justify-content: stretch; }
  .oddBtn { flex: 1; min-width: 0; }
  .betRow__team { font-size: 12px; }
  .betAllBtn { width: 100%; }
}