/* ─────────────────────────────────────────────────────────────────────────
   bp-compare.css — tray, chips, picker and empty state for the comparison
   feature. Pairs with assets/bp-compare.js.

   Reuses the existing tokens (--navy, --gold, --line, --card, --r1/--r2)
   so the feature does not arrive with its own visual language. The table
   itself is still styled by the .cmp rules already in bp.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tray ─────────────────────────────────────────────────────────────── */
.bpc-tray{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--navy,#0B1A2F);color:#fff;
  transform:translateY(110%);transition:transform .26s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 -6px 28px rgb(11 26 47/.22);
  padding-bottom:env(safe-area-inset-bottom,0)
}
.bpc-tray.on{transform:translateY(0)}

.bpc-tray__in{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:1240px;margin:0 auto;padding:12px 20px
}
.bpc-tray__n{font-size:13px;color:rgb(255 255 255/.62);flex:none}
.bpc-tray__n b{color:#fff;font-size:15px}
.bpc-tray__items{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.bpc-tray__act{display:flex;gap:8px;flex:none;margin-left:auto}

.bpc-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 8px 5px 11px;border-radius:999px;
  background:rgb(255 255 255/.10);border:1px solid rgb(255 255 255/.16);
  font-size:13px;line-height:1.2;max-width:230px
}
.bpc-chip>button{
  display:grid;place-items:center;width:17px;height:17px;flex:none;
  border:0;border-radius:50%;cursor:pointer;
  background:rgb(255 255 255/.14);color:#fff
}
.bpc-chip>button:hover{background:var(--gold,#C69B4B);color:var(--navy,#0B1A2F)}
.bpc-chip>button svg{width:9px;height:9px}

/* Compare needs two. Say so by dimming rather than hiding — a control that
   vanishes is more confusing than one that explains itself. */
.bpc-tray__act .is-off{opacity:.42;pointer-events:none}

/* Keep the tray clear of the sticky mobile CTA bar. */
@media (max-width:860px){
  .bpc-tray{bottom:var(--scta-h,64px)}
  .bpc-tray__in{padding:10px 14px;gap:10px}
  .bpc-tray__act{width:100%;margin-left:0}
  .bpc-tray__act .btn{flex:1}
}

/* ── Card button ──────────────────────────────────────────────────────── */
.bpc-btn[aria-pressed="true"]{
  background:var(--navy,#0B1A2F);color:var(--gold-l,#E4C98A);
  border-color:var(--navy,#0B1A2F)
}

/* ── Picker ───────────────────────────────────────────────────────────── */
.bpc-add{min-width:190px}
.bpc-pick{
  width:100%;font-size:13.5px;padding:9px 11px;border-radius:var(--r1,8px);
  border:1px dashed var(--line,rgb(11 26 47/.16));background:transparent;
  color:var(--fg-2,#3D4654);cursor:pointer
}
.bpc-pick:hover{border-color:var(--gold,#C69B4B);border-style:solid}
.bpc-addcol{vertical-align:top;min-width:200px}

/* ── Empty state ──────────────────────────────────────────────────────── */
.bpc-empty{padding:44px 28px;text-align:center;display:grid;gap:14px;justify-items:center}
.bpc-empty p{margin:0;max-width:46ch;color:var(--fg-2,#3D4654)}
.bpc-empty b{color:var(--fg-1,#0B1A2F)}

/* ── Figures we do not have ────────────────────────────────────────────
   Unconfirmed values must not read with the same confidence as a price
   taken from the developer. Lighter, italic, visibly a different kind of
   claim. */
.bpc-soft{color:var(--fg-3,#6B7280);font-style:italic;font-size:13.5px}

.bpc-noimg{
  background:repeating-linear-gradient(135deg,#EFECE6,#EFECE6 8px,#E7E3DB 8px,#E7E3DB 16px)
}

/* ── Toast fallback (used only if BP.toast is unavailable) ────────────── */
.bpc-toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);
  z-index:80;padding:10px 16px;border-radius:999px;
  background:var(--navy,#0B1A2F);color:#fff;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 6px 22px rgb(11 26 47/.28)
}
.bpc-toast.on{opacity:1;transform:translate(-50%,0)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─────────────────────────────────────────────────────────────────────────
   CONTRAST FIXES
   ───────────────────────────────────────────────────────────────────────── */

/* The footer sits on navy, but .sm carries --fg-2, a dark grey intended for
   light backgrounds. The tagline under the logo was rendering dark-on-dark
   and was effectively invisible. */
.ftr .sm,
.ftr p:not([class]),
.ftr li{color:rgb(255 255 255/.74)}
.ftr .sm b,.ftr .sm strong{color:#fff}
.ftr .tb__k,.ftr .tb__hd span{color:rgb(255 255 255/.58)}

/* ── Search feedback ──────────────────────────────────────────────────── */
.bps-note{display:none;margin:0 0 var(--s4,18px);padding:11px 14px;
  border-radius:var(--r1,8px);background:var(--paper-2,#F3EFE8);
  border:1px solid var(--line,rgb(11 26 47/.12));font-size:14px;color:var(--fg-2,#3D4654)}
.bps-note.on{display:block}
.bps-note b{color:var(--fg,#0B1A2F)}
.bps-clear{border:0;background:none;padding:0;margin-left:6px;cursor:pointer;
  color:var(--navy,#0B1A2F);font-weight:600;text-decoration:underline;font-size:14px}

/* ── Project page: honest note where editorial does not exist yet ─────── */
.bpp-note{max-width:62ch;display:grid;gap:12px}
.bpp-note p{margin:0;color:var(--fg-2,#3D4654)}
.bpp-note b{color:var(--fg,#0B1A2F)}

/* ── Same-trip note ───────────────────────────────────────────────────── */
.bpc-trip__b{padding:var(--s5,20px);display:grid;gap:var(--s3,12px);
  font-size:14px;color:rgb(255 255 255/.82)}
.bpc-trip__b p{margin:0}
.bpc-trip__s{color:rgb(255 255 255/.62);font-size:13px}