/* ═══════════════════════════════════════════════════════════
   ADDITIONS for prediction-ajax.php — Expert Pick gold state +
   "More Predictions & Probabilities" grid.
   Append to your existing prediction-page.css (does not touch
   any bp-hero-card / bp-tip-card / bp-odds-row rules already
   defined there). Uses your existing --font-heading / --font-body
   / theme variables if you already define them; falls back to
   Syne / DM Sans (the fonts prediction.php already loads) if not.
   ═══════════════════════════════════════════════════════════ */

.bp-prediction-panel {
    --bp-gold: #c8952a;
    --bp-gold-bg: #fff7e6;
    --bp-gold-border: #f0cf85;
}

.bp-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Gold "Expert Pick" state on the main prediction panel ── */
.bp-prediction-panel--expert {
    border-color: var(--bp-gold-border, #f0cf85);
    background: linear-gradient(180deg, var(--bp-gold-bg, #fff7e6), transparent 60%);
    box-shadow: 0 4px 18px rgba(200, 149, 42, .12);
}

.bp-expert-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--bp-gold, #c8952a);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: .4rem 0 .1rem;
}
.bp-match-venue {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--bp-text-muted, #6b6b76);
    font-size: .82rem;
    margin: .25rem 0 0;
}
.bp-expert-badge .bp-icon { width: 15px; height: 15px; color: var(--bp-gold, #c8952a); }

/* ── "More Predictions & Probabilities" section ─────────────── */
.bp-markets { margin: 1.5rem 0; }
.bp-markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .85rem;
    margin-top: .9rem;
}

.bp-market-card {
    background: var(--switch-darkBGShaded);
    border: 1px solid var(--switch-darkBorderlight);
    color: var(--switch-textWhite);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.bp-market-card-head { display: flex; align-items: center; gap: .5rem; color: var(--bp-text-muted, #6b6b76); }
.bp-market-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.bp-market-pick { font-weight: 700; font-size: 1.02rem; margin: 0; }
.bp-market-odds { margin: 0; font-size: .8rem; color: var(--bp-text-muted, #6b6b76); }

/* Highest-probability card among the "others" — silver accent so the
   single gold Expert Pick above stays visually unique. Add this class
   in the loop yourself if you want to flag runner-up too; omitted by
   default to keep exactly one gold pick per match. */
.bp-market-card--runner-up { border-color: #c9c9d1; }

/* ── Probability bar (shared by panel + cards) ──────────────── */
.bp-prob-bar { display: flex; align-items: center; gap: .55rem; }
.bp-prob-track { flex: 1; height: 7px; border-radius: 999px; background: var(--bp-border, #e6e6ea); overflow: hidden; }
.bp-prob-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8f1c92, #c55ec7); }
.bp-prediction-panel--expert .bp-prob-fill,
.bp-expert-badge ~ .bp-prediction-value .bp-prob-fill { background: linear-gradient(90deg, var(--bp-gold, #c8952a), #e2b45c); }
.bp-prob-value { font-weight: 700; font-size: .8rem; min-width: 2.4em; text-align: right; }

/* ── Locked state (no subscription / not logged in) ─────────── */
.bp-markets--locked { text-align: center; }
.bp-markets-locked-msg {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bp-text-muted, #6b6b76);
    font-size: .9rem;
    margin: .6rem 0 0;
}
.bp-markets-locked-msg a { color: var(--bp-accent, #1c6fdb); font-weight: 600; }

@media (min-width: 640px) {
    .bp-markets-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .bp-prob-fill { transition: none; }
}