/* BetSlip Colors — variables now in themes.css */

.bet-slip-toggle {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 24px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999;
  cursor: pointer;
  box-shadow: 0 4px 8px var(--black-30);
}

.bet-slip-panel {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--bg-secondary);
  border: 1px solid var(--separator-light);
  border-radius: 12px;
  padding: 16px;
  color: var(--text-primary);
  z-index: 9999;
  box-shadow: 0 4px 16px var(--black-50);
}

.bet-slip-header {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.5fr;
  grid-gap: 8px;
  gap: 8px;
  margin: 0px 0px 5px 0px;
  border-bottom: 1px solid var(--separator);
  padding: 5px 15px;
  min-height: 45px;
}

.bet-slip-header-count {
  display: flex;
  align-items: center;
}

.bet-slip-count-number {
  background-color: var(--accent-blue);
  font-family: Proxima Nova, sans-serif;
  color: var(--text-primary);
  border-radius: 4px;
  padding: 1px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  min-width: 20px;
  text-align: center;
  margin: 0 10px 0 3px;
}

.bet-slip-count-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.bet-mode-btn {
  background-color: transparent;
  font-family: Proxima Nova, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
  padding: 4px 10px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.bet-mode-btn.active {
  background-color: var(--accent-blue);
  color: var(--text-on-accent);
}

.bet-mode-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bet-slip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bet-slip-list li {
  align-items: stretch;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px 10px 10px 10px;
}

.bet-slip-list li button {
  background: var(--accent-red-muted);
  color: var(--accent-red);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.place-bet {
  background-color: var(--accent-green);
  border: none;
  color: var(--text-on-accent);
  font-weight: bold;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px 10px 10px 10px;
  font-size: 16px;
  box-shadow: 0 2px 6px var(--black-40);
  text-align: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.place-bet:hover {
  background-color: var(--accent-green-hover);
}

.place-bet.disabled {
  background-color: var(--bg-quaternary);
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

.place-bet:disabled {
  background-color: var(--text-tertiary);
  font-weight: bold;
  color: var(--text-quaternary);
}

.place-bet:disabled::after {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: bold;
  text-align: center;
}

.empty-slip {
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
}

.bet-slip-item {
  background: var(--gradient-fixture);
  padding: 12px;
  border-radius: 10px;
  margin: 5px;
  color: var(--text-primary);
  position: relative;
  box-shadow: 0 4px 8px var(--black-30);
}

.bet-slip-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.bet-slip-item.market-locked {
  opacity: 0.5;
}

.remove-bet {
  position: absolute;
  background: none;
  border: none;
  color: var(--accent-red);
  font-size: 16px;
  cursor: pointer;
  right: 12px;
  top: 9px;
  border: 2px solid var(--accent-red);
  font-weight: bold;
  border-radius: 20px;
  height: 20px;
  width: 20px;
  line-height: 16px;
  padding: 0px;
}

.bet-main {
  align-items: start;
  display: flex;
  min-height: 30px;
  justify-content: space-between;
  padding: 5px 35px 0 3px;
}

.bet-title {
  font-weight: bold;
  font-size: 14px;
  text-transform: capitalize;
  display: flex;
  gap: 10px;
}

.bet-selection-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
}

.bet-period {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  color: #f7b500;
  color: var(--accent-gold, #f7b500);
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 4px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.bet-period-score {
  margin-left: 6px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold-border);
  border-radius: 3px;
  padding: 1px 5px 0px 5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.bet-title-wrapper {
  display: flex;
  flex-direction: column;
}

.bet-odds {
  font-weight: bold;
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.bet-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-family: 'Proxima Nova Cond', sans-serif;
  margin-bottom: 7px;
  line-height: 11px;
  padding-top: 3px;
}

.bet-fixture {
  color: var(--text-primary);
  display: flex;
  border-bottom: 1px solid var(--separator);
  padding: 0 3px 4px 3px;
  font-size: 14px;
  line-height: 15px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 500;
}

.bet-stake-area {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-secondary);
  justify-content: start;
  border-top: 1px solid var(--white-10);
  padding-top: 10px;
}

.to-win-amount {
  font-family: proxima nova;
  color: var(--text-primary);
  font-size: 16px;
}

.max-bet-amount {
  font-family: proxima nova;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: normal;
  padding-left: 5px;
}

.bet-stake-area input {
  padding: 6px 8px;
  font-size: 16px; /* >= 16px prevents iOS zoom on focus */
  background-color: var(--bg-quaternary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

/* Stake input wrapper */
.input-wrapper {
  display: flex;
  align-items: center;
  background: #2a2a2c;
  background: var(--bg-tertiary, #2a2a2c);
  border: 1px solid #444;
  border: 1px solid var(--separator-light, #444);
  border-radius: 4px;
  padding: 0 8px;
  height: 36px;
  flex: 1 1;
}

.input-wrapper:focus-within {
  border-color: #4a90d9;
  border-color: var(--accent-blue, #4a90d9);
}

.input-currency {
  color: #999;
  color: var(--text-secondary, #999);
  font-size: 16px;
  font-weight: 600;
  margin-right: 4px;
}

.stake-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  color: var(--text-primary, #fff);
  font-size: 16px; /* >= 16px prevents iOS zoom on focus */
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'Proxima Nova', sans-serif;
  width: 100%;
  padding: 0;
}

.stake-input::placeholder {
  color: #666;
  color: var(--text-quaternary, #666);
}

.stake-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.to-win {
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  line-height: 14px;
  padding-bottom: 2px;
  padding-left: 5px;
}

.max-bet {
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  gap: 0;
  display: flex;
  flex-direction: row;
  line-height: 14px;
  padding-left: 5px;
  margin-top: 5px;
}

.max-bet-multi {
  border-bottom: 1px solid var(--separator);
  background-color: var(--bg-primary);
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  gap: 0;
  display: flex;
  flex-direction: row;
  line-height: 14px;
  padding: 5px 20px 5px 20px;
}

.bet-slip-wrapper {
  position: fixed;
  top: 30px;
  bottom: 0;
  max-width: 500px;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10000;
  background-color: var(--bg-primary);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--text-primary);
  box-shadow: 0 -2px 12px var(--black-40);
  border-top: 1px solid var(--separator);
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.bet-slip-scrollable {
  border-bottom: 1px solid var(--separator);
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 100%;
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  z-index: 0;
}

body.bet-slip-open {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
  touch-action: none;
}

.bet-slip-header .minimize-slip {
  font-size: 18px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transform: rotate(180deg);
  padding: 4px 8px;
  position: relative;
  line-height: 1;
  top: 3px;
  right: -12px;
}

.bet-slip-footer-bar {
  position: fixed;
  bottom: 80px;
  right: 16px;
  left: auto;
  margin: 0;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  background: rgba(20, 137, 255, 0.68);
  backdrop-filter: blur(3px) saturate(200%);
  -webkit-backdrop-filter: blur(3px) saturate(200%);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
  z-index: 2400;
  border: 1px solid rgba(84, 169, 255, 0.78);
  cursor: pointer;
  border-radius: 50%;
  box-shadow:
    0 8px 32px var(--black-25),
    inset 0 1px 0 var(--white-10),
    0 0 20px rgba(10, 132, 255, 0.3);
  animation: slideUpFooter 0.3s ease-out forwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bet-slip-footer-bar:active {
  transform: scale(0.95);
}

.bet-slip-footer-bar .bet-slip-count-number {
  background: none;
  padding: 0;
  margin: 0;
  min-width: auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-on-accent);
}

/* PWA standalone mode */
@media (display-mode: standalone) {
  .bet-slip-footer-bar {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

@keyframes slideUpFooter {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.bet-slip-footer-count {
  font-size: 14px;
}

.bet-slip-footer-toggle {
  font-size: 16px;
  line-height: 1;
  color: var(--white-90);
  display: flex;
  align-items: center;
}

.bet-time {
  color: var(--text-tertiary);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 12px;
  margin-top: 2px;
  display: flex;
  white-space: nowrap;
  align-self: end;
  padding-left: 28px;
  text-transform: uppercase;
}

.bet-slip-count-label {
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
  color: var(--text-primary);
}

.wager-input-wrapper {
  position: relative;
  font-family: 'Proxima Nova', sans-serif;
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 35px;
}

.wager-input-wrapper.disabled {
  background-color: var(--bg-tertiary);
  cursor: not-allowed;
  border-radius: 4px;
}

.wager-input-wrapper.disabled .fake-input {
  background-color: var(--bg-tertiary);
  pointer-events: none;
  color: var(--text-quaternary);
  border: 1px solid var(--separator);
}

.wager-input-wrapper.active .fake-input {
  border: 1px solid var(--accent-blue);
}

.fake-input {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--separator-light);
  padding: 12px 8px 0px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 4px;
  font-family: 'Proxima Nova', sans-serif;
  cursor: pointer;
  position: relative;
  z-index: 2;
  height: 21px;
  width: 102px;
  transition: border 0.2s ease;
}

.floating-label {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-tertiary);
  font-family: 'Proxima Nova Cond', sans-serif;
  transition: all 0.2s ease;
  pointer-events: none;
  text-transform: uppercase;
  padding: 0 4px;
  z-index: 3;
}

.floating-label.active {
  color: var(--accent-blue);
  font-size: 10px;
  left: 5px;
  top: 10px;
}

.wager-input-wrapper input {
  padding: 15px 8px 3px;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--bg-quaternary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: 'Proxima Nova', sans-serif;
}

.custom-keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  gap: 3px;
  padding: 8px;
  border-top: 1px solid var(--separator);
  position: relative;
  z-index: 10;
}

.custom-keyboard button {
  background-color: var(--keyboard-key);
  color: var(--text-primary);
  padding: 8px;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Proxima Nova', sans-serif;
  transition: background-color 0.2s;
}

.custom-keyboard button:hover {
  background-color: var(--bg-tertiary);
}

.custom-keyboard button:active {
  background-color: var(--accent-blue);
}

.custom-keyboard button:not(:active) {
  background-color: var(--keyboard-key);
}

/* Accept Changes mode - yellow warning button */
.place-bet.accept-mode {
  background-color: var(--accent-warning);
}

.place-bet.accept-mode:hover {
  background-color: var(--accent-warning-hover);
}

.old-odds {
  text-decoration: line-through;
  color: var(--text-tertiary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

.new-odds {
  color: var(--text-primary);
  font-weight: bold;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.regular-odds {
  color: var(--text-primary);
  font-weight: bold;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.success-notification {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-green);
  color: var(--text-primary);
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px var(--black-20);
  z-index: 9999;
  white-space: nowrap;
  animation: fadeInOut 5s ease-in-out;
}

@keyframes slideIn {
  0% { top: -50px; opacity: 0; }
  100% { top: 10px; opacity: 1; }
}

@keyframes slideOut {
  0% { opacity: 1; top: 10px; }
  100% { opacity: 0; top: -50px; }
}

/* Loading overlay when placing bet */
.placing-bet-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black-70);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  pointer-events: all;
  border-radius: 5px;
}

.placing-bet-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--white-20);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.placing-bet-text {
  margin-top: 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Proxima Nova', sans-serif;
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Legacy spinner (keep for compatibility) */
.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--text-secondary);
  height: 100%;
  background-color: var(--black-60);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--white-20);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.odds-animate {
  display: inline-block;
  position: relative;
  animation: oddsChange 0.35s ease-in-out;
}

@keyframes oddsChange {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { transform: translateY(0%); opacity: 1; }
  100% { transform: translateY(0%); opacity: 1; }
}

.flash-up {
  animation: flashUp 60s ease-in-out;
}

.flash-down {
  animation: flashDown 60s ease-in-out;
}

@keyframes flashUp {
  0% { color: var(--accent-green); }
  50% { color: var(--accent-green); }
  100% { color: var(--text-primary); }
}

@keyframes flashDown {
  0% { color: var(--accent-red); }
  50% { color: var(--accent-red); }
  100% { color: var(--text-primary); }
}

.bet-status-note {
  color: var(--accent-orange);
  font-size: 10px;
  font-weight: 500;
  font-family: 'Proxima Nova', sans-serif;
  margin-top: 1px;
}

.bet-status-note-multi {
  color: var(--accent-red);
  font-family: Proxima Nova,sans-serif;
  font-weight: 500;
  display: flex;
  align-items: end;
  font-size: 17px;
}

.error-notification {
  position: fixed;
  text-align: center;
  white-space: nowrap;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-red);
  color: var(--text-primary);
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 15px;
  z-index: 15000;
  box-shadow: 0 2px 10px var(--black-25);
  animation: fadeInOut 5s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ===== Multiple Stake Summary Styles ===== */
.multiple-stake-summary {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'Proxima Nova', sans-serif;
}

.multiple-stake-summary .wager-input-wrapper {
  height: 35px;
}

.multiple-wager-input {
  padding: 10px 12px;
  font-size: 16px;
  background-color: var(--bg-quaternary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 100%;
  font-weight: 600;
}

.multiple-stake-summary .to-win {
  align-items: start;
  color: var(--accent-blue);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  padding: 0 4px;
  height: auto;
}

.multiple-stake-summary .to-win-amount {
  font-size: 16px;
  color: var(--text-primary);
}

/* Mode toggle buttons */
.bet-mode-toggle {
  width: 100%;
  display: flex;
}

.bet-mode-toggle button {
  background-color: transparent;
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
  margin-right: 10px;
  padding: 2px 10px;
  transition: background-color .3s ease;
}

.bet-mode-toggle.is-single button.active,
.bet-mode-toggle.is-multiple button.active {
  background-color: var(--accent-blue);
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
}

.bet-mode-toggle button:disabled {
  background-color: transparent;
  opacity: 0.2;
  cursor: not-allowed;
}

.total-odds-summary {
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  display: flex;
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  padding: 0 4px;
  flex-direction: column;
  align-items: end;
  min-width: fit-content;
  margin-left: auto;
}

.total-odds-amount {
  font-family: 'Proxima Nova';
  font-weight: bold;
  font-size: 16px;
  color: var(--text-primary);
  line-height: 16px;
}

.bet-slip-wrapper.mode-multiple .bet-fixture {
  border-bottom: none;
  margin-bottom: 0;
}

.wager-input-wrapper.error .fake-input {
  border: 1px solid var(--accent-red);
}

.wager-input-wrapper.error .floating-label,
.wager-input-wrapper.error .floating-label.active {
  color: var(--accent-red);
}

.bet-handicap {
  color: var(--accent-blue);
}

/* ===== NEW CARD HEADER DESIGN ===== */
.bet-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--white-10);
  margin-bottom: 6px;
}

.bet-sport-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bet-sport-icon svg {
  width: 14px;
  height: 14px;
}

.bet-live-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-red), #FF2D55);
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 3px var(--accent-red-muted); }
  50% { box-shadow: 0 0 8px var(--accent-red); }
}

.bet-teams {
  flex: 1 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Proxima Nova', sans-serif;
}

.bet-close-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: var(--accent-red-muted);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
}

.bet-close-btn:hover {
  background: rgba(255, 69, 58, 0.3);
}

.bet-close-btn svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent-red);
}

/* Updated bet-main for selection + odds row */
.bet-slip-item .bet-main {
  padding: 5px;
  min-height: 24px;
}

.bet-slip-item .bet-title {
  flex: 1 1;
}

/* Market + Notifications row */
.bet-market-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--white-10);
  margin-bottom: 6px;
}

.bet-market {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'Proxima Nova Cond', sans-serif;
  text-transform: uppercase;
  flex: 1 1;
  line-height: 1.3;
}

.bet-notifications {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.bet-notifications .bet-status-note {
  font-size: 9px;
  margin-top: 0;
}

/* Hide old elements */
.bet-slip-item .remove-bet { display: none; }
.bet-slip-item .bet-fixture { display: none; }
.bet-slip-item .bet-time { display: none; }
.bet-slip-item .bet-subtitle { display: none; }
.bet-slip-item .bet-title-wrapper { display: contents; }

/* Multiple mode adjustments */
.bet-slip-wrapper.mode-multiple .bet-market-row {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 4px;
}

/* Odds mismatch warning for multiple bets */
.odds-mismatch-warning {
  background-color: rgba(255, 149, 0, 0.15);
  border: 1px solid #E5A500;
  border: 1px solid var(--accent-warning, #E5A500);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 12px;
}

.odds-changed-item {
  color: #E5A500;
  color: var(--accent-warning, #E5A500);
  font-size: 13px;
  font-family: 'Proxima Nova', sans-serif;
  line-height: 1.4;
}

.odds-changed-item strong {
  color: var(--text-primary);
}

/* Hide BetSlipWidget on desktop - it's only for mobile */
/* BetSlipSide is used on desktop instead */
@media (min-width: 1024px) {
  .bet-slip-wrapper,
  .bet-slip-footer-bar,
  .error-notification,
  .success-notification,
  .odds-mismatch-warning {
    display: none !important;
  }
}

/* Odds Accept Mode Dropdown */
.odds-accept-dropdown-container {
  position: relative;
  margin: 8px 10px 0;
}

.odds-accept-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--white-5);
  border: 1px solid var(--white-10);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.odds-accept-toggle:hover {
  background: var(--white-8);
  border-color: var(--white-20);
}

.odds-accept-icon {
  display: flex;
  align-items: center;
  min-width: 18px;
}

.odds-accept-label {
  flex: 1 1;
  text-align: left;
}

.odds-accept-arrow {
  font-size: 10px;
  color: var(--white-50);
}

.odds-accept-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--white-15);
  border-radius: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 -4px 16px var(--black-40);
}

.odds-accept-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #aaa;
  color: var(--text-secondary, #aaa);
  transition: all 0.15s;
}

.odds-accept-option:hover {
  background: var(--white-8);
  color: var(--text-primary);
}

.odds-accept-option.active {
  background: rgba(52, 152, 219, 0.2);
  background: rgba(var(--accent-blue-rgb, 52, 152, 219), 0.2);
  color: var(--accent-blue);
}
.side-bet-slip-toggle {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999;
  cursor: pointer;
  box-shadow: 0 4px 8px var(--black-30);
}

.side-bet-slip-panel {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--bg-elevated);
  border: 1px solid var(--separator-light);
  border-radius: 12px;
  padding: 16px;
  color: var(--text-primary);
  z-index: 9999;
  box-shadow: 0 4px 16px var(--black-50);
}

/* Desktop BetSlip container - fills sidebar height */
.side-bet-slip-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.side-bet-slip-container.side-bet-slip-empty {
  padding: 0;
}

.side-bet-slip-header {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin: 0px 0px 5px 0px;
  border-bottom: 1px solid var(--border-dark);
  padding: 5px 10px;
  min-height: 50px;
  flex-shrink: 0;
}

.bet-mode-btn {
  background-color: transparent;
  font-family: Proxima Nova, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
  padding: 4px 10px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.bet-mode-btn.active {
  background-color: var(--accent-blue);
  color: var(--text-on-accent);
}

.bet-mode-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.side-bet-slip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-bet-slip-list li {
  align-items: stretch;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 10px;
}

.side-bet-slip-list li button {
  background: var(--accent-red-muted);
  color: var(--accent-red);
  cursor: pointer;
  font-size: 14px;
}

.side-place-bet {
  background-color: var(--accent-green);
  border: none;
  color: var(--text-on-accent);
  font-weight: bold;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px;
  font-size: 16px;
  box-shadow: 0 2px 6px var(--black-40);
  text-align: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  width: calc(100% - 20px);
}

.side-place-bet:hover {
  background-color: var(--accent-green-hover);
}

.side-place-bet.disabled {
  background-color: var(--bg-quaternary);
  cursor: not-allowed;
  opacity: 0.7; /* Делаем кнопку немного полупрозрачной */
  pointer-events: none; /* Отключаем события */
}

.side-place-bet:disabled {
  background-color: var(--text-tertiary);
  font-weight: bold;
  color: var(--text-quaternary);
}

.side-place-bet:disabled::after {
  font-size: 16px;
  color: var(--text-primary); /* Белый цвет для текста */
  font-weight: bold; /* Сделаем текст жирным */
  text-align: center;
}

.side-empty-slip {
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
  margin: 10px 0;
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 14px;
}

.side-bet-slip-item {
background: var(--gradient-fixture);
padding: 10px 12px;
border-radius: 10px;
margin: 5px;
color: var(--text-primary);
position: relative;
box-shadow: 0 4px 8px var(--black-30);
}

/* ===== NEW CARD HEADER ===== */
.side-bet-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--white-10);
  margin-bottom: 8px;
}

.side-bet-sport-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.side-bet-sport-icon svg {
  width: 100%;
  height: 100%;
}

.side-bet-live-badge {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: var(--text-on-accent);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.side-bet-teams {
  flex: 1 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Proxima Nova', sans-serif;
}

.side-bet-teams-link {
  cursor: pointer;
  transition: color 0.15s ease;
}

.side-bet-teams-link:hover {
  color: var(--accent-blue);
}

.side-bet-close-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-tertiary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s;
}

.side-bet-close-btn:hover {
  color: var(--accent-red);
  background: var(--accent-red-muted);
}

.side-bet-close-btn svg {
  width: 17px;
  height: 17px;
}

/* ===== MARKET ROW ===== */
.side-bet-market-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--white-10);
  margin-bottom: 8px;
}

.side-bet-market {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-family: 'Proxima Nova Cond', sans-serif;
  line-height: 1.3;
}

.side-bet-notifications {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.side-bet-notifications .side-bet-status-note {
  margin-top: 0;
}

.side-bet-slip-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Market locked/unavailable state - dimmed but still interactive (can be removed) */
.side-bet-slip-item.market-locked {
  opacity: 0.5;
}

/* Old remove button - kept for backward compatibility but hidden */
.side-remove-bet {
  display: none;
}

.side-bet-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  padding: 0 3px;
}

.side-bet-title {
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1 1;
}

/* Old title wrapper - no longer used */
.side-bet-title-wrapper {
  display: none;
}

.side-bet-odds {
font-weight: bold;
font-size: 14px;
text-align: end;
white-space: nowrap;
}

/* Old subtitle - now moved to market row */
.side-bet-subtitle {
  display: none;
}

/* Old fixture row - teams now in header */
.side-bet-fixture {
  display: none;
}

.side-bet-stake-area {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-secondary);
  justify-content: start;
  padding: 10px 0px 5px;
  border-top: 1px solid var(--white-10);
  margin-top: 5px;
}

.side-to-win-amount {
  font-family: proxima nova;
  color: var(--text-primary);
  font-size: 16px;
}

.side-max-bet-amount {
  font-family: proxima nova;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: normal;
  padding-left: 5px;
}

/* Input inside stake area inherits from .side-wager-input-wrapper input */

.side-to-win {
  color: var(--accent-blue);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  padding-left: 8px;
}

.side-to-win strong {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.side-max-bet {
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  gap: 0;
  display: flex;
  flex-direction: row;
  line-height: 14px;
  padding-left: 5px;
  margin-top: 5px;
}

.side-max-bet-multi {
  border-bottom: 1px solid var(--bg-elevated);
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  gap: 0;
  display: flex;
  flex-direction: row;
  line-height: 14px;
  padding: 2px 20px 5px 20px;
  margin-top: 5px;
}

.side-bet-slip-wrapper {
  bottom: 0;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  max-width: 350px;
  overflow: hidden;
  position: fixed;
  top: 45px;
  width: 100%;
  z-index: 10000;
  border: 1px solid var(--border-dark);
  border-radius: 5px;
}

.side-bet-slip-scrollable {
  border-bottom: 1px solid var(--border-dark);
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  z-index: 0;
}

/* Bottom section - stays at bottom */
.side-bet-slip-bottom {
  flex-shrink: 0;
  margin-top: auto;
}

body.side-bet-slip-open {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
  touch-action: none;
}

.side-bet-slip-header-count {
  align-items: center;
  display: flex;
  flex: 1 1;
  font-size: 12px;
  font-weight: 600;
}

.side-bet-slip-count-number {
  font-size: 14px;
  font-weight: 700;
  margin-right: 4px;
}

.side-bet-slip-count-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.side-bet-slip-header .minimize-slip {
font-size: 20px;
margin-right: 10px;
margin-left: 10px;
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
transform: rotate(180deg);
margin-top: 10px;
}

.side-bet-slip-footer-bar {
  position: fixed;
  bottom: 60px;
  left: 50%;
  right: 0;
  transform: translateX(-50%);
  margin: 0 0 env(safe-area-inset-bottom);
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  background-color: rgba(34, 44, 69, 0.94);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  font-weight: bold;
  font-size: 14px;
  z-index: 9999;
  border: 1px solid var(--accent-blue)7d;
  border-bottom: none;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
}

.side-bet-slip-footer-count {
font-size: 14px;
}


.side-bet-slip-footer-toggle {
font-size: 18px;
line-height: 10px;
color: var(--text-tertiary);
margin-bottom: 10px;
display: flex;
/*transform: rotate(180deg);*/
}

/* Old time display - removed from new design */
.side-bet-time {
  display: none;
}

.side-bet-slip-count-number {
background-color: var(--accent-blue);
font-family: Proxima Nova,sans-serif;
color: var(--text-on-accent);
border-radius: 4px;
padding: 1px;
font-size: 12px;
font-weight: bold;
display: inline-block;
min-width: 20px;
text-align: center;
margin-right: 6px;
}

.side-bet-slip-count-label {
  font-family: Proxima Nova,sans-serif;
  width: 35px;
  font-size: 14px;
  color: var(--text-primary);
}


.side-wager-input-wrapper {
  position: relative;
  font-family: 'Proxima Nova', sans-serif;
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 35px;
}

.side-wager-input-wrapper.disabled {
  background-color: var(--bg-quaternary);
  cursor: not-allowed;
  border-radius: 4px;
}

.side-wager-input-wrapper.disabled .side-fake-input {
  background-color: var(--bg-quaternary);
  pointer-events: none;
  color: var(--text-quaternary);
  border: 1px solid var(--separator-light);
}

.side-wager-input-wrapper.active .side-fake-input {
  border: 1px solid var(--accent-blue);
}
.side-fake-input {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--separator-light);
  padding: 12px 8px 0px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 4px;
  font-family: 'Proxima Nova', sans-serif;
  cursor: pointer;
  position: relative;
  z-index: 2;
  height: 20px;
  width: 102px;
  transition: border 0.2s ease;
}

.side-floating-label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--white-50);
  font-family: 'Proxima Nova Cond', sans-serif;
  transition: all 0.2s ease;
  pointer-events: none;
  text-transform: uppercase;
  z-index: 1;
}

.side-floating-label.active {
  color: var(--accent-blue);
  font-size: 9px;
  left: 8px;
  top: 4px;
  transform: none;
}

.side-wager-input-wrapper input {
  padding: 10px 8px 0;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--separator-light);
  border-radius: 4px;
  font-family: 'Proxima Nova', sans-serif;
  height: 35px;
  box-sizing: border-box;
  width: 100%;
}


.side-custom-keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  gap: 3px;
  padding: 8px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--separator);
  position: relative;
  z-index: 10;
}

.side-custom-keyboard button {
  background-color: var(--bg-quaternary);
  color: var(--text-primary);
  padding: 8px;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Proxima Nova', sans-serif;
  transition: background-color 0.2s;
}

.side-custom-keyboard button:hover {
  background-color: var(--hover-bg);
}

.side-custom-keyboard button:active {
  background-color: var(--accent-blue);
}

.side-custom-keyboard button:not(:active) {
  background-color: var(--bg-quaternary);
}

.side-place-bet.clicked {
  animation: clickFlash 0.3s ease;
  animation-fill-mode: forwards;
  background-color: var(--accent-green) !important;
}

@keyframes clickFlash {
  0% { background-color: var(--accent-green); }
  50% { background-color: #1e7e34; }
  100% { background-color: var(--accent-green); }
}

.side-old-odds {
  text-decoration: line-through;
  color: var(--text-tertiary);
  margin-right: 6px;
}
.side-new-odds {
  color: var(--text-primary);
  font-weight: bold;
}

.side-regular-odds {
  color: var(--text-primary);
  font-weight: bold;
}
.side-success-notification {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-green); /* Зеленый цвет */
  color: var(--text-on-accent);
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px var(--black-20);
  z-index: 9999;
  white-space: nowrap;
  animation: fadeInOut 5s ease-in-out;
}


@keyframes slideIn {
  0% {
    top: -50px;
    opacity: 0;
  }
  100% {
    top: 10px;
    opacity: 1;
  }
}

@keyframes slideOut {
  0% {
    opacity: 1;
    top: 10px;
  }
  100% {
    opacity: 0;
    top: -50px;
  }
}

/* Loading overlay when placing bet */
.side-placing-bet-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black-70);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 5px;
  pointer-events: all;
}

.placing-bet-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--white-20);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.placing-bet-text {
  margin-top: 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Proxima Nova', sans-serif;
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.side-odds-animate {
  display: inline-block;
  position: relative;
  animation: oddsChange 0.35s ease-in-out;
}

@keyframes oddsChange {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.side-flash-up {
  animation: flashUp 60s ease-in-out;
}

.side-flash-down {
  animation: flashDown 60s ease-in-out;
}

@keyframes flashUp {
  0% {
    color: var(--accent-green);
  }
  50% {
    color: var(--accent-green);
  }
  100% {
    color: var(--text-primary);
  }
}

@keyframes flashDown {
  0% {
    color: var(--accent-red);
  }
  50% {
    color: var(--accent-red);
  }
  100% {
    color: var(--text-primary);
  }
}

.side-bet-status-note {
  color: var(--accent-orange);
  font-size: 10px;
  font-weight: 500;
  font-family: 'Proxima Nova', sans-serif;
  margin-top: 1px;
}

.side-bet-status-note-multi {
  color: var(--accent-red);
  font-family: Proxima Nova,sans-serif;
  font-weight: 500;
  display: flex;
  align-items: end;
  font-size: 17px;
}
.side-error-notification {
  position: fixed;
  text-align: center;
  white-space: nowrap;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-red);
  color: var(--text-primary);
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 15px;
  z-index: 15000;
  box-shadow: 0 2px 10px var(--black-25);
  animation: fadeInOut 5s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}


/* ===== Multiple Stake Summary Styles (Desktop - same as mobile) ===== */
.side-multiple-stake-summary {
  background-color: var(--bg-primary);
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Proxima Nova', sans-serif;
}

.side-multiple-stake-summary .side-wager-input-wrapper {
  height: 35px;
}

.side-multiple-stake-summary .side-floating-label {
  top: 50%;
  transform: translateY(-50%);
}

.side-multiple-stake-summary .side-floating-label.active {
  top: 10px;
}

.side-multiple-stake-summary .side-to-win-summary {
  align-items: start;
  color: var(--accent-blue);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  padding: 0 4px;
}

.side-multiple-stake-summary .side-to-win-amount {
  font-size: 16px;
  color: var(--text-primary);
}

.side-multiple-stake-summary .side-total-odds-summary {
  align-items: end;
  color: var(--accent-blue);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  padding: 0 4px;
  min-width: fit-content;
  margin-left: auto;
}

.side-multiple-stake-summary .side-total-odds-amount {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: bold;
}

/* Общий стиль для кнопок переключения */

.side-bet-mode-toggle {
  width: 100%;
  display: flex;
}
.side-bet-mode-toggle button {
  background-color: transparent;
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
  margin-right: 10px;
  padding: 2px 10px;
  transition: background-color .3s ease;
}

/* Стиль активной кнопки в режиме SINGLE */
.side-bet-mode-toggle.is-single button.active {
  background-color: var(--accent-blue);
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
}

/* Стиль активной кнопки в режиме MULTIPLE */
.side-bet-mode-toggle.is-multiple button.active {
  background-color: var(--accent-blue);
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
}

/* Стиль отключённой кнопки */
.side-bet-mode-toggle button:disabled {
  background-color: transparent;
  opacity: 0.2;
  cursor: not-allowed;
}

.side-total-odds-summary {
  color: var(--accent-blue);
  font-family: Proxima Nova Cond,sans-serif;
  display: flex;
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: end;
  min-width: fit-content;}

.side-total-odds-amount {
  font-family: 'Proxima Nova';
  font-weight: bold;
  font-size: 16px;
  color: var(--text-primary);
  line-height: 16px;
}

/* Multiple mode - no stake area per card, so remove bottom border */
.side-bet-slip-wrapper.mode-multiple .side-bet-market-row {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Old fixture style for multiple - kept for compatibility */
.side-bet-slip-wrapper.mode-multiple .side-bet-fixture {
  border-bottom: none;
  margin-bottom: 0;
}

.side-wager-input-wrapper.error .side-fake-input {
  border: 1px solid var(--accent-red);
}
.side-wager-input-wrapper.error .side-floating-label,
.side-wager-input-wrapper.error .side-floating-label.active {
  color: var(--accent-red);
}
.side-wager-input-wrapper.active.error .side-fake-input {
  border: 1px solid var(--accent-red) !important;
}

.side-wager-input-wrapper.error .side-real-input {
  border: 1px solid var(--accent-red) !important;
}
.side-wager-input-wrapper.active.error .side-real-input {
  border: 1px solid var(--accent-red) !important;
}

.side-bet-handicap {
  color: var(--accent-blue-hover);
}

.betslip-empty-success {
  animation: fadeInOut 2s ease-in-out;
  background-color: var(--accent-green);
  font-size: 15px;
  margin: 20px;
  border-radius: 9px;
  font-weight: 700;
  padding: 10px 0;
  text-align: center;
}
@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Убираем стрелочки в Chrome, Safari, Edge */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Для Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

/* Odds mismatch warning for multiple bets */
.side-odds-mismatch-warning {
  background-color: rgba(255, 149, 0, 0.15);
  border: 1px solid #E5A500;
  border: 1px solid var(--accent-warning, #E5A500);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 12px;
}

.side-odds-changed-item {
  color: #E5A500;
  color: var(--accent-warning, #E5A500);
  font-size: 13px;
  font-family: 'Proxima Nova', sans-serif;
  line-height: 1.4;
}

.side-odds-changed-item strong {
  color: var(--text-primary);
}
/* Odds Accept Mode Dropdown */
.odds-accept-dropdown-container {
  position: relative;
  margin: 8px 10px 0;
}

.odds-accept-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--white-5);
  border: 1px solid var(--white-10);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.odds-accept-toggle:hover {
  background: var(--white-8);
  border-color: var(--white-20);
}

.odds-accept-icon {
  display: flex;
  align-items: center;
  min-width: 18px;
}

.odds-accept-label {
  flex: 1 1;
  text-align: left;
}

.odds-accept-arrow {
  font-size: 10px;
  color: var(--white-50);
}

.odds-accept-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--white-15);
  border-radius: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 -4px 16px var(--black-40);
}

.odds-accept-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #aaa;
  color: var(--text-secondary, #aaa);
  transition: all 0.15s;
}

.odds-accept-option:hover {
  background: var(--white-8);
  color: var(--text-primary);
}

.odds-accept-option.active {
  background: rgba(52, 152, 219, 0.2);
  background: rgba(var(--accent-blue-rgb, 52, 152, 219), 0.2);
  color: var(--accent-blue);
}

/* ===== V8 BetSlip - Mobile stake inputs ===== */
.bet-stake-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.bet-to-win {
  font-size: 12px;
  color: #999;
  color: var(--text-secondary, #999);
  white-space: nowrap;
}

.bet-to-win strong {
  color: #fff;
  color: var(--text-primary, #fff);
}

.multiple-stake-section {
  padding: 12px;
  border-top: 1px solid #333;
  border-top: 1px solid var(--separator, #333);
}

.multiple-stake-row {
  margin-bottom: 10px;
}

.to-win-summary {
  font-size: 13px;
  color: #999;
  color: var(--text-secondary, #999);
  margin-bottom: 4px;
}

.to-win-amount {
  color: #fff;
  color: var(--text-primary, #fff);
}

.total-odds-summary {
  font-size: 13px;
  color: #999;
  color: var(--text-secondary, #999);
}

.total-odds-amount {
  color: #fff;
  color: var(--text-primary, #fff);
}

/* ===== V8 BetSlip - Desktop stake inputs ===== */
.side-bet-stake-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.side-input-wrapper {
  display: flex;
  align-items: center;
  background: #2a2a2c;
  background: var(--bg-tertiary, #2a2a2c);
  border: 1px solid #444;
  border: 1px solid var(--separator-light, #444);
  border-radius: 4px;
  padding: 0 8px;
  height: 36px;
  flex: 1 1;
}

.side-input-wrapper:focus-within {
  border-color: #4a90d9;
  border-color: var(--accent-blue, #4a90d9);
}

.side-input-label {
  color: #999;
  color: var(--text-secondary, #999);
  font-size: 16px;
  font-weight: 600;
  margin-right: 4px;
  transition: color 0.2s;
}

.side-input-label.focused {
  color: #4a90d9;
  color: var(--accent-blue, #4a90d9);
}

.side-real-input {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--separator-light);
  border-radius: 4px;
  outline: none;
  color: #fff;
  color: var(--text-primary, #fff);
  height: 35px;
  box-sizing: border-box;
  padding: 14px 8px 2px;
  font-size: 16px; /* >= 16px prevents iOS zoom on focus */
  font-weight: 600;
  font-family: 'Proxima Nova', sans-serif;
  width: 100%;
  padding: 0;
}

.side-real-input::placeholder {
  color: #666;
  color: var(--text-quaternary, #666);
}

.side-real-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .side-to-win defined above at line 1539 */

.side-multiple-stake-section {
  padding: 12px;
  border-top: 1px solid #333;
  border-top: 1px solid var(--separator, #333);
}

.side-multiple-stake-row {
  margin-bottom: 10px;
}

.side-to-win-summary {
  font-size: 10px;
  color: var(--accent-blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* side-to-win-amount defined above */

.side-total-odds-summary {
  font-size: 13px;
  color: #999;
  color: var(--text-secondary, #999);
}

.side-total-odds-amount {
  color: #fff;
  color: var(--text-primary, #fff);
}

/* ===== V8 BetSlip - Custom Keyboard ===== */
.keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  gap: 3px;
}

.keyboard-key {
  background-color: var(--keyboard-key);
  color: #fff;
  color: var(--text-primary, #fff);
  padding: 12px 8px;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Proxima Nova', sans-serif;
  transition: background-color 0.2s;
}

.keyboard-key:hover {
  background-color: #3a3a3a;
  background-color: var(--bg-tertiary, #3a3a3a);
}

.keyboard-key:active {
  background-color: #4a90d9;
  background-color: var(--accent-blue, #4a90d9);
}

.keyboard-done {
  width: 100%;
  background-color: var(--accent-blue);
  color: var(--text-on-accent);
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 6px;
  font-family: 'Proxima Nova', sans-serif;
}

.keyboard-done:hover {
  background-color: var(--accent-blue-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Real-time Odds Updates - Changes Display                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Old odds (struck through) */
.old-odds {
  color: var(--text-tertiary);
  font-size: 12px;
  text-decoration: line-through;
  margin-right: 4px;
}

/* Arrow between old and new odds */
.odds-arrow {
  color: var(--text-tertiary);
  font-size: 11px;
  margin: 0 4px;
}

/* Odds changed container */
.bet-odds.odds-changed,
.side-bet-odds.odds-changed {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* New odds when changed - up (green) */
.new-odds.up,
.side-new-odds.up {
  color: #4caf50;
  font-weight: bold;
}

/* New odds when changed - down (red) */
.new-odds.down,
.side-new-odds.down {
  color: #f44336;
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Suspended / Removed Overlays                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Bet item inactive state */
.bet-slip-item.inactive,
.side-bet-slip-item.inactive {
  position: relative;
  opacity: 0.7;
}

/* Overlay container */
.bet-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 4px;
  pointer-events: none;
}

/* Remove button on overlay */
.bet-overlay-remove-btn {
  pointer-events: auto;
  background: var(--accent-red-muted);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  padding: 8px 20px;
  border-radius: 4px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.2s;
}

.bet-overlay-remove-btn:hover {
  background: rgba(244, 67, 54, 0.4);
}

.bet-overlay-remove-btn:active {
  background: var(--accent-red);
  color: var(--text-on-accent);
}

/* Overlay text - Suspended */
.bet-overlay-text {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bet-overlay-text.suspended {
  color: var(--accent-yellow);
}

.bet-overlay-text.unavailable {
  color: #f7b500;
  color: var(--accent-gold, #f7b500);
}

/* Hint below removed text */
.bet-overlay-hint {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Accept Odds Button                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Accept Odds button styling */
.place-bet.accept-odds,
.side-place-bet.accept-odds {
  background-color: var(--accent-orange) !important;
  color: var(--text-on-accent) !important;
  animation: pulse-accept 1.5s infinite;
}

.place-bet.accept-odds:hover,
.side-place-bet.accept-odds:hover {
  background-color: var(--accent-warning) !important;
}

@keyframes pulse-accept {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Footer Bar - Has Changes Indicator                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.bet-slip-footer-bar.has-changes {
  background-color: var(--accent-orange);
  animation: pulse-footer 1.5s infinite;
}

.bet-slip-footer-bar.has-changes .bet-slip-count-number {
  color: var(--text-on-accent);
}

@keyframes pulse-footer {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
  }
}

/* ═══════════════════════════════════════
   MaxBet + Balance validation styles
   ═══════════════════════════════════════ */

/* Red border on the actual input element when exceeding max bet or balance */
.side-wager-input-wrapper.stake-error input,
.side-wager-input-wrapper.stake-error .side-real-input {
  border-color: var(--accent-red) !important;
  color: var(--accent-red);
}
.wager-input-wrapper.stake-error .fake-input {
  border-color: var(--accent-red) !important;
  color: var(--accent-red);
}

/* "Max bet: $X" clickable line — full width, new row under wager input */
.side-max-bet-line,
.max-bet-line {
  width: 100%;
  font-size: 11px;
  color: var(--white-45);
  margin-top: -4px;
  padding-left: 3px;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-user-select: none;
          user-select: none;
  text-align: left;
}
.side-max-bet-line:hover,
.max-bet-line:hover {
  color: var(--accent-gold);
}

/* Red warning text for max bet exceeded (inline in max-bet-line) */
.side-stake-warning-inline,
.stake-warning-inline {
  color: var(--accent-red);
  font-weight: 500;
}

/* Balance warning near Place Bet button */
.side-balance-warning,
.balance-warning {
  font-size: 12px;
  color: var(--accent-red);
  text-align: center;
  padding: 4px 0;
  font-weight: 500;
}