/* ============================================================
   STYLES.CSS — how the website LOOKS.
   Brand colour and fonts are set in the ":root" block below.
   Change them there and the whole site follows.
   ============================================================ */

:root{
  /* ---- TRULIV BRAND ---- */
  --brand:      #e05636;
  --brand-dk:   #c1421f;
  --brand-lt:   #fdefeb;   /* very pale wash of the brand colour */
  --brand-mid:  #f6b9a5;

  /* ---- Neutrals ---- */
  --ink:        #16181d;
  --ink-2:      #3d434e;
  --ink-soft:   #6b7280;
  --tint:       #faf8f7;
  --line:       #e8e4e1;
  --line-2:     #f1eeec;
  --white:      #ffffff;

  /* ---- Shape + depth ---- */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --sh-sm:  0 1px 2px rgba(20,22,26,.06), 0 4px 12px -4px rgba(20,22,26,.08);
  --sh:     0 1px 2px rgba(20,22,26,.05), 0 14px 34px -14px rgba(20,22,26,.20);
  --sh-lg:  0 2px 4px rgba(20,22,26,.06), 0 32px 64px -24px rgba(20,22,26,.32);
  --sh-brand: 0 8px 24px -8px rgba(224,86,54,.55);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* ============================================================
   Anything the code marks as `hidden` must actually disappear.

   The browser's own rule for this is very weak, so ANY class that
   sets `display` beats it. `.gate{ display:grid }` did exactly
   that: after a correct password the login card was hidden in the
   code, kept its grid display, and stayed on screen on top of a
   perfectly working dashboard — which looked like the password
   had been rejected.

   Keep this rule. It prevents that whole class of bug.
   ============================================================ */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width:820px; }

/* Hidden but still read out by screen readers */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }


/* ============ TYPE SCALE ============ */
.display{
  font-size:clamp(40px, 6.6vw, 78px);
  line-height:1.02; letter-spacing:-.035em; font-weight:800;
  margin:0 0 22px; text-wrap:balance;
}
.h2{
  font-size:clamp(30px, 4.3vw, 50px);
  line-height:1.08; letter-spacing:-.03em; font-weight:800;
  margin:0 0 16px; max-width:20ch; text-wrap:balance;
}
.h2--wide{ max-width:none; }
.h3{ font-size:21px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }

.lede{ margin:0 0 48px; font-size:19px; color:var(--ink-soft); max-width:58ch; text-wrap:pretty; }


/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  padding:13px 24px; border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn:not(:disabled):active{ transform:translateY(1px) scale(.995); }

.btn--solid{ background:var(--brand); color:#fff; box-shadow:var(--sh-brand); }
.btn--solid:not(:disabled):hover{ background:var(--brand-dk); box-shadow:0 12px 30px -8px rgba(224,86,54,.62); }

.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--tint); border-color:var(--ink-soft); }

.btn--outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--outline:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

.btn--lg{ padding:16px 32px; font-size:16.5px; }
.btn--block{ width:100%; }

/* little spinner shown while we talk to Stayflexi */
.btn.is-loading{ color:transparent !important; position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }


/* ============ NAVIGATION ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  border-bottom:1px solid transparent;

  /* Colour is in this list on purpose, and the timing is short.
     The text switches from white to dark at the same moment the
     white background arrives. If the background lagged behind,
     you would get dark text on a transparent bar over a dark
     photo for a third of a second — unreadable every time you
     start scrolling. */
  transition:background .16s linear, color .16s linear,
             box-shadow .16s linear, border-color .16s linear,
             backdrop-filter .16s linear;
}
.nav__inner{ display:flex; align-items:center; gap:26px; height:80px; }

.logo{
  text-decoration:none; display:flex; align-items:center; gap:11px;
  line-height:1.1; margin-right:auto; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.logo__text{ display:flex; flex-direction:column; }
.logo__name{ font-size:25px; font-weight:800; letter-spacing:-.04em; }
.logo__loc{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.62; }

/* The mark is drawn as a MASK filled with the current text colour,
   not as a plain image. One file then works everywhere: white while
   the header sits over the photo, dark once it turns solid, and it
   can never look like the wrong-coloured logo pasted on top. */
.logo__mark{
  width:34px; height:34px; flex:none; background:currentColor;
  -webkit-mask:url("images/web/logo-mark.png") center/contain no-repeat;
          mask:url("images/web/logo-mark.png") center/contain no-repeat;
}
@media (max-width:760px){
  .logo__mark{ width:30px; height:30px; }
  .logo__name{ font-size:22px; }
}

.nav__links{ display:flex; gap:30px; }
.nav__links a{ font-size:15px; font-weight:500; text-decoration:none; opacity:.82; transition:opacity .2s; }
.nav__links a:hover{ opacity:1; }

.nav__cta{ display:flex; gap:10px; align-items:center; }

.nav--top, .nav--top .logo{ color:#fff; }
.nav--top .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.nav--top .btn--ghost:hover{ background:rgba(255,255,255,.15); border-color:#fff; }

.nav--stuck{
  background:rgba(255,255,255,.88); backdrop-filter:blur(16px) saturate(1.6);
  border-color:var(--line); color:var(--ink); box-shadow:0 1px 24px -8px rgba(20,22,26,.14);
}

/* 44px is the smallest target a thumb hits reliably. */
.burger{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; margin:-6px -8px -6px 0;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.burger span{ display:block; width:24px; height:2px; background:currentColor; border-radius:2px; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* A panel over the page, not part of it. Sitting in the flow meant
   it could be scrolled halfway off under your thumb, which reads as
   the menu simply not working. */
.mobilemenu{
  position:fixed; left:0; right:0; top:var(--navh, 72px); bottom:0; z-index:59;
  display:none; flex-direction:column; padding:10px 24px 26px;
  background:#fff; color:var(--ink);
  overflow-y:auto; overscroll-behavior:contain;
}
.mobilemenu.open{ display:flex; animation:menuIn .2s ease; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px); } }
.mobilemenu a{ text-decoration:none; font-weight:500; padding:14px 0; border-bottom:1px solid var(--line-2); }
.mobilemenu .btn{ margin-top:18px; border-bottom:0; }


/* ============ HERO ============ */
.hero{
  position:relative; min-height:min(100svh, 900px);
  display:flex; align-items:center; padding:140px 0 76px; overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05); animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{ to{ transform:scale(1.12) translateY(-1.5%); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224,86,54,.20) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,12,15,.66) 0%, rgba(10,12,15,.36) 34%, rgba(10,12,15,.86) 100%);
}
.hero__inner{ position:relative; color:#fff; text-align:center; }

.hero__badge{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 26px;
  padding:7px 16px 7px 8px; border-radius:100px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px); font-size:13.5px; font-weight:500;
}
.hero__badge b{ background:var(--brand); color:#fff; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:700; }

.display em{ display:block; font-style:normal; color:var(--brand-mid); }

.hero__sub{
  max-width:600px; margin:0 auto 40px; font-size:clamp(16.5px,2vw,19.5px);
  opacity:.93; text-wrap:pretty;
}


/* ============ THE SEARCH BAR ============ */
.searchbar{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr auto; gap:4px; align-items:stretch;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  padding:10px; border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  max-width:1050px; margin:0 auto; text-align:left;

  /* The hero is white-on-photo. The bar is white-on-white, so it has
     to set its own text colour or everything inside disappears. */
  color:var(--ink);
}
.searchbar__field{
  display:flex; flex-direction:column; justify-content:center;
  padding:10px 18px; border-radius:var(--r); position:relative;
  transition:background .2s;
}
.searchbar__field:hover{ background:var(--tint); }
.searchbar__field + .searchbar__field::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--line);
}
.searchbar__field label, .searchbar__lbl{
  display:block;
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:3px;
}
.searchbar input, .searchbar select{
  border:0; outline:0; background:transparent; padding:0;
  font-family:var(--font); font-size:15.5px; font-weight:600; color:var(--ink);
  width:100%; min-height:26px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.searchbar select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:15px;
  padding-right:20px; text-overflow:ellipsis;
}
.searchbar input:focus-visible, .searchbar select:focus-visible{
  outline:2px solid var(--brand); outline-offset:5px; border-radius:4px;
}
.searchbar .btn{ min-height:64px; padding-inline:34px; }
.searchbar__field.err{ background:#fef2f0; box-shadow:inset 0 0 0 1.5px #f3b9ab; }

.searchbar__note{
  min-height:24px; margin:16px 0 0; font-size:14.5px; font-weight:500;
  color:#ffd2c4; text-align:center;
}


/* ============================================================
   PICKER — the custom dropdown
   ============================================================ */
.pick{ position:relative; }

.pick__trigger{
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--font); font-size:15.5px; font-weight:600; color:var(--ink);
  text-align:left; min-height:26px;
}
.pick__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.pick__chev{ width:15px; height:15px; flex:none; color:var(--ink-soft); transition:transform .22s cubic-bezier(.2,.8,.3,1); }
.pick.is-open .pick__chev{ transform:rotate(180deg); color:var(--brand); }
.pick__trigger:focus-visible{ outline:2px solid var(--brand); outline-offset:5px; border-radius:4px; }

.pick__pop{
  position:absolute; z-index:80; top:calc(100% + 14px); left:-14px;
  width:min(370px, calc(100vw - 32px));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); overflow:hidden;
  animation:pickIn .18s cubic-bezier(.2,.9,.3,1);

  /* MUST be set. The search bar sits inside the hero, which is white
     text on a photo — without this the options inherit white and
     become invisible on the white panel. */
  color:var(--ink);

  /* The hero photo behind this is slowly animating its transform.
     Without its own layer the panel can ghost the moving picture
     through itself. This forces one. */
  transform:translateZ(0);
  isolation:isolate;
}
@keyframes pickIn{ from{ opacity:0; transform:translateY(-8px) scale(.98); } }

.pick__head{ display:none; }

.pick__search{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line-2); background:var(--tint);
}
.pick__search svg{ width:16px; height:16px; flex:none; color:var(--ink-soft); }
.pick__search input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:var(--font); font-size:15px; font-weight:500; color:var(--ink);
}
.pick__search input::placeholder{ color:var(--ink-soft); font-weight:400; }

.pick__list{
  list-style:none; margin:0; padding:8px; max-height:340px; overflow-y:auto; outline:0;
  overscroll-behavior:contain;
}
.pick__list::-webkit-scrollbar{ width:10px; }
.pick__list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; border:3px solid #fff; }

.pick__opt{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; border-radius:var(--r-sm); cursor:pointer;
  transition:background .12s;
}
.pick__opt.is-active{ background:var(--tint); }
.pick__opt.is-on{ background:var(--brand-lt); }

.pick__thumb{
  width:46px; height:38px; flex:none; border-radius:8px; object-fit:cover;
  background:var(--line-2);
}
.pick__ico{
  width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--brand-lt); color:var(--brand); font-weight:700; font-size:14px;
}
.pick__ico svg{ width:18px; height:18px; }

.pick__text{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pick__name{ font-size:15px; font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick__sub{ font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.pick__badge{
  flex:none; font-size:11px; font-weight:700; padding:3px 8px; border-radius:100px;
  background:var(--tint); color:var(--ink-soft); border:1px solid var(--line);
}
.pick__opt.is-on .pick__badge{ background:#fff; border-color:transparent; color:var(--brand-dk); }

.pick__tick{ width:17px; height:17px; flex:none; color:var(--brand); opacity:0; transition:opacity .15s; }
.pick__opt.is-on .pick__tick{ opacity:1; }

.pick__none{ margin:0; padding:26px 18px; text-align:center; font-size:14px; color:var(--ink-soft); }


/* ============================================================
   THE DATE BOXES AND THE CALENDAR
   ============================================================ */
.datef{ position:relative; }

.datef__face{
  display:flex; align-items:baseline; gap:9px;
  width:100%; padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink); font:inherit; text-align:left;
}
.datef__num{
  font-size:26px; font-weight:800; letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums; transition:color .18s;
}
.datef__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.datef__dow{ font-size:13.5px; font-weight:600; line-height:1.15; white-space:nowrap; }
.datef__mon{ font-size:12.5px; font-weight:500; color:var(--ink-soft); line-height:1.15; white-space:nowrap; }

.datef:not(.datef--set) .datef__num{ color:var(--line); }
.datef__face:hover .datef__num{ color:var(--brand); }
.datef__face:focus-visible{ outline:2px solid var(--brand); outline-offset:6px; border-radius:5px; }


/* ---------------- The calendar panel ---------------- */
.cal__back{ position:fixed; inset:0; z-index:99; background:rgba(22,24,29,.28); animation:fadeIn .18s ease; }

.cal{
  position:fixed; z-index:100; width:min(680px, calc(100vw - 24px));
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -20px rgba(22,24,29,.32), 0 4px 14px -6px rgba(22,24,29,.14);
  animation:pickIn .2s cubic-bezier(.2,.9,.3,1);
  overflow:hidden;
}

/* ---- The two ends of the stay, along the top ---- */
/* Sticky so the two ends of the stay and the Done button stay
   put if the months have to scroll inside a short window. */
.cal__top{
  position:sticky; top:0; z-index:3; background:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; border-bottom:1px solid var(--line-2);
}
.cal__legend{ display:flex; align-items:center; gap:14px; min-width:0; }
.cal__leg{
  display:flex; flex-direction:column; gap:2px; padding:7px 14px;
  border-radius:var(--r-sm); border:1.5px solid transparent; transition:.18s;
}
.cal__leg b{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }
.cal__leg i{ font-style:normal; font-size:15px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.cal__leg.is-on{ border-color:var(--brand); background:var(--brand-lt); }
.cal__leg.is-on b{ color:var(--brand-dk); }
.cal__arrow{ color:var(--line); font-size:17px; flex:none; }

.cal__x{
  flex:none; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:var(--tint); color:var(--ink-soft); display:grid; place-items:center;
  transition:background .18s, color .18s;
}
.cal__x svg{ width:16px; height:16px; }
.cal__x:hover{ background:var(--line-2); color:var(--ink); }

/* ---- The months ---- */
.cal__body{ position:relative; padding:20px 18px 8px; }
/* minmax(0,1fr), not 1fr — a plain 1fr will not shrink below its
   content and the second month spills out of the panel. */
.cal__months{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; }
.cal__month{ min-width:0; }

.cal__nav{
  position:absolute; top:18px; width:32px; height:32px; z-index:2;
  border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer;
  color:var(--ink); display:grid; place-items:center; transition:.18s;
}
.cal__nav svg{ width:16px; height:16px; }
.cal__nav:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.cal__nav:disabled{ opacity:.3; cursor:default; }
.cal__nav--prev{ left:18px; }
.cal__nav--next{ right:18px; }

.cal__name{
  margin:0 0 14px; text-align:center;
  font-size:15px; font-weight:700; letter-spacing:-.015em;
}
.cal__dow, .cal__days{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal__dow{ margin-bottom:6px; }
.cal__dow span{
  text-align:center; font-size:11px; font-weight:700; color:var(--ink-soft);
  letter-spacing:.06em;
}

.cal__pad{ aspect-ratio:1; }

.cal__day{
  position:relative; aspect-ratio:1; border:0; background:none; cursor:pointer;
  color:var(--ink); font:inherit; font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums;
  display:grid; place-items:center;
}
/* The pill behind the number. Kept separate from the cell so a
   run of nights joins up into one continuous band. */
.cal__day span{
  position:relative; z-index:1;
  width:100%; height:100%; max-width:38px; max-height:38px;
  display:grid; place-items:center; border-radius:50%;
  transition:background .15s, color .15s;
}
.cal__day:hover:not(:disabled) span{ background:var(--line-2); }

.cal__day.is-mid::before{
  content:""; position:absolute; inset:2px -1px; background:var(--brand-lt);
}
.cal__day.is-start::before, .cal__day.is-end::before{
  content:""; position:absolute; inset:2px -1px; background:var(--brand-lt);
}
.cal__day.is-start::before{ left:50%; }
.cal__day.is-end::before{ right:50%; }
.cal__day.is-start.is-end::before{ display:none; }

.cal__day.is-start span, .cal__day.is-end span{
  background:var(--brand); color:#fff; box-shadow:0 3px 10px -3px rgba(224,86,54,.8);
}

.cal__day:disabled{ cursor:default; color:var(--line); }
.cal__day:disabled span{ text-decoration:line-through; text-decoration-thickness:1px; }
/* Never strike through a day that is actually chosen */
.cal__day.is-start span, .cal__day.is-end span{ text-decoration:none; }
.cal__day:focus-visible span{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---- Nights, clear, done ---- */
.cal__foot{
  position:sticky; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; border-top:1px solid var(--line-2); background:var(--tint);
}
.cal__count{ font-size:14.5px; font-weight:600; }
.cal__actions{ display:flex; align-items:center; gap:8px; }
.cal__clear{
  border:0; background:none; cursor:pointer; color:var(--ink-soft);
  font:inherit; font-size:14px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; padding:8px;
}
.cal__clear:hover{ color:var(--ink); }
.cal__done{ padding:10px 22px; font-size:14.5px; }
.cal__done:disabled{ opacity:.45; cursor:default; }


/* ---------------- On a phone it comes up from the bottom ---------------- */
@media (max-width:720px){
  .cal{
    left:0 !important; right:0; top:auto !important; bottom:0;
    width:100%; max-height:88vh; overflow-y:auto;
    border-radius:22px 22px 0 0; border-bottom:0;
    animation:sheetUp .26s cubic-bezier(.2,.9,.3,1);
  }
  .cal__months{ grid-template-columns:1fr; }
  .cal__body{ padding:18px 14px 8px; }
  .cal__nav{ top:14px; }
  .cal__nav--prev{ left:12px; }
  .cal__nav--next{ right:12px; }
  .cal__day span{ max-width:42px; max-height:42px; }
  .cal__leg{ padding:6px 10px; }
  .cal__leg i{ font-size:14px; }
}

@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }


/* ============================================================
   FORM FIELDS

   These live here, not in booking.css, because the booking pages
   AND the admin dashboard both use them. When they were only in
   booking.css the admin login rendered with its label beside the
   box instead of above it.
   ============================================================ */
.fieldgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; }
.field{ display:flex; flex-direction:column; }
.field--wide{ grid-column:1/-1; }
.field > span{ font-size:13.5px; font-weight:600; margin-bottom:7px; }
.field > span i{ color:var(--brand); font-style:normal; }
.field input, .field textarea, .field select{
  font-family:var(--font); font-size:16px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; outline:0; width:100%; transition:border-color .18s, box-shadow .18s;
}
.field textarea{ resize:vertical; min-height:82px; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(224,86,54,.14);
}
.field small{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.field__err{ font-style:normal; font-size:12.5px; color:#c62f14; font-weight:600; margin-top:6px; min-height:0; }
.field--err input, .field--err textarea{ border-color:#e0603f; background:#fff8f6; }

.check{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--ink-2); margin-bottom:20px; cursor:pointer; }
.check input{ width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--brand); }


/* ============ STATS STRIP ============ */
.stats{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.stats li{ text-align:center; }
.stats b{ display:block; font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.035em; }
.stats span{ display:block; font-size:12.5px; opacity:.78; line-height:1.4; }


/* ============ SEARCH RESULTS (live from Stayflexi) ============ */
.results{ padding:clamp(56px,7vw,88px) 0; background:var(--tint); border-bottom:1px solid var(--line); }
.results[hidden]{ display:none; }

.results__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:34px; }
.results__title{ font-size:clamp(24px,3.2vw,34px); font-weight:800; letter-spacing:-.03em; margin:0 0 6px; }
.results__meta{ margin:0; color:var(--ink-soft); font-size:15.5px; }

.results__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px,1fr)); gap:24px; }

/* the grey shimmer while we wait for Stayflexi */
.skeleton{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.skeleton__img{ aspect-ratio:16/10; background:var(--line-2); }
.skeleton__body{ padding:22px; }
.skeleton__line{ height:13px; border-radius:6px; background:var(--line-2); margin-bottom:11px; }
.skeleton__line:nth-child(2){ width:65%; }
.skeleton__line:nth-child(3){ width:40%; }
.skeleton, .skeleton__img, .skeleton__line{ animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.55; } }

.empty{
  grid-column:1/-1; text-align:center; padding:56px 24px;
  background:#fff; border:1px dashed var(--line); border-radius:var(--r-lg);
}
.empty h3{ margin:0 0 8px; font-size:21px; font-weight:700; }
.empty p{ margin:0 auto 22px; color:var(--ink-soft); max-width:44ch; }


/* ============ PROPERTY CARD ============ */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:transparent; }

.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--line-2); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.card:hover .card__media img{ transform:scale(1.05); }

.card__flag{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:6px 13px; border-radius:100px; font-size:12px; font-weight:700;
  background:var(--brand); color:#fff; box-shadow:0 4px 14px -4px rgba(224,86,54,.7);
}
.card__flag--muted{ background:rgba(22,24,29,.82); backdrop-filter:blur(6px); }

.card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.card__loc{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin:0 0 7px; }
.card__name{ font-size:23px; font-weight:800; letter-spacing:-.025em; margin:0 0 10px; }
.card__blurb{ margin:0 0 18px; font-size:15px; color:var(--ink-soft); }

.card__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 20px; }
.card__tags li{ font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:100px; background:var(--tint); border:1px solid var(--line-2); color:var(--ink-2); }

.card__foot{
  margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; padding-top:20px; border-top:1px solid var(--line-2);
}
.card__price strong{ font-size:26px; font-weight:800; letter-spacing:-.035em; display:block; line-height:1.15; }
.card__price s{ color:var(--ink-soft); font-size:14px; font-weight:500; margin-right:6px; }
.card__price span{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

/* The all-in number, quieter than the headline rate but present,
   so nobody meets the tax for the first time at checkout. */
.card__withtax{ font-weight:600; color:var(--ink) !important; margin-top:5px !important; }

/* --- The button and the price must sit on the same baseline --- */
.card__foot .btn{ flex:none; white-space:nowrap; }


/* ============ GENERIC SECTION ============ */
.section{ padding:clamp(72px,9.5vw,124px) 0; }
.section--tint{ background:var(--tint); }
.section--dark{ background:var(--ink); color:#fff; }
.section--dark .lede{ color:rgba(255,255,255,.7); }
.section--dark .eyebrow{ color:var(--brand-mid); }
.section--dark .eyebrow::before{ background:var(--brand-mid); }


/* ============ BENEFITS ============ */
/* auto-fit rather than a fixed three, so adding or removing a
   promise never leaves one stranded on a row of its own. */
.benefits{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
  gap:22px; margin-top:48px;
}
.benefit{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px 28px; transition:transform .25s, box-shadow .25s;
}
.benefit:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.benefit__icon{
  width:50px; height:50px; border-radius:14px; background:var(--brand-lt);
  display:grid; place-items:center; color:var(--brand); margin-bottom:22px;
}
.benefit p{ margin:0; color:var(--ink-soft); font-size:15.5px; }


/* ============ HOW IT WORKS ============ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:52px; counter-reset:step; }
.step{ position:relative; padding-top:26px; border-top:2px solid rgba(255,255,255,.16); counter-increment:step; }
.step::before{
  content:"0" counter(step);
  position:absolute; top:-16px; left:0;
  font-size:13px; font-weight:800; letter-spacing:.06em;
  background:var(--brand); color:#fff; padding:4px 11px; border-radius:100px;
}
.step h3{ font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0 0 9px; }
.step p{ margin:0; color:rgba(255,255,255,.68); font-size:15.5px; }


/* ============ WHAT IS INCLUDED ============ */
.amenhead{
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px;
  align-items:end; margin-bottom:52px;
}
.amenhead .h2{ margin-bottom:0; }
.lede--tight{ margin:0; font-size:17px; padding-bottom:6px; }

.amengrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

.amencard{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 26px 28px; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.amencard::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-mid));
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.amencard:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:transparent; }
.amencard:hover::before{ transform:scaleX(1); }

.amencard__icon{
  width:48px; height:48px; border-radius:14px; background:var(--brand-lt);
  display:grid; place-items:center; color:var(--brand); margin-bottom:20px;
}
.amencard__icon svg{ width:24px; height:24px; }

.amencard__title{
  font-size:17px; font-weight:700; letter-spacing:-.02em; margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--line-2);
}
.amencard__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.amencard__list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:var(--ink-2); line-height:1.45;
}
.amencard__list li::before{
  content:""; width:16px; height:16px; flex:none; margin-top:3px; border-radius:50%;
  background:var(--brand-lt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e05636' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:10px; background-position:center; background-repeat:no-repeat;
}

.amenfoot{
  margin:34px 0 0; text-align:center; font-size:15.5px; color:var(--ink-soft);
}
.amenfoot a{ color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; }


/* ============ CARD: sold-out and waiting states ============ */
.card--gone{ opacity:.72; }
.card--gone:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.card--gone .card__media img{ filter:grayscale(1); }
.card__gone{ font-size:16px; font-weight:700; color:var(--ink-soft); display:block; }
.card__pricewait{ color:var(--ink-soft); font-size:14px; }
.card__price.is-loading-price{ opacity:.45; transition:opacity .2s; }


/* ============ DEMO MODE RIBBON ============ */
.demobar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px 12px;
  padding:11px 20px calc(11px + env(safe-area-inset-bottom));
  background:var(--ink); color:#fff; font-size:13.5px; text-align:center;
  box-shadow:0 -6px 24px -10px rgba(0,0,0,.5);
}
.demobar strong{
  background:var(--brand); color:#fff; padding:3px 10px; border-radius:100px;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.demobar span{ color:rgba(255,255,255,.78); }
.demobar code{
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size:12.5px; background:rgba(255,255,255,.14); padding:1px 6px; border-radius:5px; color:#fff;
}
/* The bar wraps to two or three lines on a phone, so its height is
   measured at runtime and put into --demobar. Hard-coding 46px sent
   the Book button and the WhatsApp bubble underneath it, off the
   bottom of the screen, on every phone. */
body.has-demobar{ padding-bottom:var(--demobar, 46px); }
body.has-demobar .wa{ bottom:calc(var(--demobar, 46px) + 28px); }

/* Two floating buttons must never land on each other */
body.has-stickybar .wa{ bottom:calc(var(--demobar, 0px) + 96px); }
body.has-demobar .stickybar{ bottom:var(--demobar, 46px); }


/* ============ GALLERY ============ */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px; margin-top:48px; }
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); background:var(--line-2); transition:transform .4s, filter .4s; }
.gallery img:hover{ transform:scale(1.02); filter:saturate(1.12); }
.gallery img:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery img:nth-child(4){ grid-column:span 2; }


/* ============ REVIEWS ============ */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; }
.review__stars{ color:var(--brand); letter-spacing:2px; font-size:15px; margin-bottom:16px; }
.review__text{ font-size:17px; line-height:1.55; margin:0 0 24px; font-weight:450; }
.review__name{ font-weight:700; font-size:15px; margin:0; }
.review__detail{ font-size:13.5px; color:var(--ink-soft); margin:2px 0 0; }


/* ============ FAQ ============ */
.faq{ margin-top:48px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 48px 24px 0; position:relative;
  font-size:18px; font-weight:600; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand); }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:22px; height:22px;
  margin-top:-11px; border-radius:50%; background:var(--brand-lt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e05636' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
  transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq p{ margin:0 0 26px; color:var(--ink-soft); font-size:16px; max-width:66ch; }


/* ============ FINAL CTA ============ */
.cta{ position:relative; background:var(--ink); color:#fff; padding:clamp(72px,9vw,120px) 0; text-align:center; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 100%, rgba(224,86,54,.28) 0%, transparent 70%);
}
.cta__inner{ position:relative; }
.cta__text{ font-size:19px; color:rgba(255,255,255,.76); max-width:50ch; margin:0 auto 36px; }
.cta__buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta__contact{ margin:32px 0 0; font-size:15px; color:rgba(255,255,255,.62); }
.cta__contact a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }
.cta__contact a:hover{ color:#fff; border-color:#fff; }


/* ============ FOOTER ============ */
.footer{ background:#0e1013; color:rgba(255,255,255,.66); font-size:14.5px; padding:68px 0 30px; }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:44px; }
.footer p{ margin:0 0 9px; }
.footer a{ text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer__name{ font-size:24px; font-weight:800; letter-spacing:-.04em; color:#fff; margin-bottom:14px !important; }
.footer__about{ max-width:42ch; }
.footer__h{ color:#fff; font-weight:700; font-size:14px; margin-bottom:16px !important; }
.footer__base{ margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; opacity:.55; }


/* ============ FLOATING WHATSAPP ============ */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.8);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.wa:hover{ transform:scale(1.08); }


/* ============ STICKY BAR ON PHONES ============ */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -8px 30px -14px rgba(20,22,26,.3);
  transform:translateY(115%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.stickybar.show{ transform:translateY(0); }
.stickybar__price strong{ display:block; font-size:15px; font-weight:700; }
.stickybar__price span{ font-size:12.5px; color:var(--ink-soft); }


/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }


/* ============================================================
   TABLETS
   ============================================================ */
@media (max-width:1040px){
  .searchbar{ grid-template-columns:1fr 1fr; }
  .searchbar__field:nth-child(odd)::before{ display:none; }
  .searchbar .btn{ grid-column:span 2; min-height:56px; }
}

@media (max-width:960px){
  .steps, .reviews{ grid-template-columns:repeat(2,1fr); }
  .amengrid{ grid-template-columns:repeat(2,1fr); }
  .amenhead{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gallery img:nth-child(4){ grid-column:auto; }
}

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width:760px){
  body{ font-size:16px; }
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:flex; }
  .hero{ padding:112px 0 64px; min-height:auto; }
  .hero__badge{ font-size:12.5px; }

  .searchbar{ grid-template-columns:1fr; padding:8px; border-radius:var(--r-lg); }
  .searchbar__field + .searchbar__field::before{ left:18px; right:18px; top:0; bottom:auto; width:auto; height:1px; }
  .searchbar .btn{ grid-column:auto; margin-top:4px; }

  .stats{ grid-template-columns:repeat(2,1fr); gap:22px 8px; margin-top:34px; }
  .benefits{ grid-template-columns:1fr 1fr; gap:12px; }
  .steps, .reviews{ grid-template-columns:1fr; }
  .amengrid{ grid-template-columns:1fr; }
  .results__grid{ grid-template-columns:1fr; }
  .gallery{ grid-auto-rows:135px; gap:10px; }
  .footer__inner{ grid-template-columns:1fr; gap:32px; }

  .stickybar{ display:flex; }
  .wa{ bottom:86px; width:52px; height:52px; }

  /* On phones the dropdown becomes a bottom sheet, which is far
     easier to hit with a thumb than a floating panel. */
  .pick.is-open::before{
    content:""; position:fixed; inset:0; z-index:79;
    background:rgba(10,12,15,.45); backdrop-filter:blur(2px);
    animation:fadeIn .2s ease;
  }
  @keyframes fadeIn{ from{ opacity:0; } }

  .pick__pop{
    position:fixed; top:auto; left:0; right:0; bottom:0; width:100%;
    max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
    animation:sheetIn .26s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes sheetIn{ from{ transform:translateY(100%); } }

  .pick__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px 14px; border-bottom:1px solid var(--line-2);
  }
  .pick__title{ font-size:17px; font-weight:700; letter-spacing:-.02em; }
  .pick__close{
    background:var(--tint); border:0; width:32px; height:32px; border-radius:50%;
    font-size:22px; line-height:1; color:var(--ink-soft); cursor:pointer;
  }
  .pick__list{ max-height:min(50vh, 380px) !important; padding:8px 12px 16px; }
  .pick__opt{ padding:12px 10px; }
  .pick__thumb{ width:52px; height:44px; }
}

/* People who ask their device to reduce motion get none of it */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   THE VILLA PANEL

   Replaces a dropdown. A dropdown could only ever cover something
   — the headline above it or the numbers below — and could not
   show a photo, which is what people actually choose a villa on.
   ============================================================ */
.villapick__trigger{
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--font); font-size:15.5px; font-weight:600; color:var(--ink);
  text-align:left; min-height:26px;
}
.villapick__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.villapick__chev{ width:15px; height:15px; flex:none; color:var(--ink-soft); transition:transform .22s; }
.villapick__trigger[aria-expanded="true"] .villapick__chev{ transform:rotate(180deg); color:var(--brand); }
.villapick__trigger:focus-visible{ outline:2px solid var(--brand); outline-offset:5px; border-radius:4px; }

body.no-scroll{ overflow:hidden; }

.vmodal{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:28px; }
.vmodal__back{
  position:absolute; inset:0; background:rgba(10,12,15,.6);
  backdrop-filter:blur(4px); animation:fadeIn .2s ease;
}
.vmodal__box{
  position:relative; width:min(940px,100%); max-height:min(88vh,860px);
  background:#fff; border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-lg);
  color:var(--ink);
  animation:vmIn .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes vmIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } }

.vmodal__top{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 26px 18px; border-bottom:1px solid var(--line-2);
}
.vmodal__heading{ margin-right:auto; }
.vmodal__title{ margin:0 0 3px; font-size:23px; font-weight:800; letter-spacing:-.03em; }
.vmodal__sub{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.vmodal__x{
  flex:none; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:var(--tint); color:var(--ink-soft); display:grid; place-items:center;
}
.vmodal__x svg{ width:18px; height:18px; }
.vmodal__x:hover{ background:var(--line); color:var(--ink); }

.vmodal__search{
  display:flex; align-items:center; gap:11px;
  padding:14px 26px; border-bottom:1px solid var(--line-2); background:var(--tint);
}
.vmodal__search svg{ width:17px; height:17px; flex:none; color:var(--ink-soft); }
.vmodal__search input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:var(--font); font-size:15.5px; font-weight:500; color:var(--ink);
}

/* align-content:start and a floor on the row height, because the
   rows were being sized to share the panel's height between them.
   On a phone that squeezed every card to 61px and clipped the price
   clean off the bottom — the number a guest is actually looking for. */
.vmodal__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  grid-auto-rows:minmax(120px, auto); align-content:start;
  padding:18px 26px 26px; overflow-y:auto; overscroll-behavior:contain;
}
.vmodal__none{ padding:0 26px 26px; margin:0; font-size:14.5px; color:var(--ink-soft); }


/* ---------------- One villa in the panel ---------------- */
.vcard{
  display:flex; align-items:stretch; gap:0; position:relative; min-height:120px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:pointer; text-align:left; padding:0;
  font-family:var(--font); color:var(--ink);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.vcard:hover{ border-color:var(--brand-mid); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.vcard.is-on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.vcard:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.vcard.is-gone{ opacity:.62; }
.vcard.is-gone:hover{ transform:none; }
.vcard.is-gone .vcard__media img{ filter:grayscale(.9); }

.vcard__media{ position:relative; width:132px; flex:none; background:var(--line-2); }
.vcard__media img{ width:100%; height:100%; object-fit:cover; }

.vcard__badge{
  position:absolute; top:8px; left:8px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:3px 8px; border-radius:100px; color:#fff; white-space:nowrap;
}
.vcard__badge--brand{ background:var(--brand); }
.vcard__badge--warn { background:#c9761b; }
.vcard__badge--good { background:#12703f; }
.vcard__badge--cool { background:#2a6f97; }
.vcard__badge--gone { background:rgba(22,24,29,.85); }

.vcard__body{ display:flex; flex-direction:column; gap:3px; padding:15px 16px; flex:1; min-width:0; }
.vcard__name{ font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.vcard__meta{ font-size:12.5px; color:var(--ink-soft); }
.vcard__price{ margin-top:6px; font-size:16px; font-weight:800; letter-spacing:-.025em; }
.vcard__price em{ display:block; font-style:normal; font-size:11.5px; font-weight:500; color:var(--ink-soft); letter-spacing:0; }
.vcard__price--gone{ font-size:13px; font-weight:600; color:var(--ink-soft); letter-spacing:0; }
.vcard__price--soft{ font-size:13px; font-weight:500; color:var(--ink-soft); letter-spacing:0; }

.vcard__tick{
  position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center;
}
.vcard__tick svg{ width:13px; height:13px; }

.vcard--all{ grid-column:1/-1; align-items:center; }
.vcard--all .vcard__allicon{
  width:52px; height:52px; margin:14px 0 14px 16px; flex:none; border-radius:13px;
  background:var(--brand-lt); color:var(--brand); display:grid; place-items:center;
}
.vcard--all .vcard__allicon svg{ width:22px; height:22px; }

/* villa cards on the home page can carry the same badges */
.card__flag--gone { background:rgba(22,24,29,.85) !important; }
.card__flag--warn { background:#c9761b !important; }
.card__flag--good { background:#12703f !important; }
.card__flag--cool { background:#2a6f97 !important; }


@media (max-width:760px){
  .vmodal{ padding:0; }
  .vmodal__box{
    width:100%; max-height:100%; height:100%; border-radius:0;
    animation:sheetIn .28s cubic-bezier(.2,.9,.3,1);
  }
  .vmodal__top{ padding:18px 18px 14px; }
  .vmodal__title{ font-size:20px; }
  .vmodal__search{ padding:12px 18px; }
  .vmodal__grid{ grid-template-columns:1fr; padding:14px 16px 28px; gap:10px; }
  .vcard__media{ width:112px; }
  .vcard--all .vcard__allicon{ width:44px; height:44px; margin:12px 0 12px 14px; }
}

/* A small pulse once someone is clearly tapping the logo on purpose,
   so they know the count is going up and have not just broken the link. */

  100% { transform:scale(1); }
}


/* ============================================================
   THE BRANDED WAIT

   Stayflexi can take a few seconds to price eight villas, and a
   bare spinner makes that feel like something has gone wrong.
   The mark draws itself, the words change once, and the wait
   reads as care rather than as a stall.
   ============================================================ */
.loading{ text-align:center; padding:38px 0 46px; }

.loading__mark{
  width:64px; height:64px; margin:0 auto 26px; position:relative;
  color:var(--brand);
}
.loading__mark::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:2px solid var(--brand); opacity:.16;
  animation:haloOut 2.4s cubic-bezier(.3,.7,.4,1) infinite;
}
.loading__mark::after{
  content:""; position:absolute; inset:0;
  background:currentColor;
  -webkit-mask:url("images/web/logo-mark.png") center/contain no-repeat;
          mask:url("images/web/logo-mark.png") center/contain no-repeat;
  animation:markBreathe 2.4s ease-in-out infinite;
}
@keyframes haloOut{
  0%   { transform:scale(.72); opacity:.32; }
  70%  { transform:scale(1.14); opacity:0; }
  100% { transform:scale(1.14); opacity:0; }
}
@keyframes markBreathe{
  0%,100% { transform:scale(1);    opacity:1;   }
  50%     { transform:scale(1.06); opacity:.72; }
}

.loading__line{
  font-size:clamp(19px,2.6vw,25px); font-weight:700; letter-spacing:-.02em;
  margin:0 0 10px; text-wrap:balance;
}
.loading__sub{ font-size:15px; color:var(--ink-soft); margin:0; }

/* The words swap once, so a long wait does not feel stuck. */
.loading__line span{ display:inline-block; animation:wordIn .5s ease both; }
@keyframes wordIn{
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}

/* Somebody who has asked for less movement gets the words and the
   mark, and none of the motion. */
@media (prefers-reduced-motion:reduce){
  .loading__mark::before,
  .loading__mark::after,
  .loading__line span{ animation:none; }
  .loading__mark::before{ opacity:.16; }
}

/* Inside the results grid it must span every column, or it sits in
   a one-third-width sliver at the left. */
.loading--grid{ grid-column:1 / -1; }


/* The lede under "How it works" sits on the dark band, where the
   ordinary muted grey is barely there. */
.lede--light{ color:rgba(255,255,255,.72); margin-bottom:0; }

/* One eyebrow is a full sentence rather than a label — "A curated
   collection of eight exceptional villas". At 12px, uppercase and
   letter-spaced it turns into a wall, so it is allowed to be a
   little larger and to sit in sentence case. */
.eyebrow--long{
  text-transform:none; letter-spacing:.01em; font-size:14px;
  font-weight:600; max-width:46ch;
}