/* =====================================================================
   PROP CARDS — BASE (migrated from ensureCompactCardStyles)
   ===================================================================== */

/* =====================================================================
   CONTAINER + LEGACY PILL RESETS (suggested list only)
   ===================================================================== */
#suggested-props-container{
  display:block !important;
  grid-auto-rows:auto !important;
  grid-template-rows:none !important;
  align-content:stretch !important;
  align-items:stretch !important;
}
#suggested-props-container > .suggested-prop{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  grid-row:auto !important;
  align-self:stretch !important;
}
#suggested-props-container .suggested-prop.prop-card .pc-row{ display:grid !important; }
#suggested-props-container .suggested-prop.prop-card .odds-line{ display:inline !important; }
#suggested-props-container .suggested-prop.prop-card .add-icon,
#suggested-props-container .suggested-prop.prop-card .remove-icon{
  display:none !important;
}

/* =====================================================================
   SAME LAYOUT NORMALIZATION FOR THE PARLAY LIST
   (let expanded cards grow and push siblings normally)
   ===================================================================== */
#your-parlay-container{
  display:block !important;
  grid-auto-rows:auto !important;
  grid-template-rows:none !important;
  align-content:stretch !important;
  align-items:stretch !important;
  overflow:visible !important;  /* belt-and-suspenders vs theme CSS */
}
#your-parlay-container > .suggested-prop{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  grid-row:auto !important;
  align-self:stretch !important;
}
#your-parlay-container .suggested-prop.prop-card .pc-row{ display:grid !important; }
#your-parlay-container .suggested-prop.prop-card .odds-line{ display:inline !important; }
/* Hide legacy remove icon for prop-cards inside parlay */
#your-parlay-container .suggested-prop.prop-card .remove-icon{ display:none !important; }

/* =====================================================================
   COMPACT NFL PROP CARD – match parlay-footer surface + consistent CTA column
   ===================================================================== */
.prop-card{
  /* surface to match footer */
  --glass-bg-1: rgba(255,255,255,.06);
  --glass-bg-2: rgba(255,255,255,.03);
  --glass-border: var(--line, rgba(255,255,255,.08));
  --glass-inner: rgba(255,255,255,.12);

  /* tints used by inner chips/pills */
  --card-blue-tint: rgba(0,173,132,.10);
  --ring: rgba(0,173,132,.60);
  --good:#3ce681;
  --bad:#ff5e6b;
  --good-rgb: 60,230,129;
  --bad-rgb:  255,94,107;

  /* layout tokens (KEY: keep CTA + gap in sync) */
  --cta-col:44px;          /* width of the left add/remove column */
  --cta-gap:28px;          /* space between CTA column and title column */

  --gap-title-edge: 12px;
  --gap-edge-expand: 16px;
  --gap-chips-ou: 14px;
  --gap-alt-ou: 14px;

  position:relative; border-radius:14px; padding:12px 14px; margin:10px 0;
  color:#e8f4ff; overflow:hidden;
  background: linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--inset, 0 1px 0 rgba(255,255,255,.05) inset),
              var(--shadow, 0 10px 30px rgba(0,0,0,.35));
  backdrop-filter: blur(var(--blur, 12px));
  -webkit-backdrop-filter: blur(var(--blur, 12px));
}

/* kill spotlight overlays so cards read like footer */
.prop-card::before,
.prop-card::after{
  background:none !important;
  opacity:0 !important;
  content:'' !important;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .prop-card{ backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }
}

/* content above overlay plane */
.prop-card > *{ position:relative; z-index:2 }

/* Small game tag */
.prop-card .game{ text-align:center; color:#d9fff5; font-size:11px; letter-spacing:.4px; margin-bottom:4px }

/* Core row (two-row grid; left CTA spans both rows) */
.prop-card .pc-row{
  display:grid;
  grid-template-columns: var(--cta-col) 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ctas title stepper"
    "ctas title stepper";
  column-gap: var(--cta-gap);
  row-gap: 4px;
  align-items:center;
}
/* map children */
.prop-card .pc-row > :nth-child(1){ grid-area: title; }   /* title wrapper */
.prop-card .pc-row > :nth-child(2){ grid-area: stepper; } /* +/- stepper */
.prop-card .pc-row > :nth-child(3){ grid-area: ctas; }    /* add/remove */

/* Title block */
.prop-card .title{ min-width:0 }
.prop-card .player-name{
  display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:16px; line-height:1.2; font-weight:800;
}

/* Prop-card specific styling to avoid collisions with schedule CSS */
.prop-card .player-name .pc-team,
.prop-card .player-name .pc-pos{
  font-weight:200;
  opacity:.9;
  font-size:inherit;
  text-transform:none;
  letter-spacing:normal;
}
.prop-card .player-name .pc-name{ font-weight:800; }
.prop-card .player-name .pc-dot{ opacity:.65; }

/* Right column wrapper: bettype pill above stepper */
.prop-card .pc-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

/* size + balance like a control chip */
.prop-card .pc-controls .bettype-pill{
  align-self:flex-end;
  height:36px; line-height:36px;
  padding:0 14px;
  margin:0;                      /* cancel the old inline margin */
  font-size:14px; font-weight:800;
  border-radius:18px;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--glass-border);
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
  transition: filter .12s ease, box-shadow .12s ease;
}
.prop-card .pc-controls .bettype-pill:hover,
.prop-card .pc-controls .bettype-pill:focus-visible{
  filter:brightness(1.06);
}

/* caret indicator (keep if you already added earlier) */
/* .prop-card .bettype-pill::after{
  content:'▾';
  margin-left:6px;
  font-weight:900;
  opacity:.8;
  font-size:.9em;
} */

/* comment/remove the old ::after rule, then use this */
.prop-card .bettype-pill::after{
  content:'';
  margin-left:8px;
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:9px solid currentColor; /* uses the pill text color */
}

@media (max-width:1000px){
  .prop-card .pc-controls .bettype-pill{
    margin-top: -40px;
    margin-bottom: 4px;
    height:36px; 
    padding: 12px 24px 12px 28px;
    font-size:24px;
    border-radius:24px;
  }
 .prop-card .stepper button{
    width:76px !important; 
    height:76px !important; 
    font-size:32px !important; 
 }
 .prop-card .stepper{
    gap:16px !important;
  }
  .prop-card .bettype-pill::after{
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    border-top:11px solid currentColor;
  }
}

.prop-card .stat-odds{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:14px; line-height:1.2;
}
.prop-card .statline-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; margin:0;       /* no left shift */
  border-radius:999px; font-weight:800;
}
/* inside the statline pill */
.prop-card .statline-pill .bt-lbl{ font-weight:800; }
.prop-card .statline-pill .bt-line .line-val{ font-weight:800; }

/* Odds pill */
.prop-card .odds-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px; font-weight:700; opacity:.8;
  border:1px solid var(--glass-border);
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
}
.prop-card .odds-pill .odds-line{ margin:0; }

.prop-card .stat-odds b{ font-weight:800 }
.prop-card .odds-line, .prop-card .odds{ color:#e2fff6; font-weight:800; display:inline; margin-left:6px }

/* Edge pill (hidden until expanded) */
.prop-card .edge{
  display:none;
  justify-self:start; margin-top: var(--gap-title-edge); font-size:11px; height:26px; align-items:center; gap:6px;
  padding:0 10px; border-radius:999px; border:1px solid var(--glass-border);
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,0.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  color:#f0fff9; font-weight:800; box-shadow: inset 0 0 0 1px var(--glass-inner); white-space:nowrap;
}
.prop-card.expanded .edge{ display:inline-flex }
.prop-card .edge.good{ color:var(--good); box-shadow: inset 0 0 0 1px rgba(60,230,129,.35) }
.prop-card .edge.bad{  color:var(--bad);  box-shadow: inset 0 0 0 1px rgba(255,94,107,.35) }
.prop-card .edge .lbl{ display:inline; margin-right:6px; }

/* Bet-type pill inside the stat line */
.prop-card .bettype-pill{
  all:unset;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  margin: 0 8px 0 0;
  border-radius:999px; font-weight:800; cursor:pointer;
  border:1px solid var(--glass-border);
  background:
      linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,.04) 60%),
      linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
}
.prop-card .bettype-pill.disabled{ opacity:.55; cursor:default; pointer-events:none }

/* hidden by default */
.prop-card .bettype-dropdown{
  position:absolute;
  inset:0;
  z-index:1000;
  display:none;                 /* default hidden */
  padding:16px;
  border-radius:inherit;
  background-color: #051424;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 0 0 1px var(--glass-inner);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  overflow: visible;            /* no inner scrollbars; let content flow outward */
  overscroll-behavior: none;    /* prevent scroll chaining on mobile */
}

/* When open, overlay itself is the layout container */
.prop-card.bt-open .bettype-dropdown{
  display:grid;
  grid-auto-flow: row;
  align-content: start;   /* start at top inside the overlay */
  justify-items: center;  /* center children horizontally */
  gap:16px;
  padding-top:24px;       /* give the title breathing room */
}

/* ensure the card doesn't clip its absolute child */
.prop-card.bt-open{ overflow: visible; }

/* Header */
.prop-card .bettype-dropdown .bt-head{
  position:static;
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:750px;
  margin-bottom:14px;
}
.prop-card .bettype-dropdown .bt-title{
  font-weight:900; letter-spacing:.3px; opacity:.95; font-size:15px; text-align:center;
}

/* Close button anchored to the overlay's corner */
.prop-card .bettype-dropdown .bt-close{
  all: unset;                 /* reset first */
  position: absolute;         /* then set what we want */
  top: 12px;
  right: 12px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,.05) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
  z-index: 10;
}

/* Options: single horizontal row, centered */
.prop-card .bettype-dropdown .bt-list{
  display:flex;
  flex-wrap: nowrap;        /* <-- single row, never wraps */
  justify-content: center;  /* center the whole row */
  align-items: stretch;
  gap:16px;
  width:100%;
  max-width:800px;          /* keep the row from going edge-to-edge */
  margin:0;                 /* ensure no extra gaps from UA */
  padding:0;
}

/* Each option tile keeps your current look; fix a reasonable width */
.prop-card .bettype-dropdown .bt-opt{
  line-height:1.15;
  all:unset;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 16px; border-radius:12px; cursor:pointer; font-weight:800; font-size:14px; text-align:center;
  border:1px solid var(--glass-border);
  background-image: linear-gradient(180deg, rgba(82,218,203,.7), rgba(27,177,146,.7));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
  flex: 1 1 140px;   /* basis ~140px, can grow/shrink */
  min-width: 120px;  /* guarantees 6 tiles fit in 800px with 16px gaps */
  max-width: 160px;  /* optional: keeps tiles from getting too wide */
  box-sizing: border-box;
}

.prop-card .bettype-dropdown .bt-opt:hover,
.prop-card .bettype-dropdown .bt-opt:focus-visible{
  background: linear-gradient(135deg, rgba(0,173,132,.22), rgba(255,255,255,.07));
}
.prop-card .bettype-dropdown .bt-opt .meta{ opacity:.9; font-weight:700 }
.prop-card .bettype-dropdown .bt-opt[aria-selected="true"]{
  cursor:default; opacity:.65;
  box-shadow: inset 0 0 0 1px var(--ring);
}

@media (max-width:1000px){
    .prop-card .bettype-dropdown .bt-title{
        font-size:28px;
        margin-top: -10px; 
        margin-bottom: 6px;
    }
    .prop-card .bettype-dropdown .bt-opt{
        padding: 10px 16px 6px 16px; 
        font-size:22px; 
        flex: 1 1 180px;   /* basis ~140px, can grow/shrink */
        min-width: 160px;  /* guarantees 6 tiles fit in 800px with 16px gaps */
        max-width: 200px;  /* optional: keeps tiles from getting too wide */
        box-sizing: border-box;
    }
    .prop-card .bettype-dropdown .bt-close{
        top: 12px;
        right: 12px;
        font-size: 32px;
        padding: 10px 22px;
    }
    .prop-card .statline-pill, 
    .prop-card .odds-pill{
        padding: 14px 20px 14px 20px;
        font-size: 24px;
    }

}

/* two loose circular buttons */
.prop-card .stepper{
  display:flex;
  gap:10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.prop-card .stepper button{
  all:unset;
  width:36px; height:36px;
  display:grid; place-items:center;
  cursor:pointer; font-weight:800; font-size:18px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
  transition: filter .12s ease, transform .06s ease;
}
.prop-card .stepper button:hover,
.prop-card .stepper button:focus-visible{ filter:brightness(1.06); }
.prop-card .stepper button:active{ transform: translateY(1px); }
.prop-card .stepper .minus{ color:#f9a3ac; }
.prop-card .stepper .plus{  color:#aefbe4;  }

.prop-card .stepper .disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none; transform:none;
}


/* CTA column (add/remove) — FIXED SPACING */
.prop-card .parlay-ctas{
  grid-area: ctas;
  width: var(--cta-col);
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin:0; padding:0;
}

/* ===== Always-tinted add/remove buttons ===== */
.prop-card .add{
  all:unset;
  display:grid; place-items:center;
  width:100%;
  height: var(--cta-col);
  border-radius:999px;
  font-weight:900; font-size:18px;
  cursor:pointer;

  /* default tint (overridden by variants below) */
  --cta-rgb: var(--good-rgb);

  color: rgb(var(--cta-rgb));
  border:1px solid rgba(var(--cta-rgb), .30);
  box-shadow: inset 0 0 0 1px rgba(var(--cta-rgb), .45);
  background:
    linear-gradient(135deg, rgba(var(--cta-rgb), .18), rgba(255,255,255,.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
}
.prop-card .add:hover,
.prop-card .add:focus-visible{
  background:
    linear-gradient(135deg, rgba(var(--cta-rgb), .28), rgba(255,255,255,.06) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
}
.prop-card .add-to-parlay{ --cta-rgb: var(--good-rgb); }   /* green */
.prop-card .remove-from-parlay{ --cta-rgb: var(--bad-rgb); } /* red */

.prop-card .add:active{ transform: translateY(1px) }

/* Expanded section aligns under the title column */
.prop-card .expand{
  display:none;
  margin-top: var(--gap-edge-expand);
  margin-left: calc(var(--cta-col) + var(--cta-gap));
}
.prop-card.expanded .expand{ display:block }

.prop-card .chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom: var(--gap-chips-ou) }
.prop-card .chip{
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,0.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  border:1px solid var(--glass-border); color:#ecfff9; font-size:12px; padding:6px 8px; border-radius:10px; white-space:nowrap; box-shadow: inset 0 0 0 1px var(--glass-inner)
}
.prop-card .chip strong{ color:#dcfff4 }

.prop-card .alt-title{ color:#c9fff1; font-size:11px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px }
.prop-card .alt-strip{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:2px; margin-bottom: var(--gap-alt-ou) }
.prop-card .alt-strip::-webkit-scrollbar{ height:6px }
.prop-card .alt-strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px }
.prop-card .alt-btn{
  scroll-snap-align:start; flex:0 0 auto; all:unset; cursor:pointer;
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,0.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  border:1px solid var(--glass-border); padding:10px 12px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; font-weight:700; min-width:96px; box-shadow: inset 0 0 0 1px var(--glass-inner);
  font-size:14px;
}
.prop-card .alt-btn span{ color:#d2fff3; font-weight:600 }
.prop-card .alt-btn.active{
  box-shadow: inset 0 0 0 1px var(--ring);
  background: linear-gradient(135deg, rgba(0,173,132,.24), rgba(0,173,132,.14));
}

.prop-card .ou{ display:flex; gap:8px; justify-content:flex-end }
.prop-card .ou button{
  all:unset; cursor:pointer; padding:10px 14px; border-radius:999px; border:1px solid var(--glass-border); font-weight:800;
  background:
    linear-gradient(135deg, var(--card-blue-tint), rgba(255,255,255,0.04) 60%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
  font-size:14px;
}
.prop-card .ou .over.active{ background:linear-gradient(180deg, rgba(60,230,129,.24), rgba(60,230,129,.12)); color:var(--good); box-shadow: inset 0 0 0 1px rgba(60,230,129,.5) }
.prop-card .ou .under.active{ background:linear-gradient(180deg, rgba(255,94,107,.24), rgba(255,94,107,.12)); color:var(--bad); box-shadow: inset 0 0 0 1px rgba(255,94,107,.5) }

/* View Stats = same look as Build Parlay (keep current corner radius) */
.prop-card .ou .view-stats{
  font-weight: 525; /* matches button weight */
  border:1px solid rgba(34,221,182,.45); color:#071317;
  background-image:linear-gradient(180deg, rgba(124,227,216,.98), rgba(34,221,182,.98));
  box-shadow:0 6px 24px rgba(34,221,182,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.prop-card .ou .view-stats:hover { filter: brightness(1.03); }
.prop-card .ou .view-stats:active { filter: brightness(.98); transform: translateY(1px); }
.prop-card .ou .view-stats:disabled { opacity:.6; cursor:not-allowed; filter:none; transform:none; }

/* ===== Small screens: scale up CTA + gap and typography ===== */
@media (max-width:1000px){
  .prop-card{ --cta-col: 56px; --cta-gap: 30px; }
  #suggested-props-container .suggested-prop.prop-card{ min-height:110px !important; }
  .prop-card .game{ font-size:16px; margin-bottom: 8px; opacity:.4; font-weight: 100;}
  .prop-card .player-name{ font-size:32px; margin-bottom: 10px; }
  .prop-card .stat-odds{ 
    font-size:30px; 
  }
  .prop-card .edge{ font-size:22px; height:34px; padding:0 14px }
  .prop-card .add{ font-size:36px }  /* CTA grows with column via --cta-col */
  .prop-card .chip{ font-size:24px }
  .prop-card .alt-title{ font-size:22px }
  .prop-card .alt-btn{ font-size:28px; padding:14px 18px; min-width:160px }
  .prop-card .alt-btn span{ font-size:28px }
  .prop-card .ou button{ font-size:28px; padding:14px 22px }
}

/* =====================================================================
   PROP CARDS — THEME / OVERRIDES (migrated from second IIFE)
   ===================================================================== */

:root{
  --card-panel-alpha: .02;        /* base transparency */
  --card-panel-alpha-hover: .028;  /* hover/expanded transparency */
}

/* Transparent base panel, keep glass borders/blur */
.prop-card{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,var(--card-panel-alpha)),
      rgba(255,255,255,var(--card-panel-alpha))) !important;

  /* slightly stronger strokes so fully transparent panels still read */
  --glass-border: rgba(255,255,255,.16);
  --glass-inner:  rgba(255,255,255,.22);
}

.prop-card:hover,
.prop-card.expanded{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,var(--card-panel-alpha-hover)),
      rgba(255,255,255,calc(var(--card-panel-alpha-hover)*.6))) !important;
}

/* Fallback if blur isn't supported */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .prop-card{
    /* soft translucent surface on your #031625 page bg */
    background: rgba(8,34,46,.55) !important; /* #08222E @ 55% */
    --glass-border: rgba(255,255,255,.10);
    --glass-inner:  rgba(255,255,255,.14);
  }
}

/* Respect users who reduce transparency */
@media (prefers-reduced-transparency: reduce){
  .prop-card{
    background: linear-gradient(180deg, rgba(8,34,46,.85), rgba(8,34,46,.80)) !important;
  }
}


/* Center circular controls even if JS injected inline display */
#your-parlay-container .prop-card .stepper button,
#your-parlay-container .prop-card .remove-from-parlay,
#your-parlay-container .prop-card.in-parlay .lock-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
}


/* Default visibility: suggested list (not in parlay) */
.prop-card .remove-from-parlay,
.prop-card .lock-toggle {
  display: none;
}

/* Visibility when a card is in the parlay */
.prop-card.in-parlay .remove-from-parlay,
.prop-card.in-parlay .lock-toggle {
  display: flex; /* picks up the centering rule above */
}
.prop-card.in-parlay .add-to-parlay {
  display: none !important;
}



/* =====================================================================
   SUGGESTED LIST LAYOUT: hide +/- and move Add to the RIGHT as a pill
   ===================================================================== */

/* 1) No stepper in Suggested */
#suggested-props-container .prop-card .stepper {
  display: none !important;
}

/* 2) Reflow grid so CTA is the right-most column and auto-sizes to content */
#suggested-props-container .prop-card .pc-row{
  grid-template-columns: 1fr 0 max-content;   /* title | (hidden stepper) | CTAs */
  grid-template-areas:
    "title stepper ctas"
    "title stepper ctas";
}

/* Expanded area should align under the title (no left indent since CTAs are right) */
#suggested-props-container .prop-card .expand{
  margin-left: 0;
}

/* 3) CTA container on the right; let it size to the pill */
#suggested-props-container .prop-card .parlay-ctas{
  width: auto;                 /* override base 44px column */
  justify-content: flex-end;   /* stick to the right edge */
  align-self: start;           /* top-align with title row */
  gap: 0;                      /* pill manages its own padding */
}

/* 4) Show Add, hide Remove in Suggested */
#suggested-props-container .prop-card .parlay-ctas .add-to-parlay{
  display: inline-flex !important;
}
#suggested-props-container .prop-card .parlay-ctas .remove-from-parlay{
  display: none !important;
}

/* 5) Turn the Add button into a pill with text, styled like the odds pill */
#suggested-props-container .prop-card .add-to-parlay{
  /* neutralize circular CTA defaults */
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1;
  font-weight: 800;

  /* odds-pill look */
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, rgba(var(--cta-rgb), .28), rgba(255,255,255,.06) 99%),
    linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2));
  box-shadow: inset 0 0 0 1px var(--glass-inner);
  color: #e2fff6;

  /* hide the original "+" text and replace with label via pseudo elements */
  font-size: 0;
}
#suggested-props-container .prop-card .add-to-parlay::before{
  font-size: 14px;
  font-weight: 900;
  margin-right: 6px;
}
#suggested-props-container .prop-card .add-to-parlay::after{
  content: "Add to Parlay";
  font-size: 14px;
  font-weight: 800;
}
#suggested-props-container .prop-card .add-to-parlay:hover,
#suggested-props-container .prop-card .add-to-parlay:focus-visible{
  filter: brightness(1.06);
}
#suggested-props-container .prop-card .add-to-parlay:active{
  transform: translateY(1px);
}

/* 6) Mobile: scale the pill to match your larger pills/buttons */
@media (max-width:1000px){
  #suggested-props-container .prop-card{ padding-left: 24px; }
  #suggested-props-container .prop-card .pc-row{
    grid-template-columns: 1fr 0 max-content;
  }
  #suggested-props-container .prop-card .add-to-parlay{
    padding: 18px 22px;
    margin-top: 10px;
  }
  #suggested-props-container .prop-card .add-to-parlay::before,
  #suggested-props-container .prop-card .add-to-parlay::after{
    font-size: 24px;
  }
}