.bido-catalog-page {
  padding: 24px 32px 40px;
  display: grid;
  gap: 16px;
}

/* === Wheels catalog — grouped by trip occasion ===
   /wheels mirrors the /plan picker: vehicles split into the three booking legs
   (Airport arrival / Local transportation / Airport departure). The legs stay
   open blocks (no panel) so the card grid keeps its full width and the columns
   line up across every leg. Each leg gets a tinted, full-width header band —
   one hue for the two airport legs, another for the chauffeur leg — so the
   groups are clearly separated and the page reads with some color, while the
   grid below the band is untouched. `--leg-rgb` / `--leg-ink` are the per-leg
   accent channels the band, icon chip, and tag all compose from. */
.bido-catalog-occasions {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bido-catalog-occasion--airport {
  --leg-rgb: var(--bx-accent-rgb);
  --leg-ink: var(--bx-accent-ink);
}

.bido-catalog-occasion--chauffeur {
  --leg-rgb: var(--bx-teal-rgb);
  --leg-ink: var(--bx-wheels-ink);
}

.bido-catalog-occasion-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 16px;
  padding: 14px 18px;
  border-radius: var(--bx-r-lg);
  border: 1px solid rgba(var(--leg-rgb), 0.22);
  border-inline-start: 3px solid rgba(var(--leg-rgb), 0.85);
  background:
    linear-gradient(90deg, rgba(var(--leg-rgb), 0.20), rgba(var(--leg-rgb), 0.05) 60%, transparent);
}

.bido-catalog-occasion-icon {
  inline-size: 42px;
  block-size: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bx-r);
  background: rgba(var(--leg-rgb), 0.9);
  color: var(--bido-navy);
}

.bido-catalog-occasion-titles {
  flex: 1;
  min-width: 0;
}

.bido-catalog-occasion-titles .name {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bx-ink);
}

.bido-catalog-occasion-titles .muted {
  font-size: var(--bx-text-sm);
}

.bido-catalog-occasion-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: var(--bx-r-pill);
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--leg-ink);
  background: rgba(var(--leg-rgb), 0.16);
}

.bido-catalog-occasion-tag.is-booked {
  color: var(--bx-good-ink);
  background: var(--bx-good-soft);
}

/* === Catalog grid pagination ===
   The non-wheels grids are paged (BidoController::CATALOG_PAGE_SIZE) so a cold
   load never resolves an unbounded number of card photos. This nav renders only
   when there's more than one page: prev/next controls centered around a
   monospace page indicator that matches the catalog's other count chips. */
.bido-catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-block-start: 8px;
}

.bido-catalog-pagination-status {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-sm);
  letter-spacing: 0.04em;
}

/* Standalone section — the whole plan-context block (copy + fields + actions)
   reads as one card on every surface page (all pillar catalogs + listing detail)
   in both the signed-in and guest/empty states. Real surface via the house
   .card tokens; the editable fields inside stay frameless, so only the section —
   not the three fields — carries a border. */
.bido-trip-context-card {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  box-shadow: var(--bx-shadow-soft);
  color: var(--bx-ink);
}

.bido-trip-context-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.bido-trip-context-card-empty {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bido-trip-context-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* === Dark catalog/listing component overrides ===
   The base card is token-driven, so both the signed-in and guest/empty
   variants render as the same standalone card on the dark pages; only the
   border is firmed up a touch here. */
.bx-dark .bido-trip-context-card {
  border-color: rgba(var(--bx-white-rgb), 0.10);
}

.bx-dark .bido-trip-context-copy strong { color: var(--bx-ink); }

.bx-dark .bido-context-form .bido-date-range-button {
  color: var(--bx-ink);
  background: transparent;
}

.bido-trip-form {
  display: grid;
  grid-template-columns: minmax(10rem, 1.25fr) minmax(13rem, 1.1fr) minmax(4.75rem, 0.42fr) minmax(9.5rem, 0.88fr) minmax(7.5rem, auto);
  align-items: stretch;
  gap: 1px;
  padding: 12px;
  background: var(--bx-line);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  overflow: visible;
  box-shadow: var(--bx-shadow-soft);
}

.bido-trip-form .cell {
  min-width: 0;
  min-height: 62px;
  background: var(--bx-paper);
  color: var(--bx-ink);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bido-trip-form .cell.action-cell {
  padding: 10px 14px;
  align-items: center;
  justify-content: flex-start;
}

.bido-trip-form .cell.action-cell .btn {
  width: auto;
  height: auto;
  justify-content: center;
}

.bido-trip-form .eyebrow {
  font-size: var(--bx-text-3xs);
  margin-bottom: 4px;
}

.bido-trip-form .input,
.bido-trip-form .select {
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--bx-ink);
  font-size: var(--bx-text-md);
  font-weight: 700;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.bido-trip-form .input:focus,
.bido-trip-form .select:focus {
  box-shadow: none;
}

/* Borderless select inherits a transparent background; pin its open option list
   to a readable surface + ink so the dropdown is legible on dark and light. */
.bido-trip-form .select option {
  background-color: var(--bx-paper-2);
  color: var(--bx-ink);
}

/* The borderless vibe select otherwise reads as static text — the Group cell
   has a bordered input and the Dates cell has a caret. Hang the same caret on
   the vibe cell so it reads as an editable dropdown across the builder + context
   strips. Tighter inset than the home bar: cell padding is 10px/6px × 14px. */
.bido-trip-form .vibe-cell {
  position: relative;
}
.bido-trip-form .vibe-cell::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  inset-block-end: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--bx-ink-3);
  opacity: 0.75;
  pointer-events: none;
}
.bido-trip-form .vibe-cell .select {
  padding-inline-end: 18px;
}

.bido-trip-form .bido-group-input {
  width: 100%;
  border: 1px solid var(--bx-line-2);
  background: var(--bx-paper-2);
  border-radius: var(--bx-r-sm);
  padding: 6px 8px;
  font-weight: 700;
}

.bido-trip-form .dates-cell {
  cursor: pointer;
}

/* The shared planner form (_trip_planner_form) emits a usually-empty
   #trip_form_errors turbo-frame above its fields. Wrapping that render keeps the
   strip grid at exactly three zones (copy / fields / actions) so the frame can't
   claim the 1fr middle track. min-width:0 lets the inner form shrink. */
.bido-trip-context-fields {
  min-width: 0;
}

/* Variant A — the context-form lives inline in the strip with no inner frame.
   The Update cell is hidden (hide_action: true upstream) so the form is only
   the editable cells, flowing horizontally between copy + actions. */
.bido-context-form {
  grid-template-columns: minmax(12rem, 1.3fr) minmax(4rem, 0.4fr) minmax(8rem, 0.7fr);
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bido-context-form .cell {
  min-height: 0;
  padding: 6px 14px;
  background: transparent;
  border-left: 1px solid var(--bx-line);
}

.bido-context-form .cell:first-child {
  border-left: 0;
  padding-left: 0;
}

.bx-dark .bido-context-form .cell {
  border-left-color: rgba(var(--bx-white-rgb), 0.10);
}

/* === Responsive — catalog / trip context ===
   Keyed to the shared breakpoint scale (tokens.css): sm 40rem, md 48rem,
   xl 80rem. */

/* Below xl the strip stays inline but the form cells use slightly less room. */
@media (max-width: 80rem) {
  .bido-trip-context-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .bido-trip-context-card > .bido-trip-context-copy {
    grid-column: 1;
  }
  .bido-trip-context-card > .bido-trip-context-actions {
    grid-column: 1;
    justify-content: flex-start;
  }
  .bido-trip-context-card > .bido-trip-context-fields {
    grid-column: 1;
  }
}

/* The five-cell planner form used to fold to a 2-up grid below xl (80rem), but
   a laptop at 150% browser zoom reports exactly that band, so the fold read as
   the form "breaking" into two rows on an ordinary desktop. The single row's
   track floors fit comfortably below xl, so it now holds one row all the way
   down to the md (48rem) stack point; through the lg band the floors and cell
   padding tighten so the row keeps clearing the shell's side padding. */
@media (max-width: 64rem) and (min-width: 48rem) {
  .bido-trip-form:not(.bido-context-form) {
    /* The occasion track's floor covers its full "Choose an occasion" prompt
       plus the caret, the widest fixed content in the row. */
    grid-template-columns: minmax(8.5rem, 1.25fr) minmax(11.5rem, 1.1fr) minmax(4.5rem, 0.42fr) minmax(10rem, 0.88fr) minmax(7rem, auto);
  }
  .bido-trip-form:not(.bido-context-form) .cell {
    padding-inline: 10px;
  }
}

/* On a narrow viewport the cell separators fold and stack. */
@media (max-width: 48rem) {
  .bido-trip-form:not(.bido-context-form) {
    grid-template-columns: 1fr;
  }
  .bido-context-form {
    grid-template-columns: 1fr;
  }
  .bido-context-form .cell {
    border-left: 0;
    border-top: 1px solid var(--bx-line);
    padding-inline: 0;
    padding-block: 10px;
  }
  .bido-context-form .cell:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .bx-dark .bido-context-form .cell {
    border-top-color: rgba(var(--bx-white-rgb), 0.10);
  }
  .bido-trip-form:not(.bido-context-form) .cell {
    min-height: 58px;
  }
  .bido-trip-context-actions {
    justify-content: stretch;
  }
  .bido-trip-context-actions .btn {
    flex: 1 1 150px;
    justify-content: center;
  }
  .bido-catalog-page {
    padding-left: 16px;
    padding-right: 16px;
  }
}