:root {
  --current-max-width: 113.5rem;

  --max-width: 94.5rem;
  --max-width-content: min(calc(100dvw - var(--max-width-spacing)), 74.75rem);
  --max-width-text-block: 49.5rem;
  --current-mobile-site-header-height: 52.41px;
  --max-width-navigation: 89.5rem;

  --max-width-single-spacing: var(--Layout-Mobile-Margin-Margin-min);
  --max-width-spacing: calc(var(--Space-x2) * 2);
  --max-width-page: min(
    calc(100dvw - var(--max-width-spacing)),
    var(--max-width-navigation)
  );

  --sitewide-alert-height: 0px; /* Will be overridden when a sitewide alert is visible */
  --sitewide-alert-sticky-height: 0px; /* Will be overridden when a sticky sitewide alert is visible */
  --campaign-banner-height: 0px; /* Will be overridden when a campaign banner is visible */
  --alert-and-banner-height: calc(
    var(--sitewide-alert-height) + var(--campaign-banner-height)
  );
  --main-menu-mobile-height: 73px;
  --main-menu-desktop-height: 125px;
  --booking-widget-mobile-height: 75px;
  --booking-widget-tablet-height: 150px;
  --booking-widget-desktop-height: 77px;
  --hotel-page-map-desktop-width: 23.75rem;

  /* Z-INDEX */
  --header-z-index: 11;
  --menu-overlay-z-index: 11;
  --booking-widget-z-index: 10;
  --booking-widget-open-z-index: 100;
  --dialog-z-index: 9;
  --back-to-top-button: 80;
  --language-switcher-z-index: 85;
  --sidepeek-z-index: 100;
  --chatbot-z-index: 149;
  --lightbox-z-index: 150;
  --default-modal-overlay-z-index: 100;
  --default-modal-z-index: 101;

  --modal-box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  --popup-box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);

  @supports (interpolate-size: allow-keywords) {
    interpolate-size: allow-keywords;
  }
}

html,
body {
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  color: var(--Text-Default);
}

body.overflow-hidden {
  overflow: hidden;
}

/* From Tailwind */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

#kindly-chat-api {
  z-index: var(--chatbot-z-index);
}

/* Hide chat widget when booking widget is open */
body:has([data-booking-widget-open="true"]) #kindly-chat-api {
  z-index: -1 !important;
}

/* When a select in the booking widget is open, react-aria sets overflow:hidden
   which breaks sticky positioning. Override with clip which doesn't break sticky. */
body:has([data-booking-widget-open] [data-open]) {
  overflow: clip !important;
}

@media screen and (min-width: 768px) {
  :root {
    --max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min);
    --max-width-spacing: calc(var(--Space-x3) * 2);
  }

  body.overflow-hidden {
    overflow: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 1367px) {
  :root {
    --max-width-single-spacing: var(--Layout-Desktop-Margin-Margin-min);
    --max-width-spacing: calc(var(--Space-x5) * 2);
  }
}