/* ===================================================================
   LIV VUE — interface layer
   Loaded after modern.css, so it has the last word.

   The site had two styling systems stacked on each other: the original
   flat 2015-era booking widget, and a later pass of !important overrides.
   Where they disagreed you got hairline grids next to pill buttons and
   raw browser date fields next to custom selects.

   This file settles it. One treatment for every control, one search bar,
   one booking flow, modelled on how the big travel sites actually work:
   the summary is always populated, the dates always say how many nights,
   and the next step is always obvious.
   =================================================================== */

:root {
  --lv-field-bg: #f5f1ea;
  --lv-field-bg-focus: #ffffff;
  --lv-field-border: rgba(20, 35, 52, 0.10);
  --lv-ring: rgba(201, 173, 152, 0.38);
  --lv-card: #ffffff;
  --lv-shadow-sm: 0 1px 2px rgba(20, 35, 52, .04), 0 4px 16px rgba(20, 35, 52, .05);
  --lv-shadow-md: 0 2px 6px rgba(20, 35, 52, .05), 0 12px 34px rgba(20, 35, 52, .09);
  --lv-shadow-lg: 0 8px 20px rgba(20, 35, 52, .08), 0 26px 60px rgba(20, 35, 52, .13);
  --lv-r-sm: 10px;
  --lv-r-md: 14px;
  --lv-r-lg: 20px;
  --lv-wa: #128c7e;          /* WhatsApp's own darker brand green — sits with navy */
  --lv-wa-hover: #0f7a6e;
}

/* ── 1. Form controls ────────────────────────────────────────────────
   Every input, select and textarea on the site, whatever page it is on. */

.form-group,
.lv-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.form-group > label,
.lv-field > label,
.lv-label {
  font-size: 0.62rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust-dark);
  font-weight: 600;
  margin: 0 !important;
  line-height: 1.4;
}

.form-group input,
.form-group select,
.form-group textarea,
.lv-field input,
.lv-field select,
.lv-field textarea,
.lv-input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--lv-field-border) !important;
  border-radius: var(--lv-r-sm) !important;
  background: var(--lv-field-bg) !important;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem !important;
  font-weight: 400;
  line-height: 1.3;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-group textarea,
.lv-field textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.7;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.lv-field input::placeholder,
.lv-field textarea::placeholder {
  color: rgba(107, 122, 138, .7);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.lv-field input:hover,
.lv-field select:hover,
.lv-field textarea:hover {
  border-color: rgba(20, 35, 52, .2) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.lv-field input:focus,
.lv-field select:focus,
.lv-field textarea:focus {
  outline: none;
  background: var(--lv-field-bg-focus) !important;
  border-color: var(--dust) !important;
  box-shadow: 0 0 0 4px var(--lv-ring) !important;
}

/* The browser's own dropdown arrow differs per OS. Use one of ours. */
.form-group select,
.lv-field select,
select.lv-input {
  padding-inline-end: 2.6rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a8907a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px 8px !important;
  cursor: pointer;
}
html[dir="rtl"] .form-group select { background-position: left 1rem center !important; }

/* Date fields: the raw dd/mm/yyyy control with the OS calendar glyph was the
   most unfinished-looking thing on the site. Hide it and use our own. */
.form-group input[type="date"],
.lv-field input[type="date"],
input[type="date"].lv-input {
  padding-inline-end: 2.6rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8907a' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.95rem center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset-inline-end: 0;
  width: 2.8rem;
  height: 100%;
  cursor: pointer;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none; }
.form-group,
.lv-field { position: relative; }

/* An empty date field reading "dd/mm/yyyy" looks broken. Quieten it. */
input[type="date"]:not(:focus):invalid,
input[type="date"]:not(:focus)[value=""] { color: rgba(107, 122, 138, .75); }


/* ── 2. Buttons ──────────────────────────────────────────────────── */

.btn-primary,
.lv-btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover,
.lv-btn:hover { transform: translateY(-1px); }

.lv-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.5rem;
  border: none;
  border-radius: var(--lv-r-sm);
  background: var(--navy);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lv-shadow-sm);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lv-btn-solid:hover { background: #1d3349; transform: translateY(-1px); box-shadow: var(--lv-shadow-md); }
.lv-btn-solid:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* WhatsApp: the bright #25D366 fought the navy. WhatsApp's own darker
   brand green is still unmistakable and sits with the palette. */
.lv-btn-wa {
  background: var(--lv-wa) !important;
  color: #fff !important;
  border-color: var(--lv-wa) !important;
}
.lv-btn-wa:hover { background: var(--lv-wa-hover) !important; }
.wa-float { background: var(--lv-wa) !important; }

button[onclick*="wa.me"],
button[onclick*="whatsapp"],
button[onclick*="WhatsApp"] {
  background: var(--lv-wa) !important;
  border-radius: var(--lv-r-sm) !important;
  min-height: 52px;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}


/* ── 3. The hero search bar ──────────────────────────────────────────
   Was: five cells divided by full-height hairlines, with the submit
   button hanging over the edge onto the stats row below.
   Now: one raised card, fields as separate blocks, button contained. */

.search-hero-bar {
  margin: -4rem 3rem 0 !important;
  border-radius: var(--lv-r-lg) !important;
  background: var(--lv-card) !important;
  box-shadow: var(--lv-shadow-lg) !important;
  overflow: visible !important;
  position: relative;
  z-index: 60;
}

.search-tabs-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.9rem 1.25rem 0 !important;
  border-bottom: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.search-tabs-row::-webkit-scrollbar { display: none; }

.stab {
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  padding: 0.5rem 1.1rem !important;
  font-size: 0.63rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: var(--muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.stab:hover { background: var(--lv-field-bg) !important; color: var(--navy) !important; }
.stab.active {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  box-shadow: none !important;
}

#search-fields {
  display: grid !important;
  grid-template-columns: 1.5fr 1.2fr 1fr 1.2fr auto !important;
  gap: 0.6rem !important;
  align-items: end !important;
  padding: 1rem 1.25rem 1.25rem !important;
}
#search-fields > div {
  padding: 0 !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
#search-fields label {
  font-size: 0.6rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust-dark) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: block;
}
#search-fields select,
#search-fields input {
  width: 100% !important;
  min-height: 52px;
  padding: 0.8rem 1rem !important;
  border: 1px solid var(--lv-field-border) !important;
  border-radius: var(--lv-r-sm) !important;
  background: var(--lv-field-bg) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
  appearance: none;
  -webkit-appearance: none;
}
#search-fields select {
  padding-inline-end: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a8907a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px 8px !important;
}
#search-fields input[type="date"] {
  padding-inline-end: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8907a' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 16px 16px !important;
}
#search-fields select:focus,
#search-fields input:focus {
  outline: none;
  background-color: #fff !important;
  border-color: var(--dust) !important;
  box-shadow: 0 0 0 4px var(--lv-ring) !important;
}
#search-fields button[type="submit"] {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 2rem !important;
  border-radius: var(--lv-r-sm) !important;
  background: var(--navy) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap;
  box-shadow: var(--lv-shadow-sm);
  transition: background .18s ease, transform .18s ease;
  align-self: end;
}
#search-fields button[type="submit"]:hover { background: #1d3349 !important; transform: translateY(-1px); }


/* ── 4. Units filter bar ─────────────────────────────────────────── */

.filter-bar-wrap {
  gap: 0.75rem !important;
  padding: 1rem 3rem !important;
  background: var(--lv-card) !important;
  border-bottom: 1px solid var(--border) !important;
}
.filter-bar-wrap select {
  min-height: 46px;
  padding: 0.6rem 2.4rem 0.6rem 0.9rem !important;
  border: 1px solid var(--lv-field-border) !important;
  border-radius: var(--lv-r-sm) !important;
  background-color: var(--lv-field-bg) !important;
  font-size: 0.85rem !important;
  color: var(--navy) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a8907a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 12px 8px !important;
}
.filter-bar-wrap select:focus {
  outline: none;
  border-color: var(--dust) !important;
  box-shadow: 0 0 0 4px var(--lv-ring) !important;
  background-color: #fff !important;
}
.filter-bar-wrap button:not(.cat-tab) {
  min-height: 46px;
  border-radius: var(--lv-r-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  padding: 0 1.6rem !important;
}
.cat-tab {
  border-radius: var(--lv-r-sm) !important;
  transition: background .18s ease, color .18s ease;
}
.cat-tab:hover { background: var(--lv-field-bg) !important; }

/* The active tab kept a 2px bottom border as its indicator. Rounding the
   corners curled that underline into a cup that hung below the row, so the
   indicator becomes a filled tab instead. */
.cat-tab.active {
  border-bottom-color: transparent !important;
  background: var(--lv-field-bg) !important;
  color: var(--navy) !important;
}
.cat-tab.active svg { stroke: var(--navy); }

#active-filters {
  border-radius: var(--lv-r-sm) !important;
  border-color: var(--border-dust) !important;
  background: var(--lv-field-bg) !important;
}


/* ── 5. Cards ────────────────────────────────────────────────────── */

.prop-card {
  border-radius: var(--lv-r-md) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
  box-shadow: var(--lv-shadow-sm);
  transition: transform .28s ease, box-shadow .28s ease;
}
.prop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lv-shadow-md);
}
.badge { border-radius: 999px !important; }
span.book-btn {
  border-radius: 999px !important;
  border-color: var(--border-dust) !important;
  padding: 0.35rem 0.9rem !important;
}


/* ── 6. Booking page ─────────────────────────────────────────────── */

.lv-bk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
  gap: 2rem;
  align-items: start;
}

.lv-card {
  background: var(--lv-card);
  border: 1px solid var(--border);
  border-radius: var(--lv-r-md);
  box-shadow: var(--lv-shadow-sm);
  padding: 1.75rem;
}
.lv-card + .lv-card { margin-top: 1.25rem; }

/* Step headers: the hard navy squares read as a 2010s form wizard. */
.lv-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.lv-step-n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--dust);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.lv-step-t {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0;
}
.lv-step-note {
  margin-inline-start: auto;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 400;
}

/* Sticky summary, always populated */
.lv-summary {
  position: sticky;
  top: 92px;
  background: var(--lv-card);
  border: 1px solid var(--border);
  border-radius: var(--lv-r-md);
  box-shadow: var(--lv-shadow-md);
  overflow: hidden;
}
.lv-summary-media {
  position: relative;
  height: 168px;
  background: var(--platinum);
  overflow: hidden;
}
.lv-summary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lv-summary-body { padding: 1.4rem; }
.lv-summary-zone {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dust-dark);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.lv-summary-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 0.45rem;
}
.lv-summary-loc {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

/* The dates block — the thing a booking site always shows back to you */
.lv-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--lv-r-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.lv-dates-cell { padding: 0.8rem 0.9rem; background: var(--lv-field-bg); min-width: 0; }
.lv-dates-cell .k {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust-dark);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.lv-dates-cell .v {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-dates-cell .d { font-size: 0.66rem; color: var(--muted); font-weight: 400; }
.lv-nights {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
  background: var(--navy);
  color: var(--dust);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

.lv-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.4rem 0;
}
.lv-line strong { color: var(--navy); font-weight: 600; }
.lv-total {
  border-top: 1px solid var(--border);
  margin-top: 0.6rem;
  padding-top: 0.8rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy);
}

.lv-trust { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.lv-trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0.45rem;
}
.lv-trust svg { width: 14px; height: 14px; flex: none; margin-top: 3px; stroke: var(--green, #2d9c6e); fill: none; stroke-width: 2; }

.lv-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.4rem; }
.lv-actions .lv-note { font-size: 0.68rem; color: var(--muted); text-align: center; line-height: 1.6; }


/* ── 7. Unit page: booking sidebar + calendar ────────────────────── */

.unit-book-card,
div[style*="position:sticky"][style*="top:90px"] {
  border-radius: var(--lv-r-md) !important;
  box-shadow: var(--lv-shadow-md) !important;
  border-color: var(--border) !important;
}

.cal-day {
  border-radius: 8px !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font-size: 0.82rem;
  color: var(--navy);
  background: transparent !important;
  transition: background .15s ease, color .15s ease;
}
.cal-day:not(.empty):not(.past):hover { background: var(--lv-field-bg); cursor: pointer; }
.cal-day.past { color: rgba(107, 122, 138, .38); }
.cal-day.selected { background: var(--navy) !important; color: #fff !important; font-weight: 600; }
.cal-day.booked { background: #fdf0ee !important; color: #c0392b !important; text-decoration: line-through; }
.cal-day-name {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 0.4rem;
  font-weight: 600;
}
#unit-gallery { border-radius: var(--lv-r-md); overflow: hidden; }


/* ── 8. Success + notice panels ──────────────────────────────────── */

#success-msg, #success-bar, #lv-fallback {
  border-radius: var(--lv-r-sm) !important;
}


/* ── 9. Narrow screens ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .lv-bk-grid { grid-template-columns: 1fr; }
  .lv-summary { position: static; }
  .search-hero-bar { margin: -2.5rem 1.5rem 0 !important; }
  #search-fields { grid-template-columns: 1fr 1fr !important; }
  #search-fields > div:last-child { grid-column: 1 / -1; }
  #search-fields button[type="submit"] { width: 100%; }
  .filter-bar-wrap { padding: 1rem 1.5rem !important; }
}

@media (max-width: 640px) {
  .search-hero-bar { margin: -1.5rem 1rem 0 !important; border-radius: var(--lv-r-md) !important; }
  #search-fields { grid-template-columns: 1fr !important; padding: 0.9rem 1rem 1.1rem !important; }
  .lv-card { padding: 1.25rem; }
  .lv-summary-media { height: 150px; }
  .lv-dates { grid-template-columns: 1fr auto 1fr; }
  .lv-dates-cell { padding: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .prop-card:hover, .btn-primary:hover, .lv-btn:hover,
  .lv-btn-solid:hover, #search-fields button[type="submit"]:hover { transform: none; }
}


/* The floating WhatsApp button covered the summary card on the booking
   page — where the form already offers a WhatsApp button of its own. */
body.lv-booking .wa-float { display: none !important; }

/* The booking form's own submit button kept its square inline styling
   while everything around it had been rounded. */
#booking-submit,
#contact-submit {
  border-radius: var(--lv-r-sm) !important;
  min-height: 54px;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  box-shadow: var(--lv-shadow-sm);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#booking-submit:hover:not(:disabled),
#contact-submit:hover:not(:disabled) {
  background: #1d3349 !important;
  transform: translateY(-1px);
  box-shadow: var(--lv-shadow-md);
}

/* The raised search card ends flush against the stats strip, so its
   shadow had nowhere to fall. Give the strip room to receive it. */
.search-hero-bar + div { padding-top: 2rem; }

@media (max-width: 640px) {
  .search-hero-bar + div { padding-top: 1.25rem; }
}

/* The day cells were solid white tiles on a cream page, which read as a
   spreadsheet. Only hover and selection carry a fill now. */
.cal-day:hover:not(.booked):not(.past):not(.empty) {
  background: var(--lv-field-bg) !important;
  border-color: transparent !important;
}
#cal-grid { gap: 2px !important; }


/* ── 10. Content must never depend on an animation to be visible ─────
   Two different scroll-reveal systems shipped on this site: about.html
   hides .fade-up in CSS and waits for a .visible class, while
   modern-animations.js sets opacity:0 *inline* on cards and waits for
   .revealed. On /about neither fired, so the whole team section, the
   headings and the closing call to action were invisible — permanently,
   not just until you scrolled.

   A CSS animation outranks an inline style, so this is a backstop that
   cannot be beaten. It fired at two seconds originally, which meant the
   About page really did sit blank for two seconds whenever the observers
   failed. This pattern has now broken content three separate ways, so
   reliability wins over the scroll-triggered effect: everything fades in
   just after load, and nothing is ever invisible for longer than that. */

@keyframes lvEnsureVisible {
  to { opacity: 1; transform: none; }
}

.fade-up, .fade-left, .fade-right,
.prop-card, .value-card, .team-card, .stat-item,
.timeline-item, .section-intro, .about-hero-content,
.contact-card, .feature-item {
  animation: lvEnsureVisible 0.45s ease 0.35s forwards;
}

/* Someone who asked for less motion should not be waiting on a reveal. */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right,
  .prop-card, .value-card, .team-card, .stat-item,
  .timeline-item, .section-intro, .about-hero-content,
  .contact-card, .feature-item {
    animation: none;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ── 11. Touch targets on phones ─────────────────────────────────────
   Audited every tappable thing at 375px: the nav "Book Now" was 28px
   tall, the rental-period tabs 31px, and every footer link 15px. The
   usual floor is 44px, and on a footer full of 15px links you cannot
   help hitting the wrong one. Padding does the work, so nothing moves
   visually on desktop. */

@media (max-width: 900px) {
  nav > a,
  .nav-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-btn { padding: 0 1.3rem !important; }

  .stab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .link-all,
  .card-loc a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .foot-col ul li { margin-bottom: 0 !important; }
  .foot-col ul li a,
  .foot-col .ci a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    line-height: 1.5;
  }
  .foot-col .ci { min-height: 42px; }

  .soc { width: 44px !important; height: 44px !important; }
  .socials { gap: 0.6rem !important; }

  /* The period tabs scroll sideways; without an edge hint the third one
     looks like it is not there. */
  .search-tabs-row {
    -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, #000 84%, transparent 100%);
    padding-right: 2rem !important;
  }
}

/* The last few, found by sweeping each page at 375px. */
@media (max-width: 900px) {
  /* breadcrumbs were 13px tall */
  a[style*="color:var(--dust-dark)"],
  nav + div a,
  [class*="breadcrumb"] a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* the contact panel's phone and email lines */
  .ci a,
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* calendar month arrows were 30x30 */
  #cal-month + div button,
  button[onclick*="changeMonth"] {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--lv-r-sm) !important;
    font-size: 1rem !important;
  }

  /* the unit gallery took 564px of an 812px screen before you reached
     a single word about the unit */
  #unit-gallery {
    grid-template-rows: 170px 170px !important;
    max-height: 344px !important;
    gap: 3px !important;
  }
}

/* On a phone the 2x2 gallery mosaic turned into two cramped strips and
   pushed the unit's name below the fold. One clean photo instead — the
   rest are one tap away in the lightbox. */
@media (max-width: 640px) {
  #unit-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: 260px !important;
    max-height: 260px !important;
  }
  #unit-gallery > div { grid-row: auto !important; }
  #unit-gallery > div:not(:first-child) { display: none !important; }
  #unit-gallery > div:first-child { position: relative; }
  #unit-gallery > div:first-child::after {
    content: "View all photos";
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background: rgba(20, 35, 52, .82);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    pointer-events: none;
  }

  /* the floating button reads as colliding with content unless it is
     clearly lifted off the page */
  .wa-float {
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 0 0 4px rgba(249, 246, 238, .9), 0 6px 20px rgba(18, 140, 126, .45) !important;
  }
}

/* Four stats side by side at 375px clipped the last label to
   "CONSULTANT". Two by two instead. */
@media (max-width: 640px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem 1rem !important;
  }
  .hero-stat-label { white-space: normal !important; }
}


/* Once the sweep has marked something revealed, it is revealed — no
   waiting on an animation, and no depending on a rule injected by
   another script that may or may not have got that far. */
.revealed,
.visible,
.fade-up.visible,
.fade-left.visible,
.fade-right.visible {
  opacity: 1 !important;
  transform: none !important;
}


/* ── 12. Contrast ────────────────────────────────────────────────────
   Measured every text/background pair on the site. Three came in under
   the 4.5:1 the WCAG AA level asks for on normal-size text:

     field labels (--dust-dark on white)   3.03:1
     secondary copy (--muted on cream)     4.07:1
     white on the WhatsApp green           4.14:1

   These are the smallest darkenings that clear 4.5:1 against white, the
   cream page and the field fill at once — the hues are unchanged, so the
   palette still reads the same. */

:root {
  --dust-dark: #826a54;   /* was #a8907a — 3.03:1, now 5.07:1 on white */
  --muted:     #617080;   /* was #6b7a8a — 4.07:1, now 5.08:1 on white */
  --lv-wa:     #0b8577;   /* was #128c7e — 4.14:1, now 4.53:1 with white */
  --lv-wa-hover: #096b60;
}

/* the inline styles that hard-code the old values */
[style*="color:var(--dust-dark)"],
[style*="color: var(--dust-dark)"] { color: var(--dust-dark) !important; }
[style*="color:var(--muted)"],
[style*="color: var(--muted)"] { color: var(--muted) !important; }

.card-avail{justify-content:flex-end;}

/* ── the destination chooser on /units ───────────────────────────────
   Two small cards. A destination is a name and a mark, not a photo —
   which also means a region needs nothing but a row of data to exist. */
.lv-regions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.lv-region{
  display:flex; align-items:center; gap:1rem; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--border); border-radius:3px;
  padding:1.25rem 1.6rem 1.25rem 1.35rem; min-width:250px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lv-region:hover{
  border-color:var(--dust); transform:translateY(-2px);
  box-shadow:0 12px 28px -18px rgba(20,35,52,.45);
}
.lv-region-icon{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--navy);
}
.lv-region-icon svg{width:22px; height:22px; display:block;}
.lv-region:hover .lv-region-icon{background:rgba(201,173,152,.2);}
.lv-region-text{display:flex; flex-direction:column; gap:.2rem;}
.lv-region-name{font-size:1.05rem; font-weight:400; color:var(--navy); line-height:1.3;}
.lv-region-count{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dust-dark);
}
.lv-region.is-soon{opacity:.72;}
.lv-region.is-soon .lv-region-count{color:var(--muted);}
@media (max-width:640px){
  .lv-regions{flex-direction:column;}
  .lv-region{min-width:0; width:100%;}
}