/* Murex Travel Beachcomber enhancement v0.7 */

/* Never send clients to the external Beachcomber image-gallery page. */
a[href*="beachcomber.co.za"][href*="image-gallery"],
a[href*="beachcomber.co.za"][href*="gallery"] {
  display: none !important;
}

.murex-bco-external-gallery-hidden,
.murex-bco-gallery-tab-hidden {
  display: none !important;
}

/* v0.2 created a second gallery inside the Gallery tab. v0.3 deliberately
   removes that duplicate experience because the main package image is now
   the gallery carousel. */
.murex-bco-gallery-test {
  display: none !important;
}

/* Hide Beachcomber's original single package/room image after enhancement. */
.murex-bco-hero-original-hidden {
  display: none !important;
}

/* Main package/detail carousel, Holiday Factory style. */
.murex-bco-hero-carousel {
  width: 100%;
  margin: 0 auto 18px;
}

.murex-bco-hero-carousel__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f7f9;
}

.murex-bco-hero-carousel__main {
  display: block;
  width: 100%;
  max-height: 620px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.murex-bco-hero-carousel__arrow {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.murex-bco-hero-carousel__arrow:hover,
.murex-bco-hero-carousel__arrow:focus {
  background: rgba(0, 0, 0, 0.72);
}

.murex-bco-hero-carousel__arrow.is-prev {
  left: 14px;
}

.murex-bco-hero-carousel__arrow.is-next {
  right: 14px;
}

.murex-bco-hero-carousel__count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.murex-bco-hero-carousel__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.murex-bco-hero-carousel__thumb {
  appearance: none;
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 7px;
  overflow: hidden;
}

.murex-bco-hero-carousel__thumb.is-active {
  border-color: currentColor;
}

.murex-bco-hero-carousel__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 767px) {
  .murex-bco-hero-carousel {
    max-width: 100%;
  }

  .murex-bco-hero-carousel__thumbs {
    display: flex !important;
    gap: 7px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }

  .murex-bco-hero-carousel__thumb {
    flex: 0 0 31%;
    min-width: 0;
  }

  .murex-bco-hero-carousel__main {
    max-height: 390px;
  }

  .murex-bco-hero-carousel__arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .murex-bco-hero-carousel__count {
    display: block !important;
  }
}


/* The native Beachcomber room-allocation label sits over the room photo.
   On phones v0.6 moves that label into a compact caption above the image,
   leaving the gallery photo unobstructed. Desktop remains unchanged. */
.murex-bco-hero-carousel__room-label {
  display: none;
}

@media (max-width: 767px) {
  body.murex-bco-mobile-detail .murex-bco-mobile-room-label-original {
    display: none !important;
  }

  body.murex-bco-mobile-detail .murex-bco-hero-carousel__room-label {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 9px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: #111111 !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
}

/* v0.5: mobile detail-page polish.
   These rules only activate after the script confirms that the Beachcomber
   package-detail view is open, so the desktop layout and specials list stay unchanged. */
@media (max-width: 767px) {
  body.murex-bco-mobile-detail {
    overflow-x: hidden !important;
  }

  /* Give the Holiday Factory-style gallery enough height on a phone. */
  body.murex-bco-mobile-detail .murex-bco-hero-carousel,
  body.murex-bco-mobile-detail .murex-bco-hero-carousel__stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.murex-bco-mobile-detail .murex-bco-hero-carousel__stage {
    height: clamp(205px, 56vw, 245px) !important;
    min-height: clamp(205px, 56vw, 245px) !important;
  }

  body.murex-bco-mobile-detail .murex-bco-hero-carousel__main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* Beachcomber currently keeps Travel Dates and Book By in a desktop-width row.
     Stack that row on phones instead of allowing it to run off the right edge. */
  .murex-bco-mobile-dates-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .murex-bco-mobile-dates-row > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* On a package detail page the prominent Get My Live Quote button is already
     present in the package card. Hiding the duplicate floating bar prevents it
     from covering inclusions, tabs and footer content while scrolling. */
  .murex-bco-floating-widget-root.murex-bco-hide-floating-on-detail {
    display: none !important;
  }
}


/* v0.7: Match Holiday Factory inclusion bullets with Murex turquoise chevrons.
   JS marks only the active Beachcomber Inclusions list on a package-detail view,
   so menus, footer lists and other Beachcomber tabs are unaffected. */
.murex-bco-inclusions-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.murex-bco-inclusions-list > li {
  position: relative !important;
  list-style: none !important;
  padding-left: 24px !important;
}

.murex-bco-inclusions-list > li::marker {
  content: '' !important;
}

.murex-bco-inclusions-list > li::before {
  content: '\203A';
  position: absolute;
  left: 3px;
  top: -1px;
  color: var(--bco-accent, #24b6cf);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}