/* Trip Pass purchase surface — feature-flagged UI (see js/features/trip-pass/) */

.feature-trip-pass,
.trip-pass-header-badge.feature-trip-pass {
  display: none;
}
/* The badge's own display:inline-flex (below) ties .feature-trip-pass on
   specificity and comes later, so without the compound selector above the
   badge showed with the flag off (#1722). */

/* Issue #1015 Phase 2 follow-up — the trip-header entry point (the other
   is the Settings card, css/style.css's .set-block/.set-summary-row
   pattern). Pill shape matches .trip-badge (css/style.css) right beside it
   in the header's icon row, teal rather than amber to read as an action,
   not a status readout. */
.trip-pass-header-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--vn-teal);
  border: 2px solid var(--vn-teal);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  cursor: pointer;
}

/* Issue #936 — the trip HAS a pass: a status readout ("Trip Pass Standard"),
   not an invitation to buy, so it fills in. Colour is reinforced by the tier
   word itself, never the only signal. */
.trip-pass-header-badge.is-active {
  background: var(--vn-teal);
  color: var(--surface-2);
}

/* Issue #1015 Phase 2(b) — a long trip with no pass: the outline badge stays an
   invitation, with the suggested tier as a small filled chip. The tier word (and
   the aria-label) carry the meaning; the fill is only emphasis. */
.trip-pass-badge-suggest {
  font-weight: 700;
  background: var(--vn-teal);
  color: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-sm);
}

.trip-pass-badge-tier {
  font-weight: 700;
}

/* A narrow header keeps the icon and the tier and drops the words "Trip Pass"
   (the accessible name still carries them). */
@media (max-width: 680px) {
  .trip-pass-header-badge.is-active .trip-pass-badge-prefix {
    display: none;
  }

  /* A narrow header has no room for the chip; the accessible name and the tier
     picker's own preselection still carry the suggestion. */
  .trip-pass-header-badge.is-suggested .trip-pass-badge-suggest {
    display: none;
  }
}

.trip-pass-tier-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  border: 2px solid var(--df-hair);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Issue #1015 harden pass — selection was color-only (a border-color
   shift), WCAG 1.4.1: a low-vision user relying on shape/text rather than
   hue couldn't tell which tier was selected. Border-color stays as
   reinforcement; the checkmark badge is the actual non-color signal. */
.trip-pass-tier-option:has(input:checked) {
  border-color: var(--vn-teal);
  border-width: 3px;
  background: var(--surface-2);
}

.trip-pass-tier-option:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  color: var(--vn-teal);
  font-weight: 700;
}

.trip-pass-tier-label {
  font-weight: 600;
}

.trip-pass-tier-meta {
  font-size: var(--fs-xs);
  color: var(--df-ink-soft, var(--text-secondary));
}

/* Issue #936 — the line above the upgrade picker: what you already have and that
   only the difference is charged. */
.trip-pass-upgrade-note {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}