.fancybox-skin .fancybox-outer .fancybox-inner {    height: 500px !important;}
#slider_outer { border: 2px solid #133072; min-height: 200px; min-width: 200px;margin-bottom: 5px;}#slider_outer .flexslider .slides > li {border: 0;}.flexslider { border: 0px;}#slider_loader img { position: relative; top: 149px; width: 50px;}#carousel .slides li {border: 2px solid gray; background: transparent !important;}#carousel li.flex-active-slide {border: 2px solid #133072;}#carousel.flexslider .slides img { max-width: 61px !important; height: 76px; min-width: 76px; min-height: 70px !important;width: 80px;}#carousel.flexslider .slides > li {width: 80px !important;max-height: 80px !important;}
@media screen and (max-width: 1024px) {
.custom-k-outer.py-100 .d-flex.w-100 {flex-wrap:wrap !important;}}

.custom-reviews.mp-0 {
  float: left;
  width: auto;
display: inherit;
}

.custom-reviews.mp-0 .review-count {
  font-size: 14px !important;
}


.search-main .custom-stars img {float:left;margin-right: 2px;}

.justify-content-between{justify-content:space-between;display:flex;}
.col-md-5.custom-stars .price-hour {  float: left; }
.review-count {text-align:left;color: #808080ab;font-size: 10px!important;float: left;display: ruby;text-transform: inherit;width: 100%; text-align: center;}
#client_review {  display: revert;}
.hireUser_detailsRight span.hiring--desc, #sidebar .hireUser_detailsRight ul li .hiring_highlights span.hiring--title {font-weight: 500 !important;}
input.custom-search-name {outline: none !important;border: 2px solid #808080a8;}.custom-kouter {margin-top: 0px !important;}.custom-style{font-size: 20px;color:#f7890c;font-weight: 500;}
@media screen and (max-width: 1400px){.all-stars { flex-direction: column !important;}}
.time-list li {text-align: left;color: #000;}.time-phase.tgray {color: gray;}
body.page-template.page-template-search.page.page-id-4967 .main-container { min-height: calc(100vh - 15vh);display: block;}
.profile-imgs.inner {border: 0px;} .new_tabSection ul.nav-tabs li > a:hover, .new_tabSection .ul.nav-tabs li > a:focus { border-bottom-color: #f6f7f9; } .custom-ks { border-bottom: 0px !important;}

@media screen and (max-width: 767px){

   .box-01 .row .font-17.font-weight-bold.text-center {
       width: 100% !important;
   }

   .box-01 .row .col-md-7.thiscolumn_absouluteIpad {
   position: relative !important;
   float: unset !important;
   width: 66% !important;
}

.box-01 .row .col-md-3.col-lg-4.thisColumn_widthIpad {
   width: 30% !important;
}

   #custom-container .bottom-text {
       display: block !important;
       width: 100% !important;
       position: relative !important;
       padding-top: 20px;
   }


   section.search-main .custom-kouter {
       padding: 0px 10px;
   }

   html body #custom-container .box-01.bg-white.p-4 {
       padding: 0px !important;
       width: 100% !important;
   }

   div#scroll-height-div {
       width: 100% !important;
   }

   .three-part-section {
       width: 100% !important;
   }

}

@media screen and (max-width: 576px){

.box-01 .row .col-md-3.col-lg-4.thisColumn_widthIpad {
   width: 100% !important;
}
input.custom-search-name {
   width: 100% !important;
   margin: 0 !important;
   margin-bottom: 20px !important;
}
button.r {
   right: 19px;
   left: unset!important;
}
input#k-search {
   margin-left: 0px !important;
}
}

.top-awards .hiring--desc.dark-blue {
  width: 60% !important;
}
.custom-sidebar.in #floating .close
{
	display:block !important;
}

.right-content-div1.floating {
  margin: 0 auto;
}
.teaser {
  float: left;
  width: 100%;
}
.complete{
  display:none;
  /* float: left; */
  width: 100%;	
}
.more {
  background: transparent;
  color: rgb(48, 100, 218);
  font-size: 13px;
  padding: 3px;
  cursor: pointer;
  float: left;
  width: 100%;
}

.exit-desktop .view-profile-btn {
  float: left;
  width: auto;
  font-size: 15px;
  color: #6b98ff;
  text-decoration: underline;
}
.exit-desktop .view-profile-btn {
  float: left;
  width: auto;
  font-size: 15px;
  color: #6b98ff;
  text-decoration: underline;
}

.view-profile-btn {
  float: left;
  width: 100%;
  font-size: 15px;
  text-align: left;
    color: #6b98ff;
}

.view-profile-btn i.fa {
	  color: #6b98ff;
}

.thisColumn_widthIpad.col-lg-2.border-right {
  border-right: 1px solid gray;
  padding: 10px;
  margin: 0 auto;
}

.view-profile-btn.default-load {
  display: none !important;
}

@media only screen and (max-width: 1023px) and (min-width: 993px)
{
.three-part-section .first-column.button-review .col-md-7.thiscolumn_absouluteIpad a.view-profile-btn.default-load {
    display: none !important;
}}
@media only screen and (max-width: 990px) and (min-width: 768px)
{
  .three-part-section .first-column.button-review .col-md-8.thiscolumn_absouluteIpad.teamCase-padding a.view-profile-btn.default-load {
    display: none!important;
}
}

.flexslider.carousel .video_container {
  padding: 0;
}

#credentials ul li .fa.fa-file.file {
  padding: 9px;
}

#credentials ul li .fa.file.fa-spinner {
  padding: 8px 7px 7px 7px;
}

#wrapper {
  display: inherit !important;
}


.col-md-5.custom-stars.d-flex img {
  height: 15px !important;
  width: auto;
  position: relative;
  top: 2px;
}

.col-md-5.custom-stars.d-flex {
  width: auto;
  margin-right: 6px;
}

.col-md-5.mp-0 {
  margin: 0;
  padding: 0;
  text-align: left;
}


.credentials ul li .num_counter.more-data {
  left: 3px !important;
}
.credentials ul li .num_counter {
  position: absolute;
  right: 65px ;
  font-size: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #000000;
  font-weight: 700;
}

#myCredentials #frame {
  width: 100%;
  min-height: 500px;
  border: 0;
}
/* 31 Aug updates=============================== */
.three-part-section {
  overflow: hidden!important;
}
@media screen and (max-width:991px){
  .first-column  .row> .view-profile-bottom.border-top {
    padding:0!important;
  }
}
.search-main .thiscolumn_absouluteIpad .teamCase-padding .fa-group:before, .fa-users:before {
  content: "\f0c0";
  position: absolute;
  top: 0px;
  right: 0px;
}
.box-01 .col-md-7 {
  padding: 0;
}

.search-main .col-md-7.thiscolumn_absouluteIpad , .fa-user:before {
  content: "\f007";
  position: absolute;
  top: 0px;
  right: 0px;
} 

.popup-fixed-bottom .fa-users:before {
  position: relative;
}
.popup-fixed-bottom .fa-user:before {
  position: relative;
} 

button.r{right:15px;left:unset!important}.fancybox-skin{max-width:500px;margin:0 auto!important;height:480px!important}.fancybox-iframe{width:500px!important;float:left}.d-none{display:none;}.read-more, .read-more:hover { font-size: 15px; color: #f7890c;float: left;}.fancybox-iframe { width: 500px !important;float: left;border-radius: 24px !important; } .fancybox-iframe { height: 480px !important; }.video_container { height: inherit;}

#photos_videos #slider_outerr {
  margin-left: inherit;
  margin-top: 0 !important;
}

#slider_outerr ul.slides li a {
  padding: 0;
}

.flex-direction-nav {
  width: 100%;
  display: inline-block;
}


.flex-direction-nav a::before {
  font-size:25px;
  color:#133072;
}

@media only screen and (max-width: 480px)
{
  .ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    left: 30%!important;
    top: 230px!important;
  }
}

#navbar {  
  display: flex;    
  background: transparent;
}

#navbar button {
  background: transparent;
}

#navbar .glyphicon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  background: rgba(255,255,255,0.6);
  background-image: url(controls.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 100%;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  cursor: pointer;
  padding: 8px;
}

div#search-by-keyword {
    position: relative;
}

div#search-by-keyword  button.r {
    display: inherit;
    left: 40px !important;
    width: 20px;
}

/* =============================================================
   Rounded floating cards on /search
   - Right marketing pane: rounded card with shadow, floating
     against the page background with breathing room from the
     top search/filter bar (no flush-against-top-bar look).
   - Left result list: rounded cards with shadow on desktop too;
     no chevron pointer from the active card.
   ============================================================= */

/* Desktop and tablet shared visual treatment for /search.
   Rounded floating cards on both sides, no chevron, 25px gap from the
   top filter bar. The right pane keeps its original 556px width here so
   the medium-desktop layout (992-1299px) doesn't crush the left list. */
@media (min-width: 992px) {
  .search-main .searchResult_provider .sidebar {
    margin-top: 25px;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  }

  .search-main .searchResult_provider .popup-fixed-bottom {
    border: 0 !important;
    border-top: 1px solid #ececec !important;
    border-radius: 0 0 12px 12px !important;
  }

  .search-main .three-part-section {
    border: 1px solid #ececec !important;
    box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.22) !important;
  }
  .search-main .three-part-section.active {
    border: 1px solid #f7890c !important;
    box-shadow: 0 6px 18px -8px rgba(247, 137, 12, 0.30) !important;
  }
  .search-main .three-part-section.active:before,
  .search-main .three-part-section.active:after {
    display: none !important;
  }
}

/* Wide desktop only: widen the right pane to match /[handle] (~787px)
   and stretch the inner content so it fills the card instead of hugging
   the left. Below this breakpoint the original 556px right pane stays
   so the left result column doesn't get crushed. */
@media (min-width: 1300px) {
  .search-main .searchResult_provider {
    width: 787px !important;
    flex: 0 0 787px;
  }
  .search-main .searchResult_provider .sidebar {
    width: 100% !important;
    height: calc(100vh - 109px) !important;
  }
  .search-main .scroll-height-div {
    width: calc(100% - 800px);
  }
  .search-main .searchResult_provider #modal-body {
    width: auto !important;
    margin-right: 30px !important;
    padding-right: 30px !important;
  }
  .search-main .searchResult_provider .right-content-div1,
  .search-main .searchResult_provider .right-content-div1.floating {
    width: 100% !important;
  }
}
/* Phase 2: mobile/narrow-width back-to-home arrow.
   Replaces the non-clickable :before pseudo-arrow on .seacrhTopbar_mobileshow
   with a real anchor so visitors can return to the home page. */
.seacrhTopbar_mobileshow::before {
  display: none !important;
}
.search-back-home {
  display: none;
}
@media (max-width: 991px) {
  /* Give the back-arrow a positioned parent that's just the pill's box, so
     top:50% centers it on the pill (its containing block was the taller
     wrapping row, which left it sitting above the pill). */
  body.search-restyle .searchHeaderMaim .row > .container { position: relative; }
  .search-back-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    color: #000;
    font-size: 20px;
    text-decoration: none;
    z-index: 10;
  }
  .search-back-home:hover,
  .search-back-home:focus {
    color: #F7880C;
  }
}

/* Phase 2: top search bar fits its content (drops hardcoded 500px / 250px so
   browse-mode "Add date / Add time" placeholders don't leave whitespace).
   Stays centered via auto margins. */
.searchResult_header_nav {
  width: max-content !important;
  max-width: 100% !important;
}
.searchResult_header_nav ul.searchResult_header_List1 li.header__listLi3 {
  width: auto !important;
}

/* Phase 2: light-gray placeholder text in the top search bar pills.
   Used by the mobile collapsed top bar ("Add date • Add time"). */
.search-pill-placeholder {
  color: #999 !important;
  font-weight: 400 !important;
}

/* Phase 2: Date pill placeholder. The <p class="show-SelectedDate"> is
   rendered empty in browse mode; the ::before pseudo paints "Add date"
   in gray. Existing JS calls .text(formattedDate) on the <p> when the
   visitor picks a date, making :empty stop matching and naturally
   returning the dark text color. */
.show-SelectedDate[data-browse-placeholder="1"]:empty::before {
  content: "Add date";
  color: #999;
  font-weight: 400;
}

/* Phase 2: Time pill placeholder. The pill renders its full span
   structure (.custom-target, .time-sep, .service-end-time,
   .service-hours-label) but initially empty. CSS shows "Add time" via
   ::before on .custom-target and hides the separator + sibling spans
   while .custom-target is empty. Existing time-picker JS writes into
   .custom-target / .service-end-time / .service-hours-label live as the
   visitor picks start time + duration, making the spans non-empty and
   naturally swapping the display. */
.searchResult_header_nav [data-browse-placeholder="1"] .custom-target:empty::before {
  content: "Add time";
  color: #999;
  font-weight: 400;
}
.searchResult_header_nav [data-browse-placeholder="1"] .custom-target:empty ~ .time-sep,
.searchResult_header_nav [data-browse-placeholder="1"] .custom-target:empty ~ .service-end-time,
.searchResult_header_nav [data-browse-placeholder="1"] .custom-target:empty ~ .service-hours-label {
  display: none;
}
/* Mobile modal Time row uses .service-start-time instead of .custom-target */
[data-browse-placeholder="1"] .service-start-time:empty::before {
  content: "Add time";
  color: #999;
  font-weight: 400;
  text-transform: none;
}
[data-browse-placeholder="1"] .service-start-time:empty ~ .time-sep,
[data-browse-placeholder="1"] .service-start-time:empty ~ .service-end-time,
[data-browse-placeholder="1"] .service-start-time:empty ~ .service-hours {
  display: none;
}

/* "Date selected, no time" → "Any time that day" search mode (date-only).
   Same mechanism as the browse placeholders above, but a real selection
   rather than a prompt: the start span is rendered empty and the Time pill
   carries data-when-anytime="1", so ::before paints "Any time" and the dash +
   end time + hours spans are hidden. It is NOT gray (it's a chosen state). The
   time-picker JS writes into the start span as the visitor picks a real time,
   making :empty stop matching and naturally swapping back to the time range. */
.searchResult_header_nav [data-when-anytime="1"] .custom-target:empty::before,
[data-when-anytime="1"] .service-start-time:empty::before {
  content: "Any time";
  text-transform: none;
}
.searchResult_header_nav [data-when-anytime="1"] .custom-target:empty ~ .time-sep,
.searchResult_header_nav [data-when-anytime="1"] .custom-target:empty ~ .service-end-time,
.searchResult_header_nav [data-when-anytime="1"] .custom-target:empty ~ .service-hours-label,
[data-when-anytime="1"] .service-start-time:empty ~ .time-sep,
[data-when-anytime="1"] .service-start-time:empty ~ .service-end-time,
[data-when-anytime="1"] .service-start-time:empty ~ .service-hours {
  display: none;
}

/* Phase 2 S5: render the reused /handle availability modals as centered
   overlays on /search. On /handle they're positioned within that page's
   layout; on /search they need explicit fixed/centered positioning + backdrop. */
.ht-search-availability-picker .availabilityCalenderModal:not(.hidden),
.ht-search-availability-picker .availabilityTimeModal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.ht-search-availability-picker .availabilityCalenderModal .calendar-container,
.ht-search-availability-picker .availabilityTimeModal .time-Container {
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow-y: auto;
}
.ht-search-availability-picker .availabilityCalenderClose_Btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}


/* ============================================================
   Phase 2 S5: visual polish for the /search availability picker.
   Scoped to .ht-search-availability-picker so /handle is untouched.
   ============================================================ */

/* --- Card chrome --- */
.ht-search-availability-picker .availabilityCalenderModal .calendar-container,
.ht-search-availability-picker .availabilityTimeModal .time-Container {
  position: relative;
  width: 480px !important;
  max-width: 100% !important;
  border-radius: 16px !important;
  padding: 0 0 20px !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden;
}
/* Let the time modal scroll when a long availability day exceeds 90vh, so the
   footer and last times stay reachable on short windows. Horizontal stays
   clipped so the week-slide still reads as coming from off-screen. (On mobile
   the column fits exactly, so this never triggers a scroll there.) */
.ht-search-availability-picker .availabilityTimeModal .time-Container { overflow-x: hidden; overflow-y: auto; }

/* Header row collapses; the close/back button floats at the card corner. */
.ht-search-availability-picker .availabilityCalenderClose_Btn.select_dateModalBox_header {
  padding: 0;
  border: 0;
  margin: 0;
}
.ht-search-availability-picker .availabilityCalenderClose_Btn .select_dateModalBox { display: none; }
.ht-search-availability-picker .availabilityCalenderClose_Btn .btn.close,
.ht-search-availability-picker .availabilityCalenderClose_Btn .btn.modal-btn_grey,
.ht-search-availability-picker .ht-picker-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  border-radius: 50% !important;
  background: #f4f4f5 !important;
  background-image: none !important;
  color: #555 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  z-index: 3 !important;
  transition: background 0.15s ease;
}
.ht-search-availability-picker .availabilityCalenderClose_Btn .btn.close:hover,
.ht-search-availability-picker .ht-picker-close:hover { background: #e7e7e9; }
/* time-selection step: give it a real top bar (back arrow left, close X right)
   instead of the theme's off-screen absolute buttons. */
.ht-search-availability-picker #availabilityTimeModal .time-Container { position: relative !important; }
.ht-search-availability-picker #availabilityTimeModal .select_dateModalBox_header {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #ededed;
}
.ht-search-availability-picker #availabilityTimeModal .ht-picker-title {
  font-size: 18px; font-weight: 700; color: #2c2c2c; line-height: 1.2;
}
.ht-search-availability-picker #availabilityTimeModal .select_dateModalBox_header .select_time_icon,
.ht-search-availability-picker #availabilityTimeModal .select_dateModalBox_header .ht-picker-close-time {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
}
/* Time modal's back chevron sits top-left */
.ht-search-availability-picker .availabilityTimeModal .availabilityCalenderClose_Btn .btn.close { right: auto !important; left: 14px !important; }

/* --- Calendar --- */
.ht-search-availability-picker h4.calendar-container_SelectDate {
  font-size: 16px;
  font-weight: 600;
  padding: 18px 0 18px;
  margin: 0;
  text-align: center;
  border-bottom: 1px solid #ededed;
}
.ht-search-availability-picker .calendar-container { padding-left: 22px; padding-right: 22px; }
.ht-search-availability-picker .calendar-header { padding-top: 4px; }
/* Month nav: 44px circle buttons at the edges, month centered. High specificity
   + !important to beat the base theme's 14px-wide spans and 71.5px margins. */
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin: 22px 0 14px !important;
}
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation #calendar-prev,
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation #calendar-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 0 !important;
  color: #2c2c2c !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: background 0.15s ease;
}
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation #calendar-prev { left: 6px !important; }
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation #calendar-next { right: 6px !important; }
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation #calendar-prev:hover,
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation #calendar-next:hover { background: #f4f4f5 !important; }
.ht-search-availability-picker .availabilityCalenderModal .calendar-navigation .calendar-current-date { margin: 0 !important; }
.ht-search-availability-picker .calendar-current-date { font-size: 15px !important; font-weight: 600 !important; }
.ht-search-availability-picker .calendar-body .calendar-dates li { margin-top: 12px !important; font-size: 15px !important; }
.ht-search-availability-picker .calendar-body .calendar-weekdays li { font-size: 11px !important; }
.ht-search-availability-picker .calendar-dates li.available:hover:after {
  background: #fff2e3;
}
/* Selected date: solid orange circle */
.ht-search-availability-picker .calendar-dates li.selected { color: #fff !important; }
.ht-search-availability-picker .calendar-dates li.selected:after {
  background: #F7880C !important;
  border-color: #F7880C !important;
  width: 40px !important; height: 40px !important;
}
/* Disabled days clearly muted */
.ht-search-availability-picker .calendar-dates li.disabled { color: #cfcfd2 !important; cursor: default; }

/* --- Time picker --- */
/* Header: prominent selected date + a status sub-line. The old Start/End summary
   boxes are dropped; the time chips and the CTA carry the range now. */
.ht-search-availability-picker .availabilityTimeModal .time_StartEndBox {
  display: block;
  padding: 10px 20px 12px;
  margin-bottom: 4px;
}
/* Separator sits between the date strip (above) and the "available times"
   sentence (below), running the full width. Hidden when the month is expanded. */
.ht-search-availability-picker .availabilityTimeModal .calendar-header {
  border-top: 1px solid #ededed;
  margin-top: 6px;
  padding-top: 14px;
}
.ht-search-availability-picker .timeEdit_Box { display: none; }
.ht-search-availability-picker .timing_Details { display: flex; flex-direction: column; }
.ht-search-availability-picker .timing_Details .display-date-input { order: -1; margin: 0 0 2px; font-size: 18px; font-weight: 700; color: #2c2c2c; }
.ht-search-availability-picker .timing_Details #startend-time-label { font-size: 13px; color: #9a9a9a; }
.ht-search-availability-picker #timeStart, .ht-search-availability-picker #timeEnd {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 6px 12px;
  min-width: 78px;
  text-align: center;
}
.ht-search-availability-picker #timeStart span, .ht-search-availability-picker #timeEnd span {
  display: block; font-size: 10px; letter-spacing: .04em; color: #9a9a9a; text-transform: uppercase;
}
.ht-search-availability-picker #timeStart p, .ht-search-availability-picker #timeEnd p { margin: 0; font-weight: 600; font-size: 14px; }
.ht-search-availability-picker .timeStart.timeEnd { border-color: #F7880C; box-shadow: 0 0 0 2px #fde6cb; }
.ht-search-availability-picker .time-Body { padding: 0 20px; }
/* Drop the base black-bordered box around the times for a clean grid. */
/* One continuous grid: flatten the AM/PM sections (display:contents) into a
   single grid on .allTimings_Box so all times flow together. Each chip carries
   its own AM/PM label, so the section headers are dropped. */
.ht-search-availability-picker .allTimings_Box {
  border: 0; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; overflow: hidden;
  /* Reserve space so the grid doesn't collapse to zero height while a day's
     times load on first open (keeps the popup from jumping). */
  min-height: 152px;
}
.ht-search-availability-picker .AM_Timings,
.ht-search-availability-picker .PM_Timings,
.ht-search-availability-picker .AM_Timings > div,
.ht-search-availability-picker .PM_Timings > div { display: contents; }
.ht-search-availability-picker .AM_Timings > span, .ht-search-availability-picker .PM_Timings > span { display: none; }

/* ---- Time blocks (Swimply-style grid) ----
   A picked range shows as solid orange endpoints with a continuous pale-orange
   band between them, painted with box-shadow so it bridges the grid gap. The JS
   already tags start / end / in-between / booked on each <li>. */
.ht-search-availability-picker .timingsTxt { display: contents !important; }
.ht-search-availability-picker .timingsTxt li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: auto;
  min-height: 46px;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2c;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
/* Per-chip AM/PM label (added by availability-picker.js). */
/* pointer-events:none so a click on the AM/PM label passes through to the time
   button (the click handler keys off the <li>, not the inner span). */
.ht-search-availability-picker .timingsTxt li .ht-period-lbl { font-size: 9px; font-weight: 600; letter-spacing: .04em; line-height: 1; color: #9a9a9a; pointer-events: none; }
.ht-search-availability-picker .timingsTxt li.startActiveTime .ht-period-lbl,
.ht-search-availability-picker .timingsTxt li.endActiveTime .ht-period-lbl { color: #fff; }
.ht-search-availability-picker .timingsTxt li.activeTymSelected .ht-period-lbl { color: #6e6e6e; }
.ht-search-availability-picker .timingsTxt li.time-disabled .ht-period-lbl,
.ht-search-availability-picker .timingsTxt li.inactive_Time .ht-period-lbl { color: #cfcfd2; }
/* Hide the renderer's spacers and the empty "N/A" placeholder so real times
   flow as one continuous grid. */
.ht-search-availability-picker .timingsTxt li:not(.active_Time) { display: none; }
.ht-search-availability-picker .timingsTxt li.available-time-stamp:hover { background: #fff2e3; border-color: #F7880C; }
.ht-search-availability-picker .timingsTxt li.time-disabled,
.ht-search-availability-picker .timingsTxt li.inactive_Time {
  color: #cfcfd2 !important; background: #fff; border-color: #ececec; cursor: default; text-decoration: line-through;
}
.ht-search-availability-picker .timingsTxt li.startActiveTime,
.ht-search-availability-picker .timingsTxt li.endActiveTime {
  background: #F7880C !important; border-color: #F7880C !important; color: #fff !important;
}
.ht-search-availability-picker .timingsTxt li.activeTymSelected {
  background: #fde6cb !important; border-color: transparent !important; color: #2c2c2c !important;
  box-shadow: -8px 0 0 0 #fde6cb, 8px 0 0 0 #fde6cb;
}
.ht-search-availability-picker .timingsTxt li.startActiveTime { box-shadow: 8px 0 0 0 #fde6cb; }
.ht-search-availability-picker .timingsTxt li.endActiveTime { box-shadow: -8px 0 0 0 #fde6cb; }

/* Neutralize base picker pseudo-elements the flat block grid replaces: the
   per-cell margin, the hover pill, the already-booked half-strike, the old
   endpoint band pseudos. */
.ht-search-availability-picker ul.timingsTxt li.active_Time { margin-bottom: 0; }
/* Skeleton placeholder chips while a day's times load (replaces the spinner).
   Same footprint as a real chip so the grid doesn't jump; a soft highlight
   sweeps left-to-right. */
.ht-search-availability-picker .timingsTxt li.ht-skel-chip {
  display: block;
  padding: 0;
  border: 0;
  background: #ededf0;
  cursor: default;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.ht-search-availability-picker .timingsTxt li.ht-skel-chip .ht-skel-sweep {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  animation: htSkelShimmer 1.15s ease-in-out infinite;
}
@keyframes htSkelShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ht-search-availability-picker .timingsTxt li.ht-skel-chip .ht-skel-sweep { animation: none; }
}
.ht-search-availability-picker ul.timingsTxt li.active_Time:hover::after,
.ht-search-availability-picker ul.timingsTxt li.inactive_Time:hover::after,
.ht-search-availability-picker ul.timingsTxt li.already-booked::before,
.ht-search-availability-picker ul.timingsTxt li.startActiveTime::before,
.ht-search-availability-picker ul.timingsTxt li.startActiveTime::after,
.ht-search-availability-picker ul.timingsTxt li.endActiveTime::before,
.ht-search-availability-picker ul.timingsTxt li.endActiveTime::after { content: none; }

/* ---- Week strip + expand-to-month (combined date + time, Swimply-style) ---- */
.ht-search-availability-picker .ht-week-strip { display: block; padding: 12px 16px 4px; }
.ht-search-availability-picker .ht-week-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ht-search-availability-picker .ht-week-navs { display: flex; align-items: center; gap: 8px; }
.ht-search-availability-picker .ht-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ht-search-availability-picker .ht-day-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 8px 0;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ht-search-availability-picker .ht-day-chip .ht-day-wd { font-size: 11px; font-weight: 600; color: #9a9a9a; }
.ht-search-availability-picker .ht-day-chip .ht-day-num { font-size: 17px; font-weight: 700; color: #2c2c2c; }
.ht-search-availability-picker .ht-day-chip:hover { border-color: #F7880C; }
.ht-search-availability-picker .ht-day-chip.selected { background: #F7880C; border-color: #F7880C; }
.ht-search-availability-picker .ht-day-chip.selected .ht-day-wd,
.ht-search-availability-picker .ht-day-chip.selected .ht-day-num { color: #fff; }
.ht-search-availability-picker .ht-day-chip.disabled, .ht-search-availability-picker .ht-day-chip:disabled { background: #fff; border-color: #f0f0f0; cursor: default; }
.ht-search-availability-picker .ht-day-chip.disabled .ht-day-wd,
.ht-search-availability-picker .ht-day-chip.disabled .ht-day-num,
.ht-search-availability-picker .ht-day-chip:disabled .ht-day-wd,
.ht-search-availability-picker .ht-day-chip:disabled .ht-day-num { color: #d3d3d3; }
.ht-search-availability-picker .ht-week-nav {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 50%; color: #2c2c2c; font-size: 12px; cursor: pointer;
}
.ht-search-availability-picker .ht-week-nav:hover { background: #f4f4f5; }
.ht-search-availability-picker .ht-week-nav:disabled { opacity: .35; cursor: default; }
/* Prev/next arrows carry the brand orange (the calendar/expand button stays neutral). */
.ht-search-availability-picker .ht-week-prev,
.ht-search-availability-picker .ht-week-next,
.ht-search-availability-picker .ht-month-prev,
.ht-search-availability-picker .ht-month-next { border-color: #F7880C; color: #F7880C; }
.ht-search-availability-picker .ht-week-prev:hover,
.ht-search-availability-picker .ht-week-next:hover,
.ht-search-availability-picker .ht-month-prev:hover,
.ht-search-availability-picker .ht-month-next:hover { background: #fff3e6; }
/* Week-strip slide: the new week eases in from the direction of travel
   (next = in from the right, prev = in from the left). The card clips at its
   edges, so the days read as sliding in from off-screen. */
@keyframes htWeekSlideFromRight { from { transform: translateX(38px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes htWeekSlideFromLeft { from { transform: translateX(-38px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.ht-search-availability-picker .ht-week-days.ht-slide-from-right { animation: htWeekSlideFromRight 0.24s ease; }
.ht-search-availability-picker .ht-week-days.ht-slide-from-left { animation: htWeekSlideFromLeft 0.24s ease; }

/* Expanded month view: the strip becomes a full calendar in place. */
.ht-search-availability-picker .ht-week-strip.ht-expanded { display: block; padding: 12px 16px 8px; }
.ht-search-availability-picker .ht-month-nav { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.ht-search-availability-picker .ht-month-title { flex: 1; text-align: center; font-size: 14px; font-weight: 700; color: #2c2c2c; }
.ht-search-availability-picker .ht-month-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.ht-search-availability-picker .ht-month-wd span { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: #9a9a9a; }
.ht-search-availability-picker .ht-month-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ht-search-availability-picker .ht-month-days .ht-day-chip { min-height: 38px; }
.ht-search-availability-picker .ht-month-days .ht-day-chip .ht-day-wd { display: none; }
.ht-search-availability-picker .ht-month-days .ht-day-chip .ht-day-num { font-size: 14px; }
.ht-search-availability-picker .ht-mh-empty { border: 0 !important; background: none !important; pointer-events: none; }
/* When the month is expanded it takes over the popup: hide the date header and
   the times/footer (which live in .time-Body) beneath it. */
.ht-search-availability-picker #htWeekStrip.ht-expanded ~ .calendar-header,
.ht-search-availability-picker #htWeekStrip.ht-expanded ~ .time-Body { display: none; }
.ht-search-availability-picker .ht-week-strip.ht-expanded { animation: htMonthExpand .18s ease; }
@keyframes htMonthExpand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* --- Footer --- */
.ht-search-availability-picker .allTimings_Btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #ededed;
  /* Negative side margins pull the top border out to the card edges so the
     divider runs the full width above the footer bar. */
  margin: 12px -20px 0;
}
/* Left side: the selection summary (date on top, time range + hours under it). */
.ht-search-availability-picker .ht-foot-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ht-search-availability-picker .ht-foot-date {
  font-size: 15px; font-weight: 700; color: #2c2c2c; line-height: 1.25;
}
.ht-search-availability-picker .ht-foot-range {
  font-size: 13px; color: #6e6e6e; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Right side: the compact CTA (no time inside). Its text is the step prompt:
   "Select a start time" -> "Select an end time" -> "Continue" (htSetCtaStep in
   availability-picker.js) - so width:auto + nowrap must fit the long labels. */
.ht-search-availability-picker .allTimings_Btns .saveTimeBtn {
  flex: 0 0 auto;
  width: auto !important;
  min-width: max-content;
  background: #F7880C;
  border: 0;
  border-radius: 10px !important;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 28px !important;
  white-space: nowrap;
}
/* Base disabled tint only; both surfaces repaint it as the legible neutral
   step-prompt grey (#ececec bg, #595959 text) - the /search partial's <style>
   block and index.php's inline block (/handle) win with !important. */
.ht-search-availability-picker .allTimings_Btns .saveTimeBtn.disabled { background: #f3c79a; cursor: not-allowed; }
/* Hover tooltips append to body; lift them above the picker modal overlay
   (z-index 100000) so they're not trapped behind it. */
.tooltip { z-index: 100001 !important; }

/* Booking handoff cover: a calm, light full-screen loader shown while Continue
   creates the order and hands off to /client-order-confirmation. Replaces the
   shared dark "Creating your Work Order" spinner so the step feels like a glide. */
.ht-booking-loader {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 251, 246, 0.72);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.ht-booking-loader.show { opacity: 1; visibility: visible; pointer-events: auto; }
/* Compact centered card (Halbert + a slim bar) instead of a full-page takeover. */
.ht-booking-loader .ht-bl-card {
  background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
  padding: 24px 30px 28px; text-align: center;
}
.ht-booking-loader .ht-bl-halbert { width: 120px; height: 140px; margin: 0 auto 16px; }
.ht-booking-loader .ht-bl-halbert svg { width: 100%; height: 100%; display: block; }
.ht-booking-loader .ht-bl-bar {
  width: 150px; height: 4px; border-radius: 999px;
  background: #f3e5d5; overflow: hidden; margin: 0 auto;
}
.ht-booking-loader .ht-bl-bar span {
  display: block; height: 100%; width: 38%; border-radius: 999px;
  background: #F7880C; animation: htBlSlide 1.15s ease-in-out infinite;
}
@keyframes htBlSlide { 0% { transform: translateX(-130%); } 100% { transform: translateX(400%); } }
.ht-booking-loader .ht-bl-text { margin: 14px 0 0; font-size: 13px; font-weight: 500; color: #9a9a9a; letter-spacing: .01em; }

/* ---- Phone: the picker takes over the full screen, footer pinned + roomier ---- */
@media screen and (max-width: 767px) {
  .ht-search-availability-picker .availabilityTimeModal:not(.hidden),
  .ht-search-availability-picker .availabilityCalenderModal:not(.hidden) { padding: 0 !important; }
  .ht-search-availability-picker .availabilityCalenderModal .calendar-container,
  .ht-search-availability-picker .availabilityTimeModal .time-Container {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* The title bar, step progress bar, and the "available times" line stay fixed
     at the top of the column. The times fill the rest and scroll; the footer is a
     fixed bar overlaying the bottom, so the times scroll underneath it. */
  .ht-search-availability-picker .availabilityTimeModal .time-Body {
    position: relative; flex: 1 1 auto; display: block; overflow: hidden;
    margin-bottom: 0 !important; padding: 0 !important;
  }
  .ht-search-availability-picker .availabilityTimeModal .allTimings_Box {
    position: absolute; inset: 0; overflow-y: auto; align-content: start;
    min-height: 0 !important; margin: 0 !important;
    padding: 12px 20px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Footer = a fixed bottom bar; the times scroll under it. Selection summary
     on the left (date + range), a compact Continue on the right. */
  .ht-search-availability-picker .availabilityTimeModal .allTimings_BttmBox {
    position: absolute !important; left: 0; right: 0; bottom: 0; margin: 0 !important;
  }
  .ht-search-availability-picker .availabilityTimeModal .allTimings_Btns {
    position: static !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    margin: 0 !important;
    background: #fff !important;
    border-top: 1px solid #ededed;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ht-search-availability-picker .ht-foot-date { font-size: 16px; }
  /* High specificity to beat custom-style.css's mobile saveTimeBtn rules
     (width:145px, radius:22px, padding:10px) that apply while disabled. */
  .ht-search-availability-picker .availabilityTimeModal .allTimings_Btns button.btn.btn-theme.saveTimeBtn,
  .ht-search-availability-picker .availabilityTimeModal .allTimings_Btns button.btn.btn-theme.saveTimeBtn.disabled {
    width: auto !important; padding: 14px 26px !important; font-size: 15px !important; border-radius: 10px !important; flex: 0 0 auto !important;
  }
}


/* ============================================================================
   /search VISUAL CLEANUP (style-guide pass)
   Everything below is scoped to body.search-restyle so it cannot leak to any
   other page. Visuals only: no markup, copy, id, name, AJAX, or behavior
   change. Tokens, spacing, cards, photo grid, buttons, color/type, sticky
   bar, and responsive per Automation/design/ui-style-guide.md.
   ============================================================================ */
body.search-restyle {
  --r-orange: #F7880C;
  --r-orange-deep: #E07A08;
  --r-blue: #1E66D0;
  --r-blue-bg: #EAF1FD;
  /* match-tier status-chip palette: solid tint for icon+text, soft tint for bg */
  --r-green: #16A34A;
  --r-green-bg: #E7F6EC;
  --r-gray: #6B7280;
  --r-gray-bg: #EFEFF2;
  --r-ink: #1A1A1A;
  --r-ink-2: #4A4A4A;
  --r-ink-3: #8A8A8A;
  --r-line: #ECECF0;
  --r-line-2: #F1F1F3;
  --r-bg: #FFFFFF;
  --r-card: #FFFFFF;
  --r-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --r-shadow-md: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  --r-shadow-card: 0 1px 3px rgba(0,0,0,.07), 0 10px 24px rgba(0,0,0,.06);
  --r-radius: 16px;
  --r-radius-card: 14px;
  --r-radius-ctl: 10px;
  background: var(--r-bg) !important;
}
body.search-restyle .main-container { background: var(--r-bg); }
body.search-restyle .search-main,
body.search-restyle .search-main p,
body.search-restyle .search-main h2,
body.search-restyle .search-main h3,
body.search-restyle .search-main h4,
body.search-restyle .search-main h5,
body.search-restyle .search-main h6 {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  color: var(--r-ink);
}

/* ---- S6/S8: top search bar — white bar with a hairline under it
   (Airbnb pattern), holds the search pill. ---- */
body.search-restyle .searchHeaderMaim {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E3E3 !important;
  box-shadow: none !important;
}
body.search-restyle .searchHeaderMaim .text-heads { padding: 6px 0; }
/* the header's own border-bottom is the divider now; keep the theme pseudo off
   so there's only one line. */
body.search-restyle .section-heading::before { display: none !important; }

/* The sort control lives in the Filters sheet now, not in a results-column
   header - see search-components/search-filters-sheet.php and
   css/custom-css/search-featured.css for its styling. */
/* Leave the search bar's own (theme) outline alone; don't add a second one. */
/* search bar: more breathing room in the pill + the orange action fills the
   entire right end of the grey pill (flush, full height, clipped to the
   pill's rounded right corner). */
body.search-restyle .searchResult_header_nav {
  /* overflow stays visible so the date/time dropdown panels (position:absolute
     descendants) aren't clipped; the orange action's rounded right corner is
     handled on .seacrh_IconBox below instead of by clipping the whole bar. */
  overflow: visible !important;
  padding: 0 !important;
  align-items: stretch !important;
}
body.search-restyle .searchResult_header_nav ul.searchResult_header_List1 {
  padding-left: 12px !important;
  align-items: center !important;
}
body.search-restyle .searchResult_header_nav ul.searchResult_header_List1 > li { padding: 0 14px !important; }
body.search-restyle .searchHeaderMaim .seacrh_IconBox.default-search-button {
  padding: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: stretch !important;
}
body.search-restyle .searchHeaderMaim .seacrh_IconBox button,
body.search-restyle .searchHeaderMaim .seacrh_IconBox .btn-show-results {
  background: var(--r-orange) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 56px !important;
  margin: 0 !important;
}
body.search-restyle .searchHeaderMaim .seacrh_IconBox button:hover {
  background: var(--r-orange-deep) !important;
}
/* Round the orange action's right corners to the bar's radius and clip its
   square fill, now that the bar itself no longer uses overflow:hidden. */
body.search-restyle .searchHeaderMaim .seacrh_IconBox {
  overflow: hidden !important;
  border-top-right-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
}
/* Drop the base theme's 1px divider line on the left edge of the Search
   button (.seacrh_IconBox button:before). Easy to restore if wanted. */
body.search-restyle .searchHeaderMaim .seacrh_IconBox button::before { display: none !important; }

/* On mobile only the compact pill shows in this header. The row's empty grid
   columns (logo, the hidden desktop search bar, a spacer) wrap onto their own
   lines, and the 10px row-gap stacks ~30px of dead space above the pill. Zero
   the gap so the pill sits tight, then an even 12px pad top and bottom keeps it
   off the band's edges. */
@media (max-width: 991px) {
  body.search-restyle .searchHeaderMaim .section-heading > form > .row.align-items-center { row-gap: 0; }
  body.search-restyle .searchHeaderMaim .text-heads { padding-top: 0; padding-bottom: 0; }
  body.search-restyle .searchHeaderMaim .section-heading { padding-top: 12px; padding-bottom: 12px; }
}

/* ---- collapsible search bar (desktop only) ----
   By default the desktop bar shows a compact pill (like the mobile view).
   Clicking it adds .ht-expanded to .searchResult_header_nav, which fades the
   pill out and the full segmented bar in. Mobile (<992px) keeps the theme's
   own pill + modal untouched, so the pill below is hidden there. */
body.search-restyle .ht-search-collapsed { display: none; }

@media (min-width: 992px) {
  body.search-restyle .searchResult_header_nav { position: relative !important; }

  /* While collapsed, hide the bar's own outline and let the pill overflow
     the (reserved) bar box so long summaries aren't clipped. */
  body.search-restyle .searchResult_header_nav:not(.ht-expanded) {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* The compact pill, centered over the reserved bar area. This mirrors the
     mobile top bar (.seacrhTopbar_mobileshow): a two-line centered pill with
     a bold service name on top and small grey date/time below. No icon, no
     divider, soft shadow, fully rounded. */
  body.search-restyle .searchResult_header_nav .ht-search-collapsed {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    margin: 0;
    padding: 12px 40px;
    min-width: 320px;
    width: auto;
    background: var(--r-card, #fff);
    border: 0;
    border-radius: 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    z-index: 3;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease, visibility .2s, box-shadow .18s ease;
  }
  body.search-restyle .searchResult_header_nav .ht-search-collapsed:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
  }
  body.search-restyle .ht-search-collapsed .ht-sc-service {
    display: block;
    font-size: 16px; font-weight: 500; color: var(--r-ink, #2C2C2C);
    line-height: normal; margin: 0;
  }
  body.search-restyle .ht-search-collapsed .ht-sc-when {
    display: block;
    font-size: 12px; font-weight: 400; color: #646464;
    line-height: normal;
  }
  body.search-restyle .ht-search-collapsed .search-pill-placeholder { color: #999 !important; }

  /* Full bar hidden while collapsed (kept in flow so the header height
     doesn't jump when it expands). No transform here: a transform on the
     bar would become the containing block for the date/time dropdown
     panels and reposition them, so the expand reads as a simple crossfade. */
  body.search-restyle .searchResult_header_nav ul.searchResult_header_List1,
  body.search-restyle .searchResult_header_nav .seacrh_IconBox {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, visibility .24s;
  }

  /* Expanded: pill fades out, full bar fades in. */
  body.search-restyle .searchResult_header_nav.ht-expanded .ht-search-collapsed {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.96);
    pointer-events: none;
  }
  body.search-restyle .searchResult_header_nav.ht-expanded ul.searchResult_header_List1,
  body.search-restyle .searchResult_header_nav.ht-expanded .seacrh_IconBox:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ---- expanded bar: Airbnb-style segmented editor (desktop only) ----
   At rest the bar is a white pill with a soft shadow and three labelled
   segments (Service / Date / Time): a small bold label on top, the value
   below, with thin dividers between. Hovering a segment gives it a light-grey
   rounded highlight. When a segment's dropdown is open, the whole bar dims to a
   grey track and the open segment lifts into a white pill. The action is a
   rounded orange "Search" pill. Collapsed pill + mobile (<992px) are untouched. */
@media (min-width: 992px) {
  /* resting expanded bar: white pill, soft shadow ring (no hard border) */
  body.search-restyle .searchResult_header_nav.ht-expanded {
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .12) !important;
  }
  /* a segment's dropdown is open: dim the whole bar to a grey track */
  body.search-restyle .searchResult_header_nav.ht-expanded:has(#select-category:not(.hidden)),
  body.search-restyle .searchResult_header_nav.ht-expanded:has(#select-date:not(.hidden)),
  body.search-restyle .searchResult_header_nav.ht-expanded:has(#select-start-end-times:not(.hidden)) {
    background: #EBEBEB !important;
  }
  body.search-restyle .searchResult_header_nav.ht-expanded ul.searchResult_header_List1 {
    padding-left: 6px !important;
    align-items: stretch !important;
    flex: 1 1 auto;
  }
  /* each segment: two-line (label over value), rounded for the active pill */
  body.search-restyle .ht-expanded ul.searchResult_header_List1 > li {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    /* horizontal padding totals 68px (was 34+34) so section spacing is
       unchanged, but it's split 28 left / 40 right to scoot the label+value
       a little to the left inside each section. */
    padding: 11px 40px 11px 28px !important;
    /* base theme puts border-right:1px #BFBFBF here; combined with the radius it
       renders as a curved grey line. Kill it; the ::after below is our divider. */
    border: 0 !important;
    border-radius: 40px;
    position: relative;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
  }
  /* labels */
  body.search-restyle .ht-expanded .header__listLi1::before { content: "Service"; }
  body.search-restyle .ht-expanded .header__listLi2::before { content: "Date"; }
  body.search-restyle .ht-expanded .header__listLi3::before { content: "Time"; }
  body.search-restyle .ht-expanded ul.searchResult_header_List1 > li::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--r-ink, #222);
    line-height: 1.3;
  }
  /* value text under each label */
  body.search-restyle .ht-expanded .header__listLi1 > .category_title,
  body.search-restyle .ht-expanded .header__listLi2 > .open-back-drop > .show-SelectedDate,
  body.search-restyle .ht-expanded .header__listLi3 > .open-back-drop {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #717171 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  /* filled state (Date + Time picked, i.e. specific-time mode): the values go
     black and the labels un-bold. Browse mode (only Service entered; Date/Time
     show the grey "Add date / Add time" placeholders) is left as-is. */
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) ul.searchResult_header_List1 > li::before {
    font-weight: 400 !important;
  }
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) .header__listLi1 > .category_title,
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) .header__listLi2 > .open-back-drop > .show-SelectedDate,
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) .header__listLi3 > .open-back-drop,
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) .header__listLi3 > .open-back-drop * {
    color: var(--r-ink, #1A1A1A) !important;
  }
  /* clear (×) on the Date and Time pills: shown only when they're filled.
     Date and time clear together (back to anytime), so the × on either pill
     resets both. Sits in the pill's right padding, left of the divider. */
  body.search-restyle .ht-expanded .ht-when-clear {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--r-ink-3, #8A8A8A);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: background .12s ease, color .12s ease;
  }
  body.search-restyle .ht-expanded .ht-when-clear:hover {
    background: #ECECEC;
    color: var(--r-ink, #1A1A1A);
  }
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) .header__listLi2:hover .ht-when-clear,
  body.search-restyle .ht-expanded:has([data-browse-placeholder="0"]) .header__listLi3:hover .ht-when-clear {
    display: inline-flex;
  }
  /* dividers between segments */
  body.search-restyle .ht-expanded ul.searchResult_header_List1 > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: #DDDDDD;
    transition: opacity .12s ease;
  }
  /* hide the divider adjacent to a hovered or active segment (both sides) */
  body.search-restyle .ht-expanded ul.searchResult_header_List1 > li:hover::after,
  body.search-restyle .ht-expanded ul.searchResult_header_List1 > li:has(+ li:hover)::after,
  body.search-restyle .ht-expanded .header__listLi1:has(#select-category:not(.hidden))::after,
  body.search-restyle .ht-expanded .header__listLi2:has(#select-date:not(.hidden))::after,
  body.search-restyle .ht-expanded li:has(+ .header__listLi2:has(#select-date:not(.hidden)))::after,
  body.search-restyle .ht-expanded li:has(+ .header__listLi3:has(#select-start-end-times:not(.hidden)))::after {
    opacity: 0;
  }
  /* hover */
  body.search-restyle .ht-expanded ul.searchResult_header_List1 > li:hover {
    background: rgba(0, 0, 0, .055);
  }
  /* active segment (its dropdown is open) lifts into a white pill */
  body.search-restyle .ht-expanded .header__listLi1:has(#select-category:not(.hidden)),
  body.search-restyle .ht-expanded .header__listLi2:has(#select-date:not(.hidden)),
  body.search-restyle .ht-expanded .header__listLi3:has(#select-start-end-times:not(.hidden)) {
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
  }
  /* action: always show the labelled "Search" pill while expanded */
  body.search-restyle .searchResult_header_nav.ht-expanded .seacrh_IconBox.default-search-button {
    display: none !important;
  }
  body.search-restyle .searchResult_header_nav.ht-expanded .seacrh_IconBox.hidden-search-button {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    /* even 5px inset on top, right, and bottom so the orange pill sits inside
       the white bar with equal space all around (incl. the rounded right end,
       since an inset pill stays concentric with the bar's pill). */
    padding: 0 !important;
    margin: 5px 5px 5px 6px !important;
  }
  body.search-restyle .searchResult_header_nav.ht-expanded .hidden-search-button button,
  body.search-restyle .searchResult_header_nav.ht-expanded .hidden-search-button .btn-show-results {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: stretch !important;
    border-radius: 999px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
  }
  body.search-restyle .ht-expanded .hidden-search-button .search_txtBtn {
    display: inline !important;
  }
}

/* ---- search bar: extend right instead of wrapping when inputs are filled ----
   The header row is logo (col-md-2) + bar (col-md-8) + an empty spacer
   (col-md-2). When the segments are filled with longer values at a narrowish
   desktop width, they used to wrap to a second line (and grow the header).
   Instead: drop the empty spacer, keep the bar at its 8-col resting width as a
   floor, and let it shrink-wrap-grow into the freed space (up to the container
   edge) as the values get longer, all on one line. Below 992px the expanded bar
   isn't used, so this is desktop-only. */
@media (min-width: 992px) {
  body.search-restyle .searchHeaderMaim .section-heading > form > .row {
    flex-wrap: nowrap !important;
  }
  /* logo keeps its col-md-2 box (16.66%) so the spacer mirrors it and the bar
     sits centered at rest. */
  /* right spacer: a shrinkable balancer. At rest it matches the logo column so
     the bar is centered; as the values get longer it gives up its width so the
     bar pushes right, only as much as needed. */
  body.search-restyle .searchHeaderMaim .section-heading > form > .row > .col-md-2:last-child {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* bar column: at least 8 cols (centered resting look), grows with content */
  body.search-restyle .searchHeaderMaim .section-heading > form > .row > .col-md-8 {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 66.6667% !important;
    max-width: 100% !important;
  }
  /* segments stay on one line and push the bar wider rather than wrapping */
  body.search-restyle .searchResult_header_nav.ht-expanded ul.searchResult_header_List1 {
    flex-wrap: nowrap !important;
  }
}

/* ---- About Me "Show more" / "Show less" toggle: light-grey pill ----
   The theme renders this as an orange text link (.read-more is orange + floated
   in this file's base rules). Restyle it as a flat grey rounded pill. */
body.search-restyle .readmoreBtn { line-height: 1; }
body.search-restyle .readmoreBtn .read-more,
body.search-restyle .readmoreBtn .read-less {
  display: inline-flex;
  align-items: center;
  float: none !important;
  background: #F7F7F7;
  color: #222 !important;
  border: 1px solid #DDDDDD;
  border-radius: var(--r-radius-ctl);
  padding: 9px 18px;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
body.search-restyle .readmoreBtn .read-more:hover,
body.search-restyle .readmoreBtn .read-less:hover {
  background: #EFEFEF;
  border-color: #CFCFCF;
  color: #222 !important;
}

/* ---- canvas wrapper ---- */
body.search-restyle section.search-main { background: var(--r-bg); }
body.search-restyle #custom-container { gap: 20px; }

/* ---- S7: left column — cards ---- */
/* drop the theme's 40px right padding so cards span the full column width */
body.search-restyle #scroll-height-div { padding-left: 0 !important; padding-right: 0 !important; }
body.search-restyle #sresults,
body.search-restyle span#sresults {
  font-size: 15px;
  font-weight: 700;
  color: var(--r-ink);
}

/* result cards */
body.search-restyle .scroll-height-div { padding-right: 4px; }
body.search-restyle .three-part-section {
  background: var(--r-card) !important;
  border: 1px solid #E8E8EC !important;
  border-radius: var(--r-radius-card) !important;
  box-shadow: var(--r-shadow-sm) !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  overflow: hidden !important;
  transition: box-shadow .14s ease, border-color .14s ease;
}
body.search-restyle .three-part-section:hover { box-shadow: var(--r-shadow-md) !important; }
body.search-restyle .three-part-section.active {
  box-shadow: 0 0 0 2px rgba(247,136,12,.45), var(--r-shadow-card) !important;
}
body.search-restyle .three-part-section.active:before,
body.search-restyle .three-part-section.active:after { display: none !important; }
body.search-restyle .three-part-section {
  width: 100% !important;
  max-width: 100% !important;
}
body.search-restyle .three-part-section .first-column,
body.search-restyle .three-part-section .first-column.button-review {
  display: block !important;
  width: 100% !important;
  float: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.search-restyle .three-part-section .searchProvider_whiteBox {
  background: transparent !important;
  width: 100% !important;
  padding: 16px !important;
}
body.search-restyle .three-part-section .searchProvider_InFo_Box {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.search-restyle .three-part-section .searchProvider_info {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
body.search-restyle .three-part-section .searchProvider_infoText { min-width: 0 !important; width: auto !important; flex: 1 1 auto !important; }
body.search-restyle .three-part-section .view-priceRate { flex: 0 0 auto !important; width: auto !important; align-self: flex-start !important; white-space: nowrap; text-align: right; }
body.search-restyle .three-part-section .profile-imgs {
  width: 72px !important; height: 72px !important; min-width: 72px !important; max-width: 72px !important;
  float: none !important;
  border-radius: 50% !important; overflow: hidden;
}
/* Browse mode has no availability block, so the photo can read larger and more profile-like */
body.search-browse .three-part-section .profile-imgs {
  width: 96px !important; height: 96px !important; min-width: 96px !important; max-width: 96px !important;
}
body.search-restyle .three-part-section .photo-container { width: 100%; height: 100%; }
body.search-restyle .three-part-section .profile-imgs img,
body.search-restyle .three-part-section .photo-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
body.search-restyle .three-part-section .searchProvider_infoText { padding: 0; }
body.search-restyle .three-part-section .display-name,
body.search-restyle .three-part-section h2.display-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--r-ink) !important;
  margin: 0 0 2px !important;
}
body.search-restyle .three-part-section .stars-container .custom-stars { color: var(--r-ink-2); font-size: 13px; }
body.search-restyle .three-part-section .stars-container .new-service-provider { color: var(--r-ink-2); }
body.search-restyle .three-part-section .view-priceRate .view-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--r-ink) !important;
  white-space: nowrap;
}
body.search-restyle .three-part-section .view-priceRate .view-price span { font-weight: 400; color: var(--r-ink-2); }
/* card availability block ("Other Options" / times) — no divider line, just space */
body.search-restyle .three-part-section .ks-custom4 {
  margin-top: 4px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  /* the newline before the first match row renders as a leading line box at the
     container's inherited line-height (~17px of dead space above "Exact Match").
     Zero the container font-size to collapse it; each match row re-sets 13px. */
  font-size: 0 !important;
}
/* Match label, time, and date share one size and one icon treatment so the
   block reads as a consistent set (was a 13px/16px mix with mismatched icons). */
body.search-restyle .three-part-section .ks-custom4 p.workOrder--left,
body.search-restyle .three-part-section .ks-custom4 .ks-custom2,
body.search-restyle .three-part-section .ks-custom4 .ks-custom {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  color: var(--r-ink-2) !important;
}
body.search-restyle .three-part-section .ks-custom4 p.workOrder--left { font-weight: 600 !important; color: var(--r-ink) !important; }
body.search-restyle .three-part-section .ks-custom4 .ks-custom:last-child { margin-bottom: 0 !important; }
body.search-restyle .three-part-section .ks-custom4 .ks-custome3 { font-size: 13px !important; color: var(--r-ink-2) !important; margin: 0 !important; }
/* one icon size + colour for all three rows */
body.search-restyle .three-part-section .ks-custom4 i {
  font-size: 14px !important;
  color: var(--r-ink-3) !important;
  width: 16px !important;
  text-align: center !important;
}
/* the wrapper divs around each icon shouldn't add their own box/margins */
body.search-restyle .three-part-section .ks-custom4 div.workOrder--left {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Match-tier STATUS CHIP — the availability row reads as a soft status badge,
   not a button: a rounded pill with a faded tier-tinted background and no
   border/shadow (nothing clickable-looking). The tier class on .ks-custom4
   drives the colour — exact match = green (the base rule), .close-match = blue,
   .other-option = gray — and the card's own clock icon is tinted to match.
   The pill hugs its text (inline-flex) so it sits on the left, not full width. */
body.search-restyle .three-part-section .ks-custom4.match p.workOrder--left {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 4px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  color: var(--r-green) !important;
  background: var(--r-green-bg) !important;
}
/* keep the clock icon visible (a legacy rule hides it for close-match) and
   tinted to the tier colour */
body.search-restyle .three-part-section .ks-custom4.match p.workOrder--left i {
  display: inline-block !important;
  color: var(--r-green) !important;
}
/* close match → blue */
body.search-restyle .three-part-section .ks-custom4.close-match p.workOrder--left {
  color: var(--r-blue) !important;
  background: var(--r-blue-bg) !important;
}
body.search-restyle .three-part-section .ks-custom4.close-match p.workOrder--left i {
  color: var(--r-blue) !important;
}
/* other options → gray */
body.search-restyle .three-part-section .ks-custom4.other-option p.workOrder--left {
  color: var(--r-gray) !important;
  background: var(--r-gray-bg) !important;
}
body.search-restyle .three-part-section .ks-custom4.other-option p.workOrder--left i {
  color: var(--r-gray) !important;
}
/* ── Close-match & other-option: ONE expanded bubble (SPECIFIC-TIME ONLY) ───
   This only fires for a specific-time search (.chip-expanded, set by the card
   template). There the close/other match block holds a proposed time range +
   date, so the whole block — tier label, time range, and date — sits inside one
   faded, tier-tinted bubble (blue for close, gray for other). The label line
   drops its clock icon and left-aligns; the only clock icon left is the one in
   front of the time range (calendar still leads the date). The bubble is the
   .ks-custom4 wrapper itself, so it hugs its content and grows downward to hold
   the stacked rows.
   An "Any Time" (date-only) search has no proposed time, so .chip-expanded is
   absent and the close/other tiers fall through to the green/blue/gray status-
   pill rules above instead — a single clock-icon "Available <day>" pill, exactly
   like the green exact match. Exact match keeps the green single-line pill in
   both modes (it never gets the bubble). */
body.search-restyle .three-part-section .ks-custom4.chip-expanded.close-match,
body.search-restyle .three-part-section .ks-custom4.chip-expanded.other-option {
  display: block !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.search-restyle .three-part-section .ks-custom4.chip-expanded.close-match { background: var(--r-blue-bg) !important; }
body.search-restyle .three-part-section .ks-custom4.chip-expanded.other-option { background: var(--r-gray-bg) !important; }
/* the tier label is now a plain left-aligned line inside the bubble (the bubble
   carries the tint), not its own pill — drop the pill padding/radius/fill */
body.search-restyle .three-part-section .ks-custom4.chip-expanded.close-match p.workOrder--left,
body.search-restyle .three-part-section .ks-custom4.chip-expanded.other-option p.workOrder--left {
  display: flex !important;
  width: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* only ONE clock icon — on the time-range row — so hide the label's icon */
body.search-restyle .three-part-section .ks-custom4.chip-expanded.close-match p.workOrder--left i,
body.search-restyle .three-part-section .ks-custom4.chip-expanded.other-option p.workOrder--left i {
  display: none !important;
}
/* The per-card "View Profile" button is gone from this page - the whole card is
   the click target now - so its styling here went with it. Only the row it used
   to share is left. */
/* Compact mode (<=1024px): lay the match block out as a bottom-aligned row, so
   the match text keeps the card's own 16px padding as an equal buffer to the
   bottom and side edges. */
@media (max-width: 1024px) {
  body.search-restyle .three-part-section .team_MemberBox_RowBox {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  body.search-restyle .three-part-section .team_MemberBox_Col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* Verification check next to the SP name (replaces the "Background checked"
   pill). Used in both the result cards and the marketing hero, and since
   HAPPY-181 rendered only for a Featured HappyTasker - it used to render for
   everyone, claiming a check not every provider had passed. Hover shows the
   background-check tooltip. Sized in em so it scales with each name. */
body.search-restyle .ht-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin-left: 7px !important;
  font-size: 0.8em !important;
  color: var(--r-orange) !important;
  cursor: default !important;
  position: relative !important;
  top: -1px !important;
}
body.search-restyle .ht-verified-badge i { font-size: inherit !important; line-height: 1 !important; }
/* Airbnb-style tooltip for the verification check: white card, dark text, soft
   shadow, no black bubble or arrow. */
body.search-restyle .ht-verified-tooltip { opacity: 1 !important; }
body.search-restyle .ht-verified-tooltip .tooltip-inner {
  background: #fff !important;
  color: var(--r-ink) !important;
  border: 1px solid var(--r-line) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.16) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  max-width: 250px !important;
  text-align: left !important;
}
body.search-restyle .ht-verified-tooltip .tooltip-arrow { display: none !important; }

/* ---- S2/S4: right marketing pane shell + sections ---- */
body.search-restyle .searchResult_provider .sidebar {
  border: 0 !important;
  border-radius: var(--r-radius) !important;
  background: var(--r-card) !important;
  box-shadow: var(--r-shadow-card) !important;
  overflow-y: auto;
  overflow-x: hidden;
  /* This is the only scroll container in the marketing detail pane. With a
     classic (layout-taking) scrollbar, the bar appearing/disappearing as
     content changes (e.g. About Me "Show more"/"Show less") used to shift the
     content width by a few px, making the text jump horizontally. Reserve the
     gutter so the content width is constant regardless of scrollbar state, and
     hide the visible bar (it still scrolls via wheel/trackpad/keyboard). */
  scrollbar-gutter: stable;
  scrollbar-width: none; /* Firefox */
}
/* Hide the scrollbar in WebKit/Blink (Chrome/Safari); width stays constant. */
body.search-restyle .searchResult_provider .sidebar::-webkit-scrollbar {
  display: none;
}
body.search-restyle .searchResult_provider .sidebarBox,
body.search-restyle .searchResult_provider .modal-content,
body.search-restyle .searchResult_provider .spMarketingPage { background: var(--r-card) !important; border: 0 !important; }

/* ---- Fixed packages ------------------------------------------------------
   No rules here on purpose. The package cards are the business-link marketing
   page's treatment, rendered from the one shared component
   (common-templates/components/fixed-package-cards.php), which carries its own
   CSS so every surface draws them identically. This pane had its own compact
   list for a while and the two designs drifted, which is the whole reason the
   component exists - do not reintroduce a body.search-restyle override for
   .ht-pkg-card / .ht-fixed-package-row here. */
/* hero header: photo + name + share/save */
body.search-restyle .searchResult_provider .hireProviderProfile .profile-imgs {
  width: 120px !important; height: 120px !important; min-width: 120px;
  border-radius: 50% !important; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.12) !important;
}
body.search-restyle .searchResult_provider #display_name,
body.search-restyle .searchResult_provider .display-name {
  font-size: 28px !important; font-weight: 800 !important; color: var(--r-ink) !important; line-height: 1.1; letter-spacing: -0.02em !important;
}
/* Share / Favorite: icon + underlined text links (not boxed icons), pinned to
   the top-right and top-aligned with the avatar. */
body.search-restyle .searchResult_provider #floating { position: relative !important; }
body.search-restyle .searchResult_provider .sp-top_profileIcons {
  position: absolute !important;
  top: 26px !important;
  right: 22px !important;
  z-index: 4 !important;
  width: auto !important;
}
body.search-restyle .searchResult_provider .sp-top_profileIcons .left-icons { display: none !important; }
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share,
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite,
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i {
  width: auto !important; height: auto !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  cursor: pointer !important;
}
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share img { width: 13px !important; height: auto !important; }
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i { font-size: 16px !important; color: var(--r-ink) !important; }
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share::after {
  content: "Share"; font-weight: 400 !important; font-size: 14px !important; color: var(--r-ink) !important;
  text-decoration: underline !important; text-underline-offset: 3px !important;
}
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i::after {
  content: "Favorite"; font-family: Roboto, Arial, sans-serif !important; font-weight: 400 !important; font-size: 14px !important;
  color: var(--r-ink) !important; text-decoration: underline !important; text-underline-offset: 3px !important;
}
/* hover: soft grey rounded background around each clickable link (no border) */
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share,
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i {
  padding: 6px 8px !important;
  border-radius: 9px !important;
  transition: background .15s ease !important;
}
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share:hover,
body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i:hover {
  background: #f2f2f2 !important;
}
/* section rhythm: even padding + single hairline dividers */
/* One consistent horizontal padding for the whole pane body, so the hero,
   the share/save icons, the badges, and every section share the same left
   edge (and the icons never reach the card edge). Sections then only pad
   vertically. */
body.search-restyle .searchResult_provider #floating,
body.search-restyle .searchResult_provider .right-content-div1 {
  box-sizing: border-box !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-top: 24px !important;
}
body.search-restyle .searchResult_provider .client-marketingPage,
body.search-restyle .searchResult_provider .client-marketingPage * { box-sizing: border-box; }
body.search-restyle .searchResult_provider .providersAvailability,
body.search-restyle .searchResult_provider .providersAboutService,
body.search-restyle .searchResult_provider .serviceProviderCredentials,
body.search-restyle .searchResult_provider .overallRating,
body.search-restyle .searchResult_provider .provider-otherInformation,
body.search-restyle .searchResult_provider .suggestedBookingTimes,
body.search-restyle .searchResult_provider .earned5stars {
  padding: 40px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--r-line) !important;
}
/* the SP top icons row sits flush with the section left edge */
body.search-restyle .searchResult_provider .sp-top_profileIcons { padding: 0 !important; }
/* drop the grey spacer rows; section padding + dividers handle separation */
body.search-restyle .searchResult_provider .empty-row,
body.search-restyle .searchResult_provider .empty-row.custom-border { display: none !important; }
body.search-restyle .searchResult_provider .providersAvailability h5,
body.search-restyle .searchResult_provider .providersAboutService h5,
body.search-restyle .searchResult_provider .serviceProviderCredentials h5,
body.search-restyle .searchResult_provider .overallRating h5,
body.search-restyle .searchResult_provider .provider-otherInformation h5,
body.search-restyle .searchResult_provider .suggestedBookingTimes h5 {
  font-size: 20px !important; font-weight: 700 !important; color: var(--r-ink) !important; margin: 0 0 18px !important; letter-spacing: -0.015em !important;
}
body.search-restyle .searchResult_provider .aboutUs_text,
body.search-restyle .searchResult_provider .service-description,
body.search-restyle .searchResult_provider .teaser p {
  font-size: 15px; line-height: 1.7; color: var(--r-ink-2);
}
/* About Me is SP-written copy: soft grey so it doesn't read as our own UI text.
   The visible text lives in <p> tags inside .aboutUs_text, so target those too. */
body.search-restyle .searchResult_provider .providersAboutService .aboutUs_text,
body.search-restyle .searchResult_provider .providersAboutService p {
  color: #717171 !important;
}
/* breathing room: space the lines and lift the photo gallery off the text */
body.search-restyle .searchResult_provider .providersAboutService p { margin: 0 0 10px !important; }
body.search-restyle .searchResult_provider .providersAboutService h5 { margin-bottom: 14px !important; }
body.search-restyle .searchResult_provider .providersAboutService .photos_videos { margin-top: 22px !important; }
/* identity header: vertically center the avatar with the name */
body.search-restyle .hireUser_detail .hireProviderProfile { align-items: center !important; }
/* remove the stray empty grey divider rows; whitespace separates instead */
body.search-restyle .searchResult_provider .empty-row.custom-border { border: 0 !important; margin: 0 !important; }

/* ---- Marketing panel: Airbnb-style section order (visual reorder via flexbox) ----
   DOM order is: earned-stars, availability, about+photos, credentials, reviews, other, report.
   Reorder to: about+photos, availability, credentials, social proof, reviews, other, report.
   Pure CSS so it applies to both the initial render and the AJAX (click another SP) render.
   Section borders/padding live on each block, so the dividers follow the new order for free. */
body.search-restyle .searchResult_provider .client-marketingPage {
  display: flex !important;
  flex-direction: column !important;
}
body.search-restyle .client-marketingPage > div:has(> .providersAboutService) { order: 1; }
body.search-restyle .client-marketingPage > .providersAvailability { order: 2; }
body.search-restyle .client-marketingPage > .serviceProviderCredentials { order: 3; }
body.search-restyle .client-marketingPage > .earned5stars { order: 4; }
body.search-restyle .client-marketingPage > .overallRating { order: 5; }
body.search-restyle .client-marketingPage > .provider-otherInformation { order: 6; }
body.search-restyle .client-marketingPage > div.col-xs-12 { order: 7; }

/* ---- Credentials: quiet divided list, not boxed form-input rows ---- */
/* Credentials: soft filled rows, not hairline-divided (the dividers read as
   section separators, which confused the hierarchy). */
body.search-restyle .serviceProviderCredentialsList {
  margin: 0 !important; padding: 0 !important; list-style: none !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
body.search-restyle .serviceProviderCredentialsList .myCredentials {
  border: 0 !important;
  border-radius: 12px !important;
  background: #FAFAFA !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.search-restyle .serviceProviderCredentialsList .myCredentials:last-child {
  border: 0 !important;
}
/* the self-reported disclaimer needs room off the last credential row */
body.search-restyle .serviceProviderCredentials .text-gray,
body.search-restyle .serviceProviderCredentials p.text-center {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--r-ink-3) !important;
  text-align: left !important;
}
body.search-restyle .serviceProviderCredentialsList .myCredentials .title {
  margin: 0 !important; font-size: 14px !important; font-weight: 500 !important;
  color: var(--r-ink) !important;
}
body.search-restyle .serviceProviderCredentialsList .myCredentials > span:last-child {
  font-size: 14px !important; font-weight: 500 !important; color: var(--r-ink) !important;
  text-decoration: underline !important; text-underline-offset: 2px !important; white-space: nowrap !important;
}

/* ---- "Earned 5-Stars in" gets a peer-level section heading ---- */
body.search-restyle .searchResult_provider .earned5stars h6 {
  font-size: 20px !important; font-weight: 700 !important; color: var(--r-ink) !important; margin: 0 0 18px !important; letter-spacing: -0.015em !important;
}

/* ---- S3: photo grid — uniform equal squares ---- */
body.search-restyle .photos_videos #slider_outerr,
body.search-restyle .photos_videos #slider_outerr #slider { margin: 0 !important; }
body.search-restyle .photos_videos #slider_outerr,
body.search-restyle .photos_videos #slider { width: 100% !important; max-width: 100% !important; }
body.search-restyle .photos_videos ul.providersServiceImages {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.search-restyle .photos_videos ul.providersServiceImages li.providersServiceImageContainer {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--r-line-2);
}
/* lead photo becomes a 2x2 hero tile, the rest fill the column beside it */
body.search-restyle .photos_videos ul.providersServiceImages li.providersServiceImageContainer:first-child:not(:only-child) {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
body.search-restyle .photos_videos ul.providersServiceImages li.providersServiceImageContainer a { display: block; width: 100%; height: 100%; }
body.search-restyle .photos_videos ul.providersServiceImages li.providersServiceImageContainer img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ---- S5: buttons ---- */
/* secondary actions (Contact SP, See all reviews, Show all photos): white + hairline */
body.search-restyle .searchResult_provider .btn-black-outline {
  background: var(--r-card) !important;
  background-image: none !important;
  border: 1px solid #DDDDDD !important;
  color: var(--r-ink) !important;
  border-radius: var(--r-radius-ctl) !important;
  font-weight: 600 !important;
  padding: 14px !important;
  box-shadow: none !important;
}
body.search-restyle .searchResult_provider .btn-black-outline:hover { background: var(--r-line-2) !important; }
body.search-restyle .searchResult_provider .seeMore-btn { margin-top: 4px; }
/* quiet contact + report microcopy */
body.search-restyle .searchResult_provider .contactInfo,
body.search-restyle .searchResult_provider .contactInfo.text-center { font-size: 12px; color: var(--r-ink-3); margin-top: 8px; }
body.search-restyle .searchResult_provider .report-serviceProvider { font-size: 13px; color: var(--r-ink); }

/* ---- S8: sticky CTA bar — the single orange action ---- */
body.search-restyle .searchResult_provider .popup-fixed-bottom {
  background: var(--r-card) !important;
  border: 0 !important;
  border-top: 1px solid var(--r-line) !important;
  border-radius: 0 0 var(--r-radius) var(--r-radius) !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,.06) !important;
  padding: 22px 28px !important;
  align-items: center;
  justify-content: space-between;
}
body.search-restyle .searchResult_provider .popup-fixed-bottom .prices p { font-size: 20px; font-weight: 800; color: var(--r-ink); margin: 0; }
body.search-restyle .searchResult_provider .popup-fixed-bottom .prices #font-sm-big { font-size: 20px; font-weight: 800; }
/* "No hidden fees" trust badge now lives here in the sticky bar, replacing the
   plain "Total. No hidden fees" subtext. Pill + brand-orange tag icon, sentence
   case (kill the theme's text-capitalize). */
body.search-restyle .searchResult_provider .popup-fixed-bottom .prices .members {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 7px !important;
  padding: 5px 13px 5px 31px !important;
  background-color: #FFF6EC !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23F7880C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 11px center !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--r-ink-2) !important;
  text-transform: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .btn-theme,
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .check-availability-btn,
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn button.button-design {
  background: linear-gradient(180deg, #FFA23D 0%, #F7880C 52%, #EA7B05 100%) !important;
  background-color: var(--r-orange) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  height: 56px !important;
  padding: 0 42px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(247,136,12,.40), inset 0 1px 0 rgba(255,255,255,.30) !important;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease !important;
}
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .btn-theme:hover,
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .check-availability-btn:hover,
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn button.button-design:hover {
  background: linear-gradient(180deg, #FFA23D 0%, #F7880C 52%, #EA7B05 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(247,136,12,.52), inset 0 1px 0 rgba(255,255,255,.35) !important;
  filter: brightness(1.03) !important;
}
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .btn-theme:active,
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .check-availability-btn:active,
body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn button.button-design:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(247,136,12,.40), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ============================================================
   Marketing pane — readability & air refinement (full pass)
   Cleaner hero, calmer chips, roomier info rows. CSS-only so it
   covers both the initial and AJAX (click another SP) renders.
   ============================================================ */

/* hero: profile header — big lifted avatar on the left, name + rating + trust badge beside it */
body.search-restyle .hireUser_detail .hireProviderProfile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 22px !important;
  padding: 8px 0 6px !important;
  border-bottom: 0 !important;
}
body.search-restyle .searchResult_provider .hireProviderProfileText { text-align: left !important; width: auto !important; }
body.search-restyle .searchResult_provider .hireProviderProfileText .display-name { margin: 0 0 10px !important; }
/* rating line: star + score + review count on one calm baseline */
body.search-restyle .searchResult_provider .custom-stars {
  display: inline-flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 16px !important;
  color: var(--r-ink) !important;
}
body.search-restyle .searchResult_provider .custom-stars .fa-star { color: var(--r-ink) !important; font-size: 14px !important; margin: 0 !important; }
body.search-restyle .searchResult_provider .custom-stars .price-hour { font-weight: 700 !important; color: var(--r-ink) !important; }
body.search-restyle .searchResult_provider .custom-stars .reviews-count { font-weight: 400 !important; color: var(--r-ink-3) !important; }
body.search-restyle .searchResult_provider .custom-stars .info-img img { width: 15px !important; height: 15px !important; opacity: .6; }

/* "Earned 5-Stars in" — airy rounded chips instead of cramped grey tags */
body.search-restyle .earned5stars .earned5starsTagList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.search-restyle .earned5stars .earned5starsTagList li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  background: #F7F7F7 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--r-ink) !important;
  line-height: 1 !important;
}
body.search-restyle .earned5stars .earned5starsTagList li img { width: auto !important; height: 18px !important; max-width: 26px !important; object-fit: contain !important; margin: 0 !important; flex: 0 0 auto !important; }
body.search-restyle .earned5stars .earned5starsTagList li strong { font-weight: 500 !important; font-size: 12px !important; color: var(--r-ink-3) !important; }

/* Availability — the one actionable block, lifted into its own card */
body.search-restyle .providersAvailability .row { margin: 0 !important; }
body.search-restyle .providersAvailability .providersAvailabilityTime {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
body.search-restyle .providersAvailability .providersAvailabilityTime > div {
  background: #FAFAFA !important;
  border: 1px solid var(--r-line) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
}
/* roomy icon rows, clear status line */
body.search-restyle .providersAvailability .providersAvailabilityTime > div > p {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
/* the info icon is now redundant — its text shows inline below */
body.search-restyle .providersAvailability .info-img { display: none !important; }
/* plain-language description of the match, shown on the page (not on hover) */
body.search-restyle .providersAvailability .ht-match-desc {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--r-ink-3) !important;
  font-weight: 400 !important;
}
body.search-restyle .providersAvailability .providersAvailabilityTime ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.search-restyle .providersAvailability .providersAvailabilityTime ul li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--r-ink-2) !important;
}
body.search-restyle .providersAvailability .providersAvailabilityTime ul li i {
  width: 16px !important;
  text-align: center !important;
  color: var(--r-ink-3) !important;
  font-size: 15px !important;
}
body.search-restyle .providersAvailability .providersAvailabilityTime .info-img img { width: 15px !important; height: 15px !important; opacity: .6; }

/* New Service Provider — calm rounded badge, matches the 5-star chips */
body.search-restyle .overallRating .new-service-provider-lable {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  background: #F7F7F7 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--r-ink) !important;
}
body.search-restyle .overallRating .new-service-provider-lable img { width: 16px !important; height: 16px !important; }

/* Reviews block (shown for SPs that have reviews; not visible on this seed SP):
   calm heading row + thin sub-rating bars. */
body.search-restyle .overallRating .flex-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}
body.search-restyle .overallRating .flex-heading h5 { margin: 0 !important; }
body.search-restyle .overallRating .flex-heading p { margin: 0 !important; display: flex !important; align-items: center !important; gap: 5px !important; font-weight: 600 !important; color: var(--r-ink) !important; }
body.search-restyle .overallRating .flex-heading .fa-star { color: var(--r-ink) !important; }
body.search-restyle .overallRating h6 { font-size: 14px !important; font-weight: 700 !important; color: var(--r-ink-2) !important; margin: 0 0 14px !important; }
body.search-restyle .overallRatingLists {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
body.search-restyle .overallRatingLists li {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--r-ink-2) !important;
}
body.search-restyle .overallRatingLists li .ratingBar { display: flex !important; align-items: center !important; gap: 12px !important; }
body.search-restyle .overallRatingLists .progress {
  height: 6px !important;
  flex: 1 1 auto !important;
  background: var(--r-line) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
body.search-restyle .overallRatingLists .progress-bar { height: 100% !important; background: var(--r-ink) !important; border-radius: 999px !important; }
body.search-restyle .overallRatingLists .ratingBarRating p { margin: 0 !important; display: flex !important; align-items: center !important; gap: 4px !important; font-weight: 600 !important; color: var(--r-ink) !important; white-space: nowrap !important; }

/* ---- empty state (coming soon): spacing/shape polish only, copy unchanged ---- */
body.search-restyle .ht-left-box,
body.search-restyle .ht-right-box {
  background: var(--r-card);
  border: 0;
  border-radius: var(--r-radius);
  box-shadow: var(--r-shadow-card);
  padding: 28px;
}
body.search-restyle .ht-feature { gap: 12px; }
body.search-restyle .ht-btn {
  background: var(--r-orange) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--r-radius-ctl) !important;
  font-weight: 700 !important;
}
body.search-restyle .ht-btn:hover { background: var(--r-orange-deep) !important; }
body.search-restyle .ht-input {
  border: 1px solid #DDDDDD !important;
  border-radius: var(--r-radius-ctl) !important;
}

/* ============================================================================
   S9: responsive
   ============================================================================ */
/* Desktop two-column: one consistent layout across the whole desktop range
   (replaces the old per-breakpoint 787px/556px/calc widths that caused the
   pane to jump size and leave an awkward middle gap). Fixed-width left list,
   fluid pane, each column scrolls independently, and the pane stays within
   the viewport so the sticky CTA is never clipped. */
@media (min-width: 992px) {
  body.search-restyle .search-main #custom-container {
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
    /* space-between pins the list to the container's left edge (under the logo)
       and the marketing pane to the right edge (under the header bar's Search /
       Filters end), so both header edges line up with the body grid. */
    justify-content: space-between !important;
    max-width: 1440px;
    margin: 0 auto;
  }
  body.search-restyle .search-main .scroll-height-div {
    flex: 0 0 412px !important;
    width: 412px !important;
    max-width: 412px !important;
    /* fill from just under the header to the bottom of the window (edge to edge),
       so there's no top/bottom whitespace cutting off the list; it scrolls inside. */
    height: calc(100vh - 109px) !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    /* breathing room between the header and the first section heading (this is
       inner padding, so the list still fills the column edge to edge as it
       scrolls). The old Results/Sort row is gone - the count was dropped and
       Sort moved into the Filters sheet. */
    padding: 24px 12px 24px !important;
  }
  body.search-restyle .search-main #scroll-height-div { width: 100% !important; }
  body.search-restyle .search-main .float-grid {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 760px !important;
  }
  body.search-restyle .search-main .searchResult_provider {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  body.search-restyle .search-main .searchResult_provider .sidebar {
    width: 100% !important;
    /* float the card: ~20px above (off the header) and below (off the window
       bottom). The left results list stays edge to edge. */
    height: calc(100vh - 149px) !important;
    max-height: calc(100vh - 149px) !important;
    margin-top: 20px !important;
  }
  /* fill the pane: the theme locks the content to 565px and pads the right
     by 60px, which left a big empty strip in the wider card. Make the inner
     content span the full pane so the card matches its content. */
  body.search-restyle .search-main .searchResult_provider .sidebarBoxbody {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  body.search-restyle .search-main .searchResult_provider #floating,
  body.search-restyle .search-main .searchResult_provider .right-content-div1,
  body.search-restyle .search-main .searchResult_provider .style-div,
  body.search-restyle .search-main .searchResult_provider .hireUser_detail,
  body.search-restyle .search-main .searchResult_provider .client-marketingPage {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Mobile profile back control: hidden until the modal opens (JS toggles
   .is-visible); the show rule lives in the mobile block below. */
body.search-restyle .ht-profile-back { display: none; }
/* When a Bootstrap modal (the photos/videos gallery or a lightbox) is open,
   step the profile back control aside so it doesn't sit on top of and swallow
   taps meant for the gallery's own close button. */
body.search-restyle.modal-open .ht-profile-back.is-visible { display: none !important; }
/* Single column at the theme's own mobile boundary (992px) so the desktop
   fixed-height pane + absolute CTA don't strand between 820 and 991. */
@media (max-width: 991px) {
  /* The search template locks the document with overflow-y:hidden (base
     custom-style-2.css) so the desktop columns can scroll internally. On
     mobile the columns become auto-height (below), so re-enable normal page
     scrolling here or the whole page is frozen. */
  body.search-restyle { overflow-y: visible !important; }
  body.search-restyle #custom-container,
  body.search-restyle .d-flex.w-100.justify-content-between#custom-container {
    display: block !important;
  }
  body.search-restyle .scroll-height-div,
  body.search-restyle .float-grid,
  body.search-restyle .searchResult_provider,
  body.search-restyle .searchResult_provider .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }
  body.search-restyle .scroll-height-div { margin-bottom: 16px; }
  /* Mobile profile modal: tapping a card adds .modal-opened, which the theme
     makes a fixed full-screen overlay. The auto-height rules above strip its
     height:100%/internal scroll, leaving a fixed box taller than the screen
     that can't scroll. Restore it: fill the viewport and scroll inside. */
  body.search-restyle .float-grid.modal-opened {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* This overlay is the profile's scroll container at this width (the inline
       pane's .sidebar scroller got the same treatment further up). On browsers
       with classic layout-taking scrollbars (Firefox, Safari with a mouse or
       "Always show scroll bars"), the bar appearing/disappearing as the content
       crosses the viewport height (e.g. About Me "Show more"/"Show less")
       shifted everything sideways. Reserve the gutter permanently so the width
       never changes; overlay-scrollbar setups (phones, default macOS) reserve
       0px, so nothing changes for them. */
    scrollbar-gutter: stable;
  }
  /* Hide the pane unless the profile modal is open, so closing it (back button
     below) returns to the results list instead of leaving the profile inline. */
  body.search-restyle .float-grid:not(.modal-opened) { display: none !important; }
  /* The profile panel's own modals (Share, Contact, Report, See all reviews,
     ...) are portaled to <body> by htPortalSearchPanelModals()
     (availability-picker.js), so on this width they are SIBLINGS of the
     z-9999 profile overlay above rather than inside it. At the theme's modal
     z-index (1051) they opened underneath it: the tap showed the "Generating
     link..." spinner, then nothing, with the modal live but covered. Lift them
     over the overlay and its back control (10001), still under the
     availability picker (100000). The modal paints its own dim
     (custom-style-2.css), so the body-level backdrop left under the overlay
     costs nothing. */
  body.search-restyle #ht-search-modal-portal .modal { z-index: 10050; }
  /* Back control for the mobile profile modal (added by search-picker-search.js).
     Fixed top-left, above the z-9999 modal, so you can return to the results. */
  body.search-restyle .ht-profile-back.is-visible {
    display: inline-flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10001;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--r-ink, #1A1A1A);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
    font-size: 16px;
    cursor: pointer;
  }
  body.search-restyle .searchResult_provider .sidebarBoxbody,
  body.search-restyle .searchResult_provider #floating,
  body.search-restyle .searchResult_provider .right-content-div1 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* sticky bottom action bar, full width (per guide's mobile pattern) */
  body.search-restyle .searchResult_provider .sidebarBoxbody { padding-bottom: 84px !important; }
  body.search-restyle .searchResult_provider .popup-fixed-bottom {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    border-radius: 0 !important;
    z-index: 50;
  }
  /* top bar wraps; pill goes full width */
  body.search-restyle .searchHeaderMaim .row.align-items-center { flex-wrap: wrap; row-gap: 10px; }

  /* CTA ("Hire Now" / "See open times"): keep the label on one line and
     centered. The narrow bar was wrapping it to two lines; trimming the heavy
     42px side padding to 22px lets the label sit on one line next to the price
     and stay centered. */
  body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .btn-theme,
  body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn .check-availability-btn,
  body.search-restyle .searchResult_provider .popup-fixed-bottom .hire-btn button.button-design {
    white-space: nowrap !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hide the theme's share-icons divider pseudo-element. It draws a stray
     hairline (border, bottom:-14px, width:100%+45px) under the share area, which
     looks like a floating line now that Share/Favorite are repositioned. */
  body.search-restyle .searchResult_provider .sp-top_profileIcons:after {
    display: none !important;
  }

  /* Share / Favorite: icon-only and right-aligned to save space, but kept as
     40px tap targets. The "Share"/"Favorite" labels are ::after text, dropped
     here for mobile only. */
  /* nudge the cluster into the top-right corner (~12px from the edge, mirroring
     the back button's 12px on the left). right is relative to the content box,
     whose edge is the 20px gutter, so a small negative value reaches the corner. */
  body.search-restyle .searchResult_provider .sp-top_profileIcons {
    right: -8px !important;
  }
  body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons {
    justify-content: flex-end !important;
    gap: 0 !important;
  }
  body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share::after,
  body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i::after {
    content: none !important;
  }
  body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .share,
  body.search-restyle .searchResult_provider .sp-top_profileIcons .right-icons .favorite i {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Un-squish the marketing page. The content stacked three layers of side
     padding (sidebarBoxbody 18 + #floating 28 + sections 20 = ~66px a side),
     so the text was crammed into ~261px on a 393px screen. Collapse to one
     ~20px gutter on the outer box and let the inner layers go edge to edge. */
  body.search-restyle .searchResult_provider .sidebarBoxbody {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.search-restyle .searchResult_provider #floating,
  body.search-restyle .searchResult_provider .right-content-div1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 520px) {
  /* Sections no longer pad horizontally here (the ~20px gutter now lives on
     .sidebarBoxbody), so they span the full content width instead of stacking
     a third padding layer. The sticky CTA keeps its own side padding. */
  body.search-restyle .searchResult_provider .popup-fixed-bottom { padding-left: 20px !important; padding-right: 20px !important; }
  body.search-restyle .searchResult_provider #display_name,
  body.search-restyle .searchResult_provider .display-name { font-size: 21px !important; }
  body.search-restyle .searchResult_provider .hireProviderProfile .profile-imgs { width: 96px !important; height: 96px !important; min-width: 96px; }
  body.search-restyle .photos_videos ul.providersServiceImages { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.search-restyle .three-part-section .searchProvider_whiteBox { padding: 14px !important; }
}

/* ============================================================
   Media + document viewers — clean Airbnb-style modals.
   Covers the "Show all photos & videos" gallery, the single-photo
   lightbox, and the Credentials file viewer. The modals mount on
   <body>, which carries .search-restyle, so this stays scoped.
   ============================================================ */

/* ---- Photo & video gallery — full-screen Airbnb-style viewer ---- */
body.search-restyle #seeAllPhotosVideos { background: #fff !important; }
body.search-restyle #seeAllPhotosVideos .modal-dialog {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
}
body.search-restyle #seeAllPhotosVideos .modal-content {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: 100vh !important;
  background: #fff !important;
}
/* sticky white top bar with a round close on the left */
body.search-restyle #seeAllPhotosVideos .modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--r-line) !important;
}
body.search-restyle #seeAllPhotosVideos .modal-header h4 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--r-ink) !important;
}
body.search-restyle #seeAllPhotosVideos .modal-header .close {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
  color: var(--r-ink) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: background .15s ease;
}
body.search-restyle #seeAllPhotosVideos .modal-header .close:hover { background: var(--r-line-2) !important; }
/* centered narrow column, lots of air */
body.search-restyle #seeAllPhotosVideos .modal-body {
  padding: 36px 24px 72px !important;
  background: #fff !important;
}
/* the theme caps the modal gallery's .photos wrapper at 360px tall with its own
   scrollbar (and 600px wide), which traps everything in a small box in the top
   third. Undo it so the gallery flows full-height and the modal itself scrolls. */
body.search-restyle #seeAllPhotosVideos .lightbox-gallery--,
body.search-restyle #seeAllPhotosVideos .modal-body .photos {
  max-width: 820px !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body.search-restyle #seeAllPhotosVideos #slider_outerr,
body.search-restyle #seeAllPhotosVideos #slider {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Airbnb grouped layout: a wide hero, then side-by-side pairs */
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--r-line-2) !important;
}
/* every 3rd tile spans full width as a hero, so the column reads as
   hero / pair / hero / pair (Airbnb's gallery rhythm) */
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer:nth-child(3n+1) {
  grid-column: 1 / -1 !important;
  aspect-ratio: 16 / 10 !important;
}
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer a { display: block !important; width: 100% !important; height: 100% !important; }
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ---- Single-photo lightbox ---- */
body.search-restyle #lightboxed--container { background: #FFFFFF !important; }
/* strip the dated lightbox chrome: the +/- zoom bar and the thumbnail filmstrip.
   Leaves just the photo with clean prev/next/close (Airbnb single-photo view). */
body.search-restyle #lightboxed--container #navbar { display: none !important; }
body.search-restyle #lightboxed--thumbs { display: none !important; }
/* lightboxed.js also injects a #thumbs_controller grid button that toggles the
   filmstrip above; with the filmstrip hidden it's a dead control, so hide it too */
body.search-restyle #thumbs_controller { display: none !important; }
/* lightboxed.js pins the caption bottom-right in a black box with white text.
   On the white restyled lightbox that reads as stray UI, so: center it, drop
   the box, plain black text. */
body.search-restyle #lightboxed--content .lightboxed--frame .lightboxed--caption {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;       /* lightboxed.css pins the caption to ~400px, which left:0 then parks on the left; auto lets left/right:0 stretch it full-frame so the text centers under the photo */
  max-width: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: transparent !important;
  color: #000 !important;
}
body.search-restyle #lightboxed--content .lightboxed--frame img,
body.search-restyle #lightboxed--content .lightboxed--frame iframe {
  max-width: 86vw !important;
  max-height: 84vh !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.18) !important;
}
/* video iframes have no intrinsic size, so they render tiny — give them a large
   player box (the video keeps its own aspect inside, letterboxed on black). */
body.search-restyle #lightboxed--content .lightboxed--frame iframe {
  width: min(88vw, 1080px) !important;
  height: 82vh !important;
  max-height: 82vh !important;
  background: #000 !important;
}
body.search-restyle #lightboxed--bttn_close,
body.search-restyle #lightboxed--bttn_next,
body.search-restyle #lightboxed--bttn_prev {
  background-color: #FFFFFF !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid #DDDDDD !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}
body.search-restyle #lightboxed--bttn_close:hover,
body.search-restyle #lightboxed--bttn_next:hover,
body.search-restyle #lightboxed--bttn_prev:hover {
  background-color: #F4F4F4 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.16) !important;
}
body.search-restyle #lightboxed--bttn_close {
  top: 18px !important;
  right: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.4' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>") !important;
}
body.search-restyle #lightboxed--bttn_prev {
  left: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
}
body.search-restyle #lightboxed--bttn_next {
  right: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
}

/* ---- Credentials file viewer ---- */
body.search-restyle #myCredentials .modal-dialog {
  max-width: 760px !important;
  width: calc(100% - 48px) !important;
}
body.search-restyle #myCredentials .modal-content {
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.28) !important;
}
body.search-restyle #myCredentials .modal-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--r-line) !important;
}
body.search-restyle #myCredentials .modal-header .modal-title {
  order: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--r-ink) !important;
}
body.search-restyle #myCredentials .modal-header .close {
  position: absolute !important;
  left: auto !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  float: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--r-ink) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background .15s ease;
}
body.search-restyle #myCredentials .modal-header .close:hover { background: var(--r-line-2) !important; }
body.search-restyle #myCredentials .modal-body { padding: 0 !important; background: #fff !important; }
body.search-restyle #myCredentials .modal-body img,
body.search-restyle #myCredentials .modal-body #frame {
  width: 100% !important;
  max-height: 72vh !important;
  display: block !important;
  border: 0 !important;
}
body.search-restyle #myCredentials .modal-footer {
  border-top: 1px solid var(--r-line) !important;
  padding: 12px 20px !important;
  justify-content: flex-end !important;
}
body.search-restyle #myCredentials .modal-footer .btn {
  background: var(--r-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
}

/* ---- Logged-out prompt ("you need to log in" for Favorite / Contact / Report) ---- */
body.search-restyle #needToLogIn .modal-dialog {
  max-width: 400px !important;
  width: calc(100% - 32px) !important;
}
body.search-restyle #needToLogIn .modal-content {
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
}
body.search-restyle #needToLogIn .modal-body { padding: 30px 28px !important; }
body.search-restyle #needToLogIn .nli-text {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--r-ink) !important;
  text-align: center !important;
  margin: 0 0 24px !important;
}
body.search-restyle #needToLogIn .cancelWorkOrderFormAction {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn {
  flex: 1 1 0 !important;
  margin: 0 !important;
  border-radius: var(--r-radius-ctl) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}
/* Cancel = quiet white outline */
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn-black-outline,
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn-p {
  background: var(--r-card) !important;
  background-image: none !important;
  border: 1px solid #DDDDDD !important;
  color: var(--r-ink) !important;
}
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn-black-outline:hover,
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn-p:hover { background: var(--r-line-2) !important; }
/* Continue = the orange primary action (leads to log in / sign up) */
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn-redoutline {
  background: var(--r-orange) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
}
body.search-restyle #needToLogIn .cancelWorkOrderFormAction .btn-redoutline:hover { background: var(--r-orange-deep) !important; }

/* ---- Video tiles get a translucent play badge so they read as videos before
   you click. Video items render the <img> as a direct child of the <li>;
   photo items wrap it in an <a>, so :has(> img) targets only videos. ---- */
body.search-restyle .photos_videos ul.providersServiceImages li.providersServiceImageContainer,
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer {
  position: relative !important;
}
body.search-restyle .photos_videos ul.providersServiceImages li.providersServiceImageContainer:has(> img)::after,
body.search-restyle #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer:has(> img)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.45);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='3.5' stroke-linejoin='round' stroke-linecap='round'><path d='M8 5v14l11-7z'/></svg>");
  background-repeat: no-repeat;
  background-position: 55% center;
  border: 1px solid rgba(255,255,255,.55);
  pointer-events: none;
}

/* ── Mobile: clear x on the search-details modal Date/Time rows ──────────────
   The desktop bar's .ht-when-clear is hover-only and lives in the min-width:992px
   block, so the mobile search-details modal (#searchDetailsMoble_box) had no way
   to clear date + time. These x's reuse window.htClearWhen (keeps service + zip,
   drops teamId/date/time = back to anytime). They only show when a date + time
   are set (data-browse-placeholder="0") and only on mobile. Absolutely positioned
   in the row's right padding so they never overlap the value text. */
body.search-restyle .search_CategoryBox > .ht-when-clear-mobile { display: none; }
@media (max-width: 991px) {
  body.search-restyle .search_CategoryBox { position: relative; }
  body.search-restyle #searchDetailsMoble_box .search_CategoryBox[role="button"] { cursor: pointer; }
  body.search-restyle #searchDetailsMoble_box .search_CategoryBox[role="button"]:focus-visible {
    outline: 2px solid var(--r-orange);
    outline-offset: 2px;
  }
  body.search-restyle .search_CategoryBox[data-browse-placeholder="0"] { padding-right: 64px; }
  body.search-restyle .search_CategoryBox[data-browse-placeholder="0"] > .ht-when-clear-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--r-ink-2);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }
  body.search-restyle .search_CategoryBox[data-browse-placeholder="0"] > .ht-when-clear-mobile:hover { color: var(--r-ink); }
}

/* ── Mobile Search Details modal: lift the Search button to mid-page + pill ───
   The modal-body carries an explicit ~700px height from base CSS, so it stretches
   far past its content (3 rows + the hint) and strands the Search button at the
   very bottom. Let the body shrink to its content so the button rises to roughly
   the middle of the screen instead. The Search button is also restyled to a wide
   brand-orange pill so it matches the search bar's orange action. */
@media (max-width: 991px) {
  body.search-restyle #searchDetailsMoble_box .modal-content { justify-content: flex-start !important; }
  body.search-restyle #searchDetailsMoble_box .modal-body { height: auto !important; flex: 0 0 auto !important; }
  body.search-restyle #searchDetailsMoble_box .modal-footer {
    margin-top: 28px !important;
    display: block !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.search-restyle #searchDetailsMoble_box .search_Category_SearchBtn {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 24px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--r-orange) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  body.search-restyle #searchDetailsMoble_box .search_Category_SearchBtn:hover { background: var(--r-orange-deep) !important; }
}

/* =============================================================
   /search mobile Search Details — time list polish (screen 4)
   Scoped to mobile (<=991px, body.search-restyle) so the desktop top
   search bar is left untouched. Markup: headers/search-header.php
   #select-start-end-times .custom_dropdown_box.
   Bigger tap targets, clearer spacing, clearer greyed-disabled styling
   for the today past-time cutoff. Keeps our own list, no native picker.
   ============================================================= */
@media (max-width: 991px) {
  body.search-restyle .searchResult_TimeBox .select_service_dropdown ul.custom_dropdown_box li.dropdown-item {
    padding: 14px 16px;
    margin: 2px 8px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.3;
  }
  body.search-restyle .searchResult_TimeBox .select_service_dropdown ul.custom_dropdown_box li.dropdown-item:not(.disabled):active {
    background-color: #fff4e8;
    color: #f7880c !important;
  }
  body.search-restyle .searchResult_TimeBox .select_service_dropdown ul.custom_dropdown_box li.dropdown-item.disabled {
    color: #bdbdbd !important;
    text-decoration: line-through;
    background-color: #f6f6f6;
  }
}

/* =============================================================
   /search mobile Date picker (screen 3) — Airbnb-style restyle.
   #elementdateofservice is the jQuery UI datepicker inside the
   #updated-search-components modal, which is only reached via the mobile
   Search Details pill, so this is mobile-only by nature (the desktop
   #dateofservice calendar is a separate element, untouched). The JS sets
   numberOfMonths [2,1] so two months stack vertically.
   ============================================================= */
#elementdateofservice { max-width: 380px; margin: 0 auto; }
#elementdateofservice .ui-datepicker {
  width: 100% !important;
  border: none;
  padding: 0;
  background: none;
  font-family: Roboto, Arial, sans-serif;
}
#elementdateofservice .ui-datepicker-group {
  width: 100% !important;
  display: block;
  float: none;
  margin: 0 0 26px;
  padding: 0;
}
#elementdateofservice .ui-datepicker-row-break { display: none; }
#elementdateofservice .ui-datepicker-header {
  background: none !important;
  border: none !important;
  padding: 0 0 10px;
  position: relative;
}
#elementdateofservice .ui-datepicker-title {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #222;
  margin: 0;
}
#elementdateofservice .ui-datepicker-prev,
#elementdateofservice .ui-datepicker-next {
  top: -2px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 0 !important;        /* collapse the jQuery UI "Prev"/"Next" text node so only our chevron shows */
  text-decoration: none !important;
}
#elementdateofservice .ui-datepicker-prev { left: 0; }
#elementdateofservice .ui-datepicker-next { right: 0; }
#elementdateofservice .ui-datepicker-prev .ui-icon,
#elementdateofservice .ui-datepicker-next .ui-icon { display: none !important; }
#elementdateofservice .ui-datepicker-prev:after,
#elementdateofservice .ui-datepicker-next:after { content: none !important; display: none !important; }
#elementdateofservice .ui-datepicker-prev:before { content: "\2039" !important; }
#elementdateofservice .ui-datepicker-next:before { content: "\203A" !important; }
#elementdateofservice .ui-datepicker-prev:before,
#elementdateofservice .ui-datepicker-next:before {
  font-size: 24px !important;
  font-family: Arial, sans-serif !important;
  color: #222 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#elementdateofservice table.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
#elementdateofservice .ui-datepicker-calendar th {
  font-size: 11px;
  font-weight: 600;
  color: #b6b6bb;
  text-transform: uppercase;
  padding: 8px 0;
  letter-spacing: .04em;
}
#elementdateofservice .ui-datepicker-calendar td {
  padding: 2px 0;
  text-align: center;
  border: none;
}
#elementdateofservice .ui-datepicker-calendar td a,
#elementdateofservice .ui-datepicker-calendar td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  color: #222 !important;
  text-decoration: none;
  border: none !important;
  background: none !important;
}
#elementdateofservice .ui-datepicker-calendar td a:hover { background: #f2f2f2 !important; }
#elementdateofservice .ui-datepicker-calendar td.ui-state-disabled span { color: #dcdce0 !important; }
/* No today highlight: today reads as a plain day (no ring, no "TODAY" label). */
#elementdateofservice .ui-datepicker-calendar td.ui-datepicker-today a {
  box-shadow: none !important;
  font-weight: 400 !important;
}
#elementdateofservice .ui-datepicker .today-custom a::before {
  content: none !important;
  display: none !important;
}
/* Orange fill only on a day the user actually picks (a selected day that isn't
   today). On load nothing is highlighted. */
#elementdateofservice .ui-datepicker-calendar td.ui-datepicker-current-day a,
#elementdateofservice .ui-datepicker-calendar td a.ui-state-active {
  background: none !important;
  color: #222 !important;
  box-shadow: none;
}
#elementdateofservice .ui-datepicker-calendar td.ui-datepicker-current-day:not(.today-custom) a {
  background: #f7880c !important;
  color: #fff !important;
  font-weight: 600;
}

/* Service detail step (panel three): the category's video or image between
   the service name and its description, filled by getAttributeValue()'s AJAX.
   Margins live on the media itself so an empty slot leaves no gap. */
#updated-search-components .element-service-video iframe.service-video-block-iframe {
  display: block;
  width: 100%;
  height: 210px;
  border: 0;
  border-radius: 12px;
  margin: 0 0 18px;
}
#updated-search-components .element-service-video img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0 0 18px;
}

/* Time step: the duration field refuses a Confirm with no hours on it, and the
   base rule strips its border, so the shared border-danger flag needs one here
   to paint at all. */
#updated-search-components .increase-time input[type="text"].border-danger {
  border: 1px solid #dc3545;
}

/* Date + Time screen headers: title centered across the full width, with the
   original bordered back-button box on the left (kept distinct from the
   calendar's borderless prev/next chevrons). Date screen uses
   .searchResult_Category_mobil; Time screen uses .searchResultheader_mobile. */
#updated-search-components .element-category-panel-four .searchResult_Category_mobil,
#updated-search-components .element-category-panel-five .searchResultheader_mobile {
  padding: 14px 0 !important;
  margin-bottom: 18px;
  border-bottom: 1px solid #ececec;
  position: relative;
}
#updated-search-components .element-category-panel-four .searchResult_Category_mobil h2,
#updated-search-components .element-category-panel-five .searchResultheader_mobile h2 {
  font-size: 18px !important;
  font-weight: 600;
  width: 100%;
  text-align: center;
  margin: 0 !important;
}
#updated-search-components .element-category-panel-four .searchResult_Category_mobil .rightAngle__btn,
#updated-search-components .element-category-panel-five .searchResultheader_mobile .rightAngle__btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* True sticky footer: selected date on the left, Next button on the right. */
#updated-search-components .element-category-panel-four .select-servicedate__inputgroup {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #ececec;
  padding: 12px 0 14px;
  margin-top: 10px;
}
#updated-search-components #hiddenDateOfService {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#updated-search-components #hiddenDateOfService .input-area input#dateofservice_val_mobile {
  border: none !important;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
#updated-search-components #hiddenDateOfService .btn-next-area .btn {
  background: #f7880c !important;
  border: none !important;
  color: #fff;
  border-radius: 10px;
  padding: 12px 26px;
  font-weight: 600;
}

/* =============================================================
   Desktop Time popup: stop it sliding left/right.
   The popup is absolutely positioned inside the Time segment, and that
   segment grows + shifts as the picked start time and hours fill in (the
   top bar re-centers). Anchoring the popup to the segment's CENTER keeps
   it stationary, because the segment expands symmetrically around its
   center. The top bar still resizes; the popup no longer jumps.
   ============================================================= */
@media (min-width: 992px) {
  body.search-restyle #select-start-end-times {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}