/* Trip builder — the /plan funnel. A dark navy shell (meta bar, steps, sidebar,
   trust strip) wrapping a light cream picker workspace. The page carries
   .bx-dark; the picker carries .bx-light-surface so its cards read light
   tokens. All colors compose from semantic tokens / brand rgb channels. */

.bido-builder-page {
  min-height: 100svh;
  background-color: var(--bx-paper);
  background-image:
    radial-gradient(ellipse 60% 50% at 12% 6%, rgba(var(--bx-accent-rgb), 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 24%, rgba(var(--bx-teal-rgb), 0.08), transparent 60%);
}

.bido-builder-shell {
  max-width: 84rem;
  margin-inline: auto;
  padding: 22px 32px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== Trip meta bar — the .bido-trip-form restyled in place ===== */
.bido-builder-meta {
  margin: 0;
}

/* ===== Steps card ===== */
.bido-builder-steps {
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  padding: 22px 24px;
  box-shadow: var(--bx-shadow-soft);
}

.bido-builder-steps-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bido-builder-steps-title {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--bx-ink);
}

.bido-builder-steps-title em {
  font-style: normal;
  color: var(--bx-accent-ink);
}

.bido-builder-progress-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--bx-text-md);
  color: var(--bx-ink-3);
}

.bido-builder-progress-meter strong {
  color: var(--bx-ink);
  font-weight: 800;
}

/* Width modifier on the shared `.prog` indicator — the builder header always
   wants a fixed 140px bar even when the container is wider. */
.bido-builder-pbar {
  inline-size: 140px;
  block-size: 6px;
}

/* Steps reflow 4 → 2 → 1 on container width (Rule 7). */
.bido-builder-steps-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 10px;
}

.bido-builder-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 2px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: var(--bx-fill);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.bido-builder-step.active {
  border-color: var(--bx-accent);
  background: var(--bx-accent-soft);
  box-shadow: 0 0 0 4px rgba(var(--bx-accent-rgb), 0.10);
}

.bido-builder-step.done {
  border-color: rgba(var(--bx-teal-rgb), 0.4);
  background: rgba(var(--bx-teal-rgb), 0.06);
}

/* Leading status tile — neutral while a step is untouched, then it carries
   the state: solid accent on the active step, teal + check once done. */
.bido-builder-step-icon {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--bx-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-fill-2);
  color: var(--bx-ink-3);
}

.bido-builder-step.active .bido-builder-step-icon {
  background: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-step.done .bido-builder-step-icon {
  background: rgba(var(--bx-teal-rgb), 0.16);
  color: var(--bx-good-ink);
}

.bido-builder-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bido-builder-step-body .title {
  font-weight: 800;
  font-size: var(--bx-text);
  color: var(--bx-ink);
}

.bido-builder-step-body .desc {
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bido-builder-step.done .desc {
  color: var(--bx-good-ink);
}

.bido-builder-step-count {
  font-size: var(--bx-text-xs);
  font-weight: 800;
  color: var(--bx-accent-ink);
  background: var(--bx-accent-soft);
  padding: 3px 8px;
  border-radius: var(--bx-r-pill);
}

/* "Next" step — the pillar right after the active one. A crisp accent ring
   (distinct from the active step's softer halo) plus a leading eyebrow point
   the user forward; layers over a todo or an already-done step. */
.bido-builder-step.next {
  box-shadow: 0 0 0 2px rgba(var(--bx-accent-rgb), 0.45);
}

.bido-builder-step-next {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bx-accent-ink);
}

/* Hover lift (the base rule already declares the transform transition) and a
   visible keyboard focus ring — the tabs read as static before. */
@media (any-hover: hover) {
  .bido-builder-step:hover {
    border-color: var(--bx-accent-line);
    transform: translateY(-1px);
  }
}

.bido-builder-step:focus-visible {
  outline: none;
  border-color: var(--bx-accent);
  box-shadow: 0 0 0 3px rgba(var(--bx-accent-rgb), 0.35);
}

/* ===== Main grid — picker + sidebar ===== */
.bido-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 26vw, 23.5rem);
  gap: 20px;
  align-items: start;
}

/* ===== Light picker workspace ===== */
.bido-builder-picker {
  background: var(--bx-paper);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  padding: 24px;
  box-shadow: 0 30px 60px -42px rgba(var(--bx-navy-rgb), 0.55);
}

.bido-builder-picker-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bido-builder-picker-title {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  color: var(--bx-ink);
}

.bido-builder-picker-count {
  text-transform: uppercase;
}

/* Group-size context strip — explains that the shelf is floored at the group
   size (the fitting_group rule) and links out to the unfiltered catalog. */
.bido-builder-capacity-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: rgba(var(--bx-accent-rgb), 0.06);
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-2);
}

.bido-builder-capacity-note-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bido-builder-capacity-note-lead strong {
  color: var(--bx-ink);
}

.bido-builder-capacity-note-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--bx-accent-ink);
  white-space: nowrap;
}

/* The picker reuses the catalog pillbar; give it room before the card grid. */
.bido-builder-picker .bido-pillbar {
  margin-bottom: 14px;
}

.bido-builder-picker .bido-filter-tokens {
  margin-bottom: 16px;
}

.bido-builder-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
}

.bido-builder-card .bido-traveler-card-media {
  position: relative;
}

.bido-builder-card-check {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--bx-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
  box-shadow: 0 4px 12px rgba(var(--bx-accent-rgb), 0.5);
}

.bido-builder-card-headcount {
  padding: 8px 14px 0;
  font-size: var(--bx-text-xs);
}

/* Vibe headcount stepper */
.bido-builder-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bx-line-2);
  border-radius: var(--bx-r-pill);
  overflow: hidden;
}

.bido-builder-qty .button_to {
  display: flex;
}

.bido-builder-qty-btn {
  inline-size: 28px;
  block-size: 28px;
  border: 0;
  background: transparent;
  color: var(--bx-ink);
  font-weight: 800;
  font-size: var(--bx-text-lg);
  cursor: pointer;
}

.bido-builder-qty-btn:hover {
  background: var(--bx-fill-2);
}

.bido-builder-qty-n {
  min-inline-size: 30px;
  text-align: center;
  font-weight: 800;
  font-size: var(--bx-text-md);
  color: var(--bx-ink);
}

/* ===== Wheels — per occasion =====
   One card per trip leg (arrival, nights out, day trip, departure). Each card
   carries a group-fit line and a ladder of vehicle tiles; every tile is sized
   against the planned group, so it reads the real vehicle count + group total
   the builder will add — not a bare per-vehicle price. */

/* Top-of-section progress strip — counts the legs covered so the user knows
   how many of the four occasion cards they still need to fill. */
.bido-builder-occasions-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  background: var(--bx-paper-2);
}

.bido-builder-occasions-progress-label {
  font-size: var(--bx-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bx-ink-3);
  font-weight: 700;
}

.bido-builder-occasions-progress-count {
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-2);
}

.bido-builder-occasions-progress-count strong {
  color: var(--bx-ink);
  font-weight: 800;
}

.bido-builder-occasions-progress-count.complete {
  color: var(--bx-good-ink);
}

.bido-builder-occasions-prog {
  flex: 1;
  min-inline-size: 6rem;
}

.bido-builder-occasions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bido-builder-occasion {
  background: var(--bx-paper-2);
  border: 1.5px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  padding: 16px 18px;
}

.bido-builder-occasion.filled {
  border-color: var(--bx-accent);
  background:
    linear-gradient(180deg, var(--bx-accent-soft), transparent 64px),
    var(--bx-paper-2);
  box-shadow: 0 0 0 3px rgba(var(--bx-accent-rgb), 0.10);
}

.bido-builder-occasion-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bido-builder-occasion-icon {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--bx-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
  flex-shrink: 0;
}

.bido-builder-occasion.filled .bido-builder-occasion-icon {
  background: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
}

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

.bido-builder-occasion-titles .name {
  font-size: var(--bx-text);
  font-weight: 800;
  color: var(--bx-ink);
}

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

.bido-builder-occasion-tag {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--bx-r-pill);
  color: var(--bx-ink-3);
  background: var(--bx-fill-2);
}

.bido-builder-occasion.filled .bido-builder-occasion-tag {
  color: rgb(var(--bx-white-rgb));
  background: var(--bx-accent);
}

/* Group-fit line — sits between the header and the vehicle ladder. */
.bido-builder-occasion-group {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 12px;
  padding: 8px 11px;
  border-radius: var(--bx-r-sm);
  background: var(--bx-fill);
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
}

.bido-builder-occasion-group svg {
  flex-shrink: 0;
  color: var(--bx-ink-4);
}

.bido-builder-occasion-group strong {
  color: var(--bx-ink);
  font-weight: 800;
}

.bido-builder-occasion.filled .bido-builder-occasion-group {
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

.bido-builder-occasion.filled .bido-builder-occasion-group svg,
.bido-builder-occasion.filled .bido-builder-occasion-group strong {
  color: var(--bx-accent-ink);
}

/* Vehicle ladder — reflows 5 → fewer on container width via auto-fit. */
.bido-builder-veh-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 10px;
}

/* Vehicle tile is a clickable shell — the stretched .bido-card-link opens the
   in-place detail drawer; the .veh-action button at the foot mutates the plan
   above the link (z-index: 2). */
.bido-builder-veh {
  position: relative;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
  padding: 11px 12px 12px;
  border: 1.5px solid var(--bx-line);
  border-radius: var(--bx-r);
  background: var(--bx-paper);
  color: var(--bx-ink);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.bido-builder-veh .bido-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Cover thumbnail at the top of a vehicle tile — bleeds to the tile's inner
   edges while the padding stays for the text below. A class without photos yet
   (e.g. Van) omits it and the tile stays text-only. */
.bido-builder-veh-photo {
  margin: -11px -12px 6px;
  border-radius: calc(var(--bx-r) - 2px) calc(var(--bx-r) - 2px) 0 0;
  overflow: hidden;
}

@media (any-hover: hover) {
  .bido-builder-veh:hover {
    border-color: var(--bx-accent-line);
  }
}

.bido-builder-veh.rec {
  border-color: var(--bx-accent);
  background: var(--bx-accent-soft);
}

.bido-builder-veh.on {
  background: var(--bx-accent);
  border-color: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
  box-shadow: 0 8px 20px -10px rgba(var(--bx-accent-rgb), 0.7);
}

.bido-builder-veh .veh-action {
  position: relative;
  z-index: 2;
  margin-block-start: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Direct children only — the Add/Remove button_to span the tile; the nested
   stepper's own ± button_to keep their natural width. */
.bido-builder-veh .veh-action > .button_to,
.bido-builder-veh .veh-action > form {
  display: flex;
  inline-size: 100%;
}

.bido-builder-veh .veh-action .btn {
  inline-size: 100%;
  justify-content: center;
}

/* A picked vehicle's count stepper sits on the accent tile, so lift its border
   and text onto the accent surface for contrast. */
.bido-builder-veh .veh-action .bido-builder-qty {
  align-self: center;
}

.bido-builder-veh.on .bido-builder-qty {
  border-color: rgba(var(--bx-white-rgb), 0.5);
  background: rgba(var(--bx-white-rgb), 0.12);
}

.bido-builder-veh.on .bido-builder-qty-btn,
.bido-builder-veh.on .bido-builder-qty-n {
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-veh.on .bido-builder-qty-btn:hover {
  background: rgba(var(--bx-white-rgb), 0.18);
}

/* Top marker row — keeps a constant height so tiles align with or without
   a "Recommended" / "Selected" flag. */
.bido-builder-veh .veh-flag {
  display: flex;
  align-items: center;
  gap: 4px;
  min-block-size: 14px;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bx-accent-ink);
}

.bido-builder-veh.on .veh-flag {
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-veh .veh-name {
  font-weight: 800;
  font-size: var(--bx-text-md);
}

/* Fit chip — green when one vehicle covers the group, amber when the group
   needs several. */
.bido-builder-veh .veh-fit {
  align-self: flex-start;
  margin-block: 2px;
  padding: 2px 7px;
  border-radius: var(--bx-r-pill);
  font-size: var(--bx-text-2xs);
  font-weight: 700;
}

.bido-builder-veh .veh-fit.ok {
  color: var(--bx-good-ink);
  background: var(--bx-good-soft);
}

.bido-builder-veh .veh-fit.split {
  color: var(--bx-warn-ink);
  background: var(--bx-warn-soft);
}

.bido-builder-veh .veh-meta {
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

.bido-builder-veh.on .veh-meta {
  color: rgba(var(--bx-white-rgb), 0.85);
}

.bido-builder-veh .veh-price {
  margin-block-start: auto;
  padding-block-start: 6px;
  font-weight: 800;
  font-size: var(--bx-text);
}

.bido-builder-veh .veh-price small {
  display: block;
  margin-block-start: 1px;
  font-weight: 600;
  font-size: var(--bx-text-2xs);
  color: var(--bx-ink-4);
}

.bido-builder-veh.on .veh-price small {
  color: rgba(var(--bx-white-rgb), 0.8);
}

/* Picker footer nav */
.bido-builder-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--bx-line);
}

.bido-builder-picker-status {
  text-align: center;
}

/* ===== Dark sidebar ===== */
.bido-builder-sidebar {
  position: sticky;
  inset-block-start: 16px;
}

.bido-builder-sidebar-card {
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--bx-shadow-soft);
}

.bido-builder-sb-section + .bido-builder-sb-section {
  border-block-start: 1px solid var(--bx-line);
  padding-block-start: 16px;
}

.bido-builder-sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bido-builder-sb-pill {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--bx-r-pill);
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

.bido-builder-sb-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bido-builder-sb-total .amt {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bx-ink);
}

.bido-builder-sb-pp {
  margin-block-start: 6px;
  font-size: var(--bx-text-md);
}

.bido-builder-sb-pp strong {
  color: var(--bx-ink);
}

.bido-builder-sb-cat {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--bx-r-sm);
  text-decoration: none;
  color: inherit;
}

.bido-builder-sb-cat:hover {
  background: var(--bx-fill);
}

.bido-builder-sb-cat .ic {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--bx-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-fill-2);
  color: var(--bx-ink-3);
}

.bido-builder-sb-cat.has .ic {
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

.bido-builder-sb-cat .lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bido-builder-sb-cat .nm {
  font-size: var(--bx-text-md);
  font-weight: 700;
  color: var(--bx-ink);
}

.bido-builder-sb-cat .ct {
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

.bido-builder-sb-cat.has .ct {
  color: var(--bx-good-ink);
}

.bido-builder-sb-cat .amt2 {
  font-size: var(--bx-text-md);
  font-weight: 800;
  color: var(--bx-ink);
}

.bido-builder-sb-cat.empty .amt2 {
  color: var(--bx-ink-4);
  font-weight: 600;
}

.bido-builder-sb-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bido-builder-sb-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--bx-r);
  background: var(--bx-fill);
  font-size: var(--bx-text-sm);
}

.bido-builder-sb-line .copy {
  min-width: 0;
}

.bido-builder-sb-line .nn {
  font-weight: 700;
  color: var(--bx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bido-builder-sb-line .pp {
  font-weight: 800;
  white-space: nowrap;
}

.bido-builder-sb-x {
  inline-size: 22px;
  block-size: 22px;
  border: 0;
  border-radius: var(--bx-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-fill-2);
  color: var(--bx-ink-3);
  cursor: pointer;
}

.bido-builder-sb-x:hover {
  background: rgba(var(--bx-coral-rgb), 0.14);
  color: var(--bx-bad-ink);
}

.bido-builder-sb-empty {
  font-size: var(--bx-text-sm);
}

.bido-builder-sb-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bido-builder-sb-totals .ln {
  display: flex;
  justify-content: space-between;
  font-size: var(--bx-text-md);
  color: var(--bx-ink-2);
}

.bido-builder-sb-totals .ln.savings.accent {
  color: var(--bx-good-ink);
}

.bido-builder-sb-totals .ln.total {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--bx-line);
  color: var(--bx-ink);
  font-weight: 800;
  font-size: var(--bx-text-lg);
}

.bido-builder-sb-cta {
  inline-size: 100%;
  justify-content: center;
  padding-block: 14px;
}

.bido-builder-sb-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: var(--bx-text-xs);
  line-height: 1.45;
  color: var(--bx-ink-3);
}

.bido-builder-sb-foot svg {
  flex-shrink: 0;
  margin-block-start: 1px;
}

/* ===== Trust strip ===== */
.bido-builder-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 14px;
  padding: 16px 22px;
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
}

.bido-builder-trust-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bido-builder-trust-cell .ic {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--bx-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-good-soft);
  flex-shrink: 0;
}

.bido-builder-trust-cell .t {
  font-size: var(--bx-text-sm);
  font-weight: 700;
  color: var(--bx-ink);
}

.bido-builder-trust-cell .s {
  font-size: var(--bx-text-xs);
}

/* === Responsive — builder === */
@media (max-width: 64rem) {
  .bido-builder-grid {
    /* minmax(0, …), not bare 1fr: 1fr's auto minimum lets the wheels step's
       vehicle ladders set the track's min-content width and drag the whole
       page into horizontal scroll on phones. */
    grid-template-columns: minmax(0, 1fr);
  }
  .bido-builder-sidebar {
    position: static;
  }
}

@media (max-width: 48rem) {
  .bido-builder-shell {
    padding: 18px 16px;
  }
  .bido-builder-picker {
    padding: 18px;
  }
  .bido-builder-steps {
    padding: 18px;
  }
  /* On phones the auto-fit grid collapses to one column and each vehicle tile
     becomes full-width — that hides ladder relationships. Switch to a horizontal
     scroller with snap stops so the user feels each tile as a distinct option. */
  .bido-builder-veh-row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .bido-builder-veh-row > .bido-builder-veh {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* Bottom-fixed CTA on phones: the side panel with the trip total + Continue
   button stacks below the recommendations on mobile, well off-screen. This
   slim bar keeps the total + primary CTA in reach. The bar slides in only
   once the in-flow #trip_estimate sidebar is out of view (sticky_cta
   controller, .visible modifier — mirrors products/home-mobile-bar.css).
   Desktop hides it entirely. */
.bido-builder-mobile-cta {
  display: none;
  transform: translateY(110%);
}

@media (prefers-reduced-motion: no-preference) {
  .bido-builder-mobile-cta {
    transition: transform 0.25s ease;
  }
}

@media (max-width: 64rem) {
  /* Reserve room at the page foot so the fixed bar never covers the trust
     strip or anything else at the bottom of the shell. Applied to the page
     wrapper (parent of the bar) instead of the shell so a future child can
     opt out without the rule scoping to a specific descendant. */
  .bido-builder-page {
    padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .bido-builder-mobile-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--bx-paper-2);
    border-block-start: 1px solid var(--bx-line);
    z-index: 80;
  }
  .bido-builder-mobile-cta.visible {
    transform: translateY(0);
  }
  .bido-builder-mobile-cta-summary {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
  }
  .bido-builder-mobile-cta-eyebrow {
    font-size: var(--bx-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bx-ink-3);
    font-weight: 700;
  }
  .bido-builder-mobile-cta-amount {
    font-family: var(--bx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--bx-text-lg);
    font-weight: 800;
    color: var(--bx-ink);
  }
  .bido-builder-mobile-cta-pp {
    font-size: var(--bx-text-2xs);
    color: var(--bx-ink-3);
  }
  .bido-builder-mobile-cta .btn {
    flex: 0 0 auto;
  }
}