/* Vacayum theme. All classes are prefixed vy- so they never clash with GoTrip on pages that still load it. */
:root {
  --vy-ground: #F4F6F5;
  --vy-surface: #FFFFFF;
  --vy-ink: #10262B;
  --vy-muted: #5A6B6E;
  --vy-line: #DCE3E1;
  --vy-accent: #D93A00;
  --vy-accent-hover: #B83100;
  --vy-accent-soft: #FFE9DF;
  --vy-sea: #0B6E74;
  --vy-shadow: 0 18px 40px -18px rgba(16, 38, 43, .35);
  --vy-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --vy-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --vy-radius: 18px;
  --vy-gutter: clamp(16px, 4vw, 40px);
  --vy-max: 1240px;
  --vy-header-h: 72px;
}

.vy [hidden], .vy-header [hidden], .vy-footer [hidden] { display: none !important; }

/* ---------- base (lean pages only; GoTrip pages keep their own base) ---------- */
body.vy:not(.vy--legacy) {
  margin: 0;
  background: var(--vy-ground);
  color: var(--vy-ink);
  font-family: var(--vy-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.vy:not(.vy--legacy) *, body.vy:not(.vy--legacy) *::before, body.vy:not(.vy--legacy) *::after { box-sizing: border-box; }
body.vy:not(.vy--legacy) img { max-width: 100%; display: block; }
body.vy:not(.vy--legacy) a { color: inherit; text-decoration: none; }
body.vy:not(.vy--legacy) p { margin: 0; }
.vy h1, .vy h2, .vy h3 { font-family: var(--vy-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance; color: inherit; }
.vy :focus-visible { outline: 2px solid var(--vy-accent); outline-offset: 3px; border-radius: 6px; }
.vy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vy-wrap { max-width: var(--vy-max); margin-inline: auto; padding-inline: var(--vy-gutter); }
.vy-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.vy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 11px 20px;
  font: 600 15px/1 var(--vy-body); white-space: nowrap; cursor: pointer;
  background: var(--vy-btn-bg, var(--vy-accent)); color: #fff !important; text-decoration: none !important;
  transition: filter .2s;
}
.vy-btn:hover { background: var(--vy-btn-bg-hover, var(--vy-accent-hover)); }
.vy-btn--ghost { background: transparent; border: 1px solid currentColor; color: inherit !important; }
.vy-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.vy-link-arrow { font-weight: 600; color: var(--vy-accent) !important; white-space: nowrap; }
.vy-link-arrow:hover { text-decoration: underline !important; text-underline-offset: 4px; }

/* ---------- header ---------- */
.vy-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--vy-surface); color: var(--vy-ink);
  box-shadow: 0 1px 0 var(--vy-line);
  font-family: var(--vy-body); font-size: 15px; line-height: 1.4;
  transition: background .25s, box-shadow .25s, color .25s;
}
.vy-header *, .vy-header *::before, .vy-header *::after { box-sizing: border-box; }
.vy-header a { color: inherit; text-decoration: none; }
.vy-header--over:not(.is-solid) { background: transparent; box-shadow: none; color: #fff; }
/* Over the hero card the bar sits inside the card, so it moves down by the card's top gap */
.vy-header--over:not(.is-solid) { transform: translateY(clamp(8px, 1.4vw, 16px)); }
.vy-header.is-solid { background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vy-header__bar { display: flex; align-items: center; gap: 28px; height: var(--vy-header-h); }
.vy-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--vy-display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: inherit; }
.vy-brand img { width: 34px; height: 34px; object-fit: contain; }

.vy-nav ul { list-style: none; margin: 0; padding: 0; }
.vy-nav > ul { display: flex; gap: 26px; }
.vy-nav li { position: relative; }
.vy-nav > ul > li > a { display: block; padding: 6px 0; font-weight: 500; border-bottom: 2px solid transparent; }
.vy-nav > ul > li > a:hover, .vy-nav > ul > li.active > a { border-color: var(--vy-accent); }
.vy-nav .children-menu {
  display: none; position: absolute; top: 100%; left: -16px; min-width: 220px; padding: 8px;
  background: var(--vy-surface); color: var(--vy-ink); border-radius: 14px; box-shadow: var(--vy-shadow);
}
.vy-nav li:hover > .children-menu, .vy-nav li:focus-within > .children-menu { display: block; }
.vy-nav .children-menu a { display: block; padding: 8px 12px; border-radius: 8px; }
.vy-nav .children-menu a:hover { background: var(--vy-ground); }
.vy-nav .caret { display: none; }

.vy-header__tools { margin-left: auto; display: flex; align-items: center; gap: 14px; font-weight: 500; }
.vy-chip {
  list-style: none; cursor: pointer; border: 1px solid var(--vy-line); border-radius: 999px; padding: 7px 14px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vy-chip::-webkit-details-marker { display: none; }
.vy-header--over:not(.is-solid) .vy-chip { border-color: rgba(255, 255, 255, .5); }
.vy-menu { position: relative; }
.vy-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 8px; display: grid;
  background: var(--vy-surface); color: var(--vy-ink); border-radius: 14px; box-shadow: var(--vy-shadow); z-index: 5;
}
.vy-menu__panel a, .vy-menu__panel button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.vy-menu__panel a:hover, .vy-menu__panel button:hover { background: var(--vy-ground); }
.vy-menu__panel a[aria-current="true"] { color: var(--vy-accent); font-weight: 600; }
.vy-menu__panel form { margin: 0; }

.vy-menu-btn {
  display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--vy-line); background: none; color: inherit; cursor: pointer; place-items: center; padding: 0;
}
.vy-header--over:not(.is-solid) .vy-menu-btn { border-color: rgba(255, 255, 255, .5); }
.vy-menu-btn svg { width: 20px; height: 20px; }
/* The three lines turn into an X while the phone menu is open, so it is clear that the same button closes it */
.vy-menu-btn svg path { transform-box: fill-box; transform-origin: center; transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease; }
.vy-menu-btn[aria-expanded="true"] .vy-burger__a { transform: translateY(5px) rotate(45deg); }
.vy-menu-btn[aria-expanded="true"] .vy-burger__b { opacity: 0; transform: scaleX(.2); }
.vy-menu-btn[aria-expanded="true"] .vy-burger__c { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .vy-menu-btn svg path { transition: none; } }
/* While the phone menu is open the page behind it does not scroll */
/* Only the page (html) is locked: an overflow rule on body would stop the sticky header from sticking. The JS also ignores wheel and touch scrolling behind the menu. */
html.vy-menu-open { overflow: hidden; }
html.vy-menu-open, html.vy-menu-open body { overflow-anchor: none; }
.vy-drawer { overscroll-behavior: contain; }
.vy-drawer {
  display: grid; gap: 4px; padding: 8px var(--vy-gutter) 24px;
  background: var(--vy-surface); color: var(--vy-ink); border-top: 1px solid var(--vy-line);
  max-height: calc(100vh - var(--vy-header-h)); overflow-y: auto;
}
.vy-drawer ul { list-style: none; margin: 0; padding: 0; }
.vy-drawer a, .vy-drawer__link { display: block; padding: 12px 0; font-family: var(--vy-display); font-size: 24px; font-weight: 600; border-bottom: 1px solid var(--vy-line); }
.vy-drawer .children-menu a { font-size: 18px; padding-left: 16px; }
/* Signed-in guests: their account links and Log out live in the phone menu too */
.vy-drawer__account { margin-top: 6px; }
.vy-drawer__account .vy-drawer__link { font-size: 19px; padding: 13px 0; }
.vy-drawer__logout { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--vy-line); color: var(--vy-ink); cursor: pointer; }

.vy-drawer .caret { display: none; }
.vy-drawer .vy-btn { margin-top: 16px; font-family: var(--vy-body); font-size: 16px; border: 0; padding: 14px; }

/* ---------- hero ---------- */
/* The hero is a card: the same gap on the left, right and top */
.vy-hero-shell { --vy-hero-gap: clamp(8px, 1.4vw, 16px); padding: var(--vy-hero-gap) var(--vy-hero-gap) 0; }
.vy--home .vy-hero-shell { margin-top: calc(var(--vy-header-h) * -1); }
.vy-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(500px, 70vh, 680px); border-radius: calc(var(--vy-radius) + 10px);
  background: #1E3B41; color: #fff;
}
.vy-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vy-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 22, 26, .55) 0%, rgba(6, 22, 26, .05) 28%, rgba(6, 22, 26, .05) 50%, rgba(6, 22, 26, .72) 100%);
}
.vy-hero__inner { width: 100%; max-width: var(--vy-max); margin-inline: auto; padding: clamp(96px, 14vh, 120px) var(--vy-gutter) 40px; display: grid; gap: clamp(14px, 2vw, 24px); }
.vy-hero h1 { font-size: clamp(30px, 5vw, 64px); max-width: 32ch; color: #fff; line-height: 1.08; }
.vy-hero__lede { font-size: clamp(16px, 1.6vw, 19px); max-width: 52ch; opacity: .92; }
.vy-hero__caption {
  position: absolute; right: calc(var(--vy-gutter) + 4px); top: calc(var(--vy-header-h) + 20px);
  font-size: 13px; background: rgba(6, 22, 26, .45); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 999px; color: #fff;
}

.vy-search {
  display: grid; grid-template-columns: 1.3fr 1.5fr 1fr auto; align-items: center;
  max-width: 940px; padding: 8px; border-radius: 999px;
  background: var(--vy-surface); color: var(--vy-ink); box-shadow: var(--vy-shadow);
}
.vy-field { display: grid; gap: 2px; padding: 8px 22px; border-right: 1px solid var(--vy-line); min-width: 0; }
.vy-field:nth-child(3) { border-right: 0; }
.vy-field label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vy-muted); margin: 0; }
.vy-field select, .vy-field input {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  font: 500 16px/1.3 var(--vy-body); color: var(--vy-ink); min-width: 0; width: 100%; height: auto; box-shadow: none;
}
.vy-dates { display: flex; align-items: center; gap: 6px; }
.vy-dates input { flex: 1; }
.vy-dates span { color: var(--vy-muted); }
.vy-search__btn { height: 56px; padding-inline: 28px; font-size: 16px; }
.vy-search__btn svg { width: 18px; height: 18px; }

/* ---------- facts ---------- */
.vy-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 36px; border-bottom: 1px solid var(--vy-line); }
.vy-fact { display: flex; gap: 14px; align-items: flex-start; }
.vy-fact svg { width: 22px; height: 22px; flex: none; color: var(--vy-sea); margin-top: 3px; }
.vy-fact strong { display: block; font-weight: 600; }
.vy-fact span { color: var(--vy-muted); font-size: 14px; }


/* ---------- sections ---------- */
.vy-block { padding-block: clamp(56px, 8vw, 96px); }
.vy-block + .vy-block:not(.vy-why) { padding-top: 0; }
/* The full-width white section is closed by its own border, so the block after it needs its own top spacing */
.vy-block.vy-why + .vy-block:not(.vy-why) { padding-top: clamp(56px, 8vw, 96px); }
.vy-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.vy-head h2 { font-size: clamp(30px, 3.6vw, 46px); }
.vy-head p { color: var(--vy-muted); max-width: 48ch; margin-top: 10px; }

/* destinations */
.vy-dest-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: 16px; }
.vy-dest { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; border-radius: var(--vy-radius); color: #fff !important; background: #1E3B41; grid-column: span 2; }
.vy-dest:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.vy-dest:nth-child(2), .vy-dest:nth-child(3) { grid-column: span 3; }
.vy-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.vy-dest::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(6, 22, 26, .75)); }
.vy-dest:hover img { transform: scale(1.04); }
.vy-dest h3 { font-size: clamp(20px, 2vw, 28px); color: #fff; }
.vy-dest:nth-child(1) h3 { font-size: clamp(28px, 3vw, 40px); }
.vy-dest__count { font-size: 14px; opacity: .9; font-variant-numeric: tabular-nums; }

/* villas */
.vy-villa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.vy-villa { display: grid; gap: 14px; align-content: start; }
.vy-villa__ph { aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: var(--vy-radius); background: var(--vy-line); }
.vy-villa__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vy-villa:hover .vy-villa__ph img { transform: scale(1.04); }
.vy-villa__meta { display: grid; gap: 4px; }
.vy-villa__loc { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vy-sea); }
.vy-villa__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vy-villa h3 { font-size: 22px; }
.vy-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.vy-rating svg { width: 14px; height: 14px; color: var(--vy-accent); }
.vy-villa__spec { color: var(--vy-muted); font-size: 15px; }
.vy-villa__price { font-size: 15px; margin-top: 4px; }
.vy-villa__price b { font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }

/* why */
.vy-why { background: var(--vy-surface); border-block: 1px solid var(--vy-line); }
.vy-why__grid { display: grid; grid-template-columns: 1.1fr 2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.vy-why__grid h2 { font-size: clamp(30px, 3.6vw, 46px); }
.vy-why__grid > div:first-child p { color: var(--vy-muted); margin-top: 16px; max-width: 40ch; }
.vy-why__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.vy-why__item { display: grid; gap: 10px; align-content: start; }
.vy-why__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--vy-accent-soft); color: var(--vy-accent); display: grid; place-items: center; }
.vy-why__ic svg { width: 22px; height: 22px; }
.vy-why__item h3 { font-size: 20px; }
.vy-why__item p { color: var(--vy-muted); font-size: 15px; }
.vy .vy-why__item a { color: var(--vy-accent); font-weight: 600; }
.vy .vy-fact a:hover { color: var(--vy-accent); }

/* photo banner */
.vy-banner {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #1E3B41;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end;
  padding: clamp(36px, 6vw, 72px); border-radius: calc(var(--vy-radius) + 10px);
}
.vy-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vy-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 22, 26, .85) 0%, rgba(6, 22, 26, .5) 60%, rgba(6, 22, 26, .2)); }
.vy-banner h2 { font-size: clamp(30px, 3.6vw, 46px); max-width: 14ch; margin-top: 12px; color: #fff; }
.vy-banner p { opacity: .9; margin-top: 14px; max-width: 44ch; }
.vy-banner__cta { justify-self: end; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.vy-footer {
  margin-top: 0; padding-block: 56px 28px;
  background: var(--vy-surface); color: var(--vy-ink); border-top: 1px solid var(--vy-line);
  font-family: var(--vy-body); font-size: 15px; line-height: 1.55;
}
.vy-footer *, .vy-footer *::before, .vy-footer *::after { box-sizing: border-box; }
.vy-footer a { color: inherit; text-decoration: none; }
.vy-footer a:hover { color: var(--vy-accent); }
.vy-footer__grid { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(var(--vy-cols, 3), minmax(0, 1fr)); gap: 32px; }
.vy-footer h4 { font: 600 13px/1 var(--vy-body); letter-spacing: .1em; text-transform: uppercase; color: var(--vy-muted); margin: 0 0 14px; }
.vy-footer__links, .vy-footer__links > div { display: grid; gap: 10px; margin: 0 !important; }
.vy-footer__links * { margin-top: 0 !important; font-size: 15px !important; font-weight: 400 !important; }
.vy-footer__news p { color: var(--vy-muted); margin: 12px 0 0; max-width: 36ch; }
.vy-news { display: flex; gap: 8px; margin-top: 16px; max-width: 380px; }
.vy-news input { flex: 1; min-width: 0; border: 1px solid var(--vy-line); background: var(--vy-ground); color: var(--vy-ink); border-radius: 999px; padding: 11px 16px; font: 15px var(--vy-body); height: auto; }
.vy-footer .vy-news__msg { color: var(--vy-sea); font-size: 14px; margin-top: 10px; }
.vy-footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--vy-line); color: var(--vy-muted); font-size: 14px; }

/* cookie bar */
.vy-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px;
  display: flex; gap: 16px; align-items: center; padding: 14px 16px 14px 20px;
  background: var(--vy-ink); color: #fff; border-radius: 16px; box-shadow: var(--vy-shadow);
  font: 14px/1.5 var(--vy-body);
}
.vy-cookie a { color: #fff; text-decoration: underline; }
.vy-cookie p { margin: 0; }

/* ---------- search results page ---------- */
.vy-btn--small { padding: 9px 16px; font-size: 14px; }
.vy-search-top { padding-block: clamp(28px, 4vw, 48px) 28px; background: var(--vy-surface); border-bottom: 1px solid var(--vy-line); }
.vy-search-top h1 { font-size: clamp(30px, 4vw, 48px); }
.vy-search-top__count { color: var(--vy-muted); margin: 8px 0 20px !important; font-variant-numeric: tabular-nums; }
.vy-search--compact { max-width: none; box-shadow: none; border: 1px solid var(--vy-line); padding: 6px; }
.vy-search--compact .vy-field { padding-block: 6px; }
.vy-search--compact .vy-search__btn { height: 48px; }

.vy-results { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding-block: 32px 72px; align-items: start; }
.vy-filters-wrap { scrollbar-width: thin; scrollbar-color: var(--vy-line) transparent; position: sticky; top: calc(var(--vy-header-h) + 16px); max-height: calc(100vh - var(--vy-header-h) - 32px); overflow-y: auto; padding-right: 4px; }
.vy-filters > summary { list-style: none; cursor: pointer; display: none; align-items: center; gap: 8px; font-weight: 600; }
.vy-filters > summary::-webkit-details-marker { display: none; }
.vy-count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--vy-accent); color: #fff; font-size: 12px; }
.vy-filters__form { display: grid; gap: 8px; }
.vy-filter { border: 0; border-bottom: 1px solid var(--vy-line); margin: 0; padding: 0 0 18px; display: grid; gap: 8px; min-width: 0; }
.vy-filter + .vy-filter { padding-top: 12px; }
.vy-filter legend { font-weight: 600; font-size: 15px; padding: 0 0 6px; float: left; width: 100%; }
.vy-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vy-price label { display: grid; gap: 4px; font-size: 13px; color: var(--vy-muted); }
.vy-price input { width: 100%; border: 1px solid var(--vy-line); border-radius: 10px; padding: 9px 10px; font: 15px var(--vy-body); background: var(--vy-surface); color: var(--vy-ink); }
.vy-filter .vy-btn--small { justify-self: start; }
.vy-check { display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; font-size: 15px; }
.vy-check input { width: 18px; height: 18px; accent-color: var(--vy-accent); margin: 0; flex: none; }
.vy-check span { flex: 1; }
.vy-check em { font-style: normal; color: var(--vy-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.vy-more > summary { cursor: pointer; color: var(--vy-accent); font-weight: 600; font-size: 14px; padding: 4px 0; list-style: none; }
.vy-more[open] > summary { display: none; }
.vy-clear { margin-top: 8px; }

.vy-results__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.vy-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--vy-muted); }
.vy-sort select { border: 1px solid var(--vy-line); border-radius: 999px; padding: 8px 14px; font: 500 15px var(--vy-body); color: var(--vy-ink); background: var(--vy-surface); }
.vy-chip-link { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--vy-line); border-radius: 999px; padding: 8px 16px; font-weight: 500; background: var(--vy-surface); }
.vy-chip-link svg { width: 18px; height: 18px; }
.vy-chip-link:hover { border-color: var(--vy-ink); }
.vy-results .vy-villa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.vy-results .vy-villa h3 { font-size: 19px; }

.vy-villa__ph { position: relative; }
.vy-villa__badge { position: absolute; top: 12px; left: 12px; background: var(--vy-surface); color: var(--vy-accent); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.vy-villa__price s { color: var(--vy-muted); margin-right: 4px; }
/* demo properties: a small label, never a claim */
.vy-demo { display: inline-block; background: var(--vy-surface); color: var(--vy-muted); border: 1px solid var(--vy-line); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
.vy-villa__ph .vy-demo { position: absolute; top: 12px; right: 12px; }
.vy-villa__ph .vy-villa__badge + .vy-demo { right: 12px; }
.vy-demo-note { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--vy-line); border-radius: 12px; background: var(--vy-surface); color: var(--vy-muted); font-size: 14px; }
.vy-btn[disabled], .vy-btn.is-disabled { opacity: .55; cursor: not-allowed; }

.vy-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 48px; }
.vy-page { min-width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--vy-line); font-weight: 500; font-variant-numeric: tabular-nums; background: var(--vy-surface); }
.vy-page:hover { border-color: var(--vy-ink); }
.vy-page.is-current { background: var(--vy-ink); border-color: var(--vy-ink); color: #fff; }
.vy-page.is-disabled { opacity: .4; }

.vy-empty { text-align: center; padding: 64px 16px; display: grid; gap: 12px; justify-items: center; background: var(--vy-surface); border-radius: var(--vy-radius); border: 1px solid var(--vy-line); }
.vy-empty h2 { font-size: 26px; }
.vy-empty p { color: var(--vy-muted); }

/* ---------- villa page ---------- */
.vy-muted { color: var(--vy-muted); }
.vy-crumbs { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 24px; font-size: 14px; color: var(--vy-muted); }
.vy-crumbs a:hover { color: var(--vy-accent); }
.vy-villa-head { padding-block: 12px 24px; }
.vy-villa-head h1 { font-size: clamp(32px, 4.4vw, 54px); margin-top: 6px; }
.vy-villa-head__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px !important; color: var(--vy-muted); }
.vy-villa-head__meta .vy-rating { color: var(--vy-ink); }

.vy-gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 8px; border-radius: calc(var(--vy-radius) + 6px); overflow: hidden; }
.vy-gallery__item { padding: 0; border: 0; cursor: zoom-in; background: var(--vy-line); overflow: hidden; }
.vy-gallery__item:first-child { grid-row: span 2; }
.vy-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s; }
.vy-gallery__item:hover img { transform: scale(1.03); filter: brightness(.94); }
.vy-gallery[data-count="1"] { grid-template-columns: 1fr; }
.vy-gallery[data-count="2"], .vy-gallery[data-count="3"], .vy-gallery[data-count="4"] { grid-template-columns: 2fr 1fr; }
.vy-gallery__all { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 16px; background: var(--vy-surface); color: var(--vy-ink); font: 600 14px var(--vy-body); cursor: pointer; box-shadow: var(--vy-shadow); }
.vy-gallery__all svg { width: 16px; height: 16px; }

.vy-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0B1618; color: #fff; }
.vy-lightbox::backdrop { background: #0B1618; }
.vy-lightbox__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px; background: rgba(11, 22, 24, .92); font-size: 15px; }
.vy-lightbox__close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.vy-lightbox__close svg { width: 20px; height: 20px; }
.vy-lightbox__list { display: grid; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 12px 16px 48px; }
.vy-lightbox__list img { width: 100%; height: auto; border-radius: 12px; background: #1E3B41; min-height: 200px; scroll-margin-top: 80px; }

.vy-villa-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 72px); padding-block: 40px 24px; align-items: start; }
.vy-specs { list-style: none; margin: 0; padding: 0 0 28px; display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--vy-line); }
.vy-specs li { padding: 8px 14px; border: 1px solid var(--vy-line); border-radius: 999px; background: var(--vy-surface); font-weight: 500; }
.vy-section { padding-block: 32px; border-bottom: 1px solid var(--vy-line); }
.vy-section:last-child { border-bottom: 0; }
.vy-section h2 { font-size: 26px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vy-prose { color: var(--vy-ink); max-width: 70ch; }
.vy-prose p { margin: 0 0 14px !important; }
.vy-prose ul { padding-left: 20px; margin: 0 0 14px; }
.vy-prose h2, .vy-prose h3, .vy-prose h4 { font-size: 19px; margin: 20px 0 8px; }
.vy-clamp { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.vy-more-btn { margin-top: 12px; background: none; border: 1px solid var(--vy-ink); color: var(--vy-ink); border-radius: 999px; padding: 9px 18px; font: 600 14px var(--vy-body); cursor: pointer; }
.vy-more-btn:hover { background: var(--vy-ink); color: #fff; }
.vy-amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.vy-amenities li { display: flex; gap: 10px; align-items: flex-start; }
.vy-amenities svg { width: 18px; height: 18px; color: var(--vy-sea); flex: none; margin-top: 3px; }
.vy-map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; color: var(--vy-accent) !important; }
.vy-map-link svg { width: 18px; height: 18px; }
.vy-faqs { display: grid; gap: 8px; }
.vy-faq { border: 1px solid var(--vy-line); border-radius: 14px; background: var(--vy-surface); padding: 14px 18px; }
.vy-faq summary { cursor: pointer; font-weight: 600; }
.vy-faq .vy-prose { margin-top: 10px; }
.vy-rating--big { font-size: inherit; }
.vy-rating--big svg { width: 22px; height: 22px; }
.vy-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.vy-review { margin: 0; display: grid; gap: 10px; align-content: start; }
.vy-review__head { display: flex; gap: 12px; align-items: center; }
.vy-review__head strong { display: block; }
.vy-review__head span { font-size: 14px; color: var(--vy-muted); }
.vy-review__head span:last-child { letter-spacing: .5px; }
.vy-review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--vy-accent-soft); color: var(--vy-accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.vy-review figcaption { font-weight: 600; }
.vy-review blockquote { margin: 0; color: var(--vy-ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

.vy-book-wrap { position: sticky; top: calc(var(--vy-header-h) + 20px); }
.vy-book { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--vy-line); border-radius: calc(var(--vy-radius) + 4px); background: var(--vy-surface); box-shadow: var(--vy-shadow); }
.vy-book__price { font-size: 15px; color: var(--vy-muted); }
.vy-book__price b { font-family: var(--vy-display); font-size: 28px; color: var(--vy-ink); font-weight: 600; }
.vy-book__price s { margin-right: 6px; }
.vy-book__fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--vy-line); border-radius: 14px; overflow: hidden; }
.vy-book__field { display: grid; gap: 4px; padding: 10px 14px; margin: 0; }
.vy-book__field:first-child { border-right: 1px solid var(--vy-line); }
.vy-book__field--wide { grid-column: 1 / -1; border-top: 1px solid var(--vy-line); }
.vy-book__field > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vy-muted); }
.vy-book__field input[type="date"] { border: 0; padding: 0; background: none; font: 500 15px var(--vy-body); color: var(--vy-ink); width: 100%; min-width: 0; }
.vy-book__field small { font-size: 13px; }
.vy-steppers { display: grid; gap: 8px; margin-top: 4px; }
.vy-stepper { display: grid; grid-template-columns: 1fr 34px 36px 34px; align-items: center; gap: 6px; }
.vy-stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vy-line); background: var(--vy-surface); color: var(--vy-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.vy-stepper button:hover { border-color: var(--vy-ink); }
.vy-stepper output { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.vy-book__extras { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.vy-book__extras legend { font-weight: 600; margin-bottom: 4px; }
.vy-book__summary dl { margin: 0; display: grid; gap: 8px; font-size: 15px; }
.vy-book__summary dl > div { display: flex; justify-content: space-between; gap: 12px; }
.vy-book__summary dt { color: var(--vy-muted); }
.vy-book__summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.vy-book__total { border-top: 1px solid var(--vy-line); padding-top: 10px; margin-top: 4px; font-weight: 700; }
.vy-book__total dt { color: var(--vy-ink) !important; }
.vy-book__warn, .vy-book__msg { color: #B42318; font-size: 14px; }
.vy-book__submit { width: 100%; height: 52px; font-size: 16px; }
.vy-book__submit:disabled { opacity: .6; cursor: wait; }
.vy-book__note { font-size: 13px; color: var(--vy-muted); text-align: center; }
.vy-book__help { text-align: center; font-size: 14px; color: var(--vy-muted); margin-top: 14px !important; }
.vy .vy-book__help a { color: var(--vy-accent); font-weight: 600; }
.vy-book-bar { display: none; }
.vy-villa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px 20px; }
.vy-villa-grid--4 .vy-villa h3 { font-size: 18px; }
.vy-related { padding-top: 24px; }

/* ---------- forms and sign-in pages ---------- */
.vy-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--vy-header-h)); }
.vy-auth__form { display: flex; align-items: center; justify-content: center; padding: 48px var(--vy-gutter); }
.vy-auth__inner { width: 100%; max-width: 420px; display: grid; gap: 16px; }
.vy-auth h1 { font-size: clamp(30px, 3.4vw, 40px); }
.vy .vy-auth a:not(.vy-btn):not(.vy-chip-link) { color: var(--vy-accent); font-weight: 600; }
.vy-auth__photo { position: relative; margin: 16px 16px 16px 0; border-radius: calc(var(--vy-radius) + 10px); overflow: hidden; background: #1E3B41; }
.vy-auth__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vy-auth__photo span { position: absolute; left: 20px; bottom: 20px; background: rgba(6, 22, 26, .5); backdrop-filter: blur(6px); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.vy-form { display: grid; gap: 14px; }
.vy-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vy-input { display: grid; gap: 6px; }
.vy-input > span { font-size: 14px; font-weight: 600; }
.vy-input input, .vy-input select, .vy-input textarea {
  width: 100%; border: 1px solid var(--vy-line); border-radius: 12px; padding: 12px 14px; background: var(--vy-surface);
  font: 16px var(--vy-body); color: var(--vy-ink); height: auto; box-shadow: none;
}
.vy-input input:focus, .vy-input select:focus, .vy-input textarea:focus { outline: 2px solid var(--vy-accent); outline-offset: 0; border-color: transparent; }
.vy-form__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vy-form__link { font-size: 14px; }
.vy-form__error { color: #B42318; font-size: 14px; margin: 0 !important; }
.vy-form__submit { width: 100%; height: 50px; font-size: 16px; }
.vy-form__submit:disabled { opacity: .6; cursor: wait; }
.vy-alert { padding: 12px 14px; border-radius: 12px; background: #E6F4F1; color: #0B5A4E; font-size: 14px; margin: 0 !important; }
.vy-alert--error { background: #FDECEA; color: #B42318; }
.vy-social { display: grid; gap: 12px; margin-top: 8px; }
.vy-social__or { display: flex; align-items: center; gap: 12px; color: var(--vy-muted); font-size: 13px; }
.vy-social__or::before, .vy-social__or::after { content: ""; flex: 1; height: 1px; background: var(--vy-line); }
.vy-social__list { display: flex; gap: 10px; flex-wrap: wrap; }
.vy-social__list .vy-chip-link { flex: 1; justify-content: center; }
.vy--auth .vy-footer { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .vy-nav, .vy-header__tools .vy-header__signin { display: none; }
  .vy-facts { grid-template-columns: repeat(2, 1fr); }
  .vy-villa-grid { grid-template-columns: repeat(2, 1fr); }
  .vy-why__grid { grid-template-columns: 1fr; }
  .vy-footer__grid { grid-template-columns: repeat(var(--vy-cols, 3), minmax(0, 1fr)); }
  .vy-footer__news { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .vy-results .vy-villa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vy-villa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .vy-auth { grid-template-columns: 1fr; min-height: 0; }
  .vy-auth__photo { display: none; }
  .vy-villa-body { grid-template-columns: 1fr; padding-top: 24px; }
  .vy-book-wrap { position: static; }
  .vy-book-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--vy-surface); border-top: 1px solid var(--vy-line); box-shadow: 0 -8px 24px -16px rgba(16, 38, 43, .4);
  }
  .vy-book-bar b { font-family: var(--vy-display); font-size: 20px; }
  .vy-book-bar span { color: var(--vy-muted); font-size: 14px; }
  .vy-villa-page { padding-bottom: 76px; }
  .vy-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 140px; }
  .vy-gallery__item:first-child { grid-column: 1 / -1; grid-row: auto; }
  .vy-gallery__item:nth-child(n+4) { display: none; }
  .vy-results { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .vy-filters-wrap { position: static; max-height: none; overflow: visible; padding: 0; }
  .vy-filters { border: 1px solid var(--vy-line); border-radius: 14px; background: var(--vy-surface); padding: 12px 16px; }
  .vy-filters > summary { display: flex; }
  .vy-filters[open] > summary { margin-bottom: 12px; }
}
@media (max-width: 760px) {
  .vy-header__tools { display: none; }
  .vy-menu-btn { display: grid; }
  .vy-hero { min-height: auto; }
  .vy-hero__inner { padding-top: 110px; padding-bottom: 20px; }
  .vy-hero__caption { display: none; }
  .vy-search { grid-template-columns: 1fr; border-radius: 22px; padding: 6px; }
  .vy-field { padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--vy-line); }
  .vy-search__btn { margin: 6px; }
  .vy-facts { gap: 18px; padding-block: 28px; }
  .vy-dest-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .vy-dest, .vy-dest:nth-child(2), .vy-dest:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .vy-dest:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
  .vy-villa-grid, .vy-why__list, .vy-results .vy-villa-grid, .vy-villa-grid--4 { grid-template-columns: 1fr !important; }
  .vy-amenities, .vy-reviews { grid-template-columns: 1fr; }
  .vy-search--compact { border-radius: 18px; }
  .vy-banner { grid-template-columns: 1fr; }
  .vy-banner__cta { justify-self: start; }
  .vy-footer__grid { grid-template-columns: 1fr 1fr; }
  .vy-footer__news { grid-column: 1 / -1; }
  .vy-cookie { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) {
  .vy-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vy *, .vy-header, .vy-header * { transition: none !important; }
}
.vy--legacy .vy-footer { margin-top: clamp(40px, 6vw, 72px); }

/* ---------- pages still on the GoTrip layout: use the Vacayum fonts ---------- */
.vy--legacy {
  --font-primary: var(--vy-body);
  --title-font-family: var(--vy-display);
  font-family: var(--vy-body) !important;
}
.vy--legacy input, .vy--legacy button, .vy--legacy select, .vy--legacy textarea { font-family: var(--vy-body); }
.vy--legacy h1, .vy--legacy h2, .vy--legacy h3 { font-family: var(--vy-display); letter-spacing: -.01em; }

/* ---------- text pages (terms, privacy, about...) ----------
   The page content is legacy Bootstrap markup; this restyles it without touching the wording. */
.vy-doc { background: var(--vy-surface); }
.vy-doc .container { max-width: 820px; margin-inline: auto; padding-inline: var(--vy-gutter); }
.vy-doc .container .container { padding-inline: 0; }
.vy-doc .row, .vy-doc [class*="col-"] { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
.vy-doc .text-center { text-align: left !important; padding: 56px 0 16px !important; }
.vy-doc h1 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 8px; }
.vy-doc h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 40px 0 16px !important; }
.vy-doc h3 { font-size: 22px; margin: 36px 0 12px !important; }
.vy-doc h4 { font-family: var(--vy-display); font-size: 19px; font-weight: 600; margin: 32px 0 10px !important; letter-spacing: -.01em; }
.vy-doc p, .vy-doc li { font-family: var(--vy-body) !important; font-size: 16.5px !important; line-height: 1.7 !important; color: var(--vy-ink) !important; text-align: left !important; }
.vy-doc p { margin: 0 0 14px !important; }
.vy-doc ul, .vy-doc ol { padding-left: 22px; margin: 0 0 16px; }
.vy-doc li { margin-bottom: 6px; }
.vy-doc a:not(.vy-btn) { color: var(--vy-accent) !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* links styled as buttons keep their own button colours (white on orange; ghost and quiet variants) in any state */
.vy-doc a.vy-btn, .vy-doc a.vy-btn:visited, .vy-doc a.vy-btn:hover, .vy-doc a.vy-btn:focus-visible { color: #fff !important; text-decoration: none !important; }
.vy-doc a.vy-btn--ghost, .vy-doc a.vy-btn--ghost:visited, .vy-doc a.vy-btn--ghost:hover, .vy-doc a.vy-btn--ghost:focus-visible { color: var(--vy-ink) !important; border-color: var(--vy-ink); }
.vy-doc a.vy-btn--ghost:hover { background: var(--vy-ground); }
.vy-doc a.vy-btn--quiet, .vy-doc a.vy-btn--quiet:visited, .vy-doc a.vy-btn--quiet:hover, .vy-doc a.vy-btn--quiet:focus-visible { color: var(--vy-ink) !important; }
.vy-doc .text-muted { color: var(--vy-muted) !important; font-size: 14px; }
.vy-doc span.text-muted { display: block; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 13px; color: var(--vy-sea) !important; margin-top: 24px; }
.vy-doc hr { border: 0; border-top: 1px solid var(--vy-line); margin: 32px 0; }
.vy-doc img { border-radius: var(--vy-radius); margin: 16px 0; max-width: 100%; height: auto; }
.vy-doc section { padding: 0 !important; }
.vy-doc table { width: 100%; border-collapse: collapse; margin: 0 0 20px; display: block; overflow-x: auto; }
.vy-doc th, .vy-doc td { border: 1px solid var(--vy-line); padding: 10px 12px; text-align: left; vertical-align: top; font-size: 15px; }
.vy-doc .bravo-contact-block { padding-bottom: 72px; margin: 0 !important; }

/* destinations: even grid and page-heading variant */
.vy-block--page { padding-top: clamp(32px, 5vw, 56px); }
.vy-block--page h1 { font-size: clamp(36px, 5vw, 60px); }
.vy-dest-grid--even { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; }
.vy-dest-grid--even .vy-dest, .vy-dest-grid--even .vy-dest:nth-child(n) { grid-column: auto; grid-row: auto; }
.vy-dest-grid--even .vy-dest h3, .vy-dest-grid--even .vy-dest:nth-child(1) h3 { font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 900px) { .vy-dest-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; } }
@media (max-width: 520px) { .vy-dest-grid--even { grid-template-columns: 1fr; } }

/* destination pages */
.vy-hero--place { min-height: clamp(360px, 52vh, 520px); }
.vy-hero--place .vy-hero__inner { padding-bottom: 36px; gap: 10px; }
.vy-crumbs--light { padding-top: 0; color: rgba(255, 255, 255, .85); }
.vy-crumbs--light a:hover { color: #fff; text-decoration: underline; }
.vy-place-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; padding-block: 48px 8px; align-items: start; }
.vy-place-intro__text { font-size: 17px; }
.vy-place-areas h2 { font-size: 20px; margin-bottom: 12px; }
.vy-place-areas__list { display: flex; flex-wrap: wrap; gap: 8px; }
.vy-center { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 900px) { .vy-place-intro { grid-template-columns: 1fr; gap: 24px; } }

/* error pages */
.vy-error { display: grid; gap: 16px; padding-block: clamp(48px, 10vw, 120px); max-width: 980px; }
.vy-error h1 { font-size: clamp(36px, 5.4vw, 64px); }

/* ---------- checkout (GoTrip markup, restyled; its scripts are untouched) ---------- */
.bravo-booking-page { --color-blue-1: var(--vy-accent); background: var(--vy-ground); }
.bravo-booking-page h2, .bravo-booking-page h3, .bravo-booking-page .text-22 { font-family: var(--vy-display) !important; color: var(--vy-ink) !important; letter-spacing: -.01em; }
.bravo-booking-page h2.text-22 { font-size: 26px !important; margin-bottom: 8px; }
.bravo-booking-page .form-input input, .bravo-booking-page .form-input select, .bravo-booking-page .form-input textarea,
.bravo-booking-page input.form-control, .bravo-booking-page select.form-control, .bravo-booking-page textarea.form-control {
  border: 1px solid var(--vy-line) !important; border-radius: 12px !important; background: var(--vy-surface) !important;
  font-family: var(--vy-body) !important; color: var(--vy-ink) !important; box-shadow: none !important;
}
.bravo-booking-page .form-input input:focus, .bravo-booking-page .form-input select:focus, .bravo-booking-page .form-input textarea:focus,
.bravo-booking-page .form-control:focus { border-color: var(--vy-accent) !important; outline: 2px solid var(--vy-accent-soft); }
.bravo-booking-page .form-input label { color: var(--vy-muted) !important; }
.bravo-booking-page .button, .bravo-booking-page .btn-primary, .bravo-booking-page button[type="submit"] {
  background: var(--vy-accent) !important; border-color: var(--vy-accent) !important; color: #fff !important;
  border-radius: 999px !important; font-family: var(--vy-body) !important; font-weight: 600 !important;
}
.bravo-booking-page .button:hover, .bravo-booking-page .btn-primary:hover { background: var(--vy-accent-hover) !important; }
.bravo-booking-page .text-blue-1, .bravo-booking-page a.text-blue-1 { color: var(--vy-accent) !important; }
.bravo-booking-page .bg-blue-1-05 { background: var(--vy-accent-soft) !important; border-radius: 14px !important; }
.bravo-booking-page label a, .bravo-booking-page .text-light-1 a { color: var(--vy-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
.bravo-booking-page .form-checkbox__mark { border-radius: 5px; }
.bravo-booking-page .form-checkbox input:checked ~ .form-checkbox__mark { background: var(--vy-accent) !important; border-color: var(--vy-accent) !important; }
/* booking summary card */
.bravo-booking-page .col-xl-5 .border-light, .bravo-booking-page .col-xl-5 .rounded-4, .bravo-booking-page .col-xl-5 .shadow-4 { border-radius: var(--vy-radius) !important; }
.bravo-booking-page .col-xl-5 img { border-radius: var(--vy-radius) var(--vy-radius) 0 0; }
.bravo-booking-page input[name="coupon_code"], .bravo-booking-page .coupon input { font-size: 15px !important; letter-spacing: normal !important; }
.bravo-booking-page input[name="coupon_code"]::placeholder { font-size: 15px; letter-spacing: .1em; }
.bravo-booking-page .text-red-1, .bravo-booking-page .total-price, .bravo-booking-page .text-blue-1.fw-500 { color: var(--vy-ink) !important; }
.bravo-booking-page .section-coupon-form > div { display: flex !important; gap: 8px; align-items: stretch !important; border: 0 !important; padding: 0 !important; }
.bravo-booking-page .section-coupon-form input[name="coupon_code"] { flex: 1; min-width: 0; height: 46px !important; padding: 0 14px !important; border: 1px solid var(--vy-line) !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 500 !important; }
.bravo-booking-page .section-coupon-form .bravo_apply_coupon { position: static !important; height: 46px; padding: 0 18px !important; background: var(--vy-surface) !important; color: var(--vy-accent) !important; border: 1px solid var(--vy-accent) !important; }

/* ---------- custom dropdown ---------- */
.vy-select { position: relative; min-width: 0; }
.vy-select__native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.vy-select__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font: 500 16px/1.3 var(--vy-body); color: var(--vy-ink);
}
.vy-select__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vy-select__chev { width: 16px; height: 16px; flex: none; color: var(--vy-muted); transition: transform .2s; }
.vy-select.is-open .vy-select__chev { transform: rotate(180deg); }
.vy-select__list {
  position: absolute; z-index: 30; top: calc(100% + 14px); left: -12px; min-width: calc(100% + 24px); max-width: 320px; max-height: 320px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px; background: var(--vy-surface); border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(16, 38, 43, .35), 0 0 0 1px var(--vy-line);
}
.vy-select__list li { padding: 10px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; font-size: 15px; color: var(--vy-ink); }
.vy-select__list li.is-active { background: var(--vy-ground); }
.vy-select__list li[aria-selected="true"] { font-weight: 600; color: var(--vy-accent); }
.vy-select__list li[aria-disabled="true"] { opacity: .4; cursor: default; }
/* sort dropdown on the results bar looks like a pill */
.vy-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--vy-muted); }
.vy-sort .vy-select { border: 1px solid var(--vy-line); border-radius: 999px; padding: 8px 14px; background: var(--vy-surface); min-width: 190px; }
.vy-sort .vy-select__btn { font-size: 15px; }
.vy-sort .vy-select__list { left: 0; right: auto; top: calc(100% + 8px); min-width: 100%; }

/* ---------- date field and calendar ---------- */
.vy-field--dates { position: relative; }
.vy-field__value { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: 500 16px/1.3 var(--vy-body); color: var(--vy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-field--dates.is-empty .vy-field__value, .vy-select.is-empty .vy-select__text { color: var(--vy-ink); }
.vy-cal {
  position: absolute; z-index: 40; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: min(680px, calc(100vw - 32px));
  background: var(--vy-surface); color: var(--vy-ink); border-radius: 22px; padding: 20px 22px 16px;
  box-shadow: 0 30px 60px -20px rgba(16, 38, 43, .4), 0 0 0 1px var(--vy-line); cursor: default; text-align: left;
}
.vy-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vy-cal__hint { margin: 0 !important; font-weight: 600; font-size: 15px; text-align: center; flex: 1; }
.vy-cal__nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vy-line); background: var(--vy-surface); color: var(--vy-ink); display: grid; place-items: center; cursor: pointer; }
.vy-cal__nav:hover { border-color: var(--vy-ink); }
.vy-cal__nav svg { width: 18px; height: 18px; }
.vy-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vy-cal__month h3 { font-family: var(--vy-display); font-size: 17px; text-align: center; margin: 0 0 10px; }
.vy-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.vy-cal__wd { text-align: center; font-size: 12px; color: var(--vy-muted); padding: 4px 0 8px; font-weight: 600; }
.vy-cal__day {
  position: relative; aspect-ratio: 1 / 1; min-height: 40px; border: 0; background: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 500 14px var(--vy-body); color: var(--vy-ink); border-radius: 999px; font-variant-numeric: tabular-nums;
}
.vy-cal__day small { font-size: 10px; color: var(--vy-muted); line-height: 1; }
.vy-cal__day:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--vy-ink); }
.vy-cal__day:disabled { color: #B7C1C0; cursor: default; }
.vy-cal__day.is-blocked span { text-decoration: line-through; }
.vy-cal__day.is-today span { text-decoration: underline; text-underline-offset: 3px; }
.vy-cal__day.is-range { background: var(--vy-accent-soft); border-radius: 0; }
.vy-cal__day.is-start, .vy-cal__day.is-end { background: var(--vy-accent); color: #fff; }
.vy-cal__day.is-start small, .vy-cal__day.is-end small { color: rgba(255, 255, 255, .85); }
.vy-cal__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vy-line); }
.vy-cal__clear { background: none; border: 0; font: 600 14px var(--vy-body); color: var(--vy-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 0; }
.vy-cal__done { padding: 10px 22px; }
.vy-cal__more { border: 1px solid var(--vy-line); background: var(--vy-surface); border-radius: 999px; padding: 12px 18px; font: 600 15px var(--vy-body); color: var(--vy-ink); cursor: pointer; margin: 4px auto 12px; }
html.vy-lock { overflow: hidden; }
@media (max-width: 760px) {
  .vy-cal {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; max-height: 86vh;
    border-radius: 22px 22px 0 0; padding: 16px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; z-index: 90;
  }
  .vy-cal__head .vy-cal__nav { display: none; }
  .vy-cal__months { grid-template-columns: 1fr; overflow-y: auto; flex: 1; gap: 20px; }
  .vy-cal__day { min-height: 44px; }
}

/* newsletter label (no placeholder) */
.vy-news__label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 -8px; }
/* let the search bar's calendar and dropdowns open beyond the hero; round the photo itself */
.vy-hero { overflow: visible; }
.vy-hero > img, .vy-hero::before { border-radius: inherit; }
.vy-hero__caption { z-index: 1; }

/* placeholders and helper text */
.vy ::placeholder { color: var(--vy-muted); opacity: .75; }
.vy-help { display: block; font-size: 13px; line-height: 1.45; color: var(--vy-muted); margin: 0 !important; font-weight: 400; }
.vy-select.is-placeholder .vy-select__text, .vy-field--dates.is-empty .vy-field__value { color: var(--vy-muted); font-weight: 400; }

/* booking box dates */
.vy-book__dates { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.vy-book__dates .vy-book__field { background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.vy-book__dates .vy-book__field:first-child { border-right: 1px solid var(--vy-line); }
.vy-book__dates .vy-book__field b { font: 500 15px var(--vy-body); color: var(--vy-ink); }
.vy-book__dates.is-empty .vy-book__field b { color: var(--vy-muted); font-weight: 400; }
.vy-book__dates .vy-book__field:hover { background: var(--vy-ground); }
.vy-book__dates .vy-cal { left: auto; right: -25px; transform: none; top: calc(100% + 10px); }
.vy-book__fields { overflow: visible; }
.vy-book__fields > .vy-book__field--wide { border-top: 1px solid var(--vy-line); }

/* sign-in pages: rotating villa photos */
.vy-auth__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.vy-auth__slide.is-active { opacity: 1; z-index: 1; }
.vy-auth__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s ease-out; }
.vy-auth__slide.is-active img { transform: scale(1); }
.vy-auth__slide span { position: absolute; left: 20px; bottom: 20px; background: rgba(6, 22, 26, .5); backdrop-filter: blur(6px); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.vy-auth__dots { position: absolute; right: 20px; bottom: 26px; z-index: 2; display: flex; gap: 6px; }
.vy-auth__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background .3s, width .3s; }
.vy-auth__dots i.is-active { background: #fff; width: 20px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .vy-auth__slide, .vy-auth__slide img { transition: none; transform: none; } }

/* ---------- map search ---------- */
.vy--map .vy-footer { display: none; }
.vy-mapsearch__bar { position: sticky; top: var(--vy-header-h); z-index: 45; background: var(--vy-surface); border-bottom: 1px solid var(--vy-line); padding: 10px var(--vy-gutter); }
.vy-mapsearch__barin { display: flex; gap: 12px; align-items: center; max-width: 1600px; margin-inline: auto; }
.vy-search--bar { flex: 1; max-width: 860px; }
.vy-search--bar .vy-search__btn { height: 42px; padding-inline: 20px; }
.vy-search--bar .vy-field { padding-block: 4px; }
.vy-mapsearch__barin > .vy-chip-link { white-space: nowrap; height: 48px; }
.vy-mapsearch__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 45%); }
.vy-mapsearch__list { padding: 24px var(--vy-gutter) 64px; min-width: 0; }
.vy-mapsearch__title { font-size: clamp(24px, 2.4vw, 32px); }
.vy-results__tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vy-mapsearch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px; }
.vy-mapsearch__grid .vy-villa h3 { font-size: 18px; }
.vy-mapcard { border-radius: calc(var(--vy-radius) + 6px); padding: 8px; margin: -8px; transition: box-shadow .35s ease, background .35s ease; }
.vy-mapcard.is-inview { box-shadow: 0 0 0 2px rgba(217, 58, 0, .28); background: rgba(217, 58, 0, .03); }
.vy-mapcard.is-hover { box-shadow: 0 0 0 2px rgba(217, 58, 0, .45); }
.vy-mapsearch__map { position: sticky; top: calc(var(--vy-header-h) + 69px); height: calc(100vh - var(--vy-header-h) - 69px); }
#vy-map { position: absolute; inset: 0; background: #E8EEEC; }
#vy-map .leaflet-tile-pane { filter: saturate(.55) brightness(1.04) contrast(.96); }
#vy-map .leaflet-control-zoom a { border-radius: 10px; color: var(--vy-ink); }
#vy-map .leaflet-control-zoom { border: 0; box-shadow: var(--vy-shadow); border-radius: 12px; overflow: hidden; margin: 16px 16px 0 0; }
.vy-pin-wrap { background: none; border: 0; }
.vy-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) translateY(-6px);
  display: inline-block; white-space: nowrap; padding: 6px 10px; border-radius: 999px;
  background: var(--vy-surface); color: var(--vy-ink); font: 700 13px/1 var(--vy-body); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(16, 38, 43, .28), 0 0 0 1px rgba(16, 38, 43, .08);
  transition: transform .2s ease, background .2s, color .2s, box-shadow .2s; cursor: pointer;
}
.vy-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; box-shadow: 2px 2px 3px rgba(16, 38, 43, .12); z-index: -1; }
.vy-pin.is-hover { transform: translate(-50%, -100%) translateY(-6px) scale(1.08); box-shadow: 0 4px 14px rgba(16, 38, 43, .35), 0 0 0 1px rgba(217, 58, 0, .5); }
.vy-pin.is-active { background: var(--vy-accent); color: #fff; transform: translate(-50%, -100%) translateY(-8px) scale(1.16); box-shadow: 0 8px 22px -4px rgba(217, 58, 0, .55); }
.vy-mapsearch__toggle, .vy-mapsearch__close { display: none; }
.vy-mapsearch__peek { position: absolute; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 500; }
.vy-mapsearch__peek a { display: flex; gap: 12px; align-items: center; background: var(--vy-surface); border-radius: 18px; padding: 10px; box-shadow: var(--vy-shadow); max-width: 440px; margin-inline: auto; }
.vy-mapsearch__peek img { width: 96px; height: 76px; object-fit: cover; border-radius: 12px; flex: none; }
.vy-mapsearch__peek span { display: grid; gap: 2px; min-width: 0; }
.vy-mapsearch__peek small { color: var(--vy-sea); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.vy-mapsearch__peek b { font-family: var(--vy-display); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vy-mapsearch__peek em { font-style: normal; font-size: 14px; }
/* filters sheet */
.vy-sheet { border: 0; padding: 0; border-radius: 22px; width: min(460px, calc(100vw - 24px)); max-height: 86vh; background: var(--vy-surface); color: var(--vy-ink); box-shadow: 0 40px 80px -24px rgba(16, 38, 43, .5); }
.vy-sheet::backdrop { background: rgba(6, 22, 26, .45); }
.vy-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--vy-line); position: sticky; top: 0; background: var(--vy-surface); z-index: 2; }
.vy-sheet__head h2 { font-size: 22px; }
.vy-sheet__close { color: var(--vy-ink); border-color: var(--vy-line); }
.vy-sheet__body { padding: 16px 20px 24px; }
@media (max-width: 1100px) {
  .vy-mapsearch__grid { grid-template-columns: 1fr !important; }
  .vy-mapsearch__body { grid-template-columns: minmax(0, 1fr) minmax(320px, 42%); }
}
@media (max-width: 900px) {
  .vy-mapsearch__bar { position: static; }
  .vy-mapsearch__barin { flex-wrap: wrap; }
  .vy-mapsearch__barin > .vy-chip-link { height: 42px; }
  .vy-mapsearch__body { grid-template-columns: 1fr; }
  .vy-mapsearch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vy-mapsearch__map { display: none; position: fixed; inset: 0; top: 0; height: auto; z-index: 80; }
  .vy-mapsearch.is-map-open .vy-mapsearch__map { display: block; }
  .vy-mapsearch__toggle { display: inline-flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; box-shadow: var(--vy-shadow); }
  .vy-mapsearch.is-map-open .vy-mapsearch__toggle { display: none; }
  .vy-mapsearch__close { display: inline-flex; position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 600; box-shadow: var(--vy-shadow); }
  .vy-hide-phone { display: none; }
}
@media (max-width: 600px) { .vy-mapsearch__grid { grid-template-columns: 1fr !important; } }

/* host profile */
.vy-host-page { padding-bottom: 72px; }
.vy-host { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: center; padding-top: 48px; }
.vy-host__avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--vy-accent-soft); color: var(--vy-accent); display: grid; place-items: center; font: 700 36px var(--vy-display); box-shadow: 0 0 0 1px var(--vy-line); }
.vy-host__avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--vy-surface); }
.vy-host h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 4px 0; }
.vy-host__role { color: var(--vy-sea); }
.vy-host__tabs { grid-column: 1 / -1; display: flex; gap: 24px; border-bottom: 1px solid var(--vy-line); margin-top: 20px; }
.vy-host__tabs a { padding: 10px 0; font-weight: 600; color: var(--vy-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vy-host__tabs a[aria-current="page"] { color: var(--vy-ink); border-color: var(--vy-accent); }
.vy-host__bio { max-width: 70ch; }
.vy-block--flush { padding-top: 32px; }
@media (max-width: 600px) { .vy-host { grid-template-columns: 1fr; } }
.vy-banner__title { font-size: clamp(34px, 4.6vw, 56px); max-width: 16ch; margin-top: 12px; color: #fff; }
.vy-block--page .vy-banner { min-height: clamp(420px, 60vh, 620px); }

/* villa page map */
.vy-villa-map { height: clamp(260px, 42vw, 420px); border-radius: var(--vy-radius); overflow: hidden; margin-top: 14px; background: #E8EEEC; z-index: 0; position: relative; }
.vy-villa-map .leaflet-tile-pane { filter: saturate(.55) brightness(1.04) contrast(.96); }

/* phone: results toolbar */
@media (max-width: 600px) {
  .vy-results__bar { flex-wrap: wrap; gap: 10px; }
  .vy-sort > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vy-sort .vy-select { min-width: 0; }
  .vy-results__tools { width: 100%; justify-content: space-between; }
}
@media (max-width: 760px) {
  /* mosaic: a lone last tile fills the row */
  .vy-dest-grid:not(.vy-dest-grid--even) .vy-dest:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* the booking box calendar is a bottom sheet on phones too */
  .vy-book__dates .vy-cal { top: auto; left: 0; right: 0; bottom: 0; }
  /* map search: search bar and filters stacked */
  .vy-mapsearch__barin { flex-direction: column; align-items: stretch; }
  .vy-mapsearch__barin > .vy-chip-link { justify-content: center; }
  .vy-search--bar { max-width: none; }
}
.vy-drawer .vy-btn { display: flex; justify-content: center; align-items: center; }
.vy-doc p, .vy-doc li, .vy-doc a, .vy-prose { overflow-wrap: anywhere; }

/* footer social icons */
.vy-footer__social { display: flex; gap: 10px; margin-top: 32px; }
.vy-footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vy-line); display: grid; place-items: center; color: var(--vy-ink); }
.vy-footer__social a:hover { border-color: var(--vy-accent); color: var(--vy-accent); }
.vy-footer__social svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .vy-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .vy-footer__news { grid-column: 1 / -1; } }

/* ---------- loading feedback ---------- */
@keyframes vy-spin { to { transform: rotate(360deg); } }
.vy-btn.is-loading, button.is-loading { pointer-events: none; opacity: .85; }
.vy-btn.is-loading::before, button.is-loading::before {
  content: ""; width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; margin-right: 2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vy-spin .7s linear infinite;
}
/* A thin bar at the top while the next page loads */
html.vy-leaving::before {
  content: ""; position: fixed; z-index: 200; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--vy-accent); transform-origin: left; animation: vy-leave 8s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes vy-leave { from { transform: scaleX(0); } 20% { transform: scaleX(.45); } to { transform: scaleX(.95); } }
@media (prefers-reduced-motion: reduce) { html.vy-leaving::before { animation: none; transform: scaleX(.6); } }

/* ---------- searchable dropdown ---------- */
.vy-combo { position: relative; }
.vy-combo__input { padding-right: 40px !important; text-overflow: ellipsis; }
.vy-combo__chev { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--vy-muted); pointer-events: none; transition: transform .15s; }
.vy-combo.is-open .vy-combo__chev { transform: rotate(180deg); }
.vy-combo .vy-combo__list { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; max-width: none; background: var(--vy-surface); border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(16, 38, 43, .35), 0 0 0 1px var(--vy-line); min-width: 0; }
.vy-combo .vy-combo__list li { white-space: normal; }
.vy-combo__none { color: var(--vy-muted) !important; cursor: default !important; }
/* fields in a row line up at the top, whatever help text sits under them */
.vy-input { align-content: start; }

/* ---- Booking calendar: price loading feedback (skeleton under day numbers, status line, retry) ---- */
.vy-cal__status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--vy-muted); }
.vy-cal__status[hidden] { display: none; }
.vy-cal__status.is-error { color: var(--vy-ink); }
.vy-cal__spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--vy-line); border-top-color: var(--vy-accent); animation: vy-cal-spin .8s linear infinite; }
.vy-cal__retry { background: none; border: 0; padding: 4px 2px; font: 600 13px var(--vy-body); color: var(--vy-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vy-cal__day small.vy-cal__sk { display: block; width: 22px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--vy-line) 25%, var(--vy-accent-soft) 50%, var(--vy-line) 75%); background-size: 200% 100%; animation: vy-cal-shimmer 1.2s ease-in-out infinite; }
.vy-cal__day.is-start small.vy-cal__sk, .vy-cal__day.is-end small.vy-cal__sk { background: rgba(255, 255, 255, .35); animation: none; }
@keyframes vy-cal-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes vy-cal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vy-cal__spin { animation: none; border-top-color: var(--vy-line); }
  .vy-cal__day small.vy-cal__sk { animation: none; background: var(--vy-line); }
}

/* Home hero: rotating super HD photos */
.vy-hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.vy-hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.4s ease, transform 9s ease-out; }
.vy-hero__slides img.is-active.is-loaded { opacity: 1; transform: scale(1); }
.vy-hero__slides:not([data-hero-rotate]) img { transform: none; }
/* Blurred stand-in under the photo while it downloads */
.vy-hero__ph { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(24px); }
/* Sign-in photos fade in over their stand-in */
.vy-auth__slide { background-size: cover; background-position: center; }
.vy-auth__slide img { opacity: 0; transition: opacity 1s ease, transform 7s ease-out; }
.vy-auth__slide img.is-loaded { opacity: 1; }
.vy-hero__caption { transition: opacity .3s ease; }
.vy-hero__caption.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vy-hero__slides img { transition: opacity .3s; transform: none; } .vy-auth__slide img { transition: opacity .3s; } }

/* Currency switcher: a longer list with names */
.vy-menu__panel--currency { min-width: 230px; max-height: min(70vh, 420px); overflow-y: auto; }
.vy-menu__panel--currency a { display: flex; align-items: baseline; gap: 10px; }
.vy-menu__panel--currency a b { min-width: 2.6em; }
.vy-menu__panel--currency a span { color: var(--vy-muted); font-size: 13px; font-weight: 400; }

/* ---- Photo placeholders ----
   A soft tile of small amenity icons sits behind every photo and shows at once; the photo fades in when it has loaded.
   html.vy-js is set by a tiny script in the page head, which also marks each image as .is-loaded or .is-failed. */
:root {
  --vy-ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' fill='none' stroke='%238a7a64' stroke-opacity='.34' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2818 22%29 rotate%28-8 12 12%29 scale%281.5%29'%3E%3Cpath d='M3 11 12 4l9 7M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/g%3E%3Cg transform='translate%28128 10%29 rotate%280 12 12%29 scale%281.4%29'%3E%3Cpath d='M12 8a4 4 0 1 0 .01 0M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/g%3E%3Cg transform='translate%28226 56%29 rotate%287 12 12%29 scale%281.55%29'%3E%3Cpath d='M12 21c0-5 .5-9 1.5-12M13.5 9c-1-3-4-4-7-3 2 .2 4 1.5 5.5 3.2M13.5 9c1.5-2.5 4.5-3 7-1-2.2-.2-4.2.6-5.8 2.2M13.5 9c.4-2.7 2.7-5 5.3-5.2-1.8 1.2-3 3-3.3 5M13.5 9c-2.5.4-5.2 2.7-5.5 5.7 1-2 2.8-3.7 5-4.3'/%3E%3C/g%3E%3Cg transform='translate%2858 112%29 rotate%28-4 12 12%29 scale%281.45%29'%3E%3Cpath d='M3 14c2 0 2-1.5 4.5-1.5S10 14 12 14s2.5-1.5 4.5-1.5S19 14 21 14M3 19c2 0 2-1.5 4.5-1.5S10 19 12 19s2.5-1.5 4.5-1.5S19 19 21 19M8 4v8M15 4v8M8 6.5h7M8 9.5h7'/%3E%3C/g%3E%3Cg transform='translate%28172 118%29 rotate%28-6 12 12%29 scale%281.5%29'%3E%3Cpath d='M3 19V7M3 15h18v4M21 19v-6a3 3 0 0 0-3-3h-7v5M7 12.2a1.7 1.7 0 1 0 .01 0'/%3E%3C/g%3E%3Cg transform='translate%28250 196%29 rotate%2814 12 12%29 scale%281.4%29'%3E%3Cpath d='M8 8.5a3.5 3.5 0 1 0 .01 0M11.5 12H21M18 12v3M15.5 12v2.2'/%3E%3C/g%3E%3Cg transform='translate%2892 206%29 rotate%284 12 12%29 scale%281.4%29'%3E%3Cpath d='M3 9a14 14 0 0 1 18 0M6 12.5a9.5 9.5 0 0 1 12 0M9 16a5 5 0 0 1 6 0M12 19.2v.01'/%3E%3C/g%3E%3Cg transform='translate%28196 240%29 rotate%28-5 12 12%29 scale%281.35%29'%3E%3Cpath d='M5 16v-4l2-5h10l2 5v4M3 16h18M7.5 16.5a1.2 1.2 0 1 0 .01 0M16.5 16.5a1.2 1.2 0 1 0 .01 0'/%3E%3C/g%3E%3Cg transform='translate%288 258%29 rotate%286 12 12%29 scale%281.0%29'%3E%3Cpath d='M3 11 12 4l9 7M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/g%3E%3C/svg%3E");
  --vy-ph-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2818 22%29 rotate%28-8 12 12%29 scale%281.5%29'%3E%3Cpath d='M3 11 12 4l9 7M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/g%3E%3Cg transform='translate%28128 10%29 rotate%280 12 12%29 scale%281.4%29'%3E%3Cpath d='M12 8a4 4 0 1 0 .01 0M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/g%3E%3Cg transform='translate%28226 56%29 rotate%287 12 12%29 scale%281.55%29'%3E%3Cpath d='M12 21c0-5 .5-9 1.5-12M13.5 9c-1-3-4-4-7-3 2 .2 4 1.5 5.5 3.2M13.5 9c1.5-2.5 4.5-3 7-1-2.2-.2-4.2.6-5.8 2.2M13.5 9c.4-2.7 2.7-5 5.3-5.2-1.8 1.2-3 3-3.3 5M13.5 9c-2.5.4-5.2 2.7-5.5 5.7 1-2 2.8-3.7 5-4.3'/%3E%3C/g%3E%3Cg transform='translate%2858 112%29 rotate%28-4 12 12%29 scale%281.45%29'%3E%3Cpath d='M3 14c2 0 2-1.5 4.5-1.5S10 14 12 14s2.5-1.5 4.5-1.5S19 14 21 14M3 19c2 0 2-1.5 4.5-1.5S10 19 12 19s2.5-1.5 4.5-1.5S19 19 21 19M8 4v8M15 4v8M8 6.5h7M8 9.5h7'/%3E%3C/g%3E%3Cg transform='translate%28172 118%29 rotate%28-6 12 12%29 scale%281.5%29'%3E%3Cpath d='M3 19V7M3 15h18v4M21 19v-6a3 3 0 0 0-3-3h-7v5M7 12.2a1.7 1.7 0 1 0 .01 0'/%3E%3C/g%3E%3Cg transform='translate%28250 196%29 rotate%2814 12 12%29 scale%281.4%29'%3E%3Cpath d='M8 8.5a3.5 3.5 0 1 0 .01 0M11.5 12H21M18 12v3M15.5 12v2.2'/%3E%3C/g%3E%3Cg transform='translate%2892 206%29 rotate%284 12 12%29 scale%281.4%29'%3E%3Cpath d='M3 9a14 14 0 0 1 18 0M6 12.5a9.5 9.5 0 0 1 12 0M9 16a5 5 0 0 1 6 0M12 19.2v.01'/%3E%3C/g%3E%3Cg transform='translate%28196 240%29 rotate%28-5 12 12%29 scale%281.35%29'%3E%3Cpath d='M5 16v-4l2-5h10l2 5v4M3 16h18M7.5 16.5a1.2 1.2 0 1 0 .01 0M16.5 16.5a1.2 1.2 0 1 0 .01 0'/%3E%3C/g%3E%3Cg transform='translate%288 258%29 rotate%286 12 12%29 scale%281.0%29'%3E%3Cpath d='M3 11 12 4l9 7M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/g%3E%3C/svg%3E");
  --vy-ph-tone: #F1E9DD;
  --vy-ph-tone-dark: #1E3B41;
}
.vy-villa__ph, .vy-sum__photo, .vy-bk__img, .vy-gallery__item {
  background: var(--vy-ph-tone) var(--vy-ph) center / 240px auto repeat;
}
.vy-dest, .vy-dtile, .vy-hero, .vy-auth__photo {
  background: var(--vy-ph-tone-dark) var(--vy-ph-dark) center / 240px auto repeat;
}
.vy-mapsearch__peek img { background: var(--vy-ph-tone) var(--vy-ph) center / 120px auto; }
/* A quiet shimmer while the photo is on its way */
.vy-villa__ph::after, .vy-sum__photo::after, .vy-bk__img::after, .vy-gallery__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity .4s ease;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: vy-ph-shine 1.8s ease-in-out infinite;
}
.vy-sum__photo, .vy-bk__img, .vy-gallery__item { position: relative; }
.vy-villa__ph:has(img.is-loaded)::after, .vy-sum__photo:has(img.is-loaded)::after, .vy-bk__img:has(img.is-loaded)::after, .vy-gallery__item:has(img.is-loaded)::after,
.vy-villa__ph:has(img.is-failed)::after { opacity: 0; animation: none; }
@keyframes vy-ph-shine { to { background-position: 250% 0; } }
/* The photo itself: invisible until loaded, then it fades in over the placeholder */
html.vy-js :is(.vy-villa__ph, .vy-sum__photo, .vy-bk__img, .vy-gallery__item, .vy-dest, .vy-dtile) img { opacity: 0; }
html.vy-js :is(.vy-villa__ph, .vy-sum__photo, .vy-bk__img, .vy-gallery__item, .vy-dest, .vy-dtile) img.is-loaded { opacity: 1; }
html.vy-js :is(.vy-villa__ph, .vy-sum__photo, .vy-bk__img, .vy-gallery__item, .vy-dest, .vy-dtile) img.is-failed { opacity: 0; }
.vy-villa__ph img { transition: opacity .5s ease, transform .6s ease; }
.vy-sum__photo img, .vy-bk__img img { transition: opacity .5s ease; }
.vy-gallery__item img { transition: opacity .5s ease, transform .5s ease, filter .3s; }
.vy-dest img, .vy-dtile img { transition: opacity .5s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .vy-villa__ph::after, .vy-sum__photo::after, .vy-bk__img::after, .vy-gallery__item::after { animation: none; }
  .vy-villa__ph img, .vy-sum__photo img, .vy-bk__img img, .vy-gallery__item img, .vy-dest img, .vy-dtile img { transition: opacity .2s linear; }
}
/* Safety net: three seconds after the page has loaded every photo is shown, whatever happened */
html.vy-js-done :is(.vy-villa__ph, .vy-sum__photo, .vy-bk__img, .vy-gallery__item, .vy-dest, .vy-dtile) img:not(.is-failed) { opacity: 1; }

/* ---- Wide layout ----
   Page content runs as wide as the header: its edges sit at the same vertical lines as the logo on the left and the
   buttons on the right (the hero text uses the same lines). Forms and long text keep a comfortable width. */
:root { --vy-edge: clamp(14px, 1.4vw, 16px); --vy-max: 2400px; --vy-pad: calc(var(--vy-edge) + var(--vy-gutter)); }
@media (max-width: 720px) { :root { --vy-pad: 20px; } }
.vy-hero-shell { --vy-hero-gap: var(--vy-edge); }
.vy-wrap { max-width: var(--vy-max); padding-inline: var(--vy-pad); }
.vy-hero__inner { max-width: none; padding-inline: calc(var(--vy-pad) - var(--vy-edge)); }
.vy-hero__caption { right: calc(var(--vy-pad) - var(--vy-edge) + 4px); }
.vy-wrap.vy-co, .vy-wrap.vy-acct, .vy-wrap.vy-host-page { max-width: 1360px; padding-inline: var(--vy-gutter); }
.vy-wrap.vy-error { max-width: 980px; padding-inline: var(--vy-gutter); }
.vy-gallery { grid-template-rows: repeat(2, clamp(220px, 17vw, 340px)); }
@media (min-width: 1500px) {
  .vy-results .vy-villa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .vy-gallery { grid-template-rows: 240px 140px; } }

/* Amenities with icons and groups (Admin > Properties > Amenities) */
.vy-amenities--rich .vy-amenity-group { grid-column: 1 / -1; margin-top: 10px; }
.vy-amenities--rich .vy-amenity-group:first-child { margin-top: 0; }
.vy-amenities--rich .vy-amenity-group[hidden] { display: none; }
.vy-amenities--rich .vy-amenity-group h3 { margin: 0; font: 700 15px var(--vy-body); color: var(--vy-ink); }
.vy-amenities--rich li { align-items: center; }
.vy-amenities--rich svg { width: 20px; height: 20px; margin-top: 0; }

/* Phones: a quick second tap is just a second tap, not a zoom. Pinching with two fingers still works (people who need to enlarge text can), and typing in a field never makes the page jump in size. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, summary, label, input, select, textarea, [role="button"] { touch-action: manipulation; }
@media (max-width: 900px) { html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; } }

/* long "View all N properties in X" links wrap instead of widening the page at 320px */
@media (max-width: 400px) { .vy-link-arrow { white-space: normal; max-width: 100%; } }