.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);
}

/* 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.
   The builder trip-form (5 cells incl. destination) drops to a 2-up grid. */
@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;
  }
  .bido-trip-form:not(.bido-context-form) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bido-trip-form:not(.bido-context-form) .cell.action-cell {
    grid-column: 1 / -1;
    min-height: 52px;
  }
}

/* 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;
  }
}