/* Import table view styles */
@import url('workbench-table.css');

/* ==========================================================================
   1. VARIABLES & BASE UTILITIES
   ========================================================================== */
:root {
  /* Page + Brand */
  --bg-0: #0a1628;
  --brand-teal: #00D3BD;
  --brand-teal-bright: #00F5D4;
  --brand-teal-dark: #00AD84;
  --accent-rgb: 0, 211, 189; /* #00D3BD */

  /* Surface Alphas (Cards vs Footer) */
  --panel-card: .012;
  --panel-card-hover: .028;
  --panel-footer: .024;
  --panel-footer-hover: .040;

  /* Glass Tokens */
  --line: rgba(255, 255, 255, .10);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-glow: 0 4px 20px rgba(0,211,189,0.12), 0 8px 32px rgba(0,0,0,0.25);
  --inset: 0 1px 0 rgba(255, 255, 255, .05) inset;
  --blur: 12px;
  --radius: 18px;
  --text: #e9f6f3;

  /* Gradient tokens */
  --gradient-primary: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(0,211,189,0.12) 0%, rgba(0,173,132,0.04) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-border: linear-gradient(135deg, rgba(0,245,212,0.3) 0%, rgba(0,211,189,0.15) 50%, rgba(0,173,132,0.1) 100%);

  /* State Colors */
  --danger: #D30000;
  --danger-bg: rgba(211, 0, 0, .12);
}

/* Hide scrollbar for Chrome/Safari/Opera */
::-webkit-scrollbar {
  display: none;
}

/* Base Button Style */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #1d3540;
  background: transparent;
  color: #bfe9e1;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .2s, filter .15s, transform .03s, border-color .15s;
}

/* ==========================================================================
   2. WORKBENCH LAYOUT (Columns & Containers)
   ========================================================================== */
#workbench-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

#workbench-columns {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 12px;
  align-items: start;
  padding: 0;
  margin: 0 auto;
}

/* Glass panels should fill their grid cells */
#workbench-columns > .glass-panel {
  width: 100%;
  max-width: none;
}

#your-parlay-column,
#suggested-legs-column {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

#suggested-legs-column {
  min-height: 800px;
  max-height: calc(100vh - 120px);
  padding: 20px;
  overflow-y: auto;
}

/* Building section - sticky sidebar */
#your-parlay-column {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
}

/* ==========================================================================
   FILTER SECTION (Mode Toggle + Game/Market Filters)
   ========================================================================== */
.props-filter-section {
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-align: center;
}

.filter-mode-toggle {
  display: inline-flex;
  position: relative;
  margin-bottom: 6px;
  background: rgba(0, 211, 189, 0.02);
  border: 1px solid rgba(0, 211, 189, 0.2);
  border-radius: 10px;
  padding: 0px;
  gap: 0;
}

.filter-mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(0, 211, 189, 0.7);
  border-radius: 7px;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 53px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex: 1;
  white-space: nowrap;
}

.filter-mode-btn:hover {
  color: #00F5D4;
}

.filter-mode-btn.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  font-weight: 700;
  border-radius: 16px;
}

/* MLB hides Position + Hit Rate from the mobile card filter strip — neither
   maps to MLB props (no positional split, no L5/H2H card data path). */
body.is-mlb-route .filter-mode-toggle .filter-mode-btn[data-mode="position"],
body.is-mlb-route .filter-mode-toggle .filter-mode-btn[data-mode="hitrate"] {
  display: none !important;
}

/* MLB hides the parlay container's "Customize" button entirely — the
   build-modal customization is NBA/NFL-specific (uses the build-state
   manager that MLB doesn't wire into; see syncGameChipsToBuild). The
   filter-container's inline `display: none` flips to visible when the
   parlay has legs; this rule overrides that flip so the button stays
   hidden in both empty and populated parlay states. */
body.is-mlb-route #mlb-filter-trigger,
body.is-mlb-route .filter-container:has(#mlb-filter-trigger) {
  display: none !important;
}

/* By Rate / By Form are MLB-only — they read per-prop-type fields from
   tableViewMLB column configs that don't exist for NBA/NFL. Hide them on
   non-MLB so the strip stays sport-appropriate. Inverse of the rule above. */
.filter-mode-toggle .filter-mode-btn.mlb-only { display: none; }
body.is-mlb-route .filter-mode-toggle .filter-mode-btn.mlb-only { display: inline-flex; }

/* ==========================================================================
   FILTER TOGGLE WRAPPER (for In Parlay + main toggle)
   ========================================================================== */
.filter-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.filter-toggle-wrapper .filter-mode-toggle {
  margin-bottom: 0; /* Remove margin since wrapper handles it */
}

/* ==========================================================================
   IN PARLAY FILTER (Wide screens only)
   ========================================================================== */
.in-parlay-filter {
  display: none; /* Hidden on mobile */
  align-items: center;
  justify-content: center;
  background: rgba(0, 211, 189, 0.15);
  border: 1px solid rgba(0, 211, 189, 0.3);
  color: #00D3BD;
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.in-parlay-filter:hover {
  background: rgba(0, 211, 189, 0.25);
  color: #00F5D4;
}

.in-parlay-filter.active {
  background: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%);
  border-color: #00D3BD;
  color: #0a1628;
  font-weight: 700;
}

/* Always show on wide screens */
@media (min-width: 1001px) {
  .in-parlay-filter {
    display: inline-flex;
  }
}

/* ==========================================================================
   RESET FILTERS BUTTON
   ========================================================================== */

/* ==========================================================================
   GAME FILTER
   ========================================================================== */
.props-game-filter {
  margin: 0;
  overflow: hidden; /* Clip content to prevent layout expansion */
}

.game-filter-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.game-filter-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.game-filter-chips {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding-bottom: 8px;
}

.game-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Consistent height across all filter buttons */
  min-height: 52px;
  box-sizing: border-box;
}

.game-chip .chip-matchup {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* MLB game chips: [logo] Tigers @ Royals [logo] — logos flank the short
   nicknames. Sized to match the chip's text height so the row stays
   visually consistent with NBA chips that don't show logos. */
.game-chip .chip-team-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.game-chip .chip-vs {
  opacity: 0.6;
  font-weight: 500;
}

.game-chip .chip-time {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 400;
}

.game-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.game-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
}

.game-chip.active .chip-matchup {
  font-weight: 700;
}

.game-chip.active .chip-time {
  opacity: 0.85;
}

.game-chip[data-game="all"],
.market-chip[data-market="all"],
.position-chip[data-position="all"] {
  font-weight: 700 !important;
}

.market-chip[data-market="all"] {
  padding-left: 20px;
  padding-right: 20px;
}

.game-chip.live {
  border-color: rgba(255, 200, 50, 0.6);
  box-shadow: 0 0 8px rgba(255, 200, 50, 0.3);
}

.game-chip.live .chip-matchup::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ffc832;
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse-live 1.5s infinite;
}

.game-chip.final {
  opacity: 0.5;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================================================
   MARKET FILTER
   ========================================================================== */
.props-market-filter {
  margin: 0;
}

.market-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.market-chip[data-market="3PM"] {
  display: none;
}

.market-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.market-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.market-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Position filter chips container */
.position-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Position filter chips */
.position-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 24px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.position-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.position-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Defense filter chips container */
.defense-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Defense filter chips */
.defense-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.defense-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.defense-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Hit rate filter chips container */
.hitrate-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Hit rate filter chips */
.hitrate-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.hitrate-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.hitrate-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

.grade-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Grade filter chips */
.grade-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.grade-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.grade-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Hide filtered props */
.suggested-prop.game-filtered,
.suggested-prop.market-filtered,
.suggested-prop.position-filtered {
  display: none !important;
}

#suggested-props-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow-y: auto;
}

/* Workbench empty state — centered in both card and table columns */
.wb-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wb-empty-state__msg {
  font-size: 18px;
  color: #fff;
  text-align: center;
}

#your-parlay-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Ensure prop cards fill container width */
#suggested-props-container > .suggested-prop,
#your-parlay-container > .suggested-prop {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* ==========================================================================
   3. PARLAY PLACEHOLDER (Empty State)
   ========================================================================== */
#your-parlay-container .parlay-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  pointer-events: none;
  padding: 100px 20px;
  margin: 20px 0;
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}

#your-parlay-container .parlay-placeholder .placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

#your-parlay-container .parlay-placeholder .placeholder-icon svg {
  width: 24px;
  height: 24px;
  stroke: rgba(255, 255, 255, 0.4);
}

#your-parlay-container .parlay-placeholder .placeholder-title {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

#your-parlay-container .parlay-placeholder .placeholder-subtitle {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}

/* Desktop placeholder: visible by default */
#your-parlay-container .parlay-placeholder .placeholder-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Inline filters inside placeholder need pointer events */
#your-parlay-container .parlay-placeholder .inline-filters-container {
  pointer-events: auto;
}

/* When inline filters are present, adjust placeholder layout */
#your-parlay-container .parlay-placeholder.has-inline-filters {
  padding: 2px 20px 0px;
  border: none;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  margin: 8px 0;
}

#your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-desktop {
  flex: 1;
}

#your-parlay-container .parlay-placeholder.has-inline-filters .inline-filters-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Hide old mobile placeholder when inline filters are present */
#your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-mobile {
  display: none !important;
}

/* Mobile placeholder: hidden by default */
#your-parlay-container .parlay-placeholder .placeholder-mobile {
  display: none;
}

/* ==========================================================================
   4. GLASS PANELS & UI COMPONENTS
   ========================================================================== */
.glass-panel {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 4px 24px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: 0;
  background: none;
  pointer-events: none;
}

/* Gradient accent line at top of panel */
.glass-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: none;
  z-index: 2;
}

.glass-panel>* {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   5. REMOVE ALL SELECTIONS BUTTON
   ========================================================================== */
#reset-parlay-button {
  appearance: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  margin-top: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 94, 107, .9);
  font-size: 14px;
  font-weight: 500;
  transition: all .15s ease;
}

#reset-parlay-button:hover {
  color: rgba(255, 94, 107, 1);
}

#reset-parlay-button svg {
  width: 13px;
  height: 13px;
  opacity: .9;
  margin-top: -1px;
}

/* ==========================================================================
   5.5 PARLAY FOOTER - Summary section (V2 Layout)
   ========================================================================== */
#parlay-footer {
  margin-top: -4px;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  position: relative;
  background: transparent;
  padding: 16px;
  border-radius: 0 0 16px 16px;
}

/* Header row: leg count + odds */
.pf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.pf-leg-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.pf-odds {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: #00D3BD;
  font-variant-numeric: tabular-nums;
}

/* Stats row: contains payout box and grade box */
.pf-stats-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

/* Payout row: to-win on left, wager controls on right */
.pf-payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  min-height: 70px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
}

.pf-payout-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-payout-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pf-payout-amount {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #00D3BD;
  font-variant-numeric: tabular-nums;
}

/* Parlay grade box (separate bubble) */
.pf-grade-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-height: 70px;
  padding: 6px 20px 2px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
}

.pf-grade-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.pf-grade-value {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #02d2a7;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

/* Wager controls */
.pf-wager-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-wager-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pf-wager-btn:hover {
  background: rgba(0, 211, 189, 0.15);
  border-color: rgba(0, 211, 189, 0.3);
  color: #00D3BD;
}

.pf-wager-btn:active {
  transform: scale(0.95);
}

.pf-wager-amount {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  min-width: 50px;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* CTA row: share + place bet buttons */
.pf-cta-row {
  display: flex;
  gap: 10px;
}

/* Share button (hidden by default) */
.pf-btn-share {
  flex: 1;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.45);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent-bright, #00F5D4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.pf-btn-share:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pf-btn-share:active {
  transform: scale(0.98);
}

.pf-btn-share svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

.pf-btn-share.feedback-shown {
  background: rgba(0, 211, 189, 0.15);
  color: #00D3BD;
  border-color: rgba(0, 211, 189, 0.3);
}

/* Prevent layout shift and touch scroll on share button */
.pf-btn-share {
  min-width: 80px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Share dropdown wrapper */
.pf-share-wrapper {
  position: relative;
  flex: 1;
}

.pf-share-wrapper .pf-btn-share {
  width: 100%;
}

/* Share dropdown menu */
.pf-share-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(20, 30, 50, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 4px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pf-share-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.pf-share-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.pf-share-menu-item:active {
  background: rgba(255, 255, 255, 0.12);
}

.pf-share-menu-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Place bet button */
.pf-btn-place {
  flex: 1;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.45);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent-bright, #00F5D4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pf-btn-place:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pf-btn-place:active {
  transform: scale(0.98);
}

.pf-btn-place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pf-btn-logo {
  height: 16px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

/* Save button */
/* ── Save button: golden ring ── */
.pf-btn-save {
  flex: 1;
  position: relative;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--theme-text-on-accent, #0a1628);
  background: linear-gradient(
    135deg,
    rgba(var(--theme-accent-rgb, 0, 211, 189), .7) 0%,
    rgba(var(--theme-accent-rgb, 0, 211, 189), .9) 50%,
    rgba(var(--theme-accent-rgb, 0, 211, 189), .7) 100%
  );
  background-size: 200% 200%;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), .45);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: gradShift 3s ease infinite;
  transition: transform .2s;
}

.pf-btn-save:hover {
  transform: translateY(-2px) scale(1.03);
}

.pf-btn-save:active {
  transform: scale(.97);
}

/* MLB save flow isn't ready — mute the button so it visually reads as
   "not actionable" but still accepts clicks (which surface the
   "In Development" feedback message via the existing feedback widget).
   Animation is paused so the saving / grad-shift loops don't draw the
   eye to a button that won't actually save. */
body.is-mlb-route .pf-btn-save {
  opacity: 0.55;
  animation: none;
  cursor: not-allowed;
}
body.is-mlb-route .pf-btn-save:hover {
  transform: none;
  opacity: 0.7;
}

@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Saving state — shimmer pulse while waiting for API */
@keyframes saveShimmer {
  0%   { opacity: .85; }
  50%  { opacity: .5; }
  100% { opacity: .85; }
}

.pf-btn-save.saving {
  animation: saveShimmer 1s ease-in-out infinite, gradShift 3s ease infinite;
  pointer-events: none;
}

/* Label crossfade */
.pf-save-label {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transition: opacity .25s ease;
}

.pf-btn-save.label-swap .pf-save-label {
  opacity: 0;
}

/* Hide CTA icons on desktop, show on mobile */
.pf-mobile-icon {
  display: none !important;
}

/* Save bookmark icon — hidden everywhere */
.pf-save-icon {
  display: none !important;
}

.pf-btn-save svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Feedback states */
.pf-btn-save.feedback-shown {
  background: rgba(255, 107, 107, 0.25);
  animation: none;
  box-shadow: 0 4px 24px rgba(255, 107, 107, .3);
}
.pf-btn-save.feedback-shown .pf-save-label {
  color: #ff6b6b;
}

.pf-btn-save.feedback-shown.feedback-success {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.25);
  box-shadow: 0 4px 24px rgba(var(--theme-accent-rgb, 0, 211, 189), .3);
}
.pf-btn-save.feedback-shown.feedback-success .pf-save-label {
  color: var(--theme-accent-bright, #00F5D4);
}

/* ==========================================================================
   6.5 COMPACT FOOTER FOR SIDEBAR (Desktop narrow layout)
   ========================================================================== */
/* Footer adjustments for narrow sidebar */
#your-parlay-column #reset-parlay-button {
  padding: 10px 12px;
  font-size: 12px;
}

#your-parlay-column #parlay-footer {
  padding: 0px 16px 16px 16px;
}

#your-parlay-column .pf-header {
  margin-bottom: 10px;
}

#your-parlay-column .pf-leg-count {
  font-size: 13px;
}

#your-parlay-column .pf-odds {
  font-size: 14px;
}

#your-parlay-column .pf-payout-row {
  padding: 10px 12px;
  margin-bottom: 10px;
}

#your-parlay-column .pf-payout-label {
  font-size: 10px;
}

#your-parlay-column .pf-payout-amount {
  font-size: 18px;
}

#your-parlay-column .pf-stats-row {
  gap: 8px;
  margin-bottom: 10px;
}

#your-parlay-column .pf-grade-box {
  padding: 10px 14px;
}

#your-parlay-column .pf-grade-label {
  font-size: 10px;
}

#your-parlay-column .pf-grade-value {
  font-size: 18px;
}

#your-parlay-column .pf-wager-amount {
  font-size: 14px;
  min-width: 44px;
}

#your-parlay-column .pf-wager-btn {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

#your-parlay-column .pf-btn-place,
#your-parlay-column .pf-btn-share,
#your-parlay-column .pf-btn-save {
  padding: 12px 14px;
  font-size: 13px;
}

/* ==========================================================================
   7. MOBILE / RESPONSIVE (Consolidated < 1000px)
   ========================================================================== */
@media (max-width: 1000px) {
  /* Remove gap between navbar and workbench */
  .main-content {
    margin-top: 0;
  }

  /* --- Layout Stacking --- */
  #workbench-section {
    padding: 0;
    max-width: 100%;
    /* box-sizing: border-box;
    overflow-x: hidden; */
  }

  #workbench-columns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0;
    margin: 0;
    width: 100%;
    /* max-width: 100%;
    box-sizing: border-box; */
  }

  /* Kill the subtle teal gradient at the top of the page */
  body::before {
    display: none;
  }

  /* Match nav to the same subtle glass as columns — only on workbench */
  body.workbench-active .landing-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.0);
  }

  /* Glass panels — fully transparent flat canvas */
  #workbench-columns > .glass-panel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    isolation: auto;
  }

  #workbench-columns > .glass-panel::before,
  #workbench-columns > .glass-panel::after {
    display: none !important;
  }

  #your-parlay-column,
  #suggested-legs-column {
    background: rgba(255, 255, 255, 0.008) !important;
  }

  .glass-panel {
    padding: 12px;
    border-radius: 0;
  }

  /* Reset column margins/widths for mobile */
  #your-parlay-column,
  #suggested-legs-column {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    /* overflow-x: hidden; */
  }

  /* Reset sticky and height for mobile */
  #your-parlay-column {
    position: relative;
    top: 0;
    height: auto !important;
    min-height: 400px;
    max-height: none;
    overflow-y: visible;
    padding: 12px;
  }

  /* CLS fix (MLB mobile only) — top-anchor the parlay placeholder. By default
     .parlay-placeholder is flex-centered with 100px top padding; when
     initMLBBuildFeature injects the inline build UI it adds .has-inline-filters
     which flips the layout to flex-start + 2px padding. That re-alignment jumped
     the placeholder content upward by ~100px after first paint (measured 0.213
     CLS). Matching the pre-injection layout to the injected layout anchors the
     content to the top in both states, so swapping in the build UI no longer
     repositions it. Scoped to body.is-mlb-route (added MLB-only at
     mlbWorkbenchCore.js:866, removed for other sports at tableView-core.js:1928)
     so NBA/NFL/World Cup are unaffected. */
  body.is-mlb-route #your-parlay-container .parlay-placeholder:not(.has-inline-filters) {
    justify-content: flex-start;
    padding: 2px 20px 0;
    margin: 8px 0;
    border: none;
  }

  /* CLS fix (MLB mobile only): reserve the parlay column at roughly its injected
     build-UI height (measured ~1063px on a full slate) so the inline build UI
     fills reserved space instead of growing the column after first paint — that
     growth otherwise pushes the props column / footer down (the .glass-panel
     shift). Relies on the server-emitted is-mlb-route body class so this is
     active at first paint, before the scaffold injects. */
  body.is-mlb-route #your-parlay-column {
    min-height: 1100px;
  }

  /* CLS fix (MLB mobile only): reserve the scaffold's height so the body-level
     footer stays below the fold from the very first paint. The scaffold injects
     after first paint (parlay build UI ~1063px + props column min 800px, stacked
     ≈ 1900px); without a reservation the empty section is short, the footer
     paints in-viewport, then the scaffold pushes it down (the footer shift). A
     plain 100vh was shorter than the scaffold, so it didn't fully cover it; a
     fixed 1900px does. A real MLB slate's card list far exceeds 1900px (so no
     whitespace) and the #loading-animation overlay masks the brief empty paint.
     Scoped to body.is-mlb-route — inert for NBA/NFL and World Cup. Excluded
     when a player/pitcher dashboard is open (body.mlb-dashboard-active): that
     state hides #workbench-columns but NOT #workbench-section, and the dashboard
     is appended after #workbench-section inside #content-section — so without
     this exclusion the 1900px reservation would leave a tall empty gap above
     the dashboard. */
  body.is-mlb-route:not(.mlb-dashboard-active) #workbench-section {
    min-height: 1900px;
  }

  /* CLS fix (NBA mobile only): same disease as MLB, but worse — the NBA workbench
     is built entirely client-side, so #workbench-section is genuinely EMPTY at
     first paint (MLB server-renders its scaffold to fill it). With nothing in the
     section the body-level footer paints near the top (~y=95), then the client
     build shoves it down ~1500px when content lands ≈9s → a ~0.97 CLS. Reserving
     height keeps the footer below the fold from the moment the workbench wrapper
     becomes visible. The fold at the no-viewport-meta scaled layout sits ≈2180px
     and the empty footer would otherwise sit at 95+min-height, so MLB's 1900 is
     too short here; 2600 clears the fold with margin. A real NBA slate's card
     list is ~26000px tall (so no whitespace), and on the landing this is inert —
     the content wrapper is display:none under cover-active (rect collapses to 0).
     Scoped to body.is-nba-shell, a server-emitted marker (see index.html) that is
     DISTINCT from the client-side `is-nba-route` class the table view toggles for
     multi-book mode (tableView-core.js). */
  body.is-nba-shell #workbench-section {
    min-height: 2600px;
  }

  #suggested-legs-column {
    height: auto !important;
    min-height: 800px;
    max-height: none;
    padding: 12px;
    overflow-y: visible;
  }

  /* Prop containers full width */
  #suggested-props-container,
  #your-parlay-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
    /* box-sizing: border-box; */
  }

  /* Prop cards MUST be full width on mobile */
  #suggested-props-container > .suggested-prop,
  #your-parlay-container > .suggested-prop {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* --- Filter Section Mobile --- */
  .props-filter-section {
    margin-bottom: 0px;
    padding-bottom: 0px;
    width: 100%;
    max-width: calc(100vw - 40px);
    overflow: visible;
    box-sizing: border-box;
  }

  .filter-mode-toggle {
    margin-bottom: 10px;
    padding: 0px;
    border-radius: 16px;
    border-width: 1px;
  }

  .filter-toggle-wrapper {
    margin-bottom: 0px;
  }

  /* Add spacing above secondary filter rows when expanded */
  .props-game-filter,
  .props-grade-filter,
  .props-market-filter,
  .props-position-filter,
  .props-defense-filter,
  .props-hitrate-filter,
  .props-rate-filter,
  .props-form-filter {
    margin-top: 18px;
  }

  .filter-mode-btn {
    padding: 22px 21px;
    font-size: 24px;
    min-height: 90px;
    border-radius: 12px;
  }

  /* --- Game Filter Mobile --- */
  .props-game-filter {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* MOBILE LAYOUT IS INCORRECT WITHOUT THIS */
  .game-filter-scroll-wrapper {
    max-width: 900px;
    width: 100%;
  }

  .game-filter-chips {
    gap: 8px;
  }

  .game-chip {
    padding: 16px 30px;
    font-size: 18px;
    border-radius: 14px;
    min-height: 58px;
  }

  .game-chip .chip-time {
    font-size: 13px;
  }

  /* --- Market Filter Mobile --- */
  .props-market-filter {
    width: 100;
    max-width: 100%;
    box-sizing: border-box;
  }

  .market-filter-chips {
    gap: 8px;
  }

  .market-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
    min-width: 120px;
  }

  .market-chip[data-market="all"] {
    padding-left: 24px;
    padding-right: 24px;
  }

  .position-filter-chips {
    gap: 12px;
  }

  .position-chip {
    padding: 24px 36px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 62px;
    min-width: 120px;
  }

  .defense-filter-chips {
    gap: 12px;
  }

  .defense-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
  }

  .hitrate-filter-chips {
    gap: 12px;
  }

  .hitrate-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
  }

  .grade-filter-chips {
    gap: 12px;
  }

  .grade-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
  }

  /* --- Footer & Stake Mobile Adjustments --- */
  #reset-parlay-button {
    padding: 16px;
    font-size: 1.75rem !important;
    gap: 8px;
  }

  #reset-parlay-button svg {
    width: 24px;
    height: 24px;
    margin-top: 0px;
  }

  #parlay-footer {
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    padding: 14px 32px 24px 32px !important;
    border-radius: 0;
  }

  .pf-leg-count {
    font-size: 24px !important;
  }

  .pf-odds {
    font-size: 24px !important;
  }

  .pf-payout-row {
    padding: 16px 20px !important;
    min-height: 100px;
  }

  .pf-payout-label {
    font-size: 0.85rem !important;
  }

  .pf-payout-amount {
    font-size: 1.75rem !important;
  }

  .pf-grade-box {
    align-self: flex-start;
    max-height: none;
    min-height: 100px;
  }

  .pf-grade-label {
    font-size: 0.85rem !important;
  }

  .pf-grade-value {
    font-size: 1.75rem !important;
  }

  .pf-wager-btn {
    width: 100px !important;
    height: 64px !important;
    font-size: 1.75rem !important;
    border-radius: 12px;
  }

  .pf-wager-controls {
    gap: 12px;
  }

  .pf-wager-amount {
    font-size: 1.5rem !important;
    min-width: 70px !important;
  }

  .pf-mobile-icon {
    display: inline-block !important;
    margin-right: 4px;
  }

  .pf-cta-row {
    gap: 12px;
  }

  .pf-btn-place,
  .pf-btn-share,
  .pf-btn-save {
    padding: 18px 14px !important;
    font-size: 22px !important;
  }

  .pf-btn-save {
    font-weight: 700 !important;
  }

  .pf-btn-logo {
    height: 24px;
    border-radius: 5px;
  }

  .pf-btn-place,
  .pf-btn-save,
  .pf-btn-share {
    gap: 8px !important;
  }

  .pf-btn-share svg {
    width: 20px !important;
    height: 20px !important;
  }

  .pf-share-menu {
    display: none !important;
  }

  /* --- Mobile Placeholder --- */
  #your-parlay-container .parlay-placeholder {
    padding: 60px 20px;
    margin: 20px 0;
    border: none;
    background: transparent;
  }

  /* When inline filters exist, show them on mobile too */
  #your-parlay-container .parlay-placeholder.has-inline-filters {
    padding: 4px 16px 20px;
    margin: 8px 0;
  }

  #your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Hide the old mobile text when inline filters are present */
  #your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-mobile {
    display: none !important;
  }

  /* Original mobile placeholder (only shows when no inline filters) */
  #your-parlay-container .parlay-placeholder:not(.has-inline-filters) .placeholder-desktop {
    display: none;
  }

  #your-parlay-container .parlay-placeholder:not(.has-inline-filters) .placeholder-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -2px;
  }

  .placeholder-mobile-title,
  .placeholder-mobile-or,
  .placeholder-mobile-subtitle {
    font-weight: 600;
    color: rgba(0, 211, 189, 0.9);
  }

  .placeholder-mobile-title {
    font-size: 48px;
  }

  .placeholder-mobile-or,
  .placeholder-mobile-subtitle {
    font-size: 44px;
  }

  .placeholder-mobile-title,
  .placeholder-mobile-subtitle {
    position: relative;
  }

  .placeholder-arrow {
    position: absolute;
    width: 66px;
    height: auto;
    opacity: 1;
  }

  .placeholder-arrow.arrow-up {
    right: 100%;
    bottom: 65%;
    margin-right: -4px;
    transform: rotate(20deg);

  }

  .placeholder-arrow.arrow-down {
    left: 100%;
    top: 65%;
    margin-left: -8px;
    transform: rotate(210deg);
  }

  /* --- iOS / Blur Removal --- */
  .prop-card,
  .glass-panel::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ==========================================================================
   9a. DESKTOP - Parlay column scrolling (above mobile breakpoint)
   ========================================================================== */
@media (min-width: 1001px) {
  /* Kill the subtle teal gradient on desktop workbench too */
  body::before {
    display: none !important;
  }

  /* Override theme teal gradients on glass panels — keep glassy, remove teal */
  #workbench-columns > .glass-panel {
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
  #workbench-columns > .glass-panel::before {
    background: none !important;
  }
  #workbench-columns > .glass-panel::after {
    background: none !important;
  }

  /* Wide screens: table-only mode - hide card container */
  #suggested-props-container {
    display: none !important;
  }

  /* Hide card filter section on wide screens (use table filter bar instead) */
  #props-filter-section {
    display: none !important;
  }

  /* Cap parlay column height and use flex layout */
  /* Note: display uses !important only when not explicitly hidden via inline style */
  #your-parlay-column:not([style*="display: none"]):not([style*="display:none"]) {
    max-height: calc(100vh - 20px - var(--pb-bottom-nav-height, 64px) - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Props container takes remaining space and scrolls */
  #your-parlay-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Footer stays fixed at bottom */
  #your-parlay-column #parlay-footer {
    flex-shrink: 0 !important;
  }

  #workbench-section {
    max-width: 2200px;
  }

  #suggested-props-container > .suggested-prop {
    width: 100%;
  }
}

/* ==========================================================================
   PARLAY INFO POPUP
   ========================================================================== */

.parlay-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  z-index: 2;
  transition: color 0.15s;
}

.parlay-info-btn:hover {
  color: rgba(255, 255, 255, 0.5);
}

.parlay-info-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-bottom: 24px;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.parlay-info-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.parlay-info-step-icon {
  color: #00D3BD;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.parlay-info-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.parlay-info-step-text strong {
  color: #E6EDF3;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .parlay-info-btn {
    font-size: 32px;
    top: 12px;
    right: 12px;
  }

  #parlay-info-popup .duel-challenge-popup-subtitle {
    font-size: 26px;
  }

  .parlay-info-steps {
    gap: 24px;
    max-width: none;
    margin-bottom: 32px;
    padding: 0 24px;
  }

  .parlay-info-step-icon {
    font-size: 24px;
    margin-top: 4px;
  }

  .parlay-info-step-text {
    font-size: 22px;
  }

  .parlay-info-step-text strong {
    font-size: 24px;
  }
}