/* product page: book a seat in a scheduled run (static/js/scheduled-runs.js) */
.run-pick { margin: 18px 0 6px; padding: clamp(18px, 2vw, 28px); border-radius: 4px 20px 4px 20px; background: linear-gradient(160deg, rgba(30, 37, 84, .82), rgba(16, 20, 48, .82)); box-shadow: inset 0 0 0 1px rgba(140, 160, 255, .18), 0 24px 50px -36px #000; display: grid; gap: 16px; }
.run-pick[hidden] { display: none; }
.rp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 20px; }
.rp-head h2 { margin: 6px 0 0; font: 700 clamp(20px, .5vw + 14px, 26px) var(--head); color: #fff; }
.rp-zone { margin: 0; font-size: 13px; color: var(--muted); }
.rp-step { display: grid; gap: 9px; }
.rp-step[hidden] { display: none; }
.rp-label { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #9fb4ff; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { display: grid; gap: 2px; min-width: 96px; padding: 9px 14px; text-align: left; border: 0; border-radius: 3px 12px 3px 12px; background: rgba(8, 11, 30, .55); box-shadow: inset 0 0 0 1px rgba(140, 160, 255, .22); color: #dfe6fb; cursor: pointer; transition: background .15s, box-shadow .15s; }
.rp-chip b { font: 700 14px var(--body); color: #fff; }
.rp-chip small { font: 600 12px var(--body); color: #8fd8ff; }
.rp-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #3fd8ff; }
.rp-chip.on { background: linear-gradient(135deg, rgba(31, 168, 255, .28), rgba(75, 85, 240, .3)); box-shadow: inset 0 0 0 1.5px #3fd8ff; }
.rp-chip:disabled { opacity: .45; cursor: not-allowed; }
.rp-chip:disabled small { color: #ff9c86; }
.rp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.rp-status { margin: 0; font-size: 13.5px; color: var(--soft); }
.rp-clear { border: 0; background: none; color: #9fe6ff; font: 600 13px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.run-pick.is-empty .rp-step { display: none; }
@media (max-width: 640px) { .rp-chip { min-width: 0; flex: 1 1 calc(50% - 8px); } }