/* ============================================================================
   Business link marketing box — match the /search marketing-pane look.

   Ports the #791 /search restyle (css/search-results.css, the
   `body.search-restyle .searchResult_provider ...` marketing-pane rules) onto
   the SP business link page (/{handle}) right column. Same component, different
   page, so it's a re-scope + shell-map of the same rules:

     /search  body.search-restyle .searchResult_provider   ->  business link  body.sp-business-link .businessLink_rightCol
     /search  card shell .sidebar                           ->  business link  card shell .checkAvailability_Box2

   (The brief named .Preview-shadow-container-- / .marketing-preview_Box_padding--
   as the shell, but those inner wrappers carry no CSS; the real visible card on
   this page is .checkAvailability_Box2 — the structural twin of /search's
   .sidebar. Kept its existing height/overflow; only the look changes.)

   The business link box nests two extra wrappers and a second #floating inside
   the card, so the /search single 28px content gutter is put once on the card
   here and the inner wrappers are zeroed (same single-gutter result).

   Loaded only on the business link page and scoped under body.sp-business-link,
   so it can't reach the left booking column, the CTA footer below the box, or
   any other page. Visuals only — no markup, copy, id, or behavior change.
   ============================================================================ */

/* ---- design tokens (ported from search-results.css:744). Defined on the body
        (NOT the page background / .main-container / .search-main rules) so the
        box AND the gallery/lightbox/credential modals — which mount on <body>,
        outside .businessLink_rightCol — all resolve the var(--r-*) values. ---- */
body.sp-business-link {
  --r-orange: #F7880C;
  --r-orange-deep: #E07A08;
  --r-blue: #1E66D0;
  --r-blue-bg: #EAF1FD;
  --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;
}

/* ---- S2/S4: card shell ---- */
/* The card (maps from /search .sidebar): soft float shadow + 16px radius,
   replacing the old 12px radius + harsh shadow. Height/overflow left as-is. */
body.sp-business-link .businessLink_rightCol .checkAvailability_Box2 {
  border: 0 !important;
  border-radius: var(--r-radius) !important;
  background: var(--r-card) !important;
  box-shadow: var(--r-shadow-card) !important;
  font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
  color: var(--r-ink) !important;
  /* single horizontal content gutter for the whole box (matches /search's 28px
     on #floating); the inner wrappers below are zeroed so it isn't stacked. */
  padding: 24px 28px !important;
}
/* inner wrappers carry no card chrome (kept transparent) */
body.sp-business-link .businessLink_rightCol .Preview-shadow-container--,
body.sp-business-link .businessLink_rightCol .marketing-preview_Box_padding-- {
  background: var(--r-card) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* zero the nested gutters so the card's single gutter is the only one, and let
   the content span the full card width (the theme otherwise locks it narrow) */
body.sp-business-link .businessLink_rightCol .Preview-shadow-container--,
body.sp-business-link .businessLink_rightCol .marketing-preview_Box_padding--,
body.sp-business-link .businessLink_rightCol #floating,
body.sp-business-link .businessLink_rightCol .right-content-div1,
body.sp-business-link .businessLink_rightCol .style-div,
body.sp-business-link .businessLink_rightCol .client-marketingPage {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---- hero: photo + name + share/save ---- */
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol #display_name,
body.sp-business-link .businessLink_rightCol .display-name {
  font-size: 28px !important; font-weight: 800 !important; color: var(--r-ink) !important; line-height: 1.1; letter-spacing: -0.02em !important;
}
/* identity header: big avatar on the left, name + rating beside it */
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .hireProviderProfileText { text-align: left !important; width: auto !important; }
body.sp-business-link .businessLink_rightCol .hireProviderProfileText .display-name { margin: 0 0 10px !important; }
/* rating line — this box renders the rating as <p class="m-0"> (not /search's
   .custom-stars widget), styled so the star + score + review count read the
   same as the pane */
body.sp-business-link .businessLink_rightCol .hireProviderProfileText p.m-0 {
  display: flex !important; align-items: center !important; gap: 6px !important;
  margin: 0 !important; font-size: 16px !important; color: var(--r-ink) !important;
}
body.sp-business-link .businessLink_rightCol .hireProviderProfileText p.m-0 .text-dark { font-weight: 700 !important; color: var(--r-ink) !important; }
body.sp-business-link .businessLink_rightCol .hireProviderProfileText p.m-0 .fa-star { color: var(--r-ink) !important; font-size: 14px !important; }
body.sp-business-link .businessLink_rightCol .hireProviderProfileText .info-img img { width: 15px !important; height: 15px !important; opacity: .6; }

/* ---- Share / Favorite: icon + underlined text links, pinned top-right ---- */
body.sp-business-link .businessLink_rightCol #floating { position: relative !important; }
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons {
  position: absolute !important;
  top: 8px !important;
  right: 0 !important;
  z-index: 4 !important;
  width: auto !important;
  padding: 0 !important;
}
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .left-icons { display: none !important; }
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .share,
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .favorite,
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .share img { width: 13px !important; height: auto !important; }
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .favorite i { font-size: 16px !important; color: var(--r-ink) !important; }
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .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 link (no border) */
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .share,
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .favorite i {
  padding: 6px 8px !important;
  border-radius: 9px !important;
  transition: background .15s ease !important;
}
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .share:hover,
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .favorite i:hover {
  background: #f2f2f2 !important;
}
/* hide the theme's stray share-icons divider pseudo-element */
body.sp-business-link .businessLink_rightCol .sp-top_profileIcons:after { display: none !important; }

/* ---- section rhythm: even padding + single hairline dividers ---- */
body.sp-business-link .businessLink_rightCol .client-marketingPage,
body.sp-business-link .businessLink_rightCol .client-marketingPage * { box-sizing: border-box; }
body.sp-business-link .businessLink_rightCol .providersAvailability,
body.sp-business-link .businessLink_rightCol .providersAboutService,
body.sp-business-link .businessLink_rightCol .serviceProviderCredentials,
body.sp-business-link .businessLink_rightCol .overallRating,
body.sp-business-link .businessLink_rightCol .provider-otherInformation,
body.sp-business-link .businessLink_rightCol .suggestedBookingTimes,
body.sp-business-link .businessLink_rightCol .earned5stars {
  padding: 40px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--r-line) !important;
}
/* drop the grey spacer rows; section padding + dividers handle separation */
body.sp-business-link .businessLink_rightCol .empty-row,
body.sp-business-link .businessLink_rightCol .empty-row.custom-border { display: none !important; }
body.sp-business-link .businessLink_rightCol .providersAvailability h5,
body.sp-business-link .businessLink_rightCol .providersAboutService h5,
body.sp-business-link .businessLink_rightCol .serviceProviderCredentials h5,
body.sp-business-link .businessLink_rightCol .overallRating h5,
body.sp-business-link .businessLink_rightCol .provider-otherInformation h5,
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .aboutUs_text,
body.sp-business-link .businessLink_rightCol .service-description,
body.sp-business-link .businessLink_rightCol .teaser p {
  font-size: 15px; line-height: 1.7; color: var(--r-ink-2);
}
/* About copy is SP-written: soft grey so it doesn't read as our own UI text */
body.sp-business-link .businessLink_rightCol .providersAboutService .aboutUs_text,
body.sp-business-link .businessLink_rightCol .providersAboutService p {
  color: #717171 !important;
}
body.sp-business-link .businessLink_rightCol .providersAboutService p { margin: 0 0 10px !important; }
body.sp-business-link .businessLink_rightCol .providersAboutService h5 { margin-bottom: 14px !important; }
body.sp-business-link .businessLink_rightCol .providersAboutService .photos_videos { margin-top: 22px !important; }
body.sp-business-link .businessLink_rightCol .empty-row.custom-border { border: 0 !important; margin: 0 !important; }

/* ---- Airbnb-style section order (visual reorder via flexbox) ----
   DOM order: earned-stars, about+photos, credentials, reviews.
   Reorder to: about+photos, credentials, social proof, reviews. CSS-only so it
   applies to the initial render. Inert order:N rules for sections this box
   doesn't have (availability, other-info, report) are left in, harmless. */
body.sp-business-link .businessLink_rightCol .client-marketingPage {
  display: flex !important;
  flex-direction: column !important;
}
body.sp-business-link .businessLink_rightCol .client-marketingPage > div:has(> .providersAboutService) { order: 1; }
body.sp-business-link .businessLink_rightCol .client-marketingPage > .providersAvailability { order: 2; }
body.sp-business-link .businessLink_rightCol .client-marketingPage > .serviceProviderCredentials { order: 3; }
body.sp-business-link .businessLink_rightCol .client-marketingPage > .earned5stars { order: 4; }
body.sp-business-link .businessLink_rightCol .client-marketingPage > .overallRating { order: 5; }
body.sp-business-link .businessLink_rightCol .client-marketingPage > .provider-otherInformation { order: 6; }
body.sp-business-link .businessLink_rightCol .client-marketingPage > div.col-xs-12 { order: 7; }

/* ---- "Earned 5-Stars in": peer-level heading + airy rounded chips ---- */
body.sp-business-link .businessLink_rightCol .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;
}
body.sp-business-link .businessLink_rightCol .earned5stars .earned5starsTagList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .earned5stars .earned5starsTagList li strong { font-weight: 500 !important; font-size: 12px !important; color: var(--r-ink-3) !important; }

/* ---- Credentials: quiet soft-filled rows, not boxed form-input rows ---- */
body.sp-business-link .businessLink_rightCol .serviceProviderCredentialsList {
  margin: 0 !important; padding: 0 !important; list-style: none !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .serviceProviderCredentialsList .myCredentials:last-child { border: 0 !important; }
body.sp-business-link .businessLink_rightCol .serviceProviderCredentials .text-gray,
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .serviceProviderCredentialsList .myCredentials .title {
  margin: 0 !important; font-size: 14px !important; font-weight: 500 !important;
  color: var(--r-ink) !important;
}
body.sp-business-link .businessLink_rightCol .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;
}

/* ---- S3: photo grid — uniform equal squares ---- */
body.sp-business-link .businessLink_rightCol .photos_videos #slider_outerr,
body.sp-business-link .businessLink_rightCol .photos_videos #slider_outerr #slider { margin: 0 !important; }
body.sp-business-link .businessLink_rightCol .photos_videos #slider_outerr,
body.sp-business-link .businessLink_rightCol .photos_videos #slider { width: 100% !important; max-width: 100% !important; }
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .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.
   Also applies when it's the ONLY photo (HAPPY-130) - a lone photo is still
   the lead photo and shouldn't render as a quarter-width cell. */
body.sp-business-link .businessLink_rightCol .photos_videos ul.providersServiceImages li.providersServiceImageContainer:first-child {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
body.sp-business-link .businessLink_rightCol .photos_videos ul.providersServiceImages li.providersServiceImageContainer a { display: block; width: 100%; height: 100%; }
body.sp-business-link .businessLink_rightCol .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;
}

/* ---- New Service Provider — calm rounded badge, matches the 5-star chips ---- */
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .overallRating .new-service-provider-lable img { width: 16px !important; height: 16px !important; }

/* ---- Reviews block: calm heading row + thin sub-rating bars ---- */
body.sp-business-link .businessLink_rightCol .overallRating .flex-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}
body.sp-business-link .businessLink_rightCol .overallRating .flex-heading h5 { margin: 0 !important; }
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .overallRating .flex-heading .fa-star { color: var(--r-ink) !important; }
body.sp-business-link .businessLink_rightCol .overallRating h6 { font-size: 14px !important; font-weight: 700 !important; color: var(--r-ink-2) !important; margin: 0 0 14px !important; }
body.sp-business-link .businessLink_rightCol .overallRatingLists {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .overallRatingLists li .ratingBar { display: flex !important; align-items: center !important; gap: 12px !important; }
body.sp-business-link .businessLink_rightCol .overallRatingLists .progress {
  height: 6px !important;
  flex: 1 1 auto !important;
  background: var(--r-line) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
body.sp-business-link .businessLink_rightCol .overallRatingLists .progress-bar { height: 100% !important; background: var(--r-ink) !important; border-radius: 999px !important; }
body.sp-business-link .businessLink_rightCol .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; }

/* ---- S5: secondary buttons (See all reviews, Contact SP): white + hairline ---- */
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .btn-black-outline:hover { background: var(--r-line-2) !important; }
body.sp-business-link .businessLink_rightCol .seeMore-btn { margin-top: 4px; }
/* quiet contact microcopy */
body.sp-business-link .businessLink_rightCol .contactInfo,
body.sp-business-link .businessLink_rightCol .contactInfo.text-center { font-size: 12px; color: var(--r-ink-3); margin-top: 8px; }
/* "Report this profile" link (matches /search) */
body.sp-business-link .businessLink_rightCol .report-profile-section { padding: 6px 0 0 !important; border: 0 !important; }
body.sp-business-link .businessLink_rightCol .report-serviceProvider {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--r-ink-2) !important; text-decoration: none !important;
}
body.sp-business-link .businessLink_rightCol .report-serviceProvider:hover { color: var(--r-ink) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* ============================================================================
   Responsive — tablet + phone (ported from search-results.css media blocks;
   /search's two-column page-layout and sticky-CTA rules are excluded, they
   belong to the /search results page, not this box).
   ============================================================================ */
@media (max-width: 991px) {
  /* one ~20px gutter on the card; inner wrappers already zeroed above */
  body.sp-business-link .businessLink_rightCol .checkAvailability_Box2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Share / Favorite: icon-only 40px tap targets, labels dropped on mobile */
  body.sp-business-link .businessLink_rightCol .sp-top_profileIcons { right: -4px !important; }
  body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons {
    justify-content: flex-end !important;
    gap: 0 !important;
  }
  body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .share::after,
  body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .favorite i::after {
    content: none !important;
  }
  body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .favorite {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.sp-business-link .businessLink_rightCol .sp-top_profileIcons .right-icons .share,
  body.sp-business-link .businessLink_rightCol .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;
  }
}

@media (max-width: 520px) {
  body.sp-business-link .businessLink_rightCol #display_name,
  body.sp-business-link .businessLink_rightCol .display-name { font-size: 21px !important; }
  body.sp-business-link .businessLink_rightCol .hireProviderProfile .profile-imgs { width: 96px !important; height: 96px !important; min-width: 96px; }
  body.sp-business-link .businessLink_rightCol .photos_videos ul.providersServiceImages { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---- About "Read more / Show less": flat grey rounded pill (search-results.css:1145).
        The theme's base .read-more is an orange floated text link; this matches the
        pane's flat-pill treatment. (This box's label reads "Read more"; the pane's
        reads "Show more" — the copy differs and is untouched; the pill is identical.) ---- */
body.sp-business-link .businessLink_rightCol .readmoreBtn { line-height: 1; }
body.sp-business-link .businessLink_rightCol .readmoreBtn .read-more,
body.sp-business-link .businessLink_rightCol .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.sp-business-link .businessLink_rightCol .readmoreBtn .read-more:hover,
body.sp-business-link .businessLink_rightCol .readmoreBtn .read-less:hover {
  background: #EFEFEF;
  border-color: #CFCFCF;
  color: #222 !important;
}

/* ============================================================================
   Media + document viewers — clean Airbnb-style modals (ported from
   search-results.css:2168). The "Show all photos & videos" gallery
   (#seeAllPhotosVideos), the single-photo lightbox (#lightboxed--*), and the
   Credentials file viewer (#myCredentials) all mount on <body>, which carries
   .sp-business-link — so re-scoping #791's body.search-restyle rules to
   body.sp-business-link reaches the SAME shared modal markup. Same popup look
   as /search.
   ============================================================================ */

/* ---- Photo & video gallery — full-screen Airbnb-style viewer ---- */
body.sp-business-link #seeAllPhotosVideos { background: #fff !important; }
body.sp-business-link #seeAllPhotosVideos .modal-dialog {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
}
body.sp-business-link #seeAllPhotosVideos .modal-content {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: 100vh !important;
  background: #fff !important;
}
body.sp-business-link #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.sp-business-link #seeAllPhotosVideos .modal-header h4 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--r-ink) !important;
}
body.sp-business-link #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.sp-business-link #seeAllPhotosVideos .modal-header .close:hover { background: var(--r-line-2) !important; }
body.sp-business-link #seeAllPhotosVideos .modal-body {
  padding: 36px 24px 72px !important;
  background: #fff !important;
}
body.sp-business-link #seeAllPhotosVideos .lightbox-gallery--,
body.sp-business-link #seeAllPhotosVideos .modal-body .photos {
  max-width: 820px !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body.sp-business-link #seeAllPhotosVideos #slider_outerr,
body.sp-business-link #seeAllPhotosVideos #slider {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.sp-business-link #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.sp-business-link #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;
}
body.sp-business-link #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer:nth-child(3n+1) {
  grid-column: 1 / -1 !important;
  aspect-ratio: 16 / 10 !important;
}
body.sp-business-link #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer a { display: block !important; width: 100% !important; height: 100% !important; }
body.sp-business-link #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.sp-business-link #lightboxed--container { background: #FFFFFF !important; }
body.sp-business-link #lightboxed--container #navbar { display: none !important; }
body.sp-business-link #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.sp-business-link #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.sp-business-link #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.sp-business-link #lightboxed--content .lightboxed--frame img,
body.sp-business-link #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;
}
body.sp-business-link #lightboxed--content .lightboxed--frame iframe {
  width: min(88vw, 1080px) !important;
  height: 82vh !important;
  max-height: 82vh !important;
  background: #000 !important;
}
body.sp-business-link #lightboxed--bttn_close,
body.sp-business-link #lightboxed--bttn_next,
body.sp-business-link #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.sp-business-link #lightboxed--bttn_close:hover,
body.sp-business-link #lightboxed--bttn_next:hover,
body.sp-business-link #lightboxed--bttn_prev:hover {
  background-color: #F4F4F4 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.16) !important;
}
body.sp-business-link #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.sp-business-link #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.sp-business-link #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.sp-business-link #myCredentials .modal-dialog {
  max-width: 760px !important;
  width: calc(100% - 48px) !important;
}
body.sp-business-link #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.sp-business-link #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.sp-business-link #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.sp-business-link #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.sp-business-link #myCredentials .modal-header .close:hover { background: var(--r-line-2) !important; }
body.sp-business-link #myCredentials .modal-body { padding: 0 !important; background: #fff !important; }
body.sp-business-link #myCredentials .modal-body img,
body.sp-business-link #myCredentials .modal-body #frame {
  width: 100% !important;
  max-height: 72vh !important;
  display: block !important;
  border: 0 !important;
}
body.sp-business-link #myCredentials .modal-footer {
  border-top: 1px solid var(--r-line) !important;
  padding: 12px 20px !important;
  justify-content: flex-end !important;
}
body.sp-business-link #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 (Favorite / Contact when not signed in) ---- */
body.sp-business-link #needToLogIn .modal-dialog {
  max-width: 400px !important;
  width: calc(100% - 32px) !important;
}
body.sp-business-link #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.sp-business-link #needToLogIn .modal-body { padding: 30px 28px !important; }
body.sp-business-link #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.sp-business-link #needToLogIn .cancelWorkOrderFormAction {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}
body.sp-business-link #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;
}
body.sp-business-link #needToLogIn .cancelWorkOrderFormAction .btn-black-outline,
body.sp-business-link #needToLogIn .cancelWorkOrderFormAction .btn-p {
  background: var(--r-card) !important;
  background-image: none !important;
  border: 1px solid #DDDDDD !important;
  color: var(--r-ink) !important;
}
body.sp-business-link #needToLogIn .cancelWorkOrderFormAction .btn-black-outline:hover,
body.sp-business-link #needToLogIn .cancelWorkOrderFormAction .btn-p:hover { background: var(--r-line-2) !important; }
body.sp-business-link #needToLogIn .cancelWorkOrderFormAction .btn-redoutline {
  background: var(--r-orange) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
}
body.sp-business-link #needToLogIn .cancelWorkOrderFormAction .btn-redoutline:hover { background: var(--r-orange-deep) !important; }

/* ---- Video tiles get a translucent play badge (videos render <img> as a direct
        child of <li>; photos wrap it in <a>, so :has(> img) targets only videos) ---- */
body.sp-business-link .businessLink_rightCol .photos_videos ul.providersServiceImages li.providersServiceImageContainer,
body.sp-business-link #seeAllPhotosVideos ul.providersServiceImages li.providersServiceImageContainer {
  position: relative !important;
}
body.sp-business-link .businessLink_rightCol .photos_videos ul.providersServiceImages li.providersServiceImageContainer:has(> img)::after,
body.sp-business-link #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;
}

/* Hourly rate + service-picker spacing on the business link booking column.
   Scoped to #wo-step-one so it can't leak to other pages. */
#wo-step-one .service-hourly-rate {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}
#wo-step-one .service-hourly-rate .rate-unit {
  font-size: 14px;
  font-weight: 500;
  color: #9a9a9a;
  letter-spacing: 0;
  margin-left: 2px;
}
/* Breathing room between the "Total. No hidden fees." line and the service picker. */
#wo-step-one .feeTxt {
  margin-bottom: 18px;
}

/* Back arrow on the guest "Order Confirmation" step for DESKTOP too (the title's
   ::before arrow is mobile-only by default). Light grey here vs the mobile black.
   Scoped to the business link guest step; the title's left tap-zone is wired to
   go back in index.php. */
@media (min-width: 768px) {
  .sp-business-link h3.order-confirmation-title.show-important::before {
    content: "\f177";
    font-family: "Font Awesome 6 free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #b5b5b5;
    cursor: pointer;
  }
}