/* ==============================================
   Shared Utility Styles (Content Sections)
   ============================================== */

/* spacing */
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.pt-80 { padding-top: 80px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.pt-60 { padding-top: 60px; }
.pb-0  { padding-bottom: 0; }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 1.5rem; }
.mb-5  { margin-bottom: 3rem; }
.mt-5  { margin-top: 3rem; }
.mt-60 { margin-top: 60px; }
.p-0   { padding: 0; }
.pb-5  { padding-bottom: 3rem; }
.pe-md-5 { padding-right: 3rem; }
.px-0  { padding-left: 0; padding-right: 0; }
.px-10 { padding-left: 10px; padding-right:10px;}

/* size / width */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.max-w-300  { max-width: 300px; }
.max-w-500  { max-width: 500px; }
.max-w-550  { max-width: 550px; }
.max-w-800  { max-width: 800px; }
.max-w-900  { max-width: 900px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }

/* typography */
.text-5rem { font-size: 5rem;
line-height:5.6rem; }
.text-4rem { font-size: 4rem; }
.text-2rem { font-size: 2rem; }
.text-1rem { font-size: 1rem; }
.tracking-1 { letter-spacing: 1px; }
.fw-600 { font-weight: 600; }
.text-uppercase { text-transform: uppercase; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.display-5 { font-size: 3rem; line-height: 1.2; }

/* layout helpers */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.end-0 { right: 0; }
.bottom-0 { bottom: 0; }
.auto-margin { margin-left: auto; margin-right: auto; }

/* colors */
.bg-f5f3e6 { background-color: #f5f3e6; }
.bg-f6f5f8 { background-color: #f6f5f8; }
.bg-edebde { background-color: #edebde; }
.bg-fdfdfd { background-color: #fdfdfd; }
.bg-ffffff { background-color: #ffffff; }
.bg-f5f5f6 { background-color: #f5f5f6; }

/* images */
.object-fit-cover { object-fit: cover; }
.object-pos-right-center { object-position: right center; }
.bg-black { background-color: #000; }

/* buttons / links */
.btn-outline-dark { border-color: #000 !important; color: #000 !important; }

/* containers */
.container-max-1200 { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* hero sizer for text alignment to max width */
.hero-sizer { padding-left: max(1rem, calc((100vw - 1600px) / 2)); }

  .treatment-footnote {
    display: block;
  }

  .treatment-footnote-mobile {
    display: none;
  }



@media (prefers-reduced-motion: reduce) {
  #helloBar .hello-btn,
  #helloBar #closeHelloBar {
      transition: none;
  }
  }



/* ---------- Responsive Breakpoints ---------- */

@media (min-width: 3000px) {
  .ultrawide-40w { width: 40% !important; }
}

@media (max-width: 1600px) {
    .text-5rem { font-size: 3.5rem; line-height:1.2; }
  .text-4rem { font-size: 3.5rem; }
  .hero-sizer {
    padding-left: max(1rem, calc((100vw - 1400px) / 2));
    padding-right: max(1rem, calc((100vw - 1400px) / 2));
  }

}
@media (max-width: 1200px) {
  .text-5rem { font-size: 2.5rem; line-height:1.2; }
  .text-4rem { font-size: 3rem; }
  .pe-md-5 { padding-right: 2rem; }
  .hero-sizer {
    padding-left: max(1rem, calc((100vw - 1000px) / 2));
    padding-right: max(1rem, calc((100vw - 1000px) / 2));
  }
  .max-w-1200 { max-width: 1000px; }
  .max-w-1000 { max-width: 800px; }

}
@media (max-width: 992px) {
  .hero { padding-top: 72px; }
}
@media (max-width: 768px) {
  .py-80 { padding-top: 40px; padding-bottom: 40px; }
  .text-4rem { font-size: 2rem; line-height: 1.3; }
  .text-2rem { font-size: 1.5rem; }
  .hero-sizer { padding-left: 1rem; padding-right: 1rem; }
  .max-w-900,
  .max-w-800,
  .max-w-1000,
  .max-w-1200 { max-width: 100%; }
  .pe-md-5 { padding-right: 1rem; }
  
  .treatment-footnote-mobile {
    display: block;
  }
    .treatment-footnote {
    display: none;
  }
}

/* Video sits close under its heading */
.video-heading {
  margin-bottom: 0;
}
.video-heading > :last-child {
  margin-bottom: 0;
}
.landing-video {
  margin-top: 1rem;
}
/* ultherapy-video.js wraps the <video> in .video-container { position: relative },
   which stacks the player under the .ratio::before spacer. Pin the player in the frame. */
.landing-video.ratio > .video-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.landing-video .video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Body results carousel: arrows and dots sit together under the photos */
#carouselBodyResults .body-results-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
#carouselBodyResults .carousel-indicators {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: none;
}
#carouselBodyResults .carousel-indicators li {
  box-sizing: content-box;
  list-style: none;
  text-indent: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 6px solid transparent;
  border-radius: 50%;
  background-color: #5c5852;
  background-clip: padding-box;
  opacity: 1;
  cursor: pointer;
}
#carouselBodyResults .carousel-indicators li.active {
  background-color: #111;
  box-shadow: 0 0 0 2px #f1b434;
}
#carouselBodyResults .carousel-control-prev,
#carouselBodyResults .carousel-control-next {
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  opacity: 1;
  background: none;
  border: 0;
  filter: none;
}
#carouselBodyResults .carousel-control-prev-icon,
#carouselBodyResults .carousel-control-next-icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0;
  background-color: transparent;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#carouselBodyResults .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
}
#carouselBodyResults .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}