/* Dates as flight results, shared by the course page and the Black Friday page. */
.df { --df-card: #fff; --df-ink: #0d2318; --df-muted: #4f5f56; --df-line: #dbe5df; --df-track: #8b9a92; --df-save: #005f2e; --df-tag-bg: #e8f1f8; --df-tag: #1f5e88; }
.df--dark { --df-card: #151515; --df-ink: #fff; --df-muted: #c4c4c4; --df-line: rgba(255, 255, 255, .18); --df-track: #8c8c8c; --df-save: #38e58a; --df-tag-bg: #2a2a2a; --df-tag: #fff; }
.df [hidden] { display: none !important; }
.df p { margin: 0; line-height: 1.25; color: inherit; }

.df-city { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.df .df-city label { margin: 0; font-weight: 600; color: var(--df-ink); }
.df-city select { min-height: 44px; min-width: 240px; padding: 0 12px; border: 1px solid var(--df-track); border-radius: 10px; background: #fff; color: #0d2318; }

.df .df-list { margin: 0; padding: 0; list-style: none; }
.df-row { display: grid; grid-template-columns: minmax(330px, 1.6fr) minmax(120px, .7fr) minmax(150px, .8fr) auto; gap: 20px; align-items: center; margin-bottom: 8px; padding: 14px 20px; border: 1px solid var(--df-line); border-radius: 12px; background: var(--df-card); color: var(--df-ink); }
.df-row.is-extra { display: none; }
.df-list.is-all .df-row.is-extra { display: grid; }

.df-trip { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; gap: 14px; align-items: center; }
.df-end b { display: block; font-family: var(--hp-head); font-size: 17px; font-weight: 600; white-space: nowrap; }
.df-end small { font-size: 13px; color: var(--df-muted); }
.df-end--to { text-align: right; }
.df-line { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.df-line small { font-size: 13px; line-height: 1.1; color: var(--df-muted); white-space: nowrap; }
.df-line i { position: relative; display: block; width: 100%; height: 2px; background: var(--df-track); }
.df-line i::before, .df-line i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--df-track); }
.df-line i::before { left: 0; }
.df-line i::after { right: 0; }

.df-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.df-tag { padding: 1px 9px; border-radius: 999px; background: var(--df-tag-bg); color: var(--df-tag); font-size: 13px; font-weight: 600; white-space: nowrap; }
.df-tag--best { background: var(--df-tag); color: var(--df-card); }
.df-save { font-weight: 700; font-size: 15px; color: var(--df-save); white-space: nowrap; }

.df-price { text-align: right; white-space: nowrap; }
.df-price s { display: block; font-size: 14px; color: var(--df-muted); }
.df-price b { display: block; font-family: var(--hp-head); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--df-ink); }
.df-price small { display: block; font-size: 13px; color: var(--df-muted); }

.df-actions { display: flex; gap: 8px; }
.df-actions .hp-btn { white-space: nowrap; }
.df--dark .hp-btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .75); }

.df-more { display: block; width: 100%; min-height: 46px; margin-top: 2px; border: 1px solid var(--df-line); border-radius: 12px; background: var(--df-card); color: var(--df-ink); font-family: var(--hp-head); font-size: 15px; font-weight: 600; cursor: pointer; }
.df-more:hover { border-color: var(--df-track); }

.df-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px; border: 1px solid var(--df-line); border-radius: 12px; background: var(--df-card); color: var(--df-ink); }

@media (max-width: 1040px) {
  .df-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; padding: 12px 16px; }
  .df-trip { grid-column: 1 / -1; }
  .df-tags, .df-price, .df-actions { grid-row: 2; }
}
@media (max-width: 620px) {
  .df-row { grid-template-columns: minmax(0, 1fr) auto; }
  .df-actions { grid-column: 1 / -1; grid-row: 3; }
  .df-actions .hp-btn { flex: 1 1 0; }
}
@media (max-width: 480px) {
  .df-row { padding: 12px 14px; }
  .df-trip { gap: 8px; }
  .df-end b { font-size: 15px; }
  .df-city select { width: 100%; }
}