.route-comparison {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.route-comparison summary {
  padding: 16px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
.route-comparison[open] summary { border-bottom: 1px solid var(--line); }
.route-comparison-body { padding: 16px; min-width: 0; }
.route-comparison-body > p { margin: 0 0 16px; line-height: 1.6; }
.route-comparison .pricing-table th,
.route-comparison .pricing-table td { padding: 12px 10px; }
.route-comparison .pricing-table thead th { overflow-wrap: anywhere; }
.route-comparison .pricing-table tbody th { font-weight: 400; }
.route-comparison .pricing-table td:last-child { color: var(--ink); font-weight: 400; }
.route-comparison .pricing-table td:nth-child(2) { color: var(--accent); font-weight: 600; }
.route-comparison-price { white-space: nowrap; }
.route-comparison-body > .route-comparison-source { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.route-comparison-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.route-comparison-actions .btn { white-space: normal; text-align: center; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.route-comparison summary:focus-visible,
.route-comparison .table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .route-comparison-body { padding: 12px; }
  .route-comparison-actions .btn { width: 100%; }
}