@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Inter:opsz,wght@14..32,200..700&display=swap');

.promotion-item__tag .discount.promo-label {
    display: none;
}
.promotion-item__tag .amount.promo-label {
    display: none;
}

            
#details > div.detail-step-wrap.section > div > div.detail-step.clearfix > div > div:nth-child(3) > div > div > div.package-use-credits-msg.sb-confirm-leave.sb-package-link-block > a{
    color: white;
    text-decoration: underline;
}
#details > div.detail-step-wrap.section > div > div.detail-step.clearfix > div > div:nth-child(3) > div > div > div.package-use-credits-msg.sb-confirm-leave.sb-package-link-block > a:hover {
    color: white!important;
    text-decoration: underline;
}
.alert-danger { 
    color: white;
}
.text-warning {
    color: white;
}
#sb_content > div > div > div > a{
    color: #ffffff;
    text-decoration: none;
}
.package-content>div .package-item.panel .btn-bar .wrap-read-more .read-more .part.txt-part .less-part {
    color: white!important;
}
.panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide, .panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide span, .panel .btn-bar .wrap-read-more .read-more .part, #sb-timeline #steps #steps-content #sb_booking_content .location-item.panel .address a {
    color: white!important;
}
#booking-result-view #sb_bookings_list>div .alert {
    color: white!important;
}
.panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide, .panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide span, .panel .btn-bar .wrap-read-more .read-more .part, #sb-timeline #steps #steps-content #sb_booking_content .location-item.panel .address a {
    color: white!important;
}
.alert-info {
    color: white!important;
}
/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}



.panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide, .panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide span, .panel .btn-bar .wrap-read-more .read-more .part, #sb-timeline #steps #steps-content #sb_booking_content .location-item.panel .address a {
    color: #81bf9a;
}

/* Hide service duration label on Cardrona services only (matched by service photo) */
.service-item:has(img[src*="d678ebbcb4ade67ba16eb0574f1a2c34"]) .bar-flex-item.time,
.service-item:has(img[src*="e822e149d67672249d5013cf9f43a78f"]) .bar-flex-item.time,
.service-item:has(img[src*="bd3d7454bea2fe03578b262fb4dd58a7"]) .bar-flex-item.time,
.service-item:has(img[src*="7137cb360e36ead25613313217d169c5"]) .bar-flex-item.time,
.service-item:has(img[src*="34e7886287d4504b417f323a5d2dded5"]) .bar-flex-item.time,
.service-item:has(img[src*="428abf235c0e6225dd2767067f73158b"]) .bar-flex-item.time,
.service-item:has(img[src*="ce986b602ae87418fed7ca5c47355957"]) .bar-flex-item.time,
.service-item:has(img[src*="462f0fe42d36937e9c416a8c089192df"]) .bar-flex-item.time {
    display: none !important;
}

/* Keep service description text beside the photo (desktop/tablet) */
@media (min-width: 768px) {
    .service-item .collapse-content > .biggest-previev ~ *:not(.btn-bar) {
        margin-left: calc(50% + 30px);
    }
}

/* Label the people counter so guests see how to add people */
.bar-flex-item.sb_group_booking_count {
    flex-wrap: wrap;
    align-items: center;
}
.bar-flex-item.sb_group_booking_count::before {
    content: "How many people?";
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 14px;
    margin: 6px 0 4px;
}
.sb_group_booking_count .plus.sb_group_count,
.sb_group_booking_count .minus.sb_group_count {
    border: 2px solid #a2e0cb !important;
    border-radius: 6px;
}

/* Make Read more look like a button */
.service-item .wrap-read-more .btn.read-more {
    border: 2px solid #a2e0cb !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: rgba(162, 224, 203, 0.15) !important;
}
.service-item .wrap-read-more .btn.read-more .txt-part {
    display: inline !important;
}

/* Multi Passes page: friendlier wording */
.package-list-item.package-limit .title b {
    font-size: 0 !important;
}
.package-list-item.package-limit .title b::after {
    content: "Total sessions included";
    font-size: 14px;
}
.filter--header .filter--header_hint {
    display: none !important;
}
.filter--header .title-main {
    font-size: 0 !important;
}
.filter--header .title-main::after {
    content: "Search Multi Passes";
    font-size: 16px;
}

/* 15 minute payment hold notice */
#details > .detail-step-wrap::before {
  content: "Please note, your booking is held for 15 minutes while you pay. If payment isn't completed within 15 minutes, your booking is cancelled automatically, even if the payment goes through afterwards. If that happens, just email us at fire@thesecretsauna.nz and we'll sort it.";
  display: block;
  margin: 14px auto 6px;
  max-width: 640px;
  padding: 12px 16px;
  border: 2px solid #a2e0cb;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  text-transform: none;
}

/* 15 minute payment hold POP-UP (shows on the final details and payment step, fades after 10 seconds) */
body:has(#details)::after {
  content: "Please note\A\AYour booking is held for 15 minutes while you pay. If payment isn't completed within 15 minutes, your booking is cancelled automatically, even if the payment goes through afterwards.\A\AIf that happens, just email us at fire@thesecretsauna.nz and we'll sort it.\A\A(This message closes by itself)";
  white-space: pre-line;
  position: fixed;
  top: 16px;
  right: 16px; left: auto;
  transform: none;
  width: min(calc(100vw - 32px), 340px);
  padding: 16px 18px;
  background: #10554b;
  border: 2px solid #a2e0cb;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 99999;
  pointer-events: none;
  animation: ssHoldPopup 3s ease forwards;
}
@keyframes ssHoldPopup {
  0% { opacity: 0; visibility: visible; }
  5% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}


/* The Secret Sauna home page (added Oct 2026) */
section.section:has(.tss-home), section.section:has(div[style*="#10554B"]) {
    background: transparent !important;
    box-shadow: none !important;
}
section.section:has(div[style*="#10554B"]) .title-main {
    font-family: 'Cinzel', serif !important;
    font-weight: 400 !important;
    color: #D3FFE5 !important;
    letter-spacing: 0.06em;
    text-align: center;
    font-size: 20px;
}

/* Match the Squarespace website font (Inter) across the booking site */
body, body *:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.fi):not([class*="fa-"]):not([class*="flaticon"]):not([class*="icon"]):not(.title-main):not([style*="Cinzel"]) {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Light, smooth text to match the Squarespace site (Inter Light) */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
:where(body *:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.fi):not([class*="fa-"]):not([class*="flaticon"]):not([class*="icon"])) {
    font-weight: 300 !important;
    letter-spacing: 0.01em;
}
:where(b, strong, h1, h2, h3, h4, h5, h6, th, button, .btn, [class*="title"]) {
    font-weight: 400 !important;
}

/* My Bookings: make the back link readable */
#sb_back_to_bookings, #sb_back_to_bookings * {
    color: #D3FFE5 !important;
}

/* Phones: give the home page text more room, move the reviews badge to the bottom */
@media (max-width: 767px) {
    div[style*="background-color:#10554B"] {
        padding: 20px 2px !important;
    }
    div[style*="background-color:#113247"] {
        padding: 20px 14px 8px !important;
    }
    .google-reviews {
        position: static !important;
        margin: 24px auto 80px !important;
        max-width: calc(100% - 32px);
    }
}

/* Cinzel is a capitals font: set it in full capitals so the letters stay even */
[style*="Cinzel"],
section.section:has(div[style*="#10554B"]) .title-main {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}