/* static/landing_2/css/deal-page.css
   Page furniture for the deal category pages: header bar (From selector + new-deals countdown)
   and the trip-length tag filter. Builds on the variables in landing.css.
   The per-route tile styles live in the swappable module css/deal-tile.css. */

/* ===== Header bar: From selector + countdown ===== */
.deal-page__bar{
  display:flex; gap:14px 28px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:12px 16px;
}

.deal-page__selector{ display:flex; align-items:center; gap:10px; flex:0 1 360px; min-width:240px; }
.deal-page__label{
  font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
/* Native select fallback (before Choices enhances it / if the CDN fails).
   Choices.js hides the real <select> and renders its own divs, so the closed
   "bar" colour actually comes from .choices__inner below - this fallback just
   keeps things on-brand if the CDN fails to load. */
.deal-page__selector select.input-box{
  flex:1 1 auto; min-width:0; height:42px; padding:0 12px;
  background:var(--brand); color:#fff;
  border:1px solid var(--brand); border-radius:10px; font:inherit; font-weight:700;
}
/* Choices-enhanced selector - the closed control the visitor actually sees */
.deal-page__selector .choices{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.deal-page__selector .choices__inner{
  display:flex; align-items:center; min-height:42px; padding:4px 12px;
  background:var(--brand); border:1px solid var(--brand); border-radius:10px;
}
.deal-page__selector .choices__list--single{ padding:0; }
.deal-page__selector .choices__list--single .choices__item{ color:#fff; font-weight:700; }
.deal-page__selector .choices[data-type*="select-one"]::after{ border-color:#fff transparent transparent; }
.deal-page__selector .choices[data-type*="select-one"].is-open::after{ border-color:transparent transparent #fff; }
.deal-page__selector .choices.is-focused .choices__inner,
.deal-page__selector .choices.is-open .choices__inner{ border-color:rgba(255,255,255,.7); }
/* The dropdown itself stays light so the option list is readable */
.deal-page__selector .choices__list--dropdown,
.deal-page__selector .choices__list[aria-expanded]{ background:#fff; border-radius:10px; }
.deal-page__selector .choices__item--selectable{ color:#052a35; }

.deal-page__countdown{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.deal-page__countdown-label{
  font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.deal-page__countdown ul{ display:flex; gap:6px; list-style:none; padding:0; margin:0; }
.deal-page__countdown li{
  min-width:48px; padding:5px 8px; text-align:center;
  background:#ffffff; border:1px solid var(--border); border-radius:10px;
}
.deal-page__countdown li span{
  display:block; font-size:16px; font-weight:800; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.deal-page__countdown li small{
  display:block; font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

@media (max-width:640px){
  .deal-page__bar{ align-items:stretch; flex-direction:column; }
  .deal-page__selector{ flex-basis:auto; }
  .deal-page__countdown{ margin-left:0; justify-content:space-between; }
}

/* ===== Page head: title row, filter panel and From/countdown bar =====
   One flex column so the filter panel can sit in a different place per viewport: on desktop
   (order:1) it's always visible, headed "Filters", and lives BELOW the From bar; on mobile it
   keeps its DOM position (between the title row and the bar) so tapping the Filters button in
   the title row pops it down ABOVE the location selector. */
.deal-page__head{ display:flex; flex-direction:column; }

.deal-page__titlerow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 16px;
}
.deal-page__titlerow .section__title{ margin:0; }

/* ===== Filter bars (price / discount / trip length - wired up by deal-page.js) ===== */
.deal-page__filters{ display:flex; flex-wrap:wrap; gap:10px 28px; order:1; margin:14px 0 0; }

/* Desktop-only "Filters" heading on the panel (the mobile button already names it) */
.deal-page__filterstitle{
  flex:0 0 100%;
  font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}

/* The Filters button only exists on mobile, where the groups collapse behind it. The media
   block must come AFTER the base .deal-page__filters rule above - same specificity, so source
   order is what lets display:none win when the panel isn't open. */
.deal-page__filters-toggle{
  display:none;
  appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  color:#fff; background:var(--brand);
  border:1px solid var(--brand); border-radius:999px; padding:8px 18px;
  flex:0 0 auto;
}
@media (max-width:640px){
  .deal-page__filters-toggle{ display:inline-flex; align-items:center; gap:6px; }
  .deal-page__filters{ display:none; order:0; margin:0 0 14px; }
  .deal-page__filters.is-open{ display:flex; }
  .deal-page__filterstitle{ display:none; }
}
.deal-page__filtergroup{ display:flex; flex-direction:column; gap:4px; }
.deal-page__filterlabel{
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.deal-page__filtergroup .tag-filter{ margin-top:0; }

.tag-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.tag-filter__btn{
  appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  color:var(--text); background:#ffffff;
  border:1px solid var(--border); border-radius:999px; padding:8px 16px;
  transition:background .15s ease, border-color .15s ease;
}
.tag-filter__btn:hover{ background:rgba(0,166,237,.08); }
.tag-filter__btn.is-active{
  background:var(--brand); border-color:var(--brand); color:#fff;
}

/* ===== Deal grid ===== */
/* The shared .grid (landing.css) is CSS multi-columns, which fills top-down column-first and
   leaves holes at the bottom of the right-hand columns. The deal pages want reading order -
   left-right then down, with any gap in the bottom row - so flex-wrap rows instead, keeping
   the same 28vw tile width the column layout gave. */
.grid{
  display:flex; flex-wrap:wrap; gap:16px;
  columns:auto; /* neutralise the multi-column layout */
}
.grid .deal-card{ width:28vw; flex:0 0 auto; margin:0; }
@media (max-width:900px){
  .grid .deal-card{ width:100%; }
}

/* ===== Empty state ===== */
.deal-page__empty{ color:var(--muted); text-align:center; padding:24px 0; }

/* ===== Dark theme ===== */
/* From selector: gold fill with black text so it pops on the dark page */
:root[data-theme="dark"] .deal-page__selector select.input-box,
:root[data-theme="dark"] .deal-page__selector .choices__inner{ background:var(--theme-yellow); border-color:var(--theme-yellow); }
:root[data-theme="dark"] .deal-page__selector select.input-box{ color:#000; }
:root[data-theme="dark"] .deal-page__selector .choices__list--single .choices__item{ color:#000; }
:root[data-theme="dark"] .deal-page__selector .choices[data-type*="select-one"]::after{ border-color:#000 transparent transparent; }
:root[data-theme="dark"] .deal-page__selector .choices[data-type*="select-one"].is-open::after{ border-color:transparent transparent #000; }
:root[data-theme="dark"] .deal-page__selector .choices.is-focused .choices__inner,
:root[data-theme="dark"] .deal-page__selector .choices.is-open .choices__inner{ border-color:rgba(0,0,0,.5); }
:root[data-theme="dark"] .deal-page__countdown li{ background:rgba(255,255,255,.05); }
:root[data-theme="dark"] .tag-filter__btn{ background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .tag-filter__btn:hover{ background:rgba(255,255,255,.12); }