/* static/landing_2/css/deal-page.css
   Page furniture for the deal category pages: header bar (From selector + access bar)
   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 + access bar ===== */
.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;
}
/* From picker (.lp - styled in landing.css). Only the closed control needs page-specific sizing:
   it sits in a header strip beside its own "From" label, so it is a single 42px bar rather than
   the taller button the search card uses. This is also the one picker whose note earns a place on
   the closed control, because there it is that city's live deal count. */
.deal-page__selector .lp{ flex:1 1 auto; min-width:0; }
.deal-page__selector .lp-btn{ padding:4px 12px; min-height:42px; border-radius:10px; font-size:14px; }
.deal-page__selector .lp-btn__note{
  display:block; flex:none; font-size:11.5px; color:rgba(255,255,255,.8);
  font-variant-numeric:tabular-nums;
}

/* ===== Access bar =====
   How much of the selected city's deals this tier can see. Markup and the per-tier copy come from
   the deal_page_bar macro; deal-page.js only writes the numbers and the segment widths.
   Segment colours name the tier that unlocks that slice: gold open to everyone, brand blue a free
   account, purple Premium (the same purple as the tiles' Premium lock tag in deal-tile.css). */
.deal-page__access{ margin-left:auto; flex:1 1 380px; min-width:260px; }
.deal-page__access-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px 16px;
  flex-wrap:wrap; margin-bottom:8px;
}
.deal-page__access-count{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.deal-page__access-sub{ font-size:13px; color:var(--muted); }
.deal-page__access-sub--all{ font-weight:800; color:var(--text); }

/* Widths are set by deal-page.js as each tier's share of the city's deals */
.deal-page__access-bar{
  display:flex; gap:2px; height:8px; border-radius:999px; overflow:hidden;
  background:var(--bg); border:1px solid var(--border);
}
.deal-page__access-bar i{ display:block; height:100%; }

.deal-page__access-legend{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px;
  font-size:12px; color:var(--muted);
}
/* On the Premium tree the legend has one entry and rides the copy line, where it needs no top gap */
.deal-page__access-top .deal-page__access-legend{ margin-top:0; }
.deal-page__access-legend i{
  display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px;
}

.deal-page__access-bar .is-open,
.deal-page__access-legend .is-open{ background:var(--theme-yellow); }
.deal-page__access-bar .is-basic,
.deal-page__access-legend .is-basic{ background:var(--brand); }
.deal-page__access-bar .is-premium,
.deal-page__access-legend .is-premium{ background:var(--premium-light); }

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

/* ===== Page head: title row, filter panel and From/access 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 */
}
/* Gate tiles share the deal tiles' footprint so a row keeps a flat top and bottom edge */
.grid .deal-card,
.grid .tile--gate{ width:28vw; flex:0 0 auto; margin:0; }
@media (max-width:900px){
  .grid .deal-card,
  .grid .tile--gate{ width:100%; }
}

/* Tail line under the last rendered Premium tile, naming the deals that exist but are not drawn.
   20px is the tiles' own price size. A <p>, not a heading - the page's h1 is its title. */
.deal-page__more{
  margin:20px 0 0; text-align:center;
  font-size:20px; font-weight:800; letter-spacing:.2px; color:var(--text);
}

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

/* ===== Dark theme ===== */
/* The deal count sits on the closed control, which goes gold in dark mode (see .lp in landing.css) */
:root[data-theme="dark"] .deal-page__selector .lp-btn__note{ color:rgba(28,30,34,.65); }
: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); }