/* Gate the whole page behind a loading state until white-camel-property-
   content.js has settled — success or failure — instead of letting the
   browser paint the donor template's own placeholder text for a beat before
   JS swaps it. [data-property-content] is absent only during that initial
   window; the "lodgify"/"fallback" values it's set to afterward both count
   as done, so a fetch failure still reveals the page (just without the
   specific text the other stylesheet keeps hidden) rather than hanging on
   the spinner forever. A pure-CSS timeout is the backstop for the rare case
   the script itself never runs at all (blocked, errors before hydrate()). */
html:not([data-property-content]) body {
  visibility: hidden;
  animation: wc-reveal-timeout 0s 8s forwards;
}
@keyframes wc-reveal-timeout {
  to { visibility: visible; }
}
html:not([data-property-content])::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(0, 0, 0, .1);
  border-top-color: #fecf43;
  border-radius: 50%;
  animation: wc-spin .75s linear infinite, wc-reveal-timeout 0s 8s forwards;
}
@keyframes wc-spin {
  to { transform: rotate(360deg); }
}

.wc-lodgify-description {
  max-width: 58rem;
  font-size: clamp(1.45rem, 2.25vw, 2.5rem) !important;
  line-height: 1.28 !important;
}

/* The imported Webflow donor has unrelated sales facts ("Commercial" and
   "For Sale"). The booking facts row is the only one backed by Lodgify. */
.project-overview-content > .project-overview-info:not(:has(> .info-tag)) {
  display: none !important;
}

.wc-property-details {
  width: 100%;
  margin-top: 0;
  border-bottom: 1px solid #dedede;
}
.wc-property-amenities { padding: 1.75rem 0 2rem; }
.wc-property-amenities h3 { margin: 0 0 1.15rem; font-size: 1.2rem; line-height: 1.2; }
.wc-property-amenities ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-property-amenities li {
  position: relative;
  min-width: 0;
  padding-left: 1.15rem;
  color: #444;
  font-size: .92rem;
  line-height: 1.4;
}
.wc-property-amenities li::before {
  content: "";
  position: absolute;
  top: .52em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d4f8b;
}
.wc-show-amenities {
  min-height: 48px;
  margin-top: 1.5rem;
  padding: .75rem 1.25rem;
  border: 1px solid #171717;
  border-radius: 4px;
  color: #171717;
  background: #fff;
  font: 600 .9rem/1.2 Onest, Arial, sans-serif;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.wc-show-amenities:hover { color: #fff; background: #171717; }

body.wc-amenities-open { overflow: hidden; }
.wc-amenities-modal[hidden] { display: none; }
.wc-amenities-modal { position: fixed; inset: 0; z-index: 21000; }
.wc-amenities-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 16, 20, .62); }
.wc-amenities-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(760px, calc(100% - 32px));
  max-height: min(760px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}
.wc-amenities-modal__panel > header {
  display: flex;
  min-height: 76px;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e2e2;
}
.wc-amenities-modal__panel h2 { margin: 0; font-size: 1.5rem; }
.wc-amenities-modal__panel header button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: #171717;
  background: #f3f3f3;
  font: 400 1.5rem/1 Arial, sans-serif;
  cursor: pointer;
}
.wc-amenities-modal__content {
  display: grid;
  padding: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wc-amenities-modal__content h3 { margin: 0 0 .8rem; font-size: 1rem; }
.wc-amenities-modal__content ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.wc-amenities-modal__content li { color: #4b4b4b; font-size: .92rem; }

body.wc-property-gallery-open { overflow: hidden; }
.wc-property-gallery[hidden] { display: none; }
.wc-property-gallery {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 112px;
  background: rgba(8, 16, 20, .96);
}
.wc-property-gallery__header {
  z-index: 2;
  display: flex;
  height: 72px;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: rgba(8, 16, 20, .96);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.wc-property-gallery__header strong { font-size: 1rem; font-weight: 600; }
.wc-property-gallery__viewer {
  display: grid;
  min-height: 0;
  padding: 18px 24px 10px;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 16px;
}
.wc-property-gallery__stage {
  display: grid;
  min-width: 0;
  height: 100%;
  max-width: min(1320px, 100%);
  margin: 0 auto;
  grid-template-rows: minmax(0, 1fr) 26px;
  justify-self: stretch;
}
.wc-property-gallery__stage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #111a1f;
  object-fit: contain;
}
.wc-property-gallery__stage figcaption {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  font-size: .8rem;
}
.wc-property-gallery__thumbs {
  display: flex;
  min-width: 0;
  padding: 10px max(24px, calc((100vw - 1320px) / 2));
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.wc-property-gallery__thumb {
  flex: 0 0 112px;
  height: 78px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent !important;
  border-radius: 4px;
  opacity: .58;
  transition: border-color .2s ease, opacity .2s ease;
}
.wc-property-gallery__thumb:hover,
.wc-property-gallery__thumb:focus-visible { opacity: .9; }
.wc-property-gallery__thumb.is-active { border-color: #ffc400 !important; opacity: 1; }
.wc-property-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wc-property-gallery button { border: 0; color: #171717; background: #fff; cursor: pointer; }
.wc-property-gallery__close { display: grid; width: 42px; height: 42px; padding: 0; border-radius: 50%; place-items: center; font: 400 1.6rem/1 Arial, sans-serif; }
.wc-property-gallery__arrow {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0 0 4px;
  border-radius: 50%;
  place-items: center;
  font: 300 2.35rem/1 Arial, sans-serif;
  transition: color .2s ease, background-color .2s ease;
}
.wc-property-gallery__arrow:hover { color: #fff; background: #ffc400; }
.wc-property-gallery button:focus-visible { outline: 3px solid #ffc400; outline-offset: 3px; }

/* white-camel-property-content.js overwrites this text with the real
   Lodgify listing and marks documentElement[data-property-content="lodgify"]
   once it succeeds. Until then — or on failure — the static donor
   template's own baked-in text is what's sitting there: for an
   auto-discovered property that's a completely different listing's name
   and description, not just filler copy. Hide the text (not the photos,
   which are usually already right) so nothing wrong is ever shown, even
   briefly, rather than flashing the wrong content before the real one
   swaps in. */
html:not([data-property-content="lodgify"]) .section-banner h1,
html:not([data-property-content="lodgify"]) .section-banner .hero-desc,
html:not([data-property-content="lodgify"]) .section-banner .project-address h2,
html:not([data-property-content="lodgify"]) .project-overview-heading .project-desc h2 {
  visibility: hidden;
}

@media (max-width: 767px) {
  .wc-lodgify-description { font-size: 1.35rem !important; }
  .wc-property-amenities { padding: 1.25rem 0 1.5rem; }
  .wc-property-amenities ul { grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
  .wc-amenities-modal__panel { inset: 0; width: 100%; max-height: none; transform: none; border-radius: 0; }
  .wc-amenities-modal__panel > header { min-height: 68px; padding: 0 16px; }
  .wc-amenities-modal__content { grid-template-columns: 1fr; gap: 1.75rem; padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); }
  .wc-property-gallery { grid-template-rows: 64px minmax(0, 1fr) 92px; }
  .wc-property-gallery__header { height: 64px; padding-inline: 16px; }
  .wc-property-gallery__viewer { position: relative; padding: 10px 8px 4px; grid-template-columns: minmax(0, 1fr); }
  .wc-property-gallery__stage { width: 100%; }
  .wc-property-gallery__arrow { position: absolute; z-index: 1; width: 44px; height: 44px; background: rgba(255,255,255,.92); }
  .wc-property-gallery__arrow--previous { left: 14px; }
  .wc-property-gallery__arrow--next { right: 14px; }
  .wc-property-gallery__thumbs { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .wc-property-gallery__thumb { flex-basis: 92px; height: 64px; }
}