/**
 * ============================================
 * Props Odds Engine - Filter Styles
 * ============================================
 *
 * This file contains all filter bar, panel, chip, and search styles
 * for the Props Odds Engine component.
 *
 * File History:
 * - Originally consolidated from multiple fix files:
 *   • props-odds.dropdown-fix.css
 *   • props-odds.search-fix.css
 *   • mobile-filters-fix.css
 *   • search-icon-fix.css
 *   • minimal-fixes.css
 *
 * Major Refactors:
 * - 2025-01: Consolidated duplicate selectors and media queries
 * - 2025-01: Extracted CSS variables for repeated values
 * - 2025-01: Organized mobile styles into single responsive block
 *
 * Structure:
 * 1. CSS Variables (lines 17-26)
 * 2. Filter Bar & Controls
 * 3. Chips (Quick, Category, Status)
 * 4. Custom Selects & Dropdowns
 * 5. Panels (Matchups, More, Filters)
 * 6. Search Functionality
 * 7. Mobile Responsive Styles (line 2000+)
 *
 * ============================================
 */

@layer props-odds.filters {
  /* Market Filter Styles */
  .props-odds .props-market-filter {
    /* Component sizing & spacing */
    --filter-height: 36px;
    --filter-border: #e2e8f0;
    --filter-radius: 6px;
    --filter-bg: #ffffff;
    --filter-gap: 20px; /* ensure visible gap */

    /* Commonly repeated values (Phase 3 refactor) */
    --props-text: #0f172a;          /* Primary text color (40 instances) */
    --props-text-muted: #64748b;    /* Muted text */
    --props-border-light: #e2e8f0;  /* Light border */
    --props-bg-surface: #f8fafc;    /* Surface background */
    --props-radius-pill: 999px;     /* Pill-shaped border radius (22 instances) */

    /* light app bar background */
    padding: 8px 15px 17px 0px; /* match title/table padding */
    display: flex;
    align-items: center !important;
    gap: var(--filter-gap) !important; /* force gap to apply */
    flex-wrap: wrap;
    border: none; /* no outline */
    border-radius: 12px;
  }
  /* Sticky filter bar */
  .props-odds .props-market-filter.is-sticky {
    position: sticky;
    top: var(--props-sticky-top, 72px);
    z-index: 20;
    background: var(--props-bg);
  }

  /* De-emphasize legacy controls (hide, keep code for future use) */
  .props-odds .props-market-filter .filter-label { display: none !important; }
  /* Explicitly show Positions custom select */
  .props-odds.props-odds-scope .props-market-filter .props-positions-filter > .props-select { display: inline-block !important; }
  /* Hide top Market (prop type) select; use chips instead */
  .props-odds .props-market-filter #props-market { display: none !important; }

  /* Quick chips row */
  .props-odds .props-market-filter .props-quick-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px !important;
    align-items: center !important;
    order: 900;           /* Row 2: quick markets */
    flex-basis: 100%;     /* force onto their own line under filters */
    width: 100% !important;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* ============================================
     Chip base pattern - all chips inherit from this
     ============================================ */
  .chip-base,
  .props-odds .props-market-filter .props-quick-chips .chip,
  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-more-panel .category-chips .chip,
  .props-odds .props-more-panel .chips .chip,
  .props-odds .props-filters-panel .chips .chip,
  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip,
  .props-matchups-panel .panel-filters .status-chips .chip {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;

    /* Base sizing - overridden by variants */
    height: var(--filter-height);
    padding: 0 14px;

    /* Visual styling */
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--props-radius-pill) !important;
    background: #ffffff !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;

    /* Typography */
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    /* Interaction */
    cursor: pointer;
    transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out, background .12s ease-out, color .12s ease-out;

    /* Reset */
    background-image: none !important;
    appearance: none;
    text-transform: none;
  }

  /* Shared hover state */
  .props-odds .props-market-filter .props-quick-chips .chip:hover,
  .props-odds .props-market-filter .props-category-chips .chip:hover,
  .props-odds .props-more-panel .category-chips .chip:hover,
  .props-odds .props-more-panel .chips .chip:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(2,6,23,.08);
    transform: translateY(-1px);
  }

  /* Shared focus state */
  .props-odds .props-market-filter .props-quick-chips .chip:focus-visible,
  .props-odds .props-market-filter .props-category-chips .chip:focus-visible,
  .props-odds .props-more-panel .category-chips .chip:focus-visible,
  .props-odds .props-more-panel .chips .chip:focus-visible,
  .props-matchups-panel .panel-filters .status-chips .chip:focus-visible {
    outline: none;
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(0,158,255,0.16);
  }

  /* Quick chips - only specify differences */
  .props-odds .props-market-filter .props-quick-chips .chip {
    gap: 5px !important;
    height: calc(var(--filter-height) + 6px) !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .props-odds .props-market-filter .props-quick-chips .chip.loading,
  .props-odds .props-market-filter .props-quick-chips .chip.loading:focus-visible {
    border-color: var(--props-accent) !important;
    box-shadow: 0 0 0 3px rgba(0,158,255,0.24);
  }

  .props-odds .props-market-filter .props-quick-chips .chip.active,
  .props-odds .props-market-filter .props-quick-chips .chip[aria-pressed="true"] {
    background: var(--props-accent) !important;
    color: #ffffff !important;
    border-color: var(--props-accent) !important;
    box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .props-odds .props-market-filter .props-quick-chips .chip,
    .props-odds-scope .props-market-filter .props-quick-chips .chip,
    .props-odds .props-market-filter .props-category-chips .chip,
    .props-odds-scope .props-market-filter .props-category-chips .chip,
    .props-odds .props-more-panel .category-chips .chip,
    .props-odds-scope .props-more-panel .category-chips .chip,
    .props-odds .props-more-panel .chips .chip,
    .props-odds-scope .props-more-panel .chips .chip,
    .props-odds .props-market-filter .props-game-chips .game-card,
    .props-odds-scope .props-market-filter .props-game-chips .game-card,
    .props-odds .props-more-panel .panel-list .market-list .market-pill,
    .props-odds-scope .props-more-panel .panel-list .market-list .market-pill,
    .props-odds .props-matchups-panel .panel-close-button,
    .props-odds-scope .props-matchups-panel .panel-close-button,
    .props-odds .props-matchups-panel .panel-actions button,
    .props-odds-scope .props-matchups-panel .panel-actions button {
      transition: none !important;
      animation: none !important;
    }
  }
  /* Icon spacing and alignment for All chip */
  .props-odds #props-more-toggle,
  .props-odds-scope #props-more-toggle { display: inline-flex; align-items: center !important; /* removed order: -1 to keep natural order */ }
  .props-odds #props-more-toggle .chip-icon,
  .props-odds-scope #props-more-toggle .chip-icon { margin-right: 8px; opacity: .75; }
  .props-odds #props-more-toggle[aria-pressed="true"] .chip-icon,
  .props-odds-scope #props-more-toggle[aria-pressed="true"] .chip-icon { opacity: 1; }

  .props-odds .props-market-filter .props-quick-chips .chip,
  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-more-panel .category-chips .chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .props-odds .props-market-filter .props-quick-chips .chip .chip-label,
  .props-odds .props-market-filter .props-category-chips .chip .chip-label,
  .props-odds .props-more-panel .category-chips .chip .chip-label {
    flex: 0 1 auto;
  }
  .props-odds .props-market-filter .props-quick-chips .chip .chip-count,
  .props-odds .props-market-filter .props-category-chips .chip .chip-count,
  .props-odds .props-more-panel .category-chips .chip .chip-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--props-radius-pill) !important;
    background: rgba(15,23,42,0.12);
    color: var(--props-text) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    transition: background 0.12s ease-out, color 0.12s ease-out;
  }
  .props-odds .props-market-filter .props-quick-chips .chip.active .chip-count,
  .props-odds .props-market-filter .props-quick-chips .chip[aria-pressed="true"] .chip-count {
    background: rgba(255,255,255,0.4);
    color: #ffffff !important;
  }
  .props-odds .props-market-filter .props-category-chips .chip.active .chip-count,
  .props-odds .props-market-filter .props-category-chips .chip[aria-selected="true"] .chip-count {
    background: rgba(59,130,246,0.22);
    color: var(--props-text) !important;
  }
  .props-odds .props-more-panel .category-chips .chip.active .chip-count,
  .props-odds .props-more-panel .category-chips .chip[aria-selected="true"] .chip-count {
    background: rgba(255,255,255,0.25);
    color: #ffffff !important;
  }

  /* Category chips row on page */
  .props-odds .props-market-filter .props-category-chips {
    display: flex;
    gap: 6px !important;
    flex-wrap: wrap;
    order: 800;           /* Row 1: categories */
    width: 100% !important;
    margin-top: 8px;
  }

  /* Category chips - only specify differences from base */
  .props-odds .props-market-filter .props-category-chips .chip {
    padding: 0 12px;
    border-radius: 10px !important;
    border-color: var(--props-border-light) !important;
    background: var(--props-bg-surface) !important;
  }

  .props-odds .props-market-filter .props-category-chips .chip:hover {
    background: #f1f5f9 !important;
  }

  .props-odds .props-market-filter .props-category-chips .chip.active,
  .props-odds .props-market-filter .props-category-chips .chip[aria-selected="true"] {
    background: #ffffff !important;
    color: var(--props-text) !important;
    border-color: var(--props-accent) !important;
    box-shadow: 0 0 0 2px rgba(0,158,255,0.15) inset, 0 1px 2px rgba(2,6,23,0.06);
    font-weight: 800;
  }

  /* Inline category sections */
  .props-odds .props-market-filter .props-category-sections { width: 100% !important; order: 1000; }
  .props-odds .props-market-filter .props-category-sections .category-section { margin-top: 6px; }
  .props-odds .props-market-filter .props-category-sections .section-title { font-weight: 800; font-size: 13px; color: #334155; margin: 6px 0; }
  .props-odds .props-market-filter .props-category-sections .chips { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Search input positioning for matchups panel */
  .props-odds .props-matchups-panel .search-input {
    position: relative;
  }

  /* Search input positioning for All Props (mirror Matchups) */
  .props-odds .props-more-panel .search-input {
    /* Consolidated from 2 definitions (lines 233, 2030) */
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    order: 2; /* Position after tabs */
  }

  /* More props dropdown (shares panel styles with matchups) */
  .props-odds .props-market-filter .props-more-filter {
    position: relative;
    z-index: 1000;
  }
  .props-odds .props-market-filter .props-more-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 10000;
    min-width: 420px;
    width: 420px;
    max-height: min(80vh, 760px);
    grid-template-rows: auto auto 1fr;
    background: white;
    border: 1px solid var(--props-border-light);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: visible;
  }
  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    display: grid !important;
  }
  .props-odds .props-more-panel .panel-controls {
    /* Consolidated from 4 separate definitions (lines 262, 2010, 2033, 2102) */
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef2f7;
    grid-row: 3; /* for parent grid layout */
  }
  .props-odds .props-more-panel .category-chips { display: flex; flex-wrap: wrap; gap: 8px; }

  /* More panel chips - inherit from base, no overrides needed (uses defaults) */

  /* More panel chips - active states */
  .props-odds .props-more-panel .category-chips .chip.active,
  .props-odds .props-more-panel .category-chips .chip[aria-selected="true"],
  .props-odds .props-more-panel .chips .chip.active,
  .props-odds .props-more-panel .chips .chip[aria-pressed="true"] {
    background: var(--props-accent) !important;
    color: #ffffff !important;
    border-color: var(--props-accent) !important;
  }
  .props-odds .props-more-panel .panel-list {
    /* Consolidated from 3 definitions (lines 354, 1738, 1826) */
    grid-row: 4;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    flex: 1;
  }
  .props-odds .props-more-panel .panel-list .market-list { display: grid; grid-auto-rows: minmax(38px, auto); gap: 10px; }
  .props-odds .props-more-panel .panel-list .market-list .market-pill {
    width: 100% !important;
    height: 38px;
    padding: 7px 14px !important;  /* Added vertical padding for better alignment */
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--props-radius-pill) !important;
    background: #ffffff !important;
    color: var(--props-text) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    cursor: pointer;
    transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out, background .12s ease-out;
    display: flex;
    align-items: center !important;
    justify-content: flex-start;
    gap: 10px;
    text-align: left !important;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill .market-label {
    flex: 1 1 auto;
    text-align: left !important;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill .market-count {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 4px 8px;  /* Added vertical padding for proper spacing */
    border-radius: var(--props-radius-pill);
    background: rgba(15,23,42,0.10) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--props-text) !important;
    transition: background 0.12s ease-out, color 0.12s ease-out;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill[aria-pressed="true"] .market-count {
    background: rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill:hover { border-color: #cbd5e1 !important; box-shadow: 0 2px 6px rgba(2,6,23,.08); transform: translateY(-1px); }
  .props-odds .props-more-panel .panel-list .market-list .market-pill:focus-visible { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(0,158,255,0.16); }
  .props-odds .props-more-panel .panel-list .market-list .market-pill[aria-pressed="true"] { background: var(--props-accent) !important; color: #fff !important; border-color: var(--props-accent) !important; }
  .props-odds .props-more-panel .category-section { margin-bottom: 12px; }
  .props-odds .props-more-panel .category-section .section-title { font-weight: 800; font-size: 13px; color: #334155; margin: 6px 0; }
  .props-odds .props-more-panel .category-section .chips { display: flex; flex-wrap: wrap; gap: 10px; }

  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* Quick game chips row (matchups) */
  .props-odds .props-market-filter .props-game-chips {
    display: flex;
    gap: 6px !important;
    flex-wrap: wrap;
    order: 1001;          /* Below the controls (Matchups/Positions/Search) */
    flex-basis: 100%;
    width: 100% !important;
    margin-top: 2px;
  }
  /* Make Games toggle match other controls and sit near Matchups */
  .props-odds .props-market-filter .props-quick-chips #props-gamechips-toggle {
    order: 9999;            /* appear after other quick chips */
    flex-basis: 100%;       /* force onto its own line */
    margin-top: 8px;        /* breathing room from chips above */
    position: relative;     /* for chevron */
    font-weight: 800;       /* subtle emphasis */
    background: var(--props-bg-surface);    /* ghost-like to stand out but stay cohesive */
    border-color: #dbe3ef;
  }
  .props-odds .props-market-filter .props-quick-chips #props-gamechips-toggle::after {
    content: '';
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677689" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>') no-repeat center/16px 16px;
  }
  /* Collapsed state via [hidden] attribute */
  .props-odds .props-market-filter .props-game-chips[hidden] { display: none !important; }
  /* Card-style game chips */
  .props-odds .props-market-filter .props-game-chips .game-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    align-items: center !important;
    min-width: 190px; /* compact */
    padding: 8px 10px; /* compact */
    border: 1px solid var(--filter-border) !important;
    border-radius: 12px;
    background: var(--props-surface);
    color: var(--props-text) !important;
    box-shadow: 0 1px 2px rgba(2,6,23,0.04);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
  }
  .props-odds .props-market-filter .props-game-chips .game-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 12px rgba(2,6,23,.08); transform: translateY(-1px); }
  .props-odds .props-market-filter .props-game-chips .game-card:focus-visible { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(0,158,255,0.16); }
  .props-odds .props-market-filter .props-game-chips .game-card.active,
  .props-odds .props-market-filter .props-game-chips .game-card[aria-pressed="true"] { background: var(--props-surface-tint); border-color: #94a3b8; }

  .props-odds .props-market-filter .props-game-chips .game-card .title {
    grid-column: 1 / -1;
    font-size: 13px; /* compact */
    font-weight: 800;
    letter-spacing: -.01em;
    overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important;
  }
  .props-odds .props-market-filter .props-game-chips .game-card .meta {
    grid-column: 1 / -1;
    display: flex; align-items: center !important; gap: 8px;
    font-size: 11px; /* compact */ font-weight: 600; color: #475569;
  }
  .props-odds .props-market-filter .props-game-chips .game-card .status { padding: 1px 6px; /* compact */ border-radius: var(--props-radius-pill); border: 1px solid var(--props-border-light); background: #f1f5f9; color: var(--props-text) !important; font-weight: 700; }
  .props-odds .props-market-filter .props-game-chips .game-card .status.live { background: rgba(239,68,68,0.12); color: #b91c1c; border-color: rgba(239,68,68,0.28); }
  .props-odds .props-market-filter .props-game-chips .game-card .status.final { background: #f1f5f9; color: #6b7280; }
  .props-odds .props-market-filter .props-game-chips .game-card .count { margin-left: auto; background: var(--props-accent) !important; color: #fff !important; padding: 2px 6px; border-radius: var(--props-radius-pill); font-weight: 800; font-size: 11px; }
  .props-odds .props-market-filter .props-game-chips .game-card .time { color: #334155; }

  .props-market-filter label {
    font-weight: 600;
    margin-right: 6px;
    color: var(--props-text-strong);
    font-size: 13px;
  }

  /* Add a subtle funnel icon to the Filters: label using Heroicons */
  .props-odds .props-market-filter .filter-label { font-weight: 600; font-size: 15px; }

  .props-odds .props-market-filter .filter-control,
  .props-odds .props-market-filter .filter-chip {
    height: var(--filter-height) !important;
    padding: 0 12px !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    background: var(--filter-bg) !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
  }

  .props-odds .props-market-filter .filter-control:focus,
  .props-odds .props-market-filter .filter-chip:focus {
    outline: none;
    border-color: #94a3b8; /* slate-400 */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  }

  /* Subtle hover state to align all controls */
  .props-odds .props-market-filter .filter-control:hover,
  .props-odds .props-market-filter .filter-chip:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(2,6,23,.06);
  }

  /* Optional compact button (works for WP button classes too) */
  .props-market-filter .button,
  .props-market-filter button,
  .props-market-filter .components-button {
    background: var(--props-accent) !important;
    color: #fff !important;
    border: 1px solid var(--props-accent);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 400;
  }

  /* Matchups dropdown (compact, app-like) */
  .props-odds .props-market-filter .props-matchups-filter { position: relative; order: 1000; }
  .props-odds .props-market-filter .props-matchups-button {
    background: var(--filter-bg) !important; color: var(--props-text) !important; border: 1px solid var(--filter-border) !important;
    padding: 0 44px 0 12px; border-radius: var(--filter-radius) !important; font-weight: 700;
    height: var(--filter-height);
    line-height: 1; display: inline-flex !important; align-items: center !important; gap: 8px;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    position: relative;
    width: 190px; /* Wider than other filters to accommodate icon + text + badges + chevron */
  }
  .props-odds .props-market-filter .props-matchups-button::after { display: none; }
  .props-odds .props-market-filter .props-matchups-button:hover { border-color: #cbd5e1 !important; box-shadow: 0 1px 2px rgba(2,6,23,.06); }
  .props-matchups-button .badge {
    background: var(--props-accent) !important; color: #fff !important; border-radius: var(--props-radius-pill);
    padding: 2px 6px; font-size: 12px; font-weight: 700;
  }
  /* Space between total and selected badges */
  .props-matchups-button #props-matchups-total + #props-matchups-count { margin-left: 6px; }

  .props-matchups-panel {z-index: 1000 !important; }
  .props-matchups-filter { position: relative; }
  .props-matchups-filter.open .props-matchups-panel { display: grid; }
  .props-matchups-panel {
    position: absolute; top: 110%; left: 0; z-index: 20;
    width: 400px; max-height: 680px;
    display: grid; grid-template-rows: auto auto 1fr auto;
    background: var(--props-drawer-surface, var(--props-surface));
    border: 1px solid var(--props-drawer-border, #e6edf5);
    border-radius: 14px;
    box-shadow: var(--props-drawer-shadow);
    display: none;
    font-size: 14px !important;
    color: var(--props-text) !important;
  }
  .props-matchups-panel .panel-header, .props-more-panel .panel-header, .props-filters-panel .panel-header { position: relative; }
  .props-matchups-panel .panel-close-button, .props-more-panel .panel-close-button, .props-filters-panel .panel-close-button { position: absolute; top: 12px; right: 12px; border: none; background: var(--props-accent); color: #ffffff; border-radius: var(--props-radius-pill); font-size: 12px; font-weight: 600; padding: 4px 12px; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px rgba(0,158,255,0.26); transition: filter .12s ease-out; }
  .props-matchups-panel .panel-close-button:hover, .props-more-panel .panel-close-button:hover, .props-filters-panel .panel-close-button:hover { filter: brightness(0.95); }
  .props-matchups-panel .panel-close-button:focus-visible, .props-more-panel .panel-close-button:focus-visible, .props-filters-panel .panel-close-button:focus-visible { outline: 2px solid var(--props-accent); outline-offset: 2px; }

  @media (min-width: 769px) {
    .props-matchups-panel .panel-close-button,
    .props-more-panel .panel-close-button,
    .props-filters-panel .panel-close-button {
      display: none;
    }
  }
  .props-matchups-panel .panel-header { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,.25); background: var(--props-drawer-surface-strong, var(--props-surface-muted)); border-top-left-radius: 14px; border-top-right-radius: 14px; }
  .props-matchups-panel .panel-title { font-weight: 800; color: var(--props-text) !important; font-size: 15px; letter-spacing: -.01em; }
  .props-matchups-panel .panel-controls { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; font-size: 13px; color: #334155; }
  .props-matchups-panel .panel-controls label { display: flex; align-items: center !important; gap: 8px; font-weight: 600; }
  .props-matchups-panel .panel-filters { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; }
  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips { display: flex; gap: 6px !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Status chips - only specify size differences from base */
  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip {
    height: 26px;
    padding: 0 10px;
    border-color: rgba(148,163,184,.28);
    background: var(--props-bg-surface) !important;
    font-weight: 600;
    font-size: 11px;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip[aria-pressed="true"] {
    background: var(--props-accent) !important;
    color: #fff !important;
    border-color: var(--props-accent) !important;
  }
  .props-matchups-panel .panel-filters .search-input input[type="search"] { height: 36px; width: 100% !important; border: 1px solid #e6edf5; border-radius: 8px; padding: 0 12px; font-size: 14px !important; background: var(--props-surface-muted); }
  .props-more-panel .panel-controls .search-input input[type="search"] { height: 36px; width: 100% !important; border: 1px solid #e6edf5; border-radius: 8px; padding: 0 12px; padding-left: 40px; font-size: 14px !important; background: var(--props-surface-muted); }
  .props-matchups-panel .search-input input[type="search"],
  .props-more-panel .search-input input[type="search"],
  .props-filters-panel .search-input input[type="search"] {
    font-size: 14px !important;
  }
  .props-more-panel .panel-controls .search-input input[type="search"]::placeholder { color: var(--props-text-muted); }
  .props-odds .props-market-filter .props-matchups-panel .panel-list {
    overflow: auto;
    padding: 10px 14px !important;
    display: grid;
    grid-template-columns: 1fr;
  }
  /* Chip-style items (totally different look) */
  .props-matchups-panel .panel-list .matchup-item {
    display: block;
    padding: 0;
    color: var(--props-text) !important;
    font-size: 14px !important;
    border: none;
  }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span.matchup-item-content {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center !important;
    justify-items: start;
    column-gap: 6px !important;
    padding: 14px 22px !important;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.2);
    background: #ffffff;
    font-weight: 600;
    color: var(--props-text) !important;
    font-size: 13px;
    line-height: 1.35;
    min-height: 52px;
    box-shadow: none;
    background: #ffffff;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content:hover,
  .props-matchups-panel .matchup-item span.matchup-item-content:focus-within {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(2,6,23,.08);
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-width: 0;
    text-transform: uppercase;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell img,
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell .team-logo-fallback {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell img {
    object-fit: contain;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,0.35);
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell .team-logo-fallback {
    letter-spacing: 0.02em;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell .team-code {
    font-size: 14px !important;
    color: inherit;
    line-height: 1;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-separator {
    font-size: 12px;
    font-weight: 700;
    color: var(--props-text-muted);
    justify-self: center;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .kickoff {
    justify-self: end;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .kickoff.is-empty {
    opacity: 0;
  }
  /* Ensure base state is perfectly flat */
  .props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span { box-shadow: none; }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span{
    /* fallback legacy rule overridden below with scoped border-only selection */
  }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span .matchup-teams .team .team-code {
    color: #ffffff !important;
  }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span .matchup-teams .team .team-logo-fallback {
    background: rgba(15,23,42,0.15);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  }
  .props-matchups-panel .panel-list .matchup-item.completed { opacity: .6; }
  .props-matchups-panel .panel-list .matchup-item:hover { background: transparent; border-radius: 10px; }

  /* Checkbox look to match site checkboxes */
  .props-matchups-panel input[type="checkbox"] {
    appearance: none; width: 18px; height: 18px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: all .15s ease;
  }
  .props-matchups-panel input[type="checkbox"]:hover { border-color: #a6b3c6; box-shadow: 0 1px 2px rgba(2,6,23,.08); }
  .props-matchups-panel input[type="checkbox"]:checked { border-color: var(--props-brand-cyan); background: var(--props-brand-cyan); }
  .props-matchups-panel input[type="checkbox"]:checked::after { content: ''; width: 10px; height: 10px; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.415l-7.5 7.5a1 1 0 01-1.415 0l-3.5-3.5A1 1 0 015.29 9.29l2.793 2.793 6.793-6.793a1 1 0 011.415 0z" clip-rule="evenodd"/></svg>') no-repeat center / contain; background: #fff; display: block; }

  /* Row states */
  .props-matchups-panel .matchup-item input[type="checkbox"]:checked + span { font-weight: 700; }
  /* Neutral, text-only kickoff time – no pill/background */
  .props-matchups-panel .matchup-item span .kickoff {
    margin-left: 8px !important;
    font-weight: 700 !important;
    color: var(--props-text-muted) !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Keep kickoff readable on selected chips without turning into a white pill */
  .props-matchups-panel .matchup-item input[type="checkbox"]:checked + span .kickoff { color: inherit !important; background: transparent !important; border: none !important; }
  .props-matchups-panel .panel-actions,
  .props-more-panel .panel-actions,
  .props-filters-panel .panel-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(148,163,184,.25);
    background: linear-gradient(180deg, rgba(226,232,240,.72) 0%, rgba(226,232,240,.42) 100%);
    position: sticky;
    bottom: 0;
    backdrop-filter: blur(6px);
  }
  .props-matchups-panel .panel-actions button,
  .props-more-panel .panel-actions button,
  .props-filters-panel .panel-actions button {
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
    line-height: 1;
    border-radius: var(--props-radius-pill);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px !important;
    font-weight: 600;
  }
  .props-matchups-panel .panel-actions .ghost,
  .props-more-panel .panel-actions .ghost,
  .props-filters-panel .panel-actions .ghost {
    background: transparent;
    color: var(--props-text-muted);
    border: none;
    font-weight: 500 !important;
    padding: 0;
    min-width: 0;
    justify-content: flex-start;
    height: auto;
    line-height: 1.2;
  }
  .props-matchups-panel .panel-actions .ghost:hover,
  .props-more-panel .panel-actions .ghost:hover,
  .props-filters-panel .panel-actions .ghost:hover {
    color: #475569;
    text-decoration: underline;
  }
  .props-matchups-panel .panel-actions .primary,
  .props-more-panel .panel-actions .primary,
  .props-filters-panel .panel-actions .primary {
    background: var(--props-accent) !important;
    color: #fff !important;
    border: 1px solid var(--props-accent);
    font-weight: 700;
    justify-content: center;
    width: 100% !important;
    box-shadow: 0 8px 20px rgba(0,158,255,0.22);
  }
  .props-matchups-panel .panel-actions .primary:hover,
  .props-more-panel .panel-actions .primary:hover,
  .props-filters-panel .panel-actions .primary:hover { filter: brightness(0.97); }
  .props-matchups-panel .panel-actions .primary:focus-visible,
  .props-more-panel .panel-actions .primary:focus-visible,
  .props-filters-panel .panel-actions .primary:focus-visible,
  .props-matchups-panel .panel-actions .ghost:focus-visible,
  .props-more-panel .panel-actions .ghost:focus-visible,
  .props-filters-panel .panel-actions .ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--props-ring);
  }

  /* Apply button: stronger, always visible primary */
  .props-odds .props-market-filter .props-matchups-panel .panel-actions .primary {
    background: var(--props-accent) !important;
    color: #fff !important;
    border-color: var(--props-accent) !important;
    box-shadow: 0 8px 20px rgba(0,158,255,0.22) !important;
  }

  /* Filters: label and search input styling */
  .props-odds .props-market-filter .filter-label { font-weight: 700; color: #111827; margin-right: 2px; }
  .props-odds .props-market-filter .props-search-wrap { position: relative; order: 1000; flex: 0 0 auto; width: auto; margin-left: 0; margin-right: 0; }
  /* Remove legacy pseudo-icon for the old inline search */
  .props-odds .props-market-filter .props-search-wrap::before { content: none !important; display: none !important; }
  .props-odds .props-market-filter .props-search-button {
    /* Mobile default: show button with border, input hidden until clicked */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    width: var(--filter-height);
    min-width: var(--filter-height);
    padding: 0;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    cursor: pointer;
  }
  .props-odds .props-market-filter .props-search-wrap.open .props-search-button { background: var(--filter-bg) !important; }
  .props-odds .props-market-filter .props-search-panel[hidden] { display: none !important; }
  /* Mobile default: hide input panel, only show button */
  .props-odds .props-market-filter .props-search-panel { display: none; margin-left: 0; }
  .props-odds .props-market-filter .props-search-wrap input[type="search"] {
    padding-left: 40px; min-width: 240px;
    width: clamp(200px, 20vw, 300px);
    height: var(--filter-height);
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background-color: var(--filter-bg) !important;
    -webkit-appearance: none; /* prevent iOS styling the field with inner decorations */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23677689" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
  }

  /* Ensure icon appears even when theme adds background overrides */
  .props-odds.props-odds-scope .props-market-filter input#props-player-filter[type="search"] {
    padding-left: 40px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23677689" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
  }

  /* Consistent placeholder color */
  .props-odds .props-market-filter .props-search-wrap input[type="search"]::placeholder {
    color: #9aa3af; /* slate-400/500 */
    opacity: 1;
  }

  /* Mobile panel layout: input + Cancel button row */
  .props-odds .props-market-filter .props-search-panel { gap: 8px; }
  .props-odds .props-market-filter .props-search-panel .props-search-cancel {
    display: none;
    height: var(--filter-height);
    padding: 0 8px;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    color: var(--filter-fg, #677689);
    cursor: pointer;
    min-width: var(--filter-height);
  }
  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* Desktop: hide button, show input with icon inside */
  @media (min-width: 769px) {
    .props-odds .props-market-filter .props-search-button { display: none !important; }
    .props-odds .props-market-filter .props-search-panel { display: inline-block !important; }
    /* Normalize desktop spacing so Sort -> Search gap equals container gap */
    .props-odds .props-market-filter { gap: var(--filter-gap); }
    /* Remove extra left margin so Search sits at standard gap */
    .props-odds .props-market-filter .props-search-wrap { margin-left: 0 !important; }
    /* On desktop, ensure panel shows even if markup has [hidden] */
    .props-odds .props-market-filter .props-search-panel[hidden] { display: inline-block !important; }
  }
  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* Matchups button — shadcn-like ghost button */
  .props-odds .props-market-filter .props-matchups-button { display: inline-flex !important; align-items: center !important; gap: 8px; font-weight: 600;}

  /* Unify control look across select, matchups, and search */
  .props-odds .props-market-filter .filter-control,
  .props-odds .props-market-filter .props-select-toggle,
  .props-odds .props-market-filter .props-matchups-button,
  .props-odds .props-market-filter .props-search-wrap input[type="search"] {
    height: var(--filter-height) !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
  }

  /* Unified focus ring for all controls */
  .props-odds .props-market-filter .props-search-wrap input[type="search"]:focus,
  .props-odds .props-market-filter .props-matchups-button:focus-visible,
  .props-odds .props-market-filter .props-filters-button:focus-visible,
  .props-odds .props-market-filter .props-select-toggle:focus-visible,
  .props-odds .props-market-filter .filter-control:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  }

  /* High-specificity selectors to beat theme styles (clean approach) */
  .props-odds.props-odds-scope .props-market-filter .props-select .props-select-toggle,
  .props-odds.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button,
  .props-odds.props-odds-scope .props-market-filter button.filter-control.props-matchups-button,
  .props-odds.props-odds-scope .props-market-filter input#props-player-filter[type="search"],
  .props-odds.props-odds-scope .props-market-filter .props-search-wrap input[type="search"] {
    height: var(--filter-height);
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background-color: var(--filter-bg) !important;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    text-transform: none;
    letter-spacing: normal;
  }

  /* Ensure Matchups button reserves space for absolute chevron */
  .props-odds.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button {
    padding-right: 36px !important;
    padding-left: 12px !important;
  }

  .props-odds.props-odds-scope .props-select-menu,
  .props-odds.props-odds-scope .props-market-filter .props-matchups-panel {
    background: var(--filter-bg) !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important; */
    font-size: 14px !important;
    color: var(--props-text) !important;
  }

  /* Chevron indicators inside filter controls */
  .props-odds .props-market-filter .filter-chevron {
    display: inline-flex !important;
    align-items: center !important;
    pointer-events: none;
    color: #475569;
  }
  .props-odds .props-market-filter .props-select-toggle .filter-chevron {
    margin-left: auto;
  }
  .props-odds .props-market-filter .props-matchups-button .filter-chevron {
    /* Align chevron to the far right like Positions/Sort */
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    margin-left: 0; /* reset inline-gap behavior */
  }
  .props-odds .props-market-filter .props-select-toggle.is-static .filter-chevron {
    display: none;
  }
  .props-odds .props-market-filter .filter-chevron-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .props-odds .props-market-filter .props-select-toggle svg,
  .props-odds .props-market-filter .props-matchups-button svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
  }

  /* Filters button/panel (mobile) */
  .props-odds .props-market-filter .props-filters-filter { position: relative; order: 1000; display: none; }
  .props-odds .props-market-filter .props-filters-button { background: var(--filter-bg) !important; color: var(--props-text) !important; border: 1px solid var(--filter-border) !important; padding: 0 12px; border-radius: var(--props-radius-pill); font-weight: 700; height: var(--filter-height); line-height: 1; display: inline-flex !important; align-items: center !important; gap: 8px; box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important; }
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel { display: grid; }
  .props-odds .props-filters-panel .panel-list { padding: 16px; display: grid; gap: 16px; }
  .props-odds .props-filters-panel .category-section { margin-bottom: 4px; text-align: center; }
  .props-odds .props-filters-panel .category-section .section-title { font-weight: 700; font-size: 13px; color: #1f2937; letter-spacing: -.01em; margin: 0 0 10px 0; text-transform: none; }
  .props-odds .props-filters-panel .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

  /* Filters panel chips - only specify differences from base */
  .props-odds .props-filters-panel .chips .chip {
    height: 36px;
    padding: 0 18px;
    border-color: rgba(148,163,184,.35) !important;
    background: var(--props-bg-surface) !important;
    font-weight: 600;
    font-size: 14px !important;
    letter-spacing: 0;
    box-shadow: none;
  }

  .props-odds .props-filters-panel .chips .chip:hover {
    background: #f1f5f9 !important;
  }

  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:hover {
    background: var(--props-bg-surface) !important;
    color: var(--props-text) !important;
    border-color: rgba(148,163,184,.35) !important;
    box-shadow: none;
    transform: translateY(-1px);
  }

  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 6px 14px rgba(0,158,255,.28);
  }

  /* Keep active chips visually active even while hovering/pressing */
  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:hover,
  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:focus,
  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 6px 14px rgba(0,158,255,.28);
    transform: none;
  }
  .props-odds .props-filters-panel .panel-header {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: 6px !important;
    padding: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(148,163,184,.18);
    text-align: center;
  }
  .props-odds .props-filters-panel .panel-header::before {
    content: '';
    width: 42px;
    height: 4px;
    border-radius: var(--props-radius-pill);
    background: rgba(100,116,139,.55);
    opacity: 1;
    margin: 0 auto 4px auto;
  }
  .props-odds .props-filters-panel .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--props-text) !important;
    letter-spacing: -.01em;
  }

  /* Ensure hover/focus consistency with specificity */
  .props-odds.props-odds-scope .props-market-filter .props-select .props-select-toggle:hover,
  .props-odds.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button:hover,
  .props-odds.props-odds-scope .props-market-filter button.filter-control.props-matchups-button:hover,
  .props-odds.props-odds-scope .props-market-filter input#props-player-filter[type="search"]:hover,
  .props-odds.props-odds-scope .props-market-filter .props-search-wrap input[type="search"]:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(2,6,23,.06);
  }

  /* Select — native element with custom chevron, styled like search */
  .props-odds .props-market-filter .filter-select {
    appearance: none;
    padding-right: 34px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677689" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    /* Match other filter controls (ghost pill) */
    border-radius: var(--props-radius-pill);
    height: var(--filter-height);
    border: 1px solid var(--filter-border) !important;
    background-color: var(--filter-bg);
    color: var(--props-text) !important;
    font-weight: 700; /* align with chips/matchups */
    padding-left: 12px;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
  }
  /* Ensure positions filter sits inline next to Matchups on row 3 */
  .props-odds .props-market-filter .props-positions-filter {
    order: 1000;
    margin-right: 0 !important; /* spacing handled by container gap */
  }
  .props-odds .props-market-filter .props-sort-filter {
    order: 1000;
    margin-left: 0 !important; /* spacing handled by container gap */
  }

  /* Sibling spacing fallback removed to avoid double gap; rely on gap */

  /* Make sort filter match matchups button styling */
  .props-odds .props-market-filter .props-sort-filter .props-select-toggle {
    border-radius: var(--filter-radius) !important;
    font-weight: 700 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    width: 100% !important; /* fill container width */
  }

  /* Make sort filter container match positions width */
  .props-odds .props-market-filter .props-sort-filter .props-select {
    width: 180px !important;
    flex: 0 0 180px !important;
  }

  /* Ensure dropdown styling overrides theme styles */
  .props-odds-scope .props-select-toggle,
  .props-odds-scope .props-select-menu,
  .props-odds-scope .props-select-option {
    /* font-family inherited from base.css */
    box-sizing: border-box;
  }

  /* Override any theme button/link styles on dropdown toggle */

  .props-odds-scope .props-select-toggle.is-static {
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
  }
  .props-odds-scope .props-select-toggle.is-static .chevron {
    display: none;
  }
  .props-odds-scope .props-select-toggle.is-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
  }

  /* Hide chevron/arrow on disabled selects */
  .props-odds-scope .props-select-toggle.is-disabled .filter-chevron,
  .props-odds-scope .props-select-toggle.is-disabled .chevron {
    display: none !important;
  }

  /* Gray out the icon on disabled selects */
  .props-odds-scope .props-select-toggle.is-disabled svg {
    opacity: 0.4 !important;
  }

  /* Prevent hover effects on disabled selects */
  .props-odds-scope .props-select-toggle.is-disabled:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
  }

  .props-odds-scope .props-select-toggle {
    text-decoration: none !important;
    border-style: solid !important;
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* Override any theme list styles on dropdown options */
  .props-odds-scope .props-select-option {
    text-decoration: none !important;
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    box-shadow: none !important;
  }

  .props-odds-scope .props-select-option:before,
  .props-odds-scope .props-select-option:after {
    display: none !important;
  }

  /* Custom props dropdown (shadcn-like) - All properly scoped */
  .props-odds-scope .props-select {
    position: relative;
    display: inline-block;
    width: 260px;
    flex: 0 0 260px;
  }
  /* Compact widths for league and week/date controls */
  .props-odds-scope #props-league { width: 120px !important; flex: 0 0 120px !important; }
  .props-odds-scope #props-weekdate { width: 300px !important; flex: 0 0 200px !important; }
  /* Make Positions dropdown options look like the Matchups chips */
  .props-odds-scope #props-positions-menu {
    min-width: 220px;
    width: 220px;
    max-width: 240px;
    padding: 12px !important;
    border-radius: 12px;
    box-shadow: 0 18px 32px rgba(15,23,42,.22);
    border: 1px solid rgba(148,163,184,.22) !important;
    z-index: 1600 !important;
    grid-auto-rows: minmax(32px, auto) !important;
    gap: 8px !important;
  }
  .props-odds-scope #props-positions-menu .props-select-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    border-radius: var(--props-radius-pill) !important;
    background: #ffffff !important;
    color: var(--props-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  .props-odds-scope #props-positions-menu .props-select-option:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
    box-shadow: 0 2px 6px rgba(2,6,23,.08) !important;
  }
  /* Selected pills use brand blue (match matchups chips) */
  .props-odds-scope #props-positions-menu .props-select-option[aria-selected="true"] {
    background: var(--props-accent) !important;
    border-color: var(--props-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
  }
  /* Positions select: ghost-style pill button like Matchups */
  .props-odds-scope #props-positions { width: 180px !important; flex: 0 0 180px !important; }
  .props-odds-scope #props-positions .props-select-toggle {
    position: relative !important;
    border-radius: var(--filter-radius) !important;
    font-weight: 700 !important;
    padding: 0 20px 0 12px !important; /* tighter chevron spacing */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* REMOVED: Mobile rules consolidated at line 2537+ */


  .props-odds-scope .props-select-toggle {
    height: var(--filter-height);
    padding: 0 36px 0 12px !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    color: var(--props-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    /* font-family inherited from base.css */
    line-height: 1.2;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .props-odds-scope .props-select-toggle:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(2,6,23,0.06) !important;
  }

  .props-odds-scope .props-select-toggle #props-market-label {
    color: var(--props-text) !important;
    font-weight: 500 !important;
    /* font-family inherited from base.css */
    max-width: calc(100% - 26px);
  }

  /* Replace inline styles on label with a class */
  .props-odds-scope .props-market-label-text{
    pointer-events: none;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block;
  }

  .props-odds-scope .props-select-toggle:focus-visible {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(0,158,255,0.16);
  }

  .props-odds-scope .props-select .chevron {
    position: absolute;
    right: 4px; /* bring chevron closer to edge */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: .85;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677689" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>') no-repeat center/16px 16px;
  }

  .props-odds-scope .props-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    width: 260px;
    max-width: 260px;
    background: var(--filter-bg) !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(2,6,23,.12), 0 4px 10px rgba(2,6,23,.08);
    padding: 4px 0;
    z-index: 500;
    max-height: 320px;
    overflow: auto;
    margin: 0;
    /* font-family inherited from base.css */
    font-size: 13px;
    color: var(--props-text) !important;
  }

  .props-odds-scope .props-select-option {
    list-style: none;
    border-radius: 4px !important;
    padding: 8px 14px !important;
    margin: 2px 4px !important;
    position: relative;
    cursor: pointer;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    /* font-family inherited from base.css */
    line-height: 1.3 !important;
    transition: all 0.15s ease;
  }

  .props-odds-scope .props-select-option:hover {
    background: #f1f5f9;
    color: var(--props-text) !important;
  }

  .props-odds-scope .props-select-option[aria-selected="true"] {
    background: var(--props-bg-surface);
    color: var(--props-text) !important;
    font-weight: 600;
  }

  .props-odds-scope .props-select-option[aria-selected="true"]::after {
    content: none;
  }

  /* Ensure no icons appear for NFL option */
  .props-odds-scope .props-select-option[data-value="nfl"]::before,
  .props-odds-scope .props-select-option[data-value="nfl"]::after {
    content: none !important;
    display: none !important;
  }

  /* Ensure no icons appear in NFL button text */

  /* Remove any icons from league options */
  .props-odds-scope #props-league-menu .props-select-option::before,
  .props-odds-scope #props-league-menu .props-select-option::after {
    content: none !important;
    display: none !important;
  }

  /* Hide the SVG icon in the league select button */
  .props-odds-scope #props-league .props-select-toggle svg {
    display: none !important;
  }

  /* Hide any icons in the league button text */
  .props-odds-scope #props-league-button svg {
    display: none !important;
  }

  /* Comprehensive removal of all SVG icons from league select area */
  .props-odds-scope #props-league svg,
  .props-odds-scope .props-select[id="props-league"] svg,
  .props-odds-scope div[id="props-league"] svg {
    display: none !important;
    visibility: hidden !important;
  }

  /* Target the specific button structure seen in the HTML */
  .props-odds-scope button[id="props-league-button"] svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }

  /* Re-enable the dropdown chevron for the League select only */
  .props-odds-scope #props-league-button .filter-chevron,
  .props-odds-scope #props-league-button .filter-chevron .filter-chevron-icon {
    display: inline-flex !important;
    visibility: visible !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
  }

  /* Remove any margin/padding that might leave space for the hidden icon */
  .props-odds-scope #props-league-button {
    padding-left: 12px !important;
  }

  .props-odds-scope #props-league-button svg + * {
    margin-left: 0 !important;
  }

  .props-odds-scope .props-select.hidden {
    display: none;
  }

  /* Buttons within the matchups panel */
  .props-matchups-panel .panel-actions .ghost {
    background: #f1f5f9;
    color: var(--props-text) !important;
    border: 1px solid var(--props-border-light);
  }
  .props-matchups-panel .panel-actions .ghost:hover { filter: brightness(0.98); }
  .props-matchups-panel .panel-actions .primary {
    background: var(--props-accent) !important;
    border-color: var(--props-accent) !important;
  }

  /* Market select compact look to match; unscoped fallback to beat theme */
  .props-odds #props-market-select { min-width: 220px; }

  /* Dropdown (matchups + any future filter menus) */

  /* All Props (More) specific overrides: remove actions row and increase height */
  .props-odds .props-market-filter .props-matchups-panel.props-more-panel {
    grid-template-rows: auto auto 1fr;
    max-height: min(80vh, 760px);
  }
  .props-odds .props-market-filter .props-more-panel .panel-actions { display: none; }
  .props-odds-scope .props-matchups-panel {
    border: 1px solid var(--props-border-light);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(2,6,23,.12);
  }

  /* Matchups panel refinements to mirror legacy sizing */
  .props-odds .props-matchups-panel .panel-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .props-odds .props-matchups-panel .panel-controls,
  .props-odds .props-matchups-panel .panel-filters,
  .props-odds .props-matchups-panel .panel-list,
  .props-odds .props-matchups-panel .panel-actions {
    font-size: 13px;
  }
  .props-odds .props-matchups-panel .panel-controls label {
    font-size: 13px;
    font-weight: 600;
  }

  /* Status chips sizing override - inherits from base chip pattern */
  .props-odds .props-matchups-panel .panel-filters .status-chips .chip {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .props-odds .props-matchups-panel .panel-filters .status-chips .chip:not([aria-pressed="true"]) {
    background: #ffffff !important;
    color: var(--props-text) !important;
    border-color: #e6edf5 !important;
    box-shadow: none !important;
  }
  .props-odds .props-matchups-panel .panel-filters .search-input input[type="search"] {
    font-size: 14px !important;
  }
  .props-odds .props-matchups-panel .panel-actions .ghost {
    background: var(--props-bg-surface) !important;
    color: #1e293b !important;
    border: 1px solid #d7deea !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  .props-odds .props-matchups-panel .panel-actions .ghost:hover {
    filter: none !important;
    background: #eef2f7 !important;
  }
  .props-odds .props-matchups-panel .panel-actions .ghost:active {
    background: var(--props-border-light) !important;
  }
  .props-odds .props-matchups-panel .panel-actions {
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  .props-odds .props-matchups-panel .panel-actions button {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  .props-odds .props-matchups-panel .panel-actions .primary {
    font-weight: 700 !important;
  }

  /* Ensure custom selects anchor menus to the left edge of the toggle */
  .props-odds .props-market-filter .props-select-menu,
  .props-odds-scope .props-select-menu {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    min-width: max(220px, 100%) !important;
    width: max(220px, 100%) !important;
    max-width: none !important;
  }

  .props-market-filter .button:hover,
  .props-market-filter button:hover,
  .props-market-filter .components-button:hover {
    filter: brightness(0.96);
  }

}

/* REMOVED: Duplicate legacy matchups status chips - now using consolidated base pattern at line 94 */

/* Legacy matchups quick chips (All/Live/Upcoming etc.) */
.props-odds .props-market-filter .props-game-chips .game-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  min-width: 110px;
  padding: 8px 12px;
  border: 1px solid var(--filter-border) !important;
  border-radius: var(--props-radius-pill) !important;
  background: #ffffff !important;
  color: var(--props-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}
.props-odds .props-market-filter .props-game-chips .game-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(2,6,23,.08);
  transform: translateY(-1px);
}
.props-odds .props-market-filter .props-game-chips .game-card:focus-visible {
  outline: none;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(0,158,255,0.16);
}
.props-odds .props-market-filter .props-game-chips .game-card.active,
.props-odds .props-market-filter .props-game-chips .game-card[aria-pressed="true"] {
  background: var(--props-accent) !important;
  color: #ffffff !important;
  border-color: var(--props-accent) !important;
  box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
}
.props-odds #props-gamechips-toggle[aria-pressed="true"],
.props-odds-scope #props-gamechips-toggle[aria-pressed="true"] {
  background: var(--props-accent) !important;
  color: #ffffff !important;
  border-color: var(--props-accent) !important;
  box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
}
/* Legacy control text color */
.props-odds .props-market-filter .filter-control,
.props-odds .props-market-filter .filter-chip,
.props-odds .props-market-filter .props-select-toggle,
.props-odds .props-market-filter .props-matchups-button,
.props-odds .props-market-filter .props-search-wrap input[type=\"search\"] {
  color: var(--props-text) !important;
  background: #ffffff !important;
}
@media (max-width: 480px) {
  .props-matchups-panel .panel-actions,
  .props-more-panel .panel-actions,
  .props-filters-panel .panel-actions {
    grid-template-columns: 1fr;
  }
  .props-matchups-panel .panel-actions .ghost,
  .props-more-panel .panel-actions .ghost,
  .props-filters-panel .panel-actions .ghost {
    justify-content: flex-start;
    padding: 0 12px;
  }
}

/* Matchups dropdown — quieter selection styles (scoped) */
.props-odds .props-market-filter .props-matchups-panel {
  --matchups-active-bg: #eef5ff;       /* very light brand tint */
  --matchups-active-border: #c7ddf9;   /* hairline border */
  --matchups-active-fg: #0f172a;       /* readable text */
  /* Soften the panel canvas a touch to avoid all-white */
  --props-drawer-surface: #f7f9fc;
  --props-drawer-surface-strong: #eef2f7;
}

/* Status chips inside panel: active uses soft tint, not full brand fill */
.props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip[aria-pressed="true"] {
  background: var(--matchups-active-bg) !important;
  color: var(--matchups-active-fg) !important;
  border-color: var(--matchups-active-border) !important;
  box-shadow: inset 0 0 0 1px var(--matchups-active-border) !important;
}

/* Selected matchup rows: soft tint background and hairline border */
/* Selected card: blue border only; keep surface neutral */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span {
  background: #f7f9fc !important; /* keep light gray when selected */
  color: var(--props-text) !important;
  border-color: var(--props-accent) !important;
  box-shadow: 0 0 0 2px rgba(0,158,255,0.15) inset !important;
}

/* Idle cards: give a soft surface and add a subtle left accent bar affordance */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span.matchup-item-content {
  position: relative;
  background: #f7f9fc !important; /* light gray card */
  border-color: #e6edf5 !important;
}
/* Remove left accent bar on hover/selection */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span.matchup-item-content::before { display: none; content: none; }

/* Keep kickoff readable on selected rows */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span .kickoff {
  color: #4b5563 !important;
}

.props-odds-scope #props-positions-menu:not([hidden]) {
  display: grid !important;
}

.props-odds-scope #props-positions-menu[hidden] {
  display: none !important;
}

@media (min-width: 769px) {
  .props-odds-scope #props-positions {
    width: 180px !important;
    flex: 0 0 180px !important;
  }
  .props-odds-scope #props-positions .props-select-toggle {
    width: 100% !important;
    min-width: 0 !important; /* allow container to control width */
  }
}

.props-odds-scope #props-positions-label {
  white-space: nowrap !important;
}

@media (min-width: 1024px) {
  .props-odds .props-market-filter {
    --filter-gap: 20px;
  }

  /* Increase search bar width on desktop */
  .props-odds input#props-player-filter,
  .props-odds .props-market-filter .props-search-wrap input[type="search"] {
    width: 330px !important;
    min-width: 330px !important;
  }
}

/* ============================================
   Dropdown Visibility & Scrolling Fixes
   (Consolidated from props-odds.dropdown-fix.css)
   ============================================ */

/* Desktop-specific fixes for dropdown visibility */
@media (min-width: 769px) {
  /* Allow overflow for dropdown on desktop only */
  .props-odds .props-market-filter {
    overflow: visible !important;
    position: relative !important;
  }

  /* Allow dropdown to show on desktop */
  .props-odds .props-market-filter .props-quick-chips {
    overflow: visible !important;
    position: static !important;
  }

  /* Prevent parent clipping on desktop */
  .props-odds,
  .props-odds-engine,
  .props-odds-container {
    overflow: visible !important;
  }

  .props-odds [role="region"][aria-label*="filters" i],
  .props-odds .props-filters-region {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
  }

  /* Desktop More panel positioning */
  .props-odds .props-market-filter .props-more-panel {
    display: none;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 99999 !important;
    min-width: 420px !important;
    width: 420px !important;
    max-height: min(80vh, 600px) !important;
    background: white !important;
    border: 1px solid var(--props-border-light) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
  }
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* More filter positioning - works for all screen sizes */
.props-odds .props-market-filter .props-more-filter {
  position: relative !important;
  z-index: 1000 !important;
}

/* REMOVED: Duplicate .panel-list definition - consolidated at line 354 */

/* Search area sticky positioning */
/* REMOVED: Duplicate .panel-controls definition - consolidated at line 262 */

/* ============================================
   Search Input Positioning Fixes
   (Consolidated from props-odds.search-fix.css)
   ============================================ */

/* REMOVED: Duplicate .search-input definition - consolidated at line 233 */

/* Ensure search box is in the right place in panel structure */
/* REMOVED: Duplicate .panel-controls definition - consolidated at line 262 */

/* Search input container should be full width */
.props-odds .props-more-panel .panel-controls .search-input,
.props-odds .props-more-panel .search-box .search-input {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

/* The actual input field */
.props-odds .props-more-panel .search-input input[type="search"],
.props-odds .props-more-panel input#props-more-search {
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px 0 40px !important; /* Space for icon */
  font-size: 14px !important;
  border: 1px solid var(--props-border-light) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--props-text) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Search icon positioning */
.props-odds .props-more-panel .search-input svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  z-index: 1;
}

/* Panel structure - ensure proper layout when open */
.props-odds .props-more-filter.open .props-more-panel {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto;
}

/* Panel header (if exists) */
.props-odds .props-more-panel .panel-header {
  grid-row: 1;
  padding: 12px 16px;
  border-bottom: 1px solid var(--props-border-light);
}

/* Tabs section */
.props-odds .props-more-panel .tabs,
.props-odds .props-more-panel .category-tabs {
  grid-row: 2;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--props-border-light);
}

/* Search section - should be after tabs */
.props-odds .props-more-panel .search-box {
  grid-row: 3;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--props-border-light);
}
/* REMOVED: Duplicate .panel-controls definition - consolidated at line 262 */

/* REMOVED: Duplicate .panel-list definition - consolidated at line 354 */

/* Actions/footer (if exists) */
.props-odds .props-more-panel .panel-actions {
  grid-row: 5;
  padding: 12px 16px;
  border-top: 1px solid var(--props-border-light);
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Focus state for search input */
.props-odds .props-more-panel input[type="search"]:focus {
  outline: none !important;
  border-color: #0066cc !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

/* Placeholder text */
.props-odds .props-more-panel input[type="search"]::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* ============================================
   Mobile filters panel display fixes
   ============================================ */

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Animation for panel sliding up */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Ensure filters panel header is properly styled */
.props-odds .props-filters-panel .panel-header {
  padding: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--props-border-light) !important;
}

.props-odds .props-filters-panel .panel-close-button {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: var(--props-accent, #2563eb) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--props-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Force filters panel to be on top with maximum specificity (WordPress theme override) */
body .props-odds-engine .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel,
body .props-odds-engine .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel[hidden] {
  display: grid !important;
  visibility: visible !important;
  z-index: 999999 !important;
  position: fixed !important;
}

/* Ensure overlay is below panel but above everything else */
body .props-odds-engine .props-odds .props-market-filter .props-filters-filter.open::before {
  z-index: 999998 !important;
  position: fixed !important;
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Search icon styling */
/* Add search icon to player search input */
.props-odds .props-market-filter #props-player-filter,
.props-odds input[placeholder="Search Players"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5.5' stroke='%2364748b' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  padding-left: 40px !important;
}

/* Alternative using pseudo-element for search wrap */
.props-odds .props-market-filter .props-search-wrap {
  position: relative !important;
}

.props-odds .props-market-filter .props-search-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5.5' stroke='%2364748b' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: block !important;
}

/* Ensure input has proper padding when icon is present */
.props-odds .props-market-filter .props-search-wrap input {
  padding-left: 40px !important;
}

/* Style for the search button icon if it exists */
.props-odds .props-search-button svg,
.props-odds .props-search-button::before {
  width: 16px !important;
  height: 16px !important;
}

/* Focus state - darker icon */
.props-odds input[placeholder="Search Players"]:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5.5' stroke='%230f172a' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%230f172a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Ensure search input is styled properly */
.props-odds input#props-player-filter {
  height: var(--filter-height, 36px) !important;
  border: 1px solid var(--filter-border, #e2e8f0) !important;
  border-radius: var(--props-radius-pill) !important;
  background-color: #ffffff !important;
  font-size: 14px !important;
  color: var(--props-text) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.props-odds input#props-player-filter:focus {
  outline: none !important;
  border-color: var(--props-accent, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Placeholder text color */
.props-odds input#props-player-filter::placeholder {
  color: var(--props-text-muted) !important;
  opacity: 1 !important;
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Dropdown Display Control */
/* Ensure dropdowns are hidden by default */
.props-odds .props-more-panel:not(.open),
.props-odds .props-matchups-panel:not(.open) {
  display: none !important;
}

/* Show when parent has open class */
.props-odds .props-more-filter.open .props-more-panel,
.props-odds .props-matchups-filter.open .props-matchups-panel {
  display: grid !important;
}

/* Search box in dropdowns */
.props-odds .props-more-panel .search-box,
.props-odds .props-matchups-panel .search-box {
  padding: 8px 12px !important;
}

.props-odds .props-more-panel input[type="search"],
.props-odds .props-matchups-panel input[type="search"] {
  font-size: 14px !important;
}

/* Market filter container padding */
.props-market-filter {
  padding: 8px 15px 17px 0 !important;
  position: relative; /* For proper dropdown positioning */
}

/* Ensure the More panel is clickable and above other content */
.props-odds .props-more-filter.open .props-more-panel {
  pointer-events: auto !important;
}

/* Fix hidden select element causing horizontal scroll */
.props-odds select.sr-only,
.props-odds select.jcf-ignore,
.props-odds .sr-only.jcf-ignore {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  max-width: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ============================================
   CONSOLIDATED MOBILE RESPONSIVE STYLES
   (max-width: 768px)

   Consolidated from 10 separate media query blocks previously at lines:
   48, 364, 883, 909, 1328, 1936, 2122, 2166, 2294, 2392

   Organized by component for easier maintenance
   ============================================ */

@media (max-width: 768px) {
  /* ========================================
     VIEWPORT & CONTAINER FIXES
     Ensure parent containers respect mobile viewport
     ======================================== */

  /* Kill the 1350px width on parent containers */
  .props-odds.props-odds-scope,
  .props-odds .props-odds-container {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Ensure the filter region doesn't create unwanted scroll */
  .props-odds [role="region"][aria-label*="filters" i] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ========================================
     FILTER BAR LAYOUT & SPACING
     Mobile toolbar adjustments
     ======================================== */

  .props-odds .props-market-filter {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px; /* Reduce horizontal gaps to keep items on one line */
    align-items: stretch;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    text-align: center;
  }

  .props-odds .props-market-filter,
  .props-odds-scope .props-market-filter {
    text-align: center;
  }

  .props-odds .props-market-filter label,
  .props-odds-scope .props-market-filter label {
    display: block;
    margin-bottom: 8px;
  }

  /* ========================================
     SELECT/DROPDOWN CONTROLS
     Make selects narrower on mobile
     ======================================== */

  .props-odds .props-market-filter select,
  .props-odds-scope .props-market-filter select {
    width: 100% !important;
    max-width: 300px;
  }

  .props-odds-scope .props-select {
    width: 180px;
    flex: 0 0 180px;
  }

  .props-odds-scope #props-positions {
    width: 120px !important;
    flex: 0 0 120px !important;
  }

  /* ========================================
     FILTER BUTTON VISIBILITY
     Replace Positions + Sort with Filters button on mobile
     ======================================== */

  .props-odds .props-market-filter .props-positions-filter,
  .props-odds .props-market-filter .props-sort-filter {
    display: none !important;
  }

  .props-odds .props-market-filter .props-filters-filter {
    display: inline-block !important;
  }

  /* Make sure the filters button is visible on mobile */
  .props-odds .props-market-filter .props-filters-filter {
    display: block !important;
    position: relative;
    order: 1000;
  }

  /* Style the filters button */
  .props-odds .props-market-filter .props-filters-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--filter-bg, #ffffff) !important;
    color: var(--props-text) !important;
    border: 1px solid var(--filter-border, #e2e8f0) !important;
    padding: 0 12px !important;
    border-radius: var(--props-radius-pill) !important;
    font-weight: 700 !important;
    height: 36px !important;
    line-height: 1 !important;
    gap: 6px !important;
    cursor: pointer !important;
  }

  /* ========================================
     CHIP SCROLLING & LAYOUT
     Enable horizontal scrolling for chip rows
     ======================================== */

  /* Chips need viewport-relative width to scroll properly */
  .props-odds .props-market-filter .props-quick-chips {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    width: 100% !important;
    justify-content: flex-start;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    padding-bottom: 8px !important; /* Add some padding for the scrollbar */
  }

  /* Horizontally scrollable rows with snap */
  .props-odds .props-market-filter .props-category-chips,
  .props-odds .props-market-filter .props-quick-chips,
  .props-odds .props-market-filter .props-game-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 6px !important;
    padding-bottom: 11px;
    position: relative;
    width: 100% !important;
    justify-content: flex-start;
  }

  /* Mobile chip size overrides - inherit base pattern, only specify size differences */
  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-market-filter .props-quick-chips .chip {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px;
    font-size: 13px;
  }

  .props-odds .props-market-filter .props-game-chips .chip {
    height: 32px;
    font-size: 12px;
  }

  /* Ensure chips stay in a row and don't wrap */
  .props-odds .props-market-filter .props-quick-chips > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-market-filter .props-quick-chips .chip,
  .props-odds .props-market-filter .props-game-chips .game-card,
  .props-odds .props-market-filter .props-more-filter {
    scroll-snap-align: start;
  }

  /* Style the scrollbar on mobile for better visibility */
  .props-odds .props-market-filter .props-quick-chips::-webkit-scrollbar {
    height: 4px !important;
  }

  .props-odds .props-market-filter .props-quick-chips::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 2px !important;
  }

  .props-odds .props-market-filter .props-quick-chips::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 2px !important;
  }

  /* Remove any sticky positioning for the All button on mobile - let it scroll normally */
  .props-odds .props-market-filter .props-quick-chips .props-more-filter {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ========================================
     SEARCH PANEL & CONTROLS
     Mobile search expansion and positioning
     ======================================== */

  .props-odds .props-market-filter .props-search-panel {
    position: relative;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    order: 1001 !important;
    flex-basis: 100% !important;
  }

  .props-odds .props-market-filter .props-search-panel[hidden] {
    display: none !important;
  }

  .props-odds .props-market-filter .props-search-panel input[type="search"] {
    display: block;
    width: 100% !important;
    min-width: 0;
  }

  /* Keep search icon aligned to the far right and avoid wrapping */
  .props-odds .props-market-filter .props-search-wrap {
    margin-left: auto !important;
    order: 1000 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 8px !important;
  }

  .props-odds .props-market-filter .props-search-button {
    width: 34px;
    min-width: 34px;
  }

  /* Search expansion when opened */
  .props-odds .props-market-filter .props-search-wrap.open {
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel {
    position: relative;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    display: block !important;
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 44px !important;
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel .props-search-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important; /* override generic button styling */
    color: var(--filter-fg, #677689) !important;
    box-shadow: none !important;
    transform: translateY(-50%);
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel .props-search-cancel svg {
    pointer-events: none;
  }

  /* Mobile: ensure search input shows magnifier and spacing */
  .props-odds .props-market-filter .props-search-panel input#props-player-filter[type="search"] {
    padding-left: 40px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23677689" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
  }

  /* Hide iOS default clear (x) so our cancel button is the only control */
  .props-odds .props-market-filter .props-search-panel input[type="search"]::-webkit-search-cancel-button,
  .props-odds .props-market-filter input#props-player-filter[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
  }

  /* Hide the search icon once open and cover the row */
  .props-odds .props-market-filter .props-search-wrap.open .props-search-button {
    display: none !important;
  }

  /* While open, hide sibling controls so input occupies the whole row */
  .props-odds .props-market-filter.search-open > .filter-label,
  .props-odds .props-market-filter.search-open > #props-market,
  .props-odds .props-market-filter.search-open > .props-matchups-filter,
  .props-odds .props-market-filter.search-open > .props-filters-filter {
    display: none !important;
  }

  .props-odds .props-market-filter .props-positions-filter {
    order: 1000 !important;
    flex: 0 0 auto !important;
  }

  /* ========================================
     BOTTOM SHEET PANELS (Mobile Drawer Style)
     Matchups, More, and Filters panels
     ======================================== */

  /* Bottom sheet for More on mobile */
  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 85vh !important;
    min-width: 0 !important; /* CRITICAL: Override the 420px min-width */
    max-width: 100vw !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0 !important;
    background: #ffffff;
    box-shadow: 0 -18px 34px rgba(15,23,42,.22);
    border: 1px solid rgba(148,163,184,.18);
    border-top: 4px solid rgba(148,163,184,.15);
    z-index: 99999 !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateY(0);
  }

  .props-odds .props-more-panel,
  .props-odds-scope .props-more-panel,
  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .props-odds .props-more-panel .panel-list {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Mobile more panel chips - only override padding from base pattern */
  .props-odds .props-more-panel .chips .chip {
    padding: 0 16px;
  }

  /* Ensure search stays visible on mobile */
  .props-odds .props-more-panel .search-box {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
  }

  /* Force market list to be contained */
  .props-odds .props-more-panel .market-list,
  .props-odds-scope .props-more-panel .market-list,
  .props-odds .props-more-panel .panel-list .market-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Force market pills to not overflow */
  .props-odds .props-more-panel .market-pill,
  .props-odds-scope .props-more-panel .market-pill,
  .props-odds .props-more-panel .panel-list .market-list .market-pill {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 7px 14px !important;
    overflow: hidden !important;
  }

  /* Fix label to truncate instead of overflow */
  .props-odds .props-more-panel .market-pill .market-label,
  .props-odds-scope .props-more-panel .market-pill .market-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  /* Keep count visible and contained */
  .props-odds .props-more-panel .market-pill .market-count,
  .props-odds-scope .props-more-panel .market-pill .market-count,
  .props-odds .props-more-panel .market-pill .badge,
  .props-odds .props-more-panel .market-pill .count {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
  }

  /* Fix panel header */
  .props-odds .props-more-panel .panel-header,
  .props-odds-scope .props-more-panel .panel-header {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Matchups panel */
  .props-odds .props-market-filter .props-matchups-filter.open .props-matchups-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100% !important;
    max-height: 78vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    background: linear-gradient(180deg, var(--props-drawer-surface-strong, rgba(240,249,255,0.98)) 0%, var(--props-drawer-surface, #ffffff) 45%, #ffffff 100%);
    box-shadow: 0 -18px 38px rgba(15,23,42,.24);
    border: 1px solid rgba(148,163,184,.24);
    border-top: 3px solid rgba(0,158,255,.38);
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: var(--props-radius-pill);
    opacity: .35;
    background: var(--props-text-muted);
    margin: 0 auto 8px auto;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-list {
    padding: 10px 14px;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  /* Filters panel */
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 78vh !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    background: #ffffff !important;
    box-shadow: 0 -18px 34px rgba(15,23,42,.22);
    border: 1px solid rgba(148,163,184,.18);
    border-top: 4px solid rgba(148,163,184,.15);
  }

  /* Ensure the panel is visible when open - override hidden attribute */
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel,
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel[hidden] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    max-height: 85vh !important;
    background: #ffffff !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 100002 !important; /* Much higher than overlay */
    animation: slideUp 0.3s ease-out !important;
    overflow: hidden !important;
  }

  .props-filters-filter.open .props-filters-panel {
    position: fixed !important;
    isolation: isolate !important;
    transform: translateZ(0) !important; /* Create new stacking context */
  }

  /* Ensure panel content is scrollable */
  .props-odds .props-filters-panel .panel-list {
    max-height: calc(85vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure panel actions are visible */
  .props-odds .props-filters-panel .panel-actions {
    display: grid !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid var(--props-border-light) !important;
  }

  /* ========================================
     PANEL BACKDROPS/OVERLAYS
     Dark overlay behind bottom sheet panels
     ======================================== */

  .props-odds .props-market-filter .props-matchups-filter.open::before,
  .props-odds .props-market-filter .props-more-filter.open::before,
  .props-odds .props-market-filter .props-filters-filter.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(2px);
    z-index: 19;
    pointer-events: none;
  }

  /* Ensure backdrop/overlay is visible but behind panel */
  .props-odds .props-market-filter .props-filters-filter.open::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 100000 !important;
    display: block !important;
  }

  /* ========================================
     LAYOUT & SPACING FIXES
     Table spacing and misc mobile adjustments
     ======================================== */

  /* Add spacing between table and Show All button on mobile */
  .props-odds .props-table-wrapper {
    margin-bottom: 20px !important;
  }

  .props-odds .props-comparison-container {
    padding-bottom: 15px !important;
  }

  /* Ensure Show All button has proper spacing */
  .props-odds .show-all-container,
  .props-odds .props-show-all,
  .props-odds button[class*="show-all"] {
    margin-top: 20px !important;
  }
}
/**
 * ============================================
 * Props Odds Engine - Filter Styles
 * ============================================
 *
 * This file contains all filter bar, panel, chip, and search styles
 * for the Props Odds Engine component.
 *
 * File History:
 * - Originally consolidated from multiple fix files:
 *   • props-odds.dropdown-fix.css
 *   • props-odds.search-fix.css
 *   • mobile-filters-fix.css
 *   • search-icon-fix.css
 *   • minimal-fixes.css
 *
 * Major Refactors:
 * - 2025-01: Consolidated duplicate selectors and media queries
 * - 2025-01: Extracted CSS variables for repeated values
 * - 2025-01: Organized mobile styles into single responsive block
 *
 * Structure:
 * 1. CSS Variables (lines 17-26)
 * 2. Filter Bar & Controls
 * 3. Chips (Quick, Category, Status)
 * 4. Custom Selects & Dropdowns
 * 5. Panels (Matchups, More, Filters)
 * 6. Search Functionality
 * 7. Mobile Responsive Styles (line 2000+)
 *
 * ============================================
 */

@layer props-odds.filters {
  /* Market Filter Styles */
  .props-odds .props-market-filter {
    /* Component sizing & spacing */
    --filter-height: 36px;
    --filter-border: #e2e8f0;
    --filter-radius: 6px;
    --filter-bg: #ffffff;
    --filter-gap: 20px; /* ensure visible gap */

    /* Commonly repeated values (Phase 3 refactor) */
    --props-text: #0f172a;          /* Primary text color (40 instances) */
    --props-text-muted: #64748b;    /* Muted text */
    --props-border-light: #e2e8f0;  /* Light border */
    --props-bg-surface: #f8fafc;    /* Surface background */
    --props-radius-pill: 999px;     /* Pill-shaped border radius (22 instances) */

    /* light app bar background */
    padding: 8px 15px 17px 0px; /* match title/table padding */
    display: flex;
    align-items: center !important;
    gap: var(--filter-gap) !important; /* force gap to apply */
    flex-wrap: wrap;
    border: none; /* no outline */
    border-radius: 12px;
  }
  /* Sticky filter bar */
  .props-odds .props-market-filter.is-sticky {
    position: sticky;
    top: var(--props-sticky-top, 72px);
    z-index: 20;
    background: var(--props-bg);
  }

  /* De-emphasize legacy controls (hide, keep code for future use) */
  .props-odds .props-market-filter .filter-label { display: none !important; }
  /* Explicitly show Positions custom select */
  .props-odds.props-odds-scope .props-market-filter .props-positions-filter > .props-select { display: inline-block !important; }
  /* Hide top Market (prop type) select; use chips instead */
  .props-odds .props-market-filter #props-market { display: none !important; }

  /* Quick chips row */
  .props-odds .props-market-filter .props-quick-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px !important;
    align-items: center !important;
    order: 900;           /* Row 2: quick markets */
    flex-basis: 100%;     /* force onto their own line under filters */
    width: 100% !important;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* ============================================
     Chip base pattern - all chips inherit from this
     ============================================ */
  .chip-base,
  .props-odds .props-market-filter .props-quick-chips .chip,
  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-more-panel .category-chips .chip,
  .props-odds .props-more-panel .chips .chip,
  .props-odds .props-filters-panel .chips .chip,
  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip,
  .props-matchups-panel .panel-filters .status-chips .chip {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;

    /* Base sizing - overridden by variants */
    height: var(--filter-height);
    padding: 0 14px;

    /* Visual styling */
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--props-radius-pill) !important;
    background: #ffffff !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;

    /* Typography */
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    /* Interaction */
    cursor: pointer;
    transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out, background .12s ease-out, color .12s ease-out;

    /* Reset */
    background-image: none !important;
    appearance: none;
    text-transform: none;
  }

  /* Shared hover state */
  .props-odds .props-market-filter .props-quick-chips .chip:hover,
  .props-odds .props-market-filter .props-category-chips .chip:hover,
  .props-odds .props-more-panel .category-chips .chip:hover,
  .props-odds .props-more-panel .chips .chip:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(2,6,23,.08);
    transform: translateY(-1px);
  }

  /* Shared focus state */
  .props-odds .props-market-filter .props-quick-chips .chip:focus-visible,
  .props-odds .props-market-filter .props-category-chips .chip:focus-visible,
  .props-odds .props-more-panel .category-chips .chip:focus-visible,
  .props-odds .props-more-panel .chips .chip:focus-visible,
  .props-matchups-panel .panel-filters .status-chips .chip:focus-visible {
    outline: none;
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(0,158,255,0.16);
  }

  /* Quick chips - only specify differences */
  .props-odds .props-market-filter .props-quick-chips .chip {
    gap: 5px !important;
    height: calc(var(--filter-height) + 6px) !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .props-odds .props-market-filter .props-quick-chips .chip.loading,
  .props-odds .props-market-filter .props-quick-chips .chip.loading:focus-visible {
    border-color: var(--props-accent) !important;
    box-shadow: 0 0 0 3px rgba(0,158,255,0.24);
  }

  .props-odds .props-market-filter .props-quick-chips .chip.active,
  .props-odds .props-market-filter .props-quick-chips .chip[aria-pressed="true"] {
    background: var(--props-accent) !important;
    color: #ffffff !important;
    border-color: var(--props-accent) !important;
    box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .props-odds .props-market-filter .props-quick-chips .chip,
    .props-odds-scope .props-market-filter .props-quick-chips .chip,
    .props-odds .props-market-filter .props-category-chips .chip,
    .props-odds-scope .props-market-filter .props-category-chips .chip,
    .props-odds .props-more-panel .category-chips .chip,
    .props-odds-scope .props-more-panel .category-chips .chip,
    .props-odds .props-more-panel .chips .chip,
    .props-odds-scope .props-more-panel .chips .chip,
    .props-odds .props-market-filter .props-game-chips .game-card,
    .props-odds-scope .props-market-filter .props-game-chips .game-card,
    .props-odds .props-more-panel .panel-list .market-list .market-pill,
    .props-odds-scope .props-more-panel .panel-list .market-list .market-pill,
    .props-odds .props-matchups-panel .panel-close-button,
    .props-odds-scope .props-matchups-panel .panel-close-button,
    .props-odds .props-matchups-panel .panel-actions button,
    .props-odds-scope .props-matchups-panel .panel-actions button {
      transition: none !important;
      animation: none !important;
    }
  }
  /* Icon spacing and alignment for All chip */
  .props-odds #props-more-toggle,
  .props-odds-scope #props-more-toggle { display: inline-flex; align-items: center !important; /* removed order: -1 to keep natural order */ }
  .props-odds #props-more-toggle .chip-icon,
  .props-odds-scope #props-more-toggle .chip-icon { margin-right: 8px; opacity: .75; }
  .props-odds #props-more-toggle[aria-pressed="true"] .chip-icon,
  .props-odds-scope #props-more-toggle[aria-pressed="true"] .chip-icon { opacity: 1; }

  .props-odds .props-market-filter .props-quick-chips .chip,
  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-more-panel .category-chips .chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .props-odds .props-market-filter .props-quick-chips .chip .chip-label,
  .props-odds .props-market-filter .props-category-chips .chip .chip-label,
  .props-odds .props-more-panel .category-chips .chip .chip-label {
    flex: 0 1 auto;
  }
  .props-odds .props-market-filter .props-quick-chips .chip .chip-count,
  .props-odds .props-market-filter .props-category-chips .chip .chip-count,
  .props-odds .props-more-panel .category-chips .chip .chip-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--props-radius-pill) !important;
    background: rgba(15,23,42,0.12);
    color: var(--props-text) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    transition: background 0.12s ease-out, color 0.12s ease-out;
  }
  .props-odds .props-market-filter .props-quick-chips .chip.active .chip-count,
  .props-odds .props-market-filter .props-quick-chips .chip[aria-pressed="true"] .chip-count {
    background: rgba(255,255,255,0.4);
    color: #ffffff !important;
  }
  .props-odds .props-market-filter .props-category-chips .chip.active .chip-count,
  .props-odds .props-market-filter .props-category-chips .chip[aria-selected="true"] .chip-count {
    background: rgba(59,130,246,0.22);
    color: var(--props-text) !important;
  }
  .props-odds .props-more-panel .category-chips .chip.active .chip-count,
  .props-odds .props-more-panel .category-chips .chip[aria-selected="true"] .chip-count {
    background: rgba(255,255,255,0.25);
    color: #ffffff !important;
  }

  /* Category chips row on page */
  .props-odds .props-market-filter .props-category-chips {
    display: flex;
    gap: 6px !important;
    flex-wrap: wrap;
    order: 800;           /* Row 1: categories */
    width: 100% !important;
    margin-top: 8px;
  }

  /* Category chips - only specify differences from base */
  .props-odds .props-market-filter .props-category-chips .chip {
    padding: 0 12px;
    border-radius: 10px !important;
    border-color: var(--props-border-light) !important;
    background: var(--props-bg-surface) !important;
  }

  .props-odds .props-market-filter .props-category-chips .chip:hover {
    background: #f1f5f9 !important;
  }

  .props-odds .props-market-filter .props-category-chips .chip.active,
  .props-odds .props-market-filter .props-category-chips .chip[aria-selected="true"] {
    background: #ffffff !important;
    color: var(--props-text) !important;
    border-color: var(--props-accent) !important;
    box-shadow: 0 0 0 2px rgba(0,158,255,0.15) inset, 0 1px 2px rgba(2,6,23,0.06);
    font-weight: 800;
  }

  /* Inline category sections */
  .props-odds .props-market-filter .props-category-sections { width: 100% !important; order: 1000; }
  .props-odds .props-market-filter .props-category-sections .category-section { margin-top: 6px; }
  .props-odds .props-market-filter .props-category-sections .section-title { font-weight: 800; font-size: 13px; color: #334155; margin: 6px 0; }
  .props-odds .props-market-filter .props-category-sections .chips { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Search input positioning for matchups panel */
  .props-odds .props-matchups-panel .search-input {
    position: relative;
  }

  /* Search input positioning for All Props (mirror Matchups) */
  .props-odds .props-more-panel .search-input {
    /* Consolidated from 2 definitions (lines 233, 2030) */
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    order: 2; /* Position after tabs */
  }

  /* More props dropdown (shares panel styles with matchups) */
  .props-odds .props-market-filter .props-more-filter {
    position: relative;
    z-index: 1000;
  }
  .props-odds .props-market-filter .props-more-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 10000;
    min-width: 420px;
    width: 420px;
    max-height: min(80vh, 760px);
    grid-template-rows: auto auto 1fr;
    background: white;
    border: 1px solid var(--props-border-light);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: visible;
  }
  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    display: grid !important;
  }
  .props-odds .props-more-panel .panel-controls {
    /* Consolidated from 4 separate definitions (lines 262, 2010, 2033, 2102) */
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef2f7;
    grid-row: 3; /* for parent grid layout */
  }
  .props-odds .props-more-panel .category-chips { display: flex; flex-wrap: wrap; gap: 8px; }

  /* More panel chips - inherit from base, no overrides needed (uses defaults) */

  /* More panel chips - active states */
  .props-odds .props-more-panel .category-chips .chip.active,
  .props-odds .props-more-panel .category-chips .chip[aria-selected="true"],
  .props-odds .props-more-panel .chips .chip.active,
  .props-odds .props-more-panel .chips .chip[aria-pressed="true"] {
    background: var(--props-accent) !important;
    color: #ffffff !important;
    border-color: var(--props-accent) !important;
  }
  .props-odds .props-more-panel .panel-list {
    /* Consolidated from 3 definitions (lines 354, 1738, 1826) */
    grid-row: 4;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    flex: 1;
  }
  .props-odds .props-more-panel .panel-list .market-list { display: grid; grid-auto-rows: minmax(38px, auto); gap: 10px; }
  .props-odds .props-more-panel .panel-list .market-list .market-pill {
    width: 100% !important;
    height: 38px;
    padding: 7px 14px !important;  /* Added vertical padding for better alignment */
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--props-radius-pill) !important;
    background: #ffffff !important;
    color: var(--props-text) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    cursor: pointer;
    transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out, background .12s ease-out;
    display: flex;
    align-items: center !important;
    justify-content: flex-start;
    gap: 10px;
    text-align: left !important;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill .market-label {
    flex: 1 1 auto;
    text-align: left !important;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill .market-count {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 4px 8px;  /* Added vertical padding for proper spacing */
    border-radius: var(--props-radius-pill);
    background: rgba(15,23,42,0.10) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--props-text) !important;
    transition: background 0.12s ease-out, color 0.12s ease-out;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill[aria-pressed="true"] .market-count {
    background: rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
  }
  .props-odds .props-more-panel .panel-list .market-list .market-pill:hover { border-color: #cbd5e1 !important; box-shadow: 0 2px 6px rgba(2,6,23,.08); transform: translateY(-1px); }
  .props-odds .props-more-panel .panel-list .market-list .market-pill:focus-visible { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(0,158,255,0.16); }
  .props-odds .props-more-panel .panel-list .market-list .market-pill[aria-pressed="true"] { background: var(--props-accent) !important; color: #fff !important; border-color: var(--props-accent) !important; }
  .props-odds .props-more-panel .category-section { margin-bottom: 12px; }
  .props-odds .props-more-panel .category-section .section-title { font-weight: 800; font-size: 13px; color: #334155; margin: 6px 0; }
  .props-odds .props-more-panel .category-section .chips { display: flex; flex-wrap: wrap; gap: 10px; }

  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* Quick game chips row (matchups) */
  .props-odds .props-market-filter .props-game-chips {
    display: flex;
    gap: 6px !important;
    flex-wrap: wrap;
    order: 1001;          /* Below the controls (Matchups/Positions/Search) */
    flex-basis: 100%;
    width: 100% !important;
    margin-top: 2px;
  }
  /* Make Games toggle match other controls and sit near Matchups */
  .props-odds .props-market-filter .props-quick-chips #props-gamechips-toggle {
    order: 9999;            /* appear after other quick chips */
    flex-basis: 100%;       /* force onto its own line */
    margin-top: 8px;        /* breathing room from chips above */
    position: relative;     /* for chevron */
    font-weight: 800;       /* subtle emphasis */
    background: var(--props-bg-surface);    /* ghost-like to stand out but stay cohesive */
    border-color: #dbe3ef;
  }
  .props-odds .props-market-filter .props-quick-chips #props-gamechips-toggle::after {
    content: '';
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677689" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>') no-repeat center/16px 16px;
  }
  /* Collapsed state via [hidden] attribute */
  .props-odds .props-market-filter .props-game-chips[hidden] { display: none !important; }
  /* Card-style game chips */
  .props-odds .props-market-filter .props-game-chips .game-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    align-items: center !important;
    min-width: 190px; /* compact */
    padding: 8px 10px; /* compact */
    border: 1px solid var(--filter-border) !important;
    border-radius: 12px;
    background: var(--props-surface);
    color: var(--props-text) !important;
    box-shadow: 0 1px 2px rgba(2,6,23,0.04);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
  }
  .props-odds .props-market-filter .props-game-chips .game-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 12px rgba(2,6,23,.08); transform: translateY(-1px); }
  .props-odds .props-market-filter .props-game-chips .game-card:focus-visible { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(0,158,255,0.16); }
  .props-odds .props-market-filter .props-game-chips .game-card.active,
  .props-odds .props-market-filter .props-game-chips .game-card[aria-pressed="true"] { background: var(--props-surface-tint); border-color: #94a3b8; }

  .props-odds .props-market-filter .props-game-chips .game-card .title {
    grid-column: 1 / -1;
    font-size: 13px; /* compact */
    font-weight: 800;
    letter-spacing: -.01em;
    overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important;
  }
  .props-odds .props-market-filter .props-game-chips .game-card .meta {
    grid-column: 1 / -1;
    display: flex; align-items: center !important; gap: 8px;
    font-size: 11px; /* compact */ font-weight: 600; color: #475569;
  }
  .props-odds .props-market-filter .props-game-chips .game-card .status { padding: 1px 6px; /* compact */ border-radius: var(--props-radius-pill); border: 1px solid var(--props-border-light); background: #f1f5f9; color: var(--props-text) !important; font-weight: 700; }
  .props-odds .props-market-filter .props-game-chips .game-card .status.live { background: rgba(239,68,68,0.12); color: #b91c1c; border-color: rgba(239,68,68,0.28); }
  .props-odds .props-market-filter .props-game-chips .game-card .status.final { background: #f1f5f9; color: #6b7280; }
  .props-odds .props-market-filter .props-game-chips .game-card .count { margin-left: auto; background: var(--props-accent) !important; color: #fff !important; padding: 2px 6px; border-radius: var(--props-radius-pill); font-weight: 800; font-size: 11px; }
  .props-odds .props-market-filter .props-game-chips .game-card .time { color: #334155; }

  .props-market-filter label {
    font-weight: 600;
    margin-right: 6px;
    color: var(--props-text-strong);
    font-size: 13px;
  }

  /* Add a subtle funnel icon to the Filters: label using Heroicons */
  .props-odds .props-market-filter .filter-label { font-weight: 600; font-size: 15px; }

  .props-odds .props-market-filter .filter-control,
  .props-odds .props-market-filter .filter-chip {
    height: var(--filter-height) !important;
    padding: 0 12px !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    background: var(--filter-bg) !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
  }

  .props-odds .props-market-filter .filter-control:focus,
  .props-odds .props-market-filter .filter-chip:focus {
    outline: none;
    border-color: #94a3b8; /* slate-400 */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  }

  /* Subtle hover state to align all controls */
  .props-odds .props-market-filter .filter-control:hover,
  .props-odds .props-market-filter .filter-chip:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(2,6,23,.06);
  }

  /* Optional compact button (works for WP button classes too) */
  .props-market-filter .button,
  .props-market-filter button,
  .props-market-filter .components-button {
    background: var(--props-accent) !important;
    color: #fff !important;
    border: 1px solid var(--props-accent);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 400;
  }

  /* Matchups dropdown (compact, app-like) */
  .props-odds .props-market-filter .props-matchups-filter { position: relative; order: 1000; }
  .props-odds .props-market-filter .props-matchups-button {
    background: var(--filter-bg) !important; color: var(--props-text) !important; border: 1px solid var(--filter-border) !important;
    padding: 0 44px 0 12px; border-radius: var(--filter-radius) !important; font-weight: 700;
    height: var(--filter-height);
    line-height: 1; display: inline-flex !important; align-items: center !important; gap: 8px;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    position: relative;
    width: 190px; /* Wider than other filters to accommodate icon + text + badges + chevron */
  }
  .props-odds .props-market-filter .props-matchups-button::after { display: none; }
  .props-odds .props-market-filter .props-matchups-button:hover { border-color: #cbd5e1 !important; box-shadow: 0 1px 2px rgba(2,6,23,.06); }
  .props-matchups-button .badge {
    background: var(--props-accent) !important; color: #fff !important; border-radius: var(--props-radius-pill);
    padding: 2px 6px; font-size: 12px; font-weight: 700;
  }
  /* Space between total and selected badges */
  .props-matchups-button #props-matchups-total + #props-matchups-count { margin-left: 6px; }

  .props-matchups-panel {z-index: 1000 !important; }
  .props-matchups-filter { position: relative; }
  .props-matchups-filter.open .props-matchups-panel { display: grid; }
  .props-matchups-panel {
    position: absolute; top: 110%; left: 0; z-index: 20;
    width: 400px; max-height: 680px;
    display: grid; grid-template-rows: auto auto 1fr auto;
    background: var(--props-drawer-surface, var(--props-surface));
    border: 1px solid var(--props-drawer-border, #e6edf5);
    border-radius: 14px;
    box-shadow: var(--props-drawer-shadow);
    display: none;
    font-size: 14px !important;
    color: var(--props-text) !important;
  }
  .props-matchups-panel .panel-header, .props-more-panel .panel-header, .props-filters-panel .panel-header { position: relative; }
  .props-matchups-panel .panel-close-button, .props-more-panel .panel-close-button, .props-filters-panel .panel-close-button { position: absolute; top: 12px; right: 12px; border: none; background: var(--props-accent); color: #ffffff; border-radius: var(--props-radius-pill); font-size: 12px; font-weight: 600; padding: 4px 12px; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px rgba(0,158,255,0.26); transition: filter .12s ease-out; }
  .props-matchups-panel .panel-close-button:hover, .props-more-panel .panel-close-button:hover, .props-filters-panel .panel-close-button:hover { filter: brightness(0.95); }
  .props-matchups-panel .panel-close-button:focus-visible, .props-more-panel .panel-close-button:focus-visible, .props-filters-panel .panel-close-button:focus-visible { outline: 2px solid var(--props-accent); outline-offset: 2px; }

  @media (min-width: 769px) {
    .props-matchups-panel .panel-close-button,
    .props-more-panel .panel-close-button,
    .props-filters-panel .panel-close-button {
      display: none;
    }
  }
  .props-matchups-panel .panel-header { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,.25); background: var(--props-drawer-surface-strong, var(--props-surface-muted)); border-top-left-radius: 14px; border-top-right-radius: 14px; }
  .props-matchups-panel .panel-title { font-weight: 800; color: var(--props-text) !important; font-size: 15px; letter-spacing: -.01em; }
  .props-matchups-panel .panel-controls { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; font-size: 13px; color: #334155; }
  .props-matchups-panel .panel-controls label { display: flex; align-items: center !important; gap: 8px; font-weight: 600; }
  .props-matchups-panel .panel-filters { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; }
  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips { display: flex; gap: 6px !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Status chips - only specify size differences from base */
  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip {
    height: 26px;
    padding: 0 10px;
    border-color: rgba(148,163,184,.28);
    background: var(--props-bg-surface) !important;
    font-weight: 600;
    font-size: 11px;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip[aria-pressed="true"] {
    background: var(--props-accent) !important;
    color: #fff !important;
    border-color: var(--props-accent) !important;
  }
  .props-matchups-panel .panel-filters .search-input input[type="search"] { height: 36px; width: 100% !important; border: 1px solid #e6edf5; border-radius: 8px; padding: 0 12px; font-size: 14px !important; background: var(--props-surface-muted); }
  .props-more-panel .panel-controls .search-input input[type="search"] { height: 36px; width: 100% !important; border: 1px solid #e6edf5; border-radius: 8px; padding: 0 12px; padding-left: 40px; font-size: 14px !important; background: var(--props-surface-muted); }
  .props-matchups-panel .search-input input[type="search"],
  .props-more-panel .search-input input[type="search"],
  .props-filters-panel .search-input input[type="search"] {
    font-size: 14px !important;
  }
  .props-more-panel .panel-controls .search-input input[type="search"]::placeholder { color: var(--props-text-muted); }
  .props-odds .props-market-filter .props-matchups-panel .panel-list {
    overflow: auto;
    padding: 10px 14px !important;
    display: grid;
    grid-template-columns: 1fr;
  }
  /* Chip-style items (totally different look) */
  .props-matchups-panel .panel-list .matchup-item {
    display: block;
    padding: 0;
    color: var(--props-text) !important;
    font-size: 14px !important;
    border: none;
  }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span.matchup-item-content {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center !important;
    justify-items: start;
    column-gap: 6px !important;
    padding: 14px 22px !important;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.2);
    background: #ffffff;
    font-weight: 600;
    color: var(--props-text) !important;
    font-size: 13px;
    line-height: 1.35;
    min-height: 52px;
    box-shadow: none;
    background: #ffffff;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content:hover,
  .props-matchups-panel .matchup-item span.matchup-item-content:focus-within {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(2,6,23,.08);
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-width: 0;
    text-transform: uppercase;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell img,
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell .team-logo-fallback {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell img {
    object-fit: contain;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,0.35);
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell .team-logo-fallback {
    letter-spacing: 0.02em;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-cell .team-code {
    font-size: 14px !important;
    color: inherit;
    line-height: 1;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .team-separator {
    font-size: 12px;
    font-weight: 700;
    color: var(--props-text-muted);
    justify-self: center;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .kickoff {
    justify-self: end;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }
  .props-matchups-panel .matchup-item span.matchup-item-content .kickoff.is-empty {
    opacity: 0;
  }
  /* Ensure base state is perfectly flat */
  .props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span { box-shadow: none; }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span{
    /* fallback legacy rule overridden below with scoped border-only selection */
  }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span .matchup-teams .team .team-code {
    color: #ffffff !important;
  }
  .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span .matchup-teams .team .team-logo-fallback {
    background: rgba(15,23,42,0.15);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  }
  .props-matchups-panel .panel-list .matchup-item.completed { opacity: .6; }
  .props-matchups-panel .panel-list .matchup-item:hover { background: transparent; border-radius: 10px; }

  /* Checkbox look to match site checkboxes */
  .props-matchups-panel input[type="checkbox"] {
    appearance: none; width: 18px; height: 18px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: all .15s ease;
  }
  .props-matchups-panel input[type="checkbox"]:hover { border-color: #a6b3c6; box-shadow: 0 1px 2px rgba(2,6,23,.08); }
  .props-matchups-panel input[type="checkbox"]:checked { border-color: var(--props-brand-cyan); background: var(--props-brand-cyan); }
  .props-matchups-panel input[type="checkbox"]:checked::after { content: ''; width: 10px; height: 10px; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.415l-7.5 7.5a1 1 0 01-1.415 0l-3.5-3.5A1 1 0 015.29 9.29l2.793 2.793 6.793-6.793a1 1 0 011.415 0z" clip-rule="evenodd"/></svg>') no-repeat center / contain; background: #fff; display: block; }

  /* Row states */
  .props-matchups-panel .matchup-item input[type="checkbox"]:checked + span { font-weight: 700; }
  /* Neutral, text-only kickoff time – no pill/background */
  .props-matchups-panel .matchup-item span .kickoff {
    margin-left: 8px !important;
    font-weight: 700 !important;
    color: var(--props-text-muted) !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Keep kickoff readable on selected chips without turning into a white pill */
  .props-matchups-panel .matchup-item input[type="checkbox"]:checked + span .kickoff { color: inherit !important; background: transparent !important; border: none !important; }
  .props-matchups-panel .panel-actions,
  .props-more-panel .panel-actions,
  .props-filters-panel .panel-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(148,163,184,.25);
    background: linear-gradient(180deg, rgba(226,232,240,.72) 0%, rgba(226,232,240,.42) 100%);
    position: sticky;
    bottom: 0;
    backdrop-filter: blur(6px);
  }
  .props-matchups-panel .panel-actions button,
  .props-more-panel .panel-actions button,
  .props-filters-panel .panel-actions button {
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
    line-height: 1;
    border-radius: var(--props-radius-pill);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px !important;
    font-weight: 600;
  }
  .props-matchups-panel .panel-actions .ghost,
  .props-more-panel .panel-actions .ghost,
  .props-filters-panel .panel-actions .ghost {
    background: transparent;
    color: var(--props-text-muted);
    border: none;
    font-weight: 500 !important;
    padding: 0;
    min-width: 0;
    justify-content: flex-start;
    height: auto;
    line-height: 1.2;
  }
  .props-matchups-panel .panel-actions .ghost:hover,
  .props-more-panel .panel-actions .ghost:hover,
  .props-filters-panel .panel-actions .ghost:hover {
    color: #475569;
    text-decoration: underline;
  }
  .props-matchups-panel .panel-actions .primary,
  .props-more-panel .panel-actions .primary,
  .props-filters-panel .panel-actions .primary {
    background: var(--props-accent) !important;
    color: #fff !important;
    border: 1px solid var(--props-accent);
    font-weight: 700;
    justify-content: center;
    width: 100% !important;
    box-shadow: 0 8px 20px rgba(0,158,255,0.22);
  }
  .props-matchups-panel .panel-actions .primary:hover,
  .props-more-panel .panel-actions .primary:hover,
  .props-filters-panel .panel-actions .primary:hover { filter: brightness(0.97); }
  .props-matchups-panel .panel-actions .primary:focus-visible,
  .props-more-panel .panel-actions .primary:focus-visible,
  .props-filters-panel .panel-actions .primary:focus-visible,
  .props-matchups-panel .panel-actions .ghost:focus-visible,
  .props-more-panel .panel-actions .ghost:focus-visible,
  .props-filters-panel .panel-actions .ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--props-ring);
  }

  /* Apply button: stronger, always visible primary */
  .props-odds .props-market-filter .props-matchups-panel .panel-actions .primary {
    background: var(--props-accent) !important;
    color: #fff !important;
    border-color: var(--props-accent) !important;
    box-shadow: 0 8px 20px rgba(0,158,255,0.22) !important;
  }

  /* Filters: label and search input styling */
  .props-odds .props-market-filter .filter-label { font-weight: 700; color: #111827; margin-right: 2px; }
  .props-odds .props-market-filter .props-search-wrap { position: relative; order: 1000; flex: 0 0 auto; width: auto; margin-left: 0; margin-right: 0; }
  /* Remove legacy pseudo-icon for the old inline search */
  .props-odds .props-market-filter .props-search-wrap::before { content: none !important; display: none !important; }
  .props-odds .props-market-filter .props-search-button {
    /* Mobile default: show button with border, input hidden until clicked */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    width: var(--filter-height);
    min-width: var(--filter-height);
    padding: 0;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    cursor: pointer;
  }
  .props-odds .props-market-filter .props-search-wrap.open .props-search-button { background: var(--filter-bg) !important; }
  .props-odds .props-market-filter .props-search-panel[hidden] { display: none !important; }
  /* Mobile default: hide input panel, only show button */
  .props-odds .props-market-filter .props-search-panel { display: none; margin-left: 0; }
  .props-odds .props-market-filter .props-search-wrap input[type="search"] {
    padding-left: 40px; min-width: 240px;
    width: clamp(200px, 20vw, 300px);
    height: var(--filter-height);
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background-color: var(--filter-bg) !important;
    -webkit-appearance: none; /* prevent iOS styling the field with inner decorations */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23677689" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
  }

  /* Ensure icon appears even when theme adds background overrides */
  .props-odds.props-odds-scope .props-market-filter input#props-player-filter[type="search"] {
    padding-left: 40px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23677689" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
  }

  /* Consistent placeholder color */
  .props-odds .props-market-filter .props-search-wrap input[type="search"]::placeholder {
    color: #9aa3af; /* slate-400/500 */
    opacity: 1;
  }

  /* Mobile panel layout: input + Cancel button row */
  .props-odds .props-market-filter .props-search-panel { gap: 8px; }
  .props-odds .props-market-filter .props-search-panel .props-search-cancel {
    display: none;
    height: var(--filter-height);
    padding: 0 8px;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    color: var(--filter-fg, #677689);
    cursor: pointer;
    min-width: var(--filter-height);
  }
  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* Desktop: hide button, show input with icon inside */
  @media (min-width: 769px) {
    .props-odds .props-market-filter .props-search-button { display: none !important; }
    .props-odds .props-market-filter .props-search-panel { display: inline-block !important; }
    /* Normalize desktop spacing so Sort -> Search gap equals container gap */
    .props-odds .props-market-filter { gap: var(--filter-gap); }
    /* Remove extra left margin so Search sits at standard gap */
    .props-odds .props-market-filter .props-search-wrap { margin-left: 0 !important; }
    /* On desktop, ensure panel shows even if markup has [hidden] */
    .props-odds .props-market-filter .props-search-panel[hidden] { display: inline-block !important; }
  }
  /* REMOVED: Mobile rules consolidated at line 2537+ */

  /* Matchups button — shadcn-like ghost button */
  .props-odds .props-market-filter .props-matchups-button { display: inline-flex !important; align-items: center !important; gap: 8px; font-weight: 600;}

  /* Unify control look across select, matchups, and search */
  .props-odds .props-market-filter .filter-control,
  .props-odds .props-market-filter .props-select-toggle,
  .props-odds .props-market-filter .props-matchups-button,
  .props-odds .props-market-filter .props-search-wrap input[type="search"] {
    height: var(--filter-height) !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
  }

  /* Unified focus ring for all controls */
  .props-odds .props-market-filter .props-search-wrap input[type="search"]:focus,
  .props-odds .props-market-filter .props-matchups-button:focus-visible,
  .props-odds .props-market-filter .props-filters-button:focus-visible,
  .props-odds .props-market-filter .props-select-toggle:focus-visible,
  .props-odds .props-market-filter .filter-control:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  }

  /* High-specificity selectors to beat theme styles (clean approach) */
  .props-odds.props-odds-scope .props-market-filter .props-select .props-select-toggle,
  .props-odds.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button,
  .props-odds.props-odds-scope .props-market-filter button.filter-control.props-matchups-button,
  .props-odds.props-odds-scope .props-market-filter input#props-player-filter[type="search"],
  .props-odds.props-odds-scope .props-market-filter .props-search-wrap input[type="search"] {
    height: var(--filter-height);
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background-color: var(--filter-bg) !important;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--props-text) !important;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    text-transform: none;
    letter-spacing: normal;
  }

  /* Ensure Matchups button reserves space for absolute chevron */
  .props-odds.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button {
    padding-right: 36px !important;
    padding-left: 12px !important;
  }

  .props-odds.props-odds-scope .props-select-menu,
  .props-odds.props-odds-scope .props-market-filter .props-matchups-panel {
    background: var(--filter-bg) !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important; */
    font-size: 14px !important;
    color: var(--props-text) !important;
  }

  /* Chevron indicators inside filter controls */
  .props-odds .props-market-filter .filter-chevron {
    display: inline-flex !important;
    align-items: center !important;
    pointer-events: none;
    color: #475569;
  }
  .props-odds .props-market-filter .props-select-toggle .filter-chevron {
    margin-left: auto;
  }
  .props-odds .props-market-filter .props-matchups-button .filter-chevron {
    /* Align chevron to the far right like Positions/Sort */
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    margin-left: 0; /* reset inline-gap behavior */
  }
  .props-odds .props-market-filter .props-select-toggle.is-static .filter-chevron {
    display: none;
  }
  .props-odds .props-market-filter .filter-chevron-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .props-odds .props-market-filter .props-select-toggle svg,
  .props-odds .props-market-filter .props-matchups-button svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
  }

  /* Filters button/panel (mobile) */
  .props-odds .props-market-filter .props-filters-filter { position: relative; order: 1000; display: none; }
  .props-odds .props-market-filter .props-filters-button { background: var(--filter-bg) !important; color: var(--props-text) !important; border: 1px solid var(--filter-border) !important; padding: 0 12px; border-radius: var(--props-radius-pill); font-weight: 700; height: var(--filter-height); line-height: 1; display: inline-flex !important; align-items: center !important; gap: 8px; box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important; }
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel { display: grid; }
  .props-odds .props-filters-panel .panel-list { padding: 16px; display: grid; gap: 16px; }
  .props-odds .props-filters-panel .category-section { margin-bottom: 4px; text-align: center; }
  .props-odds .props-filters-panel .category-section .section-title { font-weight: 700; font-size: 13px; color: #1f2937; letter-spacing: -.01em; margin: 0 0 10px 0; text-transform: none; }
  .props-odds .props-filters-panel .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

  /* Filters panel chips - only specify differences from base */
  .props-odds .props-filters-panel .chips .chip {
    height: 36px;
    padding: 0 18px;
    border-color: rgba(148,163,184,.35) !important;
    background: var(--props-bg-surface) !important;
    font-weight: 600;
    font-size: 14px !important;
    letter-spacing: 0;
    box-shadow: none;
  }

  .props-odds .props-filters-panel .chips .chip:hover {
    background: #f1f5f9 !important;
  }

  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:hover {
    background: var(--props-bg-surface) !important;
    color: var(--props-text) !important;
    border-color: rgba(148,163,184,.35) !important;
    box-shadow: none;
    transform: translateY(-1px);
  }

  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 6px 14px rgba(0,158,255,.28);
  }

  /* Keep active chips visually active even while hovering/pressing */
  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:hover,
  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:focus,
  .props-odds .props-filters-panel .chips .chip[aria-pressed="true"]:active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 6px 14px rgba(0,158,255,.28);
    transform: none;
  }
  .props-odds .props-filters-panel .panel-header {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: 6px !important;
    padding: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(148,163,184,.18);
    text-align: center;
  }
  .props-odds .props-filters-panel .panel-header::before {
    content: '';
    width: 42px;
    height: 4px;
    border-radius: var(--props-radius-pill);
    background: rgba(100,116,139,.55);
    opacity: 1;
    margin: 0 auto 4px auto;
  }
  .props-odds .props-filters-panel .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--props-text) !important;
    letter-spacing: -.01em;
  }

  /* Ensure hover/focus consistency with specificity */
  .props-odds.props-odds-scope .props-market-filter .props-select .props-select-toggle:hover,
  .props-odds.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button:hover,
  .props-odds.props-odds-scope .props-market-filter button.filter-control.props-matchups-button:hover,
  .props-odds.props-odds-scope .props-market-filter input#props-player-filter[type="search"]:hover,
  .props-odds.props-odds-scope .props-market-filter .props-search-wrap input[type="search"]:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(2,6,23,.06);
  }

  /* Select — native element with custom chevron, styled like search */
  .props-odds .props-market-filter .filter-select {
    appearance: none;
    padding-right: 34px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677689" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    /* Match other filter controls (ghost pill) */
    border-radius: var(--props-radius-pill);
    height: var(--filter-height);
    border: 1px solid var(--filter-border) !important;
    background-color: var(--filter-bg);
    color: var(--props-text) !important;
    font-weight: 700; /* align with chips/matchups */
    padding-left: 12px;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
  }
  /* Ensure positions filter sits inline next to Matchups on row 3 */
  .props-odds .props-market-filter .props-positions-filter {
    order: 1000;
    margin-right: 0 !important; /* spacing handled by container gap */
  }
  .props-odds .props-market-filter .props-sort-filter {
    order: 1000;
    margin-left: 0 !important; /* spacing handled by container gap */
  }

  /* Sibling spacing fallback removed to avoid double gap; rely on gap */

  /* Make sort filter match matchups button styling */
  .props-odds .props-market-filter .props-sort-filter .props-select-toggle {
    border-radius: var(--filter-radius) !important;
    font-weight: 700 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    width: 100% !important; /* fill container width */
  }

  /* Make sort filter container match positions width */
  .props-odds .props-market-filter .props-sort-filter .props-select {
    width: 180px !important;
    flex: 0 0 180px !important;
  }

  /* Ensure dropdown styling overrides theme styles */
  .props-odds-scope .props-select-toggle,
  .props-odds-scope .props-select-menu,
  .props-odds-scope .props-select-option {
    /* font-family inherited from base.css */
    box-sizing: border-box;
  }

  /* Override any theme button/link styles on dropdown toggle */

  .props-odds-scope .props-select-toggle.is-static {
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
  }
  .props-odds-scope .props-select-toggle.is-static .chevron {
    display: none;
  }
  .props-odds-scope .props-select-toggle.is-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
  }

  /* Hide chevron/arrow on disabled selects */
  .props-odds-scope .props-select-toggle.is-disabled .filter-chevron,
  .props-odds-scope .props-select-toggle.is-disabled .chevron {
    display: none !important;
  }

  /* Gray out the icon on disabled selects */
  .props-odds-scope .props-select-toggle.is-disabled svg {
    opacity: 0.4 !important;
  }

  /* Prevent hover effects on disabled selects */
  .props-odds-scope .props-select-toggle.is-disabled:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
  }

  .props-odds-scope .props-select-toggle {
    text-decoration: none !important;
    border-style: solid !important;
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* Override any theme list styles on dropdown options */
  .props-odds-scope .props-select-option {
    text-decoration: none !important;
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    box-shadow: none !important;
  }

  .props-odds-scope .props-select-option:before,
  .props-odds-scope .props-select-option:after {
    display: none !important;
  }

  /* Custom props dropdown (shadcn-like) - All properly scoped */
  .props-odds-scope .props-select {
    position: relative;
    display: inline-block;
    width: 260px;
    flex: 0 0 260px;
  }
  /* Compact widths for league and week/date controls */
  .props-odds-scope #props-league { width: 120px !important; flex: 0 0 120px !important; }
  .props-odds-scope #props-weekdate { width: 300px !important; flex: 0 0 200px !important; }
  /* Make Positions dropdown options look like the Matchups chips */
  .props-odds-scope #props-positions-menu {
    min-width: 220px;
    width: 220px;
    max-width: 240px;
    padding: 12px !important;
    border-radius: 12px;
    box-shadow: 0 18px 32px rgba(15,23,42,.22);
    border: 1px solid rgba(148,163,184,.22) !important;
    z-index: 1600 !important;
    grid-auto-rows: minmax(32px, auto) !important;
    gap: 8px !important;
  }
  .props-odds-scope #props-positions-menu .props-select-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    border-radius: var(--props-radius-pill) !important;
    background: #ffffff !important;
    color: var(--props-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  .props-odds-scope #props-positions-menu .props-select-option:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
    box-shadow: 0 2px 6px rgba(2,6,23,.08) !important;
  }
  /* Selected pills use brand blue (match matchups chips) */
  .props-odds-scope #props-positions-menu .props-select-option[aria-selected="true"] {
    background: var(--props-accent) !important;
    border-color: var(--props-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
  }
  /* Positions select: ghost-style pill button like Matchups */
  .props-odds-scope #props-positions { width: 180px !important; flex: 0 0 180px !important; }
  .props-odds-scope #props-positions .props-select-toggle {
    position: relative !important;
    border-radius: var(--filter-radius) !important;
    font-weight: 700 !important;
    padding: 0 20px 0 12px !important; /* tighter chevron spacing */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* REMOVED: Mobile rules consolidated at line 2537+ */


  .props-odds-scope .props-select-toggle {
    height: var(--filter-height);
    padding: 0 36px 0 12px !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: var(--filter-radius) !important;
    background: var(--filter-bg) !important;
    color: var(--props-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    /* font-family inherited from base.css */
    line-height: 1.2;
    box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .props-odds-scope .props-select-toggle:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(2,6,23,0.06) !important;
  }

  .props-odds-scope .props-select-toggle #props-market-label {
    color: var(--props-text) !important;
    font-weight: 500 !important;
    /* font-family inherited from base.css */
    max-width: calc(100% - 26px);
  }

  /* Replace inline styles on label with a class */
  .props-odds-scope .props-market-label-text{
    pointer-events: none;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block;
  }

  .props-odds-scope .props-select-toggle:focus-visible {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(0,158,255,0.16);
  }

  .props-odds-scope .props-select .chevron {
    position: absolute;
    right: 4px; /* bring chevron closer to edge */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: .85;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677689" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>') no-repeat center/16px 16px;
  }

  .props-odds-scope .props-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    width: 260px;
    max-width: 260px;
    background: var(--filter-bg) !important;
    border: 1px solid var(--filter-border) !important;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(2,6,23,.12), 0 4px 10px rgba(2,6,23,.08);
    padding: 4px 0;
    z-index: 500;
    max-height: 320px;
    overflow: auto;
    margin: 0;
    /* font-family inherited from base.css */
    font-size: 13px;
    color: var(--props-text) !important;
  }

  .props-odds-scope .props-select-option {
    list-style: none;
    border-radius: 4px !important;
    padding: 8px 14px !important;
    margin: 2px 4px !important;
    position: relative;
    cursor: pointer;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    /* font-family inherited from base.css */
    line-height: 1.3 !important;
    transition: all 0.15s ease;
  }

  .props-odds-scope .props-select-option:hover {
    background: #f1f5f9;
    color: var(--props-text) !important;
  }

  .props-odds-scope .props-select-option[aria-selected="true"] {
    background: var(--props-bg-surface);
    color: var(--props-text) !important;
    font-weight: 600;
  }

  .props-odds-scope .props-select-option[aria-selected="true"]::after {
    content: none;
  }

  /* Ensure no icons appear for NFL option */
  .props-odds-scope .props-select-option[data-value="nfl"]::before,
  .props-odds-scope .props-select-option[data-value="nfl"]::after {
    content: none !important;
    display: none !important;
  }

  /* Ensure no icons appear in NFL button text */

  /* Remove any icons from league options */
  .props-odds-scope #props-league-menu .props-select-option::before,
  .props-odds-scope #props-league-menu .props-select-option::after {
    content: none !important;
    display: none !important;
  }

  /* Hide the SVG icon in the league select button */
  .props-odds-scope #props-league .props-select-toggle svg {
    display: none !important;
  }

  /* Hide any icons in the league button text */
  .props-odds-scope #props-league-button svg {
    display: none !important;
  }

  /* Comprehensive removal of all SVG icons from league select area */
  .props-odds-scope #props-league svg,
  .props-odds-scope .props-select[id="props-league"] svg,
  .props-odds-scope div[id="props-league"] svg {
    display: none !important;
    visibility: hidden !important;
  }

  /* Target the specific button structure seen in the HTML */
  .props-odds-scope button[id="props-league-button"] svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }

  /* Re-enable the dropdown chevron for the League select only */
  .props-odds-scope #props-league-button .filter-chevron,
  .props-odds-scope #props-league-button .filter-chevron .filter-chevron-icon {
    display: inline-flex !important;
    visibility: visible !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
  }

  /* Remove any margin/padding that might leave space for the hidden icon */
  .props-odds-scope #props-league-button {
    padding-left: 12px !important;
  }

  .props-odds-scope #props-league-button svg + * {
    margin-left: 0 !important;
  }

  .props-odds-scope .props-select.hidden {
    display: none;
  }

  /* Buttons within the matchups panel */
  .props-matchups-panel .panel-actions .ghost {
    background: #f1f5f9;
    color: var(--props-text) !important;
    border: 1px solid var(--props-border-light);
  }
  .props-matchups-panel .panel-actions .ghost:hover { filter: brightness(0.98); }
  .props-matchups-panel .panel-actions .primary {
    background: var(--props-accent) !important;
    border-color: var(--props-accent) !important;
  }

  /* Market select compact look to match; unscoped fallback to beat theme */
  .props-odds #props-market-select { min-width: 220px; }

  /* Dropdown (matchups + any future filter menus) */

  /* All Props (More) specific overrides: remove actions row and increase height */
  .props-odds .props-market-filter .props-matchups-panel.props-more-panel {
    grid-template-rows: auto auto 1fr;
    max-height: min(80vh, 760px);
  }
  .props-odds .props-market-filter .props-more-panel .panel-actions { display: none; }
  .props-odds-scope .props-matchups-panel {
    border: 1px solid var(--props-border-light);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(2,6,23,.12);
  }

  /* Matchups panel refinements to mirror legacy sizing */
  .props-odds .props-matchups-panel .panel-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .props-odds .props-matchups-panel .panel-controls,
  .props-odds .props-matchups-panel .panel-filters,
  .props-odds .props-matchups-panel .panel-list,
  .props-odds .props-matchups-panel .panel-actions {
    font-size: 13px;
  }
  .props-odds .props-matchups-panel .panel-controls label {
    font-size: 13px;
    font-weight: 600;
  }

  /* Status chips sizing override - inherits from base chip pattern */
  .props-odds .props-matchups-panel .panel-filters .status-chips .chip {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .props-odds .props-matchups-panel .panel-filters .status-chips .chip:not([aria-pressed="true"]) {
    background: #ffffff !important;
    color: var(--props-text) !important;
    border-color: #e6edf5 !important;
    box-shadow: none !important;
  }
  .props-odds .props-matchups-panel .panel-filters .search-input input[type="search"] {
    font-size: 14px !important;
  }
  .props-odds .props-matchups-panel .panel-actions .ghost {
    background: var(--props-bg-surface) !important;
    color: #1e293b !important;
    border: 1px solid #d7deea !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  .props-odds .props-matchups-panel .panel-actions .ghost:hover {
    filter: none !important;
    background: #eef2f7 !important;
  }
  .props-odds .props-matchups-panel .panel-actions .ghost:active {
    background: var(--props-border-light) !important;
  }
  .props-odds .props-matchups-panel .panel-actions {
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  .props-odds .props-matchups-panel .panel-actions button {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  .props-odds .props-matchups-panel .panel-actions .primary {
    font-weight: 700 !important;
  }

  /* Ensure custom selects anchor menus to the left edge of the toggle */
  .props-odds .props-market-filter .props-select-menu,
  .props-odds-scope .props-select-menu {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    min-width: max(220px, 100%) !important;
    width: max(220px, 100%) !important;
    max-width: none !important;
  }

  .props-market-filter .button:hover,
  .props-market-filter button:hover,
  .props-market-filter .components-button:hover {
    filter: brightness(0.96);
  }

}

/* REMOVED: Duplicate legacy matchups status chips - now using consolidated base pattern at line 94 */

/* Legacy matchups quick chips (All/Live/Upcoming etc.) */
.props-odds .props-market-filter .props-game-chips .game-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  min-width: 110px;
  padding: 8px 12px;
  border: 1px solid var(--filter-border) !important;
  border-radius: var(--props-radius-pill) !important;
  background: #ffffff !important;
  color: var(--props-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: 0 1px 1px rgba(2,6,23,0.04) !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}
.props-odds .props-market-filter .props-game-chips .game-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(2,6,23,.08);
  transform: translateY(-1px);
}
.props-odds .props-market-filter .props-game-chips .game-card:focus-visible {
  outline: none;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(0,158,255,0.16);
}
.props-odds .props-market-filter .props-game-chips .game-card.active,
.props-odds .props-market-filter .props-game-chips .game-card[aria-pressed="true"] {
  background: var(--props-accent) !important;
  color: #ffffff !important;
  border-color: var(--props-accent) !important;
  box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
}
.props-odds #props-gamechips-toggle[aria-pressed="true"],
.props-odds-scope #props-gamechips-toggle[aria-pressed="true"] {
  background: var(--props-accent) !important;
  color: #ffffff !important;
  border-color: var(--props-accent) !important;
  box-shadow: 0 4px 10px rgba(0,158,255,0.26) !important;
}
/* Legacy control text color */
.props-odds .props-market-filter .filter-control,
.props-odds .props-market-filter .filter-chip,
.props-odds .props-market-filter .props-select-toggle,
.props-odds .props-market-filter .props-matchups-button,
.props-odds .props-market-filter .props-search-wrap input[type=\"search\"] {
  color: var(--props-text) !important;
  background: #ffffff !important;
}
@media (max-width: 480px) {
  .props-matchups-panel .panel-actions,
  .props-more-panel .panel-actions,
  .props-filters-panel .panel-actions {
    grid-template-columns: 1fr;
  }
  .props-matchups-panel .panel-actions .ghost,
  .props-more-panel .panel-actions .ghost,
  .props-filters-panel .panel-actions .ghost {
    justify-content: flex-start;
    padding: 0 12px;
  }
}

/* Matchups dropdown — quieter selection styles (scoped) */
.props-odds .props-market-filter .props-matchups-panel {
  --matchups-active-bg: #eef5ff;       /* very light brand tint */
  --matchups-active-border: #c7ddf9;   /* hairline border */
  --matchups-active-fg: #0f172a;       /* readable text */
  /* Soften the panel canvas a touch to avoid all-white */
  --props-drawer-surface: #f7f9fc;
  --props-drawer-surface-strong: #eef2f7;
}

/* Status chips inside panel: active uses soft tint, not full brand fill */
.props-odds .props-market-filter .props-matchups-panel .panel-filters .status-chips .chip[aria-pressed="true"] {
  background: var(--matchups-active-bg) !important;
  color: var(--matchups-active-fg) !important;
  border-color: var(--matchups-active-border) !important;
  box-shadow: inset 0 0 0 1px var(--matchups-active-border) !important;
}

/* Selected matchup rows: soft tint background and hairline border */
/* Selected card: blue border only; keep surface neutral */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span {
  background: #f7f9fc !important; /* keep light gray when selected */
  color: var(--props-text) !important;
  border-color: var(--props-accent) !important;
  box-shadow: 0 0 0 2px rgba(0,158,255,0.15) inset !important;
}

/* Idle cards: give a soft surface and add a subtle left accent bar affordance */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span.matchup-item-content {
  position: relative;
  background: #f7f9fc !important; /* light gray card */
  border-color: #e6edf5 !important;
}
/* Remove left accent bar on hover/selection */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item span.matchup-item-content::before { display: none; content: none; }

/* Keep kickoff readable on selected rows */
.props-odds .props-market-filter .props-matchups-panel .panel-list .matchup-item input[type="checkbox"]:checked + span .kickoff {
  color: #4b5563 !important;
}

.props-odds-scope #props-positions-menu:not([hidden]) {
  display: grid !important;
}

.props-odds-scope #props-positions-menu[hidden] {
  display: none !important;
}

@media (min-width: 769px) {
  .props-odds-scope #props-positions {
    width: 180px !important;
    flex: 0 0 180px !important;
  }
  .props-odds-scope #props-positions .props-select-toggle {
    width: 100% !important;
    min-width: 0 !important; /* allow container to control width */
  }
}

.props-odds-scope #props-positions-label {
  white-space: nowrap !important;
}

@media (min-width: 1024px) {
  .props-odds .props-market-filter {
    --filter-gap: 20px;
  }

  /* Increase search bar width on desktop */
  .props-odds input#props-player-filter,
  .props-odds .props-market-filter .props-search-wrap input[type="search"] {
    width: 330px !important;
    min-width: 330px !important;
  }
}

/* ============================================
   Dropdown Visibility & Scrolling Fixes
   (Consolidated from props-odds.dropdown-fix.css)
   ============================================ */

/* Desktop-specific fixes for dropdown visibility */
@media (min-width: 769px) {
  /* Allow overflow for dropdown on desktop only */
  .props-odds .props-market-filter {
    overflow: visible !important;
    position: relative !important;
  }

  /* Allow dropdown to show on desktop */
  .props-odds .props-market-filter .props-quick-chips {
    overflow: visible !important;
    position: static !important;
  }

  /* Prevent parent clipping on desktop */
  .props-odds,
  .props-odds-engine,
  .props-odds-container {
    overflow: visible !important;
  }

  .props-odds [role="region"][aria-label*="filters" i],
  .props-odds .props-filters-region {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
  }

  /* Desktop More panel positioning */
  .props-odds .props-market-filter .props-more-panel {
    display: none;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 99999 !important;
    min-width: 420px !important;
    width: 420px !important;
    max-height: min(80vh, 600px) !important;
    background: white !important;
    border: 1px solid var(--props-border-light) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
  }
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* More filter positioning - works for all screen sizes */
.props-odds .props-market-filter .props-more-filter {
  position: relative !important;
  z-index: 1000 !important;
}

/* REMOVED: Duplicate .panel-list definition - consolidated at line 354 */

/* Search area sticky positioning */
/* REMOVED: Duplicate .panel-controls definition - consolidated at line 262 */

/* ============================================
   Search Input Positioning Fixes
   (Consolidated from props-odds.search-fix.css)
   ============================================ */

/* REMOVED: Duplicate .search-input definition - consolidated at line 233 */

/* Ensure search box is in the right place in panel structure */
/* REMOVED: Duplicate .panel-controls definition - consolidated at line 262 */

/* Search input container should be full width */
.props-odds .props-more-panel .panel-controls .search-input,
.props-odds .props-more-panel .search-box .search-input {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

/* The actual input field */
.props-odds .props-more-panel .search-input input[type="search"],
.props-odds .props-more-panel input#props-more-search {
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px 0 40px !important; /* Space for icon */
  font-size: 14px !important;
  border: 1px solid var(--props-border-light) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--props-text) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Search icon positioning */
.props-odds .props-more-panel .search-input svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  z-index: 1;
}

/* Panel structure - ensure proper layout when open */
.props-odds .props-more-filter.open .props-more-panel {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto;
}

/* Panel header (if exists) */
.props-odds .props-more-panel .panel-header {
  grid-row: 1;
  padding: 12px 16px;
  border-bottom: 1px solid var(--props-border-light);
}

/* Tabs section */
.props-odds .props-more-panel .tabs,
.props-odds .props-more-panel .category-tabs {
  grid-row: 2;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--props-border-light);
}

/* Search section - should be after tabs */
.props-odds .props-more-panel .search-box {
  grid-row: 3;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--props-border-light);
}
/* REMOVED: Duplicate .panel-controls definition - consolidated at line 262 */

/* REMOVED: Duplicate .panel-list definition - consolidated at line 354 */

/* Actions/footer (if exists) */
.props-odds .props-more-panel .panel-actions {
  grid-row: 5;
  padding: 12px 16px;
  border-top: 1px solid var(--props-border-light);
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Focus state for search input */
.props-odds .props-more-panel input[type="search"]:focus {
  outline: none !important;
  border-color: #0066cc !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

/* Placeholder text */
.props-odds .props-more-panel input[type="search"]::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* ============================================
   Mobile filters panel display fixes
   ============================================ */

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Animation for panel sliding up */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Ensure filters panel header is properly styled */
.props-odds .props-filters-panel .panel-header {
  padding: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--props-border-light) !important;
}

.props-odds .props-filters-panel .panel-close-button {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: var(--props-accent, #2563eb) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--props-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Force filters panel to be on top with maximum specificity (WordPress theme override) */
body .props-odds-engine .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel,
body .props-odds-engine .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel[hidden] {
  display: grid !important;
  visibility: visible !important;
  z-index: 999999 !important;
  position: fixed !important;
}

/* Ensure overlay is below panel but above everything else */
body .props-odds-engine .props-odds .props-market-filter .props-filters-filter.open::before {
  z-index: 999998 !important;
  position: fixed !important;
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Search icon styling */
/* Add search icon to player search input */
.props-odds .props-market-filter #props-player-filter,
.props-odds input[placeholder="Search Players"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5.5' stroke='%2364748b' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  padding-left: 40px !important;
}

/* Alternative using pseudo-element for search wrap */
.props-odds .props-market-filter .props-search-wrap {
  position: relative !important;
}

.props-odds .props-market-filter .props-search-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5.5' stroke='%2364748b' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: block !important;
}

/* Ensure input has proper padding when icon is present */
.props-odds .props-market-filter .props-search-wrap input {
  padding-left: 40px !important;
}

/* Style for the search button icon if it exists */
.props-odds .props-search-button svg,
.props-odds .props-search-button::before {
  width: 16px !important;
  height: 16px !important;
}

/* Focus state - darker icon */
.props-odds input[placeholder="Search Players"]:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5.5' stroke='%230f172a' stroke-width='1.5'/%3E%3Cpath d='M11 11L14 14' stroke='%230f172a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Ensure search input is styled properly */
.props-odds input#props-player-filter {
  height: var(--filter-height, 36px) !important;
  border: 1px solid var(--filter-border, #e2e8f0) !important;
  border-radius: var(--props-radius-pill) !important;
  background-color: #ffffff !important;
  font-size: 14px !important;
  color: var(--props-text) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.props-odds input#props-player-filter:focus {
  outline: none !important;
  border-color: var(--props-accent, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Placeholder text color */
.props-odds input#props-player-filter::placeholder {
  color: var(--props-text-muted) !important;
  opacity: 1 !important;
}

/* REMOVED: Mobile rules consolidated at line 2537+ */

/* Dropdown Display Control */
/* Ensure dropdowns are hidden by default */
.props-odds .props-more-panel:not(.open),
.props-odds .props-matchups-panel:not(.open) {
  display: none !important;
}

/* Show when parent has open class */
.props-odds .props-more-filter.open .props-more-panel,
.props-odds .props-matchups-filter.open .props-matchups-panel {
  display: grid !important;
}

/* Search box in dropdowns */
.props-odds .props-more-panel .search-box,
.props-odds .props-matchups-panel .search-box {
  padding: 8px 12px !important;
}

.props-odds .props-more-panel input[type="search"],
.props-odds .props-matchups-panel input[type="search"] {
  font-size: 14px !important;
}

/* Market filter container padding */
.props-market-filter {
  padding: 8px 15px 17px 0 !important;
  position: relative; /* For proper dropdown positioning */
}

/* Ensure the More panel is clickable and above other content */
.props-odds .props-more-filter.open .props-more-panel {
  pointer-events: auto !important;
}

/* Fix hidden select element causing horizontal scroll */
.props-odds select.sr-only,
.props-odds select.jcf-ignore,
.props-odds .sr-only.jcf-ignore {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  max-width: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ============================================
   CONSOLIDATED MOBILE RESPONSIVE STYLES
   (max-width: 768px)

   Consolidated from 10 separate media query blocks previously at lines:
   48, 364, 883, 909, 1328, 1936, 2122, 2166, 2294, 2392

   Organized by component for easier maintenance
   ============================================ */

@media (max-width: 768px) {
  /* ========================================
     VIEWPORT & CONTAINER FIXES
     Ensure parent containers respect mobile viewport
     ======================================== */

  /* Kill the 1350px width on parent containers */
  .props-odds.props-odds-scope,
  .props-odds .props-odds-container {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Ensure the filter region doesn't create unwanted scroll */
  .props-odds [role="region"][aria-label*="filters" i] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ========================================
     FILTER BAR LAYOUT & SPACING
     Mobile toolbar adjustments
     ======================================== */

  .props-odds .props-market-filter {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px; /* Reduce horizontal gaps to keep items on one line */
    align-items: stretch;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    text-align: center;
  }

  .props-odds .props-market-filter,
  .props-odds-scope .props-market-filter {
    text-align: center;
  }

  .props-odds .props-market-filter label,
  .props-odds-scope .props-market-filter label {
    display: block;
    margin-bottom: 8px;
  }

  /* ========================================
     SELECT/DROPDOWN CONTROLS
     Make selects narrower on mobile
     ======================================== */

  .props-odds .props-market-filter select,
  .props-odds-scope .props-market-filter select {
    width: 100% !important;
    max-width: 300px;
  }

  .props-odds-scope .props-select {
    width: 180px;
    flex: 0 0 180px;
  }

  .props-odds-scope #props-positions {
    width: 120px !important;
    flex: 0 0 120px !important;
  }

  /* ========================================
     FILTER BUTTON VISIBILITY
     Replace Positions + Sort with Filters button on mobile
     ======================================== */

  .props-odds .props-market-filter .props-positions-filter,
  .props-odds .props-market-filter .props-sort-filter {
    display: none !important;
  }

  .props-odds .props-market-filter .props-filters-filter {
    display: inline-block !important;
  }

  /* Make sure the filters button is visible on mobile */
  .props-odds .props-market-filter .props-filters-filter {
    display: block !important;
    position: relative;
    order: 1000;
  }

  /* Style the filters button */
  .props-odds .props-market-filter .props-filters-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--filter-bg, #ffffff) !important;
    color: var(--props-text) !important;
    border: 1px solid var(--filter-border, #e2e8f0) !important;
    padding: 0 12px !important;
    border-radius: var(--props-radius-pill) !important;
    font-weight: 700 !important;
    height: 36px !important;
    line-height: 1 !important;
    gap: 6px !important;
    cursor: pointer !important;
  }

  /* ========================================
     CHIP SCROLLING & LAYOUT
     Enable horizontal scrolling for chip rows
     ======================================== */

  /* Chips need viewport-relative width to scroll properly */
  .props-odds .props-market-filter .props-quick-chips {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    width: 100% !important;
    justify-content: flex-start;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    padding-bottom: 8px !important; /* Add some padding for the scrollbar */
  }

  /* Horizontally scrollable rows with snap */
  .props-odds .props-market-filter .props-category-chips,
  .props-odds .props-market-filter .props-quick-chips,
  .props-odds .props-market-filter .props-game-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 6px !important;
    padding-bottom: 11px;
    position: relative;
    width: 100% !important;
    justify-content: flex-start;
  }

  /* Mobile chip size overrides - inherit base pattern, only specify size differences */
  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-market-filter .props-quick-chips .chip {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px;
    font-size: 13px;
  }

  .props-odds .props-market-filter .props-game-chips .chip {
    height: 32px;
    font-size: 12px;
  }

  /* Ensure chips stay in a row and don't wrap */
  .props-odds .props-market-filter .props-quick-chips > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  .props-odds .props-market-filter .props-category-chips .chip,
  .props-odds .props-market-filter .props-quick-chips .chip,
  .props-odds .props-market-filter .props-game-chips .game-card,
  .props-odds .props-market-filter .props-more-filter {
    scroll-snap-align: start;
  }

  /* Style the scrollbar on mobile for better visibility */
  .props-odds .props-market-filter .props-quick-chips::-webkit-scrollbar {
    height: 4px !important;
  }

  .props-odds .props-market-filter .props-quick-chips::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 2px !important;
  }

  .props-odds .props-market-filter .props-quick-chips::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 2px !important;
  }

  /* Remove any sticky positioning for the All button on mobile - let it scroll normally */
  .props-odds .props-market-filter .props-quick-chips .props-more-filter {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ========================================
     SEARCH PANEL & CONTROLS
     Mobile search expansion and positioning
     ======================================== */

  .props-odds .props-market-filter .props-search-panel {
    position: relative;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    order: 1001 !important;
    flex-basis: 100% !important;
  }

  .props-odds .props-market-filter .props-search-panel[hidden] {
    display: none !important;
  }

  .props-odds .props-market-filter .props-search-panel input[type="search"] {
    display: block;
    width: 100% !important;
    min-width: 0;
  }

  /* Keep search icon aligned to the far right and avoid wrapping */
  .props-odds .props-market-filter .props-search-wrap {
    margin-left: auto !important;
    order: 1000 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 8px !important;
  }

  .props-odds .props-market-filter .props-search-button {
    width: 34px;
    min-width: 34px;
  }

  /* Search expansion when opened */
  .props-odds .props-market-filter .props-search-wrap.open {
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel {
    position: relative;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    display: block !important;
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 44px !important;
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel .props-search-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important; /* override generic button styling */
    color: var(--filter-fg, #677689) !important;
    box-shadow: none !important;
    transform: translateY(-50%);
  }

  .props-odds .props-market-filter .props-search-wrap.open .props-search-panel .props-search-cancel svg {
    pointer-events: none;
  }

  /* Mobile: ensure search input shows magnifier and spacing */
  .props-odds .props-market-filter .props-search-panel input#props-player-filter[type="search"] {
    padding-left: 40px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23677689" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
  }

  /* Hide iOS default clear (x) so our cancel button is the only control */
  .props-odds .props-market-filter .props-search-panel input[type="search"]::-webkit-search-cancel-button,
  .props-odds .props-market-filter input#props-player-filter[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
  }

  /* Hide the search icon once open and cover the row */
  .props-odds .props-market-filter .props-search-wrap.open .props-search-button {
    display: none !important;
  }

  /* While open, hide sibling controls so input occupies the whole row */
  .props-odds .props-market-filter.search-open > .filter-label,
  .props-odds .props-market-filter.search-open > #props-market,
  .props-odds .props-market-filter.search-open > .props-matchups-filter,
  .props-odds .props-market-filter.search-open > .props-filters-filter {
    display: none !important;
  }

  .props-odds .props-market-filter .props-positions-filter {
    order: 1000 !important;
    flex: 0 0 auto !important;
  }

  /* ========================================
     BOTTOM SHEET PANELS (Mobile Drawer Style)
     Matchups, More, and Filters panels
     ======================================== */

  /* Bottom sheet for More on mobile */
  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 85vh !important;
    min-width: 0 !important; /* CRITICAL: Override the 420px min-width */
    max-width: 100vw !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0 !important;
    background: #ffffff;
    box-shadow: 0 -18px 34px rgba(15,23,42,.22);
    border: 1px solid rgba(148,163,184,.18);
    border-top: 4px solid rgba(148,163,184,.15);
    z-index: 99999 !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateY(0);
  }

  .props-odds .props-more-panel,
  .props-odds-scope .props-more-panel,
  .props-odds .props-market-filter .props-more-filter.open .props-more-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .props-odds .props-more-panel .panel-list {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Mobile more panel chips - only override padding from base pattern */
  .props-odds .props-more-panel .chips .chip {
    padding: 0 16px;
  }

  /* Ensure search stays visible on mobile */
  .props-odds .props-more-panel .search-box {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
  }

  /* Force market list to be contained */
  .props-odds .props-more-panel .market-list,
  .props-odds-scope .props-more-panel .market-list,
  .props-odds .props-more-panel .panel-list .market-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Force market pills to not overflow */
  .props-odds .props-more-panel .market-pill,
  .props-odds-scope .props-more-panel .market-pill,
  .props-odds .props-more-panel .panel-list .market-list .market-pill {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 7px 14px !important;
    overflow: hidden !important;
  }

  /* Fix label to truncate instead of overflow */
  .props-odds .props-more-panel .market-pill .market-label,
  .props-odds-scope .props-more-panel .market-pill .market-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  /* Keep count visible and contained */
  .props-odds .props-more-panel .market-pill .market-count,
  .props-odds-scope .props-more-panel .market-pill .market-count,
  .props-odds .props-more-panel .market-pill .badge,
  .props-odds .props-more-panel .market-pill .count {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
  }

  /* Fix panel header */
  .props-odds .props-more-panel .panel-header,
  .props-odds-scope .props-more-panel .panel-header {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Matchups panel */
  .props-odds .props-market-filter .props-matchups-filter.open .props-matchups-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100% !important;
    max-height: 78vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    background: linear-gradient(180deg, var(--props-drawer-surface-strong, rgba(240,249,255,0.98)) 0%, var(--props-drawer-surface, #ffffff) 45%, #ffffff 100%);
    box-shadow: 0 -18px 38px rgba(15,23,42,.24);
    border: 1px solid rgba(148,163,184,.24);
    border-top: 3px solid rgba(0,158,255,.38);
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: var(--props-radius-pill);
    opacity: .35;
    background: var(--props-text-muted);
    margin: 0 auto 8px auto;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-list {
    padding: 10px 14px;
  }

  .props-odds .props-market-filter .props-matchups-panel .panel-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  /* Filters panel */
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 78vh !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    background: #ffffff !important;
    box-shadow: 0 -18px 34px rgba(15,23,42,.22);
    border: 1px solid rgba(148,163,184,.18);
    border-top: 4px solid rgba(148,163,184,.15);
  }

  /* Ensure the panel is visible when open - override hidden attribute */
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel,
  .props-odds .props-market-filter .props-filters-filter.open .props-filters-panel[hidden] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    max-height: 85vh !important;
    background: #ffffff !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 100002 !important; /* Much higher than overlay */
    animation: slideUp 0.3s ease-out !important;
    overflow: hidden !important;
  }

  .props-filters-filter.open .props-filters-panel {
    position: fixed !important;
    isolation: isolate !important;
    transform: translateZ(0) !important; /* Create new stacking context */
  }

  /* Ensure panel content is scrollable */
  .props-odds .props-filters-panel .panel-list {
    max-height: calc(85vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure panel actions are visible */
  .props-odds .props-filters-panel .panel-actions {
    display: grid !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid var(--props-border-light) !important;
  }

  /* ========================================
     PANEL BACKDROPS/OVERLAYS
     Dark overlay behind bottom sheet panels
     ======================================== */

  .props-odds .props-market-filter .props-matchups-filter.open::before,
  .props-odds .props-market-filter .props-more-filter.open::before,
  .props-odds .props-market-filter .props-filters-filter.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(2px);
    z-index: 19;
    pointer-events: none;
  }

  /* Ensure backdrop/overlay is visible but behind panel */
  .props-odds .props-market-filter .props-filters-filter.open::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 100000 !important;
    display: block !important;
  }

  /* ========================================
     LAYOUT & SPACING FIXES
     Table spacing and misc mobile adjustments
     ======================================== */

  /* Add spacing between table and Show All button on mobile */
  .props-odds .props-table-wrapper {
    margin-bottom: 20px !important;
  }

  .props-odds .props-comparison-container {
    padding-bottom: 15px !important;
  }

  /* Ensure Show All button has proper spacing */
  .props-odds .show-all-container,
  .props-odds .props-show-all,
  .props-odds button[class*="show-all"] {
    margin-top: 20px !important;
  }
}