/* Results pages (flights/hotels/activities) — shares tokens from style.css */
.results-hero {
  background: linear-gradient(120deg, var(--navy), var(--indigo));
  padding: 110px 0 28px;
  color: #fff;
}
.results-summary { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.rs-route-block { display: flex; flex-direction: column; gap: 6px; }
.rs-back-home {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  color: rgba(255,255,255,0.78);
  font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.rs-back-home svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.rs-back-home:hover { color: var(--gold-light); transform: translateX(-2px); }
.rs-back-home:hover svg { transform: translateX(-2px); }
.rs-route { display: flex; align-items: center; gap: 12px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; }
.rs-route svg { color: var(--gold-light); }
.rs-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: rgba(255,255,255,0.82); font-size: 13.5px; font-weight: 600; }
.rs-dates .dot { opacity: 0.5; }
.rs-meta { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; }

/* ---------- Sidebar + results two-column layout (OTA-style desktop web) ---------- */
.results-layout { display: grid; grid-template-columns: 272px 1fr; gap: 24px; align-items: start; }
.results-sidebar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; position: sticky; top: 108px;
  /* Long filter lists (many airlines on a busy route) used to just grow
     past the viewport with no way to reach "Clear all filters" without
     scrolling the whole page — now the sidebar scrolls internally instead,
     capped to the space actually below the sticky header. */
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.results-sidebar::-webkit-scrollbar { width: 7px; }
.results-sidebar::-webkit-scrollbar-track { background: transparent; }
.results-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.results-sidebar::-webkit-scrollbar-thumb:hover { background: var(--slate-light); }
.rs-filter-group { margin-bottom: 22px; }
.rs-filter-group:last-child { margin-bottom: 0; }
.rs-filter-title { font-weight: 700; font-size: 12.5px; color: var(--navy); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-search-box { position: relative; }
.rs-search-box input {
  width: 100%; padding: 10px 12px 10px 34px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; font-family: inherit; background: var(--mist); color: var(--ink);
}
.rs-search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--slate-light); width: 16px; height: 16px; }
.rs-checkbox { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--slate); padding: 6px 0; cursor: pointer; user-select: none; }
.rs-checkbox input { width: 16px; height: 16px; accent-color: var(--indigo); flex-shrink: 0; }
.rs-checkbox .count { margin-left: auto; color: var(--slate-light); font-size: 12px; }
.rs-range { display: flex; align-items: center; gap: 8px; }
.rs-range input[type="number"] {
  width: 0; flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--mist);
}
.rs-select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--navy); background: #fff; font-family: inherit;
}
.rs-clear { font-size: 12.5px; font-weight: 700; color: var(--indigo); background: none; border: none; cursor: pointer; }
.rs-clear:hover { text-decoration: underline; }

.results-list { display: flex; flex-direction: column; gap: 16px; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.results-toolbar .rs-count { font-size: 14px; font-weight: 600; color: var(--slate); }
.results-toolbar .rs-count strong { color: var(--navy); }

@media (max-width: 900px) {
  .results-layout { grid-template-columns: 1fr; }
  .results-sidebar { position: static; max-height: none; overflow-y: visible; }
}
.results-loading, .results-empty { text-align: center; padding: 70px 20px; color: var(--slate); }
.results-empty h3 { color: var(--navy); margin-bottom: 8px; }
.spinner {
  width: 40px; height: 40px; margin: 0 auto 18px;
  border: 4px solid var(--line); border-top-color: var(--indigo);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Animated searching overlay (ported from the app's SearchingOverlay/
   HotelSearchingOverlay/ActivitySearchingOverlay + SearchEtaBanner widgets) ---------- */
/* A wide horizontal banner, not a narrow centered "phone screen" card — this
   is a desktop web loading state (illustration + copy side by side, like a
   browser-native OTA loading banner), not a port of the app's full-screen
   mobile takeover. */
.search-overlay {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0;
  overflow: hidden;
}
.so-progress { height: 4px; background: var(--line); overflow: hidden; }
.so-progress-bar { height: 100%; width: 40%; animation: soIndeterminate 1.4s ease-in-out infinite; }
.so-progress-bar.done { width: 100% !important; background: var(--success) !important; animation: none; }
@keyframes soIndeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.so-body { display: flex; align-items: center; gap: 36px; padding: 32px 36px; }
.so-visual { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; }
.so-visual svg { width: 100%; max-width: 220px; height: auto; }

.so-main { flex: 1; min-width: 0; }
.so-eta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px;
  padding: 11px 16px; margin-bottom: 14px;
}
.so-eta-label { font-weight: 700; font-size: 13.5px; color: var(--indigo); }
.so-eta-estimate { font-size: 12px; color: var(--slate); font-weight: 500; margin-top: 2px; }
.so-clock {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: #fff; border-radius: 8px; padding: 6px 11px;
  box-shadow: var(--shadow-sm); font-weight: 800; color: var(--indigo-light); font-size: 14px;
}

.so-status {
  text-align: left; font-size: 14.5px; color: var(--slate); font-weight: 600;
  min-height: 22px; transition: opacity 0.22s;
}
.so-status.done { color: var(--success); font-weight: 800; font-size: 17px; }
.so-status.done::before { content: '\2713\00A0'; }
.so-cancel { margin-top: 14px; background: none; border: none; color: var(--slate-light); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }
.so-cancel:hover { color: var(--slate); }

@media (max-width: 720px) {
  .so-body { flex-direction: column; padding: 24px 20px; gap: 18px; }
  .so-visual { flex: none; max-width: 180px; }
  .so-main { width: 100%; }
  .so-status { text-align: center; }
}

/* Flight card */
.flight-card {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1fr;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.flight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.fc-airline { display: flex; align-items: center; gap: 12px; }
.fc-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--mist); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--navy); overflow: hidden; flex-shrink: 0; }
.fc-logo img { width: 100%; height: 100%; object-fit: contain; }
.fc-logo-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; }
.fc-name { font-weight: 700; font-size: 14.5px; color: var(--navy); }
.fc-flightno { font-size: 12px; color: var(--slate-light); }
.fc-times { display: flex; align-items: center; justify-content: center; gap: 16px; }
.fc-time { text-align: center; }
.fc-time strong { font-size: 18px; color: var(--ink); display: block; }
.fc-time span { font-size: 12px; color: var(--slate-light); }
.fc-path { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.fc-line { width: 100%; height: 1px; background: var(--line); position: relative; }
.fc-line::after { content: '\2708'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--indigo); }
.fc-stops, .fc-duration { font-size: 11.5px; color: var(--slate-light); }
.fc-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fc-amount { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; color: var(--navy); }
.fc-sscash { font-size: 12px; font-weight: 700; color: var(--gold-dark); }

/* ---------- Flight fare-type expand (same physical flight, multiple fare
   brands grouped by Flight.groupKey — tap "View Prices" to compare every
   fare in a proper table: fare name, baggage, availability, price, select.
   Design pattern adapted from a reference travel-agent portal listing page,
   restyled in SetStay's navy/indigo/gold branding for a consumer website. ---------- */
.flight-group { display: block; padding: 0; overflow: hidden; }
.flight-group .flight-row { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr; align-items: center; gap: 20px; padding: 20px 26px 14px; }
.fc-badges { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.fare-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; margin-left: 6px;
}
.fc-badges .fare-badge { margin-left: 0; }
.fare-badge.corporate { background: rgba(212,175,55,0.16); color: var(--gold-dark); }
.fare-badge.special-fare { background: rgba(29,58,138,0.10); color: var(--indigo); border: 1px solid rgba(29,58,138,0.25); }
.fare-badge.nearby-airport { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; cursor: help; }
.combined-leg-tag .fare-badge.nearby-airport { margin-left: 8px; text-transform: none; letter-spacing: normal; font-size: 10.5px; }

.fc-view-prices {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--indigo); color: var(--indigo);
  font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fc-view-prices:hover { background: var(--indigo); color: #fff; }
.fc-view-prices svg { width: 12px; height: 12px; transition: transform 0.2s; }
.fc-view-prices .label-hide { display: none; }
.flight-group.expanded .fc-view-prices .label-view { display: none; }
.flight-group.expanded .fc-view-prices .label-hide { display: inline; }
.flight-group.expanded .fc-view-prices svg { transform: rotate(180deg); }

.fc-subrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 26px 16px; font-size: 12px; color: var(--slate-light);
}
.fc-details-link { color: var(--indigo); font-weight: 700; cursor: pointer; }
.fc-details-link:hover { text-decoration: underline; }

.fc-fares-table { display: none; border-top: 1px solid var(--line); background: var(--mist); overflow-x: auto; }
.flight-group.expanded .fc-fares-table { display: block; }
.fc-fares-table table { width: 100%; border-collapse: collapse; min-width: 680px; table-layout: fixed; }
.fc-fares-table .ft-name { width: 17%; }
.fc-fares-table .ft-meta:nth-child(2) { width: 24%; }
.fc-fares-table .ft-refund { width: 29%; }
.fc-fares-table .ft-price { width: 14%; }
.fc-fares-table .ft-action { width: 16%; }
.fc-fares-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--slate-light); padding: 12px 16px 8px; border-bottom: 1px solid var(--line);
}
.fc-fares-table tbody td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; background: #fff; }
.fc-fares-table tbody tr:first-child td { border-top: none; }
.ft-name { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.ft-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ft-meta { font-size: 12px; color: var(--slate); line-height: 1.6; }
.ft-baggage-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ft-baggage-row:last-child { margin-bottom: 0; }
.ft-baggage-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--slate-light); }
.ft-refundable { display: block; font-weight: 700; font-size: 12.5px; color: var(--success); }
.ft-nonrefundable { display: block; font-weight: 700; font-size: 12.5px; color: var(--danger); }
.ft-fee-note { display: flex; gap: 5px; margin-top: 5px; line-height: 1.5; }
.ft-sub { color: var(--slate-light); font-size: 11.5px; }
.ft-price { font-weight: 800; font-size: 15.5px; color: var(--navy); font-family: 'Poppins', sans-serif; white-space: nowrap; }
.ft-action { text-align: right; }

.load-more-btn { display: block; margin: 8px auto 0; }

/* ---------- Flight Details modal (full airport name + terminal per segment,
   with layover banners — reuses the auth modal's overlay/close-button
   pattern for visual consistency) ---------- */
.details-overlay {
  display: none; position: fixed; inset: 0; z-index: 4000;
  background: rgba(11, 30, 61, 0.55);
  align-items: center; justify-content: center; padding: 20px;
}
.details-overlay.open { display: flex; }
.details-modal {
  position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 620px; max-height: 85vh; overflow-y: auto;
  padding: 32px 28px 24px;
}
.details-title { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.details-section-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo);
  background: #EFF6FF; border-radius: 8px; padding: 6px 10px; display: inline-block; margin: 18px 0 10px;
}
.details-section-tag:first-of-type { margin-top: 0; }
.seg-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px; }
.seg-airline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.seg-airline strong { display: block; font-size: 13.5px; color: var(--navy); }
.seg-airline span { display: block; font-size: 11.5px; color: var(--slate-light); }
.seg-route { display: flex; align-items: flex-start; gap: 14px; }
.seg-point { flex: 1; min-width: 0; }
.seg-point-end { text-align: right; }
.seg-time { font-size: 17px; font-weight: 800; color: var(--ink); }
.seg-date { font-size: 11.5px; color: var(--slate-light); margin: 1px 0 4px; }
.seg-airport { font-size: 12.5px; color: var(--slate); line-height: 1.4; }
.seg-duration { flex-shrink: 0; width: 90px; text-align: center; font-size: 11px; color: var(--slate-light); padding-top: 4px; }
.seg-duration-line { height: 1px; background: var(--line); margin-top: 6px; position: relative; }
.seg-duration-line::after { content: '\2708'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--indigo); }
.seg-baggage-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--slate); }
.layover-banner {
  text-align: center; font-size: 11.5px; font-weight: 700; color: var(--gold-dark);
  background: rgba(212,175,55,0.1); border-radius: 8px; padding: 8px; margin: 10px 0;
}
.seg-empty { color: var(--slate); font-size: 13px; }

@media (max-width: 640px) {
  .details-modal { padding: 24px 18px 20px; max-height: 90vh; }
  .seg-route { flex-direction: column; gap: 10px; }
  .seg-point-end { text-align: left; }
  .seg-duration { width: auto; text-align: left; padding-left: 2px; }
  .seg-duration-line { display: none; }
}

/* ---------- Round-trip: domestic Onward/Return tabs + combined (international) ---------- */
.combined-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #EFF6FF; border: 1px solid #BFDBFE; color: var(--indigo);
  font-size: 13px; font-weight: 600; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
}
.combined-banner svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-dark); }
.combined-banner span { flex: 1; min-width: 220px; }
.combined-mode-tabs { margin-bottom: 0; background: #fff; }
@media (max-width: 640px) {
  .combined-banner { flex-direction: column; align-items: flex-start; }
  .combined-mode-tabs { width: 100%; max-width: none; }
}

.rt-tabs { display: flex; gap: 4px; background: var(--mist); border-radius: var(--radius-pill); padding: 4px; max-width: 420px; margin-bottom: 20px; }
.rt-tab {
  flex: 1; background: none; border: none; border-radius: var(--radius-pill);
  padding: 12px 16px; font-weight: 700; font-size: 14.5px; color: var(--slate); cursor: pointer;
  text-align: center; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.rt-tab.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.rt-tab-check { color: var(--success); font-weight: 800; margin-left: 4px; }
@media (max-width: 640px) {
  .rt-tabs { max-width: none; width: 100%; }
}

/* Onward/Return tab row sits over the results COLUMN only (same 272px
   sidebar + gap offset as .results-layout below it), not full page width —
   the empty first cell leaves the sidebar's own column alone instead of
   the tabs floating above it, same for both domestic and international
   round trips since both panes share this one row. */
.rt-tabs-row { display: grid; grid-template-columns: 272px 1fr; gap: 24px; margin-bottom: 20px; }
.rt-tabs-row .rt-tabs { max-width: none; width: 100%; margin-bottom: 0; }
@media (max-width: 900px) {
  .rt-tabs-row { grid-template-columns: 1fr; }
  .rt-tabs-row > .rt-tabs-spacer { display: none; }
}

/* Progress banner above the results column (same offset as .rt-tabs-row)
   telling the traveler the return leg is still searching while the onward
   leg's results are already visible underneath. */
.rt-progress-row { display: grid; grid-template-columns: 272px 1fr; gap: 24px; margin-bottom: 20px; }
.rt-progress-banner {
  display: flex; align-items: center; gap: 10px; background: #EFF6FF; border: 1px solid #BFDBFE;
  color: var(--indigo); font-size: 13.5px; font-weight: 600; border-radius: var(--radius-md); padding: 12px 16px;
}
.rt-leg-loading {
  display: flex; align-items: center; gap: 10px; padding: 40px 20px; justify-content: center;
  color: var(--slate); font-size: 14px; font-weight: 600;
}
.rt-leg-spinner, .rt-leg-loading .rt-leg-spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(29,58,138,0.25);
  border-top-color: var(--indigo); display: inline-block; animation: rt-spin 0.8s linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .rt-progress-row { grid-template-columns: 1fr; }
  .rt-progress-row > .rt-progress-spacer { display: none; }
}

.flight-group.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.3); }

.rt-select-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(11,30,61,0.08);
  padding: 16px 36px;
}
.rt-select-summary-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-select-summary { font-weight: 700; font-size: 14px; color: var(--navy); }
.rt-select-legs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--slate); }
.rt-select-leg strong { color: var(--navy); font-weight: 700; }
.rt-select-total { font-weight: 800; font-size: 20px; color: var(--navy); font-family: 'Poppins', sans-serif; margin-right: auto; margin-left: 16px; }
.rt-select-bar .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Combined (international round-trip) card: two equally-weighted leg blocks
   (same padding/structure for ONWARD and RETURN so neither looks lopsided)
   + one shared price/footer. */
.combined-card { padding: 0; }
.combined-leg { padding: 16px 26px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; }
.combined-leg + .combined-leg { border-top: 1px dashed var(--line); }
.combined-leg-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-light);
  margin-bottom: 8px;
}
.flight-group .combined-leg-row { padding: 0; }
.combined-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 26px; border-top: 1px solid var(--line); background: var(--mist);
  font-size: 12.5px; color: var(--slate); font-weight: 600;
}
.combined-footer-right { display: flex; align-items: center; gap: 16px; }
.combined-footer .fc-amount { font-size: 19px; }

@media (max-width: 760px) {
  .rt-select-bar { flex-wrap: wrap; padding: 12px 16px; }
  .rt-select-total { margin-left: 0; }
  .rt-select-legs { font-size: 11px; gap: 2px 10px; }
}
@media (max-width: 640px) {
  .combined-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .combined-footer-right { width: 100%; justify-content: space-between; }
  .combined-leg { padding: 14px 16px; }
}

/* Hotel card */
.hotel-card {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.hotel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.hc-img { height: 100%; min-height: 160px; background: var(--mist); }
.hc-img img { width: 100%; height: 100%; object-fit: cover; }
.hc-body { padding: 18px 0; }
.hc-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: var(--navy); }
.hc-loc { font-size: 13px; color: var(--slate); margin-top: 4px; }
.hc-stars { color: var(--gold); font-size: 13px; margin-top: 8px; }
.hc-price { padding: 18px 22px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.hc-amount { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); }
.hc-night { font-size: 11.5px; color: var(--slate-light); }

/* Activity card */
.activity-card {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.activity-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ---------- Grouped hotel/activity cards (same hotel's multiple room rates,
   or same activity's multiple options, collapsed into one card with an
   expand toggle — same grouping pattern as the flight fare groups above) ---------- */
.hotel-card, .activity-card { display: block; padding: 0; }
.hotel-row, .activity-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 20px; }
.hc-options, .ac-options { display: none; border-top: 1px solid var(--line); background: var(--mist); }
.expanded .hc-options, .expanded .ac-options { display: block; }
.option-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 22px; border-top: 1px solid var(--line); }
.option-row:first-child { border-top: none; }
.option-row-label { font-size: 13px; color: var(--slate); font-weight: 600; }
.option-row-amount { font-weight: 800; font-size: 15px; color: var(--navy); font-family: 'Poppins', sans-serif; }
@media (max-width: 760px) {
  .hotel-row, .activity-row { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 760px) {
  .hotel-card, .activity-card { grid-template-columns: 1fr; }
  .hc-img { height: 160px; }
  .flight-group .flight-row, .flight-group .combined-leg-row { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .flight-group .fc-airline { justify-content: center; }
  .flight-group .fc-times { justify-content: center; }
  .flight-group .fc-price { align-items: center; }
  .fc-subrow { flex-direction: column; gap: 6px; text-align: center; }
  .combined-footer { flex-direction: column; text-align: center; }
  .combined-footer-right { justify-content: center; }
}