/* Site-specific additions for the static build (replaces React runtime behaviour). */

[hidden] { display: none !important; }
html { font-size: 16px; }
html.bigfont { font-size: 22px; }

/* AOS fallback: without JS keep content visible */
html.no-js [data-aos] { opacity: 1 !important; transform: none !important; }


/* ---------------------------------------------------------------- utilities
   Replacements for the inline style="" attributes the original template used. */

/* hide alt text while an image is still loading */
.text-transparent { color: transparent; }

/* padding-bottom aspect boxes (w:h) – the image inside is absolutely positioned */
.ratio-1x1   { padding-bottom: 100%; }
.ratio-16x9  { padding-bottom: 56.25%; }
.ratio-4x3   { padding-bottom: 75%; }
.ratio-3x4   { padding-bottom: 133.3333%; }
.ratio-3x5   { padding-bottom: 166.6667%; }
.ratio-9x16  { padding-bottom: 177.7778%; }
.ratio-8x13  { padding-bottom: 162.5%; }
.ratio-11x3  { padding-bottom: 27.2727%; }
.ratio-logo  { padding-bottom: 28.14%; }

.w-28   { width: 7rem; }
.w-30vw { width: 30vw; }

/* mobile menu: prevent body scroll while open */
body.menu-open { overflow: hidden; }

/* carousel: containers are moved by main.js via transform; slides get a
   no-op transform so they form their own containing block, as in the original */
.embla__container,
.overview_hotelRoom_embla__container,
.embla-thumbs__container { transform: translate3d(0, 0, 0); transition: transform .45s cubic-bezier(.25, .8, .25, 1); }
.embla__slide,
.overview_hotelRoom_embla__slide { transform: translate3d(0, 0, 0); }
.embla__container.no-transition,
.overview_hotelRoom_embla__container.no-transition { transition: none; }

/* language dropdown */
[data-lang-menu] a:hover { color: rgb(var(--color-highlight-active-accessibility)); }

/* ---------------------------------------------------------------- lightbox */
.lb-portal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: #000000e6;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.lb-portal.is-open { opacity: 1; pointer-events: auto; }
body.lb-open { overflow: hidden; }
.lb-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; padding: 2.5rem;
}
.lb-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--rounded-default); object-fit: contain;
  min-height: 0; flex: 0 1 auto;
}
.lb-caption {
  color: rgb(var(--color-text-inverted));
  font-family: var(--d1-fonts-micro-font-family);
  font-size: var(--d1-fonts-micro-font-size);
  line-height: var(--d1-fonts-micro-line-height);
  text-align: center; flex: none; min-height: 1.5em;
}
.lb-btn {
  position: absolute; z-index: 10; cursor: pointer; border: 0; padding: 0;
  width: 4rem; height: 4rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.lb-close {
  top: 1.75rem; right: 1.75rem;
  background: rgb(var(--color-white) / var(--opacity-btn-gallery-close-bg));
  color: rgb(var(--color-icon-close));
}
.lb-close:hover { background: rgb(var(--btn-arrow-gallery-bg-hover) / var(--opacity-btn-arrow-gallery-bg-hover)); }
.lb-prev, .lb-next {
  top: 50%; transform: translateY(-50%);
  background: rgb(var(--btn-arrow-gallery-bg) / var(--opacity-btn-arrow-gallery-bg));
}
.lb-prev { left: 2.5rem; }
.lb-next { right: 2.5rem; }
.lb-prev:hover, .lb-next:hover { background: rgb(var(--btn-arrow-gallery-bg-hover) / var(--opacity-btn-arrow-gallery-bg-hover)); }
.lb-prev[disabled], .lb-next[disabled] { opacity: .35; cursor: default; }
@media (min-width: 768px) {
  .lb-prev { left: 4rem; }
  .lb-next { right: 4rem; }
}
.lb-thumbs {
  flex: none; display: flex; justify-content: center; gap: 8px;
  padding: 0 16px 1.5rem; overflow-x: auto; scrollbar-width: none;
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: none; width: 3.5rem; height: 3rem; padding: 0; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; overflow: hidden; opacity: .55; transition: opacity .2s;
}
@media (min-width: 768px) { .lb-thumb { width: 8rem; height: 7rem; } }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.lb-thumb.is-active, .lb-thumb:hover { opacity: 1; }
@media (max-width: 767px) {
  .lb-stage { padding: 4.5rem 1rem 1rem; }
  .lb-btn { width: 3rem; height: 3rem; }
  .lb-close { top: 1rem; right: 1rem; }
  .lb-prev { left: .75rem; } .lb-next { right: .75rem; }
}

/* ---------------------------------------------------------------- booking bar */
[data-booking-bar] .bb-popup { transition: opacity .15s ease; }
[data-booking-bar] .bb-popup.invisible { opacity: 0; pointer-events: none; }
[data-booking-bar] .bb-popup.visible { opacity: 1; pointer-events: auto; }
[data-booking-bar] .bb-in-range { background: rgb(var(--btn-primary-bg) / .2); }

/* header logo: light pill so the colour logo reads on any hero photo */
.logo-pill { display: inline-flex; align-items: center; background: rgb(255 255 255 / .9); border-radius: 9999px; padding: .45rem 1rem; backdrop-filter: blur(12px); }
.highcontrast .logo-pill { background: #fff; }