/* Odds target */
.set-desired-odds-wrapper{ margin-top:0; display:flex; align-items:center; justify-content:center; flex-direction:column; width:100%; box-sizing:border-box; }
.set-desired-odds-wrapper h2{ color:#d6fffa !important; margin-top: 0; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.slider-container{ display:flex; align-items:center; position:relative; width:100%; max-width:100%; box-sizing:border-box; }
#odds-slider{
  --min:100; --max:3000; --value:100; --sl-fill:#029C89; --sl-pct:0%;
  width: 100%; max-width: 600px; height:8px; border-radius:40px; outline:none; -webkit-appearance:none; background:transparent;
  margin:0 10px;
}
#odds-slider::-webkit-slider-runnable-track{ width:100%; height:8px; border-radius:40px; background: linear-gradient(to right, var(--sl-fill) var(--sl-pct), #0d2b3f var(--sl-pct)); }
#odds-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--brand-teal); background:var(--bg-navy-700); cursor:pointer; margin-top:-7px; }
#odds-slider::-moz-range-track{ width:100%; height:8px; border-radius:40px; background: linear-gradient(to right, var(--sl-fill) var(--sl-pct), #0d2b3f var(--sl-pct)); }
#odds-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; border:1px solid var(--brand-teal); background:var(--bg-navy-700); cursor:pointer; }
#target-odds-input{ background:transparent; color:#d6fffa; width:80px; margin-right:10px; padding:5px; font-size:16px; font-weight:600; border:0; border-radius:var(--radius-md); text-align:center; }

/* ============================================
   Shared: Build row & primary CTA
   ============================================ */
.build-parlay-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 16px;
}

#build-parlay-button.btn.btn-primary {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border:1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),.45);
  color:var(--theme-text-on-accent, #0a1628);
  background:linear-gradient(180deg, rgba(var(--theme-accent-rgb, 0, 211, 189),.98), rgba(var(--theme-accent-rgb, 0, 211, 189),.85));
  box-shadow:0 6px 24px rgba(var(--theme-accent-rgb, 0, 211, 189),.25), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Leg-count dropdown */
.leg-count-dropdown{
  position:relative; display:inline-flex;
}
.leg-count-trigger{
  appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 12px;
  border:1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),.45);
  border-radius:10px;
  background:transparent;
  font-size:12px; font-weight:600;
  color:var(--theme-accent-bright, #00F5D4);
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.leg-count-trigger:hover{
  background:rgba(var(--theme-accent-rgb, 0, 211, 189),.12);
}
.leg-count-dropdown.open .leg-count-trigger{
  border-color:var(--theme-accent-bright, #00F5D4);
  background:rgba(var(--theme-accent-rgb, 0, 211, 189),.15);
}
.leg-count-chevron{
  display:inline-block;
  width:7px; height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.7;
  transition:transform .2s ease;
  margin-top:-2px;
  margin-left:2px;
}
.leg-count-dropdown.open .leg-count-chevron{
  transform:rotate(-135deg);
  margin-top:2px;
}
.leg-count-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  min-width:100%;
  max-height:240px;
  overflow-y:auto;
  background:var(--theme-card-bg, #0f1d33);
  border:1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),.35);
  border-radius:10px;
  padding:4px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  z-index:1000;
}
.leg-count-dropdown.open .leg-count-menu{
  display:flex;
  flex-direction:column;
}
.leg-count-option{
  appearance:none; border:none;
  background:transparent;
  color:var(--theme-text-secondary, #a0aec0);
  font-size:12px; font-weight:500;
  padding:7px 14px;
  border-radius:7px;
  cursor:pointer; text-align:left;
  white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.leg-count-option:hover{
  background:rgba(var(--theme-accent-rgb, 0, 211, 189),.15);
  color:var(--theme-accent-bright, #00F5D4);
}
.leg-count-option.active{
  background:rgba(var(--theme-accent-rgb, 0, 211, 189),.22);
  color:var(--theme-accent-bright, #00F5D4);
  font-weight:600;
}

/* Mobile stepper (hidden on desktop, shown on mobile) */
.leg-stepper-mobile{ display:none; }
span.leg-stepper-mobile.leg-stepper-value{
  display:none; align-items:center; justify-content:center;
  height:36px; padding:0 14px;
  border:1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),.45);
  border-radius:10px;
  background:transparent;
  font-size:12px; font-weight:600;
  color:var(--theme-accent-bright, #00F5D4); user-select:none; white-space:nowrap;
}
div.leg-stepper-mobile.leg-stepper-btns{
  display:none; align-items:center; gap:4px;
}
.leg-stepper-btns .leg-stepper-btn{
  appearance:none; border:1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),.45);
  background:transparent;
  color:var(--theme-accent-bright, #00F5D4);
  width:32px; height:36px; font-size:18px; font-weight:600;
  border-radius:10px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.leg-stepper-btns .leg-stepper-btn:hover{ background:rgba(var(--theme-accent-rgb, 0, 211, 189),.18); }

/* Hide cards filtered out by builder logic */
.nfl-builder-hidden,
.nba-builder-hidden { display: none !important; }

/* ============================================
   Overlay (both sports)
   ============================================ */
.nflf-overlay,
.nbaf-overlay{
  position: fixed;
  inset: 0;
  background: rgba(3,22,37,0.90);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 2147483645;
  pointer-events: all;
}

/* Lock page scroll when modal is open (desktop + iOS) */
body.nflf-lock,
body.nbaf-lock{
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* ============================================
   Modal roots (positioning & layout)
   ============================================ */
#nfl-filter-popup.nflf-modal-root,
#nba-filter-popup.nbaf-modal-root{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  z-index: 2147483646;
}

/* Panels */
#nfl-filter-popup .nflf-modal,
#nba-filter-popup .nbaf-modal{
  width: min(980px, 96vw);
  height: calc(100vh - 48px);
  min-height: 0;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  color: var(--theme-text-secondary, #e8ffe9);
  background: var(--theme-bg-base, #0a1628);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  overflow: hidden;
}

/* ============================================
   Header (title, subtitle, close)
   ============================================ */
#nfl-filter-popup .nflf-header,
#nba-filter-popup .nbaf-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 18px 16px;
  background: none;
  position: relative;          /* for absolute 'close' button */
  padding-right: 56px;         /* space for the X button */
}

#nfl-filter-popup .nflf-title,
#nba-filter-popup .nbaf-title{ font-size: 20px; font-weight: 600; }
#nfl-filter-popup .nflf-title-count,
#nba-filter-popup .nbaf-title-count{ font-weight: 400; }

#nfl-filter-popup .nflf-subtitle,
#nba-filter-popup .nbaf-subtitle{ font-size: 12px; color: rgba(214,255,250,0.75); margin-top: 4px; }

#nfl-filter-popup .nflf-close,
#nba-filter-popup .nbaf-close{
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.12);
  color: #d6fffa;
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#nfl-filter-popup .nflf-close:hover,
#nba-filter-popup .nbaf-close:hover{ background: rgba(255,255,255,0.2); }

/* ============================================
   Presets row
   ============================================ */
#nfl-filter-popup .nflf-presets-row,
#nba-filter-popup .nbaf-presets-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 10px;
}

#nfl-filter-popup .nflf-preset,
#nba-filter-popup .nbaf-preset{
  appearance: none;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),0.35);
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  color: var(--theme-text-secondary, #e8ffe9);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
#nfl-filter-popup .nflf-preset span,
#nba-filter-popup .nbaf-preset span{ opacity: .75; margin-left: 6px; font-weight: 400; }

/* ============================================
   Body (scroll area)
   ============================================ */
#nfl-filter-popup .nflf-body,
#nba-filter-popup .nbaf-body{
  --section-gap: 24px;
  flex: 1 1 auto;
  min-height: 0; /* critical for flex scroll areas */
  padding: 12px 16px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ============================================
   Sections
   ============================================ */
#nfl-filter-popup .nflf-section,
#nba-filter-popup .nbaf-section{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
#nfl-filter-popup .nflf-section-head,
#nba-filter-popup .nbaf-section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
#nfl-filter-popup .nflf-section-title,
#nba-filter-popup .nbaf-section-title{ font-size: 16px; font-weight: 600; }
#nfl-filter-popup .nflf-section-sub,
#nba-filter-popup .nbaf-section-sub{ font-size: 12px; color: rgba(214,255,250,0.75); margin-top: 2px; }
#nfl-filter-popup .nflf-right-actions,
#nba-filter-popup .nbaf-right-actions{ display: flex; gap: 8px; }

/* ============================================
   Chips & buttons (types / matchups)
   ============================================ */
#nfl-filter-popup .nflf-chips,
#nba-filter-popup .nbaf-chips{ display: flex; flex-wrap: wrap; gap: 8px; }

#nfl-filter-popup .nflf-chip,
#nba-filter-popup .nbaf-chip,
#nfl-filter-popup .nfl-filter-btn,
#nba-filter-popup .nba-filter-btn,
#nfl-filter-popup .nfl-builder-matchup-btn,
#nba-filter-popup .nba-builder-matchup-btn{
  appearance: none;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.35);
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  color: var(--theme-text-secondary, #e8ffe9);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

/* Active states */
#nfl-filter-popup .active-chip,
#nba-filter-popup .active-chip,
#nfl-filter-popup .nfl-filter-btn.active-filter,
#nba-filter-popup .nba-filter-btn.active-filter,
#nfl-filter-popup .nfl-builder-matchup-btn.active-chip,
#nba-filter-popup .nba-builder-matchup-btn.active-chip{
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.75);
  color: var(--theme-text-on-accent, #0a1628);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.82);
}

/* Disabled type buttons */
#nfl-filter-popup .nfl-filter-btn.is-disabled,
#nba-filter-popup .nba-filter-btn.is-disabled{
  cursor: not-allowed;
  opacity: .45;
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.08);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.15);
}
#nfl-filter-popup .nfl-filter-btn.is-disabled.active-filter,
#nba-filter-popup .nba-filter-btn.is-disabled.active-filter{
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.08);
  color: var(--theme-text-secondary, #e8ffe9);
}

/* ============================================
   Matchups grid & two-line chips
   ============================================ */
#nfl-filter-popup .nflf-matchups-grid,
#nba-filter-popup .nbaf-matchups-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

#nfl-filter-popup .nflf-matchups-grid .nfl-builder-matchup-btn,
#nba-filter-popup .nbaf-matchups-grid .nba-builder-matchup-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

#nfl-filter-popup .nfl-builder-matchup-btn .mu-teams,
#nba-filter-popup .nba-builder-matchup-btn .mu-teams{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  color: #d6fffa;
}

#nfl-filter-popup .nfl-builder-matchup-btn .mu-tipoff,
#nba-filter-popup .nba-builder-matchup-btn .mu-tipoff{
  font-size: 12px;
  line-height: 1.15;
  color: rgba(214,255,250,0.85);
}

/* Active contrast for selected chips */
#nfl-filter-popup .nflf-matchups-grid .nfl-builder-matchup-btn.active-chip .mu-teams,
#nba-filter-popup .nbaf-matchups-grid .nba-builder-matchup-btn.active-chip .mu-teams{ color:#031625; }
#nfl-filter-popup .nflf-matchups-grid .nfl-builder-matchup-btn.active-chip .mu-tipoff,
#nba-filter-popup .nbaf-matchups-grid .nba-builder-matchup-btn.active-chip .mu-tipoff{ color:rgba(3,22,37,0.8); }

/* Team logos inside matchup buttons */
.mu-team-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

.mu-teams {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1000px){
  .mu-team-logo { width: 24px; height: 24px; }
}

@media (max-width: 640px){
  #nfl-filter-popup .nflf-matchups-grid,
  #nba-filter-popup .nbaf-matchups-grid{ grid-template-columns: 1fr 1fr; }
}

/* ============================================
   Section-title icons
   ============================================ */
#nfl-filter-popup .nflf-section-title i,
#nba-filter-popup .nbaf-section-title i{
  margin-right: 6px;
  opacity: 0.7;
}

/* ============================================
   Split row (Positions + Line Direction side-by-side)
   ============================================ */
#nfl-filter-popup .nflf-split-row,
#nba-filter-popup .nbaf-split-row{
  display: flex;
  gap: 16px;
}
#nfl-filter-popup .nflf-split-row .nflf-section,
#nba-filter-popup .nbaf-split-row .nbaf-section{
  margin-bottom: 0;
}
#nfl-filter-popup .nflf-split-row .nflf-section-positions,
#nba-filter-popup .nbaf-split-row .nbaf-section-positions{
  flex: 0 0 auto;
}
#nfl-filter-popup .nflf-split-row .nflf-section-direction,
#nba-filter-popup .nbaf-split-row .nbaf-section-direction{
  flex: 1 1 auto;
}

@media (max-width: 640px){
  #nfl-filter-popup .nflf-split-row,
  #nba-filter-popup .nbaf-split-row{
    flex-direction: column;
    gap: var(--section-gap, 24px);
  }
}

/* ============================================
   Side-toggle pills (Line Direction)
   ============================================ */
#nfl-filter-popup .nflf-side-toggle,
#nba-filter-popup .nbaf-side-toggle{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================
   Hint text under Bet Types
   ============================================ */
#nfl-filter-popup .nflf-hint,
#nba-filter-popup .nbaf-hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(214,255,250,0.75);
}

/* ============================================
   Sticky footer
   ============================================ */
#nfl-filter-popup .nflf-footer,
#nba-filter-popup .nbaf-footer{
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px 18px;
  background: transparent;
  border-top: none;
}
#nfl-filter-popup .nflf-summary,
#nba-filter-popup .nbaf-summary{
  font-size: 12px;
  color: rgba(214,255,250,0.85);
}
#nfl-filter-popup .nflf-footer-actions,
#nba-filter-popup .nbaf-footer-actions{ display: flex; gap: 8px; }

#nfl-filter-popup .nflf-clear,
#nfl-filter-popup .nflf-reset,
#nba-filter-popup .nbaf-clear,
#nba-filter-popup .nbaf-reset{
  appearance: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: transparent;
  color: var(--theme-text-secondary, #e8ffe9);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.35);
}
#nfl-filter-popup .nflf-apply,
#nba-filter-popup .nbaf-apply{
  appearance: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.75);
  color: var(--theme-text-on-accent, #0a1628);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.82);
  box-shadow: 0 10px 20px rgba(var(--theme-accent-rgb, 0, 211, 189), 0.2);
}

/* ============================================
   Odds slider tier chips (shared UI)
   ============================================ */
#odds-tiers-rail{
  position: relative;
  height: 32px;
  margin-top: 8px;
  margin-bottom: 4px;
}
#odds-tiers-rail .odds-chip{
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
  appearance: none;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.35);
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  color: #d6fffa;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  opacity: 0.7;
}
#odds-tiers-rail .odds-chip:hover{
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.55);
}
#odds-tiers-rail .odds-chip.active{
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.82);
  color: var(--theme-text-on-accent, #0a1628);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.9);
}

/* ============================================
   Filter triggers (gear/slider button next to Build Parlay)
   ============================================ */
.nflf-trigger-btn,
.nbaf-trigger-btn{
  display:inline-flex; align-items:center; gap:.3rem;
  height:36px; padding:0 14px;
  border-radius:10px; font-size:12px;
  font-weight: 600;
  background:transparent;
  color:var(--theme-accent-bright, #00F5D4);
  border:1px solid rgba(var(--theme-accent-rgb, 0, 211, 189),.45);
  box-shadow: inset 0 0 0 0 rgba(var(--theme-accent-rgb, 0, 211, 189),0);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nflf-trigger-btn:hover,
.nbaf-trigger-btn:hover{ background:rgba(var(--theme-accent-rgb, 0, 211, 189),.14); border-color:rgba(var(--theme-accent-rgb, 0, 211, 189),.7); }
.nflf-trigger-btn .label,
.nbaf-trigger-btn .label{ font-weight:600; }
.nflf-trigger-btn .badge,
.nbaf-trigger-btn .badge{
  width:10px; height:10px; border-radius:50%;
  background:var(--theme-accent, #00D3BD); box-shadow:0 0 8px rgba(var(--theme-accent-rgb, 0, 211, 189),.8);
}
.nflf-trigger-btn.active,
.nbaf-trigger-btn.active{
  color:var(--theme-text-on-accent, #0a1628); background:rgba(var(--theme-accent-rgb, 0, 211, 189),.9);
  border-color:var(--theme-accent, #00D3BD);
  box-shadow:0 6px 16px rgba(var(--theme-accent-rgb, 0, 211, 189),.25);
}

/* Modern viewport units (mobile only — desktop uses compact sizing) */
@supports (height: 100dvh){
  @media (max-width: 1000px){
    #nfl-filter-popup .nflf-modal{ height: calc(100dvh - 48px); }
    #nba-filter-popup .nbaf-modal{ height: calc(100dvh - 48px); }
  }
}

/* ============================================
   BUILD PARAMETERS section (popup odds + legs)
   ============================================ */
.nflf-buildparams-row,
.nbaf-buildparams-row{
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, 24px);
}
.nflf-param-group,
.nbaf-param-group{
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
}
/* Odds chips row */
.nflf-popup-odds-chips,
.nbaf-popup-odds-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Leg chips row */
.nflf-popup-leg-chips,
.nbaf-popup-leg-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Slider + odds value on same row */
.nflf-slider-with-val,
.nbaf-slider-with-val{
  position: relative;
  margin-top: 10px;
}
.nflf-slider-with-val .nflf-param-slider,
.nbaf-slider-with-val .nbaf-param-slider{
  width: 100%;
}
.nflf-popup-odds-display,
.nbaf-popup-odds-display{
  position: absolute;
  right: -58px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-accent-bright, #00F5D4);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  min-width: 48px;
}
/* Build parameter sliders */
.nflf-param-slider,
.nbaf-param-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  outline: none;
  margin: 4px 0 0;
  padding: 0;
  cursor: pointer;
}
.nflf-param-slider::-webkit-slider-runnable-track,
.nbaf-param-slider::-webkit-slider-runnable-track{
  width: 100%;
  height: 6px;
  border-radius: 40px;
  background: rgba(255,255,255,0.08);
}
.nflf-param-slider::-webkit-slider-thumb,
.nbaf-param-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--theme-accent-bright, #00F5D4);
  border: 2px solid rgba(10,22,40,0.6);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,211,189,0.35);
  margin-top: -6px;
}
.nflf-param-slider::-moz-range-thumb,
.nbaf-param-slider::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-accent-bright, #00F5D4);
  border: 2px solid rgba(10,22,40,0.6);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,211,189,0.35);
}
.nflf-param-slider::-moz-range-track,
.nbaf-param-slider::-moz-range-track{
  height: 6px;
  border-radius: 40px;
  background: rgba(255,255,255,0.08);
}

/* ============================================
   Desktop compact (large screens only)
   ============================================ */
@media (min-width: 1001px){
  /* Shrink modal panel and align with parlay column */
  #nfl-filter-popup .nflf-modal,
  #nba-filter-popup .nbaf-modal{
    width: min(660px, 80vw);
    height: min(72vh, 680px);
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Slightly smaller header (not a big reduction) */
  #nfl-filter-popup .nflf-title,
  #nba-filter-popup .nbaf-title{ font-size: 17px; }
  #nfl-filter-popup .nflf-subtitle,
  #nba-filter-popup .nbaf-subtitle{ font-size: 11px; }
  #nfl-filter-popup .nflf-header,
  #nba-filter-popup .nbaf-header{ padding: 12px 16px; padding-right: 50px; }
  #nfl-filter-popup .nflf-close,
  #nba-filter-popup .nbaf-close{ width: 30px; height: 30px; font-size: 14px; }

  /* Tighter body padding */
  #nfl-filter-popup .nflf-body,
  #nba-filter-popup .nbaf-body{ padding: 8px 14px 0; }

  /* Smaller section titles */
  #nfl-filter-popup .nflf-section-title,
  #nba-filter-popup .nbaf-section-title{ font-size: 12px; }
  #nfl-filter-popup .nflf-body,
  #nba-filter-popup .nbaf-body{ --section-gap: 28px; }

  /* Matchup buttons: smaller for compact grid */
  #nfl-filter-popup .nflf-matchups-grid .nfl-builder-matchup-btn,
  #nba-filter-popup .nbaf-matchups-grid .nba-builder-matchup-btn{
    padding-top: 6px; padding-bottom: 6px;
  }
  #nfl-filter-popup .nfl-builder-matchup-btn .mu-teams,
  #nba-filter-popup .nba-builder-matchup-btn .mu-teams{ font-size: 12px; }
  #nfl-filter-popup .nfl-builder-matchup-btn .mu-tipoff,
  #nba-filter-popup .nba-builder-matchup-btn .mu-tipoff{ font-size: 10px; }

  /* Split-row gap on desktop */
  #nfl-filter-popup .nflf-split-row,
  #nba-filter-popup .nbaf-split-row{ gap: 32px; }

  /* Compact footer */
  #nfl-filter-popup .nflf-footer,
  #nba-filter-popup .nbaf-footer{ padding: 10px 14px 16px; }
  #nfl-filter-popup .nflf-clear,
  #nfl-filter-popup .nflf-reset,
  #nfl-filter-popup .nflf-apply,
  #nba-filter-popup .nbaf-clear,
  #nba-filter-popup .nbaf-reset,
  #nba-filter-popup .nbaf-apply{ font-size: 13px; padding: 8px 14px; }
  #nfl-filter-popup .nflf-summary,
  #nba-filter-popup .nbaf-summary{ font-size: 11px; }

  /* Presets row tighter */
  #nfl-filter-popup .nflf-preset,
  #nba-filter-popup .nbaf-preset{ font-size: 12px; padding: 6px 8px; }

  /* Wider target-odds chips */
  #nfl-filter-popup .nflf-odds-chip,
  #nba-filter-popup .nbaf-odds-chip{ padding: 8px 16px !important; }

  /* Build params: desktop slider sizing */
  .nflf-param-group,
  .nbaf-param-group{ gap: 6px; }
  .nflf-popup-odds-display,
  .nbaf-popup-odds-display{ font-size: 12px; min-width: 40px; right: -50px; }
  .nflf-param-slider,
  .nbaf-param-slider{ height: 18px; margin-top: 2px; }
  .nflf-param-slider::-webkit-slider-runnable-track,
  .nbaf-param-slider::-webkit-slider-runnable-track{ height: 6px; }
  .nflf-param-slider::-webkit-slider-thumb,
  .nbaf-param-slider::-webkit-slider-thumb{ width: 18px; height: 18px; margin-top: -6px; }
  .nflf-param-slider::-moz-range-thumb,
  .nbaf-param-slider::-moz-range-thumb{ width: 16px; height: 16px; }
  .nflf-param-slider::-moz-range-track,
  .nbaf-param-slider::-moz-range-track{ height: 6px; }
}

/* ============================================
   Responsive tweaks (mobile)
   ============================================ */
@media (max-width: 1000px) {

  #nfl-filter-popup .nflf-body,
  #nba-filter-popup .nbaf-body{ --section-gap: 36px; }

  #odds-tiers-rail{
    margin-top: 24px;
    margin-bottom: 8px;
  }
  #odds-tiers-rail .odds-chip{
    font-size: 18px;
    padding: 12px 18px;
  }
  #odds-tiers-rail.chip-tune .odds-chip{
    transform: translateX(calc(-50% + var(--chip-nudge, 0px)));
  }
  #odds-tiers-rail.chip-tune .odds-chip[data-odds="500"]  { --chip-nudge:  5px; }
  #odds-tiers-rail.chip-tune .odds-chip[data-odds="1000"] { --chip-nudge:  3px; }
  #odds-tiers-rail.chip-tune .odds-chip[data-odds="1500"] { --chip-nudge:  0px; }
  #odds-tiers-rail.chip-tune .odds-chip[data-odds="2000"] { --chip-nudge: -4px; }
  #odds-tiers-rail.chip-tune .odds-chip[data-odds="2500"] { --chip-nudge: -7px; }

  #nfl-filter-popup.nflf-modal-root,
  #nba-filter-popup.nbaf-modal-root{
    padding: 12px 10px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  #nfl-filter-popup .nflf-modal,
  #nba-filter-popup .nbaf-modal{
    margin: 8px 0;
  }

  #nfl-filter-popup .nflf-title,
  #nba-filter-popup .nbaf-title{
    font-size: 34px;
    font-weight: 600;
  }
  #nfl-filter-popup .nflf-subtitle,
  #nba-filter-popup .nbaf-subtitle{ font-size: 24px; }

  #nfl-filter-popup .nflf-header,
  #nba-filter-popup .nbaf-header{
    padding-right: 94px;
  }
  #nfl-filter-popup .nflf-close,
  #nba-filter-popup .nbaf-close{
    top: 12px;
    right: 14px;
    width: 70px;
    height: 70px;
    font-size: 35px;
    border-radius: 35px;
    font-weight: bold;
  }

  #nfl-filter-popup .nflf-presets-row,
  #nba-filter-popup .nbaf-presets-row{
    gap: 16px;
    padding: 0 16px 10px;
  }
  #nfl-filter-popup .nflf-preset,
  #nba-filter-popup .nbaf-preset{
    padding: 8px 10px;
    font-size: 26px;
  }

  #nfl-filter-popup .nflf-section-title,
  #nba-filter-popup .nbaf-section-title{ font-size: 28px;}
  #nfl-filter-popup .nflf-section-sub,
  #nba-filter-popup .nbaf-section-sub{ font-size: 24px; margin-top: 2px; }

  #nfl-filter-popup .nflf-chips,
  #nba-filter-popup .nbaf-chips{ gap: 12px; }

  #nfl-filter-popup .nflf-chip,
  #nba-filter-popup .nbaf-chip,
  #nfl-filter-popup .nfl-filter-btn,
  #nba-filter-popup .nba-filter-btn,
  #nfl-filter-popup .nfl-builder-matchup-btn,
  #nba-filter-popup .nba-builder-matchup-btn{
    padding: 18px 16px;
    font-size: 26px;
    border-radius: 12px;
  }

  #nfl-filter-popup .nfl-builder-matchup-btn,
  #nba-filter-popup .nba-builder-matchup-btn{
    padding: 16px 16px !important;
  }

  /* Wider target-odds chips */
  #nfl-filter-popup .nflf-odds-chip,
  #nba-filter-popup .nbaf-odds-chip{ padding: 18px 36px !important; }

  /* Build params: mobile slider sizing */
  .nflf-param-group,
  .nbaf-param-group{ gap: 12px; }
  .nflf-popup-odds-display,
  .nbaf-popup-odds-display{
    font-size: 22px;
    min-width: 64px;
    right: -74px;
  }
  .nflf-popup-odds-chips,
  .nbaf-popup-odds-chips{ gap: 10px; }
  .nflf-popup-leg-chips,
  .nbaf-popup-leg-chips{ gap: 10px; }
  .nflf-popup-leg-chips .nflf-leg-chip,
  .nbaf-popup-leg-chips .nbaf-leg-chip{ min-width: 64px; text-align: center; }
  /* Prevent iOS zoom on slider drag / input interaction */
  #nfl-filter-popup .nflf-modal,
  #nba-filter-popup .nbaf-modal{
    touch-action: manipulation;
  }
  #nfl-filter-popup input,
  #nba-filter-popup input{
    font-size: 16px !important;
    touch-action: none;
  }
  .nflf-param-slider,
  .nbaf-param-slider{
    height: 40px;
    margin-top: 14px;
  }
  .nflf-param-slider::-webkit-slider-runnable-track,
  .nbaf-param-slider::-webkit-slider-runnable-track{
    height: 14px;
    border-radius: 40px;
    background: rgba(255,255,255,0.08);
  }
  .nflf-param-slider::-webkit-slider-thumb,
  .nbaf-param-slider::-webkit-slider-thumb{
    width: 38px; height: 38px;
    border-width: 3px;
    margin-top: -12px;
  }
  .nflf-param-slider::-moz-range-thumb,
  .nbaf-param-slider::-moz-range-thumb{
    width: 34px; height: 34px;
    border-width: 3px;
  }
  .nflf-param-slider::-moz-range-track,
  .nbaf-param-slider::-moz-range-track{
    height: 14px;
    border-radius: 40px;
    background: rgba(255,255,255,0.08);
  }

  /* Wider side-direction pills */
  #nfl-filter-popup .nflf-side-chip,
  #nba-filter-popup .nbaf-side-chip{ min-width: 170px; text-align: center; }

  /* Prop market buttons: wider horizontal padding + min-width */
  #nfl-filter-popup .nfl-filter-btn,
  #nba-filter-popup .nba-filter-btn{ padding-left: 24px; padding-right: 24px; min-width: 96px; text-align: center; }

  #nfl-filter-popup .nflf-footer,
  #nba-filter-popup .nbaf-footer{ padding: 16px 16px 24px; gap: 12px; }
  #nfl-filter-popup .nflf-footer-actions,
  #nba-filter-popup .nbaf-footer-actions{ gap: 12px; }
  #nfl-filter-popup .nflf-summary,
  #nba-filter-popup .nbaf-summary{ font-size: 22px; }

  #nfl-filter-popup .nflf-clear,
  #nfl-filter-popup .nflf-reset,
  #nfl-filter-popup .nflf-apply,
  #nba-filter-popup .nbaf-clear,
  #nba-filter-popup .nbaf-reset,
  #nba-filter-popup .nbaf-apply{
    font-size: 26px;
    padding: 16px 16px;
    border-radius: 12px;
  }

  .build-parlay-row {
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  /* Mobile: hide dropdown, show stepper */
  .leg-count-dropdown{ display:none; }
  span.leg-stepper-mobile.leg-stepper-value{
    display:inline-flex;
    height:84px; padding:0 24px; font-size:33px; border-radius:19px;
    margin-top:40px; margin-bottom:20px;
  }
  div.leg-stepper-mobile.leg-stepper-btns{
    display:inline-flex; gap:12px;
    margin-top:40px; margin-bottom:20px;
  }
  .leg-stepper-btns .leg-stepper-btn{
    width:96px; height:84px; font-size:31px; border-radius:19px;
  }

  #build-parlay-button,
  #build-parlay-button.btn.btn-primary,
  .nflf-trigger-btn,
  .nbaf-trigger-btn {
    height: 84px;
    border-radius: 19px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 0 24px;
    font-size: 33px;
  }
  .nflf-trigger-btn .badge,
  .nbaf-trigger-btn .badge{ width:13px; height:13px; }


    .odds-line{ display:block; margin-left:5px; }

  #odds-slider{ height:16px; width:100%; max-width:950px; }
  #odds-slider::-webkit-slider-runnable-track{ height:16px; border-radius:40px; background: linear-gradient(to right, var(--sl-fill) var(--sl-pct), #0d2b3f var(--sl-pct)); }
  #odds-slider::-moz-range-track{ height:16px; border-radius:40px; background: linear-gradient(to right, var(--sl-fill) var(--sl-pct), #0d2b3f var(--sl-pct)); }
  #odds-slider::-webkit-slider-thumb{ width:45px; height:45px; margin-top:-14px; }
  #odds-slider::-moz-range-thumb{ width:45px; height:45px; }
  #target-odds-input{ width:120px; height:40px; margin-right:8px; font-size:30px; font-weight:700; }
}

/* Larger team/tipoff fonts for mid-size screens */
@media (max-width: 1000px){
  #nfl-filter-popup .nflf-matchups-grid,
  #nba-filter-popup .nbaf-matchups-grid{ grid-template-columns: repeat(auto-fill, minmax(179px, 1fr)); }
  #nfl-filter-popup .nfl-builder-matchup-btn .mu-teams,
  #nba-filter-popup .nba-builder-matchup-btn .mu-teams{ font-size: 22px; }
  #nfl-filter-popup .nfl-builder-matchup-btn .mu-tipoff,
  #nba-filter-popup .nba-builder-matchup-btn .mu-tipoff { font-size: 18px; }

  /* Equal-width position chips */
  #nfl-filter-popup .nflf-pos-chip,
  #nba-filter-popup .nbaf-pos-chip{ min-width: 96px; text-align: center; }

  /* Stack split-row vertically on mobile */
  #nfl-filter-popup .nflf-split-row,
  #nba-filter-popup .nbaf-split-row{ flex-direction: column; gap: var(--section-gap, 24px); }
  #nfl-filter-popup .nflf-split-row .nflf-section,
  #nba-filter-popup .nbaf-split-row .nbaf-section{ margin-bottom: 0; }

  .set-desired-odds-wrapper { margin-top: 12px; }
  .set-desired-odds-wrapper h2 { font-size: 36px; font-weight: 600; margin-top: 0; margin-bottom: 16px; }
}

/* Popup odds slider – fill gradient (placed last to override responsive track backgrounds) */
.nflf-odds-slider::-webkit-slider-runnable-track,
.nbaf-odds-slider::-webkit-slider-runnable-track{
  background: linear-gradient(to right, var(--sl-fill, rgba(255,255,255,0.08)) var(--sl-pct, 0%), rgba(255,255,255,0.08) var(--sl-pct, 0%));
}
.nflf-odds-slider::-moz-range-track,
.nbaf-odds-slider::-moz-range-track{
  background: linear-gradient(to right, var(--sl-fill, rgba(255,255,255,0.08)) var(--sl-pct, 0%), rgba(255,255,255,0.08) var(--sl-pct, 0%));
}

/* ============================================
   Inline Filters (pf-) – parlay placeholder filters
   ============================================ */
.inline-filters-container { width: 100%; }

.pf-section-title {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
  text-align: center;
}

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.pf-type-btn{
  min-width: 120px;
}

.pf-pos-chip {
  min-width: 94px;
}

.pf-chips.pf-chips-row2 { margin-top: 6px; }

.pf-chip {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, -webkit-text-fill-color 0.15s;
  white-space: nowrap;
  line-height: 1.3;
}

.pf-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7);
}

.pf-chip.active-chip,
.pf-chip.active-filter,
.pf-matchup-btn.active-chip {
  background: rgba(0, 211, 189, 0.1);
  border-color: rgba(0, 211, 189, 0.3);
  color: #00D3BD;
  -webkit-text-fill-color: #00D3BD;
  box-shadow: 0 2px 8px rgba(0, 211, 189, 0.08);
}

.pf-chip.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.pf-section { margin-bottom: 16px; }
.pf-section:last-child { margin-bottom: 0; }

.pf-matchups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pf-matchup-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, -webkit-text-fill-color 0.15s;
  white-space: nowrap;
  min-width: 0;
}

.pf-matchup-btn .pf-mu-teams {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
}

.pf-matchup-btn .pf-mu-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.pf-matchup-btn .pf-mu-tipoff {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.pf-matchup-btn.active-chip .pf-mu-tipoff {
  color: rgba(0, 211, 189, 0.55);
  -webkit-text-fill-color: rgba(0, 211, 189, 0.55);
}

/* ── Pills area (reserves space so actions don't shift) ── */
.pf-pills-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 170px;
}


/* ── Pills bar ── */
.pf-pills-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.pf-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(0, 211, 189, 0.1);
  border: 1px solid rgba(0, 211, 189, 0.3);
  border-radius: 8px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #00D3BD;
  -webkit-text-fill-color: #00D3BD;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, -webkit-text-fill-color 0.15s;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.pf-pill:hover {
  background: rgba(0, 211, 189, 0.15);
}

.pf-pill.pf-pill-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
}

.pf-pill.pf-pill-empty:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7);
}

.pf-pill.pf-pill-expanded {
  background: rgba(0, 211, 189, 0.1);
  border-color: rgba(0, 211, 189, 0.3);
  color: #00D3BD;
  -webkit-text-fill-color: #00D3BD;
}

.pf-pill-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Options popup row */
.pf-options-row {
  padding: 8px 0;
  margin-bottom: 12px;
}

.pf-options-content {
  display: flex;
  justify-content: center;
}

.pf-options-content .pf-chips {
  gap: 6px;
}



/* Mobile – scale inline filters up */
@media (max-width: 1000px) {
  .pf-section-title { font-size: 20px; margin-bottom: 18px; letter-spacing: 0.1em; }
  .pf-section { margin-bottom: 34px; }
  .pf-chips { gap: 12px; }
  .pf-chips.pf-chips-row2 { margin-top: 14px; }
  .pf-chip { font-size: 26px; padding: 20px 10px; border-radius: 14px; }
  .pf-type-btn { min-width: 222px; }
  .pf-pos-chip { min-width: 175px; }
  .pf-side-chip { min-width: 150px; }
  .pf-matchups-grid { gap: 12px; }
  .pf-matchup-btn { font-size: 26px; padding: 18px 32px; border-radius: 14px; }
  .pf-matchup-btn .pf-mu-teams { font-size: 26px; gap: 8px; }
  .pf-matchup-btn .pf-mu-logo { width: 36px; height: 36px; }
  .pf-matchup-btn .pf-mu-tipoff { font-size: 19px; }
  .pf-pills-bar { gap: 12px; margin-bottom: 28px; }
  .pf-pill { font-size: 28px; padding: 24px 28px; border-radius: 16px;}
  .pf-pill-text { max-width: 260px; }
  .pf-options-content .pf-chips { gap: 12px; }
  .pf-options-row { padding: 12px 0; margin-bottom: 20px; }
  .pf-pills-area { min-height: 420px; }
}

