/* =========================================================
   15) HTML CLEANUP HELPERS / SEMANTIC UTILITY CLASSES
========================================================= */
.massagePriceList {
  margin-top: 6px;
  color: #d6b24c;
  font-weight: 900;
  line-height: 1.9;
  font-size: 18px;
}

.priceNoteMuted {
  color: #b5b5b5;
  font-weight: 700;
}

.priceStrike {
  text-decoration: line-through;
}

.manageTicketWrap {
  max-width: 1140px;
  margin: 0 auto 30px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}

.manageTicketBtn {
  max-width: 320px;
  width: 100%;
}

.fieldLabel {
  display: block;
  color: #ddd;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}

.customerNameTitle {
  margin: 18px 10px 2px;
  text-align: start;
}

.guestRow--compact {
  margin: 0;
}

.familyPreferenceCard {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(200, 171, 79, 0.22);
  border-radius: 12px;
  background: rgba(200, 171, 79, 0.03);
}

.footerBtns--date {
  grid-template-columns: 1fr 1.2fr;
}

.footerBtns--summary {
  grid-template-columns: 1fr 1.3fr;
}

.confirmModalCard {
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}

.confirmStatus {
  margin-top: 14px;
  color: #c8ab4f;
  font-weight: 800;
  font-size: 16px;
}

.confirmCloseBtn {
  width: 200px;
  margin-top: 25px;
  position: relative;
  z-index: 2;
}

.countryModalCard {
  width: min(520px, 100%);
  height: min(88vh, 760px);
}

.manageModalCard {
  height: min(92vh, 900px);
  width: min(940px, 100%);
}

.siteFooterLuxury {
  position: relative;
  max-width: 1080px;
  margin: 44px auto 18px;
  padding: 26px 24px 24px;
  border-radius: 24px;
  border: 1px solid rgba(200, 171, 79, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    radial-gradient(circle at 12% 14%, rgba(200, 171, 79, 0.12), transparent 34%),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 420px 630px;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.siteFooterLuxury::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 171, 79, 0.65), transparent);
  pointer-events: none;
}

.siteFooterLuxuryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.siteFooterLuxurySection {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.siteFooterLuxurySection--contact {
  grid-template-columns: minmax(0, 1fr);
}

.siteFooterLuxuryItem {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
}

.siteFooterLuxuryItem--full {
  grid-column: 1 / -1;
}

.siteFooterLuxuryLabel {
  display: block;
  margin-bottom: 9px;
  color: #d8bd70;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.siteFooterLuxuryValue {
  color: #f6f2e8;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
  word-break: break-word;
}

.siteFooterLuxuryLabelInline {
  display: inline;
  margin-inline-end: 10px;
  color: #d8bd70;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.siteFooterLuxuryLink {
  color: inherit;
  text-decoration: none;
}

.siteFooterLuxuryLink:hover {
  color: #ffffff;
  text-decoration: none;
}

.siteFooterLuxurySeparator {
  display: inline-block;
  margin: 0 10px;
  color: rgba(246, 242, 232, 0.55);
}

.siteFooterContactLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 0;
  text-align: center;
}

.siteFooterContactLinks .siteFooterLuxuryLink {
  overflow-wrap: anywhere;
}

.siteFooterPaymentBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.siteFooterPayIcons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 324px);
  margin-top: 2px;
}

.siteFooterPayChip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex: 0 0 calc((100% - 30px) / 6);
  max-width: calc((100% - 30px) / 6);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.siteFooterPayChip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.siteFooter {

  margin-top: 18px;
  padding: 0 10px 26px;
  text-align: center;
  color: #888;
  font-size: 14px;
}

@media (max-width: 720px) {
  .siteFooterLuxury {
    margin: 34px 12px 16px;
    padding: 22px 16px 18px;
    border-radius: 20px;
  }

  .siteFooterLuxuryGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .siteFooterLuxurySection {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .siteFooterLuxuryItem {
    padding: 14px 14px;
    border-radius: 16px;
  }

  .siteFooterLuxuryValue {
    font-size: 15px;
    line-height: 1.7;
  }

  .siteFooterLuxuryLabelInline {
    font-size: 13px;
    letter-spacing: 0.12em;
  }

  .siteFooterContactLinks {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .siteFooterContactLinks .siteFooterLuxurySeparator {
    display: none;
  }

  .siteFooterPayChip {
    flex-basis: calc((100% - 25px) / 6);
    max-width: calc((100% - 25px) / 6);
    border-radius: 6px;
  }

  .siteFooterPayIcons {
    width: min(100%, 300px);
    gap: 5px;
  }

  .siteFooter {
    padding: 0 12px 24px;
  }
}

/* =========================================================
       21) PATTERNED TOP CONTROLS
    ========================================================= */
#langSelect,
.compareTrigger {
  background-color: #0b0b0b;
  background-image:
    linear-gradient(rgba(5, 5, 5, 0.74), rgba(5, 5, 5, 0.82)),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  background-size: auto, 420px 630px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.18);
}

.compareCurrencySelect {
  background-color: #0b0b0b;
  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='none' stroke='%23cfcfcf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
    linear-gradient(rgba(5, 5, 5, 0.74), rgba(5, 5, 5, 0.82)),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: right 16px center, center, center;
  background-size: 18px, auto, 420px 630px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.18);
}

body {
  --bookingFlow1: #d9ccb0;
  --bookingFlow2: #b39b72;
  --bookingFlowRgb: 217, 204, 176;
  --bookingFlowText: #d7bb74;
  --bookingFlowSoft: #f7efe2;
  --bookingFlowBtnText: #21170d;
}

body.booking-theme-classic {
  --bookingFlow1: #d9ccb0;
  --bookingFlow2: #b39b72;
  --bookingFlowRgb: 217, 204, 176;
  --bookingFlowText: #d7bb74;
  --bookingFlowSoft: #f7efe2;
  --bookingFlowBtnText: #21170d;
}

body.booking-theme-signature {
  --bookingFlow1: #b8cdc1;
  --bookingFlow2: #8ea79a;
  --bookingFlowRgb: 184, 205, 193;
  --bookingFlowText: #93b3a2;
  --bookingFlowSoft: #f2faf6;
  --bookingFlowBtnText: #102019;
}

body.booking-theme-deluxe {
  --bookingFlow1: #d8b9c6;
  --bookingFlow2: #a7798e;
  --bookingFlowRgb: 216, 185, 198;
  --bookingFlowText: #d8a2b6;
  --bookingFlowSoft: #fbf1f5;
  --bookingFlowBtnText: #241019;
}

body.booking-theme-massage {
  --bookingFlow1: #b8d2c7;
  --bookingFlow2: #8da89b;
  --bookingFlowRgb: 184, 210, 199;
  --bookingFlowText: #9fc8b7;
  --bookingFlowSoft: #f1faf6;
  --bookingFlowBtnText: #0f1815;
}

#dateModal .modal,
#customerModal .modal,
#summaryModal .modal {
  border-color: rgba(var(--bookingFlowRgb), 0.22);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.015)
    ),
    radial-gradient(
      circle at 15% 18%,
      rgba(var(--bookingFlowRgb), 0.08),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(var(--bookingFlowRgb), 0.04),
      rgba(var(--bookingFlowRgb), 0.015)
    ),
    #0b0b0b;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(var(--bookingFlowRgb), 0.03) inset;
}

#dateModal .modalTop,
#customerModal .modalTop,
#summaryModal .modalTop {
  background:
    linear-gradient(
      180deg,
      rgba(var(--bookingFlowRgb), 0.10),
      rgba(5, 5, 5, 0.96)
    ),
    #050505;
  border-bottom: 1px solid rgba(var(--bookingFlowRgb), 0.16);
}

#dateModal .modalTop .title,
#customerModal .modalTop .title,
#summaryModal .modalTop .title {
  color: var(--bookingFlowText);
}

#dateModal .modalBody,
#customerModal .modalBody,
#summaryModal .modalBody {
  background-color: #0d0d0d;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)),
    radial-gradient(
      circle at 15% 16%,
      rgba(var(--bookingFlowRgb), 0.07),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(var(--bookingFlowRgb), 0.035),
      rgba(var(--bookingFlowRgb), 0.012)
    ),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 420px 630px;
  background-attachment: scroll;
}

#dateModal .modalFooter,
#customerModal .modalFooter,
#summaryModal .modalFooter {
  border-top: 1px solid rgba(var(--bookingFlowRgb), 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(var(--bookingFlowRgb), 0.05),
      rgba(7, 7, 7, 0.96)
    ),
    #070707;
}

#dateModal .iconBtn,
#customerModal .iconBtn,
#summaryModal .iconBtn,
#dateModal .navBtn {
  border-color: rgba(var(--bookingFlowRgb), 0.18);
  background: linear-gradient(
    180deg,
    rgba(var(--bookingFlowRgb), 0.08),
    rgba(var(--bookingFlowRgb), 0.03)
  );
  color: var(--bookingFlowSoft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#dateModal .backBtn,
#customerModal .backBtn,
#summaryModal .backBtn,
#customerModal #resetBtn {
  border-color: rgba(var(--bookingFlowRgb), 0.34);
  background: linear-gradient(
    180deg,
    rgba(var(--bookingFlowRgb), 0.05),
    rgba(var(--bookingFlowRgb), 0.018)
  );
  color: var(--bookingFlowSoft);
}

#dateModal .sendBtn,
#customerModal .sendBtn,
#summaryModal .sendBtn {
  background: linear-gradient(180deg, var(--bookingFlow1), var(--bookingFlow2));
  color: var(--bookingFlowBtnText);
  box-shadow: 0 8px 18px rgba(var(--bookingFlowRgb), 0.12);
}

#dateModal .monthTitle .month,
#dateModal .monthTitle .year,
#dateModal .slotsTitle,
#dateModal #selectedInfo,
#dateModal .day:not(.muted):not(.past):not(.today):not(.selected) {
  color: var(--bookingFlowText);
}

#dateModal .day.past {
  color: rgba(var(--bookingFlowRgb), 0.28);
}

#dateModal .dow div,
#dateModal .slotsTitle span {
  color: var(--bookingFlowText);
}

#dateModal .slotsTitle span {
  border-bottom-color: rgba(var(--bookingFlowRgb), 0.70);
}

#dateModal .day.today {
  border-color: rgba(var(--bookingFlowRgb), 0.82);
  box-shadow: inset 0 0 0 1px rgba(var(--bookingFlowRgb), 0.18);
}

#dateModal .day.selected,
#dateModal .slot.selected {
  background: linear-gradient(180deg, var(--bookingFlow1), var(--bookingFlow2));
  color: var(--bookingFlowBtnText);
}

#dateModal .day.hasSlots::after {
  background: linear-gradient(
    90deg,
    rgba(var(--bookingFlowRgb), 0.72),
    rgba(var(--bookingFlowRgb), 0.42)
  );
}

#customerModal .fieldFull,
#customerModal .countryBox,
#customerModal .familyBlock,
#customerModal .priceSummaryBox,
#customerModal #guestBreakdownLine,
#summaryModal #summaryBox {
  border-color: rgba(var(--bookingFlowRgb), 0.18);
}

#customerModal .fieldFull,
#summaryModal #summaryBox {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
    linear-gradient(
      180deg,
      rgba(var(--bookingFlowRgb), 0.05),
      rgba(var(--bookingFlowRgb), 0.02)
    );
}

#customerModal .priceSummaryBox,
#customerModal .familyBlock,
#customerModal #guestBreakdownLine {
  background: linear-gradient(
    180deg,
    rgba(var(--bookingFlowRgb), 0.09),
    rgba(var(--bookingFlowRgb), 0.03)
  );
}

#customerModal .fieldLabel,
#customerModal .guestTotalBar,
#customerModal .couplePreferenceNote,
#customerModal .familyTitle,
#customerModal #liveTotalPrice,
#customerModal .countryCode,
#customerModal .faqLuxuryEyebrow,
#customerModal .faqLuxuryIcon,
#customerModal .faqQuestion span:last-child {
  color: var(--bookingFlowText);
}

#customerModal .fieldFull input::placeholder,
#customerModal .fieldFull textarea::placeholder {
  color: rgba(var(--bookingFlowRgb), 0.72);
}

#customerModal .guestMiniPackage:focus,
#customerModal .countrySearch:focus,
#customerModal .fieldFull:focus-within {
  border-color: rgba(var(--bookingFlowRgb), 0.50);
  box-shadow: 0 0 0 3px rgba(var(--bookingFlowRgb), 0.10);
}

#customerModal .guestMiniPackage,
#customerModal .countrySearch {
  border-color: rgba(var(--bookingFlowRgb), 0.16);
}

#summaryModal .packageLine {
  border-color: rgba(var(--bookingFlowRgb), 0.14);
  background: rgba(var(--bookingFlowRgb), 0.035);
}

#customerModal .faqLuxuryTab {
  border-color: rgba(var(--bookingFlowRgb), 0.18);
  background:
    radial-gradient(
      circle at top left,
      rgba(var(--bookingFlowRgb), 0.06),
      transparent 34%
    ),
    linear-gradient(180deg, rgba(12, 12, 12, 0.98), rgba(5, 5, 5, 0.98));
}

#customerModal .faqLuxuryIcon {
  border-color: rgba(var(--bookingFlowRgb), 0.18);
  background: linear-gradient(
    180deg,
    rgba(var(--bookingFlowRgb), 0.14),
    rgba(var(--bookingFlowRgb), 0.05)
  );
}

#customerModal .faqBox,
#customerModal .faqLuxuryContent {
  border-color: rgba(var(--bookingFlowRgb), 0.12);
}

#customerModal .guestRow[data-key] {
  border: 1px solid rgba(var(--bookingFlowRgb), 0.18);
  background: linear-gradient(
    180deg,
    rgba(var(--bookingFlowRgb), 0.08),
    rgba(var(--bookingFlowRgb), 0.025)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 0 0 1px rgba(var(--bookingFlowRgb), 0.03);
}

#customerModal .guestRow[data-key] .guestLabel,
#customerModal .guestRow[data-key] .guestCount {
  color: var(--bookingFlowText);
}

#customerModal .guestRow[data-key] .guestBtn {
  background: linear-gradient(
    180deg,
    rgba(var(--bookingFlowRgb), 0.12),
    rgba(var(--bookingFlowRgb), 0.04)
  );
  color: var(--bookingFlowSoft);
  border: 1px solid rgba(var(--bookingFlowRgb), 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#customerModal .errorField {
  border-color: rgba(255, 90, 90, 0.78);
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.12);
}

#customerModal .errorText {
  color: #ff9d9d;
}

#customerModal .errorSelect {
  border-color: rgba(255, 90, 90, 0.78);
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.12);
}

.spaAudioDock{
  position:fixed;
  right:18px;
  bottom:calc(20px + 1cm);
  z-index:9998;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
.spaAudioToggle{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(200,171,79,0.30);
  background:linear-gradient(135deg, rgba(14,14,14,0.46), rgba(53,37,10,0.40));
  color:#fff;
  border-radius:999px;
  padding:12px 16px;
  box-shadow:0 10px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.06);
  font-weight:800;
  letter-spacing:0.2px;
  cursor:pointer;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.spaAudioToggle:hover{
  transform:translateY(-1px);
  border-color:rgba(237,213,129,0.52);
  box-shadow:0 14px 30px rgba(0,0,0,0.30), 0 0 18px rgba(200,171,79,0.10);
}
.spaAudioToggle.is-on{
  border-color:rgba(237,213,129,0.64);
  background:linear-gradient(135deg, rgba(22,18,10,0.56), rgba(90,63,15,0.48));
  box-shadow:0 14px 32px rgba(0,0,0,0.30), 0 0 20px rgba(200,171,79,0.12);
}
.spaAudioIcon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  flex:0 0 28px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.28), rgba(200,171,79,0.25) 45%, rgba(0,0,0,0.32) 100%);
  color:#f8e3a0;
  font-size:15px;
  box-shadow:0 0 18px rgba(200,171,79,0.18);
}
.spaAudioToggle.is-on .spaAudioIcon{
  animation:spaAudioGlow 2.8s ease-in-out infinite;
}
@keyframes spaAudioGlow{
  0%,100%{transform:scale(1); box-shadow:0 0 12px rgba(200,171,79,0.18);}
  50%{transform:scale(1.08); box-shadow:0 0 20px rgba(237,213,129,0.34);}
}
.spaAudioHint{
  display:none;
}
.spaYoutubePlayerMount{
  position:fixed;
  left:-9999px;
  top:0;
  width:220px;
  height:220px;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-1;
}
.spaYoutubePlayerMount iframe{
  width:220px;
  height:220px;
  border:0;
}
@media (max-width:640px){
  .spaAudioDock{
    right:12px;
    bottom:calc(14px + 1cm);
  }
  .spaAudioToggle{
    font-size:14px;
  }
}

#customerModal .modalTop .title{
  font-size:22px;
}
#customerModal .fieldLabel{
  font-size:20px;
}
#customerModal .guestLabel{
  font-size:18px;
}
#customerModal .guestTotalBar{
  font-size:20px;
}
[data-image-key]{
  cursor:pointer;
}
li[data-image-key]{
  text-decoration: underline dotted rgba(255,255,255,0.26);
  text-underline-offset: 4px;
}
li[data-image-key]:hover,
.detailsTitleImageBtn[data-image-key]:hover{
  filter:brightness(1.06);
}
li[data-image-key]:focus-visible,
.detailsTitleImageBtn[data-image-key]:focus-visible{
  outline:2px solid rgba(200,171,79,0.58);
  outline-offset:6px;
  border-radius:8px;
}
.detailsTitleImageBtn{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.detailsTitleImageHint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  font-size:12px;
  line-height:1;
}
#saunaImageModal{
  z-index:10020;
}
#saunaImageModal .modal{
  width:min(920px,100%);
  max-height:min(90vh,920px);
  border-radius:18px;
  border:1px solid rgba(200,171,79,0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    radial-gradient(circle at 15% 18%, rgba(200,171,79,0.10), transparent 36%),
    #0b0b0b;
  box-shadow:0 12px 34px rgba(0,0,0,0.42);
}
#saunaImageModal .modalTop{
  background:
    linear-gradient(180deg, rgba(200,171,79,0.16), rgba(5,5,5,0.96)),
    #050505;
  border-bottom:1px solid rgba(200,171,79,0.24);
}
#saunaImageModal .modalTop .title{
  color:#f1d892;
}
#saunaImageModal .modalBody{
  padding:14px;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y pinch-zoom;
  background:
    linear-gradient(rgba(7,7,7,0.78), rgba(7,7,7,0.78)),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat:no-repeat, repeat;
  background-size:auto, 420px 630px;
}
.saunaImageFrame{
  width:100%;
  flex:0 0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:#120c06;
  box-shadow:0 16px 36px rgba(0,0,0,0.34);
}
.saunaImageFrame img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.treatmentImageGallery{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  padding-bottom:8px;
  touch-action:pan-y pinch-zoom;
}
.treatmentImageCard{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}
.treatmentImageCard img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  background:#050505;
  touch-action:pan-y pinch-zoom;
  -webkit-user-drag:none;
}
.treatmentImageMissing{
  display:none;
  width:100%;
  padding:18px 16px;
  text-align:center;
  color:#f5e7ba;
  border:1px dashed rgba(200,171,79,0.34);
  border-radius:14px;
  background:rgba(200,171,79,0.06);
  line-height:1.8;
}
.treatmentImageMissing.show{
  display:block;
}
@media (max-width:720px){
  #saunaImageModal .modal{
    width:100%;
    border-radius:14px;
  }
  #saunaImageModal .modalBody{
    padding:10px;
    -webkit-overflow-scrolling:touch;
  }
  .detailsTitleImageHint{
    min-width:22px;
    height:22px;
    font-size:11px;
  }
}

:root{
  --programDetailsWaterBg: url("../../Images/program-details-water.webp?v=20260805-water-visible");
}
#classicDetailsModal .modalBody,
#signatureDetailsModal .modalBody,
#deluxeDetailsModal .modalBody{
  position: relative;
  isolation: isolate;
  background-color: #0d0d0d;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.40)),
    url("../../Images/program-details-water.webp?v=20260805-water-visible");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center top;
  background-blend-mode: normal, normal;
}
#classicDetailsModal .modalBody::before,
#signatureDetailsModal .modalBody::before,
#deluxeDetailsModal .modalBody::before{
  content: none;
  display: none;
}
#classicDetailsModal .detailsContent,
#signatureDetailsModal .detailsContent,
#deluxeDetailsModal .detailsContent{
  position: relative;
}
#classicDetailsModal .detailsItem,
#signatureDetailsModal .detailsItem,
#deluxeDetailsModal .detailsItem{
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#classicDetailsModal .detailsNoteBox,
#signatureDetailsModal .detailsNoteBox,
#deluxeDetailsModal .detailsNoteBox{
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#classicDetailsModal .detailsItemTitle,
#signatureDetailsModal .detailsItemTitle,
#deluxeDetailsModal .detailsItemTitle,
#classicDetailsModal .detailsContent h3,
#signatureDetailsModal .detailsContent h3,
#deluxeDetailsModal .detailsContent h3{
  color: var(--detailsThemeText);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}
#classicDetailsModal .detailsItem p,
#signatureDetailsModal .detailsItem p,
#deluxeDetailsModal .detailsItem p,
#classicDetailsModal .detailsBulletList li,
#signatureDetailsModal .detailsBulletList li,
#deluxeDetailsModal .detailsBulletList li,
#classicDetailsModal .detailsNoteBox p,
#signatureDetailsModal .detailsNoteBox p,
#deluxeDetailsModal .detailsNoteBox p{
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
  line-height: 1.82;
}
#classicDetailsModal .detailsNoteBox strong,
#signatureDetailsModal .detailsNoteBox strong,
#deluxeDetailsModal .detailsNoteBox strong{
  color: var(--detailsThemeText);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}

#classicDetailsModal .modalBody,
#signatureDetailsModal .modalBody,
#deluxeDetailsModal .modalBody{
  overflow-x: hidden;
}

#classicDetailsModal .detailsSteamOverlay,
#signatureDetailsModal .detailsSteamOverlay,
#deluxeDetailsModal .detailsSteamOverlay{
  position: sticky;
  top: -6px;
  height: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

#classicDetailsModal .detailsSteamCloud,
#signatureDetailsModal .detailsSteamCloud,
#deluxeDetailsModal .detailsSteamCloud{
  position: absolute;
  left: -10%;
  right: -10%;
  top: -8px;
  height: 238px;
  border-radius: 0 0 44% 44%;
  background:
    radial-gradient(40% 58% at 8% 88%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.00) 74%),
    radial-gradient(36% 52% at 28% 92%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.16) 26%, rgba(255,255,255,0.04) 52%, rgba(255,255,255,0.00) 76%),
    radial-gradient(44% 56% at 50% 90%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.15) 24%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.00) 74%),
    radial-gradient(34% 48% at 72% 92%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.16) 24%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.00) 74%),
    radial-gradient(42% 56% at 92% 88%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 26%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.00) 74%);
  filter: blur(22px) saturate(118%);
  opacity: 0.38;
  mix-blend-mode: screen;
  animation: detailsSteamCloudPulse 11.8s ease-in-out infinite alternate;
}

#classicDetailsModal .detailsSteamCloud::before,
#signatureDetailsModal .detailsSteamCloud::before,
#deluxeDetailsModal .detailsSteamCloud::before,
#classicDetailsModal .detailsSteamCloud::after,
#signatureDetailsModal .detailsSteamCloud::after,
#deluxeDetailsModal .detailsSteamCloud::after{
  content: "";
  position: absolute;
  inset: auto;
  top: 18px;
  width: 42%;
  height: 162px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0.03) 56%, rgba(255,255,255,0) 76%);
  filter: blur(20px);
  opacity: 0.74;
}

#classicDetailsModal .detailsSteamCloud::before,
#signatureDetailsModal .detailsSteamCloud::before,
#deluxeDetailsModal .detailsSteamCloud::before{
  left: 8%;
}

#classicDetailsModal .detailsSteamCloud::after,
#signatureDetailsModal .detailsSteamCloud::after,
#deluxeDetailsModal .detailsSteamCloud::after{
  right: 7%;
}

#classicDetailsModal .detailsSteamPlume,
#signatureDetailsModal .detailsSteamPlume,
#deluxeDetailsModal .detailsSteamPlume{
  position: absolute;
  top: 56px;
  width: var(--steamWidth, 170px);
  height: var(--steamHeight, 208px);
  left: var(--steamLeft, 50%);
  transform: translate3d(-50%, 42px, 0) scale(0.76);
  transform-origin: center bottom;
  border-radius: 46% 54% 48% 52% / 56% 44% 56% 44%;
  background:
    radial-gradient(46% 58% at 50% 72%, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.00) 70%),
    radial-gradient(34% 42% at 34% 44%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 34%, rgba(255,255,255,0.00) 72%),
    radial-gradient(30% 40% at 66% 38%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0.00) 70%);
  filter: blur(19px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: detailsSteamRise var(--steamDuration, 9.6s) ease-in-out infinite;
  animation-delay: var(--steamDelay, 0s);
}

#classicDetailsModal .detailsSteamPlume::before,
#signatureDetailsModal .detailsSteamPlume::before,
#deluxeDetailsModal .detailsSteamPlume::before,
#classicDetailsModal .detailsSteamPlume::after,
#signatureDetailsModal .detailsSteamPlume::after,
#deluxeDetailsModal .detailsSteamPlume::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 38%, rgba(255,255,255,0.00) 76%);
  filter: blur(16px);
}

#classicDetailsModal .detailsSteamPlume::before,
#signatureDetailsModal .detailsSteamPlume::before,
#deluxeDetailsModal .detailsSteamPlume::before{
  width: 46%;
  height: 34%;
  left: 8%;
  bottom: 24%;
}

#classicDetailsModal .detailsSteamPlume::after,
#signatureDetailsModal .detailsSteamPlume::after,
#deluxeDetailsModal .detailsSteamPlume::after{
  width: 38%;
  height: 30%;
  right: 8%;
  top: 18%;
}

#classicDetailsModal .detailsSteamPlume.plume-1,
#signatureDetailsModal .detailsSteamPlume.plume-1,
#deluxeDetailsModal .detailsSteamPlume.plume-1{
  --steamLeft: 10%;
  --steamWidth: 162px;
  --steamHeight: 198px;
  --steamDuration: 8.8s;
  --steamDelay: -2.6s;
  --steamDriftX: -18px;
}

#classicDetailsModal .detailsSteamPlume.plume-2,
#signatureDetailsModal .detailsSteamPlume.plume-2,
#deluxeDetailsModal .detailsSteamPlume.plume-2{
  --steamLeft: 26%;
  --steamWidth: 188px;
  --steamHeight: 222px;
  --steamDuration: 10.4s;
  --steamDelay: -6.3s;
  --steamDriftX: 24px;
}

#classicDetailsModal .detailsSteamPlume.plume-3,
#signatureDetailsModal .detailsSteamPlume.plume-3,
#deluxeDetailsModal .detailsSteamPlume.plume-3{
  --steamLeft: 44%;
  --steamWidth: 208px;
  --steamHeight: 246px;
  --steamDuration: 11.3s;
  --steamDelay: -4.4s;
  --steamDriftX: -10px;
}

#classicDetailsModal .detailsSteamPlume.plume-4,
#signatureDetailsModal .detailsSteamPlume.plume-4,
#deluxeDetailsModal .detailsSteamPlume.plume-4{
  --steamLeft: 61%;
  --steamWidth: 190px;
  --steamHeight: 220px;
  --steamDuration: 9.7s;
  --steamDelay: -8.2s;
  --steamDriftX: 20px;
}

#classicDetailsModal .detailsSteamPlume.plume-5,
#signatureDetailsModal .detailsSteamPlume.plume-5,
#deluxeDetailsModal .detailsSteamPlume.plume-5{
  --steamLeft: 78%;
  --steamWidth: 176px;
  --steamHeight: 206px;
  --steamDuration: 10.8s;
  --steamDelay: -5.5s;
  --steamDriftX: -22px;
}

#classicDetailsModal .detailsSteamPlume.plume-6,
#signatureDetailsModal .detailsSteamPlume.plume-6,
#deluxeDetailsModal .detailsSteamPlume.plume-6{
  --steamLeft: 92%;
  --steamWidth: 154px;
  --steamHeight: 194px;
  --steamDuration: 8.9s;
  --steamDelay: -7.1s;
  --steamDriftX: 16px;
}

#classicDetailsModal .detailsContent,
#signatureDetailsModal .detailsContent,
#deluxeDetailsModal .detailsContent{
  z-index: 2;
}

#classicDetailsModal .detailsContent h3,
#signatureDetailsModal .detailsContent h3,
#deluxeDetailsModal .detailsContent h3,
#classicDetailsModal .detailsItemTitle,
#signatureDetailsModal .detailsItemTitle,
#deluxeDetailsModal .detailsItemTitle,
#classicDetailsModal .detailsItem p,
#signatureDetailsModal .detailsItem p,
#deluxeDetailsModal .detailsItem p,
#classicDetailsModal .detailsBulletList li,
#signatureDetailsModal .detailsBulletList li,
#deluxeDetailsModal .detailsBulletList li,
#classicDetailsModal .detailsNoteBox p,
#signatureDetailsModal .detailsNoteBox p,
#deluxeDetailsModal .detailsNoteBox p{
  text-shadow: 0 1px 2px rgba(0,0,0,0.90), 0 0 16px rgba(0,0,0,0.28);
}

@keyframes detailsSteamCloudPulse{
  0%{
    transform: translateY(0) scale(1);
    opacity: 0.28;
  }
  50%{
    opacity: 0.42;
  }
  100%{
    transform: translateY(-10px) scale(1.06);
    opacity: 0.32;
  }
}

@keyframes detailsSteamRise{
  0%{
    transform: translate3d(-50%, 42px, 0) scale(0.74);
    opacity: 0;
  }
  10%{
    opacity: 0.16;
  }
  28%{
    opacity: 0.34;
  }
  58%{
    opacity: 0.25;
  }
  100%{
    transform: translate3d(calc(-50% + var(--steamDriftX, 0px)), -138px, 0) scale(1.24);
    opacity: 0;
  }
}

@media (max-width: 720px){
  #classicDetailsModal .detailsSteamCloud,
  #signatureDetailsModal .detailsSteamCloud,
  #deluxeDetailsModal .detailsSteamCloud{
    height: 208px;
    filter: blur(18px) saturate(116%);
  }

  #classicDetailsModal .detailsSteamPlume,
  #signatureDetailsModal .detailsSteamPlume,
  #deluxeDetailsModal .detailsSteamPlume{
    top: 52px;
    filter: blur(16px);
  }
}

#dateModal .modalBody{
  position: relative;
  isolation: isolate;
  background-color: #0d0d0d;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)),
    var(--programDetailsWaterBg),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: cover, cover, 420px 630px;
  background-position: center, center, center;
  background-attachment: scroll;
}
#dateModal .modalFooter{
  background:
    linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
    var(--programDetailsWaterBg),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: cover, cover, 420px 630px;
  background-position: center, center, center;
}
#dateModal .modalBody::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10));
  pointer-events: none;
  z-index: 0;
}
#dateModal .dateTopBlock,
#dateModal .dateBottomBlock{
  position: relative;
  z-index: 1;
}
#dateModal .calendar,
#dateModal .dow,
#dateModal .slots{
  background-color: rgba(8, 8, 8, 0.18);
}

.massageInfoList li[data-massage-key]{
  cursor:pointer;
  text-decoration:underline dotted rgba(255,255,255,0.24);
  text-underline-offset:4px;
}
.massageInfoList li[data-massage-key]:hover{
  filter:brightness(1.06);
}
.massageInfoList li[data-massage-key]:focus-visible{
  outline:2px solid rgba(159,200,183,0.58);
  outline-offset:6px;
  border-radius:8px;
}
#massageInfoModal{
  z-index:10018;
}
#massageInfoModal .modal{
  width:min(760px,100%);
  max-height:min(88vh,820px);
  border-radius:18px;
  border:1px solid rgba(159,200,183,0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    radial-gradient(circle at 15% 18%, rgba(159,200,183,0.10), transparent 36%),
    #0b0b0b;
  box-shadow:0 14px 38px rgba(0,0,0,0.42);
}
#massageInfoModal .modalTop{
  background:
    linear-gradient(180deg, rgba(159,200,183,0.16), rgba(5,5,5,0.96)),
    #050505;
  border-bottom:1px solid rgba(159,200,183,0.22);
}
#massageInfoModal .modalTop .title{
  color:#d8efe6;
  font-size:22px;
}
#massageInfoModal .modalBody{
  padding:18px;
  background:
    linear-gradient(rgba(7,7,7,0.76), rgba(7,7,7,0.76)),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat:no-repeat, repeat;
  background-size:auto, 420px 630px;
}
.massageInfoCard{
  border:1px solid rgba(159,200,183,0.16);
  border-radius:18px;
  padding:18px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    linear-gradient(180deg, rgba(159,200,183,0.08), rgba(159,200,183,0.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.18);
}
.massageInfoLead{
  color:#eefaf5;
  font-size:17px;
  line-height:1.9;
  text-align:left;
  white-space:pre-line;
}
[dir="rtl"] .massageInfoLead,
[dir="rtl"] #massageInfoModal .modalTop,
[dir="rtl"] #massageInfoModal .modalBody{
  direction:rtl;
  text-align:right;
}
@media (max-width:720px){
  #massageInfoModal .modal{
    width:100%;
    border-radius:14px;
  }
  #massageInfoModal .modalBody{
    padding:12px;
  }
  .massageInfoCard{
    padding:16px;
    border-radius:14px;
  }
  .massageInfoLead{
    font-size:16px;
    line-height:1.82;
  }
}

.card-massage .massageCompareTrigger{
  width:100%;
  margin:10px 0 16px;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid rgba(159,200,183,0.34);
  background:linear-gradient(180deg, var(--theme1), var(--theme2));
  color:var(--themeBtnText);
  font-weight:900;
  font-size:16px;
  letter-spacing:0.35px;
  cursor:pointer;
  box-shadow:
    0 12px 26px rgba(33,74,61,0.24),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.card-massage .massageCompareTrigger:hover{
  border-color:rgba(159,200,183,0.58);
  box-shadow:
    0 16px 30px rgba(33,74,61,0.28),
    0 0 0 1px rgba(159,200,183,0.08),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.card-massage .massageCompareTrigger:active{
  transform:none;
}
#massageCompareModal{
  --massageCompareTheme1:#93beaf;
  --massageCompareTheme2:#6e9c8d;
  --massageCompareRgb:159,200,183;
  --massageCompareBorder:rgba(78,118,104,0.30);
  --massageCompareShadow:rgba(33,74,61,0.18);
  --massageCompareText:#9fc8b7;
  --massageCompareSoft:#d8efe6;
  --massageCompareBodyText:#eef8f4;
  z-index:10019;
}
#massageCompareModal .modal{
  width:min(1040px,100%);
  height:min(88vh,840px);
  border-radius:22px;
  border:1px solid var(--massageCompareBorder);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    radial-gradient(circle at 15% 18%, rgba(var(--massageCompareRgb),0.16), transparent 36%),
    radial-gradient(circle at 88% 10%, rgba(110,156,141,0.14), transparent 30%),
    #090f0d;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(var(--massageCompareRgb),0.04);
}
#massageCompareModal .modalTop{
  background:
    linear-gradient(180deg, rgba(var(--massageCompareRgb),0.18), rgba(8,12,11,0.96)),
    #050505;
  border-bottom:1px solid rgba(var(--massageCompareRgb),0.18);
}
#massageCompareModal .modalTop .title{
  color:var(--massageCompareSoft);
  letter-spacing:0.2px;
}
#massageCompareModal .modalBody{
  padding:18px;
  background:
    linear-gradient(rgba(7,10,9,0.64), rgba(7,10,9,0.64)),
    radial-gradient(circle at top right, rgba(var(--massageCompareRgb),0.08), transparent 28%),
    url("../../Images/bg-pattern-dark.webp");
  background-repeat:no-repeat, no-repeat, repeat;
  background-size:auto, auto, 420px 630px;
}
.massageCompareIntro{
  margin-bottom:16px;
  text-align:left;
}
.massageCompareLead{
  color:var(--massageCompareBodyText);
  font-size:14px;
  font-weight:700;
  line-height:1.8;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(var(--massageCompareRgb),0.14);
  background:rgba(var(--massageCompareRgb),0.035);
  box-shadow:none;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
.massageCompareTableWrap{
  width:100%;
  overflow:auto;
  border:1px solid rgba(var(--massageCompareRgb),0.14);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.006)),
    rgba(8,12,11,0.12);
  box-shadow:none;
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
.massageCompareTable{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.massageCompareTable th,
.massageCompareTable td{
  padding:16px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
  vertical-align:top;
}
.massageCompareTable th:first-child,
.massageCompareTable td:first-child{
  width:30%;
  padding-right:6px;
}
.massageCompareTable th:last-child,
.massageCompareTable td:last-child{
  width:70%;
  padding-left:6px;
}
.massageCompareTable thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(11,24,20,0.34);
  color:var(--massageCompareSoft);
  font-size:12px;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.massageCompareTable tbody tr{
  background:transparent;
}
.massageCompareTable tbody tr:nth-child(even){
  background:rgba(var(--massageCompareRgb),0.018);
}
.massageCompareTable tbody tr:last-child td{
  border-bottom:none;
}
.massageCompareName{
  color:#89b96a;
  font-size:16px;
  font-weight:900;
  line-height:1.45;
  letter-spacing:0.1px;
  word-break:break-word;
}
#massageCompareModal .massageCompareTable thead th:first-child{
  color:var(--massageCompareSoft);
}
.massageCompareDescription{
  display:block;
  color:var(--massageCompareBodyText);
  font-size:16px;
  line-height:1.8;
  width:100%;
  max-width:28ch;
  text-wrap:pretty;
}
.massageCompareEmpty{
  padding:24px 18px;
  text-align:center;
  color:var(--massageCompareBodyText);
  border:1px dashed rgba(var(--massageCompareRgb),0.20);
  border-radius:18px;
  background:rgba(var(--massageCompareRgb),0.025);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
[dir="rtl"] #massageCompareModal .modalTop,
[dir="rtl"] #massageCompareModal .modalBody,
[dir="rtl"] .massageCompareIntro,
[dir="rtl"] .massageCompareTable th,
[dir="rtl"] .massageCompareTable td{
  direction:rtl;
  text-align:right;
}
@media (max-width:720px){
  #massageCompareModal .modal{
    height:min(92vh,840px);
    border-radius:16px;
  }
  #massageCompareModal .modalBody{
    padding:12px;
  }
  .massageCompareTable{
    min-width:100%;
  }
  .massageCompareTable th,
  .massageCompareTable td{
    padding:14px 10px;
  }
  .massageCompareTable th:first-child,
  .massageCompareTable td:first-child{
    width:28%;
    padding-right:4px;
  }
  .massageCompareTable th:last-child,
  .massageCompareTable td:last-child{
    width:72%;
    padding-left:4px;
  }
  .massageCompareDescription{
    max-width:28ch;
    line-height:1.76;
  }
}

.priceSummaryPaymentBlock{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.priceSummaryPaymentText{
  color:#ffffff;
  font-size:clamp(16px,2.5vw,19px);
  font-weight:900;
  line-height:1.55;
  text-align:center;
  max-width:920px;
  margin:0 auto;
}
.priceSummaryPayIcons.siteFooterPayIcons{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  width:min(100%,560px);
  margin:0 auto;
  justify-content:normal;
}
.priceSummaryPayIcons.siteFooterPayIcons .siteFooterPayChip{
  flex:none;
  max-width:none;
  width:100%;
  aspect-ratio:1.45 / 1;
  border-radius:8px;
}
@media (max-width:720px){
  .priceSummaryPaymentBlock{
    gap:10px;
  }
  .priceSummaryPaymentText{
    font-size:15px;
    line-height:1.5;
  }
  .priceSummaryPayIcons.siteFooterPayIcons{
    width:min(100%,420px);
    gap:6px;
  }
}

.seoQuickLinks {
  max-width: 1140px;
  margin: 8px auto 0;
  padding: 0 20px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.seoQuickLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(200, 171, 79, 0.32);
  background: rgba(255, 255, 255, 0.04);
  color: #f6f2e8;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
}
.seoQuickLink:hover,
.seoQuickLink:focus-visible {
  border-color: rgba(200, 171, 79, 0.58);
  background: rgba(200, 171, 79, 0.12);
  color: #ffffff;
}
.siteFooterCrawlLinks {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.siteFooterCrawlLinks .seoQuickLink {
  font-size: 13px;
}
@media (max-width: 720px) {
  .seoQuickLinks {
    gap: 8px;
    padding: 0 12px 10px;
  }
  .seoQuickLink {
    font-size: 13px;
    padding: 9px 12px;
  }
}

/* Smooth mobile finger scrolling for the Booking Summary ticket */
#summaryModal .modal{
  height:min(94vh, 920px);
  max-height:min(94dvh, 920px);
}

#summaryModal .modalBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  will-change:scroll-position;
  contain:layout paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}

#summaryModal #summaryBox,
#summaryModal .exactConfirmStage,
#summaryModal .exactConfirmCard,
#summaryModal .exactConfirmTable{
  touch-action:pan-y;
}

#summaryModal .exactConfirmStage{
  transform:translateZ(0);
  backface-visibility:hidden;
}

#summaryModal .modalFooter{
  flex:0 0 auto;
}

@media (max-width:720px){
  #summaryModal .modal{
    height:94dvh;
    max-height:94dvh;
  }
  #summaryModal .modalBody{
    padding:6px;
  }
}

/* Date & Time Selection fix for web, laptop, desktop and iPad.
   Android is intentionally excluded by html:not(.is-android-device). */
@media (min-width: 740px) {
  html:not(.is-android-device) #dateModal.overlay {
    align-items: center;
    padding: clamp(8px, 1.6vw, 18px);
    overflow: hidden;
  }
}

/* Standard laptop and iPad landscape height */

/* Short laptop screens and browser windows with a small visible height */
@media (min-width: 740px) and (max-height: 700px) {
  html:not(.is-android-device) #dateModal.overlay {
    padding: 6px;
  }
}

/* iPad Mini / narrow tablet portrait support */

/* =========================================================
   GLOBAL MOBILE COMPATIBILITY SAFE PATCH
   Improves mobile viewport and modal scrolling stability
   without changing the current visual design.
========================================================= */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
}

/* Safe area support for iPhone, modern Android, tablets and foldables */
.overlay {
  padding-top: max(6px, env(safe-area-inset-top));
  padding-right: max(6px, env(safe-area-inset-right));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  padding-left: max(6px, env(safe-area-inset-left));
}

/* Stable modal height across mobile browsers and in-app browsers */

/* Better finger scrolling inside modals */
.modalBody {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* Prevent iPhone input zoom while keeping the visible design stable */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

.contactMethodField{
  text-align:left;
}
.contactMethodGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.contactMethodOption{
  position:relative;
  display:block;
  min-width:0;
}
.contactMethodOption > input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.contactMethodCardText{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  color:#ffffff;
  line-height:1.35;
  transition:none;
  cursor:pointer;
}
.contactMethodChoiceLabel{
  display:block;
  cursor:pointer;
}
.contactMethodCardTitle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:900;
}
.contactMethodCardTitle::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  border:2px solid rgba(200,171,79,0.72);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,0.75);
}
.contactMethodCardHint{
  color:#cfcfcf;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.contactRecommend{
  color:#8bc34a;
  font-size:0.96em;
  font-weight:900;
  margin-left:6px;
  white-space:nowrap;
  text-shadow:0 0 6px rgba(139,195,74,0.28);
}
.contactOptional{
  color:#ffffff;
  font-size:0.92em;
  font-weight:800;
  white-space:nowrap;
  text-shadow:0 0 5px rgba(255,255,255,0.12);
}
[dir="rtl"] .contactRecommend{
  margin-left:0;
  margin-right:6px;
}
.contactMethodInputField.fieldFull{
  margin-top:2px;
  padding:10px;
  border-radius:12px;
  background:rgba(8,8,8,0.46);
  border:1px solid rgba(255,255,255,0.14);
  cursor:auto;
}
.contactMethodInputField *{
  cursor:auto;
}
.contactMethodInputField input{
  min-height:34px;
}
.contactMethodPhoneField .phoneRow{
  gap:10px;
}
.contactMethodPhoneField .countryBox{
  min-width:102px;
  padding:10px;
}
.contactMethodPhoneField .countryBtn{
  font-size:17px;
}
.contactMethodOption > input[type="radio"]:checked + .contactMethodCardText{
  border-color:rgba(200,171,79,0.70);
  background:linear-gradient(180deg, rgba(200,171,79,0.16), rgba(200,171,79,0.06));
  box-shadow:0 0 0 3px rgba(200,171,79,0.10);
}
.contactMethodOption > input[type="radio"]:checked + .contactMethodCardText .contactMethodCardTitle{
  color:#f3df9b;
}
.contactMethodOption > input[type="radio"]:checked + .contactMethodCardText .contactMethodCardTitle::before{
  background:#c8ab4f;
  border-color:#f3df9b;
}
[dir="rtl"] .contactMethodField{
  text-align:right;
}
[dir="rtl"] .contactMethodOption,
[dir="rtl"] .contactMethodCardText{
  direction:rtl;
}
[dir="rtl"] .contactMethodPhoneField .phoneRow{
  direction:ltr;
}
@media (max-width:720px){
  .contactMethodGrid{
    grid-template-columns:1fr;
  }
  .contactMethodCardText{
    min-height:auto;
  }
  .contactMethodCardTitle{
    font-size:17px;
  }
  .contactMethodCardHint{
    font-size:13px;
  }
}
@media (max-width:420px){
  .contactMethodPhoneField .phoneRow{
    align-items:stretch;
  }
  .contactMethodPhoneField .countryBox{
    min-width:96px;
    padding:9px;
  }
}

/* =========================================================
   UNIVERSAL BROWSER + IPAD + DESKTOP COMPATIBILITY PATCH
   Broadens support for Safari, Chrome, Edge, Firefox, iPad,
   desktop screens, in-app browsers and reduced-motion devices.
   This patch is intentionally additive to preserve the design.
========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
}

/* Prevent media and embedded elements from creating side overflow */
img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

/* Keep native form rendering predictable across Safari / Chrome / Edge / Firefox */
button,
input,
select,
textarea {
  font: inherit;
}

/* Better tap behavior on iPad, tablets, touch laptops and mobile browsers */
button,
[role="button"],
.btn,
.sendBtn,
.backBtn,
.iconBtn,
.navBtn,
.slot,
.day,
.countryItem,
.compareTrigger,
.detailsBtn,
.massageCompareTrigger,
.contactMethodCardText,
.faqQuestion,
.faqLuxuryToggle {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* Stable modal height fallback for browsers that handle vh/dvh differently */
.modal {
  max-height: calc((var(--app-vh, 1vh) * 100) - 12px);
}

@supports (height: 100dvh) {
  .modal {
    max-height: calc(100dvh - 12px);
  }
}

/* Extra safe modal scrolling for iPadOS Safari and in-app browsers */
.modalBody,
.slots,
.compareTableWrap,
.massageCompareTableWrap,
#saunaImageModal .modalBody,
#manageBookingModal .modalBody {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

/* iPad / touch-screen laptop target size without changing the visual theme */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .sendBtn,
  .backBtn,
  .detailsBtn,
  .compareTrigger,
  .massageCompareTrigger,
  .contactMethodCardText,
  .faqLuxuryToggle,
  .faqQuestion {
    min-height: 44px;
  }

  .iconBtn,
  .navBtn {
    min-width: 42px;
    min-height: 42px;
  }
}

/* Small browser windows and compact desktop split-screen support */
@media (max-width: 380px) {
  .modalTop .title {
    font-size: clamp(18px, 5.6vw, 22px);
    line-height: 1.2;
  }

  .footerBtns {
    gap: 8px;
  }

  .backBtn,
  .sendBtn,
  #resetBtn {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Classic desktop browser fallback when modern CSS min()/dvh is not fully supported */
@supports not (height: 100dvh) {
  #dateModal .modal,
  #customerModal .modal,
  #summaryModal .modal,
  #compareModal .modal,
  #massageCompareModal .modal,
  #manageBookingModal .modal,
  #saunaImageModal .modal {
    max-height: calc((var(--app-vh, 1vh) * 100) - 12px);
  }
}

/* Safari-specific scroll stability */
@supports (-webkit-touch-callout: none) {
  .modalBody,
  .slots,
  .compareTableWrap,
  .massageCompareTableWrap {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}

/* Respect devices/users that reduce animations; improves old laptops and weak tablets too */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .detailsSteamOverlay,
  .confirmCelebrate {
    display: none !important;
  }
}

/* Windows high-contrast mode safety */
@media (forced-colors: active) {
  .btn,
  .sendBtn,
  .backBtn,
  .detailsBtn,
  .compareTrigger,
  .massageCompareTrigger,
  .contactMethodCardText {
    border: 1px solid ButtonText;
  }
}

/* =========================================================
   TOUCH SENSITIVITY + WHATSAPP SAFE LIFT PATCH
   Improves touch reliability on buttons and raises WhatsApp
   slightly to reduce accidental nearby taps.
========================================================= */

:root{
  --booking-touch-target-min:48px;
  --booking-small-touch-target-min:44px;
}

/* Faster, cleaner tap response on touch screens */
button,
a,
input,
select,
textarea,
[role="button"]{
  -webkit-tap-highlight-color:rgba(200,171,79,0.18);
}

button,
[role="button"],
.btn,
.sendBtn,
.backBtn,
.detailsBtn,
.compareTrigger,
.massageCompareTrigger,
.contactMethodCardText,
.faqLuxuryToggle,
.faqQuestion,
.countryItem,
.spaAudioToggle,
.whatsapp-float{
  touch-action:manipulation;
  -ms-touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}

/* Larger practical tap targets without changing the general design language */
.btn,
.sendBtn,
.backBtn,
#resetBtn,
.detailsBtn,
.compareTrigger,
.massageCompareTrigger,
.manageTicketBtn,
.confirmCloseBtn,
.faqLuxuryToggle,
.faqQuestion{
  min-height:var(--booking-touch-target-min);
}

.iconBtn,
.navBtn,
.guestBtn,
.countryBtn{
  min-width:var(--booking-small-touch-target-min);
  min-height:var(--booking-small-touch-target-min);
}

.countryItem{
  min-height:48px;
}

.contactMethodCardText{
  min-height:124px;
}

/* Improve finger accuracy on real touch devices */
@media (hover:none) and (pointer:coarse){
  .btn,
  .sendBtn,
  .backBtn,
  #resetBtn,
  .detailsBtn,
  .compareTrigger,
  .massageCompareTrigger,
  .manageTicketBtn,
  .confirmCloseBtn,
  .faqLuxuryToggle,
  .faqQuestion,
  .countryItem{
    min-height:50px;
  }

  .iconBtn,
  .navBtn,
  .guestBtn,
  .countryBtn{
    min-width:46px;
    min-height:46px;
  }

  .slot{
    min-height:44px;
  }

  .day{
    min-height:40px;
  }
}

/* Keep WhatsApp in the same side position, only lift it slightly upward */
.whatsapp-float{
  bottom:128px;
}

@media (max-width:720px){
  .whatsapp-float{
    bottom:122px;
  }
}

@media (max-width:420px){
  .whatsapp-float{
    bottom:124px;
  }
}

/* =========================================================
   TIME SLOT POSITION + NUMBER SIZE PATCH
   Moves the time selection boxes slightly upward and enlarges
   the numbers/text inside them without increasing box size.
========================================================= */

:root{
  --booking-time-slot-lift:-7px;
  --booking-time-slot-font-size:clamp(18px, 4.2vw, 24px);
}

#dateModal .slots{

  transform-origin:center top;
}

#dateModal .slot{
  font-size:var(--booking-time-slot-font-size);
  line-height:1;
  font-weight:1000;
}

@media (min-width:740px){
  #dateModal .slot{
    font-size:22px;
  }
}

@media (max-width:720px){
  :root{
    --booking-time-slot-lift:-6px;
    --booking-time-slot-font-size:17px;
  }
}

@media (max-width:420px){
  :root{
    --booking-time-slot-lift:-5px;
    --booking-time-slot-font-size:16.5px;
  }
}

/* New logo sizing lock for Booking Summary preview and final PDF ticket.
   The logo now keeps one clean responsive block and never shows the old text/logo underneath. */
.exactConfirmLogoBar{
  width:100%;
  aspect-ratio:1200 / 341;
  min-height:0;
  height:auto;
  padding:0;
  margin:0 0 22px;
  background:#000000;
  background-image:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  line-height:0;
  position:relative;
  flex:0 0 auto;
}

.exactConfirmLogoBar::before,
.exactConfirmLogoBar::after{
  content:none;
  display:none;
}

.exactConfirmLogoImg{
  display:block;
  position:static;
  inset:auto;
  width:90%;
  max-width:90%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  transform:none;
  transform-origin:center center;
  margin:0;
  padding:0;
  border:0;
  background:#000000;
  flex:0 0 auto;
}

.exactConfirmLogoFallback,
.exactConfirmLogoBar .exactConfirmLogoFallback{
  display:none;
  visibility:hidden;
  opacity:0;
  height:0;
  overflow:hidden;
}

.exactConfirmLogoBar > :not(.exactConfirmLogoImg){
  display:none;
}

#inquiryPreviewCardPdfClone .exactConfirmLogoBar{
  width:100%;
  aspect-ratio:1200 / 341;
  min-height:0;
  height:auto;
  padding:0;
  margin:0 0 22px;
  background:#000000;
  background-image:none;
  overflow:hidden;
  page-break-inside:avoid;
  break-inside:avoid;
}

#inquiryPreviewCardPdfClone .exactConfirmLogoImg{
  position:static;
  inset:auto;
  width:90%;
  max-width:90%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  transform:none;
  transform-origin:center center;
}

/* Final ticket/PDF thank-you line: black regular text, not bold. */
.exactConfirmThankRow td,
.exactConfirmThankRow .exactBilingualLocal,
.exactConfirmThankRow .exactBilingualLocal strong{
  color:#000000;
  font-weight:400;
}

.exactConfirmThankRow .exactBilingualEn,
.exactConfirmThankRow .exactBilingualEn strong{
  font-weight:400;
}

#inquiryPreviewCardPdfClone .exactConfirmThankRow td,
#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualLocal,
#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualLocal strong{
  color:#000000;
  font-weight:400;
}

#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualEn,
#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualEn strong{
  font-weight:400;
}

/* Final ticket/PDF thank-you line: smaller regular black text. */
.exactConfirmThankRow td{
  font-size:0.80em;
  line-height:1.35;
  padding:10px 20px 12px;
}

.exactConfirmThankRow .exactBilingualLocal,
.exactConfirmThankRow .exactBilingualLocal strong{
  font-size:1em;
  line-height:1.35;
}

.exactConfirmThankRow .exactBilingualEn,
.exactConfirmThankRow .exactBilingualEn strong{
  font-size:0.72em;
  line-height:1.28;
}

#inquiryPreviewCardPdfClone .exactConfirmThankRow td{
  font-size:0.80em;
  line-height:1.35;
  padding:10px 20px 12px;
}

#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualLocal,
#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualLocal strong{
  font-size:1em;
  line-height:1.35;
}

#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualEn,
#inquiryPreviewCardPdfClone .exactConfirmThankRow .exactBilingualEn strong{
  font-size:0.72em;
  line-height:1.28;
}

/* Booking Summary/PDF ticket: make the Booking Confirmation title slightly bigger. */
.exactConfirmTitle{
  font-size:26px;
  line-height:1.24;
}

.exactConfirmTitle .exactBilingualLocal{
  font-size:1em;
  line-height:1.24;
}

.exactConfirmTitle .exactBilingualEn{
  font-size:0.82em;
  line-height:1.22;
  margin-top:4px;
}

#inquiryPreviewCardPdfClone .exactConfirmTitle{
  font-size:26px;
  line-height:1.24;
}

#inquiryPreviewCardPdfClone .exactConfirmTitle .exactBilingualLocal{
  font-size:1em;
  line-height:1.24;
}

#inquiryPreviewCardPdfClone .exactConfirmTitle .exactBilingualEn{
  font-size:0.82em;
  line-height:1.22;
  margin-top:4px;
}

@media (max-width:760px){
  .exactConfirmTitle{
    font-size:25px;
  }
  #inquiryPreviewCardPdfClone .exactConfirmTitle{
    font-size:25px;
  }
}

/* Generated PDF only: make the translated reservation-confirmed sentence slightly larger. */
#inquiryPreviewCardPdfClone .exactConfirmMessageText{
  font-size:1.22em;
  line-height:1.36;
}

/* Booking Summary Next button: faster visual response on tap without changing the button size. */
#summaryModal #finalSendBtn{
  -webkit-tap-highlight-color:rgba(200,171,79,0.18);
  touch-action:manipulation;
  contain:paint;
  backface-visibility:hidden;
  transform:translateZ(0);
}
#summaryModal #finalSendBtn.is-processing{

  cursor:wait;
}
#summaryModal #finalSendBtn:disabled{
  opacity:.78;
}

/* =========================================================
   COMPARE PACKAGES MOBILE SCROLL FIX
   Keeps the comparison modal fully scrollable on Android/iPhone
   and prevents floating buttons from covering the bottom rows.
========================================================= */

#compareModal.overlay{
  z-index:30000;
  overflow:hidden;
  align-items:center;
}

#compareModal .modal{
  display:flex;
  flex-direction:column;
  height:min(94dvh, 860px);
  max-height:calc((var(--app-vh, 1vh) * 100) - 12px);
  min-height:0;
}

#compareModal .modalTop{
  flex:0 0 auto;
}

#compareModal .modalBody{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}

#compareModal #compareTableBox{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#compareModal .compareIntro{
  flex:0 0 auto;
}

#compareModal .compareTableWrap{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y;
  scrollbar-gutter:stable both-edges;
  padding-bottom:calc(90px + env(safe-area-inset-bottom));
  scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom));
}

#compareModal .compareTable{
  margin-bottom:calc(70px + env(safe-area-inset-bottom));
}

#compareModal .compareTable thead th{
  top:0;
}

#compareModal .compareQuickBtn{
  margin-bottom:8px;
}

@media (max-width:720px){
  #compareModal.overlay{
    padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  #compareModal .modal{
    width:100%;
    height:min(94dvh, calc((var(--app-vh, 1vh) * 100) - 10px));
    max-height:calc((var(--app-vh, 1vh) * 100) - 10px);
  }

  #compareModal .modalTop{
    padding:10px 12px;
  }

  #compareModal .modalBody{
    padding:10px 8px max(10px, env(safe-area-inset-bottom));
  }

  #compareModal .compareIntro{
    margin-bottom:10px;
  }

  #compareModal .compareLead{
    font-size:14px;
    line-height:1.55;
  }

  #compareModal .compareHint{
    font-size:12.5px;
  }

  #compareModal .compareTableWrap{
    border-radius:16px;
    padding-bottom:calc(112px + env(safe-area-inset-bottom));
    scroll-padding-bottom:calc(132px + env(safe-area-inset-bottom));
  }

  #compareModal .compareTable{
    margin-bottom:calc(92px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   COMPARE MASSAGE MOBILE SCROLL FIX
   Keeps the massage comparison modal fully scrollable on
   Android/iPhone and prevents floating buttons from covering
   the last massage rows.
========================================================= */
body.modal-open .whatsapp-float,
body.modal-open #topArrow,
body.modal-open .spaAudioDock{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#massageCompareModal.overlay{
  z-index:30001;
  overflow:hidden;
  align-items:center;
}

#massageCompareModal .modal{
  display:flex;
  flex-direction:column;
  height:min(94dvh, 840px);
  max-height:calc((var(--app-vh, 1vh) * 100) - 12px);
  min-height:0;
}

#massageCompareModal .modalTop{
  flex:0 0 auto;
}

#massageCompareModal .modalBody{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}

#massageCompareModal #massageCompareTableBox{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#massageCompareModal .massageCompareIntro{
  flex:0 0 auto;
  margin-bottom:12px;
}

#massageCompareModal .massageCompareLead{
  flex:0 0 auto;
}

#massageCompareModal .massageCompareTableWrap{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y;
  scrollbar-gutter:stable both-edges;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  scroll-padding-bottom:calc(126px + env(safe-area-inset-bottom));
}

#massageCompareModal .massageCompareTable{
  margin-bottom:calc(88px + env(safe-area-inset-bottom));
}

#massageCompareModal .massageCompareTable thead th{
  top:0;
}

@media (max-width:720px){
  #massageCompareModal.overlay{
    padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  #massageCompareModal .modal{
    width:100%;
    height:min(94dvh, calc((var(--app-vh, 1vh) * 100) - 10px));
    max-height:calc((var(--app-vh, 1vh) * 100) - 10px);
  }

  #massageCompareModal .modalTop{
    padding:10px 12px;
  }

  #massageCompareModal .modalBody{
    padding:10px 8px max(10px, env(safe-area-inset-bottom));
  }

  #massageCompareModal .massageCompareIntro{
    margin-bottom:10px;
  }

  #massageCompareModal .massageCompareLead{
    font-size:14px;
    line-height:1.55;
  }

  #massageCompareModal .massageCompareTableWrap{
    border-radius:16px;
    padding-bottom:calc(118px + env(safe-area-inset-bottom));
    scroll-padding-bottom:calc(142px + env(safe-area-inset-bottom));
  }

  #massageCompareModal .massageCompareTable{
    margin-bottom:calc(104px + env(safe-area-inset-bottom));
  }
}

/* Final confirmation modal: hide the Close button completely. */