/**
 * Extended layouts: guest home (index), live, cashier, jackpot, my bets.
 * Load after sportpesa-theme.css — requires body.sp-theme.
 */

/* Dark shell for instant games (shared chrome sits on top) */
body.sp-theme.game-page {
  background: #071912;
  color: #f8fafc;
  overflow-x: hidden;
  width: 100%;
}

/*
 * Grid/flex “blowout”: default min-width is auto, so one wide child can force
 * the whole page wider than the viewport. Force key shells to shrink.
 */
body.sp-theme.game-page .main,
body.sp-theme.game-page .main-container {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.sp-theme.game-page .content,
body.sp-theme.game-page .secondary-bar,
body.sp-theme.game-page .center-panel,
body.sp-theme.game-page .game-area,
body.sp-theme.game-page .bet-controls,
body.sp-theme.game-page .controls,
body.sp-theme.game-page .matches-wrapper,
body.sp-theme.game-page .promo-container {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.sp-theme.game-page .crash-header,
body.sp-theme.game-page .crash-header-left,
body.sp-theme.game-page .amount,
body.sp-theme.game-page .bet-panel,
body.sp-theme.game-page .card-header {
  min-width: 0;
}

body.sp-theme.game-page table {
  table-layout: fixed;
  width: 100%;
}

body.sp-theme.game-page th,
body.sp-theme.game-page td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ========== Guest home (index mirrors home.php) ========== */
body.sp-theme .guest-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.sp-theme.guest-home .guest-tagline {
  font-size: 0.8125rem;
  color: var(--sp-ink-muted);
  display: none;
}

@media (min-width: 600px) {
  body.sp-theme .guest-tagline {
    display: inline;
  }
}

body.sp-theme.guest-home .guest-betslip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: 24px 16px;
  background: var(--sp-green-soft);
  border: 1px dashed var(--sp-green);
  border-radius: 8px;
  margin-bottom: 12px;
}

body.sp-theme.guest-home .guest-betslip h4 {
  border-bottom: none;
  margin-bottom: 8px;
  width: 100%;
}

body.sp-theme.guest-home .guest-betslip p {
  font-size: 0.875rem;
  color: var(--sp-ink-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

body.sp-theme.guest-home .guest-betslip-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

body.sp-theme.guest-home .guest-betslip-actions .btn-register,
body.sp-theme.guest-home .guest-betslip-actions .btn-login {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: none;
}

body.sp-theme.guest-home .guest-betslip-actions .btn-register {
  background: var(--sp-green);
  color: #fff;
}

body.sp-theme.guest-home .guest-betslip-actions .btn-login {
  background: var(--sp-surface);
  color: var(--sp-ink);
  border: 1px solid var(--sp-border);
}

body.sp-theme.guest-home .mobile-betslip,
body.sp-theme.guest-home .betslip-drawer {
  display: none !important;
}

body.sp-theme.guest-home .odds-guest-hint {
  font-size: 0.75rem;
  color: var(--sp-ink-muted);
  text-align: center;
  margin-top: 12px;
}

body.sp-theme.guest-home .match-odds .odds.is-disabled {
  cursor: default;
  opacity: 0.85;
}

body.sp-theme.guest-home .match-odds .odds.is-disabled:hover {
  background: var(--sp-page);
  border-color: var(--sp-border);
  color: var(--sp-ink);
  transform: none;
}

body.sp-theme.guest-home .match-odds a.odds {
  display: block;
  text-decoration: none;
  color: inherit;
}

body.sp-theme.guest-home .guest-login-link {
  color: var(--sp-green);
  font-weight: 600;
  text-decoration: none;
}

body.sp-theme.guest-home .guest-login-link:hover {
  text-decoration: underline;
}

/* ========== Live betting ========== */
body.sp-theme.page-live {
  background: var(--sp-page);
  color: var(--sp-ink);
}

body.sp-theme.page-live .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
}

body.sp-theme.page-live .live-indicator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #b71c1c, #d32f2f);
  border-radius: 8px;
  margin-bottom: 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.sp-theme.page-live .live-dot {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: sp-blink 1s infinite;
}

@keyframes sp-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

body.sp-theme.page-live .live-indicator h2 {
  font-size: 1rem;
  font-weight: 800;
}

body.sp-theme.page-live .live-count {
  font-size: 0.875rem;
  opacity: 0.95;
}

body.sp-theme.page-live .sports-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

body.sp-theme.page-live .sports-filter::-webkit-scrollbar {
  display: none;
}

body.sp-theme.page-live .sport-btn {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  color: var(--sp-ink);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8125rem;
  white-space: nowrap;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s;
}

body.sp-theme.page-live .sport-btn:hover {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
}

body.sp-theme.page-live .sport-btn.active {
  background: var(--sp-red);
  color: #fff;
  border-color: var(--sp-red);
}

body.sp-theme.page-live .sport-btn .count {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6875rem;
}

body.sp-theme.page-live .sport-btn.active .count {
  background: rgba(255, 255, 255, 0.25);
}

body.sp-theme.page-live .live-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

body.sp-theme.page-live .live-matches > .match-card {
  background: var(--sp-surface);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s, border-color 0.2s;
}

body.sp-theme.page-live .live-matches > .match-card:hover {
  border-color: var(--sp-red);
  box-shadow: 0 4px 16px rgba(211, 47, 47, 0.12);
}

body.sp-theme.page-live .match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--sp-nav-dark);
  color: #fff;
}

body.sp-theme.page-live .match-league {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

body.sp-theme.page-live .match-time {
  background: var(--sp-red);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

body.sp-theme.page-live .score-board {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--sp-page);
}

body.sp-theme.page-live .score {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--sp-green);
  font-variant-numeric: tabular-nums;
}

body.sp-theme.page-live .score-divider {
  color: var(--sp-ink-muted);
  font-size: 1.25rem;
}

body.sp-theme.page-live .team-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sp-ink);
}

body.sp-theme.page-live .team-logo {
  width: 48px;
  height: 48px;
  background: var(--sp-page);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

body.sp-theme.page-live .mobile-betslip {
  align-items: center;
  justify-content: center;
  background: var(--sp-green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 150, 57, 0.45);
}

body.sp-theme.page-live .match-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  background: var(--sp-surface);
  border-top: 1px solid var(--sp-border);
}

body.sp-theme.page-live .stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sp-ink);
}

body.sp-theme.page-live .stat-label {
  font-size: 0.625rem;
  color: var(--sp-ink-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

body.sp-theme.page-live .odds-section {
  padding: 14px;
  background: var(--sp-surface);
}

body.sp-theme.page-live .odds-title {
  font-size: 0.6875rem;
  color: var(--sp-ink-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 600;
}

body.sp-theme.page-live .odds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.sp-theme.page-live .odds-btn {
  background: var(--sp-page);
  border: 1px solid var(--sp-border);
  color: var(--sp-ink);
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

body.sp-theme.page-live .odds-btn:hover {
  background: var(--sp-green-soft);
  border-color: var(--sp-green);
}

body.sp-theme.page-live .odds-btn.selected {
  background: var(--sp-green);
  color: #fff;
  border-color: var(--sp-green);
}

body.sp-theme.page-live .odds-btn .label {
  font-size: 0.625rem;
  color: var(--sp-ink-muted);
  display: block;
  margin-bottom: 4px;
}

body.sp-theme.page-live .odds-btn.selected .label {
  color: rgba(255, 255, 255, 0.9);
}

body.sp-theme.page-live .odds-btn.is-suspended,
body.sp-theme.page-live .odds-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.sp-theme.page-live .team-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
}

body.sp-theme.page-live .odds-btn .value {
  font-size: 0.9375rem;
  font-weight: 700;
}

body.sp-theme.page-live .more-markets {
  text-align: center;
  padding: 10px;
  color: var(--sp-green);
  font-size: 0.8125rem;
  cursor: pointer;
  border-top: 1px solid var(--sp-border);
  background: var(--sp-surface);
}

body.sp-theme.page-live .more-markets:hover {
  background: var(--sp-page);
}

body.sp-theme.page-live .empty-state h3 {
  color: var(--sp-ink);
}

body.sp-theme.page-live .empty-state p {
  color: var(--sp-ink-muted);
}

body.sp-theme.page-live .mobile-betslip {
  display: none;
}

@media (max-width: 768px) {
  body.sp-theme.page-live .live-matches {
    grid-template-columns: 1fr;
  }
  body.sp-theme.page-live .user-info .balance {
    display: none;
  }
  body.sp-theme.page-live .mobile-betslip {
    display: flex;
  }
}

/* ========== Cashier ========== */
body.sp-theme.page-cashier {
  background: var(--sp-page);
  color: var(--sp-ink);
}

body.sp-theme.page-cashier .container {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px 40px;
}

body.sp-theme.page-cashier .pill-btn {
  font: inherit;
}

body.sp-theme.page-cashier .pill-btn.primary {
  background: var(--sp-green);
  color: #fff;
  border: none;
}

body.sp-theme.page-cashier .pill-btn.primary:hover {
  background: var(--sp-green-dark);
}

body.sp-theme.page-cashier .pill-btn.primary.alt {
  background: var(--sp-nav-dark);
  color: #fff;
}

body.sp-theme.page-cashier .pill-btn.primary.alt:hover {
  background: #37474f;
}

body.sp-theme.page-cashier .pill-btn.logout {
  border-color: var(--sp-border);
  color: var(--sp-red);
}

body.sp-theme.page-cashier .header-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body.sp-theme.page-cashier .back-btn {
  background: var(--sp-page);
  color: var(--sp-ink);
  border: 1px solid var(--sp-border);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8125rem;
  transition: background 0.2s, border-color 0.2s;
}

body.sp-theme.page-cashier .back-btn:hover {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
}

body.sp-theme.page-cashier .balance-display {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(135deg, var(--sp-green), var(--sp-green-dark));
  border-radius: 10px;
  margin-bottom: 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.sp-theme.page-cashier .balance-display h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.95;
  margin-bottom: 8px;
}

body.sp-theme.page-cashier .balance-display .amount {
  font-size: 2.25rem;
  font-weight: 800;
}

body.sp-theme.page-cashier .cashier-box {
  background: var(--sp-surface);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--sp-border);
}

body.sp-theme.page-cashier .tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

body.sp-theme.page-cashier .tab-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: transform 0.15s, opacity 0.2s;
}

body.sp-theme.page-cashier .tab-btn.deposit {
  background: var(--sp-green);
  color: #fff;
}

body.sp-theme.page-cashier .tab-btn.withdraw {
  background: #fff;
  color: var(--sp-red);
  border: 2px solid var(--sp-red);
}

body.sp-theme.page-cashier .tab-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

body.sp-theme.page-cashier .form-group label {
  color: var(--sp-ink);
  font-weight: 600;
  font-size: 0.8125rem;
}

body.sp-theme.page-cashier .form-group input {
  width: 100%;
  padding: 12px 14px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  color: var(--sp-ink);
  font-size: 1rem;
}

body.sp-theme.page-cashier .form-group input:focus {
  outline: none;
  border-color: var(--sp-green);
  box-shadow: 0 0 0 3px var(--sp-green-soft);
}

body.sp-theme.page-cashier .submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}

body.sp-theme.page-cashier .submit-btn.deposit {
  background: var(--sp-green);
  color: #fff;
}

body.sp-theme.page-cashier .submit-btn.withdraw {
  background: var(--sp-red);
  color: #fff;
}

body.sp-theme.page-cashier .error {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  color: var(--sp-red);
  padding: 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

body.sp-theme.page-cashier .success {
  background: var(--sp-green-soft);
  border: 1px solid var(--sp-green);
  color: var(--sp-green-dark);
  padding: 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

body.sp-theme.page-cashier .transactions h3 {
  color: var(--sp-green);
  font-size: 1rem;
  margin-bottom: 12px;
  font-weight: 700;
}

body.sp-theme.page-cashier .tx-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: var(--sp-surface);
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--sp-border);
}

body.sp-theme.page-cashier .tx-type {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.6875rem;
}

body.sp-theme.page-cashier .tx-type.deposit {
  color: var(--sp-green);
}

body.sp-theme.page-cashier .tx-type.withdrawal {
  color: var(--sp-red);
}

body.sp-theme.page-cashier .tx-amount {
  font-weight: 700;
}

body.sp-theme.page-cashier .tx-date {
  font-size: 0.75rem;
  color: var(--sp-ink-muted);
  margin-top: 4px;
}

body.sp-theme.page-cashier .tx-status {
  font-size: 0.6875rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

body.sp-theme.page-cashier .tx-status.pending {
  background: #fff8e1;
  color: #f57f17;
}

body.sp-theme.page-cashier .tx-status.completed {
  background: var(--sp-green-soft);
  color: var(--sp-green-dark);
}

body.sp-theme.page-cashier .tx-status.failed {
  background: #ffebee;
  color: var(--sp-red);
}

/* ========== Jackpot (scoped .page-jackpot) ========== */
body.sp-theme.page-jackpot {
  background: var(--sp-page);
  color: var(--sp-ink);
  padding-bottom: 88px;
}

body.sp-theme.page-jackpot .jackpot-bg {
  display: none;
}

/* Hero */
body.sp-theme.page-jackpot .jackpot-hero {
  position: relative;
  text-align: center;
  padding: 36px 20px 48px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 184, 28, 0.18) 0%, transparent 55%),
    linear-gradient(165deg, #0c1f14 0%, #007a32 45%, #005e26 100%);
  color: #fff;
  overflow: hidden;
}

body.sp-theme.page-jackpot .jackpot-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

body.sp-theme.page-jackpot .jackpot-hero > * {
  position: relative;
  z-index: 1;
}

body.sp-theme.page-jackpot .jackpot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 184, 28, 0.15);
  color: var(--sp-gold);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 184, 28, 0.35);
}

body.sp-theme.page-jackpot .jackpot-hero h1 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

body.sp-theme.page-jackpot .jackpot-hero .prize {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffe566 0%, var(--sp-gold) 40%, #f7941d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

body.sp-theme.page-jackpot .jackpot-hero .prize-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

body.sp-theme.page-jackpot .jackpot-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto;
}

body.sp-theme.page-jackpot .stat-item {
  flex: 1 1 120px;
  max-width: 140px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 10px;
  backdrop-filter: blur(8px);
}

body.sp-theme.page-jackpot .stat-item .number {
  font-size: 1.375rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

body.sp-theme.page-jackpot .stat-item .number.gold {
  color: var(--sp-gold);
}

body.sp-theme.page-jackpot .stat-item .label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

body.sp-theme.page-jackpot .jackpot-hero-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.sp-theme.page-jackpot .jp-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s, border-color 0.2s;
}

body.sp-theme.page-jackpot .jp-link-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Entry card */
body.sp-theme.page-jackpot .entry-section {
  max-width: 560px;
  margin: -28px auto 0;
  padding: 0 16px;
  position: relative;
  z-index: 2;
}

body.sp-theme.page-jackpot .entry-box {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
}

body.sp-theme.page-jackpot .entry-fee {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sp-ink);
  margin-bottom: 8px;
}

body.sp-theme.page-jackpot .entry-fee span {
  color: var(--sp-green);
  font-size: 1.25rem;
  font-weight: 800;
}

body.sp-theme.page-jackpot .entry-desc {
  color: var(--sp-ink-muted);
  font-size: 0.875rem;
  margin-bottom: 18px;
  line-height: 1.5;
}

body.sp-theme.page-jackpot .enter-btn {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--sp-gold) 0%, #f7941d 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(255, 184, 28, 0.35);
}

body.sp-theme.page-jackpot .enter-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 184, 28, 0.45);
}

body.sp-theme.page-jackpot .enter-btn:disabled {
  background: #bdbdbd;
  box-shadow: none;
  cursor: not-allowed;
}

body.sp-theme.page-jackpot .entered-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--sp-green-soft);
  border: 2px solid var(--sp-green);
  color: var(--sp-green-dark);
  font-weight: 700;
  font-size: 0.9375rem;
}

body.sp-theme.page-jackpot .entered-note {
  margin-top: 12px;
  color: var(--sp-ink-muted);
  font-size: 0.875rem;
}

/* Main content */
body.sp-theme.page-jackpot .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}

body.sp-theme.page-jackpot .section-title {
  color: var(--sp-ink);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 6px;
}

body.sp-theme.page-jackpot .section-subtitle {
  color: var(--sp-ink-muted);
  font-size: 0.875rem;
  margin: 0 0 20px;
}

body.sp-theme.page-jackpot .progress-section {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

body.sp-theme.page-jackpot .progress-bar {
  background: var(--sp-border);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

body.sp-theme.page-jackpot .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sp-green) 0%, #00b347 100%);
  border-radius: 999px;
  transition: width 0.35s ease;
  min-width: 0;
}

body.sp-theme.page-jackpot .progress-text {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--sp-ink-muted);
  font-weight: 500;
}

body.sp-theme.page-jackpot .progress-text strong {
  color: var(--sp-green-dark);
}

/* Match cards */
body.sp-theme.page-jackpot .match-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.sp-theme.page-jackpot .match-grid > .match-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.sp-theme.page-jackpot .match-grid > .match-card:hover {
  border-color: rgba(0, 150, 57, 0.35);
  box-shadow: 0 6px 24px rgba(0, 94, 38, 0.08);
}

body.sp-theme.page-jackpot .match-grid > .match-card.predicted {
  border-color: var(--sp-green);
  box-shadow: 0 0 0 1px var(--sp-green);
}

body.sp-theme.page-jackpot .match-grid > .match-card.extreme {
  border-left: 4px solid var(--sp-red);
}

body.sp-theme.page-jackpot .match-grid > .match-card.hard {
  border-left: 4px solid #f57c00;
}

body.sp-theme.page-jackpot .match-grid > .match-card.medium {
  border-left: 4px solid var(--sp-green);
}

body.sp-theme.page-jackpot .match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
}

body.sp-theme.page-jackpot .match-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.sp-theme.page-jackpot .match-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-green);
  color: #fff;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 800;
}

body.sp-theme.page-jackpot .match-league {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.sp-theme.page-jackpot .difficulty-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.sp-theme.page-jackpot .difficulty-badge.extreme {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

body.sp-theme.page-jackpot .difficulty-badge.hard {
  background: rgba(245, 124, 0, 0.2);
  color: #fdba74;
  border: 1px solid rgba(245, 124, 0, 0.4);
}

body.sp-theme.page-jackpot .difficulty-badge.medium {
  background: rgba(0, 150, 57, 0.2);
  color: #86efac;
  border: 1px solid rgba(0, 150, 57, 0.4);
}

body.sp-theme.page-jackpot .match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background: var(--sp-page);
  border-bottom: 1px solid var(--sp-border);
}

body.sp-theme.page-jackpot .team-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

body.sp-theme.page-jackpot .match-grid > .match-card .team-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  font-size: 1.25rem;
}

body.sp-theme.page-jackpot .match-teams .team-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sp-ink);
  line-height: 1.3;
}

body.sp-theme.page-jackpot .vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

body.sp-theme.page-jackpot .vs-divider .vs {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-surface);
  color: var(--sp-ink-muted);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 800;
}

body.sp-theme.page-jackpot .vs-divider .date {
  font-size: 0.6875rem;
  color: var(--sp-ink-muted);
  white-space: nowrap;
}

body.sp-theme.page-jackpot .markets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sp-border);
}

body.sp-theme.page-jackpot .market-column {
  background: var(--sp-surface);
  padding: 12px 10px;
}

body.sp-theme.page-jackpot .market-column h4 {
  margin: 0 0 10px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-ink-muted);
  text-align: center;
}

body.sp-theme.page-jackpot .market-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--sp-page);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  color: var(--sp-ink);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.sp-theme.page-jackpot .market-btn:last-child {
  margin-bottom: 0;
}

body.sp-theme.page-jackpot .market-btn .label {
  font-weight: 600;
}

body.sp-theme.page-jackpot .market-btn .odds {
  font-weight: 800;
  color: var(--sp-green-dark);
}

body.sp-theme.page-jackpot .market-btn:hover {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
}

body.sp-theme.page-jackpot .market-btn.selected {
  background: var(--sp-green);
  color: #fff;
  border-color: var(--sp-green);
}

body.sp-theme.page-jackpot .market-btn.selected .odds {
  color: #fff;
}

body.sp-theme.page-jackpot .hint-box {
  padding: 12px 16px;
  background: var(--sp-gold-soft);
  border-top: 1px solid rgba(255, 184, 28, 0.25);
}

body.sp-theme.page-jackpot .hint-box p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sp-ink);
  line-height: 1.45;
}

body.sp-theme.page-jackpot .hint-box p::before {
  content: "💡 ";
}

/* Sticky submit bar */
body.sp-theme.page-jackpot .selection-summary {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--sp-surface);
  border-top: 1px solid var(--sp-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body.sp-theme.page-jackpot .selection-summary.active {
  transform: translateY(0);
}

body.sp-theme.page-jackpot .summary-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body.sp-theme.page-jackpot .summary-text h4 {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sp-ink);
}

body.sp-theme.page-jackpot .summary-text p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sp-ink-muted);
}

body.sp-theme.page-jackpot .submit-btn {
  flex-shrink: 0;
  padding: 12px 24px;
  background: var(--sp-green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

body.sp-theme.page-jackpot .submit-btn:hover:not(:disabled) {
  background: var(--sp-green-dark);
  transform: translateY(-1px);
}

body.sp-theme.page-jackpot .submit-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  transform: none;
}

/* Toast notifications */
body.sp-theme.page-jackpot .jp-toast {
  position: fixed;
  top: 80px;
  right: 16px;
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 10000;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  animation: jpToastIn 0.3s ease;
}

body.sp-theme.page-jackpot .jp-toast.success { background: var(--sp-green); }
body.sp-theme.page-jackpot .jp-toast.error { background: var(--sp-red); }
body.sp-theme.page-jackpot .jp-toast.info { background: var(--sp-green-dark); }

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

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

body.sp-theme.page-jackpot .top-actions .jackpot-btn {
  background: var(--sp-gold);
  color: #1a1a1a;
}

@media (max-width: 768px) {
  body.sp-theme.page-jackpot .markets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.sp-theme.page-jackpot .match-teams {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body.sp-theme.page-jackpot .vs-divider {
    flex-direction: row;
    justify-content: center;
  }

  body.sp-theme.page-jackpot .summary-content {
    flex-direction: column;
    align-items: stretch;
  }

  body.sp-theme.page-jackpot .submit-btn {
    width: 100%;
  }

  body.sp-theme.page-jackpot .stat-item {
    flex: 1 1 calc(50% - 6px);
    max-width: none;
  }
}

/* ========== Jackpot Results (scoped .page-results) ========== */
body.sp-theme.page-results {
  background: var(--sp-page);
  color: var(--sp-ink);
}

body.sp-theme.page-results .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

body.sp-theme.page-results .hero-stats {
  background: linear-gradient(165deg, #0c1f14 0%, #007a32 50%, #005e26 100%);
  border-radius: 16px;
  padding: 28px 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 184, 28, 0.2);
}

body.sp-theme.page-results .hero-stats h1 {
  text-align: center;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin: 0 0 24px;
  color: #fff;
  font-weight: 800;
}

body.sp-theme.page-results .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

body.sp-theme.page-results .stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

body.sp-theme.page-results .stat-card.highlight {
  border-color: rgba(255, 184, 28, 0.45);
  background: rgba(255, 184, 28, 0.1);
}

body.sp-theme.page-results .stat-card h3 {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

body.sp-theme.page-results .stat-card .value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
}

body.sp-theme.page-results .stat-card .value.correct { color: #86efac; }
body.sp-theme.page-results .stat-card .value.wrong { color: #fca5a5; }
body.sp-theme.page-results .stat-card .value.pending { color: var(--sp-gold); }

body.sp-theme.page-results .stat-card .sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

body.sp-theme.page-results .winnings-breakdown {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
}

body.sp-theme.page-results .winnings-breakdown h3 {
  text-align: center;
  margin: 0 0 16px;
  font-size: 1rem;
  color: var(--sp-ink);
}

body.sp-theme.page-results .prize-tiers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

body.sp-theme.page-results .tier {
  background: var(--sp-page);
  border: 2px solid var(--sp-border);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

body.sp-theme.page-results .tier.active {
  border-color: var(--sp-gold);
  background: var(--sp-gold-soft);
  transform: scale(1.03);
}

body.sp-theme.page-results .tier.locked { opacity: 0.45; }

body.sp-theme.page-results .tier .correct-count {
  font-size: 0.6875rem;
  color: var(--sp-ink-muted);
  margin-bottom: 6px;
}

body.sp-theme.page-results .tier .correct-count span {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-ink);
  display: block;
}

body.sp-theme.page-results .tier .prize {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sp-green-dark);
}

body.sp-theme.page-results .progress-section {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
}

body.sp-theme.page-results .progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

body.sp-theme.page-results .progress-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

body.sp-theme.page-results .prize-display .label {
  font-size: 0.75rem;
  color: var(--sp-ink-muted);
}

body.sp-theme.page-results .prize-display .amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sp-gold-dark);
}

body.sp-theme.page-results .progress-track {
  background: var(--sp-border);
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}

body.sp-theme.page-results .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sp-green), var(--sp-gold));
  border-radius: 999px;
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #fff;
  min-width: 36px;
}

body.sp-theme.page-results .progress-fill.danger {
  background: var(--sp-red);
}

body.sp-theme.page-results .progress-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.625rem;
  color: var(--sp-ink-muted);
}

body.sp-theme.page-results .section-title {
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.sp-theme.page-results .section-title .count {
  background: var(--sp-green);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

body.sp-theme.page-results .matches-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

body.sp-theme.page-results .match-row {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  border-left: 4px solid var(--sp-border);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

body.sp-theme.page-results .match-row.correct {
  border-left-color: var(--sp-green);
}

body.sp-theme.page-results .match-row.wrong {
  border-left-color: var(--sp-red);
}

body.sp-theme.page-results .match-row.live {
  border-left-color: var(--sp-gold);
  animation: jpLivePulse 2s infinite;
}

body.sp-theme.page-results .match-row.pending {
  border-left-color: var(--sp-ink-muted);
}

@keyframes jpLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(255, 184, 28, 0); }
}

body.sp-theme.page-results .match-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 14px;
  padding: 16px;
  align-items: center;
}

body.sp-theme.page-results .teams { display: flex; flex-direction: column; gap: 6px; }
body.sp-theme.page-results .team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.sp-theme.page-results .team .name {
  font-weight: 600;
  font-size: 0.875rem;
}

body.sp-theme.page-results .team .score {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-green-dark);
}

body.sp-theme.page-results .status-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sp-theme.page-results .status-badge.finished {
  background: var(--sp-green-soft);
  color: var(--sp-green-dark);
}

body.sp-theme.page-results .status-badge.live {
  background: #fef2f2;
  color: var(--sp-red);
}

body.sp-theme.page-results .status-badge.pending {
  background: var(--sp-page);
  color: var(--sp-ink-muted);
}

body.sp-theme.page-results .prediction-box {
  background: var(--sp-page);
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

body.sp-theme.page-results .prediction-box .label {
  font-size: 0.625rem;
  color: var(--sp-ink-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

body.sp-theme.page-results .prediction-box .value {
  font-size: 1rem;
  font-weight: 700;
}

body.sp-theme.page-results .prediction-box .odds {
  font-size: 0.8125rem;
  color: var(--sp-gold-dark);
  margin-top: 4px;
}

body.sp-theme.page-results .prediction-box.correct .value { color: var(--sp-green); }
body.sp-theme.page-results .prediction-box.wrong .value { color: var(--sp-red); }

body.sp-theme.page-results .match-outcome {
  text-align: center;
  font-size: 0.8125rem;
}

body.sp-theme.page-results .match-outcome.correct { color: var(--sp-green); font-weight: 700; }
body.sp-theme.page-results .match-outcome.wrong { color: var(--sp-red); font-weight: 700; }
body.sp-theme.page-results .match-outcome.muted { color: var(--sp-ink-muted); }

body.sp-theme.page-results .match-outcome .result-meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sp-ink-muted);
  margin-top: 4px;
}

body.sp-theme.page-results .match-score-center { text-align: center; }

body.sp-theme.page-results .live-score {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-gold-dark);
}

body.sp-theme.page-results .live-minute {
  font-size: 0.75rem;
  color: var(--sp-red);
  margin-top: 4px;
}

body.sp-theme.page-results .match-date,
body.sp-theme.page-results .result-icon {
  font-size: 0.8125rem;
  color: var(--sp-ink-muted);
}

body.sp-theme.page-jackpot .entered-note a {
  color: var(--sp-green-dark);
  font-weight: 600;
}

body.sp-theme.page-results .live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--sp-red);
  border-radius: 50%;
  margin-right: 6px;
  animation: jpPulse 1s infinite;
}

@keyframes jpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

body.sp-theme.page-results .leaderboard {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 20px;
  overflow-x: auto;
}

body.sp-theme.page-results .leaderboard h2 {
  margin: 0 0 16px;
  font-size: 1.125rem;
}

body.sp-theme.page-results .leaderboard-row {
  display: grid;
  grid-template-columns: 48px 1fr 72px 80px 100px;
  gap: 12px;
  padding: 12px 8px;
  align-items: center;
  border-bottom: 1px solid var(--sp-border);
  font-size: 0.875rem;
}

body.sp-theme.page-results .leaderboard-row.header {
  font-size: 0.625rem;
  color: var(--sp-ink-muted);
  text-transform: uppercase;
  font-weight: 700;
}

body.sp-theme.page-results .leaderboard-row.you {
  background: var(--sp-gold-soft);
  border-radius: 8px;
}

body.sp-theme.page-results .rank {
  font-weight: 800;
  color: var(--sp-gold-dark);
}

body.sp-theme.page-results .correct-count {
  font-weight: 700;
  color: var(--sp-green);
}

body.sp-theme.page-results .potential {
  color: var(--sp-gold-dark);
  font-weight: 600;
}

body.sp-theme.page-results .no-entry {
  text-align: center;
  padding: 48px 24px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
}

body.sp-theme.page-results .no-entry h3 {
  margin: 0 0 10px;
  color: var(--sp-ink);
}

body.sp-theme.page-results .enter-now-btn {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--sp-gold), #f7941d);
  color: #1a1a1a;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 800;
  margin-top: 16px;
}

body.sp-theme.page-results .results-footer {
  text-align: center;
  margin-top: 24px;
  color: var(--sp-ink-muted);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  body.sp-theme.page-results .prize-tiers {
    grid-template-columns: repeat(3, 1fr);
  }

  body.sp-theme.page-results .match-main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body.sp-theme.page-results .team {
    justify-content: center;
  }

  body.sp-theme.page-results .leaderboard-row {
    grid-template-columns: 36px 1fr 56px;
  }

  body.sp-theme.page-results .leaderboard-row .potential,
  body.sp-theme.page-results .leaderboard-row .status-col {
    display: none;
  }
}

/* ========== My Bets ========== */
body.sp-theme.page-mybets {
  background: var(--sp-page);
  color: var(--sp-ink);
}

body.sp-theme.page-mybets .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 40px;
}

body.sp-theme.page-mybets .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

body.sp-theme.page-mybets .stat-card {
  background: var(--sp-surface);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--sp-border);
}

body.sp-theme.page-mybets .stat-card:hover {
  border-color: var(--sp-green);
  transform: none;
}

body.sp-theme.page-mybets .stat-icon {
  background: var(--sp-page);
  color: var(--sp-green);
}

body.sp-theme.page-mybets .stat-icon.blue {
  color: #1565c0;
  background: #e3f2fd;
}

body.sp-theme.page-mybets .stat-icon.green {
  color: var(--sp-green-dark);
  background: var(--sp-green-soft);
}

body.sp-theme.page-mybets .stat-icon.red {
  color: var(--sp-red);
  background: #ffebee;
}

body.sp-theme.page-mybets .stat-icon.yellow {
  color: #f57f17;
  background: #fff8e1;
}

body.sp-theme.page-mybets .stat-icon.purple {
  color: #6a1b9a;
  background: #f3e5f5;
}

body.sp-theme.page-mybets .stat-icon.orange {
  color: #e65100;
  background: #fff3e0;
}

body.sp-theme.page-mybets .stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-ink);
}

body.sp-theme.page-mybets .stat-label {
  font-size: 0.625rem;
  color: var(--sp-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.sp-theme.page-mybets .filter-title {
  font-size: 0.6875rem;
  color: var(--sp-ink-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.sp-theme.page-mybets .filter-section {
  background: var(--sp-surface);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 20px;
  border: 1px solid var(--sp-border);
}

body.sp-theme.page-mybets .filter-btn {
  background: var(--sp-page);
  border: 1px solid var(--sp-border);
  color: var(--sp-ink-muted);
}

body.sp-theme.page-mybets .filter-btn:hover {
  border-color: var(--sp-green);
  color: var(--sp-ink);
}

body.sp-theme.page-mybets .filter-btn.active {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

body.sp-theme.page-mybets .filter-btn .count {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 700;
}

body.sp-theme.page-mybets .filter-btn.active .count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

body.sp-theme.page-mybets .bets-container {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  overflow: hidden;
}

body.sp-theme.page-mybets .bet-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1.1fr) 72px minmax(88px, 1fr) 92px;
  gap: 10px 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-border);
}

body.sp-theme.page-mybets .bet-row:not(.header) .bet-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sp-theme.page-mybets .bet-row:not(.header) .bet-game h4 {
  font-size: 0.9375rem;
  line-height: 1.25;
}

body.sp-theme.page-mybets .bet-row:not(.header) .bet-selection {
  font-size: 0.8125rem;
  word-break: break-word;
}

body.sp-theme.page-mybets .bet-row:hover {
  background: var(--sp-page);
}

body.sp-theme.page-mybets .bet-row.header {
  background: var(--sp-nav-dark);
  color: rgba(255, 255, 255, 0.85);
}

body.sp-theme.page-mybets .bet-icon {
  background: var(--sp-page);
  color: var(--sp-green);
}

body.sp-theme.page-mybets .bet-game h4 {
  color: var(--sp-ink);
}

body.sp-theme.page-mybets .bet-game .meta {
  color: var(--sp-ink-muted);
}

body.sp-theme.page-mybets .bet-selection {
  color: var(--sp-ink-muted);
}

body.sp-theme.page-mybets .bet-odds {
  color: var(--sp-green);
}

body.sp-theme.page-mybets .bet-amount .stake {
  color: var(--sp-ink);
}

body.sp-theme.page-mybets .pagination a,
body.sp-theme.page-mybets .pagination span {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  color: var(--sp-ink-muted);
}

body.sp-theme.page-mybets .pagination a:hover {
  border-color: var(--sp-green);
  color: var(--sp-green);
}

body.sp-theme.page-mybets .pagination span.current {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

body.sp-theme.page-mybets .btn-cta-home {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 24px;
  background: var(--sp-green);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.875rem;
}

body.sp-theme.page-mybets .btn-cta-home:hover {
  background: var(--sp-green-dark);
}

body.sp-theme.page-mybets .profit-positive {
  color: var(--sp-green-dark);
}

body.sp-theme.page-mybets .profit-negative {
  color: var(--sp-red);
}

body.sp-theme.page-mybets .bet-amount .potential.profit-negative {
  font-size: 0.75rem;
  font-weight: 600;
}

@media (max-width: 720px) {
  body.sp-theme.page-mybets .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.sp-theme.page-mybets .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.sp-theme.page-mybets .filter-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  body.sp-theme.page-mybets .filter-btn {
    flex: 0 0 auto;
  }

  body.sp-theme.page-mybets .bet-row.header {
    display: none;
  }

  body.sp-theme.page-mybets .bet-row:not(.header) {
    grid-template-columns: 44px 1fr 1fr;
    grid-template-areas:
      "ic gm gm"
      "sel sel sel"
      "od am st";
    padding: 14px 12px;
    gap: 10px;
  }

  body.sp-theme.page-mybets .bet-row:not(.header) .bet-icon {
    grid-area: ic;
    align-self: start;
  }

  body.sp-theme.page-mybets .bet-row:not(.header) .bet-game {
    grid-area: gm;
    min-width: 0;
  }

  body.sp-theme.page-mybets .bet-row:not(.header) .bet-selection {
    grid-area: sel;
    padding-top: 4px;
    border-top: 1px dashed var(--sp-border);
  }

  body.sp-theme.page-mybets .bet-row:not(.header) .bet-odds {
    grid-area: od;
    font-size: 0.8125rem;
  }

  body.sp-theme.page-mybets .bet-row:not(.header) .bet-amount {
    grid-area: am;
    font-size: 0.8125rem;
  }

  body.sp-theme.page-mybets .bet-row:not(.header) .bet-status {
    grid-area: st;
    justify-self: end;
    align-self: center;
  }
}

/* Instant games: safer tap targets and padding on small screens */
@media (max-width: 640px) {
  body.sp-theme.game-page {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  body.sp-theme.game-page .container,
  body.sp-theme.game-page .content,
  body.sp-theme.game-page .sport {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  body.sp-theme.game-page .crash-header,
  body.sp-theme.game-page .mines-header,
  body.sp-theme.game-page .mines-control,
  body.sp-theme.game-page .dice-container,
  body.sp-theme.game-page .amount-section,
  body.sp-theme.game-page .bet-type-selector {
    flex-wrap: wrap;
    gap: 10px;
  }

  body.sp-theme.game-page .bet-btn,
  body.sp-theme.game-page .action-btn,
  body.sp-theme.game-page .btn-bet,
  body.sp-theme.game-page .mines-btn-primary,
  body.sp-theme.game-page .roll-btn {
    min-height: 46px;
  }

  body.sp-theme.game-page .bet-type-btn {
    min-height: 44px;
  }

  body.sp-theme.game-page .amount-row button {
    min-height: 42px;
    min-width: 42px;
  }

  body.sp-theme.game-page .crash-box,
  body.sp-theme.game-page .mines-grid,
  body.sp-theme.game-page .main-container,
  body.sp-theme.game-page .game-area {
    max-width: 100%;
  }

  body.sp-theme.game-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.sp-theme.game-page img,
  body.sp-theme.game-page video,
  body.sp-theme.game-page canvas {
    max-width: 100%;
    height: auto;
  }

  body.sp-theme.game-page .right-panel,
  body.sp-theme.game-page .left-panel,
  body.sp-theme.game-page .game-categories {
    max-width: 100%;
    min-width: 0;
  }

  body.sp-theme.game-page input[type="number"],
  body.sp-theme.game-page input[type="text"],
  body.sp-theme.game-page select {
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  body.sp-theme.page-live .container {
    padding: 12px;
  }

  body.sp-theme.page-cashier .container {
    padding: 12px 12px 32px;
  }

  body.sp-theme.page-jackpot .container {
    padding: 12px;
  }

  body.sp-theme.page-match .container,
  body.sp-theme.page-results .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.sp-theme.page-help .help-container,
  body.sp-theme.page-terms .terms-container,
  body.sp-theme.page-promotions .promo-container {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

/* ========== My Profile ========== */
body.sp-theme.page-profile {
  background: var(--sp-page, #12151c);
  color: var(--sp-ink, #eef1f6);
}

body.sp-theme.page-profile .profile-page.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

body.sp-theme.page-profile .profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--sp-surface, #1a1f2e);
  border: 1px solid var(--sp-border, #2d3548);
  border-radius: 12px;
}

body.sp-theme.page-profile .profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007a32, #009639);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  flex-shrink: 0;
}

body.sp-theme.page-profile .profile-hero h1 {
  margin: 0 0 4px;
  font-size: 1.375rem;
}

body.sp-theme.page-profile .profile-balance {
  margin: 0;
  color: var(--sp-ink-muted, #8b95a8);
  font-size: 0.875rem;
}

body.sp-theme.page-profile .profile-balance strong {
  color: var(--sp-gold, #ffb81c);
}

body.sp-theme.page-profile .profile-meta {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--sp-ink-muted, #8b95a8);
}

body.sp-theme.page-profile .profile-hero-actions {
  margin-left: auto;
}

body.sp-theme.page-profile .btn-deposit-header {
  background: linear-gradient(135deg, #ffb81c, #f7941d);
  color: #1a1f2e;
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

body.sp-theme.page-profile .profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.sp-theme.page-profile .profile-card {
  background: var(--sp-surface, #1a1f2e);
  border: 1px solid var(--sp-border, #2d3548);
  border-radius: 12px;
  padding: 20px;
}

body.sp-theme.page-profile .profile-card h2 {
  margin: 0 0 16px;
  font-size: 1rem;
  color: var(--sp-green, #009639);
}

body.sp-theme.page-profile .profile-form .form-group {
  margin-bottom: 14px;
}

body.sp-theme.page-profile .profile-form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sp-ink-muted, #8b95a8);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.sp-theme.page-profile .profile-form input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--sp-border, #2d3548);
  background: var(--sp-surface-2, #222836);
  color: var(--sp-ink, #eef1f6);
  font-size: 0.9375rem;
  font-family: inherit;
}

body.sp-theme.page-profile .profile-form input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

body.sp-theme.page-profile .profile-form input:focus {
  outline: none;
  border-color: var(--sp-green, #009639);
}

body.sp-theme.page-profile .profile-save-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffb81c, #f7941d);
  color: #1a1f2e;
  font-weight: 800;
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
}

body.sp-theme.page-profile .profile-alert {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 0.8125rem;
}

body.sp-theme.page-profile .profile-alert.error {
  background: rgba(229, 57, 53, 0.15);
  color: #ff8a80;
  border: 1px solid rgba(229, 57, 53, 0.3);
}

body.sp-theme.page-profile .profile-alert.success {
  background: rgba(0, 150, 57, 0.15);
  color: #81c784;
  border: 1px solid rgba(0, 150, 57, 0.3);
}

body.sp-theme.page-profile .profile-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.sp-theme.page-profile .profile-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--sp-ink, #eef1f6);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

body.sp-theme.page-profile .profile-links a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sp-gold, #ffb81c);
}

body.sp-theme.page-profile .profile-links a.danger {
  color: #ff8a80;
}

body.sp-theme.page-profile .profile-stats-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-border, #2d3548);
}

body.sp-theme.page-profile .profile-stats-mini .num {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-gold, #ffb81c);
}

body.sp-theme.page-profile .profile-stats-mini .lbl {
  font-size: 0.6875rem;
  color: var(--sp-ink-muted, #8b95a8);
  text-transform: uppercase;
}

body.sp-theme.page-profile .site-top-chrome a.header-util[href*="profile.php"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

@media (max-width: 768px) {
  body.sp-theme:not(.game-page) .content-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.sp-theme:not(.game-page) .content-search-wrap {
    flex: 1;
  }

  body.sp-theme.page-profile .profile-grid {
    grid-template-columns: 1fr;
  }

  body.sp-theme.page-profile .profile-hero-actions {
    margin-left: 0;
    width: 100%;
  }

  body.sp-theme.page-profile .profile-hero-actions .btn-deposit-header {
    width: 100%;
  }
}

/* ========== Mega Jackpot Pro (.page-mjp) — full-screen shell ========== */
body.sp-theme.page-mjp {
  --mjp-sidebar-w: 320px;
  --mjp-chrome-offset: var(--sp-chrome-h, 108px);
  background: #e8ecef;
  color: var(--sp-ink);
  padding-bottom: 0;
  min-height: 100dvh;
  overflow-x: hidden;
}

body.sp-theme.page-mjp footer {
  display: none;
}

body.sp-theme.page-mjp .entry-section {
  max-width: none;
  margin: 0;
  padding: 12px 16px 0;
}

body.sp-theme.page-mjp .entry-box {
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid var(--sp-border);
  margin-bottom: 0;
}

body.sp-theme.page-mjp .entry-desc {
  margin: 8px 0 0;
  font-size: 0.8125rem;
}

body.sp-theme.page-mjp .entered-badge {
  display: inline-block;
  margin-bottom: 6px;
}

.mjp-page {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - var(--mjp-chrome-offset));
  display: flex;
  flex-direction: column;
}

.mjp-hero {
  flex-shrink: 0;
  background: linear-gradient(165deg, #0c1f14 0%, #007a32 50%, #005e26 100%);
  color: #fff;
  padding: 12px 16px 14px;
  border-bottom: 3px solid var(--sp-gold);
}

.mjp-hero-inner {
  width: 100%;
  max-width: none;
}

.mjp-hero-brand {
  margin-bottom: 10px;
}

.mjp-hero-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mjp-kicker {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-gold);
}

.mjp-week {
  font-size: 0.6875rem;
  opacity: 0.75;
}

.mjp-sub {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.mjp-prize-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mjp-prize-carousel::-webkit-scrollbar { display: none; }

.mjp-prize-card {
  flex: 0 0 auto;
  min-width: 118px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.mjp-prize-card.active,
.mjp-prize-card.is-featured.active {
  border-color: var(--sp-gold);
  background: rgba(255, 184, 28, 0.16);
}

.mjp-prize-card.is-featured {
  border-color: rgba(255, 184, 28, 0.45);
}

.mjp-prize-tier {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: 2px;
}

.mjp-prize-amt {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--sp-gold);
  white-space: nowrap;
}

.mjp-hero-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.9;
  margin-bottom: 8px;
}

.mjp-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mjp-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  align-items: stretch;
}

.mjp-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

.mjp-tier-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-ink-muted);
  margin-bottom: 6px;
}

.mjp-tier-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mjp-tier-tab {
  border: 1px solid var(--sp-border);
  background: var(--sp-page);
  color: var(--sp-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.mjp-tier-tab.active {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

.mjp-games {
  padding: 12px 16px 0;
}

.mjp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #e8ecef;
  padding: 8px 0;
}

body.sp-theme.page-mjp .section-title {
  margin: 0;
  font-size: 0.9375rem;
}

.mjp-day-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  justify-content: flex-end;
}

.mjp-day-tab {
  border: none;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sp-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.mjp-day-tab.active {
  background: var(--sp-green-dark);
  border-color: var(--sp-green-dark);
  color: #fff;
}

.mjp-fixture-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mjp-fixture {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mjp-fixture.picked {
  border-color: rgba(0, 150, 57, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 150, 57, 0.1);
}

.mjp-fixture-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  color: var(--sp-ink-muted);
}

.mjp-slot {
  font-weight: 800;
  color: var(--sp-green-dark);
}

.mjp-league {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mjp-combo-modes {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.mjp-combo-mode {
  border: 1px solid var(--sp-border);
  background: var(--sp-page);
  color: var(--sp-ink-muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.625rem;
  font-weight: 700;
  cursor: pointer;
}

.mjp-combo-mode.active {
  background: var(--sp-green-dark);
  border-color: var(--sp-green-dark);
  color: #fff;
}

.mjp-pick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.mjp-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid var(--sp-border);
  background: var(--sp-page);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  min-width: 0;
}

.mjp-pick-draw {
  min-width: 52px;
  max-width: 72px;
}

.mjp-pick-team {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--sp-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mjp-pick-odd {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--sp-green-dark);
}

.mjp-pick:hover {
  border-color: var(--sp-green);
}

.mjp-pick.selected {
  background: var(--sp-green);
  border-color: var(--sp-green);
}

.mjp-pick.selected .mjp-pick-team,
.mjp-pick.selected .mjp-pick-odd {
  color: #fff;
}

.mjp-fixture-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.6875rem;
}

.mjp-fixture-status {
  color: var(--sp-ink-muted);
}

.mjp-fixture.picked .mjp-fixture-status {
  color: var(--sp-green-dark);
  font-weight: 700;
}

.mjp-fixture.combo-double {
  border-color: rgba(255, 184, 28, 0.45);
}

.mjp-fixture.combo-triple {
  border-color: rgba(96, 165, 250, 0.45);
}

.mjp-skip-btn {
  border: none;
  background: transparent;
  color: var(--sp-ink-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  text-decoration: underline;
}

.mjp-betslip {
  z-index: 100;
}

.mjp-betslip-inner {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  padding: 14px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.mjp-betslip.ready .mjp-betslip-inner {
  border-color: var(--sp-green);
  box-shadow: inset 0 0 0 1px rgba(0, 150, 57, 0.15);
}

.mjp-betslip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mjp-betslip-head h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.mjp-betslip-tier {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--sp-green-dark);
  background: var(--sp-green-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.mjp-betslip-count,
.mjp-betslip-fee,
.mjp-betslip-combos,
.mjp-betslip-lines {
  margin: 0;
  font-size: 0.75rem;
  color: var(--sp-ink-muted);
}

.mjp-betslip-prize {
  margin: 4px 0 8px;
  font-size: 0.875rem;
}

.mjp-submit-btn {
  width: 100%;
  margin-top: auto;
}

.mjp-entry-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.mjp-clear-btn {
  background: var(--sp-page) !important;
  color: var(--sp-ink) !important;
  border: 1px solid var(--sp-border) !important;
}

/* Desktop — games + sticky betslip fill viewport */
@media (min-width: 1024px) {
  .mjp-hero-inner {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: center;
  }

  .mjp-hero-brand {
    margin-bottom: 0;
  }

  .mjp-prize-carousel {
    padding-bottom: 0;
  }

  .mjp-workspace {
    grid-template-columns: minmax(0, 1fr) var(--mjp-sidebar-w);
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }

  .mjp-main {
    max-height: none;
    height: 100%;
    padding-bottom: 0;
  }

  .mjp-betslip {
    position: relative;
    border-left: 1px solid var(--sp-border);
    background: var(--sp-surface);
  }

  .mjp-betslip-inner {
    position: sticky;
    top: 0;
    border: none;
    border-radius: 0;
    min-height: calc(100dvh - var(--mjp-chrome-offset) - 120px);
    box-shadow: none;
  }

  .mjp-fixture-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 16px;
  }

  .mjp-fixture {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head head"
      "combo combo"
      "picks picks"
      "foot foot";
    gap: 6px 10px;
  }

  .mjp-fixture-head { grid-area: head; margin: 0; }
  .mjp-combo-modes { grid-area: combo; margin: 0; }
  .mjp-pick-row { grid-area: picks; }
  .mjp-fixture-foot { grid-area: foot; margin: 0; }
}

@media (min-width: 1400px) {
  body.sp-theme.page-mjp {
    --mjp-sidebar-w: 340px;
  }

  .mjp-fixture-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* (Obsolete mobile betslip rules removed — the SportPesa redesign bottom-sheet
   rules below handle mobile. Kept this note to avoid re-introducing conflicts.) */

@media (max-width: 640px) {
  .mjp-hero {
    padding: 10px 12px 12px;
  }

  .mjp-games,
  body.sp-theme.page-mjp .entry-section {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Results page — full width */
body.sp-theme.page-mjp-results,
body.sp-theme.page-results.page-mjp-results {
  background: var(--sp-page);
}

body.sp-theme.page-mjp-results .container,
body.sp-theme.page-results.page-mjp-results .container {
  max-width: none;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 1200px) {
  body.sp-theme.page-mjp-results .container,
  body.sp-theme.page-results.page-mjp-results .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.sp-theme.page-mjp-results .matches-grid,
  body.sp-theme.page-results.page-mjp-results .matches-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

body.sp-theme.page-mjp-results .mjp-entry-switcher,
body.sp-theme.page-results.page-mjp-results .mjp-entry-switcher {
  margin-bottom: 18px;
}

body.sp-theme.page-mjp-results .mjp-entry-switcher-label,
body.sp-theme.page-results.page-mjp-results .mjp-entry-switcher-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-ink-muted);
  margin-bottom: 8px;
}

body.sp-theme.page-mjp-results .mjp-entry-tabs,
body.sp-theme.page-results.page-mjp-results .mjp-entry-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.sp-theme.page-mjp-results .mjp-entry-tab,
body.sp-theme.page-results.page-mjp-results .mjp-entry-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--sp-border);
  background: var(--sp-surface);
  color: var(--sp-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

body.sp-theme.page-mjp-results .mjp-entry-tab.active,
body.sp-theme.page-results.page-mjp-results .mjp-entry-tab.active {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

/* ========================================================================
   Mega Jackpot Pro — SportPesa-style table layout (API reference design)
   Scoped to the non-embed page so it never affects the embedded widget.
   ======================================================================== */
body.sp-theme.page-mjp:not(.jp-embed) {
  --jp-brand: #1f9d55;
  --jp-brand-2: #25c264;
  --jp-bg: #0a1020;
  --jp-panel: #111a2e;
  --jp-panel-2: #0d1426;
  --jp-cell: #16213a;
  --jp-border: #233049;
  --jp-border-2: #2c3a57;
  --jp-ink: #eaf0fb;
  --jp-ink-soft: #aebbd4;
  --jp-ink-muted: #7d8aa6;
  --jp-gold: #ffcf3a;
  background: var(--jp-bg);
  color: var(--jp-ink);
}

body.sp-theme.page-mjp:not(.jp-embed) footer {
  display: none;
}

/* Page shell */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-page {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--sp-chrome-h, 108px));
}

/* Hero bar */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero {
  background: linear-gradient(180deg, #141d33 0%, #0d1730 100%);
  border-bottom: 1px solid var(--jp-border);
  padding: 12px 20px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: none;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero-coin {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #7a5a00;
  background: radial-gradient(circle at 32% 30%, #ffe589, #f4b81e 70%);
  box-shadow: 0 2px 8px rgba(244, 184, 30, 0.35);
  flex-shrink: 0;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero-title {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero-name {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-hero-amount {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--jp-gold);
}

/* Tier tabs */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-tier-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-tier-tab {
  background: var(--jp-cell);
  border: 1px solid var(--jp-border-2);
  color: var(--jp-ink-soft);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-tier-tab:hover {
  border-color: var(--jp-brand);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-tier-tab.active {
  background: var(--jp-brand);
  border-color: var(--jp-brand);
  color: #fff;
}

/* Quick-pick subbar */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-subbar-text {
  margin: 0;
  color: var(--jp-ink-soft);
  font-size: 0.85rem;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick {
  position: relative;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--jp-brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-btn:hover,
body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick.open .mjp-quickpick-btn {
  background: #18854a;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-caret {
  opacity: 0.85;
  transition: transform 0.15s;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick.open .mjp-quickpick-caret {
  transform: rotate(180deg);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  width: min(280px, calc(100vw - 40px));
  padding: 14px;
  border-radius: 10px;
  background: var(--jp-panel);
  border: 1px solid var(--jp-border-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-menu[hidden] {
  display: none;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-menu-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--jp-ink-soft);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: var(--jp-ink);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-field small {
  color: var(--jp-ink-muted);
  font-weight: 600;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-field input {
  width: 72px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--jp-border-2);
  background: var(--jp-cell);
  color: var(--jp-ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-field input:focus {
  outline: none;
  border-color: var(--jp-brand);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-hint {
  margin: 0 0 12px;
  font-size: 0.7rem;
  color: var(--jp-ink-muted);
  line-height: 1.4;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-apply {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--jp-brand);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-apply:hover {
  background: #18854a;
}

/* Mobile: anchor the Quick Pick dropdown to the subbar so it never
   overflows the screen edges. */
@media (max-width: 600px) {
  body.sp-theme.page-mjp:not(.jp-embed) .mjp-subbar {
    position: relative;
    padding: 12px 14px;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick {
    position: static;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-quickpick-menu {
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    top: calc(100% - 2px);
  }
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-placed-note {
  margin: 0 20px 6px;
  color: var(--jp-ink-muted);
  font-size: 0.78rem;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-placed-note a {
  color: var(--jp-brand-2);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--jp-ink-muted);
}

body.sp-theme.page-mjp:not(.jp-embed) .jp-link-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--jp-cell);
  border: 1px solid var(--jp-border-2);
  color: var(--jp-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
}

/* Workspace: games + betslip */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  align-items: start;
  overflow: visible;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-main {
  min-width: 0;
  height: auto;
  overflow: visible;
  padding: 0 20px 24px;
}

/* Match table */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-table-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 72px 72px 72px;
  gap: 8px;
  padding: 4px 12px 8px;
  color: var(--jp-ink-muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-th-match {
  grid-column: 1 / 3;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-th-odd {
  text-align: center;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 72px 72px 72px;
  gap: 8px;
  align-items: center;
  background: var(--jp-panel);
  border: 1px solid var(--jp-border);
  border-radius: 10px;
  padding: 10px 12px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture.picked {
  border-color: rgba(31, 157, 85, 0.5);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture.combo-double {
  border-color: rgba(255, 184, 28, 0.45);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture.combo-triple {
  border-color: rgba(96, 165, 250, 0.45);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture-num {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--jp-ink-muted);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture-time {
  font-size: 0.64rem;
  color: var(--jp-ink-muted);
  margin-bottom: 3px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jp-brand-2);
  flex-shrink: 0;
}

/* Odds cells */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 42px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--jp-border-2);
  background: var(--jp-cell);
  color: var(--jp-ink);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-pick:hover {
  border-color: var(--jp-brand);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-pick.selected {
  background: var(--jp-brand);
  border-color: var(--jp-brand);
  color: #fff;
}

/* Betslip */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip {
  z-index: 100;
  background: var(--jp-panel-2);
  border-left: 1px solid var(--jp-border);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 16px;
  gap: 10px;
  background: var(--jp-panel-2);
  border: none;
  border-radius: 0;
  box-shadow: none;
  justify-content: flex-start;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-top h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--jp-brand-2);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--jp-ink-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jp-border);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-tier {
  color: var(--jp-brand-2);
  font-weight: 800;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 60px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-empty {
  color: var(--jp-ink-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-slip-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--jp-border);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-slip-info {
  min-width: 0;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-slip-match {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--jp-ink);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-slip-pick {
  font-size: 0.72rem;
  color: var(--jp-ink-muted);
  margin-top: 2px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-slip-remove {
  background: none;
  border: none;
  color: #e0606e;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 2px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-foot {
  border-top: 1px solid var(--jp-border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-count,
body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-combos,
body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-lines {
  margin: 0;
  font-size: 0.72rem;
  color: var(--jp-ink-muted);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-prize {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--jp-ink);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-prize strong {
  color: var(--jp-gold);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-fee {
  margin: 0 0 6px;
  font-size: 0.8rem;
  color: var(--jp-ink-soft);
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-submit-btn {
  width: 100%;
  margin-top: 0;
  background: var(--jp-brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-submit-btn:hover:not(:disabled) {
  background: #18854a;
}

body.sp-theme.page-mjp:not(.jp-embed) .mjp-submit-btn:disabled {
  background: #26324c;
  color: #5b6883;
  cursor: not-allowed;
}

/* Betslip handle: only used on mobile bottom sheet */
body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle {
  display: none;
}

/* Desktop: betslip as sticky right column */
@media (min-width: 1024px) {
  body.sp-theme.page-mjp:not(.jp-embed) .mjp-workspace {
    grid-template-columns: minmax(0, 1fr) 340px;
    overflow: visible;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip {
    position: sticky;
    top: var(--sp-chrome-h, 108px);
    align-self: stretch;
    height: calc(100dvh - var(--sp-chrome-h, 108px));
    border-left: 1px solid var(--jp-border);
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-inner {
    position: static;
    min-height: 0;
    height: 100%;
  }
}

/* ---- Mobile / tablet: betslip becomes a fixed bottom sheet ---- */
@media (max-width: 1023px) {
  /* Room so the last matches aren't hidden behind the collapsed handle */
  body.sp-theme.page-mjp:not(.jp-embed) .mjp-workspace {
    padding-bottom: 64px;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-fixture,
  body.sp-theme.page-mjp:not(.jp-embed) .mjp-table-head {
    grid-template-columns: 24px minmax(0, 1fr) 58px 58px 58px;
    gap: 6px;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1160;
    border: none;
    border-top: 1px solid var(--jp-border);
    border-radius: 16px 16px 0 0;
    background: var(--jp-panel);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.5);
    max-height: 82dvh;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
  }

  /* Collapsed handle bar (always tappable) */
  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border: none;
    background: transparent;
    color: var(--jp-ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle-grip {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jp-ink-soft);
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle-main strong {
    color: #4ade80;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--jp-brand-2, #25c264);
    font-weight: 800;
    font-size: 0.82rem;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-handle-caret {
    transition: transform 0.2s ease;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip.expanded .mjp-betslip-handle-caret {
    transform: rotate(180deg);
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip.expanded .mjp-betslip-handle-cta-text::after {
    content: ' ';
  }

  /* Inner content hidden until expanded */
  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-inner {
    display: none;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip.expanded .mjp-betslip-inner {
    display: flex;
    flex-direction: column;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip.expanded {
    max-height: 82dvh;
  }

  body.sp-theme.page-mjp:not(.jp-embed) .mjp-betslip-list {
    max-height: 46dvh;
  }
}

/* Lift the sheet above the site's mobile bottom nav (phones only) */
@media (max-width: 768px) {
  body.sp-theme.page-mjp.has-mobile-nav:not(.jp-embed) .mjp-betslip {
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  }

  body.sp-theme.page-mjp.has-mobile-nav:not(.jp-embed) .mjp-betslip-handle {
    padding-bottom: 12px;
  }

  body.sp-theme.page-mjp.has-mobile-nav:not(.jp-embed) .mjp-workspace {
    padding-bottom: 70px;
  }
}