/* ═══════════════════════════════════════════════════════════════
   Cam-Itinerary — Transportation page enhancements
   Route-based search, trip tabs, working filters, empty state.
   Loaded only on Transportation.html (after site.css).
   ═══════════════════════════════════════════════════════════════ */

/* ── Trip-type tabs ── */
.trip-tabs { display: flex; gap: 6px; padding: 0 0 14px; flex-wrap: wrap; }
.trip-tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--fg-2);
  background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--radius-full);
  padding: 9px 16px; transition: all var(--dur-base) var(--ease-out);
}
.trip-tab svg { width: 15px; height: 15px; stroke-width: 2; }
.trip-tab:hover { color: var(--fg-1); background: var(--color-gray-100); }
.trip-tab.on { background: var(--color-forest-500); color: white; box-shadow: var(--shadow-brand); }

/* ── Route search (From ⇄ To) ── */
.fb-swap {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; align-self: center;
  background: white; border: 1px solid var(--color-gray-200); cursor: pointer; color: var(--fg-2);
  display: grid; place-items: center; margin: 0 -8px; z-index: 2; position: relative;
  transition: all var(--dur-base) var(--ease-out); box-shadow: var(--shadow-1);
}
.fb-swap:hover { color: var(--color-forest-600); border-color: var(--color-forest-300); transform: rotate(180deg); }
.fb-swap svg { width: 17px; height: 17px; stroke-width: 2; }

/* hide drop-off when trip type doesn't need it */
.filter-box[data-trip="hourly"] .fb-to,
.filter-box[data-trip="fullday"] .fb-to,
.filter-box[data-trip="hourly"] .fb-swap,
.filter-box[data-trip="fullday"] .fb-swap { display: none; }

/* ── Working sort dropdown ── */
.sort-wrap { position: relative; }
.sort-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px;
  background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  border: 1px solid var(--color-gray-100); padding: 6px; display: none;
}
.sort-wrap.open .sort-menu { display: block; }
.sort-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-1);
  background: none; border: 0; padding: 10px 12px; border-radius: var(--radius-md);
}
.sort-menu button:hover { background: var(--color-gray-50); }
.sort-menu button.on { color: var(--color-forest-700); background: var(--color-forest-50); }
.sort-menu button .tick { margin-left: auto; width: 15px; height: 15px; opacity: 0; }
.sort-menu button.on .tick { opacity: 1; color: var(--color-forest-600); }

/* ── Active-filter chips bar ── */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.active-filters:empty { display: none; }
.af-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--color-forest-700); background: var(--color-forest-50); border: 1px solid var(--color-forest-200);
  border-radius: var(--radius-full); padding: 6px 8px 6px 13px;
}
.af-chip button { background: none; border: 0; cursor: pointer; color: var(--color-forest-600); display: grid; place-items: center; padding: 2px; border-radius: 999px; }
.af-chip button:hover { background: var(--color-forest-100); }
.af-chip svg { width: 13px; height: 13px; stroke-width: 2.4; }
.af-clear { font-size: 12.5px; font-weight: 700; color: var(--fg-2); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.af-clear:hover { color: var(--fg-1); }

/* ── Price range (dual feel, single slider) ── */
.f-pricerow { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--fg-1); margin-bottom: 10px; }
.f-pricerow .cur { color: var(--color-forest-700); }

/* ── Empty state ── */
.lc-empty { display: none; text-align: center; padding: 56px 24px; }
.lc-empty.show { display: block; }
.lc-empty .ic { width: 64px; height: 64px; border-radius: 999px; background: var(--bg-sunken); display: grid; place-items: center; margin: 0 auto 16px; color: var(--fg-3); }
.lc-empty .ic svg { width: 30px; height: 30px; stroke-width: 1.75; }
.lc-empty h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 0 0 6px; color: var(--fg-1); }
.lc-empty p { font-size: 14px; color: var(--fg-2); margin: 0 0 18px; }
.lc-empty .btn { display: inline-flex; }

/* count emphasis */
.res-head .left strong { color: var(--fg-1); }

@media (max-width: 680px) {
  .trip-tabs { gap: 6px; }
  .trip-tab { font-size: 12.5px; padding: 8px 13px; }
  .fb-swap { transform: rotate(90deg); margin: -8px 0; align-self: flex-start; }
  .fb-swap:hover { transform: rotate(270deg); }
}