/* ArrivoExpress page -- small additions on top of booking.css's existing
   .booking-card / .vehicle-card / .field / .error-text, which this page
   reuses as-is for visual consistency with book.html. */

.rn-summary { margin: 6px 0 4px; }
.rn-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 7px 0;
  border-bottom: 1px solid var(--card-border);
}
.rn-summary-row:last-of-type { border-bottom: none; }
.rn-summary-row.rn-total {
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  padding-top: 12px;
}
.rn-summary-row.rn-total span:last-child { color: var(--amber); }
.rn-route { font-size: 13px; color: var(--ink); font-weight: 600; margin: 4px 0 10px; }
.rn-fine-print { font-size: 11.5px; color: var(--text-muted); margin-top: 10px; }

.rn-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--card-border);
  border-top-color: var(--amber);
  animation: rn-spin 0.8s linear infinite;
}
@keyframes rn-spin {
  to { transform: rotate(360deg); }
}

/* Reuses .vehicle-card's existing look; .selected already exists too --
   this just gives the tier cards on this page a description line under
   the name, since book.html's vehicle cards don't need one. */
.vehicle-card .v-description {
  width: 100%;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.rn-locate { width: 100%; margin: 8px 0 4px; font-size: 13px; }
.rn-locate:disabled { opacity: 0.6; cursor: wait; }

/* Visible keyboard focus on the tier cards and the card headings that
   receive programmatic focus on step changes (no ring for the latter, it
   is a screen-reader cue, not an interactive control). */
.vehicle-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.booking-card h2:focus, .booking-card .error-text:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .rn-spinner { animation-duration: 2.4s; }
}