.flight-list .card {
  border: 1px solid #E5E7EB;
}

.flight-list .card:hover {
  box-shadow: 6px 7px 17px -13px #606060;
}

/* Base .refund carried a single hardcoded green regardless of the actual
   status — a "Non-Refundable" fare read as a green "all clear" badge. Tone
   is now a modifier class (refund-refundable / -partial / -non-refundable),
   applied alongside the base for its shared shape/spacing; .refund itself
   keeps the green as the fallback for any caller that hasn't been updated
   to add a tone class yet. */
.refund {
  background: #F0FDF4;
  color: #00A63E;
}

/* Text colors here are deliberately darker than the .refund fallback and
   the .non-stop/.one-stop/.multi-stop badges above — those sit at ~3:1
   against their own tints, under WCAG AA's 4.5:1 for normal text. Verified
   via the standard relative-luminance formula: 008231/F0FDF4 4.73:1,
   CB4407/FFF7ED 4.53:1, E2000B/FEF2F2 4.53:1. */
.refund-refundable {
  background: #F0FDF4;
  color: #008231;
}

.refund-partial {
  background: #FFF7ED;
  color: #CB4407;
}

.refund-non-refundable {
  background: #FEF2F2;
  color: #E2000B;
}

.non-stop {
  background: #F0FDF4;
  color: #00A63E;
}

.one-stop {
  background: #FFF7ED;
  color: #F86826;
}

.multi-stop {
  background: #FEF2F2;
  color: #E7000B;
}

.flight-path {
  height: 30px;
}

.path-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 2px dashed #d6d6d6;
  transform: translateY(-50%);
}

.path-dot {
  width: 8px;
  height: 8px;
  background: #ff9800;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.dot-start {
  border: 2px solid #b5b5b5;
}

.dot1 {
  left: 44%;
}

.dot2 {
  left: 50%;
}

.dot-end {
  right: 0px;
  background: #afafaf;
}

.plane {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width:767px) {
  .no-mobile-border {
    border-left: 0 !important;
  }
}