/* ============================================================
   VegasBet — «In Play» tab of the bet slip (inplay.js)
   The visitor's running bets with the live score of every event
   they ride on, plus the latest results. Shares the popup shell,
   header and segmented toggle with the Bet Slip (betslip.css);
   everything specific to the list is prefixed .ip-*.
   No blue: purple chrome, red for live, green/gold/red results.
   ============================================================ */

/* ── Popup sizing ───────────────────────────────────────────
   Taller than the slip: this is a list to scroll through, not a
   form. It still stops under the 64px site header. */
.ip-popup {
  max-height: min(620px, calc(100vh - 170px));
  max-height: min(620px, calc(100dvh - 170px));
}

/* ── Header ─────────────────────────────────────────────── */
.ip-header { padding-bottom: 10px; }

.ip-live-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #fca5a5;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.ip-live-chip b { color: #fff; font-weight: 800; }
.ip-live-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
/* An author `display` outranks the UA [hidden] rule (the cascade footgun
   CLAUDE.md keeps a count of) — the chip has to say no itself. */
.ip-live-chip[hidden] { display: none; }

/* ── Unsettled / Settled toggle — full width under the title ─ */
.ip-tabs-row {
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.ip-tabs {
  margin-left: 0;
  width: 100%;
}
.ip-tab {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0;
  padding: 7px 8px;
  white-space: nowrap;
}
.ip-tab-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0;
}
.ip-tab.active .ip-tab-num { background: #fff; color: #5b21b6; }
.ip-tab-num[hidden] { display: none; }

/* ── Scrolling list area ────────────────────────────────── */
.ip-content {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.4) transparent;
}
.ip-content::-webkit-scrollbar { width: 6px; }
.ip-content::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.4); border-radius: 3px; }

.ip-note {
  padding: 36px 12px;
  text-align: center;
  color: #8f88a3;
  font-size: 0.82rem; font-weight: 600;
}

.ip-list { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }

/* ── Empty / login / error states ───────────────────────── */
.ip-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 18px 30px;
  text-align: center;
}
.ip-empty-icon {
  width: 64px; height: 64px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #c084fc;
  background: radial-gradient(circle at 50% 35%, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(124, 58, 237, 0.28);
  margin-bottom: 16px;
}
.ip-empty-icon svg { width: 28px; height: 28px; }
.ip-empty-title {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.93rem; color: #fff;
  margin-bottom: 6px;
}
.ip-empty-hint {
  font-size: 0.78rem; color: #8f88a3; line-height: 1.5;
  max-width: 240px;
}
.ip-empty-btn {
  margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border: none; border-radius: 11px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff; text-decoration: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.8rem;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
  transition: transform 0.2s ease;
}
.ip-empty-btn:hover { transform: translateY(-2px); color: #fff; }

/* ── One bet ────────────────────────────────────────────── */
.ip-bet {
  position: relative;
  padding: 12px 13px 10px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.16);
  overflow: hidden;
}
/* A bet riding on an event in play right now: a red edge, the same
   language as the live cards on the match page's related strip. */
.ip-bet.is-live { border-color: rgba(239, 68, 68, 0.34); }
.ip-bet.is-live::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #f87171, #ef4444);
}
.ip-bet--won  { border-color: rgba(16, 185, 129, 0.30); }
.ip-bet--lost { border-color: rgba(239, 68, 68, 0.22); }

.ip-bet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}
.ip-bet-kind {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 700;
  color: #8f88a3;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

.ip-bet-match,
.ip-leg-match {
  display: block;
  min-width: 0;
  color: #fff;
  font-weight: 700; font-size: 0.86rem; line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.ip-bet-match:hover,
a.ip-leg-match:hover { color: #c084fc; }

.ip-bet-sel {
  margin-top: 3px;
  font-size: 0.78rem; font-weight: 500; color: #a89cc8;
  overflow-wrap: anywhere;
}

/* ── State of an event: live score / kickoff / final ────── */
.ip-state {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  white-space: nowrap;
}
.ip-state b { font-weight: 800; color: #fff; }
.ip-state-sep { color: rgba(255, 255, 255, 0.28); }

.ip-state--live { color: #fca5a5; }
.ip-state-tag {
  display: inline-flex; align-items: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ip-state--pre  { color: #c4b5fd; }
.ip-state--done { color: var(--gold); }
.ip-state--wait { color: var(--gold); }

/* ── Result badge (settled bets, graded legs, pending Multiple) ─ */
.ip-result {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.ip-result--won     { color: var(--green); background: rgba(16, 185, 129, 0.14); }
.ip-result--lost    { color: var(--red);   background: rgba(239, 68, 68, 0.12); }
.ip-result--void    { color: #b8b2cc;      background: rgba(255, 255, 255, 0.06); }
.ip-result--pending { color: var(--gold);  background: rgba(245, 158, 11, 0.14); }

/* ── Legs of a Multiple ─────────────────────────────────── */
.ip-legs {
  display: flex; flex-direction: column;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.10);
}
.ip-leg {
  position: relative;
  padding: 9px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.ip-leg:first-child { border-top: none; }
.ip-leg.is-live::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px;
  background: var(--red);
}
.ip-leg-top,
.ip-leg-bottom {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  min-width: 0;
}
.ip-leg-bottom { align-items: center; margin-top: 4px; }
.ip-leg-match { flex: 1 1 auto; font-size: 0.8rem; }
.ip-leg-odds {
  flex-shrink: 0;
  font-weight: 700; font-size: 0.8rem; color: #c084fc;
}
.ip-leg-sel {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.74rem; color: #a89cc8;
  overflow-wrap: anywhere;
}
.ip-leg-bottom .ip-state,
.ip-leg-bottom .ip-result { flex-shrink: 0; }

/* ── Odds · Stake · Potential Win / Payout ──────────────── */
/* Odds and Stake are short figures and take only what they need; the
   payout column gets the rest, so its longer label ("Potential Win",
   "Möglicher Gewinn") has room. A label that still does not fit wraps,
   and `end` keeps the three figures on one line regardless. */
.ip-nums {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: end;
  column-gap: 16px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}
.ip-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ip-num:last-child { text-align: right; }
.ip-num-lbl {
  font-size: 0.6rem; font-weight: 700; line-height: 1.25;
  color: #7a7488;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ip-num-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip-num-val--odds { color: #c084fc; }
.ip-num-val--win  { color: #34d399; }

.ip-bet-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 8px;
  font-size: 0.66rem; font-weight: 600; color: #615c70;
}

/* ── Footer link to the full history ────────────────────── */
.ip-footer {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(124, 58, 237, 0.12);
  text-align: center;
}
.ip-history-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: #c084fc; text-decoration: none;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.8rem;
}
.ip-history-link svg { width: 15px; height: 15px; }
.ip-history-link:hover { color: #fff; }
.ip-popup.is-guest .ip-footer { display: none; }

/* ── Phone ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* The popup sits on the pill (bottom: 74px) and may run up to just
     under the 64px header — the list is what a phone user came for. */
  .ip-popup {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
  }
  .ip-tabs-row { padding: 0 12px 10px; }
  .ip-content { padding: 0 10px 10px; }
  .ip-bet { padding: 11px 11px 9px; }
  .ip-num-val { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-empty-btn { transition: none; }
}