<!-- Icons: Lucide (lucide.dev), ISC licence -->
<style>
.odl-seat-picker { box-sizing: border-box; inline-size: 100%; max-inline-size: 44rem; margin-inline: auto; container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-seat-picker *, .odl-seat-picker *::before, .odl-seat-picker *::after { box-sizing: border-box; }
.odl-seat-picker svg { flex: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke-md); stroke-linecap: round; stroke-linejoin: round; }
.odl-seat-picker .odl-card { display: grid; gap: var(--ds-space-stack-lg); padding: var(--ds-space-inset-xl); background: var(--ds-color-surface-raised); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); }
.odl-seat-picker .odl-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ds-space-inset-lg); }
.odl-seat-picker .odl-poster { display: block; inline-size: 6rem; block-size: 9rem; border-radius: var(--ds-radius-nested); object-fit: cover; background: var(--ds-color-bg-neutral-subtle); }
.odl-seat-picker .odl-info { display: grid; gap: var(--ds-space-stack-sm); min-inline-size: 0; }
.odl-seat-picker h3 { margin: 0; font: var(--ds-text-title-lg); text-wrap: balance; }
.odl-seat-picker .odl-tags { margin: calc(-1 * var(--ds-space-stack-xs)) 0 0; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-seat-picker .odl-facts { display: grid; gap: var(--ds-space-stack-xs); margin: 0; padding: 0; list-style: none; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; }
.odl-seat-picker .odl-facts li { display: flex; align-items: center; gap: var(--ds-space-inline-sm); }
.odl-seat-picker .odl-facts svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); color: var(--ds-color-icon-subtle); }
.odl-seat-picker fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.odl-seat-picker legend { padding: 0; }
.odl-seat-picker .odl-map { overflow-x: auto; overscroll-behavior-x: contain; padding: var(--ds-space-4); border-radius: var(--ds-radius-nested); }
.odl-seat-picker .odl-map:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-seat-picker .odl-hall { --seat: max(var(--ds-size-target-min), 2.25rem); display: grid; justify-content: center; gap: var(--ds-space-6); inline-size: max-content; min-inline-size: 100%; }
.odl-seat-picker .odl-screen { display: grid; justify-items: center; gap: var(--ds-space-4); margin-block-end: var(--ds-space-stack-md); color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); letter-spacing: var(--ds-text-label-sm-tracking); }
.odl-seat-picker .odl-screen svg { inline-size: 100%; block-size: var(--ds-space-24); overflow: visible; }
.odl-seat-picker .odl-screen .odl-arc { fill: none; stroke: var(--ds-color-border-strong); stroke-width: 3; stroke-linecap: round; }
.odl-seat-picker .odl-screen .odl-glow { fill: var(--ds-color-bg-neutral-subtle); stroke: none; }
.odl-seat-picker .odl-tier { margin: var(--ds-space-stack-sm) 0 var(--ds-space-4); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); text-align: center; font-variant-numeric: tabular-nums; }
.odl-seat-picker .odl-tier:first-of-type { margin-block-start: 0; }
.odl-seat-picker .odl-row { display: grid; grid-template-columns: var(--ds-space-16) repeat(2, var(--seat)) var(--ds-space-16) repeat(6, var(--seat)) var(--ds-space-16) repeat(2, var(--seat)) var(--ds-space-16);
  align-items: center; gap: var(--ds-space-4); }
.odl-seat-picker .odl-rl { color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); text-align: center; }
.odl-seat-picker .odl-gap { inline-size: var(--ds-space-16); }
.odl-seat-picker .odl-seat { position: relative; display: grid; place-items: center; inline-size: var(--seat); block-size: var(--seat); cursor: pointer; }
.odl-seat-picker .odl-seat input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.odl-seat-picker .odl-seat span { display: grid; place-items: center; inline-size: max(82%, 1.5rem); block-size: max(82%, 1.5rem); border: var(--ds-border-width-default) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-control-sm) var(--ds-radius-control-sm) var(--ds-radius-2) var(--ds-radius-2); background: var(--ds-color-surface-raised); color: transparent; font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), transform var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-seat-picker .odl-seat span svg { inline-size: 62%; block-size: 62%; }
.odl-seat-picker .odl-seat:hover span { border-color: var(--ds-color-border-accent); }
/* Recliners: the same quiet seat, wider-backed with a heavier outline; their price row names them. */
.odl-seat-picker .odl-seat.is-premium span { border-width: var(--ds-border-width-emphasis); border-color: var(--ds-color-border-default); border-radius: var(--ds-radius-control) var(--ds-radius-control) var(--ds-radius-2) var(--ds-radius-2); }
.odl-seat-picker .odl-seat.is-access span { color: var(--ds-color-text-secondary); }
.odl-seat-picker .odl-seat input:checked + span { border-color: var(--ds-color-bg-accent-bold); background: var(--ds-color-bg-accent-bold); color: var(--ds-color-text-on-accent); }
.odl-seat-picker .odl-seat input:disabled + span { border-color: transparent; background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-disabled); }
.odl-seat-picker .odl-seat:has(input:disabled) { cursor: not-allowed; }
.odl-seat-picker .odl-seat input:focus-visible + span { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-seat-picker .odl-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-stack-sm) var(--ds-space-inset-lg); margin: 0; padding: 0; list-style: none; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-seat-picker .odl-legend li { display: inline-flex; align-items: center; gap: var(--ds-space-inline-sm); }
.odl-seat-picker .odl-legend i { display: grid; place-items: center; inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); border: var(--ds-border-width-default) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-control-sm) var(--ds-radius-control-sm) var(--ds-radius-2) var(--ds-radius-2); background: var(--ds-color-surface-raised); }
.odl-seat-picker .odl-legend .is-sel i { border-color: var(--ds-color-bg-accent-bold); background: var(--ds-color-bg-accent-bold); }
.odl-seat-picker .odl-legend .is-taken i { border-color: transparent; background: var(--ds-color-bg-neutral-subtle); color: var(--ds-color-text-disabled); }
.odl-seat-picker .odl-legend .is-premium i { border-width: var(--ds-border-width-emphasis); border-color: var(--ds-color-border-default); border-radius: var(--ds-radius-control) var(--ds-radius-control) var(--ds-radius-2) var(--ds-radius-2); }
.odl-seat-picker .odl-legend .is-access i { color: var(--ds-color-text-secondary); }
.odl-seat-picker .odl-legend i svg { inline-size: 70%; block-size: 70%; }
.odl-seat-picker .odl-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-stack-md) var(--ds-space-inline-md); padding-block-start: var(--ds-space-stack-lg);
  border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-seat-picker .odl-picked { display: grid; gap: var(--ds-space-stack-xs); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; }
.odl-seat-picker .odl-total { display: block; color: var(--ds-color-text-primary); font: var(--ds-text-headline-sm); font-variant-numeric: tabular-nums; }
.odl-seat-picker .odl-go { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-sm); min-inline-size: 10rem; min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min));
  padding: 0 var(--ds-space-inset-lg); border: 0; border-radius: var(--ds-radius-control); background: var(--ds-color-bg-action-primary); color: var(--ds-color-text-on-action); font: var(--ds-text-label-lg); cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-seat-picker .odl-go:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-seat-picker .odl-go:disabled { background: var(--ds-color-bg-disabled); color: var(--ds-color-text-disabled); cursor: not-allowed; }
.odl-seat-picker .odl-go:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-seat-picker .odl-go svg { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); }
.odl-seat-picker .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 30rem) {
  .odl-seat-picker .odl-card { padding: var(--ds-space-inset-lg); }
  .odl-seat-picker .odl-poster { inline-size: 4.5rem; block-size: 6.75rem; }
  .odl-seat-picker h3 { font: var(--ds-text-title-md); }
  .odl-seat-picker .odl-go { flex: 1 1 100%; }
  .odl-seat-picker .odl-legend { justify-content: flex-start; }
  /* Every seat stays 24 px or more (the drawn seat fills its target); the aisles narrow, the row letter shows on the left only, and the map scrolls sideways in its own box if it must. */
  .odl-seat-picker .odl-hall { --seat: max(var(--ds-size-target-min), 1.5rem); gap: var(--ds-space-6); }
  .odl-seat-picker .odl-row { grid-template-columns: var(--ds-space-12) repeat(2, var(--seat)) var(--ds-space-8) repeat(6, var(--seat)) var(--ds-space-8) repeat(2, var(--seat)); gap: var(--ds-space-2); }
  .odl-seat-picker .odl-row .odl-rl:last-child { display: none; }
  .odl-seat-picker .odl-gap { inline-size: var(--ds-space-8); }
  .odl-seat-picker .odl-map { margin-inline: calc(-1 * var(--ds-space-4)); }
}
@media (prefers-reduced-motion: reduce) { .odl-seat-picker, .odl-seat-picker *, .odl-seat-picker *::before, .odl-seat-picker *::after { transition: none !important; animation: none !important; } }
</style>
<section class="odl-seat-picker" aria-labelledby="odl-sp-title">
  <div class="odl-card">
    <header class="odl-head">
      <img class="odl-poster" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=192&h=288&fit=crop&auto=format&q=70" alt="Poster for The Copper Coast: a road through red desert rocks" width="192" height="288" loading="lazy" decoding="async">
      <div class="odl-info">
        <h3 id="odl-sp-title">The Copper Coast</h3>
        <p class="odl-tags">Drama · 2 h 06 min · 12A</p>
        <ul class="odl-facts">
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>Corvelle Picturehouse · Screen 3</li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Fri 24 Oct, 19:40</li>
        </ul>
      </div>
    </header>
    <fieldset>
      <legend class="odl-sr">Choose your seats</legend>
      <div class="odl-map" tabindex="0" aria-label="Seat map">
        <div class="odl-hall">
          <div class="odl-screen" aria-hidden="true"><svg viewBox="0 0 300 32" preserveAspectRatio="none"><path class="odl-glow" d="M8 22Q150-4 292 22L270 32Q150 14 30 32z"/><path class="odl-arc" d="M8 22Q150-4 292 22"/></svg>Screen</div>
          <p class="odl-tier" aria-hidden="true">Standard · $12.50</p>
          <div class="odl-row" role="group" aria-label="Row A"><span class="odl-rl" aria-hidden="true">A</span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A1" data-price="12.5" aria-label="Row A, seat 1, $12.50"><span>1</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A2" data-price="12.5" aria-label="Row A, seat 2, $12.50"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A3" data-price="12.5" aria-label="Row A, seat 3, $12.50"><span>3</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A4" data-price="12.5" aria-label="Row A, seat 4, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A5" data-price="12.5" aria-label="Row A, seat 5, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A6" data-price="12.5" aria-label="Row A, seat 6, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A7" data-price="12.5" aria-label="Row A, seat 7, $12.50"><span>7</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A8" data-price="12.5" aria-label="Row A, seat 8, $12.50"><span>8</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A9" data-price="12.5" aria-label="Row A, seat 9, $12.50"><span>9</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="A10" data-price="12.5" aria-label="Row A, seat 10, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><span class="odl-rl" aria-hidden="true">A</span></div>
          <div class="odl-row" role="group" aria-label="Row B"><span class="odl-rl" aria-hidden="true">B</span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B1" data-price="12.5" aria-label="Row B, seat 1, $12.50"><span>1</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B2" data-price="12.5" aria-label="Row B, seat 2, $12.50"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B3" data-price="12.5" aria-label="Row B, seat 3, $12.50"><span>3</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B4" data-price="12.5" aria-label="Row B, seat 4, $12.50"><span>4</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B5" data-price="12.5" aria-label="Row B, seat 5, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B6" data-price="12.5" aria-label="Row B, seat 6, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B7" data-price="12.5" aria-label="Row B, seat 7, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B8" data-price="12.5" aria-label="Row B, seat 8, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B9" data-price="12.5" aria-label="Row B, seat 9, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="B10" data-price="12.5" aria-label="Row B, seat 10, $12.50"><span>10</span></label><span class="odl-rl" aria-hidden="true">B</span></div>
          <div class="odl-row" role="group" aria-label="Row C"><span class="odl-rl" aria-hidden="true">C</span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C1" data-price="12.5" aria-label="Row C, seat 1, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C2" data-price="12.5" aria-label="Row C, seat 2, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C3" data-price="12.5" aria-label="Row C, seat 3, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C4" data-price="12.5" aria-label="Row C, seat 4, $12.50"><span>4</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C5" data-price="12.5" aria-label="Row C, seat 5, $12.50"><span>5</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C6" data-price="12.5" aria-label="Row C, seat 6, $12.50"><span>6</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C7" data-price="12.5" aria-label="Row C, seat 7, $12.50"><span>7</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C8" data-price="12.5" aria-label="Row C, seat 8, $12.50"><span>8</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C9" data-price="12.5" aria-label="Row C, seat 9, $12.50"><span>9</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="C10" data-price="12.5" aria-label="Row C, seat 10, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><span class="odl-rl" aria-hidden="true">C</span></div>
          <div class="odl-row" role="group" aria-label="Row D"><span class="odl-rl" aria-hidden="true">D</span><label class="odl-seat is-access"><input type="checkbox" name="odl-sp-seat" value="D1" data-price="12.5" aria-label="Row D, seat 1, wheelchair space, $12.50"><span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D2" data-price="12.5" aria-label="Row D, seat 2, $12.50"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D3" data-price="12.5" aria-label="Row D, seat 3, $12.50"><span>3</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D4" data-price="12.5" aria-label="Row D, seat 4, $12.50"><span>4</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D5" data-price="12.5" aria-label="Row D, seat 5, $12.50"><span>5</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D6" data-price="12.5" aria-label="Row D, seat 6, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D7" data-price="12.5" aria-label="Row D, seat 7, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D8" data-price="12.5" aria-label="Row D, seat 8, $12.50"><span>8</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="D9" data-price="12.5" aria-label="Row D, seat 9, $12.50"><span>9</span></label><label class="odl-seat is-access"><input type="checkbox" name="odl-sp-seat" value="D10" data-price="12.5" aria-label="Row D, seat 10, wheelchair space, $12.50"><span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/></svg></span></label><span class="odl-rl" aria-hidden="true">D</span></div>
          <div class="odl-row" role="group" aria-label="Row E"><span class="odl-rl" aria-hidden="true">E</span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E1" data-price="12.5" aria-label="Row E, seat 1, $12.50"><span>1</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E2" data-price="12.5" aria-label="Row E, seat 2, $12.50"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E3" data-price="12.5" aria-label="Row E, seat 3, $12.50"><span>3</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E4" data-price="12.5" aria-label="Row E, seat 4, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E5" data-price="12.5" aria-label="Row E, seat 5, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E6" data-price="12.5" aria-label="Row E, seat 6, $12.50" checked><span>6</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E7" data-price="12.5" aria-label="Row E, seat 7, $12.50" checked><span>7</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E8" data-price="12.5" aria-label="Row E, seat 8, $12.50"><span>8</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E9" data-price="12.5" aria-label="Row E, seat 9, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="E10" data-price="12.5" aria-label="Row E, seat 10, $12.50"><span>10</span></label><span class="odl-rl" aria-hidden="true">E</span></div>
          <div class="odl-row" role="group" aria-label="Row F"><span class="odl-rl" aria-hidden="true">F</span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F1" data-price="12.5" aria-label="Row F, seat 1, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F2" data-price="12.5" aria-label="Row F, seat 2, $12.50"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F3" data-price="12.5" aria-label="Row F, seat 3, $12.50"><span>3</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F4" data-price="12.5" aria-label="Row F, seat 4, $12.50"><span>4</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F5" data-price="12.5" aria-label="Row F, seat 5, $12.50"><span>5</span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F6" data-price="12.5" aria-label="Row F, seat 6, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F7" data-price="12.5" aria-label="Row F, seat 7, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F8" data-price="12.5" aria-label="Row F, seat 8, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><span class="odl-gap"></span><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F9" data-price="12.5" aria-label="Row F, seat 9, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat"><input type="checkbox" name="odl-sp-seat" value="F10" data-price="12.5" aria-label="Row F, seat 10, $12.50"><span>10</span></label><span class="odl-rl" aria-hidden="true">F</span></div>
          <p class="odl-tier" aria-hidden="true">Recliners · $18.00</p>
          <div class="odl-row" role="group" aria-label="Row G"><span class="odl-rl" aria-hidden="true">G</span><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G1" data-price="18.0" aria-label="Row G, seat 1, recliner, $18.00"><span>1</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G2" data-price="18.0" aria-label="Row G, seat 2, recliner, $18.00"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G3" data-price="18.0" aria-label="Row G, seat 3, recliner, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G4" data-price="18.0" aria-label="Row G, seat 4, recliner, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G5" data-price="18.0" aria-label="Row G, seat 5, recliner, $18.00"><span>5</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G6" data-price="18.0" aria-label="Row G, seat 6, recliner, $18.00"><span>6</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G7" data-price="18.0" aria-label="Row G, seat 7, recliner, $18.00"><span>7</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G8" data-price="18.0" aria-label="Row G, seat 8, recliner, $18.00"><span>8</span></label><span class="odl-gap"></span><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G9" data-price="18.0" aria-label="Row G, seat 9, recliner, $18.00"><span>9</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="G10" data-price="18.0" aria-label="Row G, seat 10, recliner, $18.00"><span>10</span></label><span class="odl-rl" aria-hidden="true">G</span></div>
          <div class="odl-row" role="group" aria-label="Row H"><span class="odl-rl" aria-hidden="true">H</span><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H1" data-price="18.0" aria-label="Row H, seat 1, recliner, $18.00"><span>1</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H2" data-price="18.0" aria-label="Row H, seat 2, recliner, $18.00"><span>2</span></label><span class="odl-gap"></span><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H3" data-price="18.0" aria-label="Row H, seat 3, recliner, $18.00"><span>3</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H4" data-price="18.0" aria-label="Row H, seat 4, recliner, $18.00"><span>4</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H5" data-price="18.0" aria-label="Row H, seat 5, recliner, $18.00"><span>5</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H6" data-price="18.0" aria-label="Row H, seat 6, recliner, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H7" data-price="18.0" aria-label="Row H, seat 7, recliner, taken" disabled><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H8" data-price="18.0" aria-label="Row H, seat 8, recliner, $18.00"><span>8</span></label><span class="odl-gap"></span><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H9" data-price="18.0" aria-label="Row H, seat 9, recliner, $18.00"><span>9</span></label><label class="odl-seat is-premium"><input type="checkbox" name="odl-sp-seat" value="H10" data-price="18.0" aria-label="Row H, seat 10, recliner, $18.00"><span>10</span></label><span class="odl-rl" aria-hidden="true">H</span></div>
        </div>
      </div>
    </fieldset>
    <ul class="odl-legend" aria-label="Key">
      <li><i></i>Free</li>
      <li class="is-sel"><i></i>Yours</li>
      <li class="is-taken"><i><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></i>Taken</li>
      <li class="is-premium"><i></i>Recliner</li>
      <li class="is-access"><i><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/></svg></i>Wheelchair space</li>
    </ul>
    <div class="odl-sum">
      <p class="odl-picked" aria-live="polite"><span class="odl-what">2 seats · E6, E7</span><span class="odl-total">$25.00</span></p>
      <button type="button" class="odl-go">Continue<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button>
    </div>
  </div>
</section>
<script>
document.querySelectorAll(".odl-seat-picker").forEach((root) => {
  if (root.dataset.odlReady) return; // wire once, even if the file is pasted twice
  root.dataset.odlReady = "1";
  const seats = [...root.querySelectorAll(".odl-seat input")], what = root.querySelector(".odl-what"), total = root.querySelector(".odl-total"), go = root.querySelector(".odl-go");
  const max = 8;
  const sync = () => {
    const picked = seats.filter((s) => s.checked);
    const sum = picked.reduce((t, s) => t + Number(s.dataset.price), 0);
    what.textContent = picked.length ? `${picked.length} seat${picked.length > 1 ? "s" : ""} · ${picked.map((s) => s.value).join(", ")}` : "Pick up to 8 seats";
    total.textContent = `$${sum.toFixed(2)}`;
    go.disabled = !picked.length;
    seats.forEach((s) => { if (!s.checked && !s.hasAttribute("disabled")) s.toggleAttribute("aria-disabled", picked.length >= max); });
  };
  seats.forEach((s) => s.addEventListener("change", () => {
    if (s.checked && seats.filter((x) => x.checked).length > max) s.checked = false;
    sync();
  }));
  sync();
});
</script>