/*
 * Best Seats picks modal styles (lib/best-seats-picks/modal.js). Loaded by the
 * seating page for the sgbsp test's variant arm, and injected by the lab
 * (_lab/KH/best-seats-modal). Scoped under .bsv (the class BSPicksModal adds to
 * its cm-dialog), so the page and the article modal are untouched.
 *
 * Owned here: layout only. Every component is borrowed:
 *   .ver-selected-event / .ver-similar-*   lib/base/styles/src/events.css (seating rail)
 *                                          — loaded on the seating page, used as-is
 *   .ev-fgroup / .ev-sg / .ev-sp           MIRROR of te.3 layout.css ~503-715
 *   .tl-* / .buy-button                    MIRROR of te.3 tickets.css ~474-610
 *   .tl-deal[data-tier]                    MIRROR of lib/extras/css/ticket-modal.css ~1352
 *                                          (not loaded on the seating page)
 *   .sa-stl*                               MIRROR of seating-areas styles.css ~7954
 * On promotion the mirrors move to a shared stylesheet instead of a third copy.
 *
 * The rail keeps the base modal width (--cm-rail-width); round 1 overrode it.
 * Headings use the design system's sizes.
 */

.bsv {
   --bsv-border: #e5e5e5;
   --bsv-band: #F5F5F5;            /* --bg-light-grey */
   --sa-border-soft: #e5e7eb;
}

.bsv .bsv-muted { color: var(--color-70, rgba(0, 36, 72, .7)); font-size: 13px; margin: 0; }
.bsv .bsv-link {
   appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
   color: var(--color-brand, #0067CE); font: inherit; font-size: 14px; font-weight: 600;
   text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.bsv .bsv-sec-head { margin: 0 0 12px; }
.bsv .bsv-sec-head h3 { margin: 0; }
.bsv .bsv-note {
   border: 1px solid var(--bsv-border); border-radius: 12px; background: #fff;
   padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.bsv .bsv-note p { margin: 0; }
.bsv .bsv-wide.bsv-wide { display: flex; width: 100%; justify-content: center; text-align: center; }
/* Change game: navy fill, same retarget te.3 uses for its navy buttons. */
.bsv .btn-primary.bsv-navy { --btn-bg: var(--color-primary); }

/* ── Rail ─────────────────────────────────────────────────────────────── */

.bsv .bsv-rail { display: flex; flex-direction: column; gap: 24px; padding: var(--cm-gap, 20px); }
.bsv .bsv-sel { background: #fff; }
.bsv .bsv-sel .ver-se-price { margin-bottom: 26px; }
.bsv .bsv-low-txt { color: var(--color-85); margin-left: 4px; }
.bsv .bsv-sel .bsv-fgroup { margin-bottom: 28px; gap: 14px; }
.bsv .bsv-all-link {
   display: block; margin: 0 0 22px; font-size: 14px; font-weight: 600;
   color: var(--color-brand, #0067CE); text-decoration: underline; text-underline-offset: 3px;
}
.bsv .bsv-sel--compact .ver-se-name { margin-bottom: 3px; }
/* Explicit game: the same content off the lifted card. */
.bsv .ver-selected-event.bsv-sel--flat { border: 0; box-shadow: none; padding: 0; border-radius: 0; background: none; }
/* Rail quantity pills: four per row. */
.bsv .bsv-rail .ev-sg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bsv .bsv-rail .ev-sg-btn { min-width: 0; }

.bsv .bsv-others, .bsv .bsv-pickall { display: flex; flex-direction: column; gap: 10px; }
.bsv .ver-similar-label { margin-bottom: 4px; }
.bsv .bsv-game {
   appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; background: #fff;
   display: flex; align-items: center; gap: 12px;
}
.bsv .bsv-game .ver-similar-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bsv .bsv-game .ver-similar-name { font-weight: 700; color: var(--color-primary); }
.bsv .bsv-game .ver-similar-meta { font-size: 12px; color: var(--color-70); }
.bsv .bsv-plus.bsv-plus { margin-top: 0; font-size: 16px; }
.bsv .bsv-game:hover .bsv-plus { border-color: var(--color-primary); }
.bsv .bsv-game-av { flex: 0 0 auto; display: inline-flex; }
.bsv .bsv-pickall-list { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow: auto; padding: 2px; }
.bsv .bsv-pickall-list--full { max-height: none; overflow: visible; }
/* Narrow change-game mode: Cancel stays pinned to the bottom of the scroll. */
.bsv .bsv-cancel-bar {
   position: sticky; bottom: 0; z-index: 2;
   margin: 0 calc(-1 * var(--cm-gap, 16px)) calc(-1 * var(--cm-gap, 16px));
   padding: 12px var(--cm-gap, 16px) calc(12px + env(safe-area-inset-bottom, 0px));
   background: #fff; border-top: 1px solid #e3e8ef;
}

/* Change-event mode: the scene steps back so the rail has the focus. */
.bsv.bsv-picking .cm-scene { position: relative; }
.bsv.bsv-picking .cm-scene .bsv-scene { opacity: .35; filter: grayscale(.6); pointer-events: none; user-select: none; transition: opacity .2s ease; }
.bsv.bsv-picking[data-narrow="1"] .cm-scene .bsv-scene { opacity: 1; filter: none; pointer-events: auto; user-select: auto; }

/* ── Narrow game bar (round 1, kept) ──────────────────────────────────── */

.bsv .bsv-gamebar {
   display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px;
   background: #f6faff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 12px 14px;
}
.bsv .bsv-gamebar .ver-se-label { margin-bottom: 4px; }
.bsv .bsv-game-name { font-weight: 700; font-size: 17px; margin: 0; color: var(--color-primary, #002448); }
/* Narrow: one container — the game bar (its tint kept), a rule, then the
   quantity pills on white. */
.bsv .bsv-gamecard { border: 1px solid #e3e8ef; border-radius: 12px; overflow: hidden; background: #fff; }
.bsv .bsv-gamecard .bsv-gamebar { border: 0; border-radius: 0; }
.bsv .bsv-qty-row {
   position: relative; display: flex; align-items: center; gap: 12px;
   border-top: 1px solid #e3e8ef; padding: 12px 16px; background: #fff; color: var(--color-primary); cursor: pointer;
}
.bsv .bsv-qty-row > i:first-child { font-size: 1.8rem; flex: 0 0 auto; }
.bsv .bsv-qty-row > i:last-of-type { font-size: 1.8rem; flex: 0 0 auto; color: var(--color-primary); }
.bsv .bsv-qty-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.bsv .bsv-qty-label { font-size: 11px; color: var(--color-70); }
.bsv .bsv-qty-val { font-size: 13px; font-weight: 600; }
.bsv .bsv-qty-row.is-disabled { opacity: .55; cursor: default; }
/* The native select covers the row: invisible, but it is what the tap hits. */
.bsv .bsv-qty-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* ── Scene ────────────────────────────────────────────────────────────── */

.bsv .bsv-scene { gap: 22px; }
.bsv .bsv-head .cm-scene-title { margin-bottom: 2px; }

/* Three picks in a row on desktop, stacked when the scene narrows. */
.bsv .bsv-picks-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
/* Pick card — Keith's mock: title + byline, location map edge to edge, seats,
   big price, stars, deal + tags, orange pill "See pick". */
.bsv .bsv-pick {
   background: #fff; border: 1px solid var(--bsv-border); border-radius: 12px;
   overflow: hidden; display: flex; flex-direction: column; min-width: 0;
   align-items: stretch;           /* rys-slider ::slotted centers every .rys-slide */
}
.bsv .bsv-pick--skel { border: 0; }
.bsv .bsv-pick-top { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.bsv .bsv-pick-title { margin: 0; }
.bsv .bsv-pick-by { margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-70); }
.bsv .bsv-pick-map {
   display: block; border-top: 1px solid var(--bsv-border); border-bottom: 1px solid var(--bsv-border);
   background: #fff; height: 140px; overflow: hidden;
}
.bsv .bsv-pick-map img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px 0; }
.bsv .bsv-pick-main { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.bsv .bsv-pick-seats { text-decoration: none; }
.bsv .bsv-pick-seats:hover { text-decoration: underline; }
.bsv .bsv-pick-price { font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--color-primary); }
.bsv .bsv-pick .tl-incl-fees { margin: -2px 0 4px; }
.bsv .bsv-pick .tl-score { font-size: 12px; margin-top: 6px; }
.bsv .bsv-pick .tl-last { flex-wrap: wrap; row-gap: 4px; margin-bottom: 14px; }
/* The site's orange (the SeatScore star, #FF6600) on the design-system button —
   no orange button exists in buttons.css, so --btn-bg is retargeted the way te.3
   retargets btn-primary to navy. Pill shape per the mock. */
.bsv .btn-primary.bsv-pick-cta {
   --btn-bg: #FF6600; margin-top: auto; width: 100%; justify-content: center;
   border-radius: 999px; font-weight: 700;
}

/* Price filter: a white te.3 filter card on a grey band, edge to edge. */
.bsv .bsv-band {
   margin-inline: calc(-1 * var(--cm-gap, 20px));
   padding: 18px var(--cm-gap, 20px);
   background: var(--bsv-band);
}
/* Budget card — Keith's mock: rounded, bordered; title row, then label /
   ~200px slider / readout on one row. */
.bsv .bsv-budget {
   background: #fff; border: 1px solid var(--bsv-border); border-radius: 12px;
   padding: 16px 20px; display: flex; flex-direction: column; gap: 14px;
}
.bsv .bsv-budget-title { font-size: 15px; }
.bsv .bsv-budget-title strong { font-weight: 600; }
.bsv .bsv-budget-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.bsv .bsv-budget-label { display: flex; flex-direction: column; gap: 1px; font-size: 15px; color: var(--color-primary); min-width: 120px; }
.bsv .bsv-budget-label .bsv-muted { font-size: 12px; }
.bsv .bsv-budget .ev-sp { width: auto; flex: 0 1 auto; }
.bsv .bsv-budget .ev-sp-slider { width: 200px; max-width: 200px; min-width: 120px; flex: 0 1 200px; }
.bsv .bsv-budget .ev-sp-read { min-width: 12ch; text-align: start; }
.bsv[data-narrow="1"] .bsv-budget-row { gap: 10px 18px; }

/* Working feedback — MIRROR of te.3 overlays.css .ev-mask / .te3-working /
   .animated-ellipsis, covering the scene (the rail stays usable on desktop). */
.bsv .bsv-mask {
   position: absolute; top: 0; bottom: 0; right: 0; left: var(--cm-rail-width); z-index: 5;
   background: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.bsv[data-narrow="1"] .bsv-mask { left: 0; }
.bsv .bsv-mask[hidden] { display: none; }
.bsv .te3-working {
   position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 6;
   display: flex; align-items: center; justify-content: center; padding: 12px 20px;
   background: #fff; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.bsv .animated-ellipsis { display: flex; gap: 4px; }
.bsv .animated-ellipsis div {
   width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand);
   animation: bsv-blink 1.4s infinite both;
}
.bsv .animated-ellipsis div:nth-child(2) { animation-delay: .2s; }
.bsv .animated-ellipsis div:nth-child(3) { animation-delay: .4s; }
@keyframes bsv-blink { 0%, 80%, 100% { opacity: .3; transform: scale(1); } 40% { opacity: 1; transform: scale(1.3); } }

.bsv .bsv-panels .sa-stl-list[data-open="true"] .sa-stl-body { padding: 4px 0 16px; }
.bsv .bsv-slider { display: block; }

/* Guide: one compact row; the article only when asked for. */
.bsv .bsv-guide { border: 1px solid var(--bsv-border); border-radius: 12px; background: #fff; overflow: hidden; }
.bsv .bsv-guide-row {
   appearance: none; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
   display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--color-primary);
}
.bsv .bsv-guide-thumb { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #f6faff; }
.bsv .bsv-guide-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.bsv .bsv-guide-txt strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsv .bsv-guide-full { padding: 4px 16px 16px; border-top: 1px solid var(--bsv-border); font-size: 14px; }
.bsv .bsv-guide-full figure { margin: 12px 0; }
.bsv .bsv-guide-full img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── MIRROR: te.3 filter group (.ev-fgroup / .ev-sg / .ev-sp) ────────── */
/* Stacked (label over control) inside the card instead of te.3's 60px bar. */

.bsv .bsv-fgroup { display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: #fff; }
.bsv .ev-fgroup-label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 400; color: var(--color-primary); line-height: 1.2; }
.bsv .ev-fgroup-label i { flex: 0 0 auto; font-size: 1.8rem; }
.bsv .ev-fgroup-label strong { font-weight: 600; }
.bsv .ev-sg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bsv .ev-sg-btn {
   flex: 1 1 0; min-width: 36px; height: 36px; padding: 0 4px;
   border: 1px solid var(--outline-color, #d9dde3); border-radius: var(--border-radius, 6px);
   background: #fff; font: inherit; font-size: var(--font-size-smaller, 13px);
   color: var(--color-primary); cursor: pointer;
}
.bsv .ev-sg-btn:hover:not(.is-on):not(:disabled) { border-color: var(--color-primary); }
.bsv .ev-sg-btn.is-on { background: #fff; color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.bsv .ev-sg-btn:disabled { opacity: .5; cursor: default; }
.bsv .ev-sp { display: flex; align-items: center; gap: 12px; width: 100%; }
.bsv .ev-sp-slider {
   flex: 1 1 auto; min-width: 140px; width: auto; height: 24px; margin: 0;
   -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.bsv .ev-sp-slider::-webkit-slider-runnable-track {
   height: 4px; border-radius: 999px;
   background: linear-gradient(to right, var(--color-primary) 0 var(--fill, 100%), var(--color-10, #e6e9ed) var(--fill, 100%) 100%);
}
.bsv .ev-sp-slider::-moz-range-track {
   height: 4px; border-radius: 999px;
   background: linear-gradient(to right, var(--color-primary) 0 var(--fill, 100%), var(--color-10, #e6e9ed) var(--fill, 100%) 100%);
}
.bsv .ev-sp-slider::-webkit-slider-thumb {
   -webkit-appearance: none; appearance: none; box-sizing: border-box; margin-top: -10px;
   width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e5e5e5; background-color: #fff;
   background-image: linear-gradient(#b4b9c2, #b4b9c2), linear-gradient(#b4b9c2, #b4b9c2), linear-gradient(#b4b9c2, #b4b9c2);
   background-repeat: no-repeat; background-size: 2px 9px;
   background-position: calc(50% - 4px) 50%, 50% 50%, calc(50% + 4px) 50%;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: pointer;
}
.bsv .ev-sp-slider::-moz-range-thumb {
   box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e5e5e5; background-color: #fff;
   background-image: linear-gradient(#b4b9c2, #b4b9c2), linear-gradient(#b4b9c2, #b4b9c2), linear-gradient(#b4b9c2, #b4b9c2);
   background-repeat: no-repeat; background-size: 2px 9px;
   background-position: calc(50% - 4px) 50%, 50% 50%, calc(50% + 4px) 50%;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: pointer;
}
.bsv .ev-sp-read {
   flex: 0 0 auto; font-size: var(--font-size-smaller, 13px); font-weight: 600; color: var(--color-primary);
   white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 12ch; text-align: end;
}

/* ── MIRROR: te.3 ticket row parts (.tl-* / .buy-button) ─────────────── */

.bsv .tl-seats { font-weight: 600; color: var(--color-primary); line-height: 1.2; font-size: 1.08em; }
.bsv .tl-score { font-size: 0.92em; color: var(--color-70); line-height: 1.2; }
.bsv .tl-star { color: #FF6600; margin-right: 3px; font-size: 14px; }
.bsv .tl-last { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bsv .tl-deal {
   flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 6px;
   background: var(--deal-bg, #F0FDF0); color: var(--deal-accent, #008000); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.bsv .tl-deal-num {
   display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 5px;
   border-radius: 5px; background: var(--deal-accent, #008000); color: #fff; font-weight: 700;
}
.bsv .tl-deal[data-tier='amazing']       { --deal-accent: #008000; --deal-bg: #F0FDF0; }
.bsv .tl-deal[data-tier='excellent']     { --deal-accent: #128912; --deal-bg: #F0FDF0; }
.bsv .tl-deal[data-tier='great']         { --deal-accent: #269326; --deal-bg: #F0FDF0; }
.bsv .tl-deal[data-tier='very-good']     { --deal-accent: #40A040; --deal-bg: #F0FDF0; }
.bsv .tl-deal[data-tier='good']          { --deal-accent: #80A716; --deal-bg: #EDF3E7; }
.bsv .tl-deal[data-tier='fair']          { --deal-accent: #A5A800; --deal-bg: #F3F1DD; }
.bsv .tl-deal[data-tier='below-average'] { --deal-accent: #B38300; --deal-bg: #F5EFDB; }
.bsv .tl-deal[data-tier='poor']          { --deal-accent: #B05F1C; --deal-bg: #F7EFE8; }
.bsv .tl-tag {
   flex: 0 1 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px;
   background: #F6F6F6; color: #666; font-size: 10px; white-space: nowrap; text-overflow: ellipsis;
}
.bsv .tl-tag i { flex: 0 0 auto; color: #666; }
.bsv .tl-buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.bsv .buy-button {
   border: none; border-radius: 4px; background: var(--color-brand); color: #fff; font-weight: 500;
   padding: 8px 12px; cursor: pointer; height: 36px; font-size: 16px;
}
.bsv .buy-button span { font-weight: 500; font-size: 11px; }
.bsv .tl-incl-fees { font-size: var(--font-size-s, 12px); line-height: 1.2; color: var(--text-low, #6b7280); }

/* ── MIRROR: seating-areas smart-list accordion (.sa-stl*) ──────────── */

/* external-link is not in the base icon set — seating-areas and best-seats each
   define it in their own theme CSS, so on the seating page the catch-all row's
   trailing icon had no mask and drew nothing. MIRROR of seating-areas
   styles.css ~7656; on promotion it belongs in lib/base/styles/src/icons.css. */
.bsv [data-is="icon"][data-icon="external-link"] {
   --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m16 8.4l-8.9 8.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L14.6 7H7q-.425 0-.712-.288T6 6t.288-.712T7 5h10q.425 0 .713.288T18 6v10q0 .425-.288.713T17 17t-.712-.288T16 16z'/%3E%3C/svg%3E");
}

.bsv .sa-stl { border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; background: #fff; }
.bsv .sa-stl-list { border-top: 1px solid var(--sa-border-soft); padding: 0; }
.bsv .sa-stl-list[data-open='true'] { background: #F8F8F8; }
.bsv .sa-stl > :first-child { border-top: 0; }
.bsv .sa-stl-head {
   display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 12px; border: 0; background: none;
   cursor: pointer; font: inherit; text-align: left; color: var(--text-default, #002448); transition: background .15s ease;
}
.bsv .sa-stl-head:hover { background: #F8F8F8; }
.bsv .sa-stl-ico { flex: none; color: var(--text-medium, #4b5563); }
.bsv .sa-stl-label { font-weight: 600; flex: 1 1 auto; min-width: 0; font-size: 16px; }
.bsv .sa-stl-meta { font-size: 13px; color: var(--text-low, #6b7280); flex: none; }
.bsv .sa-stl-caret { flex: none; color: var(--text-low, #6b7280); transition: transform .25s ease; }
.bsv .sa-stl-list[data-open="true"] .sa-stl-caret { transform: rotate(180deg); }
.bsv .sa-stl-bodywrap { padding-left: 12px; padding-right: 12px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.bsv .sa-stl-list[data-open="true"] .sa-stl-bodywrap { grid-template-rows: 1fr; }
.bsv .sa-stl-body { overflow: hidden; }
.bsv .sa-stl-badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: white; background: var(--color-primary); }
.bsv .sa-stl-linkrow {
   display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--sa-border-soft);
   color: var(--text-default, #002448); text-decoration: none; padding: 16px 12px;
}
.bsv .sa-stl-linkrow:hover { background: #F8F8F8; }
.bsv .sa-stl-extlink { flex: none; color: var(--text-low, #6b7280); }
.bsv[data-narrow="1"] .sa-stl-meta { display: none; }
.bsv[data-narrow="1"] .ev-sg { flex-wrap: nowrap; gap: 4px; }
.bsv[data-narrow="1"] .ev-sg-btn { min-width: 0; padding: 0 2px; }

/* Narrow event name: 15px, two lines max (the quantity value under it is 13px). */
.bsv[data-narrow="1"] .bsv-game-name {
   font-size: 15px; line-height: 1.25;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Picks heading: navy marquee sparkle; desktop adds "Change" beside the title. */
.bsv .bsv-picks-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Baseline alignment read the sparkle icon's foot as the h3's baseline, so
   Change sat low; centre it and give it the heading's line box. */
.bsv .bsv-head-change { line-height: 1.25; }
.bsv .bsv-picks-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.bsv .bsv-sparkle { color: var(--color-primary); font-size: 1em; flex: 0 0 auto; }
.bsv .bsv-head-change { font-size: 14px; }

/* Narrow: a deliberate game pinned to the bottom once its card scrolls away. */
.bsv .bsv-stickygame {
   position: sticky; bottom: 0; z-index: 3;
   margin: 0 calc(-1 * var(--cm-gap, 16px)) calc(-1 * var(--cm-gap, 16px));
   padding: 10px var(--cm-gap, 16px) calc(10px + env(safe-area-inset-bottom, 0px));
   display: flex; align-items: center; gap: 12px;
   background: #f6faff; border-top: 1px solid #e3e8ef; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
   transform: translateY(110%); opacity: 0; pointer-events: none;
   transition: transform .22s ease, opacity .22s ease;
}
.bsv .bsv-stickygame[data-shown="true"] { transform: none; opacity: 1; pointer-events: auto; }
.bsv .bsv-stickygame-txt { flex: 1 1 auto; min-width: 0; }
.bsv .bsv-stickygame .bsv-game-name { -webkit-line-clamp: 1; }

/* ══ Round 4 (2026-10-15): layouts b and c ═══════════════════════════════
   a  ours (everything above)
   b  Keith's mock, pixel for pixel — header bar, thin blue rail, our picks in
      the mock's card, "More picks" rows, "Why these seats"; no filters
   c  ours + b's header bar and thin blue rail; the rail's quantity is the
      compact # of tickets list and its buttons are secondary
   Headings are real h2/h3/h4 at the design system's sizes; nothing here sets a
   heading's size. Colours: rail = --bg-light-blue-lighter, green = the
   'excellent' deal tier, chip = the deal-chip tint. */

.bsv .cm-body { position: relative; }   /* the working mask sits in here */

.bsv.bsv-bar { --cm-rail-width: 340px; --bsvb-line: #dfe5ec; --bsvb-green: #128912; }
.bsv.bsv-bar .cm-rail { background: var(--bg-light-blue-lighter, #f6faff); border-right-color: #e3e8ef; }

/* Secondary button: outlined brand blue on white (btn-ghost retargeted; the
   DS ghost is navy and transparent). Two classes beat its (0,2,1). */
.bsv .btn-ghost.bsv-solid { background: #fff; color: var(--color-brand); border-color: var(--color-brand); }
.bsv .btn-ghost.bsv-solid:hover { background: var(--color-brand); color: #fff; }
.bsv .bsv-wide.bsv-wide { align-items: center; }

/* ── Header bar (b, c) ─────────────────────────────────────────────── */

.bsv .bsv-topbar {
   flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
   min-height: 80px; padding: 14px 24px; border-bottom: 1px solid #e3e8ef; background: #fff;
}
.bsv .bsv-topbar-txt { flex: 1 1 auto; min-width: 0; }
.bsv .bsv-topbar-sub { margin: 4px 0 0; font-size: 14px; color: var(--color-70); }
.bsv .bsv-topbar-close.bsv-topbar-close {
   position: static; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; line-height: 1;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 50%; background: #f1f3f5; color: var(--color-primary);
}
.bsv .bsv-topbar-close.bsv-topbar-close:hover { background: #e6e9ed; }
.bsv[data-narrow="1"] .bsv-topbar { min-height: 56px; padding: 10px 16px; gap: 12px; }
.bsv[data-narrow="1"] .bsv-topbar-close.bsv-topbar-close { width: 36px; height: 36px; }
/* The bar clears the narrow chrome, so the scene needs no extra top room. */
.bsv.bsv-bar[data-narrow="1"] .cm-scene-inner { padding-top: var(--cm-gap, 16px); }
.bsv.bsv-bar .bsv-mask { top: 0; }

/* ── c, d: the rail ────────────────────────────────────────────────── */

.bsv.bsv-hyb .bsv-rail { padding: 20px; gap: 20px; }
.bsv.bsv-hyb .bsv-rail .bsv-qty-row {
   border: 1px solid #e3e8ef; border-radius: 8px; padding: 10px 12px; margin: 0 0 22px;
}
.bsv.bsv-hyb .bsv-rail .bsv-qty-val { font-size: 14px; }

/* ── b: the rail ───────────────────────────────────────────────────── */

.bsv .bsvb-rail.bsv-rail { padding: 20px; gap: 22px; }
.bsv .bsvb-railsec { display: flex; flex-direction: column; gap: 9px; }
.bsv .bsvb-label { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--color-primary); }
.bsv .bsvb-label--muted { font-weight: 400; color: var(--color-70); }
.bsv .bsvb-meta { margin: 0; font-size: 13px; line-height: 1.35; color: var(--color-70); }
.bsv .bsvb-gname { margin: 3px 0 2px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--color-primary); }
.bsv .bsvb-gname--s { font-size: 15px; margin: 2px 0 0; }
.bsv .bsvb-gamecard {
   background: #fff; border: 1px solid var(--bsvb-line); border-radius: 10px; padding: 16px 15px 15px;
   display: flex; flex-direction: column;
}
.bsv .bsvb-change.bsvb-change { height: 44px; line-height: 42px; font-size: 15px; font-weight: 600; }
.bsv .bsvb-gamecard .bsvb-change { margin-top: 18px; }
.bsv .bsvb-gamerow {
   appearance: none; width: 100%; text-align: left; font: inherit; cursor: pointer;
   display: flex; flex-direction: column; gap: 2px;
   background: #fff; border: 1px solid var(--bsvb-line); border-radius: 10px; padding: 14px 15px;
}
.bsv .bsvb-gamerow .bsvb-meta { font-size: 12px; }
.bsv .bsvb-gamerow:hover { border-color: var(--color-primary); }
.bsv .bsvb-tix { gap: 0; margin-top: 12px; }
.bsv .bsvb-tix .bsvb-fees { margin: 4px 0 0; }
.bsv .bsvb-tix-list { margin-top: 14px; border-top: 1px solid var(--bsvb-line); }
.bsv .bsvb-tixrow {
   display: flex; align-items: center; gap: 10px; padding: 12px 0;
   border-bottom: 1px solid var(--bsvb-line); color: var(--color-primary); text-decoration: none;
}
.bsv .bsvb-tixrow:hover .bsvb-tix-seat { text-decoration: underline; }
.bsv .bsvb-tix-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bsv .bsvb-tix-seat { font-size: 15px; font-weight: 600; line-height: 1.25; }
.bsv .bsvb-chip {
   flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
   background: #E3F4E6; color: var(--bsvb-green); font-size: 12px; font-weight: 600; line-height: 1.2;
}
.bsv .bsvb-tix-price { flex: 0 0 auto; font-size: 16px; font-weight: 700; min-width: 3.6em; text-align: right; }
.bsv .bsvb-all {
   display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600;
   color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px;
}
.bsv .bsvb-fees { margin: 0; font-size: 13px; color: var(--color-70); }

/* ── b: the scene ──────────────────────────────────────────────────── */

.bsv[data-bsv-layout="b"][data-narrow="0"] .bsv-scene { padding: 28px 32px 36px; gap: 38px; }
.bsv .bsvb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bsv .bsvb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bsv .bsvb-card {
   background: #fff; border: 1px solid var(--bsvb-line); border-radius: 12px; padding: 18px 18px 20px;
   display: flex; flex-direction: column; min-width: 0;
}
.bsv .bsvb-card--skel { padding: 0; border: 0; }
.bsv .bsvb-card-top { padding-bottom: 16px; border-bottom: 1px solid #e8edf2; }
.bsv .bsvb-card-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--color-70); }
.bsv .bsvb-card-body { padding-top: 16px; display: flex; flex-direction: column; }
.bsv .bsvb-good { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--bsvb-green); }
.bsv .bsvb-seatprice { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "seat" "price" "from"; }
.bsv .bsvb-seat { grid-area: seat; margin: 0; font-size: 15px; line-height: 1.3; color: var(--color-primary); }
.bsv .bsvb-price { grid-area: price; margin: 2px 0 4px; font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--color-primary); }
.bsv .bsvb-usd { font-size: 13px; font-weight: 600; margin-left: 4px; color: var(--color-70); }
.bsv .bsvb-from { grid-area: from; margin: 0; font-size: 13px; color: var(--color-70); }
.bsv .bsvb-cta.bsvb-cta { margin-top: 18px; height: 44px; line-height: 44px; font-size: 15px; display: flex; align-items: center; justify-content: center; width: 100%; }
.bsv .bsvb-link {
   appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
   align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--color-brand);
   text-decoration: underline; text-underline-offset: 3px;
}
.bsv .bsvb-card-body > .bsvb-link { margin-top: 14px; }
.bsv .bsvb-why-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bsv .bsvb-why-body .tl-last { flex-wrap: wrap; row-gap: 4px; }

.bsv .bsvb-rows { margin-top: 10px; border-top: 1px solid var(--bsvb-line); }
.bsv .bsvb-row {
   display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name meta link";
   align-items: center; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--bsvb-line);
}
.bsv .bsvb-row-name { grid-area: name; margin: 0; font-size: 15px; font-weight: 600; color: var(--color-primary); }
.bsv .bsvb-row-meta { grid-area: meta; margin: 0; font-size: 14px; color: var(--color-70); text-align: right; }
.bsv .bsvb-row-link { grid-area: link; }
.bsv .bsvb-row-picks { padding: 0 0 20px; border-bottom: 1px solid var(--bsvb-line); }
.bsv .bsvb-row-picks .bsvb-cards { margin-top: 4px; }
.bsv .bsvb-whyseats { border-top: 1px solid var(--bsvb-line); padding-top: 26px; }
.bsv .bsvb-whyseats-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bsv .bsvb-whyseats-head .bsvb-meta { margin-top: 4px; font-size: 14px; }
.bsv .bsvb-guide-full { border-top: 0; padding: 12px 0 0; }

/* ── b narrow (the mobile mock) ────────────────────────────────────── */

.bsv[data-bsv-layout="b"][data-narrow="1"] .bsv-scene { padding: 0 16px 28px; gap: 28px; }
.bsv .bsvb-yourgame {
   margin: 0 -16px; padding: 14px 16px; background: var(--bg-light-blue-lighter, #f6faff); border-bottom: 1px solid #e3e8ef;
   display: flex; align-items: center; gap: 12px;
}
.bsv .bsvb-yourgame-txt { flex: 1 1 auto; min-width: 0; }
.bsv .bsvb-yourgame .bsvb-label { margin: 0 0 2px; font-size: 12px; }
.bsv .bsvb-yourgame .bsvb-gname { margin: 0 0 1px; font-size: 16px; }
.bsv .bsvb-yourgame .bsvb-change.bsvb-change { flex: 0 0 auto; height: 36px; line-height: 34px; padding: 0 12px; font-size: 14px; }
.bsv[data-narrow="1"] .bsvb-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.bsv[data-narrow="1"] .bsvb-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.bsv[data-narrow="1"] .bsvb-card { padding: 16px 16px 18px; }
.bsv[data-narrow="1"] .bsvb-card-top { padding-bottom: 14px; }
.bsv[data-narrow="1"] .bsvb-card-sub { font-size: 13px; }
.bsv[data-narrow="1"] .bsvb-card-body { padding-top: 14px; }
.bsv[data-narrow="1"] .bsvb-seatprice { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seat price" "from price"; column-gap: 12px; }
.bsv[data-narrow="1"] .bsvb-seat { font-size: 14px; align-self: end; }
.bsv[data-narrow="1"] .bsvb-from { font-size: 12px; align-self: start; margin-top: 2px; }
.bsv[data-narrow="1"] .bsvb-price { margin: 0; font-size: 26px; align-self: center; text-align: right; }
.bsv[data-narrow="1"] .bsvb-cta.bsvb-cta { margin-top: 14px; }
.bsv[data-narrow="1"] .bsvb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name link" "meta link"; padding: 14px 0; gap: 2px 12px; }
.bsv[data-narrow="1"] .bsvb-row-name { font-size: 14px; }
.bsv[data-narrow="1"] .bsvb-row-meta { font-size: 12px; text-align: left; }
.bsv[data-narrow="1"] .bsvb-whyseats-head .bsvb-meta { font-size: 13px; }

/* ══ Layout d (2026-10-16) ═══════════════════════════════════════════════
   c + Keith's round of changes. */

/* Game picking: the rail widens to half the modal OVER the scene (the scene
   keeps its place behind it), the list runs full length in the rail's scroll
   (two columns at that width) and Cancel stays pinned at the rail's foot. */
.bsv[data-bsv-layout="d"] .cm-rail { transition: width .22s ease, box-shadow .22s ease; }
.bsv[data-bsv-layout="d"].bsv-picking[data-narrow="0"] .cm-rail {
   position: absolute; top: 0; bottom: 0; left: 0; z-index: 7; width: 50%;
   box-shadow: 10px 0 28px rgba(0, 36, 72, .14);
}
.bsv[data-bsv-layout="d"].bsv-picking[data-narrow="0"] .cm-scene { margin-left: var(--cm-rail-width); }
.bsv[data-bsv-layout="d"][data-narrow="0"] .bsv-pickall-list--full {
   display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
}
.bsv[data-bsv-layout="d"] .cm-rail .bsv-cancel-bar {
   margin: 0 -20px -20px; padding: 12px 20px;
   background: var(--bg-light-blue-lighter, #f6faff); border-top: 1px solid #e3e8ef;
}
.bsv[data-bsv-layout="d"] .cm-rail .bsv-cancel-bar .btn-ghost { background: #fff; }

/* Pick card: blue "See ticket", one size down from btn-l; price ~17% smaller. */
.bsv .btn-primary.bsv-pick-cta.bsv-pick-cta--blue { --btn-bg: var(--color-brand); border-radius: 6px; }
.bsv[data-bsv-layout="d"] .bsv-pick-price { font-size: 30px; }

/* Narrow price filter: "no added fees" on the "Price per ticket" line. */
.bsv[data-bsv-layout="d"][data-narrow="1"] .bsv-budget-label { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px; }

/* ══ Panels in layout d (2026-10-16): up to 5 cards in an rys-slider ══════
   Desktop: spp 3. Touch: the slider is in scroll mode with spp 1 — each
   slide narrowed to 82% so the next card peeks. The component sets the
   slide's flex inline, hence !important. */
.bsv .bsv-slider--panel { display: block; --rys-gap: 12px; }
.bsv .bsv-slider--panel > .bsv-pick { height: auto; }
@media (pointer: coarse) {
   .bsv[data-narrow="1"] .bsv-slider--panel > .bsv-pick.rys-slide { flex: 0 0 82% !important; }
}

/* ── Round 7 (Keith, 2026-10-16) ──────────────────────────────────────── */

/* A ticket card is never wider than 400px (Our picks and panels). */
.bsv .bsv-pick { max-width: 400px; }

/* Narrow: Our picks always stack, one per row — auto-fit would put 2–3 side
   by side on a tablet-width mobile site. */
.bsv[data-narrow="1"] .bsv-picks > .bsv-picks-row { grid-template-columns: minmax(0, 1fr); }

/* Panel cards: the seats are the title; no byline. */
.bsv .bsv-pick-top--seat { padding-bottom: 12px; }
.bsv .bsv-pick-seat-title { color: inherit; text-decoration: none; }
.bsv .bsv-pick-seat-title:hover { text-decoration: underline; }


/* Deal badge beside the big price (layout d, 80+). */
.bsv .bsv-pick-pricerow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.bsv .bsv-pick-pricerow .bsv-pick-deal { flex: 0 0 auto; padding: 3px 8px; }   /* no score box, so even padding */