/* =============================================================================
   /search - Featured HappyTaskers, More HappyTaskers, and the Filters sheet.

   Loaded by headers/search-header.php immediately after css/search-results.css,
   so it wins on ties against that file's own `body.search-restyle` rules. Those
   rules are heavily !important, so the overrides here match that weight rather
   than trying to out-specify it.

   Values come from the "2026 Wild West Update" Sketch document, page "Search
   Results" (frames Top Boosted / No Boosted / Filters / Filters On / No
   Results), measured off the 2x artboard exports rather than eyeballed.

   Colour discipline: orange (#F8901C, the design's featured frame stroke, and
   #F7880C, the brand primary) is used ONLY for the featured card's frame and
   for a primary action. Prices, names, icons and meta text stay ink or neutral.
   ========================================================================== */

:root {
  --ht-featured-orange: #F8901C;
  --ht-ink: #000000;
  --ht-meta: #696969;
  --ht-meta-2: #7E7E7E;
  --ht-quote-bg: #F8F8F8;
  --ht-switch-off: #D8D8D8;
  --ht-switch-on: #1DBA00;
  --ht-sheet-line: #E6E6E6;
  --ht-control-line: #DDDDDD;
}

/* -----------------------------------------------------------------------------
   1. Sections
   -------------------------------------------------------------------------- */

body.search-restyle .ht-results-section { margin: 0; }
body.search-restyle .ht-results-section + .ht-results-section { margin-top: 88px; }

/* Section text sits 22px from the frame edge while the cards sit at 10px.
   That 12px difference is deliberate in the design, so the head is padded
   in rather than the whole column being shifted. */
body.search-restyle .ht-section-head { margin: 0 0 34px; padding: 0 10px; }
/* The frame closes More's head 29px above its first card, not 34 like Featured.
   Both sublines are the same 15px line, so this is a real 5px difference in the
   design rather than a measurement artifact - it is what puts the first More
   card on y=813. */
body.search-restyle .ht-results-section[data-section="more"] .ht-section-head { margin-bottom: 29px; }

/* These three are scoped under .search-main deliberately. search-results.css has
   `body.search-restyle .search-main p, ... h2 { color: var(--r-ink) }` - no
   !important, but the trailing element selector gives it (0,2,2) against a bare
   (0,2,1) here, so the heading and both sublines silently rendered #1A1A1A
   instead of their design colours. Adding .search-main takes these to (0,3,1)
   and wins on class count without escalating the !important war. Any NEW <p>,
   <h2> or <h3> added to this page needs the same scoping. */
body.search-restyle .search-main .ht-section-title {
  display: flex;
  align-items: center;
  /* 21px + a 10px gap puts the mascot's left edge on the design's x=255 with
     the heading starting at x=22. */
  gap: 10px;
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht-ink);
}

/* The Verified HappyTasker mark is full-bleed artwork that carries its own
   rounded corners, white outline and orange. Render it in a square box and let
   it bleed: no plate, no padding ring, no clipping, no recolour, no shadow. */
body.search-restyle .ht-section-mascot {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: block;
  /* The frame sits the mark 2-3px above the heading's line box rather than
     centred on it. Offset, not margin, so it cannot move the heading. */
  position: relative;
  top: -3px;
}

body.search-restyle .search-main .ht-section-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ht-meta);
}

/* The card list. Sorting only ever reorders children of one of these, which is
   what keeps a card from crossing between sections. */
body.search-restyle .ht-section-list { display: block; }

/* Background Checked filter on: the whole More section leaves, header and all. */
body.search-restyle.ht-filter-bgc-on .ht-results-section[data-section="more"] { display: none; }
/* A Featured card with no reviewed check is not "background checked" either. */
body.search-restyle.ht-filter-bgc-on .ht-section-list .item[data-bgc="0"] { display: none; }

/* -----------------------------------------------------------------------------
   1b. The captain's two /search icons, as CSS masks

   Both PNGs are knockout shapes (the shield's check and the sliders' gaps are
   transparent, not white), so one asset serves every tint: the mask gives the
   shape, `background-color: currentColor` gives the colour. Set `color` to
   recolour; never commit a second recoloured copy.
   -------------------------------------------------------------------------- */

body.search-restyle .ht-mask-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
body.search-restyle .ht-mask-shield-check-fill {
  -webkit-mask-image: url("../../images/shield-check-fill.png");
          mask-image: url("../../images/shield-check-fill.png");
}
body.search-restyle .ht-mask-sliders-horizontal-fill {
  -webkit-mask-image: url("../../images/sliders-horizontal-fill.png");
          mask-image: url("../../images/sliders-horizontal-fill.png");
}

/* -----------------------------------------------------------------------------
   2. Result cards
   -------------------------------------------------------------------------- */

/* Both card kinds sit on white with the design's 12px radius. The More card
   carries no border at all, only a soft shadow, so the orange frame is the
   featured card's alone. */
body.search-restyle .ht-section-list .three-part-section {
  /* x=10, w=370 on a 390 frame. search-results.css pins the card to width:100%
     with only two classes, so this three-class rule has to release that before
     the negative margins can widen it past the column's own 12px inset. */
  width: auto !important;
  /* max-width:100% resolves against the 366px column and would cap the card
     there, so the negative margins alone could not reach the design's 370. */
  max-width: none !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .05) !important;
  /* -2px each side against the column's 12px inset puts the card at x=10,
     w=370. Kept in the shorthand: a later `margin:` shorthand in this same
     rule silently reset the longhand version back to 0. */
  margin: 0 -2px 34px !important;
  overflow: visible !important;
}

body.search-restyle .ht-section-list .three-part-section:last-child { margin-bottom: 0 !important; }

body.search-restyle .ht-section-list .three-part-section:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 6px 18px rgba(0, 0, 0, .07) !important;
}

/* Featured: 1px orange frame plus the design's soft orange glow.
   The frame is an INSET ring, not a border. Sketch strokes the 370x205 rect on
   the inside, so the drawn card is 205 tall; a CSS border sits outside the
   content box and made every featured card 207, which then pushed the whole
   More section down the page. An inset shadow paints the same 1px line and
   costs no layout. */
body.search-restyle .ht-section-list .three-part-section.ht-featured-card {
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--ht-featured-orange),
              0 2px 10px rgba(248, 144, 28, .18) !important;
}
body.search-restyle .ht-section-list .three-part-section.ht-featured-card:hover {
  box-shadow: inset 0 0 0 1px var(--ht-featured-orange),
              0 3px 14px rgba(248, 144, 28, .26) !important;
}

/* The selected card already reads as selected through the right-hand panel on
   desktop; keep its ring neutral on a featured card so two oranges never stack. */
body.search-restyle .ht-section-list .three-part-section.ht-featured-card.active {
  box-shadow: inset 0 0 0 1px var(--ht-featured-orange),
              0 0 0 2px rgba(248, 144, 28, .45),
              0 2px 10px rgba(248, 144, 28, .18) !important;
}

/* The identity block starts at the avatar's top edge rather than centring
   against it, so the name, rating and shield read as one stack and every card's
   name sits on the same line regardless of how much is under it. */
body.search-restyle .ht-section-list .three-part-section .searchProvider_info {
  align-items: flex-start !important;
}
body.search-restyle .ht-section-list .three-part-section .searchProvider_infoText { padding-top: 2px !important; }

/* --- avatar + mascot mark --- */
body.search-restyle .three-part-section .profile-imgs { position: relative !important; overflow: visible !important; }
body.search-restyle .three-part-section .photo-container {
  border-radius: 50%;
  overflow: hidden;
}

body.search-restyle .ht-mascot-mark {
  position: absolute;
  /* Flush to the bottom-right of the avatar's box, overlapping the photo, with
     no ring around it - the design puts the mark straight onto the picture. */
  right: 0;
  bottom: 0;
  width: 25px;
  height: 25px;
  line-height: 0;
}
body.search-restyle .ht-mascot-mark img { width: 100%; height: 100%; display: block; }

/* --- name, rating, shield row ---
   The identity stack is name / rating / Background Checked at a 24px pitch, and
   the two icon rows share ONE 20px icon slot so both labels start on the same
   x. The icons keep their own sizes (star 14x15, shield 15x15) and left-align
   in that slot - they are NOT scaled to match each other, which is what left
   the two labels a pixel apart before. */
body.search-restyle .ht-section-list .three-part-section .display-name,
body.search-restyle .ht-section-list .three-part-section h2.display-name {
  font-size: 16px !important;
  line-height: 19px !important;
  margin: 0 !important;
}
body.search-restyle .ht-section-list .three-part-section .searchProvider_infoText {
  padding-top: 0 !important;
}

body.search-restyle .three-part-section .stars-container .custom-stars {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 15px;
  font-size: 12px;
  color: var(--ht-meta);
}
body.search-restyle .ht-section-list .three-part-section .stars-container { margin: 5px 0 0 !important; }
/* The card ships BOTH rating variants and hides one with .hidden, which in this
   theme still reserves its box - that dead 15px row was pushing the whole
   identity stack down. */
body.search-restyle .ht-section-list .three-part-section .stars-container .custom-stars.hidden {
  display: none !important;
}
/* font-size:0 on the row so the literal whitespace between the icon and its
   label stops rendering as an anonymous flex item; each child re-sets its size.
   That whitespace is what made the two labels start 8px apart. */
body.search-restyle .three-part-section .stars-container .custom-stars { font-size: 0 !important; }
body.search-restyle .three-part-section .stars-container .custom-stars .price-hour,
body.search-restyle .three-part-section .stars-container .custom-stars .reviews-count,
body.search-restyle .three-part-section .stars-container .custom-stars .new-service-provider {
  font-size: 12px !important;
  line-height: 15px !important;
  color: var(--ht-meta) !important;
}
body.search-restyle .three-part-section .stars-container .custom-stars .reviews-count { margin-left: 4px; }
/* The 20px slot. Natural glyph width, flushed left inside it. */
body.search-restyle .three-part-section .stars-container .custom-stars > i.fa-star {
  flex: 0 0 20px;
  width: 20px;
  /* The theme gives this icon an 8px right margin; the 20px slot already IS the
     spacing, and that margin is what pushed the rating label 8px past the
     Background Checked label below it. */
  margin: 0 !important;
  font-size: 14px;
  line-height: 15px;
  text-align: left;
  color: var(--ht-ink);
}
body.search-restyle .three-part-section .stars-container .new-service-provider {
  color: var(--ht-meta);
  font-size: 12px;
}

body.search-restyle .ht-bgc-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 9px;
  height: 15px;
  font-size: 12px;
  line-height: 15px;
  color: var(--ht-meta);
}
body.search-restyle .ht-bgc-shield {
  /* 15px of shield inside the same 20px slot the star uses. */
  width: 15px;
  height: 15px;
  margin-right: 5px;
  flex: 0 0 15px;
  /* Dark grey, not green and not orange: on the card this is a statement of
     fact next to the provider's name, not a status light. */
  color: #2C2C2C;
}
/* "ID verified" sits under Background Checked on the card and under the
   rating in the panel, in the same quiet grey. */
.ht-id-row {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #6b7280;
}
body.search-restyle .ht-id-row { margin-top: 6px; }
.ht-id-row .ht-id-icon {
  width: 15px;
  margin-right: 5px;
  font-size: 12px;
  color: #2C2C2C;
}

/* --- price ---
   "$" small and raised against a large amount, with "/hour" on its own line
   underneath, the whole block right-aligned to the card's padding edge. */
body.search-restyle .ht-section-list .three-part-section .view-priceRate { padding-top: 2px; }
body.search-restyle .ht-section-list .three-part-section .view-priceRate .view-price {
  display: block;
  text-align: right;
  text-decoration: none !important;
  line-height: 1 !important;
}
body.search-restyle .ht-section-list .three-part-section .view-priceRate .view-price .ht-price-cur {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ht-ink) !important;
  vertical-align: 7px;
  line-height: 1 !important;
}
body.search-restyle .ht-section-list .three-part-section .view-priceRate .view-price .ht-price-amt {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ht-ink) !important;
  letter-spacing: -0.3px;
  line-height: 1 !important;
}
body.search-restyle .ht-section-list .three-part-section .view-priceRate .view-price .ht-price-unit {
  display: block;
  margin-top: 3px;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ht-meta-2) !important;
  line-height: 1.2 !important;
}

/* --- quote strip --- */
body.search-restyle .ht-quote-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-left: 20px;
  padding: 12px 14px;
  background: var(--ht-quote-bg);
  border-radius: 10px;
}
body.search-restyle .search-main .ht-quote-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  /* Exactly two 15px lines + the strip's 12px padding = the design's 54px. */
  line-height: 15px;
  color: var(--ht-meta);
  /* Server-side truncation already shortens this to roughly two lines; the
     clamp is the guarantee at a width the server cannot know about. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.search-restyle .ht-quote-arrow {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--ht-ink);
}

/* -----------------------------------------------------------------------------
   3. The Filters button - ONE circular component, two placements

   The look lives entirely on .ht-filters-btn--circle: same diameter, shadow,
   border and icon size wherever it appears. The --topbar / --header classes
   carry placement only, never appearance, so the mobile and desktop controls
   cannot drift into two different-looking buttons.

   It is icon-only in both places, so the accessible name comes from the
   button's aria-label rather than from visible text.
   -------------------------------------------------------------------------- */

body.search-restyle .ht-filters-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--ht-ink);
  cursor: pointer;
  padding: 0;
  transition: background .14s ease, color .14s ease;
}
/* The button ships with the `hidden` attribute and search-filters.js takes it
   off, so the control is never visible without the sheet and handler behind it
   (see search-components/search-filters-button.php). The placement rules below
   turn display back on per breakpoint, so this has to out-specify them. */
body.search-restyle .ht-filters-btn[hidden] { display: none; }

/* The word is for assistive tech only - aria-label already carries the name,
   and the control is icon-only by design. */
body.search-restyle .ht-filters-btn-text { display: none; }

/* The circle. 53px with the search pill's own shadow (custom-style-2.css), not
   a lookalike, so the two shapes stay matched. */
body.search-restyle .ht-filters-btn--circle {
  width: 53px;
  height: 53px;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
body.search-restyle .ht-filters-btn--circle:hover { border: 0; }
body.search-restyle .ht-filters-btn--circle .ht-filters-btn-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
}
body.search-restyle .ht-filters-btn:focus-visible {
  outline: 2px solid var(--ht-ink);
  outline-offset: 3px;
}

/* Active filter: fill it in with ink. Reads unmistakably as "on" without
   spending the brand orange, which belongs to primary actions and the featured
   frame only. */
body.search-restyle.ht-filter-bgc-on .ht-filters-btn {
  background: var(--ht-ink);
  color: #FFFFFF;
}

/* --- placement: mobile header row, mirroring .search-back-home on the left --- */
body.search-restyle .ht-filters-btn--topbar {
  position: absolute;
  right: 10px;
  /* +1px because the header row's padding is 8 top / 5 bottom, so centring on
     the padding box lands a pixel above the pill. Keep this with that padding. */
  top: calc(50% + 1px);
  transform: translateY(-50%);
  z-index: 10;
}

/* --- placement: desktop header bar, to the right of the Search button ---
   Absolute against the bar (which is already position: relative), so the
   control is OUT of the bar's flow entirely. The bar therefore keeps the exact
   natural content width and internal spacing it had before this button
   existed - Service / Date / Time / Search stay compact, with no gap opened
   between Time and Search, and the bar does not move.
   Laying it out as a flex sibling instead is what regressed that: it stretched
   the bar to fill the column. No hard-coded width is used here; the offset is
   from the bar's own right edge, whatever width its content gives it. */
body.search-restyle .ht-filters-btn--header {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 991px) {
  body.search-restyle .ht-filters-btn--topbar { display: inline-flex; }
}
@media (min-width: 992px) {
  body.search-restyle .ht-filters-btn--header { display: inline-flex; }
}

/* -----------------------------------------------------------------------------
   4. The Filters sheet
   -------------------------------------------------------------------------- */

body.search-restyle .ht-filters-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body.search-restyle .ht-filters-overlay[hidden] { display: none; }

body.search-restyle .ht-filters-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .22s ease;
}
body.search-restyle .ht-filters-overlay.is-open .ht-filters-backdrop { opacity: 1; }

body.search-restyle .ht-filters-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* A flex item defaults to min-width:auto, so the sheet was refusing to shrink
     below its content's min-content width and rendered 402px wide inside a
     390px viewport, pushing the footer button off the right edge. */
  min-width: 0;
  max-width: 420px;
  /* Against the overlay's own box, not 100vh: an emulated mobile viewport
     resolves 100vh taller than the visible area, which dropped the sheet 26px. */
  max-height: calc(100% - 27px);
  height: calc(100% - 27px);
  background: #FFFFFF;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 24px rgba(0, 0, 0, .16);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .24s cubic-bezier(.22, .7, .3, 1), opacity .2s ease;
}
body.search-restyle .ht-filters-overlay.is-open .ht-filters-sheet {
  transform: translateY(0);
  opacity: 1;
}

body.search-restyle .ht-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px 0;
  flex: 0 0 auto;
}
body.search-restyle .ht-filters-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht-ink);
}
body.search-restyle .ht-filters-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: -6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ht-ink);
  cursor: pointer;
}
body.search-restyle .ht-filters-close-icon { width: 20px; height: 20px; }

body.search-restyle .ht-filters-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Asymmetric on purpose: 22 left puts the shield and copy on the design's
     left margin, 18 right lands the switch and the Sort control on its right. */
  padding: 36px 18px 24px 22px;
}

body.search-restyle .ht-filter-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht-ink);
}
body.search-restyle .ht-filter-heading--plain { margin-bottom: 24px; }

body.search-restyle .ht-filter-shield {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  margin-left: -4px;
  color: var(--ht-ink);
  transition: color .16s ease;
}
/* On: the shield turns green with the switch, so the two read as one control.
   Keyed off the sheet's own draft class, not the committed body class. */
body.search-restyle .ht-filters-overlay.is-draft-on .ht-filter-shield { color: var(--ht-switch-on); }

body.search-restyle .ht-filter-detail {
  display: flex;
  /* The design puts the switch's top edge on the subline's top edge. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
body.search-restyle .ht-filter-sub {
  flex: 1 1 auto;
  max-width: 208px;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #797979;
  cursor: pointer;
}

body.search-restyle .ht-filters-divider {
  height: 1px;
  background: var(--ht-sheet-line);
  margin: 58px 0 40px;
}

/* --- switch --- */
body.search-restyle .ht-switch {
  position: relative;
  flex: 0 0 auto;
  width: 61px;
  height: 28px;
  display: inline-block;
}
body.search-restyle .ht-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
body.search-restyle .ht-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ht-switch-off);
  transition: background .18s ease;
}
body.search-restyle .ht-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: transform .18s cubic-bezier(.22, .7, .3, 1);
}
body.search-restyle .ht-switch-input:checked ~ .ht-switch-track { background: var(--ht-switch-on); }
body.search-restyle .ht-switch-input:checked ~ .ht-switch-track .ht-switch-knob { transform: translateX(33px); }
body.search-restyle .ht-switch-input:focus-visible ~ .ht-switch-track {
  outline: 2px solid var(--ht-ink);
  outline-offset: 2px;
}

/* --- sort select --- */
body.search-restyle .ht-select-wrap { position: relative; }
body.search-restyle .ht-filters-sheet select.ht-sort-select {
  width: 100%;
  height: 55px;
  padding: 0 52px 0 30px;
  border: 1px solid var(--ht-control-line);
  border-radius: 12px;
  background: #FFFFFF;
  background-image: none;
  color: var(--ht-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 55px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.search-restyle .ht-filters-sheet select.ht-sort-select:focus-visible {
  outline: 2px solid var(--ht-ink);
  outline-offset: 2px;
}
body.search-restyle .ht-select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  color: var(--ht-ink);
  pointer-events: none;
}

/* --- footer --- */
body.search-restyle .ht-filters-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 23px 18px calc(24px + env(safe-area-inset-bottom, 0px)) 28px;
  background: #FFFFFF;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 -6px 14px rgba(0, 0, 0, .06);
}
body.search-restyle .ht-filters-clear {
  /* Padding for the tap target, negative margin so the label still starts on
     the footer's own padding edge where the design puts it. */
  padding: 12px 8px;
  margin: -12px -8px;
  background: none;
  border: 0;
  color: var(--ht-ink);
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
}
body.search-restyle .ht-filters-clear:hover { text-decoration: underline; }

body.search-restyle .ht-filters-apply {
  flex: 0 0 auto;
  min-width: 200px;
  height: 51px;
  padding: 0 20px;
  background: var(--ht-ink);
  border: 0;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .14s ease;
}
body.search-restyle .ht-filters-apply:hover { opacity: .88; }
/* "No Results": the filter would empty the page, so the button says so and
   stops being a way forward. */
body.search-restyle .ht-filters-apply.is-empty { cursor: default; }
body.search-restyle .ht-filters-apply.is-empty:hover { opacity: 1; }

body.ht-filters-open { overflow: hidden; }

/* Desktop: a centred dialog rather than a full-height bottom sheet. */
@media (min-width: 992px) {
  body.search-restyle .ht-filters-overlay { align-items: center; }
  body.search-restyle .ht-filters-sheet {
    height: auto;
    max-height: min(680px, calc(100vh - 80px));
    border-radius: 16px;
    transform: translateY(10px) scale(.99);
  }
  body.search-restyle .ht-filters-overlay.is-open .ht-filters-sheet { transform: translateY(0) scale(1); }
  body.search-restyle .ht-filters-body { padding-bottom: 32px; }
}

/* -----------------------------------------------------------------------------
   4b. Desktop: the PAGE scrolls the list; only the profile panel scrolls itself

   The viewport is partitioned with no dead zones. The header is fixed and
   scrolls nothing. The profile panel is its own bounded scroller. EVERY other
   pixel - the gutter left of the cards, the gap between the list and the panel,
   and the strip to the right of the panel - scrolls the results.

   That falls out of letting the document itself be the list scroller rather
   than a bounded inner column: anything that is not the panel scrolls the page,
   wherever the cursor happens to be. The previous approach (a bounded left
   pane) could only ever cover the region it spanned, which is why the outer
   gutters stayed dead however wide that pane was made.

   The cards do not move: the inner list keeps its width and left alignment, and
   the column is still capped so the extra room stays gutter.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  /* The template freezes the document with overflow-y:hidden (base
     custom-style-2.css) precisely so the desktop columns could scroll
     internally. That is the model being replaced, so the document has to be
     unfrozen here - the mirror of what the <=991px block already does for
     mobile. The :not() guards keep the two sheet scroll-locks and Bootstrap's
     own modal lock winning over this. */
  body.search-restyle:not(.ht-filters-open):not(.ht-bgc-notice-open):not(.modal-open) {
    overflow-y: auto !important;
  }

  /* The header has to hold its own position now that the document scrolls, and
     the sticky element must be .main-container, NOT .searchHeaderMaim inside
     it: a sticky box only travels within its parent, and that parent wraps the
     header alone (110px tall), so sticking the inner element let it scroll away
     with its own box. .main-container sits directly under body, so it has the
     whole document to stay pinned against. Sticky rather than fixed keeps it in
     flow, so nothing below it needs a spacer. */
  body.search-restyle .main-container {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #FFFFFF;
  }

  /* Not a scroller any more - it grows to the list's height and the document
     takes over, which is what hands every non-panel pixel to the list. */
  body.search-restyle .search-main .scroll-height-div {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.search-restyle .search-main .scroll-height-div > #scroll-height-div,
  body.search-restyle .search-main .scroll-height-div > .scroll-height-divFooter_section {
    max-width: 388px;
  }

  /* The panel rides along with the page and scrolls independently.
     align-self keeps it from stretching to the full document height, which
     would leave sticky nothing to travel within.
     top is 130 (header 110 + the 20px the card used to hold as its own
     margin-top) - see the .sidebar rule below for why that moved out here. */
  body.search-restyle .search-main .float-grid {
    position: sticky;
    /* The 20px gap above the panel is a MARGIN, i.e. in the flow, so it exists
       whatever the list is doing. It must not come from sticky pushing the
       panel down off its flow position: sticky can only do that while its
       containing block is taller than the panel, and turning the Background
       Checked filter on shortens the list below the panel's height, which
       collapses #custom-container to the panel's own height. Sticky then has
       zero room, the offset silently disappears and the gap closes to 0.

       With the offset in the flow, the panel starts at 130 in every state and
       top: 130px only holds that same line once the page scrolls - one offset,
       not a per-state compensation.

       Margin, not padding: it sits OUTSIDE the box, so it does not put a
       transparent strip back inside the composited layer (that strip is what
       rasterised black at the corners). */
    margin-top: 20px;
    top: 130px;
    align-self: flex-start;
    /* The sticky above promotes this box to its own composited layer. It has
       never had a background - it did not need one while it was static and
       unpromoted - so the layer's backing has no paint of its own, and WebKit
       rasterises the pixels nothing draws into as opaque BLACK.

       After the panel-sizing fix the only such pixels left are the four corners
       that #sidebar's 16px radius cuts away, which is exactly the shape the
       captain sees: four black right-angle wedges, one per corner. Painting
       .float-grid black in Chrome reproduces his wedges pixel-for-pixel, which
       is how this element was identified.

       The surface behind the panel must be the page background, so give the
       promoted layer that background. NOT a border-radius on this box: rounding
       something else to mask it would leave the layer just as unpainted. */
    background-color: var(--r-bg, #FFFFFF);
  }

  /* Two faults, one cause: the card was force-sized to the viewport
     (height: calc(100vh - 149px)) and pushed down by its own margin-top: 20px,
     so it deliberately did NOT fill .float-grid.

     - A short profile got a full-viewport-tall white box with dead space under
       its last element and under the Check availability bar.
     - Those leftovers - the 20px above the card and whatever remained below it
       - are transparent regions INSIDE a rounded, overflow-clipped, composited
       sticky scroller. They paint as opaque black in the captain's engine (the
       band measures pure #000000, exactly 21px tall and the panel's full 760px
       width, i.e. that margin strip precisely). Chrome happens to show the page
       white there, which is why it looked fine here.

     So: size to content with a cap, and move the 20px offset off the card and
     onto the sticky container above. The card now IS its container - no orphan
     transparent strip exists to rasterise, at the top or the bottom - and a
     short profile ends right under its own content. A long one still caps at
     the viewport and scrolls inside as before.

     Deliberately NOT fixed by giving the strip a white background: that would
     leave the box mis-sized and only hide where it fails to paint. */
  /* The wrapper carries a 1px top padding, which leaves a 1px transparent line
     above the card inside the sticky container - the same orphan-strip shape as
     the 20px one, just thinner. Zero it so the card and its container share an
     edge exactly. */
  body.search-restyle .search-main .searchResult_provider {
    padding-top: 0 !important;
  }
  body.search-restyle .search-main .searchResult_provider .sidebar {
    height: auto !important;
    max-height: calc(100vh - 150px) !important;
    margin-top: 0 !important;
    /* contain stops the panel chaining its scroll into the document, so
       bottoming it out does not yank the list. */
    overscroll-behavior: contain;
  }

  /* The list needs to be able to reach the bottom of a short result set without
     the page feeling stuck, and the panel already carries its own 20px inset. */
  body.search-restyle .search-main .scroll-height-div { padding-bottom: 40px !important; }
}

/* -----------------------------------------------------------------------------
   5. Mobile card metrics (the widths the design was drawn at)
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* The list keeps the theme container's own 12px inset, so cards come out 366
     wide against the design's 370 at a 390 viewport - 2px a side, and not worth
     buying. Zeroing that container padding IS worth avoiding: .searchHeaderMaim
     carries the .search-main class too, so the same rule uncancelled the
     Bootstrap .row negative margins in the header and pushed the document 12px
     wider than the viewport, i.e. a real sideways scroll on a phone. */
  body.search-restyle #scroll-height-div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 4px !important;
  }
  /* search-results.css reserves 4px on the right of the scroll wrapper for its
     overlay scrollbar; on mobile that just shaves the cards off centre. */
  body.search-restyle .search-main .scroll-height-div { padding-right: 0 !important; }

  /* The design's top bar is a 91px band. The theme's own mobile bar comes out
     at 81, which leaves the whole page riding 10px high against the frames. */
  body.search-restyle .searchHeaderMaim .section-heading > form > .row > .container {
    padding-top: 8px;
    padding-bottom: 5px;
  }

  /* Both card kinds inset the avatar 17px from the top. Featured closes 15px
     under its quote strip rather than 17, which is what makes it exactly 205
     tall against More's 139 - straight off the frame, not a fudge. */
  body.search-restyle .ht-section-list .three-part-section .searchProvider_whiteBox {
    padding: 17px 14px !important;
  }
  body.search-restyle .ht-section-list .ht-featured-card .searchProvider_whiteBox {
    padding-bottom: 15px !important;
  }
  body.search-restyle .ht-section-list .three-part-section .searchProvider_info {
    /* avatar ends at card-relative x=119; the name starts at 128. */
    gap: 9px !important;
    /* The card's own padding is the space under the identity block; a margin
       here made every More card 9px taller than the design. */
    margin-bottom: 0 !important;
  }

  body.search-restyle .ht-section-list .three-part-section .profile-imgs,
  body.search-restyle.search-browse .ht-section-list .three-part-section .profile-imgs {
    width: 105px !important;
    height: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
  }

  body.search-restyle .ht-section-list .three-part-section .display-name,
  body.search-restyle .ht-section-list .three-part-section h2.display-name {
    font-size: 16px !important;
  }
}

/* Very narrow phones: give the text column room back before it starts wrapping
   the name onto two lines. */
@media (max-width: 360px) {
  body.search-restyle .ht-section-list .three-part-section .profile-imgs,
  body.search-restyle.search-browse .ht-section-list .three-part-section .profile-imgs {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
  body.search-restyle .ht-filters-clear,
  body.search-restyle .ht-filters-apply { font-size: 17px; }
  body.search-restyle .ht-filters-apply { min-width: 0; flex: 1 1 auto; }
}