/* =====================================================================
   FILTER BAR — qgf  (services page)

   Markup: page-services.php (#qgFilterHub, #qgfResults).
   Chips, counts and behaviour: the FILTERS block in assets/js/qg-services.js.

   Every selector starts at an ID so the older .qg-filter-hub rules in
   qg-services-additions.css and qg-services-mobile-master.css (most of them
   !important) cannot restyle the new bar. Position/stickiness of
   #qgFilterHub is left to those files on purpose — it already clears the
   site header correctly.
   ===================================================================== */

html body #qgFilterHub.qgf {
  --qgf-ink:   #231019;
  --qgf-ink-2: #5E4854;
  --qgf-ink-3: #8F7A86;
  --qgf-line:  rgba(35,16,25,.11);
  --qgf-soft:  #F5EFF2;
  --qgf-rose:  #B83A66;
  background: rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid rgba(35,16,25,.07) !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html body #qgFilterHub.qgf .qgf-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 24px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Scrolling rows ───────────────────────────────────────────────── */
html body #qgFilterHub.qgf .qgf-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html body #qgFilterHub.qgf .qgf-row::-webkit-scrollbar { display: none; }

/* Soft edges only where there is more to scroll to */
html body #qgFilterHub.qgf .qgf-row.has-right {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
html body #qgFilterHub.qgf .qgf-row.has-left {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
          mask-image: linear-gradient(90deg, transparent, #000 48px);
}
html body #qgFilterHub.qgf .qgf-row.has-left.has-right {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Reserve the refine row's height before JS fills it (no layout jump) */
html body #qgFilterHub.qgf .qgf-refine { min-height: 36px; }

/* ── Chips ────────────────────────────────────────────────────────── */
html body #qgFilterHub.qgf .qgf-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  min-height: 0 !important;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--qgf-line);
  border-radius: 999px;
  background: #fff;
  color: var(--qgf-ink);
  font: 500 .9rem/1 "DM Sans", system-ui, -apple-system, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
html body #qgFilterHub.qgf .qgf-chip:hover { border-color: rgba(35,16,25,.3); }
html body #qgFilterHub.qgf .qgf-chip:active { transform: scale(.97); }
html body #qgFilterHub.qgf .qgf-chip:focus-visible { outline: 2px solid #D4547A; outline-offset: 2px; }
html body #qgFilterHub.qgf .qgf-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

html body #qgFilterHub.qgf .qgf-n {
  font-size: .76rem;
  font-weight: 600;
  color: var(--qgf-ink-3);
  font-variant-numeric: tabular-nums;
}
html body #qgFilterHub.qgf .qgf-sr,
html body #qgfResults .qgf-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html body #qgFilterHub.qgf .qgf-chip.is-on {
  background: var(--qgf-ink);
  border-color: var(--qgf-ink);
  color: #fff;
}
html body #qgFilterHub.qgf .qgf-chip.is-on .qgf-n { color: rgba(255,255,255,.62); }
html body #qgFilterHub.qgf .qgf-chip.is-empty { color: var(--qgf-ink-3); opacity: .6; }
html body #qgFilterHub.qgf .qgf-chip.is-empty:hover { border-color: var(--qgf-line); }

/* Refine row — quieter, filled chips */
html body #qgFilterHub.qgf .qgf-row-label {
  flex: 0 0 auto;
  margin: 0 2px 0 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--qgf-ink-3);
}
html body #qgFilterHub.qgf .qgf-refine .qgf-chip {
  height: 32px;
  padding: 0 12px;
  font-size: .83rem;
  border-color: transparent;
  background: var(--qgf-soft);
  color: var(--qgf-ink-2);
}
html body #qgFilterHub.qgf .qgf-refine .qgf-chip:hover { background: #ECE3E7; border-color: transparent; }
html body #qgFilterHub.qgf .qgf-refine .qgf-chip.is-on {
  background: #FBE6EE;
  border-color: rgba(184,58,102,.35);
  color: var(--qgf-rose);
}
html body #qgFilterHub.qgf .qgf-refine .qgf-chip.is-on .qgf-n { color: rgba(184,58,102,.7); }
html body #qgFilterHub.qgf .qgf-sep {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 6px 4px;
  background: var(--qgf-line);
}

/* ── Results summary ──────────────────────────────────────────────── */
html body #qgfResults.qgf-results {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 32px;
  margin: 2px 0 18px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  scroll-margin-top: calc(var(--qg-header-h, 64px) + 110px);
}
html body #qgfResults .qgf-total { margin: 0; font-size: .92rem; color: #5E4854; }
html body #qgfResults .qgf-total strong { color: #231019; font-weight: 700; font-variant-numeric: tabular-nums; }
html body #qgfResults .qgf-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
html body #qgfResults .qgf-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  min-height: 0 !important;
  margin: 0;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: 999px;
  background: #231019;
  color: #fff;
  font: 500 .8rem/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .2s ease;
}
html body #qgfResults .qgf-token:hover { background: #B83A66; }
html body #qgfResults .qgf-token svg { width: 14px; height: 14px; opacity: .75; }
html body #qgfResults .qgf-token:focus-visible,
html body #qgfResults .qgf-clear:focus-visible { outline: 2px solid #D4547A; outline-offset: 2px; }
html body #qgfResults .qgf-clear {
  margin: 0 0 0 auto;
  min-height: 0 !important;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: #B83A66;
  font: 600 .85rem/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}
html body #qgfResults .qgf-clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Toolbar touches ──────────────────────────────────────────────── */
html body #qgPriceBtn.is-active {
  background: #231019 !important;
  border-color: #231019 !important;
  color: #fff !important;
}
html body #qgPriceBtn.is-active svg { stroke: #fff !important; color: #fff !important; }

/* The Trending / Recently Viewed row is hidden by JS (inline display:none)
   when there is nothing true to show; a mobile-master !important rule kept
   forcing it visible, leaving a bare "TRENDING NOW" heading on phones.
   That rule is `body:has(#qgHero) #qgTrendingRow` — :has() carries its
   argument's ID, so it weighs two IDs; these selectors outrank it. */
html body:has(#qgHero) #qgTrendingRow[style*="display: none"],
html body:has(#qgHero) #qgTrendingRow[style*="display:none"],
html body.page-template-page-services #qgTrendingRow[style*="display: none"],
html body.page-template-page-services #qgTrendingRow[style*="display:none"] { display: none !important; }

/* The floating cart is a phone control; on desktop it rendered as a bare
   icon and an underlined "0" beside "My Bookings". */
@media (min-width: 769px) {
  html body #qgCartFab { display: none !important; }
}

/* ── Phones ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html body #qgFilterHub.qgf .qgf-inner { padding: 8px 0 7px; gap: 4px; }
  html body #qgFilterHub.qgf .qgf-row { padding: 2px 16px; scroll-padding-inline: 16px; }
  html body #qgFilterHub.qgf .qgf-chip { height: 36px; padding: 0 13px; font-size: .86rem; }
  html body #qgFilterHub.qgf .qgf-refine { min-height: 34px; }
  html body #qgFilterHub.qgf .qgf-refine .qgf-chip { height: 30px; padding: 0 11px; font-size: .8rem; }
  html body #qgFilterHub.qgf .qgf-row-label { display: none; }
  html body #qgfResults.qgf-results { margin: 10px 0 2px; padding: 0 12px; }
  html body #qgfResults .qgf-total { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  html body #qgFilterHub.qgf .qgf-chip,
  html body #qgfResults .qgf-token { transition: none; }
  html body #qgFilterHub.qgf .qgf-chip:active { transform: none; }
}