/* site.css - small overrides replacing behaviour that GoDaddy's JS used to provide */
/* lazy-loaded images that GoDaddy faded in with JS */
.gallery-8-img,[data-lazyimg] img,img[data-lazyimg]{opacity:1!important}
/* GoDaddy commerce cart removed (no store on the new site) */
[data-ss-hidden]{display:none!important}
/* contact form */
[data-ux=InputFloatLabel] input:focus + label,
[data-ux=InputFloatLabel] input:not(:placeholder-shown) + label{top:8px!important;font-size:12px!important}
[data-ux=InputFloatLabel] input::placeholder{color:transparent}
.ss-hp{display:none!important}
.ss-upload-note{font-size:12px;margin:4px 0 0;color:rgb(169,169,169);text-align:left}
.ss-upload-error{font-size:13px;margin:4px 0 0;color:#c62828}
.ss-form-sent{border:1px solid currentColor;padding:12px 16px;border-radius:4px;margin:8px 0 16px}
/* reviews */
.ss-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-ss-review][data-ss-off]{display:none!important}
/* book here */
.ss-svc-desc{font-size:14px;line-height:1.5;margin:0 0 16px;color:inherit;opacity:.85;text-align:left}
[data-ss-service][data-ss-off]{display:none!important}
.ss-setmore-placeholder strong{font-size:20px;color:#b71c1c}

/* Setmore booking on /book-here */
.ss-setmore-booking{display:flex;flex-direction:column;gap:16px;align-items:center;margin:32px auto 0;max-width:1100px;padding:0 16px 24px}
.ss-setmore-book-btn{display:inline-block;background:#e53935;color:#fff!important;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:14px 28px;border-radius:6px}
.ss-setmore-book-btn:hover{background:#c62828}
.ss-setmore-iframe{width:100%;min-height:800px;border:0;border-radius:8px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.ss-setmore-fallback{font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#444;margin:0}
.ss-setmore-fallback a{color:#c62828}

/* Cell video: desktop 16:9 pre-rotated landscape (no CSS rotate);
   mobile portrait sticky pin-and-scroll until the Specialist photo.
   Class selectors only — never use #4971... (IDs starting with a digit are invalid). */

/* ----- Mobile (under 900px): sticky full-viewport portrait pin ----- */
@media (max-width: 899.98px) {
  /* overflow:hidden on .page-inner would defeat position:sticky */
  .page-inner {
    overflow: visible !important;
  }

  .cell-pin-wrap {
    position: relative;
  }
  /* Flatten wrappers so position:sticky is relative to .cell-pin-wrap */
  .cell-pin-wrap > .cell-video-section,
  .cell-video-section > [data-ux="Widget"],
  .cell-video-section [data-ux="Widget"] > div,
  .cell-video-section [data-ux="Section"],
  .cell-video-section [data-ux="SplitLayout"],
  .cell-video-section [data-ux="Grid"],
  .cell-video-grid,
  .cell-video-grid > [data-ux="GridCell"]:first-child,
  .cell-video-grid > [data-ux="GridCell"]:first-child > [data-ux="Block"] {
    display: contents;
  }
  .cell-video-copy {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Sticky portrait video fills the viewport and stays pinned */
  .cell-video-frame {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh; /* fallback for older iOS */
    height: 100svh;
    margin: 0;
    margin-left: calc(50% - 50vw);
    padding: 0;
    overflow: hidden;
    border-radius: 0 !important;
    background: #000;
  }
  .cell-video-frame video.cell-video,
  .cell-video-section video.cell-video {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
  /* Phones must not display or lay out the landscape desktop file. */
  .cell-video-frame video.cell-video-desktop,
  .cell-video-section video.cell-video-desktop {
    display: none !important;
  }
  /* Overlay the intro text (and following pin-wrap content) over the video */
  .cell-video-copy {
    position: relative;
    z-index: 1;
    margin-top: -100vh !important; /* fallback */
    margin-top: -100svh !important;
    padding: 28px 20px 48px;
    box-sizing: border-box;
    width: 100%;
    background: rgba(10, 10, 12, 0.62);
    color: #f4f4f4;
    text-align: center;
  }
  .cell-video-copy [data-ux="VerticalBox"],
  .cell-video-copy [data-ux="Group"],
  .cell-video-copy [data-ux="HeadingMajor"],
  .cell-video-copy [data-aid="SECTION_TITLE_RENDERED"],
  .cell-video-copy [data-ux="HorizontalBox"],
  .cell-video-copy [data-aid="DESCRIPTION_TEXT"],
  .cell-video-copy [data-aid="DESCRIPTION_TEXT"] p {
    text-align: center !important;
    color: inherit;
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cell-pin-wrap .widget-about,
  .cell-pin-wrap .widget-about-about-1 {
    position: relative;
    z-index: 1;
  }

  /* Let the pinned video show through What PEMF Does */
  .cell-pin-wrap .widget-about-about-1,
  .cell-pin-wrap .widget-about-about-1 [data-ux="Widget"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Section"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Container"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Block"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Grid"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="GridCell"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Background"] {
    background-color: transparent !important;
  }
  .cell-pin-wrap .widget-about-about-1 [data-ux="Widget"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Section"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Container"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Block"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="Grid"] {
    background-image: none !important;
  }
  .cell-pin-wrap .widget-about-about-1 [data-ux="Widget"]::before,
  .cell-pin-wrap .widget-about-about-1 [data-ux="Widget"]::after,
  .cell-pin-wrap .widget-about-about-1 [data-ux="Section"]::before,
  .cell-pin-wrap .widget-about-about-1 [data-ux="Section"]::after,
  .cell-pin-wrap .widget-about-about-1 [data-ux="Container"]::before,
  .cell-pin-wrap .widget-about-about-1 [data-ux="Container"]::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Same scrim as the intro, so headings and text stay readable over the video */
  .cell-pin-wrap .widget-about-about-1 [data-ux="SectionHeading"] {
    background: rgba(10, 10, 12, 0.62);
    color: #f4f4f4;
    padding: 14px 16px;
    box-sizing: border-box;
    width: 100%;
  }
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCard"] {
    background: rgba(10, 10, 12, 0.62);
    padding: 16px 18px;
    box-sizing: border-box;
  }
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardHeading"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardText"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardText"] p,
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardText"] span {
    color: #f4f4f4;
  }
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardText"],
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardText"] p,
  .cell-pin-wrap .widget-about-about-1 [data-ux="ContentCardText"] span {
    color: #e2e2e2;
  }

  /* VerticalBox already has 24px padding-bottom; don't add a second 24px on the intro. */
  .cell-video-copy {
    padding-bottom: 0 !important;
  }
  .cell-pin-wrap .widget-about-about-1 [data-ux="Section"] {
    padding-top: 0 !important;
  }

  /* Holds the pin until the Your Specialist photo reaches the top, then that widget is pulled back so there is no gap. */
  .cell-pin-end-spacer {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
  }
  .cell-pin-wrap + .widget {
    position: relative;
    z-index: 2;
    background-color: #000;
    margin-top: -100vh;
    margin-top: -100svh;
  }
}

/* ----- Desktop (min-width 900px): 16:9 pre-rotated landscape video ----- */
@media (min-width: 900px) {
  .cell-pin-wrap {
    display: contents;
  }
  .cell-pin-end-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .cell-pin-wrap + .widget {
    margin-top: 0 !important;
  }


  /* Desktop: full-width 16:9 pre-rotated landscape video stacked above centered text, max ~1100px */
  .cell-video-section [data-ux="Grid"],
  .cell-video-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 36px !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .cell-video-section [data-ux="GridCell"],
  .cell-video-grid > [data-ux="GridCell"] {
    width: 100% !important;
    max-width: 1100px !important;
    flex: 0 0 auto !important;
  }
  .cell-video-section [data-ux="GridCell"] > [data-ux="Block"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
  }
  .cell-video-frame {
    position: relative;
    width: 100% !important;
    max-width: 1100px !important;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    flex: 0 0 auto;
  }
  /* Hide the portrait file on desktop so only the landscape file can play. */
  .cell-video-frame video.cell-video-mobile,
  .cell-video-section video.cell-video-mobile {
    display: none !important;
  }
  /* Pre-rotated 1920x1080 file fills the 16:9 box with no CSS rotate(). */
  .cell-video-frame video.cell-video-desktop,
  .cell-video-section video.cell-video-desktop {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
  .cell-video-copy {
    text-align: center !important;
    max-width: 720px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .cell-video-section [data-ux="VerticalBox"],
  .cell-video-section [data-ux="Group"],
  .cell-video-section [data-ux="HeadingMajor"],
  .cell-video-section [data-aid="SECTION_TITLE_RENDERED"],
  .cell-video-section [data-ux="HorizontalBox"],
  .cell-video-section [data-aid="DESCRIPTION_TEXT"],
  .cell-video-section [data-aid="DESCRIPTION_TEXT"] p {
    text-align: center !important;
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Product shop: identical 1:1 image boxes (the dominant GoDaddy card size,
   width 100% of the card with aspect-ratio 1/1). object-fit contain so
   nothing is cropped or stretched; black letterbox matches the dark theme. */
body.ss-product-shop [data-ux="ContentCardWrapperImage"] {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background-color: #000;
  overflow: hidden;
  display: block !important;
  box-sizing: border-box;
  position: relative;
}
body.ss-product-shop [data-ux="ContentCardWrapperImage"] > a:not(:has(img)) {
  display: none !important;
}
body.ss-product-shop [data-ux="ContentCardWrapperImage"] > a:has(img) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}
body.ss-product-shop [data-ux="ContentCardWrapperImage"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background-color: #000;
  box-sizing: border-box;
  border: 0 !important;
  overflow: visible !important;
}
/* Keep titles in a row the same height so image boxes line up (2-line heading). */
body.ss-product-shop [data-ux="ContentCard"] [data-ux="ContentCardHeading"] {
  min-height: 40px;
}

/* Book Here cancellation policy: a one-item FAQ whose question label is empty.
   GoDaddy's runtime revealed the answer; without it, class c1-2t keeps the
   body at display:none, leaving only the heading and a blank chevron. */
body.ss-book-here .widget-faq .accordion-answer {
  display: block !important;
}
body.ss-book-here .widget-faq .accordion-question {
  display: none !important;
}