/* ============================================================================
   Lexaily storefront — component stylesheet (FRONTEND-REBUILD-PLAN §4.2/§4.3)
   ----------------------------------------------------------------------------
   ITCSS-ordered, BEM, token-driven, ZERO `!important`.

   STRANGLER SAFETY: every rule is scoped under `.lx-next`. Until the Phase-0
   atomic CSS cutover happens, no live page carries that class, so this file is
   completely INERT alongside the legacy css.css. The new UI is opt-in: a page
   (or the preview harness) adds `.lx-next` to a wrapper to activate it. This is
   what lets the rebuild ship additively without breaking the storefront the
   other developer is testing against.
   ========================================================================== */

/* tokens.css is enqueued separately as a dependency (lib/Lexaily.php), so it is
   NOT @imported here — that would double-fetch it. */

/* ── generic / reset-lite (scoped) ──────────────────────────────────────── */
.lx-next, .lx-next *, .lx-next *::before, .lx-next *::after { box-sizing: border-box; }
.lx-next {
  font-family: var(--lx-font-sans);
  font-size: var(--lx-text-base);
  line-height: var(--lx-leading);
  color: var(--lx-color-ink);
}
.lx-next img { max-width: 100%; display: block; }
.lx-next button { font: inherit; cursor: pointer; }
.lx-next a { color: var(--lx-color-accent); text-decoration: none; }
.lx-next a:hover { color: var(--lx-color-accent-ink); }
.lx-next .lx-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── objects: layout ────────────────────────────────────────────────────── */
/* Results grid — full-width responsive card grid (no-map default) */
.lx-next .lx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lx-card-min), 1fr));
  grid-auto-rows: 1fr;            /* every row equal height */
  gap: var(--lx-space-5);
}
.lx-next .lx-grid > * { min-width: 0; }   /* let cards shrink into their grid tracks */
/* Split View — card grid beside a sticky map (Phase 4 competitive gap) */
/* Breathing room under the results control bar. Measured at 12px, which reads
   as the cards being crammed against the Showing/Sort/view-toggle row — the
   card images start almost the instant the bar ends. The control bar is a
   distinct band of UI, so it needs a clear gap, not a hairline. */
.lx-next .lx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lx-split-map-w);
  align-items: start;
  gap: var(--lx-space-5);
  margin-top: var(--lx-space-5);
}
.lx-next .lx-split__map {
  position: sticky;
  top: var(--lx-space-4);
  height: calc(100vh - var(--lx-space-7));
  border-radius: var(--lx-radius-md);
  overflow: hidden;
  background: var(--lx-color-bg-3);
}
.lx-next .lx-split__list .lx-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));   /* larger 2-up tiles beside the narrower map (ICND-style) */
  gap: var(--lx-space-4);
}
@media (max-width: 900px) {
  .lx-next .lx-split { grid-template-columns: 1fr; }
  .lx-next .lx-split__map { display: none; } /* MAP toggle re-enables on mobile */
}

/* ── editorial typography — Fraunces serif display (VRC look, adapted) ────── */
.lx-next h1, .lx-next h2, .lx-next h3,
.lx-next .lx-results-title,
.lx-next .lx-card__title {
  font-family: var(--lx-font-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* ── component: property card ───────────────────────────────────────────── */
/* NOTE: css.css ALSO defines a bare `.lx-card` (the payment page's credit-card
   visual: position:absolute; width:60%; margin-left:20%; purple gradient).
   This rule (higher specificity, loads after) neutralises that leak — the first
   five resets below are purely to undo the credit-card styles. */
.lx-next .lx-card {
  position: relative;            /* anchor for the .lx-card__link stretched overlay */
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--lx-color-ink);
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--lx-color-bg);
  border: 1px solid var(--lx-color-line);
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  box-shadow: var(--lx-shadow-1);
  transition: transform var(--lx-transition), box-shadow var(--lx-transition), border-color var(--lx-transition);
}

/* ── whole-card clickable (stretched link) ──────────────────────────────────
   .lx-card__link covers the entire card; the real interactive controls
   (favorite, carousel nav, photo count, title link, price/Add-dates) are
   raised above it so they keep their own behaviour. */
.lx-next .lx-card__link { position: absolute; inset: 0; z-index: 1; }
.lx-next .lx-card__fav,
.lx-next .lx-card__nav,
.lx-next .lx-card__photocount,
.lx-next .lx-card__badges,
.lx-next .lx-card__price,
.lx-next .lx-card__title a,
.lx-next .lx-card__rating,
.lx-next .lx-card__adddates { position: relative; z-index: 2; }
.lx-next .lx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lx-shadow-2);
  border-color: var(--lx-color-line-2);
}
/* aspect-ratio alone is only a PREFERRED size: if in-flow content ends up
   taller than the ratio implies, the box grows and that card's row breaks
   alignment (reported: one portrait photo rendered ~390px tall next to ~235px
   neighbours). overflow:hidden + min-height:0 make the 4/3 box authoritative,
   so a stray image is cropped by object-fit instead of stretching the grid. */
.lx-next .lx-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--lx-color-bg-3); overflow: hidden; min-height: 0; }
.lx-next .lx-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Carousel slides must fill the media box rather than dictate its height. */
.lx-next .lx-card__media .lx-card__slide,
.lx-next .lx-card__media .lx-card__track { height: 100%; min-height: 0; }

/* carousel (powered by <lx-carousel>) */
.lx-next .lx-card__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.lx-next .lx-card__slide { flex: 0 0 100%; height: 100%; }
.lx-next .lx-card__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: var(--lx-radius-pill);
  background: rgba(255,255,255,0.92); color: var(--lx-color-ink);
  box-shadow: var(--lx-shadow-1);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--lx-transition), transform var(--lx-transition);
}
.lx-next .lx-card:hover .lx-card__nav { opacity: 1; }
.lx-next .lx-card__nav:hover { transform: translateY(-50%) scale(1.08); }
.lx-next .lx-card__nav--prev { left: var(--lx-space-2); }
.lx-next .lx-card__nav--next { right: var(--lx-space-2); }
@media (hover: none) { .lx-next .lx-card__nav { opacity: 1; } }

.lx-next .lx-card__fav {
  position: absolute; top: var(--lx-space-3); right: var(--lx-space-3);
  width: 38px; height: 38px; border: none; border-radius: var(--lx-radius-pill);
  background: rgba(255,255,255,0.92); color: var(--lx-color-ink);
  box-shadow: var(--lx-shadow-1);
  display: flex; align-items: center; justify-content: center;
}
.lx-next .lx-card__fav[aria-pressed="true"] { color: var(--lx-color-urgent); }

/* badges over the photo */
.lx-next .lx-card__badges {
  position: absolute; top: var(--lx-space-3); left: var(--lx-space-3);
  display: flex; gap: var(--lx-space-2); flex-wrap: wrap;
}
.lx-next .lx-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--lx-radius-pill);
  font-size: var(--lx-text-xs); font-weight: var(--lx-weight-bold);
  background: rgba(255,255,255,0.95); color: var(--lx-color-ink);
  box-shadow: var(--lx-shadow-1);
}
.lx-next .lx-badge--hot { background: var(--lx-color-urgent); color: #fff; }
.lx-next .lx-card__photocount {
  position: absolute; bottom: var(--lx-space-3); right: var(--lx-space-3);
  padding: 3px 9px; border-radius: var(--lx-radius-pill);
  font-size: var(--lx-text-xs); font-weight: var(--lx-weight-medium);
  background: rgba(15,23,42,0.66); color: #fff;
}

/* card body */
.lx-next .lx-card__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: var(--lx-space-3) var(--lx-space-3) var(--lx-space-4);   /* tighter = shorter cards, more per screen */
  gap: 5px;
}
.lx-next .lx-card__loc {
  font-size: var(--lx-text-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--lx-color-ink-3);
}
.lx-next .lx-card__title { margin: 0; font-size: var(--lx-text-lg); font-weight: 500; line-height: 1.25; }
.lx-next .lx-card__title a { color: var(--lx-color-ink); }
.lx-next .lx-card__title a:hover { color: var(--lx-color-brand); }
.lx-next .lx-card__rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--lx-text-sm); color: var(--lx-color-ink-2); }
.lx-next .lx-card__rating .lx-star { color: var(--lx-color-star); }
.lx-next .lx-card__specs {
  display: flex; flex-wrap: wrap; gap: var(--lx-space-3);
  font-size: var(--lx-text-sm); color: var(--lx-color-ink-2);
}
.lx-next .lx-card__specs span { white-space: nowrap; }
.lx-next .lx-card__price { margin-top: auto; padding-top: var(--lx-space-2); }
.lx-next .lx-card__total { font-size: var(--lx-text-xl); font-weight: var(--lx-weight-heavy); color: var(--lx-color-ink); }
.lx-next .lx-card__total small { font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); color: var(--lx-color-ink-3); }
.lx-next .lx-card__pertax { font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); }
.lx-next .lx-card__save { font-size: var(--lx-text-sm); font-weight: var(--lx-weight-bold); color: var(--lx-color-price); }
.lx-next .lx-card__price { display: flex; flex-direction: column; gap: 2px; min-height: 40px; }
.lx-next .lx-card--unavailable { opacity: 0.62; }
.lx-next .lx-card--unavailable .lx-card__media { filter: grayscale(0.35); }

/* ── near-miss (±flex) date match ──────────────────────────────────────────
   The exact searched nights are booked but the property is open for the same
   stay on nearby dates. Flag it clearly so a shifted-date result is never
   mistaken for an exact match. */
.lx-next .lx-card__flexnote {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: var(--lx-space-2) 0 4px;
    padding: 7px 9px;
    background: var(--lx-color-bg-3, #f4f1ea);
    border-radius: var(--lx-radius-sm, 8px);
    font-size: var(--lx-text-xs);
    line-height: 1.3;
}
.lx-next .lx-card__flexbadge {
    font-weight: var(--lx-weight-bold);
    color: #b0561a; background: #fbe9d8;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.lx-next .lx-card__flexavail { color: var(--lx-color-ink-2, #333); }
.lx-next .lx-card__flexrel { color: var(--lx-color-ink-3); }
.lx-next .lx-card__useflex {
    position: relative; z-index: 3; /* sit above the stretched card link */
    margin-left: auto;
    border: 1px solid var(--lx-color-accent); background: #fff;
    color: var(--lx-color-accent); font-weight: var(--lx-weight-bold);
    font-size: var(--lx-text-xs); padding: 4px 10px;
    border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.lx-next .lx-card__useflex:hover { background: var(--lx-color-accent); color: #fff; }

/* ── Favorites page: date bar, compare, grey-out ──────────────────────────── */
.lx-fav-datebar {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
    gap: 12px; margin: 18px auto 6px; max-width: 760px;
    padding: 14px; background: var(--lx-color-bg-2, #faf8f3);
    border: 1px solid var(--lx-color-line, #e6e2d8); border-radius: 12px;
}
.lx-fav-fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--lx-color-ink-2, #444); }
.lx-fav-fld input {
    padding: 9px 11px; border: 1px solid var(--lx-color-line, #d9d4c8);
    border-radius: 8px; font-size: 15px; background: #fff;
}
.lx-fav-go {
    padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer;
    background: var(--lx-color-accent); color: #fff; font-weight: 700; font-size: 15px;
}
.lx-fav-clear { align-self: center; font-size: 13px; color: var(--lx-color-ink-3); }
.lx-fav-cell { position: relative; }
.lx-fav-comparetoggle {
    position: absolute; top: 10px; left: 10px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.94); padding: 4px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.lx-fav-comparetoggle input { margin: 0; cursor: pointer; }
.lx-fav-unavail { opacity: 0.6; }
.lx-fav-unavail .lx-fav-comparetoggle { opacity: 0.5; cursor: not-allowed; }

.lx-fav-comparebar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 9500;
    display: flex; align-items: center; gap: 12px;
    background: #1a1a2e; color: #fff; padding: 10px 16px; border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.lx-fav-comparebar button { border: none; border-radius: 999px; padding: 7px 16px; font-weight: 700; cursor: pointer; }
#lx-fav-compareopen { background: var(--lx-color-accent); color: #fff; }
.lx-fav-compareclear { background: transparent; color: #cfd3e6; }

.lx-fav-comparemodal {
    position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* The template toggles this modal via the `hidden` attribute
   (lxFavorites.php:132/293-297), but the `display: flex` above beats the UA
   stylesheet's [hidden]{display:none} in the cascade — leaving the modal
   permanently visible from first paint. Author-level [hidden] override is
   the standard fix for this exact conflict. */
.lx-fav-comparemodal[hidden] { display: none; }
.lx-fav-comparebox {
    position: relative; background: #fff; border-radius: 14px; max-width: 1000px; width: 100%;
    max-height: 88vh; overflow: hidden; padding: 22px;
}
.lx-fav-compareclose { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #555; }
.lx-fav-comparescroll { overflow: auto; max-height: 74vh; }
.lx-fav-comparetable { width: 100%; border-collapse: collapse; }
.lx-fav-comparetable th, .lx-fav-comparetable td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; font-size: 14px; }
.lx-fav-comparetable th { color: var(--lx-color-ink-3); font-weight: 600; white-space: nowrap; }
.lx-fav-comparetable td { border-left: 1px solid #f1f1f1; }
.lx-fav-viewbtn { display: inline-block; background: var(--lx-color-accent); color: #fff; padding: 7px 14px; border-radius: 8px; font-weight: 700; }
@media (max-width: 600px) { .lx-fav-datebar { gap: 8px; } .lx-fav-fld input { font-size: 14px; } }

/* ── component: buttons ─────────────────────────────────────────────────── */
.lx-next .lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: var(--lx-radius-sm);
  font-weight: var(--lx-weight-bold); font-size: var(--lx-text-base);
  border: 1px solid transparent; transition: background var(--lx-transition), border-color var(--lx-transition);
}
.lx-next .lx-btn--primary { background: var(--lx-color-brand); color: var(--lx-color-on-brand); }
.lx-next .lx-btn--primary:hover { background: var(--lx-color-brand-ink); }
.lx-next .lx-btn--primary:disabled { opacity: .5; cursor: default; }
.lx-next .lx-btn--ghost { background: var(--lx-color-bg); color: var(--lx-color-ink); border-color: var(--lx-color-line-2); }
.lx-next .lx-btn--ghost:hover { border-color: var(--lx-color-ink); }
.lx-next .lx-btn--block { width: 100%; }

/* ── component: search pill ─────────────────────────────────────────────── */
.lx-next .lx-searchpill {
  display: flex; align-items: stretch; gap: 0;
  background: var(--lx-color-bg); border: 1px solid var(--lx-color-line-2);
  border-radius: var(--lx-radius-pill); box-shadow: var(--lx-shadow-2);
  padding: 6px; max-width: 880px;
}
.lx-next .lx-searchpill__field {
  flex: 1 1 0; min-width: 0; padding: 8px 18px; border-right: 1px solid var(--lx-color-line);
  display: flex; flex-direction: column; justify-content: center;
}
.lx-next .lx-searchpill__field:last-of-type { border-right: none; }
.lx-next .lx-searchpill__field small { font-size: var(--lx-text-xs); font-weight: var(--lx-weight-bold); color: var(--lx-color-ink-2); }
.lx-next .lx-searchpill__field input { border: none; outline: none; font-size: var(--lx-text-base); width: 100%; background: none; }
/* a11y: restore the keyboard ring the rule above strips (WCAG 2.4.7). */
.lx-next .lx-searchpill__field input:focus-visible { outline: 2px solid var(--lx-color-brand); outline-offset: 2px; }
.lx-next .lx-searchpill .lx-btn { border-radius: var(--lx-radius-pill); padding: 0 24px; }
@media (max-width: 720px) {
  .lx-next .lx-searchpill { flex-direction: column; border-radius: var(--lx-radius-lg); }
  .lx-next .lx-searchpill__field { border-right: none; border-bottom: 1px solid var(--lx-color-line); }
}

/* ── component: booking card (<lx-bookcard>) ────────────────────────────── */
.lx-next .lx-bookcard {
  display: block; background: var(--lx-color-bg);
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-md);
  box-shadow: var(--lx-shadow-2); padding: var(--lx-space-5);
}
.lx-next .lx-bookcard__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--lx-space-2); }
.lx-next .lx-bookcard__amount { font-size: var(--lx-text-2xl); font-weight: var(--lx-weight-heavy); color: var(--lx-color-ink); }
.lx-next .lx-bookcard__per { font-size: var(--lx-text-sm); color: var(--lx-color-ink-3); }
.lx-next .lx-bookcard__compliance { font-size: var(--lx-text-xs); font-weight: var(--lx-weight-medium); color: var(--lx-color-ink-2); margin: 0 0 var(--lx-space-4); }
.lx-next .lx-bookcard__fields {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-sm);
  overflow: hidden; margin-bottom: var(--lx-space-4);
}
.lx-next .lx-bookcard__field { padding: 9px 12px; border: none; background: none; text-align: left; }
.lx-next .lx-bookcard__field + .lx-bookcard__field { border-left: 1px solid var(--lx-color-line); }
.lx-next .lx-bookcard__field small { display: block; font-size: 10px; font-weight: var(--lx-weight-heavy); text-transform: uppercase; letter-spacing: .06em; color: var(--lx-color-ink-2); }
.lx-next .lx-bookcard__field input,
.lx-next .lx-bookcard__field .lx-bookcard__val { border: none; background: none; padding: 2px 0 0; font-size: var(--lx-text-base); width: 100%; color: var(--lx-color-ink); }
.lx-next .lx-bookcard__guests { grid-column: 1 / 3; border-top: 1px solid var(--lx-color-line); }
.lx-next .lx-bookcard__flex { display: flex; gap: var(--lx-space-2); margin-bottom: var(--lx-space-4); flex-wrap: wrap; }
.lx-next .lx-bookcard__flex button {
  flex: 1 1 auto; padding: 7px 10px; border: 1px solid var(--lx-color-line-2);
  border-radius: var(--lx-radius-pill); background: var(--lx-color-bg);
  font-size: var(--lx-text-sm); color: var(--lx-color-ink-2);
}
.lx-next .lx-bookcard__flex button[aria-pressed="true"] { border-color: var(--lx-color-brand); color: var(--lx-color-brand); background: var(--lx-color-brand-tint); }
.lx-next .lx-bookcard__trust { display: flex; align-items: center; gap: 6px; margin-top: var(--lx-space-3); font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); }
.lx-next .lx-bookcard__save { margin-top: var(--lx-space-2); font-size: var(--lx-text-sm); font-weight: var(--lx-weight-bold); color: var(--lx-color-price); }

/* guests popover + steppers */
.lx-next .lx-guests { position: relative; }
.lx-next .lx-guests__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--lx-z-popover);
  background: var(--lx-color-bg); border: 1px solid var(--lx-color-line);
  border-radius: var(--lx-radius-md); box-shadow: var(--lx-shadow-2); padding: var(--lx-space-4);
}
.lx-next .lx-guests__row { display: flex; align-items: center; justify-content: space-between; padding: var(--lx-space-2) 0; }
.lx-next .lx-stepper { display: flex; align-items: center; gap: var(--lx-space-3); }
.lx-next .lx-stepper__btn {
  width: 32px; height: 32px; border-radius: var(--lx-radius-pill);
  border: 1px solid var(--lx-color-line-2); background: var(--lx-color-bg); color: var(--lx-color-ink);
  font-size: var(--lx-text-lg); line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.lx-next .lx-stepper__btn:disabled { opacity: .35; cursor: default; }

/* (Leaflet map-pin styles live in the "Results toolbar + Leaflet Split View"
   section below — kept in one place to avoid divergent duplicate rules.) */

/* ── component: availability calendar (<lx-calendar>) ───────────────────── */
.lx-next .lx-calendar { display: block; position: relative; max-width: 100%; box-sizing: border-box; }
/* Nav arrows live in normal flow (right-aligned). They were position:absolute,
   which overlapped the first month's title AND, on some widths, let the calendar
   escape its container when paginating to a new month. */
.lx-next .lx-calendar__bar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: var(--lx-space-2); }
.lx-next .lx-calendar__nav {
  width: 32px; height: 32px; border: 1px solid var(--lx-color-line-2);
  border-radius: var(--lx-radius-pill); background: var(--lx-color-bg);
  color: var(--lx-color-ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.lx-next .lx-calendar__nav:hover { border-color: var(--lx-color-ink); }
/* Container-responsive: show 2 months side-by-side only when they actually fit
   (>=2x240px), otherwise stack to 1 — keyed to the CALENDAR's own width, not the
   viewport, because the unit-page content column can be much narrower than the
   screen. min(240px,100%) guarantees a single column never exceeds the box, so
   it can never overflow on month navigation. min-width:0 defeats grid blowout. */
.lx-next .lx-calendar__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--lx-space-5); min-width: 0; }
.lx-next .lx-calendar__month { min-width: 0; }
.lx-next .lx-calendar__title { text-align: center; font-weight: var(--lx-weight-bold); margin-bottom: var(--lx-space-3); }
.lx-next .lx-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; min-width: 0; }
.lx-next .lx-calendar__wd { text-align: center; font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); padding-bottom: 4px; }
.lx-next .lx-calendar__day {
  /* min-height (not aspect-ratio) for the row height — aspect-ratio on a 1fr
     grid item derives WIDTH from height and blows the 7-col grid past its box. */
  min-height: 40px; padding: 2px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; font-size: var(--lx-text-sm);
  color: var(--lx-color-ink); border-radius: var(--lx-radius-sm);
}
.lx-next .lx-calendar__day--avail { cursor: pointer; }
.lx-next .lx-calendar__day--avail:hover { background: var(--lx-color-brand-tint); }
.lx-next .lx-calendar__day--past { color: var(--lx-color-line-2); }
.lx-next .lx-calendar__day--booked { color: var(--lx-color-line-2); text-decoration: line-through; cursor: default; }
.lx-next .lx-calendar__day--in { background: var(--lx-color-brand-tint); border-radius: 0; }
.lx-next .lx-calendar__day--ci,
.lx-next .lx-calendar__day--co { background: var(--lx-color-brand); color: #fff; text-decoration: none; }
.lx-next .lx-calendar__day--ci { border-radius: var(--lx-radius-sm) 0 0 var(--lx-radius-sm); }
.lx-next .lx-calendar__day--co { border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0; }
.lx-next .lx-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--lx-space-4); align-items: center; margin-top: var(--lx-space-4); font-size: var(--lx-text-xs); color: var(--lx-color-ink-2); }
.lx-next .lx-cal-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lx-next .lx-cal-sw--avail { background: var(--lx-color-bg); border: 1px solid var(--lx-color-line-2); }
.lx-next .lx-cal-sw--booked { background: var(--lx-color-bg-3); border: 1px solid var(--lx-color-line-2); }
.lx-next .lx-cal-sw--sel { background: var(--lx-color-brand); }
.lx-next .lx-calendar__min { margin-left: auto; font-weight: var(--lx-weight-medium); color: var(--lx-color-ink-3); }
/* (month columns are container-responsive via auto-fit above — no viewport media query needed) */

/* ── component: detail spec icon-grid + actions (Print/Share) ───────────── */
.lx-next .lx-specgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--lx-space-3) var(--lx-space-5); margin: var(--lx-space-3) 0 0; }
.lx-next .lx-specgrid__item { display: flex; align-items: center; gap: 9px; font-size: var(--lx-text-sm); color: var(--lx-color-ink); }
.lx-next .lx-specgrid__item svg { flex: 0 0 auto; color: var(--lx-color-brand); }
.lx-next .lx-detail-actions { display: flex; gap: var(--lx-space-2); }
.lx-next .lx-detail-actions button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-sm);
  background: var(--lx-color-bg); color: var(--lx-color-ink-2); font-size: var(--lx-text-sm); cursor: pointer;
}
.lx-next .lx-detail-actions button:hover { border-color: var(--lx-color-ink); color: var(--lx-color-ink); }

/* ── component: detail location map (<lx-map>) ──────────────────────────── */
.lx-next .lx-detail-section { max-width: 1400px; margin: 0 auto var(--lx-space-6); padding: 0 var(--lx-space-4); }
.lx-next .lx-detail-section__title { font-size: var(--lx-text-xl); font-weight: var(--lx-weight-bold); margin: 0 0 var(--lx-space-2); }
.lx-next .lx-detail-loc { color: var(--lx-color-ink-2); margin: 0 0 var(--lx-space-3); }
.lx-next .lx-detail-loc__note { font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); margin: var(--lx-space-2) 0 0; }
.lx-next .lx-detail-map {
  display: block; width: 100%; height: 360px;
  border-radius: var(--lx-radius-md); overflow: hidden;
  border: 1px solid var(--lx-color-line); background: var(--lx-color-bg-3);
}

/* ── component: sticky property-detail tabs (<lx-tabs>) ─────────────────── */
.lx-next .lx-tabs {
  position: sticky; top: 0; z-index: var(--lx-z-sticky);
  display: flex; gap: var(--lx-space-5);
  background: var(--lx-color-bg); border-bottom: 1px solid var(--lx-color-line);
  padding: 0 var(--lx-space-4); margin: 0 auto var(--lx-space-4); max-width: 1400px;
  overflow-x: auto; scrollbar-width: none;
}
.lx-next .lx-tabs::-webkit-scrollbar { display: none; }
.lx-next .lx-tabs a {
  flex: 0 0 auto; padding: 14px 2px; color: var(--lx-color-ink-2);
  font-weight: var(--lx-weight-medium); font-size: var(--lx-text-sm);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.lx-next .lx-tabs a:hover { color: var(--lx-color-ink); }
.lx-next .lx-tabs a[aria-current="true"] { color: var(--lx-color-brand); border-bottom-color: var(--lx-color-brand); }

/* ── component: view toggle (LIST / SPLIT / MAP) ────────────────────────── */
.lx-next .lx-toggle { display: inline-flex; border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-sm); overflow: hidden; }
.lx-next .lx-toggle button { padding: 7px 14px; border: none; background: var(--lx-color-bg); color: var(--lx-color-ink-2); font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); }
.lx-next .lx-toggle button + button { border-left: 1px solid var(--lx-color-line); }
.lx-next .lx-toggle button[aria-pressed="true"] { background: var(--lx-color-brand); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   Booking card — RETHEME of the existing checkavailForm.php markup
   ----------------------------------------------------------------------------
   CSS-only. Scoped to `#checkavailbox.lx-next` (the template adds `.lx-next`
   when next_ui_enabled). storefront.css loads after css.css (declared
   dependency), so these equal-or-higher-specificity rules win and retheme the
   card WITHOUT any markup / id / funnel-JS change. ?lx_ui=legacy drops the
   `.lx-next` class and the card reverts to css.css.
   ════════════════════════════════════════════════════════════════════════ */
#checkavailbox.lx-next {
  background: var(--lx-color-bg);
  border: 1px solid var(--lx-color-line-2);
  border-radius: var(--lx-radius-md);
  box-shadow: var(--lx-shadow-2);
  padding: var(--lx-space-5);
}
/* price anchor */
#checkavailbox.lx-next .lx-daily-rate { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#checkavailbox.lx-next .lx-daily-rate .lx-bookcard__amount { font-size: var(--lx-text-2xl); font-weight: var(--lx-weight-heavy); color: var(--lx-color-ink); line-height: 1.1; }
#checkavailbox.lx-next .lx-daily-rate .lx-bookcard__per { font-size: var(--lx-text-sm); color: var(--lx-color-ink-3); }
#checkavailbox.lx-next .lx-bookcard__compliance { font-size: var(--lx-text-xs); font-weight: var(--lx-weight-medium); color: var(--lx-color-ink-2); margin: 0 0 var(--lx-space-4); }

/* segmented date + guests box */
#checkavailbox.lx-next .lx-bookcard__fields,
#checkavailbox.lx-next #checkavail-dates-row.lx-bookcard__fields {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-sm);
  overflow: visible; margin-bottom: var(--lx-space-4); padding: 0; background: var(--lx-color-bg);
}
#checkavailbox.lx-next .lx-bookcard__field { padding: 9px 12px 7px; border: none; background: none; }
#checkavailbox.lx-next .lx-bookcard__field:first-child { border-right: 1px solid var(--lx-color-line); }
#checkavailbox.lx-next .lx-bookcard__field small { display: block; font-size: 10px; font-weight: var(--lx-weight-heavy); text-transform: uppercase; letter-spacing: .06em; color: var(--lx-color-ink-2); }
#checkavailbox.lx-next .lx-bookcard__field input { border: none; background: none; padding: 2px 0 0; font-size: var(--lx-text-base); width: 100%; color: var(--lx-color-ink); }
/* The guests control is a <button>, so it inherited the theme's white button
   text — the count rendered white-on-white (the "blank area"). Force ink, a
   left-aligned reading, and an obvious "Edit" + chevron expand affordance. */
#checkavailbox.lx-next .lx-bookcard__guests { grid-column: 1 / 3; border-top: 1px solid var(--lx-color-line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left; background: none; color: var(--lx-color-ink); cursor: pointer; }
#checkavailbox.lx-next .lx-bookcard__guests small { flex: 0 0 100%; }
#checkavailbox.lx-next #lx-guests-label { color: var(--lx-color-ink); font-size: var(--lx-text-base); font-weight: var(--lx-weight-medium); }
#checkavailbox.lx-next .lx-bookcard__guests-edit { margin-left: auto; font-size: var(--lx-text-sm); font-weight: var(--lx-weight-bold); color: var(--lx-color-brand-ink); }
#checkavailbox.lx-next .lx-bookcard__chev { color: var(--lx-color-ink-2); flex: 0 0 auto; }

/* guests popover + steppers */
#checkavailbox.lx-next .lx-guests-pop { background: var(--lx-color-bg); border: 1px solid var(--lx-color-line); border-radius: var(--lx-radius-md); box-shadow: var(--lx-shadow-2); padding: var(--lx-space-4); display: none; }
#checkavailbox.lx-next .lx-guests-pop.is-open { display: block; }
/* steppers: fixed 3-col grid so the count is always centered between − / + */
#checkavailbox.lx-next .lx-stepper { display: grid; grid-template-columns: 34px 44px 34px; align-items: center; gap: 6px; justify-items: center; }
#checkavailbox.lx-next .lx-stepper__num { width: 100%; text-align: center; font-variant-numeric: tabular-nums; font-weight: var(--lx-weight-bold); color: var(--lx-color-ink); }
#checkavailbox.lx-next .lx-stepper__btn { width: 34px; height: 34px; border-radius: var(--lx-radius-pill); border: 1px solid var(--lx-color-line-2); background: var(--lx-color-bg); color: var(--lx-color-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 0; }
#checkavailbox.lx-next .lx-stepper__btn:hover:not(:disabled) { border-color: var(--lx-color-ink); }
#checkavailbox.lx-next .lx-stepper__btn:disabled { opacity: .35; cursor: default; }

/* urgency badges */
#checkavailbox.lx-next .lx-urgency__badge { background: var(--lx-color-warn-bg); border: 1px solid var(--lx-color-warn-line); color: var(--lx-color-ink); border-radius: var(--lx-radius-sm); padding: 7px 12px; font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); }

/* Book Direct + Check Availability buttons */
#checkavailbox.lx-next #booklink-quote,
#checkavailbox.lx-next #booklink-main,
#checkavailbox.lx-next #check-avail-button {
  /* These are <input> submit/buttons — flex doesn't center their value text, so
     use block + text-align (the inline-flex left the label visually off-line).
     appearance:none drops the UA chrome that shifted the text. */
  display: block; width: 100%; box-sizing: border-box; text-align: center; line-height: 1.25;
  -webkit-appearance: none; appearance: none;
  /* brand-ink (#2e6273) on white clears AA (~6.4:1); plain --lx-color-brand
     (#418899) was only ~3.9:1, which read as "unreadable" on the CTA. */
  padding: 14px 18px; border: none; border-radius: var(--lx-radius-sm);
  background: var(--lx-color-brand-ink); color: var(--lx-color-on-brand);
  font-weight: var(--lx-weight-bold); font-size: var(--lx-text-base); cursor: pointer;
}
#checkavailbox.lx-next #booklink-quote:hover,
#checkavailbox.lx-next #booklink-main:hover,
#checkavailbox.lx-next #check-avail-button:hover { background: #264f5d; }
#checkavailbox.lx-next #booklink-quote:disabled,
#checkavailbox.lx-next #booklink-main:disabled { opacity: .5; cursor: default; }
/* Book Direct sits in a .lx-column wrapper whose side padding left it narrower
   and offset from the full-width Contact Us button ("out of line"). Zero the
   wrapper padding so every CTA spans the same width. */
#checkavailbox.lx-next .lx-column.no-margin,
#checkavailbox.lx-next .lx-row { padding-left: 0; padding-right: 0; }

/* inline price breakdown — keep it INLINE (not the legacy fixed overlay) */
#checkavailbox.lx-next .lx-detailed-quote.lx-quote--ready {
  position: static; inset: auto; width: auto; max-width: none; margin: var(--lx-space-3) 0 0;
  padding: var(--lx-space-3) 0 0; box-shadow: none; border-radius: 0; z-index: auto;
  border-top: 1px solid var(--lx-color-line); background: transparent;
}
#checkavailbox.lx-next #ratebreakdown { width: 100%; font-size: var(--lx-text-sm); color: var(--lx-color-ink); }
#checkavailbox.lx-next #ratebreakdown td { padding: 5px 0; }
#checkavailbox.lx-next #ratebreakdown tr.double td { border-top: 1px solid var(--lx-color-line); padding-top: 10px; font-weight: var(--lx-weight-bold); }

/* ── compact results bar — editorial single-line header ─────────────────── */
.lx-next .lx-resultsbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--lx-space-3) var(--lx-space-4);
  padding: var(--lx-space-4) 0 0;
  margin: 0 0 var(--lx-space-3);
}
.lx-next .lx-resultsbar .lx-results-title {
  margin: 0; flex: 0 1 auto; line-height: 1.1; letter-spacing: -0.015em;
  /* Measured editorial heading — the previous heavy 2rem serif read as
     oversized/out-of-place next to the refined search card. Semibold + a
     smaller ceiling sits it comfortably in the control row. */
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600; color: var(--lx-color-ink);
}
/* Push the date/search control to the right of the title so row 1 reads
   "title ......... search · reset" instead of everything bunched left. */
.lx-next .lx-resultsbar .lx-searchbar { margin-left: auto; }
.lx-next .lx-resultsbar__dates { display: flex; gap: var(--lx-space-2); }
.lx-next .lx-resultsbar__dates .form-floating { width: 134px; margin: 0; }
.lx-next .lx-resultsbar__actions { display: flex; align-items: center; gap: var(--lx-space-2); margin: 0; }
.lx-next .lx-resultsbar__meta { display: flex; align-items: center; gap: var(--lx-space-4); margin-left: auto; flex-wrap: wrap; }
.lx-next .lx-resultsbar .lx-results-info { font-size: var(--lx-text-sm); color: var(--lx-color-ink-3); white-space: nowrap; }
/* Unified results control bar: Showing + view toggle (left) | map-move + Sort (right) */
.lx-next .lx-resultsbar__meta.lx-results-controls {
  flex: 1 0 100%; margin: var(--lx-space-3) 0 0; padding-top: var(--lx-space-3);
  border-top: 1px solid var(--lx-color-line);
  justify-content: space-between; gap: var(--lx-space-3) var(--lx-space-4);
}
.lx-next .lx-results-controls__left,
.lx-next .lx-results-controls__right {
  display: flex; align-items: center; gap: var(--lx-space-3) var(--lx-space-4); flex-wrap: wrap;
}
.lx-next .lx-results-controls .lx-map-move { margin: 0; }
.lx-next .lx-resultsbar__sort { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ── unified search card (VRC editorial hero style, adapted to Tahoe teal) ──
   A premium, floating control: generous labelled segments, a strong soft
   shadow that lifts on hover/focus, larger readable inputs, and a prominent
   accent action — pushed toward vacationrentalcompanies.com's hero search
   while staying a single inline control sized for the results header. */
.lx-next .lx-searchbar {
  display: inline-flex; align-items: stretch; margin: 0;
  background: var(--lx-color-bg); border: 1px solid var(--lx-color-line);
  border-radius: var(--lx-radius-md); box-shadow: var(--lx-shadow-2); padding: 6px;
  transition: box-shadow var(--lx-transition), border-color var(--lx-transition);
}
.lx-next .lx-searchbar:hover,
.lx-next .lx-searchbar:focus-within { box-shadow: var(--lx-shadow-3); border-color: var(--lx-color-line-2); }
.lx-next .lx-searchbar__fld {
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 22px; min-width: 0; margin: 0; cursor: pointer;
  border-radius: var(--lx-radius-sm); transition: background var(--lx-transition);
}
.lx-next .lx-searchbar__fld:hover { background: var(--lx-color-bg-2); }
.lx-next .lx-searchbar__fld + .lx-searchbar__fld { border-left: 1px solid var(--lx-color-line); }
.lx-next .lx-searchbar__lbl {
  font-size: 10.5px; font-weight: var(--lx-weight-bold); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lx-color-ink-3); margin-bottom: 2px;
}
/* !important to beat css.css's legacy #abe-results-search input styling (border, height, font) */
.lx-next #abe-results-search.lx-searchbar input {
  border: 0 !important; background: transparent !important; outline: none; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; padding: 0 !important; width: 118px; cursor: pointer;
  font-family: var(--lx-font-sans); font-size: var(--lx-text-base) !important;
  font-weight: var(--lx-weight-medium); color: var(--lx-color-ink); letter-spacing: -0.01em;
}
/* a11y: the rule above out-specifies the shared :focus-visible ring further
   down (ID selector), so the keyboard ring has to be restated at ID strength —
   without it these date/location fields have no focus indicator (WCAG 2.4.7). */
.lx-next #abe-results-search.lx-searchbar input:focus-visible {
  outline: 2px solid var(--lx-color-brand) !important;
  outline-offset: 2px !important;
}
.lx-next #abe-results-search.lx-searchbar input::placeholder { color: var(--lx-color-ink-3); font-weight: 400; }
/* !important to beat css.css's legacy #abe-filters-activator { height:fit-content!important } + accent-blue */
.lx-next #abe-filters-activator.lx-searchbar__go {
  align-self: stretch; height: auto !important; margin-left: 8px; border: 0 !important; line-height: 1;
  background: var(--lx-color-brand) !important; color: #fff !important;
  border-radius: var(--lx-radius-sm) !important; padding: 0 24px !important; cursor: pointer;
  font-family: var(--lx-font-sans); font-weight: var(--lx-weight-bold); font-size: var(--lx-text-base) !important;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 18, 15, 0.12);
  transition: background var(--lx-transition);
}
.lx-next #abe-filters-activator.lx-searchbar__go:hover { background: var(--lx-color-brand-ink) !important; }
.lx-next #abe-filters-activator.lx-searchbar__go .fas { color: #fff !important; font-size: 15px !important; }
.lx-next #reset-button.lx-searchbar__reset {
  align-self: center; background: none; border: 0; cursor: pointer; margin: 0 0 0 14px;
  color: var(--lx-color-ink-3); font-size: var(--lx-text-sm); padding: 6px 2px;
  display: inline-flex; align-items: center; gap: 5px; transition: color var(--lx-transition);
}
.lx-next #reset-button.lx-searchbar__reset:hover { color: var(--lx-color-ink); background: none; }
.lx-next #reset-button.lx-searchbar__reset .fas { color: inherit; }

/* Mobile: the date/search control spans the row and its segments flex to fit so
   the Filters button never overflows a narrow phone viewport. */
@media (max-width: 640px) {
  .lx-next .lx-resultsbar .lx-results-title { flex: 1 1 100%; }
  .lx-next .lx-resultsbar .lx-searchbar { margin-left: 0; width: 100%; }
  .lx-next .lx-searchbar__fld { flex: 1 1 0; padding: 7px 12px; }
  .lx-next #abe-results-search.lx-searchbar input { width: 100%; }
  .lx-next #abe-filters-activator.lx-searchbar__go { padding: 0 16px !important; }
}

/* ── Results toolbar + Leaflet Split View (Phase 4) ─────────────────────── */
.lx-next .lx-results-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lx-space-3); flex-wrap: wrap; margin: 0 0 var(--lx-space-3);
}
.lx-next .lx-map-move {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--lx-text-sm); color: var(--lx-color-ink-2); cursor: pointer;
}
/* Leaflet needs an explicit height on the map node */
.lx-next .lx-split__map { min-height: 70vh; }
.lx-next .lx-split__map #abe-map-results { width: 100%; height: 100%; min-height: 70vh; background: var(--lx-color-bg-3); }
/* The legacy results map rule in css.css forces
   #abe-map-results { position:sticky !important; max-height:92.5vh; top:100px }.
   Neutralise it for the new split: the stickiness belongs on the .lx-split__map
   PARENT; the inner node must be a plain Leaflet container that fills it. */
.lx-next .lx-split__map #abe-map-results { position: relative !important; max-height: none !important; top: auto !important; }

/* view switching: List / Split / Map */
.lx-next .lx-split[data-view="list"] { grid-template-columns: 1fr; }
.lx-next .lx-split[data-view="list"] .lx-split__map { display: none; }
.lx-next .lx-split[data-view="map"] { grid-template-columns: 1fr; }
.lx-next .lx-split[data-view="map"] .lx-split__list { display: none; }
.lx-next .lx-split[data-view="map"] .lx-split__map,
.lx-next .lx-split[data-view="map"] .lx-split__map #abe-map-results { min-height: 78vh; }
/* Map view must re-show the map column even on ≤900px, where the base
   responsive rule hides .lx-split__map. Specificity 0,4,0 beats that 0,2,0
   media rule, so a phone's "Map" toggle isn't a blank screen. */
.lx-next .lx-split[data-view="map"] .lx-split__map { display: block; }

/* Leaflet price pins (rendered inside #abe-map-results, under .lx-next) */
.lx-next .lx-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -115%);
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--lx-radius-pill); background: var(--lx-color-bg);
  border: 1px solid var(--lx-color-line-2); box-shadow: var(--lx-shadow-1);
  font-size: var(--lx-text-sm); font-weight: var(--lx-weight-bold);
  color: var(--lx-color-ink); white-space: nowrap; cursor: pointer;
}
.lx-next .lx-pin--active { background: var(--lx-color-brand); color: #fff; border-color: var(--lx-color-brand); z-index: 1000; }
/* logo marker: classic red teardrop pin (fill = --lx-color-urgent) with the
   site logo in the head — replaces the price pill on the results map. The
   container is transparent (the SVG IS the pin); tip sits on the coordinate. */
.lx-next .lx-pin--logo {
  width: 40px; height: 52px; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  transform: translate(-50%, -100%);
  transition: transform .12s ease, filter .12s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.lx-next .lx-pin--logo .lx-pin__tear {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--lx-color-urgent, #d23f3f);
  z-index: 0; /* logo img must layer above; auto order painted the svg on top */
}
.lx-next .lx-pin--logo img {
  position: absolute; top: 7px; left: calc(50% - 13px); z-index: 1;
  width: 26px; height: 26px; border-radius: 50%; display: block;
  object-fit: cover; background: #fff; pointer-events: none;
}
.lx-next .lx-pin--logo.lx-pin--active {
  background: transparent; border: 0;
  /* !important: the pin's layout-critical styles (incl. transform:none) are
     inline in pinHtml() so they survive stale/combined CSS — the hover grow
     must still beat that inline transform. Anchoring lives on the divIcon
     (iconAnchor puts the tip on the coordinate), so NO translate here: scale
     only, growing up from the tip. */
  transform: scale(1.18) !important;
  transform-origin: 50% 100%;
  box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
/* card highlight when its map pin is hovered (and vice-versa) */
.lx-next .lx-card--active { box-shadow: 0 0 0 2px var(--lx-color-brand); }

/* "More Units in search" — cards whose pin left the map viewport are moved
   here by the results-map partition (templates/results.php) */
.lx-next .lx-more-units { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lx-color-line); }
.lx-next .lx-more-units__title {
  margin: 0 0 14px; font-size: var(--lx-text-lg); font-weight: var(--lx-weight-bold);
  color: var(--lx-color-ink);
}

/* richer map popup: flush thumbnail + tight chrome (scoped so it never touches
   the legacy Google InfoWindow path) */
.lx-next .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 10px; box-shadow: var(--lx-shadow-2); }
.lx-next .leaflet-popup-content { margin: 0; width: 212px !important; }
.lx-next .leaflet-popup-tip { box-shadow: var(--lx-shadow-1); }

/* ════════════════════════════════════════════════════════════════════════
   Filters modal polish (#6) — .lx-next-scoped overrides over the legacy
   css.css block: scroll the OVERLAY (not a nested box), even spacing, brand
   teal accents, and distinct Apply (solid) / Clear (outline) buttons.
   ════════════════════════════════════════════════════════════════════════ */
.lx-next #modalOverlay.modal-overlay {
  align-items: center;
  justify-content: center;
  overflow-y: auto;            /* fallback only — the panel caps its own height */
  padding: var(--lx-space-4);
  -webkit-overflow-scrolling: touch;
}
.lx-next #modalOverlay .lx-filters-wrapper {
  display: flex; flex-direction: column;
  max-height: 88vh;            /* cap height so the Apply footer is ALWAYS reachable */
  overflow: hidden;            /* the body scrolls internally, not the whole panel */
  max-width: 620px; width: 100%;
  margin: auto;
  padding: 0;                  /* padding lives on the scroll body + sticky header/footer */
  border-radius: var(--lx-radius-lg);
  box-shadow: var(--lx-shadow-3);
}
/* Sticky header (Filters + ✕) and footer (Clear / Apply) stay put; the body scrolls. */
.lx-next #modalOverlay .filters-inner > .lx-row:first-child {
  position: sticky; top: 0; z-index: 3; background: #fff; margin: 0;
  padding: var(--lx-space-5) 0 var(--lx-space-3);
  border-bottom: 1px solid var(--lx-color-line);
}
.lx-next #modalOverlay .lx-filters-actions {
  position: sticky; bottom: 0; z-index: 3; background: #fff; margin: 0;
  padding: var(--lx-space-3) 0 var(--lx-space-5);
  border-top: 1px solid var(--lx-color-line);
}
/* one source of vertical rhythm — calm the doubled gaps from the legacy rules */
.lx-next #modalOverlay .lx-filters-wrapper > .lx-row { margin: 0 0 var(--lx-space-4); }
.lx-next #modalOverlay .lx-filters-wrapper > .lx-row:first-child { margin-bottom: var(--lx-space-4); }
.lx-next #modalOverlay .lx-filters-wrapper .be-counter { margin-bottom: var(--lx-space-2); }
.lx-next #modalOverlay .lx-filters-wrapper .amenities-section ul { margin-top: var(--lx-space-3); }
.lx-next #modalOverlay .lx-filters-wrapper .ztext2 { color: var(--lx-color-ink); font-family: var(--lx-font-sans); }

/* brand-teal accents in place of the legacy blue */
.lx-next #modalOverlay .be-counter-btn { background: var(--lx-color-brand); }
.lx-next #modalOverlay .be-counter-btn:hover { background: var(--lx-color-brand-ink); }
.lx-next #modalOverlay .be-counter .zicon,
.lx-next #modalOverlay .be-counter .fa { color: var(--lx-color-brand); }
/* the +/- glyphs sit on the SOLID brand button → must be white, not brand-on-brand */
.lx-next #modalOverlay .be-counter-btn .fa,
.lx-next #modalOverlay .be-counter-btn i { color: #fff !important; font-size: 14px; line-height: 1; }
.lx-next #modalOverlay .be-filter-checkbox input { accent-color: var(--lx-color-brand); }
.lx-next #modalOverlay .amenity-wrapper:hover label,
.lx-next #modalOverlay .attr-item:hover label { border-color: var(--lx-color-brand); color: var(--lx-color-brand); }
.lx-next #modalOverlay .amenity-wrapper.selected label,
.lx-next #modalOverlay .attr-item.selected label,
.lx-next #modalOverlay .amenity-wrapper:has(input:checked) label,
.lx-next #modalOverlay .attr-item:has(input:checked) label {
  background: var(--lx-color-brand) !important;
  border-color: var(--lx-color-brand) !important;
  color: #fff !important;
}

/* action row: Clear (outline) + Apply (solid teal), side by side, no inner scroll dependency */
.lx-next #modalOverlay .lx-filters-actions .lx-column {
  display: flex; gap: var(--lx-space-3); align-items: center; padding: 0;
}
.lx-next #modalOverlay #applyfilters.lx-btn-apply {
  margin-top: 0; flex: 1 1 auto; width: auto;
  background: var(--lx-color-brand); color: #fff; border: 0;
  border-radius: var(--lx-radius-md); padding: 13px 24px;
  font-family: var(--lx-font-sans); font-weight: var(--lx-weight-bold);
  font-size: var(--lx-text-base); cursor: pointer; transition: background var(--lx-transition);
}
.lx-next #modalOverlay #applyfilters.lx-btn-apply:hover { background: var(--lx-color-brand-ink); }
.lx-next #modalOverlay #lx-clearfilters.lx-btn-clear {
  margin-top: 0; flex: 0 0 auto; width: auto;
  background: #fff; color: var(--lx-color-ink-2);
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-md);
  padding: 13px 22px; font-family: var(--lx-font-sans); font-weight: var(--lx-weight-medium);
  font-size: var(--lx-text-base); cursor: pointer;
  transition: background var(--lx-transition), border-color var(--lx-transition), color var(--lx-transition);
}
.lx-next #modalOverlay #lx-clearfilters.lx-btn-clear:hover {
  background: var(--lx-color-brand-tint); border-color: var(--lx-color-brand); color: var(--lx-color-brand);
}

/* ════════════════════════════════════════════════════════════════════════
   Results AJAX engine — skeleton cards, sort control, infinite-scroll status
   (lx-results.js). Pagination is hidden by JS when infinite scroll initialises
   (so it's gone in Map view too); the server control stays as the no-JS fallback.
   ════════════════════════════════════════════════════════════════════════ */
.lx-next .lx-card--skeleton { pointer-events: none; }
.lx-next .lx-card--skeleton .lx-card__media { aspect-ratio: 4 / 3; height: auto; border-radius: 0; }
.lx-next .lx-card--skeleton .lx-card__body {
  display: flex; flex-direction: column; gap: 9px;
  padding: var(--lx-space-3) var(--lx-space-4) var(--lx-space-4);
}
.lx-next .lx-skel--line { height: 12px; border-radius: 5px; width: 100%; }
.lx-next .lx-skel--title { height: 17px; }
.lx-next .lx-skel--price { height: 18px; margin-top: 8px; }

.lx-next .lx-infinite-status {
  text-align: center; padding: var(--lx-space-4) 0; min-height: 6px;
  font-size: var(--lx-text-sm); color: var(--lx-color-ink-3);
}

/* clean sort control (replaces the dead legacy sort <select>) */
.lx-next .lx-sort { display: inline-flex; align-items: center; gap: 7px; }
.lx-next .lx-sort__lbl {
  font-size: 11px; font-weight: var(--lx-weight-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--lx-color-ink-3);
}
.lx-next .lx-sort__select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--lx-color-line); border-radius: var(--lx-radius-sm);
  background: var(--lx-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238a8580' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding: 7px 30px 7px 12px; font-family: var(--lx-font-sans); font-size: var(--lx-text-sm);
  color: var(--lx-color-ink); cursor: pointer; line-height: 1.2;
  transition: border-color var(--lx-transition);
}
.lx-next .lx-sort__select:hover { border-color: var(--lx-color-line-2); }

/* ════════════════════════════════════════════════════════════════════════
   Filters modal compaction (#21). The earlier rhythm rules targeted
   `.lx-filters-wrapper > .lx-row`, but the rows live a level deeper inside
   `.filters-inner` (grandchildren), so they missed and the legacy stacked gaps
   + column-stacked counters made the modal very tall. Target the real structure
   and turn each counter into ONE compact row.
   ════════════════════════════════════════════════════════════════════════ */
.lx-next #modalOverlay .filters-inner {
  display: flex; flex-direction: column; gap: var(--lx-space-4); margin: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;   /* THIS is the scroll region */
  padding: 0 var(--lx-space-6) var(--lx-space-4);   /* bottom pad so the last section clears the sticky footer */
  -webkit-overflow-scrolling: touch;
}
.lx-next #modalOverlay .filters-inner > .lx-row { margin: 0; }
.lx-next #modalOverlay .filters-inner .section,
.lx-next #modalOverlay .filters-inner .vertical-stack {
  gap: var(--lx-space-2); margin: 0; padding: 0;
}
/* the stacked bed/bath/guest/pet cards need more air between them than the
   tight 8px chip rows do — otherwise the cards read as one crowded block. */
.lx-next #modalOverlay .filters-inner .vertical-stack { gap: var(--lx-space-3); }
/* each counter: icon+label on the left, controls on the right, single row */
.lx-next #modalOverlay .be-counter {
  flex-direction: row !important; align-items: center !important;
  justify-content: space-between !important; flex-wrap: nowrap !important;
  gap: var(--lx-space-3) !important; padding: 12px 16px !important; margin: 0 !important;
}
.lx-next #modalOverlay .be-counter-group { margin: 0 !important; gap: 8px; }
/* "At least" / "Exactly" segmented toggle (replaces the old ambiguous Exact checkbox) */
.lx-next #modalOverlay .be-counter-mode {
  display: inline-flex; border: 1px solid var(--lx-color-line);
  border-radius: 999px; overflow: hidden; background: #fff; flex: 0 0 auto;
}
.lx-next #modalOverlay .be-mode-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; font-family: var(--lx-font-sans);
  font-size: 12px; font-weight: var(--lx-weight-medium); line-height: 1.2;
  color: var(--lx-color-ink-2); white-space: nowrap;
  transition: background var(--lx-transition), color var(--lx-transition);
}
.lx-next #modalOverlay .be-mode-btn.is-active { background: var(--lx-color-brand); color: #fff; }
.lx-next #modalOverlay .be-mode-btn:not(.is-active):hover {
  background: var(--lx-color-brand-tint); color: var(--lx-color-brand);
}
.lx-next #modalOverlay .filters-inner .ztext1,
.lx-next #modalOverlay .filters-inner .be-counter-title { font-size: var(--lx-text-base); }
/* heading above the amenity chips */
.lx-next #modalOverlay .lx-filter-title {
  display: block; font-size: 11px; font-weight: var(--lx-weight-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--lx-color-ink-3);
  margin: var(--lx-space-3) 0 var(--lx-space-1);   /* clear separation above each titled group */
}
/* tighter amenity chip grid */
.lx-next #modalOverlay .amenities-section { gap: 8px; padding: 0; }
.lx-next #modalOverlay .amenities-section ul { gap: 8px; margin: var(--lx-space-2) 0 0; }
.lx-next #modalOverlay .amenity-wrapper { margin: 0 !important; }
/* Pet Friendly — a proper card row that matches the bed/bath/guest counters */
.lx-next #modalOverlay .be-filter-item {
  margin: 0; background: var(--lx-color-bg-soft, #f6f7f9);
  border: 1px solid var(--lx-color-line); border-radius: var(--lx-radius-md);
}
.lx-next #modalOverlay .be-filter-checkbox {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lx-space-3); padding: 11px 14px; margin: 0; cursor: pointer;
  font-family: var(--lx-font-sans); font-size: var(--lx-text-base);
  font-weight: var(--lx-weight-medium); color: var(--lx-color-ink);
}
.lx-next #modalOverlay .be-filter-checkbox .be-filter-left { display: flex; align-items: center; gap: 8px; }
.lx-next #modalOverlay .be-filter-checkbox .be-filter-left .fa { color: var(--lx-color-brand); }
.lx-next #modalOverlay .be-filter-checkbox input {
  width: 20px; height: 20px; accent-color: var(--lx-color-brand);
  cursor: pointer; margin: 0; flex: 0 0 auto;
}

/* price-per-night slider */
.lx-next #modalOverlay .lx-pricefilter { padding: 6px 2px 0; }
.lx-next #modalOverlay .lx-pricefilter input[type="range"] {
  width: 100%; accent-color: var(--lx-color-brand); cursor: pointer; margin: 0;
}
.lx-next #modalOverlay .lx-pricefilter__out {
  font-size: var(--lx-text-sm); color: var(--lx-color-ink-2);
  font-weight: var(--lx-weight-medium); margin-top: 6px;
}

/* ── Filters modal on phones: full-screen + wrap the over-wide counter rows ── */
@media (max-width: 600px) {
  .lx-next #modalOverlay.modal-overlay { padding: 0; }
  .lx-next #modalOverlay .lx-filters-wrapper {
    width: 100%; max-width: 100%;
    height: 100vh; height: 100dvh;     /* dvh: account for the mobile URL bar */
    max-height: 100dvh; border-radius: 0;
  }
  .lx-next #modalOverlay .filters-inner {
    padding-left: var(--lx-space-4); padding-right: var(--lx-space-4);
  }
  /* the icon+label / Exact / stepper row is too wide for a phone and was
     clipping the +/- off the right edge — let the controls wrap below. */
  .lx-next #modalOverlay .be-counter {
    flex-wrap: wrap !important; row-gap: 10px !important;
  }
  .lx-next #modalOverlay .be-counter > .be-counter-group:last-child { margin-left: auto; }
}

/* ── skeleton (loading) ─────────────────────────────────────────────────── */
.lx-next .lx-skel {
  display: block; height: 16px; border-radius: 4px;
  background: linear-gradient(90deg, var(--lx-color-bg-3) 25%, #e2e6ea 37%, var(--lx-color-bg-3) 63%);
  background-size: 400% 100%; animation: lx-shimmer 1.2s ease infinite;
}
@keyframes lx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── "loading prices" holder (results cards) ────────────────────────────────
   While the batched getUnitQuoteTotals call fills each card's all-in total,
   show an explicit, unmistakable loading state: a small spinner + "Loading
   price…" caption above price-shaped shimmer bars that reserve the final
   layout, so visitors know a price is on the way (not that the card is blank
   or broken). Replaced wholesale by the real total when the quote returns. */
.lx-next .lx-card-price--loading { gap: 6px; }
.lx-next .lx-priceload__label {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: var(--lx-text-xs); font-weight: var(--lx-weight-medium);
  color: var(--lx-color-brand-ink); letter-spacing: 0.01em;
}
.lx-next .lx-priceload__spinner {
  width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--lx-color-brand-tint); border-top-color: var(--lx-color-brand);
  animation: lx-spin 0.7s linear infinite;
}
@keyframes lx-spin { to { transform: rotate(360deg); } }
.lx-next .lx-card-price--loading .lx-skel--price { height: 18px; width: 56%; border-radius: 5px; }
.lx-next .lx-card-price--loading .lx-skel--sub   { height: 11px; width: 80%; border-radius: 4px; }

/* respect reduced-motion: drop the shimmer/spin, keep the explicit text */
@media (prefers-reduced-motion: reduce) {
  .lx-next .lx-skel { animation: none; }
  .lx-next .lx-priceload__spinner { animation: none; border-top-color: var(--lx-color-brand-tint); }
}

/* ════════════════════════════════════════════════════════════════════════
   UI/UX audit polish pass (token-only)
   ════════════════════════════════════════════════════════════════════════ */

/* a11y: a single visible keyboard-focus ring across the new components
   (there was none — keyboard users had no focus indication). */
.lx-next a:focus-visible,
.lx-next button:focus-visible,
.lx-next input:focus-visible,
.lx-next select:focus-visible,
.lx-next [tabindex]:focus-visible,
.lx-next .lx-calendar__day:focus-visible {
  outline: 2px solid var(--lx-color-brand);
  outline-offset: 2px;
  border-radius: var(--lx-radius-sm);
}

/* "Save $X vs Airbnb" — make the differentiator a tinted pill, not plain text */
.lx-next .lx-card__save {
  display: inline-block; align-self: flex-start;
  background: var(--lx-color-price-bg, #eaf7ee); color: var(--lx-color-price);
  padding: 2px 9px; border-radius: var(--lx-radius-pill); margin-top: 2px;
}

/* favorite heart: visible save feedback (fill + a little pop) */
.lx-next .lx-card__fav { transition: transform 0.12s ease, color 0.12s ease; }
.lx-next .lx-card__fav:active { transform: scale(0.9); }
.lx-next .lx-card__fav[aria-pressed="true"] { color: var(--lx-color-urgent); }
.lx-next .lx-card__fav[aria-pressed="true"] svg { fill: var(--lx-color-urgent); }

/* sticky tabs: subtle elevation so they separate from the content beneath */
.lx-next .lx-tabs { box-shadow: 0 1px 0 var(--lx-color-line), 0 4px 10px rgba(12, 29, 63, 0.04); }

/* booking-card guests popover: OVERLAY (absolute), never push the CTA down */
#checkavailbox.lx-next .lx-bookcard__fields { position: relative; }
#checkavailbox.lx-next .lx-guests-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: var(--lx-z-popover);
}
#checkavailbox.lx-next .lx-guests-pop__row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; padding: var(--lx-space-2) 0; }
#checkavailbox.lx-next .lx-guests-pop__row + .lx-guests-pop__row { border-top: 1px solid var(--lx-color-line); }
#checkavailbox.lx-next .lx-guests-pop__label { font-weight: var(--lx-weight-bold); color: var(--lx-color-ink); }
#checkavailbox.lx-next .lx-guests-pop__hint { font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); }
#checkavailbox.lx-next .lx-guests-pop__max { margin: var(--lx-space-3) 0 0; padding: var(--lx-space-2) 0 0; border-top: 1px solid var(--lx-color-line); font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); }
#checkavailbox.lx-next .lx-guests-pop__max--error { color: #b91c1c; font-weight: var(--lx-weight-bold); }

/* booking-card trust line (under the CTA) */
.lx-next .lx-bookcard__trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: var(--lx-space-3) 0 0; font-size: var(--lx-text-xs); color: var(--lx-color-ink-3);
}

/* <lx-map> error fallback (when Leaflet/tiles can't load) */
.lx-next .lx-detail-map .lx-map__fallback {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--lx-color-ink-2); font-size: var(--lx-text-sm); text-decoration: underline;
}

/* ── a11y: touch targets (WCAG 2.5.5) ──────────────────────────────────────
   Carousel arrows (34px), the favourite heart (38px), the guest steppers
   (32/34px) and the calendar month arrows (32px) are all under the 44px
   minimum. Scoped to (pointer: coarse) so the desktop layout is unchanged. */
@media (pointer: coarse) {
  .lx-next .lx-card__nav,
  .lx-next .lx-card__fav,
  .lx-next .lx-stepper__btn,
  .lx-next .lx-calendar__nav {
    width: 44px; height: 44px;
  }
  /* the booking-card stepper is a fixed 3-col grid — widen it to match */
  #checkavailbox.lx-next .lx-stepper { grid-template-columns: 44px 44px 44px; }
  #checkavailbox.lx-next .lx-stepper__btn { width: 44px; height: 44px; }
}