/* Custom site behavior styles (not part of the purchased theme) */

/* Full-screen menu's left column (logo, nav links, close button) is a fixed
   100dvh block with overflow:visible by default — fine while the nav list
   fits, but on a very small screen or a much longer nav it would just clip
   instead of scrolling. overflow-y:auto only shows a scrollbar when this
   column's own content actually needs it (see js/site.js for the page-level
   scroll lock that removes the unrelated, always-there page scrollbar). */
.menuFullScreen__left {
  overflow-y: auto;
}

/* The page ends on the dark footer, but css/main.css sets body's background
   to white. On an elastic/rubber-band overscroll past the bottom (trackpads,
   touch), the browser paints past the document into that white body
   background, flashing a white bar under the dark footer. html's background
   only shows in that overscroll gap — body (and every section's own
   background) is unaffected — so this is a safe, narrowly-scoped fix.
   Darkening body's own background too (instead of just html's) was tried
   and reverted: several pages (e.g. contact.html) have light/cream page
   background showing between sections, not edge-to-edge opaque sections,
   so body's color is genuinely visible in normal rendering, not just
   during overscroll — that turned the whole page dark. html only, again.
   overscroll-behavior-y additionally tells the browser not to rubber-band
   past the document at all (Windows Chrome/Edge with a precision touchpad
   or an inertial-scroll mouse still bounced even with the background fix
   below, since that's a glow/bounce effect rather than exposed background)
   — belt-and-suspenders with the color fix, which still matters for browsers
   that ignore overscroll-behavior. */
html,
body {
  overscroll-behavior-y: none;
}

html {
  background-color: var(--color-accent-1, #122223);
}

/* The theme's .sideImages.-type-1 (used in the "Private Events" section)
   only caps its absolutely-positioned side images to 25.3vw below 1280px
   (css/main.css) — above that it leaves width unconstrained, so an image
   renders at its raw natural pixel width instead of scaling with the
   section. With our photos (1086px/600px wide originals) that swallows the
   centered heading on any wide desktop. Apply the same 25.3vw cap there too. */
@media (min-width: 1280px) {
  .sideImages.-type-1 > * {
    width: 25.3vw;
  }
}

/* The theme gives the two side images z-index:-1 (main.css) so they sit
   behind the section's centered text, but nothing between them and the
   page root establishes a local stacking context — .sideImages.-type-1 and
   its <section> are both position:static/relative with no z-index of their
   own — so that -1 escapes all the way up to the root instead of staying
   scoped to this section. It happened to still look fine while html had no
   background of its own (body's white propagated up to become the page
   canvas, sitting below everything); once html got its own background-color
   (the overscroll white-flash fix above), body's white stopped propagating
   and started painting as a normal box instead, landing in front of the
   escaped z-index:-1 images and hiding them completely.
   `isolation: isolate` gives .sideImages.-type-1 its own stacking context
   without setting `position` on it, so it doesn't touch which ancestor the
   absolutely-positioned images use as their containing block — it only
   keeps z-index:-1 scoped to "behind this section's own content", where it
   was always meant to stay. */
.sideImages.-type-1 {
  isolation: isolate;
}

/* The theme's `object-fit: cover` on .sideImages.-type-1 > * (main.css)
   targets the wrapper <div>, not the <img> inside it — object-fit only
   affects replaced elements, so it's a no-op there, and the image was
   rendering at its own aspect-ratio height (shorter than the box) instead
   of filling it. Target the actual <img>, and oversize it (130% height,
   centered) so js-driven scroll parallax (site.js) has room to translate
   it without ever revealing an edge. */
.sideImages.-type-1 > * img {
  display: block;
  position: relative;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
}

/* Homepage hero: continuous subtle motion (see site.js) — clip the
   slow-zooming background image to the hero's own bounds so it never
   bleeds into the section below. */
.hero.-type-1 .hero__bg {
  overflow: hidden;
}

.hero.-type-1 .hero__bg img {
  will-change: transform;
}

/* The theme has no preloader on this site, and the hero title/subtitle
   have no hidden-by-default state of their own: the raw text sits fully
   visible in the DOM from first paint until the theme's own JS (running
   after document.fonts.ready, at window.onload) wraps it into the
   .split__line markup its reveal animation depends on. On a slow font
   load / hard refresh that gap is long enough to flash the plain text
   before it animates in. Hide it until site.js confirms that markup
   exists (see the matching module there). Applies to the homepage hero
   (.hero.-type-1) and every inner-page hero (.pageHero) alike. */
.hero.-type-1 .hero__content,
.pageHero__content {
  opacity: 0;
}

.hero.-type-1 .hero__content.js-ready,
.pageHero__content.js-ready {
  opacity: 1;
}

.backToTop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #122223;
  border: 2px solid var(--color-accent-2, #F9DABA);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  cursor: pointer;
}

.backToTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.backToTop i {
  color: #fff;
  font-size: 15px;
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .backToTop {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }
}

/* Sticky "book now" CTA — the only real booking form lives in the hero, and
   a long homepage can put many screens between a guest deciding to book and
   that form. Mirrors .backToTop's own show/hide-on-scroll pattern. */
.stickyBook {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 100px;
  background: var(--color-accent-2, #F9DABA);
  color: #122223;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(18, 34, 35, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, box-shadow 0.25s ease;
}

.stickyBook.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.stickyBook:hover {
  box-shadow: 0 14px 34px rgba(18, 34, 35, 0.35);
  transform: translateY(-2px);
  color: #122223;
}

.stickyBook i {
  font-size: 16px;
}

@media (max-width: 768px) {
  .stickyBook {
    left: 16px;
    bottom: 16px;
    padding: 13px 20px;
    font-size: 12px;
  }
}

/* Below that, the label gets cramped next to the icon — drop it and let
   the button shrink to a plain round icon button (min 48px tap target). */
@media (max-width: 480px) {
  .stickyBook {
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
  }

  .stickyBook span {
    display: none;
  }

  .stickyBook i {
    font-size: 20px;
  }
}

/* Language switcher dropdown */
.langSwitch {
  position: relative;
}

.langSwitch__toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.langSwitch__toggle i {
  font-size: 8px;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.langSwitch.is-open .langSwitch__toggle i {
  transform: rotate(180deg);
}

.langSwitch__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 6px;
  min-width: 130px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
}

/* Bridges the gap between the toggle and the dropdown so the hover state
   below doesn't drop out while the cursor crosses it. */
.langSwitch__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.langSwitch.is-open .langSwitch__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .langSwitch:hover .langSwitch__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

.langSwitch__option {
  display: block;
  padding: 10px 14px;
  border-radius: 4px;
  color: #122223;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.langSwitch__option:hover {
  background: #f3f1ec;
}

.langSwitch__option.is-current {
  font-weight: 600;
  color: #9c7a3c;
  cursor: default;
}

.langSwitch__option.is-current:hover {
  background: none;
}

/* Bootstrap's own a:hover (vendors.css) sets a bright blue link color that
   the theme never accounted for, so any plain <a> without its own hover
   color (header social icons, whole-card links like roomCard, inline text
   links in body copy) flashes Bootstrap blue on hover instead of keeping
   its normal color. site.css loads after vendors.css, so this same-
   specificity override wins and restores the intended (no color-shift)
   look everywhere except components that already set their own hover
   color, like .button. */
a:hover {
  color: inherit;
}

/* .menuFullScreen-links a { color: white } (main.css) has the same
   specificity as the a:hover rule above, and this file loads after
   main.css — so on hover, "inherit" was winning and dropping the
   full-screen nav links to near-black (no ancestor sets a color of its
   own for it to inherit) against the menu's photo background. One
   extra class beats it back to white without touching the a:hover
   reset anywhere else. */
.menuFullScreen-links a:hover {
  color: white;
}

/* Full-screen menu nav: white text with a soft shadow for legibility
   against the photo background. Dimmed just enough at rest that the
   hover fade-in (to full opacity) actually reads as a visible change —
   a text-shadow-only glow wasn't noticeable enough on its own. No
   movement, no underline. */
.menuFullScreen-links__item > a {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.menuFullScreen-links__item:hover > a {
  opacity: 1;
}

/* Header social icons */
.headerSocial {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.headerSocial:hover {
  opacity: 1;
}

/* Hero quick-booking: unavailable dates + price estimate */
.elCalendar__sell.-is-disabled {
  cursor: not-allowed;
  opacity: 0.25;
  text-decoration: line-through;
}

.elCalendar__sell.-is-disabled:hover {
  background-color: transparent;
}

.quickBookingPrice {
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-top: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.quickBookingPrice.is-visible {
  opacity: 1;
  visibility: visible;
}

.quickBookingPrice strong {
  color: #e8c77e;
  font-weight: 600;
}

.quickBookingHint {
  display: inline-block;
  background: #fff;
  color: #b3261e;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.quickBookingHint.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The calendar dropdown is relocated to <body> at runtime (see site.js) to
   escape <main>'s overflow:hidden, which otherwise silently clips its lower
   months. It's re-styled here as a fixed, viewport-centered panel with its
   own scroll — the theme's original ".searchForm.-type-1 ..." rules no
   longer match once it's outside that ancestor, so its look is fully
   redefined below rather than partially overridden. */
.searchFormItemDropdown.-calendar {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
}

.searchFormItemDropdown.-calendar.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.searchFormItemDropdown.-calendar .searchFormItemDropdown__container {
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 24px;
  background-color: var(--color-accent-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* Darken the fullscreen menu background so the white nav links stay
   readable regardless of how bright the underlying photo is */
.menuFullScreen__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(8, 16, 16, 0.78) 0%, rgba(8, 16, 16, 0.5) 45%, rgba(8, 16, 16, 0.3) 100%);
}

.menuFullScreen-links a.shadow-black {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 4px 16px rgba(0, 0, 0, 0.85);
}

/* Keep the homepage hero text readable against any photo without
   darkening the photo itself — depth via shadow, not a dark overlay */
.hero.-type-1 .hero__subtitle {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.75),
    0 8px 30px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

.hero.-type-1 .hero__title {
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.7),
    0 14px 50px rgba(0, 0, 0, 0.6);
}

/* Hero quick-booking: modal inquiry form (submitted right on the
   homepage, no hand-off to the Contact page) */
body.quickBookingModal-open {
  overflow: hidden;
}

.quickBookingModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.quickBookingModal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.quickBookingModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 18, 0.65);
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.35s ease;
}

.quickBookingModal.is-active .quickBookingModal__backdrop {
  backdrop-filter: blur(6px);
}

.quickBookingModal__dialog {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 420px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  text-align: left;
  opacity: 0;
  transform: scale(0.9) translateY(18px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.quickBookingModal.is-active .quickBookingModal__dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.quickBookingModal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #122223;
  cursor: pointer;
}

.quickBookingModal__summary {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(18, 34, 35, 0.1);
}

.quickBookingModal__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(18, 34, 35, 0.5);
  margin-bottom: 6px;
}

.quickBookingModal__dates {
  font-size: 19px;
  font-weight: 600;
  color: #122223;
}

.quickBookingModal__price {
  margin-top: 6px;
  font-size: 15px;
  color: #122223;
}

.quickBookingModal__price strong {
  color: #9c7a3c;
}

.quickBookingForm__row {
  display: flex;
  gap: 10px;
}

.quickBookingForm__field {
  width: 100%;
  border: 1px solid rgba(18, 34, 35, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: #122223;
  margin-top: 10px;
}

.quickBookingForm__row .quickBookingForm__field {
  margin-top: 10px;
}

.quickBookingForm__textarea {
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
}

.quickBookingForm__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: #122223;
  cursor: pointer;
}

.quickBookingForm__checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #9c7a3c;
  cursor: pointer;
}

.quickBookingForm__field:focus {
  outline: none;
  border-color: #9c7a3c;
}

.quickBookingForm__field::placeholder {
  color: rgba(18, 34, 35, 0.45);
}

.quickBookingForm__field.-invalid {
  border-color: #c0392b;
}

.quickBookingForm__field.-invalid:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.quickBookingForm__error {
  color: #c0392b;
  font-size: 13px;
  margin-top: 10px;
  min-height: 0;
}

.quickBookingForm__error:empty {
  margin-top: 0;
}

.quickBookingForm__submit {
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: none;
  border-radius: 200px;
  background: var(--color-accent-2, #9c7a3c);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(156, 122, 60, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.quickBookingForm__submit:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(156, 122, 60, 0.45);
}

.quickBookingForm__submit:not(:disabled):active {
  transform: translateY(0);
}

.quickBookingForm__submit:disabled {
  background: rgba(18, 34, 35, 0.12);
  color: rgba(18, 34, 35, 0.4);
  box-shadow: none;
  cursor: not-allowed;
}

.quickBookingForm__success {
  color: #122223;
  font-size: 14px;
  line-height: 1.5;
  animation: quickBookingSuccessIn 0.4s ease;
}

@keyframes quickBookingSuccessIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Amenities section: animated category tabs */
.amenities__widget {
  max-width: 900px;
  margin: 0 auto;
}

.amenities__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px;
  background: var(--color-light-1, #F8F5F0);
  border: 1px solid rgba(18, 34, 35, 0.08);
  border-radius: 100px;
}

.amenities__tabIndicator {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 0;
  height: calc(100% - 12px);
  border-radius: 100px;
  background: linear-gradient(135deg, #e8c77e, #9c7a3c);
  box-shadow: 0 6px 16px rgba(156, 122, 60, 0.35);
  pointer-events: none;
  z-index: 0;
}

.amenities__tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(18, 34, 35, 0.55);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease;
}

.amenities__tab:hover {
  color: #122223;
}

.amenities__tab.is-active {
  color: #3a2c10;
}

.amenities__tabIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.amenities__tabIcon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 575px) {
  .amenities__tabLabel {
    display: none;
  }

  .amenities__tab {
    padding: 12px;
  }
}

.amenities__progress {
  width: 220px;
  max-width: 60%;
  height: 3px;
  margin: 18px auto 0;
  background: rgba(18, 34, 35, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.amenities__progressFill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9c7a3c, #e8c77e);
  border-radius: 3px;
}

.amenities__panels {
  display: grid;
  margin-top: 40px;
}

.amenities__panel {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  pointer-events: none;
}

.amenities__panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.amenities__itemsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.amenities__itemsGrid.-cols3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .amenities__itemsGrid,
  .amenities__itemsGrid.-cols3 {
    grid-template-columns: 1fr;
  }
}

.amenityItem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(18, 34, 35, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.amenityItem:hover {
  transform: translateY(-3px);
  border-color: rgba(156, 122, 60, 0.35);
  box-shadow: 0 14px 26px rgba(18, 34, 35, 0.08);
}

.amenityItem__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-light-1, #F8F5F0);
  color: #122223;
  font-size: 17px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.amenityItem__icon svg {
  width: 19px;
  height: 19px;
}

.amenityItem:hover .amenityItem__icon {
  background: #9c7a3c;
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}

.amenityItem__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #122223;
}

.amenityItem__desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(18, 34, 35, 0.6);
}

/* "Najpopularnije" ribbon on the Ponuda room cards: reuses the amenities
   panel's shimmering gold badge look (.amenityItem__badge) rather than a
   new style, just adds the absolute positioning it needs sitting over a
   card photo instead of inline next to text. */
.roomCard__ribbon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
}

.amenityItem__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3a2c10;
  background: linear-gradient(110deg, #e8c77e, #9c7a3c, #e8c77e);
  background-size: 250% 100%;
  animation: amenityBadgeShimmer 3.5s linear infinite;
}

@keyframes amenityBadgeShimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 250% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amenityItem__badge {
    animation: none;
  }
}

/* Instagram section: bento photo grid replacing the native IG embeds
   (slow to load, unstyled until embed.js runs, and pinned to specific
   post IDs that go stale). Real property photos, always-visible, with
   a hover reveal instead. */
.instaGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 160px);
  grid-template-areas:
    "feature feature b c"
    "feature feature d e"
    "feature feature f f";
  gap: 16px;
}

.instaGrid__item {
  border-radius: 18px;
  overflow: hidden;
}

.instaGrid__item.-feature {
  grid-area: feature;
}

.instaGrid__item:nth-child(2) {
  grid-area: b;
}

.instaGrid__item:nth-child(3) {
  grid-area: c;
}

.instaGrid__item:nth-child(4) {
  grid-area: d;
}

.instaGrid__item:nth-child(5) {
  grid-area: e;
}

.instaGrid__item.-wide {
  grid-area: f;
}

@media (max-width: 991px) {
  .instaGrid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 260px repeat(2, 160px) 160px;
    grid-template-areas:
      "feature feature"
      "b c"
      "d e"
      "f f";
    gap: 12px;
  }
}

@media (max-width: 575px) {
  .instaGrid {
    grid-template-columns: 1fr;
    grid-template-rows: 280px repeat(5, 220px);
    grid-template-areas:
      "feature"
      "b"
      "c"
      "d"
      "e"
      "f";
  }
}

.instaGrid__itemLink {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.instaGrid__itemLink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.instaGrid__itemLink:hover img {
  transform: scale(1.08);
}

.instaGrid__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(18, 34, 35, 0) 45%, rgba(18, 34, 35, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.instaGrid__itemLink:hover .instaGrid__overlay {
  opacity: 1;
}

.instaGrid__overlayIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(18, 34, 35, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 20px;
  transform: translateY(8px);
  transition: transform 0.35s ease;
}

.instaGrid__itemLink:hover .instaGrid__overlayIcon {
  transform: translateY(0);
}

/* Footer newsletter form status feedback (see site.js) */
.footer__newsletterStatus {
  min-height: 18px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.footer__newsletterStatus.-success {
  color: #e8c77e;
}

.footer__newsletterStatus.-error {
  color: #e08a7a;
}

.footer__newsletter input:disabled,
.footer__newsletter button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Testimonials: give the plain quote slider a designed card treatment
   (stars, avatar monogram) matching the rest of the homepage. */
.testimonialCard {
  background: #fff;
  border-radius: 24px;
  padding: 60px 50px;
  box-shadow: 0 20px 50px rgba(18, 34, 35, 0.06);
}

@media (max-width: 767px) {
  .testimonialCard {
    padding: 40px 24px;
  }
}

.testimonialCard__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
}

.testimonialCard__stars svg {
  width: 18px;
  height: 18px;
  fill: #9c7a3c;
}

.testimonialCard__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(18, 34, 35, 0.08);
}

.testimonialCard__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9c7a3c, #e8c77e);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.testimonialCard__authorName {
  font-size: 15px;
  color: #122223;
  font-weight: 500;
}

/* Homepage "Activities" cards: the ATV/off-road photos are cool, overcast
   and grey next to the warm golden-hour tone the rest of the page leans on
   (jacuzzi, living room, kitchen). A subtle warm grade nudges them into the
   same palette without needing new photography. */
.-warm-grade {
  filter: sepia(0.22) saturate(1.25) brightness(1.04) hue-rotate(-6deg);
}

/* Homepage room slider "Terasa sa đakuzijem": the theme's default
   object-fit: cover (.img-ratio, main.css) crops from dead-center, which
   cut the tub off at the bottom of this wide 76:62 card and left mostly
   greenery on top. Shift the crop window down so the whole tub shows. */
.-obj-pos-tub {
  object-position: center 80%;
}

/* Spa page CTA ("Vaš mir vas čeka"): darkens a photo CTA background so the
   white headline stays legible, opt-in per section via this modifier. */
.cta.-type-1.-dark-overlay .cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 16, 0.45);
}

/* Same CTA: the jacuzzi sits low in this photo, and the section's fixed
   height crops it centered by default (main.css) — shift the visible
   window down so the whole tub stays in frame. */
.-obj-pos-low {
  object-position: center 75%;
}

/* Inner-page heroes (.pageHero, every page except the homepage): match the
   homepage hero's text-shadow treatment (site.css .hero.-type-1) so the
   title/subtitle stay readable over any photo without darkening it. */
.pageHero__subtitle {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.75),
    0 8px 30px rgba(0, 0, 0, 0.6);
}

.pageHero__title {
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.7),
    0 14px 50px rgba(0, 0, 0, 0.6);
}

.pageHero__text {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.75),
    0 8px 30px rgba(0, 0, 0, 0.6);
}

/* Every hero photo sitewide (homepage .hero__bg and every inner-page
   .pageHero__bg) — a light black overlay on top of the image only (not the
   whole section), so the title stays readable without relying on
   text-shadow alone. A real element, not ::after: the container's own
   ::after is already the theme's "cover-white" reveal curtain (main.css,
   animates scaleX 1->0 on load), so reusing it made our tint vanish along
   with that animation. z-index 21 keeps it above that curtain (z-index 20)
   too, so it isn't hidden by it while the reveal is mid-flight. */
.pageHero__bg__dim {
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}

/* Scroll-down arrow for inner-page heroes, same bottom-right placement and
   click-to-#secondSection behavior as the homepage hero (site.js). */
.pageHero__arrow {
  position: absolute;
  bottom: 60px;
  right: 60px;
  z-index: 1;
}

@media (max-width: 767px) {
  .pageHero__arrow {
    display: none;
  }
}

/* Spa page "Masaža, direktno kod vas": makes the concierge angle (someone
   comes to you, you don't go anywhere) visible, not just stated in copy —
   a framed, shadowed photo with a service callout overlaid on it, plus
   check-mark bullets instead of plain dots. */
.massagePhoto__frame {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(8, 16, 16, 0.35);
}

.massagePhoto__badge {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: 0 16px 30px -12px rgba(8, 16, 16, 0.3);
}

.massagePhoto__badgeIcon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-light-1);
  color: var(--color-accent-1);
  font-size: 18px;
}

.massagePhoto__badgeTitle {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-accent-1);
  line-height: 1.3;
}

.massagePhoto__badgeText {
  font-size: 13px;
  color: rgba(18, 34, 35, 0.6);
  margin-top: 2px;
}

@media (max-width: 575px) {
  .massagePhoto__badge {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 16px;
  }

  .massagePhoto__badgeIcon {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}

.massageCheck {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-2);
  color: var(--color-accent-1);
  font-size: 9px;
  margin-right: 12px;
}

/* Contact form "Pitajte nas" / "Rezervacija" toggle: a segmented pill
   control switching between the two independent forms in .contactCard. */
.contactToggle {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: #fff;
  border-radius: 100px;
  margin-bottom: 40px;
}

.contactToggle__btn {
  padding: 12px 24px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--color-accent-1);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.contactToggle__btn.is-active {
  background: var(--color-accent-2);
}

/* Contact form labels (main.css) sit inside the empty input and only lift
   on :focus/has-value — a floating label that doubles as the placeholder
   while empty. That collides head-on with real placeholder examples (added
   below): both render on the same line while the field is empty and
   unfocused, reading as garbled overlapping text. Keep the label
   permanently in its lifted position instead, so it behaves like an
   ordinary static label above the field and the placeholder has the input
   box to itself. (.is-filled below is now belt-and-suspenders — main.css's
   own :focus/:not(:placeholder-shown) already lifts it the same amount,
   this just also covers date/number inputs.) */
.contactForm .form-input label {
  transform: translateY(-29px);
}

/* Booking-tab date-range field: a clickable trigger styled to match the
   real <input> boxes around it (same height/border/padding), opening the
   homepage's own .searchFormItemDropdown.-calendar (already a fixed,
   viewport-centered panel — reused as-is, see site.js for the matching
   JS). Not a real input, so it sits in a .form-input the same way the
   others do purely to inherit the same label treatment above. */
.cfDateField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 20px;
  border: 1px solid var(--color-border, #ddd);
  background-color: #fff;
  font-size: 17px;
  color: var(--color-accent-1);
  cursor: pointer;
}

.cfDateField .icon-arrow-down {
  font-size: 10px;
  opacity: 0.6;
  flex-shrink: 0;
  margin-left: 10px;
}

.cfPrice {
  font-size: 14px;
  color: var(--color-accent-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.cfPrice.is-visible {
  opacity: 1;
  visibility: visible;
}

.cfPrice strong {
  color: #9c7a3c;
  font-weight: 600;
}

/* Room cards ("A House – Vaš privatni prostor" and the full offers list):
   a slow, restrained zoom on the photo behind the existing "Rezervišite"
   hover button, instead of the photo just sitting static. .roomCard__image
   already has overflow:hidden (.ratio, main.css) so the zoom stays clipped
   to the card. */
.roomCard.-type-1 .roomCard__image .img-ratio {
  transition: transform 0.7s ease;
}

.roomCard.-type-1:hover .roomCard__image .img-ratio {
  transform: scale(1.06);
}

/* Contact page redesign: a clickable phone/email/viber/location list next
   to the form, standing in for a plain list of bare links. */
.contactInfo__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border, #ddd);
  color: var(--color-accent-1);
}

.contactInfo__item:last-child {
  border-bottom: none;
}

.contactInfo__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-light-1);
  color: var(--color-accent-1);
  font-size: 18px;
  transition: background-color 0.25s ease;
}

.contactInfo__item:hover .contactInfo__icon {
  background-color: var(--color-accent-2);
}

.contactInfo__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(18, 34, 35, 0.55);
}

.contactInfo__value {
  font-size: 17px;
  font-weight: 500;
  margin-top: 2px;
}

/* The form itself (.contactForm, main.css) always keeps white inputs
   regardless of what it sits on, so a warm card behind it reads as a
   distinct, elevated module rather than fields floating on the page. */
.contactCard {
  background: var(--color-light-1);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 30px 60px -25px rgba(8, 16, 16, 0.18);
}

@media (max-width: 575px) {
  .contactCard {
    padding: 30px 20px;
  }
}

/* Embedded "how to find us" map — framed to match the rest of the site's
   photo treatment (rounded corners + soft shadow) instead of the iframe's
   own square, borderless default look. */
.contactMap {
  position: relative;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(8, 16, 16, 0.25);
}

.contactMap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 575px) {
  .contactMap {
    height: 320px;
  }
}

/* "Otvorite u Google Maps" / "Open in Google Maps": a proper pill CTA
   instead of the bare-text .button.-type-1, with a map-pin icon and a
   hover that swaps to the site's other accent (dark <-> peach). */
.mapButton {
  height: 55px;
  padding: 0 30px;
  gap: 12px;
  border-radius: 100px;
  background-color: var(--color-accent-1);
  color: #fff;
}

.mapButton i {
  font-size: 16px;
}

.mapButton:hover {
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(8, 16, 16, 0.2);
}