/* My trips and the flight box on the order page. Colours follow the theme (currentColor / inherit) where possible;
   a site can restyle through these classes. */
.asf-trips { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.asf-trip {
  border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; padding: 1rem 1.1rem;
  background: var(--asf-trip-bg, transparent);
}
.asf-trip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.asf-trip-head h3 { margin: 0; font-size: 1.15rem; }
.asf-trip-status {
  display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: #e7f0fb; color: #1d4f91;
}
.asf-trip-ticketed .asf-trip-status { background: #e3f4e8; color: #14692e; }
.asf-trip-attention .asf-trip-status { background: #fdf0d5; color: #8a5a00; }
.asf-trip-cancelled .asf-trip-status { background: #eee; color: #555; }
.asf-trip-legs { list-style: none; margin: 0 0 .6rem; padding: 0; }
.asf-trip-legs li { padding: .25rem 0; }
.asf-trip-facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: 0 0 .6rem; }
.asf-trip-facts dt { opacity: .7; }
.asf-trip-facts dd { margin: 0; }
.asf-trip .asf-muted { opacity: .75; font-size: .92rem; }
.asf-cancel summary { cursor: pointer; margin: .4rem 0; }
.asf-cancel label { display: block; margin: .4rem 0; }
.asf-cancel textarea { width: 100%; }
@media (max-width: 480px) {
  .asf-trip-facts { grid-template-columns: 1fr; }
  .asf-trip-facts dd { margin-bottom: .4rem; }
}