/* Same rail, inset, type and motion as the app's .ws-view-tabs. */
#billToggle,
#seatPick,
#product-showcase .showcase-nav {
  --landing-control-height: 36px;
  --landing-control-radius: 9px;
  --landing-control-accent: var(--purple, #7a5fd6);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: var(--surface-container, #fff);
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#billToggle,
#seatPick { display: inline-flex; }
/* The app's final light-theme override keeps a 1px transparent border and removes
   the earlier hairline/shadow. Retain that inset without reintroducing an outline. */
html[data-theme="light"] #billToggle,
html[data-theme="light"] #seatPick,
html[data-theme="light"] #product-showcase .showcase-nav {
  border: 1px solid transparent;
  box-shadow: none;
}
#billToggle::-webkit-scrollbar,
#seatPick::-webkit-scrollbar,
#product-showcase .showcase-nav::-webkit-scrollbar { display: none; }
#product-showcase .showcase-nav { max-width: calc(100% - 32px); }

#billToggle .bt-opt,
#seatPick .seat-opt,
#product-showcase .showcase-nav button {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--landing-control-height);
  min-height: var(--landing-control-height);
  margin: 0;
  padding: 0 14px;
  gap: 7px;
  border: 0;
  border-radius: var(--landing-control-radius);
  background: transparent;
  box-shadow: none;
  color: var(--muted, #76767e);
  font: 600 13px/1 var(--font-sans, sans-serif);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
#seatPick .seat-opt { min-width: 36px; padding-inline: 10px; }
#seatPick .seat-opt-more { padding-inline: 14px; }
#seatPick .seat-pick-l {
  flex: 0 0 auto;
  padding-inline: 10px;
  margin: 0;
  color: var(--muted, #76767e);
  font: 500 13px/1 var(--font-sans, sans-serif);
}
#billToggle .bt-opt:hover,
#seatPick .seat-opt:hover,
#product-showcase .showcase-nav button:hover { color: var(--ink, #1c1c1e); }

/* Static selected fills remain as the no-script fallback. A single moving thumb
   takes over only after the selected button has measurable geometry. */
#billToggle .bt-opt.on,
#billToggle .bt-opt[aria-pressed="true"],
#seatPick .seat-opt.on,
#seatPick .seat-opt[aria-pressed="true"],
#product-showcase .showcase-nav button[aria-pressed="true"] {
  color: var(--landing-control-accent);
  background: rgba(122, 95, 214, .16);
  background: color-mix(in srgb, var(--landing-control-accent) 16%, transparent);
  box-shadow: none;
}
#billToggle[data-control-ready="true"] .bt-opt,
#seatPick[data-control-ready="true"] .seat-opt,
#product-showcase .showcase-nav[data-control-ready="true"] button { background: transparent; }

#billToggle .landing-control-thumb,
#seatPick .landing-control-thumb,
#product-showcase .showcase-nav .landing-control-thumb {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  border: 0;
  border-radius: var(--landing-control-radius);
  background: rgba(122, 95, 214, .16);
  background: color-mix(in srgb, var(--landing-control-accent) 16%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--tab-slide-dur, 300ms) var(--tab-slide-ease, cubic-bezier(.22, 1, .36, 1)),
    width var(--tab-slide-dur, 300ms) var(--tab-slide-ease, cubic-bezier(.22, 1, .36, 1)),
    height var(--tab-slide-dur, 300ms) var(--tab-slide-ease, cubic-bezier(.22, 1, .36, 1)),
    opacity 150ms ease;
}
#billToggle .bt-opt:focus-visible,
#seatPick .seat-opt:focus-visible,
#product-showcase .showcase-nav button:focus-visible {
  outline: 2px solid var(--landing-control-accent);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  #billToggle .landing-control-thumb,
  #seatPick .landing-control-thumb,
  #product-showcase .showcase-nav .landing-control-thumb,
  #billToggle .bt-opt,
  #seatPick .seat-opt,
  #product-showcase .showcase-nav button { transition: none; }
}