/* Shared sportsbook betting-widget styles. Pairs with /assets/js/sportsbook.js.
   Used by /sports/football/nfl/, /sports/baseball/mlb/, and any other scoreboard
   page that calls Sportsbook.mount() — see that file's header comment for wiring.
   Relies on each page's own .odds-modal-overlay / .odds-modal shell (already used
   there for the "Odds Explained" dice popup) for the modal chrome; everything below
   is specific to the betting flow itself. */

.bet-btn {
  background: rgba(255,214,0,0.1);
  border: 1px solid rgba(255,214,0,0.4);
  color: #ffd600;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 10px;
  margin-left: 6px;
  cursor: pointer;
  font-family: inherit;
  vertical-align: 1px;
  transition: all 0.15s;
}
.bet-btn:hover { background: rgba(255,214,0,0.22); transform: scale(1.05); }

.bankroll-hud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, rgba(20,40,20,0.95), rgba(10,25,12,0.95));
  border: 1px solid rgba(255,214,0,0.45);
  color: #ffd600;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 14px rgba(255,214,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: 'Georgia', serif;
}
.bankroll-hud:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 20px rgba(255,214,0,0.28); }
.bankroll-hud .chip-icon { font-size: 1rem; }

.bet-modal-sub {
  font-size: 0.78rem;
  color: #9db8ab;
  margin-bottom: 14px;
}
.bet-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.bet-opt {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ddd;
  font-size: 0.75rem;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.bet-opt:hover { background: rgba(255,255,255,0.1); }
.bet-opt.picked {
  background: rgba(255,214,0,0.18);
  border-color: #ffd600;
  color: #ffd600;
}
.bet-group { margin-bottom: 14px; }
.bet-group-label {
  font-size: 0.7rem;
  color: #7a9fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.bet-help-text {
  font-size: 0.7rem;
  color: #8fa08f;
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 8px;
}
.stake-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.stake-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ddd;
  font-size: 0.72rem;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.stake-btn:hover { background: rgba(255,255,255,0.1); }
.stake-btn.picked {
  background: rgba(122,159,255,0.2);
  border-color: #7a9fff;
  color: #7a9fff;
}
.confirm-bet-btn {
  width: 100%;
  background: linear-gradient(145deg, #ffd600, #e6a800);
  border: none;
  color: #1a1400;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 11px;
  border-radius: 9px;
  cursor: pointer;
  font-family: 'Georgia', serif;
  letter-spacing: 0.02em;
  transition: transform 0.15s, opacity 0.15s;
}
.confirm-bet-btn:hover:not(:disabled) { transform: translateY(-1px); }
.confirm-bet-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.bet-disclaimer {
  font-size: 0.65rem;
  color: #667;
  text-align: center;
  margin-top: 12px;
  font-style: italic;
}

.my-bets-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.75rem;
  color: #ccc;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.my-bets-row:last-child { border-bottom: none; }
.my-bets-row.win .outcome-tag { color: #6fdc8c; }
.my-bets-row.loss .outcome-tag { color: #ff8f8f; }
.my-bets-row.push .outcome-tag { color: #ccc; }
.my-bets-section-label {
  font-size: 0.7rem;
  color: #7a9fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 4px;
}
.my-bets-section-label:first-child { margin-top: 0; }
.reset-bankroll-btn {
  width: 100%;
  background: none;
  border: 1px solid rgba(255,143,143,0.4);
  color: #ff8f8f;
  font-size: 0.72rem;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 16px;
}
.reset-bankroll-btn:hover { background: rgba(255,143,143,0.08); }
.save-file-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.save-file-btn {
  flex: 1;
  background: none;
  border: 1px solid rgba(122,159,255,0.4);
  color: #7a9fff;
  font-size: 0.72rem;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.save-file-btn:hover { background: rgba(122,159,255,0.08); }

/* Toasts */
#sb-toast-wrap {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.sb-toast {
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(8,20,10,0.95);
  border: 2px solid rgba(111,220,140,0.6);
  color: #eafff0;
  font-size: 0.78rem;
  box-shadow: 0 0 20px rgba(111,220,140,0.3);
  animation: sbToastIn 0.25s ease, sbToastOut 0.4s ease 2.9s forwards;
  font-family: 'Georgia', serif;
}
.sb-toast.loss { border-color: rgba(255,143,143,0.6); box-shadow: 0 0 20px rgba(255,143,143,0.25); }
@keyframes sbToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbToastOut { to { opacity: 0; transform: translateY(-10px); } }

/* Confetti */
#sb-confetti-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1050;
  overflow: hidden;
}
.sb-confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: 0.95;
  animation: sbConfettiFall linear forwards;
}
@keyframes sbConfettiFall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0.3; }
}

@media (max-width: 600px) {
  .bankroll-hud { right: 12px; bottom: 12px; padding: 8px 13px; font-size: 0.78rem; }
}