/* Props Odds Engine Styles */
:root {
    /* Widths of frozen columns in comparison table */
    --frozen-player: 160px; /* .player-col (now leftmost) */
    --frozen-game: 87px;   /* .game-col (now second) */
    /* Total frozen width used to offset synced scrollbar (keep in px for JS) */
    --props-frozen-offset: 247px; /* Player + Game frozen (87 + 160) */
    /* Props.com light brand palette */
    --props-brand-blue: #2563eb;      /* primary accent */
    --props-brand-red: #ef4444;       /* secondary accent */
    --props-brand-orange: #f59e0b;    /* emphasis (lines, highlights) */
    --props-text-strong: #0f172a;     /* title */
    --props-text-default: #111827;    /* body */
    --props-text-muted: #6b7280;      /* secondary */
    --props-bg: #ffffff;              /* page/cards */
    --props-bg-muted: #f7f8fa;        /* subtle */
    --props-border: #e5e7eb;          /* dividers */
}

.props-odds,
.props-odds-scope,
.props-odds-scope .props-odds-container,
.props-odds-scope .props-comparison-outer,
.props-odds-scope .props-comparison-container,
.props-odds-scope table,
.props-odds-scope th,
.props-odds-scope td,
.props-odds-scope input,
.props-odds-scope button,
.props-odds-scope select,
.props-odds-scope .props-market-filter {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.props-odds-container {
    margin: 20px 0;
    overflow-x: auto;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 15px;
}

/* Market Filter Styles */
.props-odds .props-market-filter {
  --filter-height: 36px;
  /* light app bar background */
  padding: 8px 15px 17px 0px; /* match title/table padding */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: none; /* no outline */
  border-radius: 12px;
}

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

/* 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);
  padding: 0 12px;
  border: 1px solid #dbdbdb; /* subtle, match search input */
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(2,6,23,0.04);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.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);
}

/* 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-brand-blue);
    color: #fff;
    border: 1px solid var(--props-brand-blue);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 400;
}

/* Matchups dropdown (compact, app-like) */
.props-odds .props-market-filter .props-matchups-filter { position: relative; }
.props-odds .props-market-filter .props-matchups-button { 
  background: #fff; color: #0f172a; border: 1px solid #c9c9c9; 
  padding: 0 36px 0 12px; border-radius: 6px; font-weight: 400; 
  height: var(--filter-height);
  line-height: 1; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 1px rgba(2,6,23,0.04);
  position: relative;
}
.props-odds .props-market-filter .props-matchups-button::after {
  content: '';
  position: absolute; right: 10px; 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 .props-market-filter .props-matchups-button:hover { border-color: #cbd5e1; box-shadow: 0 1px 2px rgba(2,6,23,.06); }
.props-matchups-button .badge { 
    background: #009eff; color: #fff; border-radius: 999px; 
    padding: 2px 6px; font-size: 12px; font-weight: 700; 
}
.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: 360px; max-height: 480px; 
    display: grid; grid-template-rows: auto auto 1fr auto; 
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; 
    box-shadow: 0 12px 28px rgba(2,6,23,.16), 0 4px 10px rgba(2,6,23,.08);
    display: none;
}
.props-matchups-panel .panel-header { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #eef2f7; }
.props-matchups-panel .panel-title { font-weight: 700; color: #0f172a; }
.props-matchups-panel .panel-controls { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #eef2f7; font-size: 13px; color: #334155; }
.props-matchups-panel .panel-controls label { display: flex; align-items: center; gap: 6px; }
.props-matchups-panel .panel-list { overflow: auto; padding: 8px 12px; display: grid; grid-template-columns: 1fr; }
.props-matchups-panel .panel-list .matchup-item { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px; padding: 8px 8px; color: #0f172a; }
.props-matchups-panel .panel-list .matchup-item.completed { opacity: .6; }
.props-matchups-panel .panel-list .matchup-item:hover { background: #f8fafc; border-radius: 8px; }
.props-matchups-panel .panel-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #eef2f7;
  position: sticky;
  bottom: 0;
  background: #fff;
}
.props-matchups-panel .panel-actions button {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.props-matchups-panel .panel-actions .ghost {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.props-matchups-panel .panel-actions .ghost:hover { filter: brightness(0.98); }
.props-matchups-panel .panel-actions .primary {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(2,6,23,.06);
}
.props-matchups-panel .panel-actions .primary:hover { filter: brightness(0.96); }
.props-matchups-panel .panel-actions .primary:focus-visible,
.props-matchups-panel .panel-actions .ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* 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; }
.props-odds .props-market-filter .props-search-wrap::before {
    content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; opacity: .6;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23677389" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center/16px 16px;
    pointer-events: none;
}
.props-odds .props-market-filter .props-search-wrap input[type="search"] {
    padding-left: 36px; min-width: 320px;
}

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

/* 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;
}

/* Accessible visually-hidden utility for fallbacks */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Hide JCF clones of sr-only elements to prevent double menus */
.props-odds-scope .jcf-select-sr-only {
  display: none !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: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  box-sizing: border-box;
}

/* Override any theme button/link styles on dropdown toggle */
.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; 
}

.props-odds-scope .props-select-toggle {
  height: var(--filter-height);
  padding: 0 36px 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px; 
  font-weight: 500;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.2;
  box-shadow: 0 1px 1px rgba(2,6,23,0.04);
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  width: 100%;
  text-align: left;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.props-odds-scope .props-select-toggle #props-market-label { 
  color: #0f172a; 
  font-weight: 500;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: calc(100% - 26px); 
}

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

.props-odds-scope .props-select .chevron {
  position: absolute; 
  right: 10px; 
  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: #ffffff; 
  border: 1px solid #e5e7eb; 
  border-radius: 8px;
  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: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.props-odds-scope .props-select-option { 
  list-style: none; 
  border-radius: 4px; 
  padding: 8px 14px; 
  margin: 2px 4px;
  position: relative; 
  cursor: pointer; 
  color: #374151; 
  font-size: 14px;
  font-weight: 500;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.3;
  transition: all 0.15s ease;
}

.props-odds-scope .props-select-option:hover { 
  background: #f1f5f9; 
  color: #0f172a;
}

.props-odds-scope .props-select-option[aria-selected="true"] { 
  background: #f8fafc; 
  color: #0f172a;
  font-weight: 600;
}

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

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

/* Buttons within the matchups panel */
.props-matchups-panel .panel-actions .ghost {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.props-matchups-panel .panel-actions .ghost:hover { filter: brightness(0.98); }
.props-matchups-panel .panel-actions .primary {
  background: var(--props-brand-blue);
  border-color: var(--props-brand-blue);
}

/* 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) */
.props-odds-scope .props-matchups-panel {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(2,6,23,.12);
}

/* Table harmonization: use same radius and header weight */
.props-odds-scope .props-odds-table th,
.props-odds-scope .props-comparison-table thead th { font-weight: 700; }

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

/* Demo/Docs page styles moved from template */
.props-odds-demo .page-header { background: var(--props-bg); color: var(--props-text-strong); padding: 28px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--props-border); }
.props-odds-demo .page-header .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.props-odds-demo .page-header h1 { margin: 0 0 6px 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.props-odds-demo .page-header p { margin: 0; color: var(--props-text-muted); font-size: 14px; }
.props-odds-demo .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.props-odds-demo .market-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
.props-odds-demo .market-card { background: var(--props-bg); border: 1px solid var(--props-border); border-radius: 12px; padding: 16px; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.props-odds-demo .market-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.props-odds-demo .market-card .count { font-size: 24px; font-weight: 800; color: var(--props-brand-blue); display: block; }
.props-odds-demo .market-card .label { font-size: 12px; color: var(--props-text-muted); text-transform: uppercase; margin-top: 6px; letter-spacing: .4px; }
.props-odds-demo .quick-links { margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 8px; }
.props-odds-demo .quick-links a { margin-right: 15px; }

/* Utilities to replace inline attributes */
.props-odds .scrollbar-gutter { scrollbar-gutter: stable both-edges; }
.props-odds .scrollbar-shim { height: 1px; width: 0; }

/* Market Page Layout */
.props-market-page h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 24px;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

/* Title bar to align with filter bar */
.props-title-bar {
    padding: 16px 15px 18px 0px;  /* unify with filter/table padding */
}

.props-title-bar .props-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--props-text-strong);
}

.props-stats {
    background: #e8f4f8;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.props-stats strong {
    color: #007cba;
}

/* Enhanced Table Styles for Comparison */
.props-odds-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--props-bg);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.props-odds-table th {
    background: #0f172a;
    color: #ffffff;
    padding: 12px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    border-bottom: 1px solid #0b1220;
}


/* Sortable table headers */
.props-odds-table th.sortable,
.props-comparison-table th.sortable {
    position: relative;
    user-select: none;
    /* reserve space on the right so the absolutely-positioned icon doesn't overlap text */
    padding-right: 18px;
}

/* Triangle sort icon aligned to the right and centered vertically */
.props-odds-table th .sort-icon,
.props-comparison-table th .sort-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.75);
}
.props-odds-table th .sort-icon svg,
.props-comparison-table th .sort-icon svg {
    width: 16px;
    height: 16px;
    color: #b3b7c5 !important;
}

/* Active sort directions */
.props-odds-table th.sorted-asc .sort-icon,
.props-comparison-table th.sorted-asc .sort-icon,
.props-odds-table th.sorted-desc .sort-icon,
.props-comparison-table th.sorted-desc .sort-icon {
    color: #ffffff;
}

.props-odds-table th.sortable:hover,
.props-comparison-table th.sortable:hover { filter: brightness(1.1); }

.props-odds-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--props-border);
    font-size: 15px;
}

.props-odds-table tr:nth-child(even) {
    background-color: #fafbfc;
}
.props-odds-table tbody tr:nth-child(even) td {
    background-color: #fafbfc;
}

.props-odds-table tr:hover {
    background-color: var(--props-bg-muted);
}

/* hidden state used by matchups filter */
.matchup-filter-hidden { display: none; }
/* hidden state used by player search */
.props-odds .player-search-hidden { display: none; visibility: hidden; height: 0; overflow: hidden; opacity: 0; }

/* Column specific styles */
/* Player Name Styling */
.props-odds-table .player-name {
    font-weight: 600;
    color: #2c3e50;
    min-width: 160px;
}

/* Player cell with avatar */
.player-cell { display: inline-flex; align-items: center; gap: 8px; }
.player-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.player-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #e5e7eb; flex: 0 0 26px; }
.player-avatar.placeholder { background: #e5e7eb; }
.player-text { display: inline-block; }
/* stack name and details to the right of avatar */
.player-text-block { display: flex; flex-direction: column; }

/* Market Styling */
.props-odds-table .market {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    color: #007cba;
}

.line { text-align: center; font-weight: 600; color: #2c3e50; }

/* Stacked line + market */
.line-with-market {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.line-with-market .line-value {
    color: #2c3e50;
    font-weight: 700;
}
.line-with-market .market-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #838c9f;
    letter-spacing: .3px;
    line-height: 1.3;
}

.over-odds, .under-odds {
    text-align: center;
    font-weight: 700;
    font-family: monospace;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #ffffff; /* plain white/grey */
    border: 1px solid #e5e7eb;
}
/* sign-based coloring */
.odds-pos { color: #374151; }   /* match negative: dark gray for positive */
.odds-neg { color: #374151; }   /* dark gray for negative */

/* Sportsbook Styling */
.props-odds-table .sportsbook {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #7f8c8d;
}

.updated-at {
    color: var(--props-text-muted);
    font-size: 13px;
    text-align: center;
}

/* Footer */
.props-odds-footer {
    margin-top: 10px;
    text-align: center;
    color: #7f8c8d;
}

/* Error and empty states */
.props-odds-error {
    background: #e74c3c;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
}

.props-odds-empty {
    background: #f39c12;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .props-odds-table {
        font-size: 12px;
    }
    
    .props-odds-table th,
    .props-odds-table td {
        padding: 6px 4px;
    }
    
    .player-name {
        min-width: 80px;
    }

    .props-market-filter {
        text-align: center;
    }
    
    .props-market-filter label {
        display: block;
        margin-bottom: 8px;
    }
    
    .props-market-filter select {
        width: 100%;
        max-width: 300px;
    }
}

/* Loading state (optional for future enhancements) */
.props-odds-loading {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.props-odds-loading::after {
    content: "Loading odds data...";
} 

/* Enhanced Table Styles (UNABATED style) */
.props-odds-table.enhanced {
    font-size: 13px;
}

.props-odds-table.enhanced th {
    font-size: 11px;
    padding: 10px 6px;
}

.props-odds-table.enhanced td {
    padding: 8px 6px;
    vertical-align: top;
}

/* Player Info Column */
.player-info {
    min-width: 180px;
}

.player-info .player-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.player-info .player-details {
    font-size: 11px;
    color: #7f8c8d;
}

.player-info .position {
    background: #3498db;
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
    font-weight: 500;
}

.player-info .team {
    background: #95a5a6;
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
    font-weight: 500;
}

.player-info .jersey {
    color: #7f8c8d;
    font-weight: 500;
}

/* New: show matchup under player name (instead of team/jersey) */
.player-info .player-details .matchup {
    color: var(--props-text-muted);
    font-weight: 500;
}
.player-info .player-details .sep { color: #c0c5cb; margin: 0 2px; }

/* Game Info Column */
.game-info {
    min-width: 100px;
}

.game-info .matchup { /* legacy, not used for Game col now */
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.game-info .game-date {
    font-weight: 700;
    color: #405b76;
    margin-bottom: 2px;
}

.game-info .game-time {
    font-size: 11px;
    color: #e74c3c;
    font-weight: 500;
}

/* New compact game state label (Live / Final / Xm) */
.game-info .game-state {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.game-info .game-state .state-label { color: var(--props-brand-red); display: flex; align-items: center; gap: 6px; }
.game-info .game-state.status-final .state-label { color: #6b7280; }
.game-info .game-state .live-detail { color: #374151; font-weight: 600; }
.game-info .game-state.status-final {
    color: #6b7280; /* muted gray */
    font-weight: 600;
}
.game-info .game-state.status-countdown {
    color: var(--props-brand-red);
}
.game-info .game-state.status-live .state-label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--props-brand-red);
    
}
@keyframes livePulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    50%  { transform: scale(1.4); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 0.9; }
}

/* Subtle calendar icon before game dates */
.game-info .game-date {
    display: flex;
    align-items: center;
    gap: 3px;
}
.game-info .game-date::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: 0.85;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round'><path d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z'/></svg>") no-repeat center/14px 14px;
}

/* Enhanced Market Column */
.props-odds-table.enhanced .market {
    font-size: 11px;
    max-width: 120px;
    word-wrap: break-word;
}

/* Enhanced Odds Styling */
.props-odds-table.enhanced .over-odds,
.props-odds-table.enhanced .under-odds {
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.props-odds-table.enhanced .over-odds.odds-pos { color: #374151; }
.props-odds-table.enhanced .under-odds.odds-neg { color: #374151; }

/* Game Row Grouping */
.props-odds-table.enhanced tr[data-game-id] {
    border-bottom: 1px solid #ecf0f1;
}

.props-odds-table.enhanced tr[data-game-id]:hover {
    background: #f8f9fa;
}

/* Enhanced Container */
.props-odds-container.enhanced {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
    .props-odds-table.enhanced {
        font-size: 11px;
    }
    
    .props-odds-table.enhanced th,
    .props-odds-table.enhanced td {
        padding: 4px 3px;
    }
    
    .player-info {
        min-width: 100px;
    }
    
    .game-info {
        min-width: 80px;
    }
    
    .player-info .player-details {
        font-size: 10px;
    }
    
    .game-info .game-time {
        font-size: 10px;
    }
} 

/* Multi-Sportsbook Comparison Table (UNABATED Style) */
.props-comparison-container {
    background: var(--props-bg);
    overflow-x: auto;
    margin-bottom: 20px;
    margin-left: 0; /* align with filter/title left edge */
}

.props-comparison-table {
    width: max-content; /* expand to fit column widths */
    min-width: 100%;   /* never smaller than container */
    border-collapse: separate; /* prevent collapsed borders from bleeding into sticky header */
    border-spacing: 0; /* but keep seams tight */
    font-size: 13px;
    table-layout: auto; /* let column min/max widths control layout */
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

/* Hard reset to avoid theme "stacked table" responsiveness breaking layout */
.props-odds .props-comparison-table thead {
    display: table-header-group;
}
.props-odds .props-comparison-table tbody {
    display: table-row-group;
}
.props-odds .props-comparison-table tr {
    display: table-row;
}
.props-odds .props-comparison-table th,
.props-odds .props-comparison-table td {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: normal; /* prevent unexpected wrapping which desyncs columns */
}
/* Allow market text to wrap so long titles don't blow up width */
.props-comparison-table .market {
    white-space: normal;
}

.props-comparison-table thead th {
    background: #0f172a;
    color: #ffffff;
    padding: 14px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-right: 1px solid #1f2937;
    border-bottom: 1px solid #1f2937;
    position: sticky;
    top: 0;
    z-index: 10; /* base header layer */
    /* Prefer wrapping only at natural word boundaries in header */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
}
.props-odds .props-comparison-container .props-comparison-table thead th {
    background: #0f172a;
    background-image: none;
    color: #ffffff;
    border-right: 1px solid #4e4e4e;
    border-bottom: 1px solid #4e4e4e;
    line-height: 1.25;
}
.props-odds .props-comparison-table thead th a,
.props-odds .props-comparison-table thead th span,
.props-odds .props-comparison-table thead th strong { color: inherit; }

/* Ensure room for the right-aligned sort icon in sticky headers */
.props-comparison-table thead th.sortable {
    padding-right: 22px;
}

/* Left-align icon-only Game/Player headers */
.props-odds .props-comparison-table thead th.game-col,
.props-odds .props-comparison-table thead th.player-col {
    text-align: left;
}

/* Icon-only headers */
.props-odds .props-comparison-table thead th .header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #e5e7eb;
    margin-right: 6px;
}
.props-odds .props-comparison-table thead th .header-icon svg {
    width: 16px;
    height: 16px;
}

.props-comparison-table thead th:last-child { border-right: none; }

/* Prevent the top edge of body cells from peeking above sticky header */
.props-comparison-table tbody tr:first-child td {
    border-top: 1px solid #1f2937; /* matches header bottom border */
}

.props-odds .props-comparison-table tbody td {
    padding: 10px 11px 10px 11px;
    border-bottom: 1px solid var(--props-border);
    border-right: 1px solid var(--props-border);
    vertical-align: middle;
    background: var(--props-bg);
    background-clip: padding-box; /* avoid border bleed under sticky header */
}

.props-comparison-table tbody td:last-child {
    border-right: none;
}

/* Consistent row height */
.props-comparison-table tbody tr {
    min-height: 44px;
}

/* Fixed columns */
.player-col, .props-comparison-table .player-info {
    min-width: 160px;
    max-width: 160px;
    position: sticky;
    left: var(--frozen-game);
    background: var(--props-bg);
    z-index: 101; /* ensure body sticky stays above other headers */
    border-right: 1px solid var(--props-border);
    box-sizing: border-box; /* PREVENTS SCROLL JUMP */
}

/* Ensure sticky first column renders above others on horizontal scroll */
.props-odds .props-comparison-table .player-info { z-index: 300; }

.game-col, .props-comparison-table .game-info {
    min-width: var(--frozen-game);
    max-width: var(--frozen-game);
    position: sticky; /* frozen */
    left: 0;
    background: var(--props-bg);
    z-index: 100;
    border-right: 1px solid var(--props-border);
    box-sizing: border-box; /* PREVENTS SCROLL JUMP */
}

/* Ensure frozen header columns have higher z-index than scrollable header columns */
.props-comparison-table thead th.game-col {
    z-index: 302 !important; /* Higher than base header z-index */
    background: #0f172a !important; /* Ensure background covers scrolling content */
}

.props-comparison-table thead th.player-col {
    z-index: 301 !important; /* Higher than game column header */
    background: #0f172a !important; /* Ensure background covers scrolling content */
}

/* Ensure scrollable header columns go under frozen columns */
.props-comparison-table thead th.sportsbook-col {
    z-index: 10; /* Lower than frozen columns */
}

/* market column removed in favor of stacked label under line */

.line-col, .props-comparison-table .line {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    font-weight: 600;
    color: #e67e22;
}

/* Sportsbook columns */
.sportsbook-col, .props-comparison-table .odds-cell {
    min-width: 90px;
    max-width: 90px;
    width: 90px;      /* fixed width so total table width overflows without stretching frozen cols */
    text-align: center;
    padding: 8px 6px;
}

/* Sportsbook header styling */
.sportsbook-col {
    font-size: 10px;
    font-weight: 700;
    color: var(--props-text-muted);
    /* Allow sportsbook names to wrap by word, not mid-word */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* Logo inside sportsbook header */
.sportsbook-col .sportsbook-logo {
    height: 16px;
    max-width: 80px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Make header logos clickable without layout shift */
.props-odds .sportsbook-col a {
    display: inline-block;
    line-height: 0;
}

/* Keep "Line" column header from wrapping */
.props-comparison-table thead th.line-col { white-space: nowrap; }
/* Hide Line column entirely (header and body) */
.props-comparison-table thead th.line-col,
.props-comparison-table td.line {
    display: none;
}

/* Odds pair styling */
.odds-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Anchor wrapper for odds pills */
.props-odds .odds-link {
    text-decoration: none;
    color: inherit;
}
.props-odds .odds-link:hover .over-odds,
.props-odds .odds-link:hover .under-odds {
    filter: brightness(1.05);
}

/* Prevent table layout from reflowing frozen columns when sportsbooks count changes */
.props-comparison-table{
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.props-comparison-table thead th.game-col{width: var(--frozen-game);} 
.props-comparison-table thead th.player-col{width: 160px;}
.props-comparison-table thead th.line-col{width: 80px;}

/* Single-pill state centers the lone pill vertically in the cell */
.odds-pair.single {
    justify-content: center;
    min-height: 48px; /* ensures vertical centering visually consistent */
}

.props-odds { --pill-pad-y: 2px; --pill-pad-x: 8px; --pill-radius: 3px; }

.odds-pair .over-odds,
.odds-pair .under-odds {
    padding: 0; /* no extra space reserved; avoid width changes */
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    text-align: center;
    font-family: monospace;
    background: transparent;
    border: none;
    white-space: nowrap;
    position: relative; /* contain overlay pseudo-elements to pill bounds */
    display: inline-block;
}

/* Tiny filled green check icon overlaid inside the pill (no layout shift) */
.best-check { display: none; }

/* Display multiple lines per player row */
.line-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.line-chip {
    padding: 2px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    background: #ffffff;
}

/* Hide pill border/background when value is missing, but preserve layout */
.odds-pair .odds-empty {
    border-color: transparent;
    background: transparent;
    color: #95a5a6; /* faint placeholder dash */
}

/* Subtle highlight for the best available price in a row */
.odds-pair .over-odds.best-odds,
.odds-pair .under-odds.best-odds {
    color: inherit; /* keep text color */
    border-radius: var(--pill-radius);
    padding: var(--pill-pad-y) var(--pill-pad-x) !important;
    background-color: #c5f3e4;
}

.no-odds {
    color: #95a5a6;
    font-size: 11px;
    text-align: center;
}

/* Light gray label for line (e.g., o3.5 / u3.5) */
.line-prefix {
    color: #828a99; /* slightly muted gray; not too light */
    font-weight: 600;
    margin-right: 4px;
}

/* Player info in comparison table */
.props-comparison-table .player-info .player-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
    font-size: 13px;
}

.props-comparison-table .player-info .player-details {
    font-size: 11px;
}

.props-comparison-table .player-details .position {
    background: #009eff;
    color: white;
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 2px;
    font-size: 10px;
}

.props-comparison-table .player-details .team {
    background: #95a5a6;
    color: white;
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 2px;
    font-size: 10px;
}

.props-comparison-table .player-details .jersey {
    color: #7f8c8d;
    font-size: 10px;
}

/* New: matchup shown within player details in comparison table */
.props-comparison-table .player-details .matchup {
    color: var(--props-text-muted);
    font-size: 10px;
    font-weight: 600;
}
.props-comparison-table .player-details .sep { color: #c0c5cb; margin: 0 2px; }

/* Game info in comparison table */
.props-comparison-table .game-info .matchup { /* legacy */
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
    font-size: 12px;
}

.props-comparison-table .game-info .game-date {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 2px;
    font-size: 12px;
}

.props-comparison-table .game-info .game-time {
    font-size: 11px;
    color: var(--props-brand-red);
    font-weight: 600;
}

/* Comparison table game state */
.props-comparison-table .game-info .game-state {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.props-comparison-table .game-info .game-state .state-label { color: var(--props-brand-red); display: flex; align-items: center; gap: 6px; }
.props-comparison-table .game-info .game-state.status-final .state-label { color: #6b7280; }
.props-comparison-table .game-info .game-state .live-detail { color: #374151; font-weight: 600; }
.props-comparison-table .game-info .game-state.status-final { color: #6b7280; font-weight: 700; }
.props-comparison-table .game-info .game-state.status-countdown { color: var(--props-brand-red); }
.props-comparison-table .game-info .game-state.status-live .state-label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--props-brand-red);
}

/* Row hover effect */
.props-comparison-table tbody tr:hover {
    background: var(--props-bg-muted);
}

.props-comparison-table tbody tr:hover td { background: var(--props-bg-muted); }
.props-comparison-table tbody tr:hover .player-info { background: var(--props-bg-muted); }
.props-comparison-table tbody tr:hover .game-info { background: var(--props-bg-muted); }

/* Alternating row colors */
.props-comparison-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.props-comparison-table tbody tr:nth-child(even) .player-info {
    background: #fafbfc;
}
.props-comparison-table tbody tr:nth-child(even) .game-info { background: #fafbfc; }
/* ensure stripe applies to all cells */
.props-comparison-table tbody tr:nth-child(even) td { background: #fafbfc; }

/* Comparison footer */
.props-comparison-footer {
    padding: 10px 15px;
    background: #f8f9fa;
    border-top: 1px solid #ecf0f1;
    font-size: 11px;
    color: #7f8c8d;
    text-align: center;
}

/* Responsive design for comparison table */
@media (max-width: 768px) {
    /* Only player column is frozen on mobile */
    :root {
        --frozen-game: 0px; /* Game column no longer frozen */
        --frozen-player: 140px; /* Slightly narrower player column */
        --props-frozen-offset: 140px; /* Only player column is frozen */
    }

    .props-comparison-container {
        margin: 0 -15px;
        border-radius: 0;
    }
    
    .props-comparison-table {
        font-size: 10px;
    }
    
    .props-comparison-table thead th {
        padding: 8px 4px;
        font-size: 9px;
    }
    
    .props-comparison-table tbody td {
        padding: 6px 3px;
    }
    
    /* Game/Date column becomes scrollable like other columns */
    .game-col, .props-comparison-table .game-info {
        position: static !important; /* Remove sticky positioning */
        min-width: 70px;
        max-width: 70px;
        width: 70px;
        background: transparent; /* No special background needed for scrolling columns */
        z-index: auto;
        border-right: 1px solid var(--props-border);
        left: auto !important; /* Ensure not sticky */
    }
    .props-comparison-table thead th.game-col { 
        position: static !important; /* Remove sticky positioning */
        width: 70px; 
        background: #0f172a; /* Restore normal header background */
        z-index: auto;
        left: auto !important; /* Ensure not sticky */
    }
    
    /* Player column remains frozen and moves to leftmost position */
    .player-col, .props-comparison-table .player-info {
        min-width: 140px;
        max-width: 140px;
        position: sticky !important;
        left: 0 !important; /* Player is now the leftmost frozen column */
        z-index: 301 !important; /* Higher than game column */
        background: var(--props-bg) !important;
    }
    .props-comparison-table thead th.player-col { 
        width: 140px; 
        position: sticky !important;
        left: 0 !important; /* Override desktop positioning */
        z-index: 302 !important;
        background: #0f172a !important;
    }
    
    /* Keep normal table layout on mobile */
    .props-comparison-table {
        display: table;
        overflow-x: auto;
        width: max-content;
        min-width: 100%;
    }
    
    /* After JavaScript reorders columns on mobile:
       Column 1 = Player (sticky)
       Column 2 = Date (scrollable)
       Column 3+ = Sportsbooks (scrollable) */
    
    /* Ensure proper widths for reordered columns */
    .props-comparison-table .player-col,
    .props-comparison-table .player-info {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
    
    .props-comparison-table .game-col,
    .props-comparison-table .game-info {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }
    
    .props-comparison-table thead th.line-col { width: 64px; }
    
    .sportsbook-col, .props-comparison-table .odds-cell {
        min-width: 100px;
        max-width: 100px;
        width: 100px;
    }
    .props-comparison-table .line,
    .props-comparison-table .line-col {
        min-width: 64px;
        max-width: 64px;
    }
    
    /* Mobile scrollbar styling handled by native scrollbar */
    
    .odds-pair .over-odds,
    .odds-pair .under-odds {
        font-size: 10px;
        padding: 1px 3px;
        min-width: 35px;
    }

    /* Reduce avatar footprint on mobile */
    .player-avatar { width: 22px; height: 22px; }
    .props-comparison-table .player-info .player-name { font-size: 12px; }
    .props-comparison-table .player-info .player-details .position,
    .props-comparison-table .player-info .player-details .jersey { display: none; }

    /* Hide fixed bottom scrollbar on mobile; native scroll is fine */
    .props-comparison-scrollbar-bottom { display: none !important; }

    /* Make filters fit small screens better */
    .props-odds .props-market-filter .props-search-wrap input[type="search"] { min-width: 0; width: 100%; }
    .props-select { width: 100%; max-width: 100%; }
    
    /* Ensure row striping works with flexbox layout */
    .props-comparison-table tbody tr:nth-child(even) td {
        background: #fafbfc;
    }
    
    /* Ensure hover states work with flexbox layout */
    .props-comparison-table tbody tr:hover td {
        background: var(--props-bg-muted);
    }
    
    /* Alternative simple approach: hide date column and show after player name */
    @media (max-width: 768px) {
        /* Add date info to player cell and hide original date column */
        .props-comparison-table .player-info::after {
            content: attr(data-game-date);
            display: block;
            font-size: 11px;
            color: #6b7280;
            margin-top: 2px;
        }
    }
} 

/* Hide container scrollbar - we'll create custom one */
.props-comparison-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* keep programmatic scrolling enabled */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Hide native horizontal scrollbar; we provide a synced fixed one */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    /* remove any visual left gutter */
    background-clip: padding-box;
}
.props-comparison-container::-webkit-scrollbar {
    height: 0 !important; /* Chrome/Safari */
}

/* Ensure table is wider than the viewport so scrolling engages */
.props-comparison-table {
    min-width: 1400px; /* increase if you have many sportsbook columns */
}

/* Keep first column above scrolled content in all themes */
.props-comparison-table .player-info {
    position: sticky;
    left: var(--frozen-game);
    z-index: 300; /* ensure above other headers and cells */
    background: var(--props-bg);
}
.props-comparison-table thead th.player-col {
    position: sticky;
    left: var(--frozen-game);
    z-index: 303 !important; /* Higher than any other header to prevent overlap */
    background: #0f172a !important;
}

/* Game column is the second frozen column (after Player) */
.props-odds .props-comparison-table .game-info {
    position: sticky; /* frozen */
    left: 0;
    z-index: 299;
    background: var(--props-bg);
}
.props-odds .props-comparison-table thead th.game-col {
    position: sticky; /* frozen header */
    left: 0;
    z-index: 304 !important; /* Highest z-index for leftmost frozen header */
    background: #0f172a !important;
}

/* Fixed, always-visible synced bottom scrollbar */
.props-comparison-scrollbar-bottom {
    position: fixed;
    bottom: 0;
    left: 0; /* dynamically positioned via JS */
    width: 0; /* dynamically sized via JS */
    height: 14px;
    z-index: 999; /* above content, below modals */
    background: linear-gradient(180deg, rgba(248,249,251,0.9), rgba(237,240,244,0.9));
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 6px rgba(15,23,42,0.06);
    overflow-x: auto;
    overflow-y: hidden;
}
.props-comparison-scrollbar-bottom::-webkit-scrollbar {
    height: 10px;
}
.props-comparison-scrollbar-bottom::-webkit-scrollbar-thumb {
    background: #a8b3c5;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.65);
}
.props-comparison-scrollbar-bottom::-webkit-scrollbar-track {
    background: transparent;
}
.props-comparison-scrollbar-bottom .scrollbar-content {
    height: 14px;
    width: 0; /* dynamically sized equal to scrollable content width */
}