/* The phone choice row, shared by every choice pill group that carries [data-bk-choices]: the booking request
   form's choice fields (Where to, Trip type, any other), the partners apply form's Category, a brand shop's
   category filters and the deals pages' category chips (lib/choice-row.js). On a phone the group is one row
   that swipes sideways only (overflow-y is hidden, the pills keep room for their focus ring). The row runs out
   to the edge of what holds it (--choice-bleed, the page gutter unless a page sets its own), the pill past the
   edge peeks and the edge fades while there is more to see (public/assets/booking-choices.js sets data-edge).
   Desktop keeps the wrapping pills. The radios and checkboxes stay the controls; each page draws its own pills.
   The row rules lead with ":root .ls" so they outweigh each page's own wrap rule (.ls .partners-form-card
   .cat-pills, .xb-quote .bk-chips) whatever order the sheets load in. */
@media (max-width: 600px) {
  :root .ls [data-bk-choices] {
    --choice-fade: 44px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: calc(var(--choice-bleed, var(--ls-gutter, 16px)) * -1);
    padding: 6px var(--choice-bleed, var(--ls-gutter, 16px)) 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--choice-bleed, var(--ls-gutter, 16px));
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  :root .ls [data-bk-choices]::-webkit-scrollbar { display: none; }
  :root .ls [data-bk-choices] > * { flex: none; scroll-snap-align: start; }
  :root .ls [data-bk-choices] > * > span { white-space: nowrap; }
  /* The radios and checkboxes are laid over their pill. A page's own input rule (min-height: 52px) must not stretch them
     past it: that 8px of overflow made the row scroll up and down and clip the pills. */
  :root .ls [data-bk-choices] > * > input:is([type="radio"], [type="checkbox"]) { min-height: 0; max-height: 100%; }
  :root .ls [data-bk-choices]:is([data-edge="start"], [data-edge="mid"]) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--choice-fade)), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--choice-fade)), transparent);
  }
  :root .ls [data-bk-choices][data-edge="mid"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--choice-fade), #000 calc(100% - var(--choice-fade)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--choice-fade), #000 calc(100% - var(--choice-fade)), transparent);
  }
  :root .ls [data-bk-choices][data-edge="end"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--choice-fade));
            mask-image: linear-gradient(to right, transparent, #000 var(--choice-fade));
  }
  /* the booking request form's pills: compact, round, on the selector family's colours */
  .xb-quote [data-bk-choices] .paid-option span { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  :root .ls [data-bk-choices] { scroll-behavior: smooth; }
}