/*
 * Bet Modal - Place bet from odds panel
 * Uses app dark theme (no white Bootstrap defaults)
 */

#betModal .modal-dialog {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

#betModal .modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
}

#betModal .modal-header {
  background: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
  color: var(--text-primary);
}

#betModal .modal-title {
  color: var(--text-primary);
}

#betModal .modal-body {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

#betModal .modal-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-2);
  background: var(--bg-tertiary);
  border-top-color: var(--border-primary);
}

#betModal .modal-footer .btn {
  flex: 1;
  min-width: 0;
}

/* Close button: visible on dark background */
#betModal .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

#betModal .btn-close:hover {
  opacity: 1;
}

/* Form controls inside modal use theme */
#betModal .form-control {
  background: var(--bg-surface);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

#betModal .form-control::placeholder {
  color: var(--text-tertiary);
}

#betModal .form-control:focus {
  background: var(--bg-elevated);
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

#betModal .form-label {
  color: var(--text-secondary);
}

#betModal .bet-modal-odds {
  color: var(--accent-gold);
  font-weight: 600;
}

/* Backdrop when created by our vanilla JS */
.modal-backdrop[data-bet-modal-backdrop] {
  background: rgba(0, 0, 0, 0.6);
}