/**
 * TripLink Phase 5 — Booking & payment UI helpers
 */

.tl-payment-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: var(--tl-space-2);
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-color-surface);
  cursor: pointer;
}
.tl-payment-option:has(input:checked) {
  border-color: var(--tl-color-primary);
  box-shadow: var(--tl-shadow-focus);
}
.tl-payment-option input {
  margin-top: 4px;
}

.tl-trip-pass__qr-frame svg,
.tl-trip-pass__qr-area svg {
  width: 168px;
  height: 168px;
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
}

.tl-booking-id {
  font: var(--tl-fw-bold) var(--tl-text-body-md) var(--tl-font-sans);
  letter-spacing: 0.04em;
}