/* =============================================================================================
   Public purchase journey — S1 to S11.

   Transcribed from "Journey 1 - Search & Results", "Journey 2 - Checkout & Payment" and
   "Journey 3 - Confirmation & E-ticket".
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   S1 hero

   The design's hero is a burgundy gradient with a photographic slot over it and a dark scrim
   between the photo and the text. No photograph shipped -- the handoff asks for real Svaneti
   photography rather than a stock substitute -- so the gradient stands alone and the slot is one
   custom property away from being filled:

       .vs-hero { --hero-image: url('/img/hero.jpg'); }

   The scrim stays either way, so the text keeps its contrast when a photograph does arrive.
   --------------------------------------------------------------------------------------------- */

.vs-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-12) var(--space-6);
  background:
    var(--hero-image, none) center / cover no-repeat,
    linear-gradient(160deg, #521320 0%, #7A1F2D 55%, #8C3A2E 100%);
}

.vs-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(32, 24, 20, 0.25), rgba(32, 24, 20, 0.5) 82%, rgba(32, 24, 20, 0.25));
}

.vs-hero__content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vs-hero__title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: var(--leading-display);
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.vs-hero__subtitle {
  font-size: var(--text-title-17);
  color: #F5EFE6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.vs-hero__widget {
  position: relative;
  width: 100%;
  max-width: 960px;
}

/* ---------------------------------------------------------------------------------------------
   Search widget
   --------------------------------------------------------------------------------------------- */

.vs-search {
  background: var(--color-bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* On a results page the widget is a plain panel rather than a floating card. */
.vs-search--inline {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.vs-search__trip {
  display: flex;
  gap: var(--space-2);
}

.vs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13.5px;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.vs-chip--selected {
  background: var(--color-action-primary);
  color: #FFF;
  border-color: var(--color-action-primary);
  font-weight: 700;
}

/* The radio itself stays in the accessibility tree and keeps keyboard behaviour; the chip is its
   label. Hiding it with display:none would take it out of the tab order entirely. */
.vs-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.vs-chip:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.vs-search__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.vs-search__field {
  flex: 1 1 180px;
  min-width: 160px;
}

.vs-search__swap {
  flex: 0 0 var(--touch-target);
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-input);
  background: var(--color-bg-page);
  color: var(--color-action-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-search__submit {
  flex: 1 0 130px;
  font-size: 16px;
  font-weight: 700;
}

.vs-search__passengers {
  border: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.vs-search__note {
  margin: 0;
}

.vs-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.vs-counter-row__label {
  display: flex;
  flex-direction: column;
}

.vs-counter__input {
  width: 56px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-input);
  min-height: var(--touch-target);
  font-family: inherit;
  text-align: center;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------------------------------------------
   S2 results
   --------------------------------------------------------------------------------------------- */

/* `100%` in the max-width is load-bearing, not belt-and-braces.

   `margin: 0 auto` centres this column, and an auto margin on the cross axis of a flex container
   switches the item off stretch: instead of filling the parent it is sized to fit-content, which
   resolves to its own min-content width when that is the larger. Min-content here is set by
   .vs-date-strip, whose days are `flex: 1 0 84px` and so refuse to shrink -- seven of them plus
   gaps is 636px. On a phone that made this column 636px wide inside a 440px page, dragging the
   whole document sideways and taking the fixed tab bar with it.

   Clamping to the parent restores the intended behaviour on both sides: centred under 880px on a
   desktop, and on a phone bounded by the viewport so the strip's own `overflow-x: auto` finally
   has something to overflow and scrolls horizontally, which is what a seven-day strip is for.
   `min-width: 0` does NOT work here -- the item is fit-content sized, not stretched, so there is
   no stretch for a minimum to release. */
.vs-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: min(880px, 100%);
  margin: 0 auto;
}

.vs-results__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* The 7-day price strip. Marked up as a tablist: each day is a tab, the flight list is its panel.
   That is what makes left/right arrow keys move between days for a keyboard user, which is the
   whole point of a strip. */
.vs-date-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.vs-date-strip__day {
  flex: 1 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  min-height: var(--touch-target);
}

.vs-date-strip__day:hover {
  border-color: var(--color-action-primary);
}

.vs-date-strip__day[aria-selected='true'] {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: #FFF;
}

/* Sold out is dashed and struck through as well as pale, so it survives greyscale and colour
   blindness -- the strip is the one place where price and availability are read at a glance. */
.vs-date-strip__day--soldout {
  border-style: dashed;
  color: var(--color-text-disabled);
  background: var(--color-bg-sand-deep);
}

.vs-date-strip__dow {
  font-size: var(--text-caption-12);
  font-weight: 600;
  opacity: 0.85;
}

.vs-date-strip__price {
  font-size: 14.5px;
  font-weight: 700;
}

.vs-flight-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}

.vs-flight-card--unavailable {
  opacity: 0.72;
}

.vs-flight-card__times {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.vs-flight-card__time {
  font-size: var(--text-heading-22);
  font-weight: 700;
}

.vs-flight-card__station {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.vs-flight-card__leg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 90px;
}

.vs-flight-card__rule {
  width: 100%;
  height: 1.5px;
  background: var(--color-border);
  position: relative;
}

.vs-flight-card__rule svg {
  position: absolute;
  right: -2px;
  top: -5px;
}

.vs-flight-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.vs-flight-card__price {
  font-size: var(--text-heading-22);
  font-weight: 700;
}

.vs-availability {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 600;
}

.vs-availability--ok { color: var(--color-status-success); }
.vs-availability--low { color: var(--color-status-warning); }
.vs-availability--none { color: var(--color-status-error); }

/* ---------------------------------------------------------------------------------------------
   S4 alternative dates

   Amber and calm, not red. An exact date being full is an ordinary outcome of a small airline's
   schedule, not a failure the customer caused, and the design is explicit that it must not read
   like an error.
   --------------------------------------------------------------------------------------------- */

.vs-alternatives {
  background: var(--color-bg-page);
  border: 1.5px solid var(--color-accent-gold-deco);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.vs-alternatives__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.vs-alternatives__options {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.vs-alternative {
  font-family: inherit;
  text-align: start;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-5);
  min-height: var(--touch-target);
  cursor: pointer;
  font-size: var(--text-ui-14);
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
}

.vs-alternative:hover {
  border-color: var(--color-action-primary);
}

.vs-alternative__date {
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------
   S3 price calendar
   --------------------------------------------------------------------------------------------- */

.vs-calendar {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 520px;
}

.vs-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.vs-calendar__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  padding-bottom: var(--space-1);
}

.vs-calendar__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: inherit;
  text-decoration: none;
  padding: var(--space-1);
}

.vs-calendar__day:hover {
  border-color: var(--color-action-primary);
}

.vs-calendar__day--empty {
  background: transparent;
}

.vs-calendar__day--soldout {
  background: var(--color-bg-sand-deep);
  color: var(--color-text-disabled);
  border-style: dashed;
  border-color: var(--color-border);
}

.vs-calendar__day--selected {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: #FFF;
}

.vs-calendar__daynum {
  font-size: var(--text-ui-14);
  font-weight: 600;
}

.vs-calendar__price {
  font-size: 11px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------
   The seat-count badge.

   An iOS notification badge: a circle at one digit, a pill from two, white on the status red. That
   pairing is 7.2:1, comfortably past AA, and the white is stated rather than inherited -- the badge
   sits inside a selected cell that has already set colour to white and inside an unselected one that
   has not, and inheriting would make it legible in only one of them. That is the defect this
   replaces: red text drawn over a red-tinted cell, unreadable exactly where it mattered.

   Positioned into the cell's own corner with `position: absolute`, and the cell reserves the top
   strip for it, so it never lands on the day number, the price, the focus ring or a neighbour. The
   focus ring is drawn on the cell and the badge is inset from the edge, so the two never touch.
   --------------------------------------------------------------------------------------------- */

.vs-seat-badge {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);

  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;

  background: var(--color-status-error);
  color: #FFF;

  /* Against a cell that is itself red-tinted or primary-filled, so the badge keeps its own edge. */
  box-shadow: 0 0 0 1.5px var(--color-bg-surface);

  pointer-events: none;
}

/* Two and three digits widen rather than shrink the text: a clipped "12" is worse than a wider
   badge, and a badge whose height changes with its number makes a row of cells look broken. */
.vs-seat-badge[data-digits='2'] {
  min-width: 22px;
}

.vs-seat-badge[data-digits='3'] {
  min-width: 28px;
}

/* Sold out carries no digits, so it is a dot rather than a shrunken empty pill. Its meaning is in
   the visually hidden text beside it, which is what every reader gets. */
.vs-seat-badge--soldout {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding-inline: 0;
}

/* Seats remain but not enough for this party. Outlined rather than filled, so it is not mistaken
   at a glance for a day that can be booked -- and it says so in words as well. */
.vs-seat-badge--partial {
  background: var(--color-bg-surface);
  color: var(--color-status-error);
  box-shadow: 0 0 0 1.5px var(--color-status-error);
}

/* The cells the badge is positioned against. Stated here rather than on each cell rule so that a
   new surface adopting the badge cannot forget it and have the badge escape to the page corner. */
.vs-calendar__day,
.vs-date-strip__day {
  position: relative;
}

/* Room at the top of a calendar cell so a badge never reaches the day number. The cell centres its
   content in what is left, which keeps the grid's rhythm. */
.vs-calendar__day {
  padding-block-start: 16px;
}

@media (max-width: 400px) {
  .vs-seat-badge {
    min-width: 15px;
    height: 15px;
    font-size: 9.5px;
  }

  .vs-seat-badge[data-digits='2'] {
    min-width: 19px;
  }

  .vs-seat-badge[data-digits='3'] {
    min-width: 24px;
  }
}

/* ---------------------------------------------------------------------------------------------
   Checkout — stepper, hold timer, fare summary
   --------------------------------------------------------------------------------------------- */

.vs-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-6);
  align-items: start;
}

.vs-checkout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-4);
}

.vs-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--color-bg-sand);
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}

.vs-stepper__item--done {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
  border-color: var(--color-status-success-border);
}

.vs-stepper__item--current {
  background: var(--color-action-primary);
  color: #FFF;
}

.vs-stepper__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 700;
}

.vs-stepper__item--done .vs-stepper__number {
  background: var(--color-status-success);
  color: #FFF;
}

.vs-hold {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.vs-hold--ending {
  background: var(--color-status-warning-bg);
  border: 1.5px solid var(--color-accent-gold-deco);
  color: var(--color-status-warning-text);
}

.vs-hold--expired {
  background: var(--color-status-error-bg);
  border: 1.5px solid var(--color-status-error);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.vs-hold__body { flex: 1; }

.vs-hold__clock {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vs-fare {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-ui-14);
}

.vs-fare__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.vs-fare__total {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-title-17);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------
   E-ticket (S10). Mirrored by TicketPdfGenerator.
   --------------------------------------------------------------------------------------------- */

.vs-ticket {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  max-width: 720px;
}

/* Shown in place of the ticket when no ticket was issued. Same width as the document it stands in
   for, so an unpaid booking does not read as a narrower, lesser version of a real one — it is a
   different thing, not a smaller one. */
.vs-ticket__not-issued {
  max-width: 720px;
}

/* A rehearsal ticket, marked on its face.

   Solid warning rather than a tinted alert, matching .vs-simulation-banner and for the same
   reason: this is a statement about the document, not a message about the page. It is the first
   child of the article so it prints and screenshots with the ticket -- the two ways this leaves
   the screen -- and the dashed edge keeps it legible if a printer drops the background fill. */
.vs-ticket__simulated {
  background: var(--color-status-warning);
  border-bottom: 2px dashed #FFFFFF;
  color: #FFFFFF;
  font-size: var(--text-ui-14);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: var(--space-3) var(--space-6);
  text-align: center;
}

/* The border says it again at the edge of the card, for a screenshot cropped below the banner. */
.vs-ticket--simulated {
  border-color: var(--color-status-warning);
}

.vs-ticket__header {
  background: var(--color-action-primary);
  color: #FFF;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* footer-logo.png is the lockup already knocked out in white, so it sits on the burgundy header as
   drawn. This used to invert the crimson mark instead, which worked only for as long as the file
   happened to be a dark logo on transparency -- a filter cannot know what it is correcting. */
.vs-ticket__logo {
  height: 36px;
}

.vs-ticket__body {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
}

.vs-ticket__reference {
  font-family: var(--font-mono);
  font-size: var(--text-heading-22);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.vs-ticket__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.vs-ticket__qr img {
  width: 148px;
  height: 148px;
  /* The symbol is drawn at 4px a module and scaled up. Smoothing it would blur the module edges,
     which is the one thing a scanner needs sharp. */
  image-rendering: pixelated;
}

.vs-ticket__reference-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.vs-ticket__kicker {
  font-size: var(--text-caption-12);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #E8C9CE;
}

.vs-ticket__leg {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.vs-ticket__time {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.vs-ticket__arrival {
  text-align: end;
}

/* The tear line. Two half-circles punched out of the card edges, the way a paper ticket is
   perforated -- it is what makes the artifact read as a ticket rather than as a receipt. */
.vs-ticket__perforation {
  border-top: 2px dashed var(--color-border);
  margin-inline: calc(var(--space-6) * -1);
  position: relative;
}

.vs-ticket__perforation::before,
.vs-ticket__perforation::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-page);
}

.vs-ticket__perforation::before {
  left: -10px;
  border-right: 1px solid var(--color-border);
}

.vs-ticket__perforation::after {
  right: -10px;
  border-left: 1px solid var(--color-border);
}

.vs-ticket__passengers th {
  background: transparent;
}

.vs-ticket__footer {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border-hairline);
}

/* ---------------------------------------------------------------------------------------------
   S9 confirmation
   --------------------------------------------------------------------------------------------- */

.vs-success {
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-status-success);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.vs-success__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
}

.vs-success__title {
  font-size: var(--text-heading-22);
  font-weight: 700;
  color: var(--color-status-success);
}

.vs-success__actions {
  justify-content: center;
  margin-top: var(--space-1);
}

.vs-lookup__help {
  border-top: 1px solid var(--color-border-hairline);
  padding-top: var(--space-3);
  margin: 0;
}

/* The ticket prints as itself: no site chrome, no shadow, and never split across two sheets. */
@media print {
  .vs-header,
  .vs-footer,
  .vs-skip-link,
  .vs-success__actions,
  .vs-stepper {
    display: none !important;
  }

  .vs-ticket {
    box-shadow: none;
    break-inside: avoid;
  }
}

@media (max-width: 1024px) {
  .vs-checkout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vs-checkout__aside {
    position: static;
  }
}

@media (max-width: 768px) {
  .vs-hero {
    min-height: 0;
    padding: var(--space-8) var(--space-4);
  }

  .vs-hero__title {
    font-size: 30px;
  }

  .vs-flight-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .vs-flight-card__aside {
    align-items: flex-start;
  }

  .vs-ticket__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The submit gets a row to itself on a phone.

     Its flex-basis of 130px is small enough to sit beside the date field on a narrow screen, and
     that shared row is where the layout breaks on iOS. Safari gives input[type="date"] a large
     intrinsic width there -- it renders "Aug 20, 2026" rather than a numeric mask -- and will not
     take it below that for a width:100% alone, so the field overflows its flex item and the button
     is painted across the date. Chrome cannot reproduce it: its date input is narrower and shrinks,
     so the row looks correct on a desktop emulator and wrong on the actual phone.

     Removing the shared row fixes it for any engine rather than for the one measured, and a
     full-width primary action is the conventional shape on a phone anyway. min-width:0 is the part
     that lets the field's width:100% win over an intrinsic width, and is kept as the defence for
     every other control in the form. */
  .vs-search__field .vs-input {
    min-width: 0;
    max-width: 100%;
  }

  .vs-search__submit {
    flex: 1 0 100%;
  }
}

/* Seat count under each day in the price strip. Its own line, so a long "12 seats left" never
   collides with the price above it, and reserved height so the strip does not jump when one day
   sells out. */
.vs-date-strip__seats {
  display: block;
  min-height: 1.1em;
}

.vs-caption--error {
  color: var(--color-status-error);
}