/* ============================================================================
   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: auto;           /* §219: cards in a ROW stay equal (stretch); rows size themselves —
                                     1fr made every row as tall as the tallest card in the whole grid,
                                     so a near-miss card's date note left a 130px hole in every tile */
  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 (templates/lxFavorites.php) — §231 ───────────────────────
   One design for every install, from the tokens: the stay bar (labelled fields
   the height of the site's controls), the Compare strip on TOP of each card,
   the floating compare bar, the compare modal with its Dates row and the
   per-home "Price details". Field, button and Clear rules sit at (0,1,x)
   through :where() ON PURPOSE: a standalone site whose stay bar wears its
   search strip's classes (.lx-demo-searchstrip__field / __go, same weight,
   loaded later) restyles them — the bar's fields ARE that site's strip fields.
   A skin that wants its own idiom (mtbaker's underline fields) writes the
   usual .lx-next .lx-fav-* rule and wins on specificity. */
.lx-next.lx-fav-page { margin-top: var(--lx-space-6); }
.lx-next .lx-fav-title { margin: var(--lx-space-5) 0 var(--lx-space-2); font-size: var(--lx-text-2xl); }
.lx-next .lx-fav-empty { max-width: 560px; margin: var(--lx-space-4) 0 var(--lx-space-5); color: var(--lx-color-ink-3); }

/* the stay bar */
.lx-next .lx-fav-datebar {
  --lx-fav-control-h: 46px;                         /* every control in the row: inputs, See prices, Clear dates */
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--lx-space-3) var(--lx-space-4);
  max-width: 880px; margin: var(--lx-space-5) 0 var(--lx-space-4);
  padding: var(--lx-space-4);
  background: var(--lx-color-bg-2); border: 1px solid var(--lx-color-line); border-radius: var(--lx-radius-lg);
}
:where(.lx-next) .lx-fav-fld { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; font-weight: 400; }   /* weight 400: `font: inherit` on the input would carry the label's */
:where(.lx-next) .lx-fav-fld > span { font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); color: var(--lx-color-ink-2); }
.lx-next .lx-fav-fld--dates  { flex: 1 1 280px; max-width: 440px; }   /* "Oct 12, 2026 – Oct 17, 2026" at 16px is ~225px; never clipped */
.lx-next .lx-fav-fld--guests { flex: 0 1 132px; }
:where(.lx-next) .lx-fav-fld input {
  width: 100%; min-width: 0; height: var(--lx-fav-control-h); padding: 0 var(--lx-space-3); box-sizing: border-box;
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-sm);
  background: var(--lx-color-bg); color: var(--lx-color-ink);
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.2;   /* 16px: iOS never zooms the page on focus */
}
:where(.lx-next) .lx-fav-fld input[readonly] { cursor: pointer; }
:where(.lx-next) .lx-fav-fld input::placeholder { color: var(--lx-color-ink-3); }
:where(.lx-next) .lx-fav-fld input:focus { outline: none; border-color: var(--lx-color-accent); box-shadow: 0 0 0 3px rgba(63, 120, 224, 0.16); }
.lx-next .lx-fav-fld--dates input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-next .lx-fav-actions { display: flex; align-items: flex-end; gap: var(--lx-space-3); flex: 0 0 auto; }
:where(.lx-next) .lx-fav-go {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--lx-fav-control-h); padding: 0 var(--lx-space-5);
  border: 1px solid var(--lx-color-accent); border-radius: var(--lx-radius-sm);
  background: var(--lx-color-accent); color: #fff;
  font: inherit; font-size: var(--lx-text-base); font-weight: var(--lx-weight-bold); line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--lx-transition), border-color var(--lx-transition);
}
:where(.lx-next) .lx-fav-go:hover { background: var(--lx-color-accent-ink); border-color: var(--lx-color-accent-ink); }
/* Clear dates: a real secondary control — the row's height, on the row's baseline */
:where(.lx-next) .lx-fav-clear {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--lx-fav-control-h); padding: 0 var(--lx-space-4); box-sizing: border-box;
  border: 1px solid var(--lx-color-line-2); border-radius: var(--lx-radius-sm);
  background: transparent; color: var(--lx-color-ink-2);
  font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); line-height: 1; white-space: nowrap; text-decoration: none;
  transition: color var(--lx-transition), border-color var(--lx-transition), background var(--lx-transition);
}
:where(.lx-next) .lx-fav-clear:hover { color: var(--lx-color-ink); border-color: var(--lx-color-ink-2); background: var(--lx-color-bg); }
.lx-next .lx-fav-hint { margin: 0 0 var(--lx-space-4); font-size: var(--lx-text-sm); color: var(--lx-color-ink-3); }

/* the grid: room above the footer, like every other listing section */
.lx-next .lx-fav-grid { margin: 0 0 var(--lx-space-8); }

/* the cell is the framed box now — the Compare strip and the card share one
   border, one radius, one shadow, one hover — so the strip is an extension of
   the card, not a second box on top of it */
.lx-next .lx-fav-cell {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--lx-color-bg); border: 1px solid var(--lx-color-line); border-radius: var(--lx-radius-lg);
  box-shadow: var(--lx-shadow-1); overflow: hidden;
  transition: transform var(--lx-transition), box-shadow var(--lx-transition), border-color var(--lx-transition);
}
.lx-next .lx-fav-cell:hover { transform: translateY(-3px); box-shadow: var(--lx-shadow-2); border-color: var(--lx-color-line-2); }
.lx-next .lx-fav-cell .lx-card { flex: 1 1 auto; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.lx-next .lx-fav-cell .lx-card:hover { transform: none; box-shadow: none; }
/* the Compare strip: white, on top, control at the left, a hairline under it —
   never over the photo, so the heart and the badges stay clear */
.lx-next .lx-fav-comparetoggle {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--lx-space-2);
  margin: 0; padding: 10px var(--lx-space-4);
  background: var(--lx-color-bg); border-bottom: 1px solid var(--lx-color-line);
  font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); color: var(--lx-color-ink); line-height: 1.2;
  cursor: pointer; user-select: none;
}
.lx-next .lx-fav-comparetoggle input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--lx-color-accent); cursor: pointer; }
.lx-next .lx-fav-comparetoggle input:disabled { cursor: not-allowed; }
.lx-next .lx-fav-comparetoggle input:focus-visible { outline: 2px solid var(--lx-color-accent); outline-offset: 2px; }
.lx-next .lx-fav-comparetoggle:has(input:checked) { background: var(--lx-color-bg-2); }
.lx-next .lx-fav-unavail { opacity: 0.6; }
.lx-next .lx-fav-unavail .lx-fav-comparetoggle { cursor: not-allowed; }

/* the floating compare bar: one baseline, one height for every control */
.lx-next .lx-fav-comparebar {
  position: fixed; left: 50%; bottom: var(--lx-space-4); transform: translateX(-50%); z-index: 9500;
  display: flex; align-items: center; gap: var(--lx-space-2);
  max-width: calc(100vw - 2 * var(--lx-space-4));
  padding: var(--lx-space-2) var(--lx-space-2) var(--lx-space-2) var(--lx-space-4);
  background: var(--lx-color-ink); color: #fff; border-radius: var(--lx-radius-pill); box-shadow: var(--lx-shadow-3);
  font-size: var(--lx-text-sm); line-height: 1; white-space: nowrap;
}
.lx-next .lx-fav-comparebar[hidden] { display: none; }
.lx-next .lx-fav-comparecount { padding-right: var(--lx-space-2); font-weight: var(--lx-weight-medium); }
.lx-next .lx-fav-comparebtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 var(--lx-space-4); margin: 0;
  border: 1px solid transparent; border-radius: var(--lx-radius-pill);
  font: inherit; font-size: var(--lx-text-sm); font-weight: var(--lx-weight-bold); line-height: 1; cursor: pointer;
  transition: background var(--lx-transition), border-color var(--lx-transition), color var(--lx-transition);
}
.lx-next .lx-fav-comparebtn--go { background: var(--lx-color-accent); color: #fff; }
.lx-next .lx-fav-comparebtn--go:hover { background: var(--lx-color-accent-ink); }
.lx-next .lx-fav-compareclear { background: transparent; color: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.32); }
.lx-next .lx-fav-compareclear:hover { color: #fff; border-color: #fff; }
/* while the bar floats, the page grows by its height (set by the script) so it
   never covers the last card's price line */
.lx-next.lx-fav-page.is-comparing { padding-bottom: calc(var(--lx-fav-bar-h, 52px) + 2 * var(--lx-space-4)); }

/* the compare modal */
.lx-next .lx-fav-comparemodal {
  position: fixed; inset: 0; z-index: 9600; background: rgba(20, 18, 15, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--lx-space-4);
}
/* The template toggles this modal via the `hidden` attribute, 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-next .lx-fav-comparemodal[hidden] { display: none; }
.lx-next .lx-fav-comparebox {
  position: relative; width: 100%; max-width: 1040px; max-height: 90vh; overflow: hidden;
  padding: var(--lx-space-5); background: var(--lx-color-bg); border-radius: var(--lx-radius-lg); box-shadow: var(--lx-shadow-3);
}
.lx-next .lx-fav-comparebox h2 { margin: 0 0 var(--lx-space-3); font-size: var(--lx-text-xl); }
.lx-next .lx-fav-compareclose {
  position: absolute; top: var(--lx-space-2); right: var(--lx-space-3); width: 40px; height: 40px;
  border: none; background: none; font-size: 28px; line-height: 1; color: var(--lx-color-ink-3); cursor: pointer;
}
.lx-next .lx-fav-compareclose:hover { color: var(--lx-color-ink); }
.lx-next .lx-fav-comparescroll { overflow: auto; max-height: calc(90vh - 96px); }
.lx-next .lx-fav-comparetable { width: 100%; border-collapse: collapse; table-layout: fixed; }   /* fixed: every home the same column, whatever its name's length */
.lx-next .lx-fav-comparetable th:first-child { width: 150px; }
.lx-next .lx-fav-comparetable th, .lx-next .lx-fav-comparetable td {
  padding: var(--lx-space-3); border-bottom: 1px solid var(--lx-color-line); text-align: left; vertical-align: top; font-size: var(--lx-text-sm);
}
.lx-next .lx-fav-comparetable th { color: var(--lx-color-ink-3); font-weight: var(--lx-weight-medium); font-size: var(--lx-text-xs); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.lx-next .lx-fav-comparetable td { min-width: 160px; border-left: 1px solid var(--lx-color-line); }
.lx-next .lx-fav-comparetable a { text-decoration: none; }
.lx-next .lx-fav-comparetable img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 var(--lx-space-2); border-radius: var(--lx-radius-sm); }
.lx-next .lx-fav-comparename { font-family: var(--lx-font-serif); font-weight: 500; font-size: var(--lx-text-base); color: var(--lx-color-ink); }
.lx-next .lx-fav-comparestay { font-weight: var(--lx-weight-medium); color: var(--lx-color-ink); }
.lx-next .lx-fav-comparetotal { display: block; font-size: var(--lx-text-lg); font-weight: var(--lx-weight-bold); color: var(--lx-color-ink); }
.lx-next .lx-fav-comparetotal--none { color: var(--lx-color-ink-3); font-weight: 400; }
.lx-next .lx-fav-pricetoggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--lx-space-2); padding: 0;
  border: 0; background: none; color: var(--lx-color-accent);
  font: inherit; font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); cursor: pointer;
}
.lx-next .lx-fav-pricetoggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--lx-transition);
}
.lx-next .lx-fav-pricetoggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.lx-next .lx-fav-pricetoggle:hover { color: var(--lx-color-accent-ink); }
.lx-next .lx-fav-pricedetails { margin: var(--lx-space-2) 0 0; padding-top: var(--lx-space-2); border-top: 1px dashed var(--lx-color-line); }
.lx-next .lx-fav-pricedetails[hidden] { display: none; }
.lx-next .lx-fav-priceline { display: flex; justify-content: space-between; gap: var(--lx-space-3); padding: 3px 0; color: var(--lx-color-ink-2); }
.lx-next .lx-fav-priceline > span:last-child { white-space: nowrap; }
.lx-next .lx-fav-priceline--total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--lx-color-line); color: var(--lx-color-ink); font-weight: var(--lx-weight-bold); }
.lx-next .lx-fav-pricenote { margin: 6px 0 0; font-size: var(--lx-text-xs); color: var(--lx-color-ink-3); }
/* "View & book" button text was invisible (theme's `.lx-next a` blue link colour
   overrode the white). Win on specificity so the label shows. */
.lx-next a.lx-fav-viewbtn, .lx-next a.lx-fav-viewbtn:hover {
  display: inline-flex; align-items: center; height: 38px; padding: 0 var(--lx-space-4);
  background: var(--lx-color-accent); color: #fff; border-radius: var(--lx-radius-sm);
  font-size: var(--lx-text-sm); font-weight: var(--lx-weight-bold); white-space: nowrap;
}
.lx-next a.lx-fav-viewbtn:hover { background: var(--lx-color-accent-ink); }

@media (max-width: 600px) {
  .lx-next .lx-fav-datebar { padding: var(--lx-space-3); gap: var(--lx-space-3); }
  .lx-next .lx-fav-fld--dates, .lx-next .lx-fav-fld--guests { flex: 1 1 100%; max-width: none; }
  .lx-next .lx-fav-actions { width: 100%; }
  .lx-next .lx-fav-actions > * { flex: 1 1 0; }
  .lx-next .lx-fav-comparebar {
    left: var(--lx-space-3); right: var(--lx-space-3); bottom: var(--lx-space-3); transform: none; max-width: none;
    justify-content: space-between;
  }
  .lx-next .lx-fav-comparecount { flex: 1 1 auto; }
  .lx-next .lx-fav-comparebox { padding: var(--lx-space-4); }
  .lx-next .lx-fav-comparetable { table-layout: auto; }   /* the scroll container takes the width on a phone */
  .lx-next .lx-fav-comparetable th { white-space: normal; }
  .lx-next .lx-fav-comparetable th:first-child { width: 88px; min-width: 88px; }
  .lx-next .lx-fav-comparetable td { min-width: 190px; }
}

/* ── 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: 3px; 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; }
/* §216: three states a guest can tell apart at a glance — the owner's ask.
   Available = a white tile with a border (the thing you can click).
   Booked    = a hatched grey tile, muted number (taken — never a strike-through,
               which read as "past"). Past = greyed number, no tile at all.
   Your stay = brand fill on the ends, brand tint between. A stay set elsewhere
   (the widget, a search) that runs over booked nights keeps those tiles hatched
   and rings them red, so "Dates unavailable" has a visible cause. */
.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; position: relative;
  /* §236: booked/past days are <span>s, selectable days <button>s — only the
     button is border-box by default, so the spans ran 6px taller (owner:
     "problem with the height of the dates that are booked"). One box model. */
  box-sizing: border-box;
  /* …and no margin: the legacy .lx sheet gives every <button> a 1rem bottom
     margin, which pushed a week row to 56px wherever it held a selectable
     day — the booked <span>s in that row then stretched to 56 while the
     buttons stayed 40. The real cause of the taller booked dates. */
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: none; font-size: var(--lx-text-sm);
  font-weight: var(--lx-weight-medium);
  color: var(--lx-color-ink); border-radius: var(--lx-radius-sm);
}
.lx-next .lx-calendar__day--avail { cursor: pointer; background: var(--lx-color-bg); border-color: var(--lx-color-line-2); }
.lx-next .lx-calendar__day--avail:hover { background: var(--lx-color-brand-tint); border-color: var(--lx-color-brand); }
.lx-next .lx-calendar__day--past { color: var(--lx-color-line-2); font-weight: var(--lx-weight-regular, 400); cursor: default; }
.lx-next .lx-calendar__day--booked {
  cursor: not-allowed; color: var(--lx-color-ink-3); text-decoration: none; font-weight: var(--lx-weight-regular, 400);
  background: repeating-linear-gradient(135deg, var(--lx-color-bg-3) 0 3px, var(--lx-color-line) 3px 4px);
  border-color: var(--lx-color-line);
}
.lx-next .lx-calendar__day--in { background: var(--lx-color-brand-tint); border-color: 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); border-color: var(--lx-color-brand); color: #fff; font-weight: var(--lx-weight-bold); 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__day--conflict { box-shadow: inset 0 0 0 2px var(--lx-color-urgent); color: var(--lx-color-urgent); }
.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: 14px; height: 14px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1px solid var(--lx-color-line-2); }
.lx-next .lx-cal-sw--avail { background: var(--lx-color-bg); }
.lx-next .lx-cal-sw--booked { background: repeating-linear-gradient(135deg, var(--lx-color-bg-3) 0 3px, var(--lx-color-line) 3px 4px); border-color: var(--lx-color-line); }
.lx-next .lx-cal-sw--sel { background: var(--lx-color-brand); border-color: var(--lx-color-brand); }
.lx-next .lx-calendar__min { margin-left: auto; font-weight: var(--lx-weight-medium); color: var(--lx-color-ink-3); }
.lx-next .lx-calendar__note { flex-basis: 100%; margin-top: 2px; font-size: var(--lx-text-sm); font-weight: var(--lx-weight-medium); color: var(--lx-color-urgent); }
.lx-next .lx-calendar__note[hidden] { display: none; }
/* (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; }
/* §225: the bar's glyphs are inline SVGs (stroke: currentColor), not Font Awesome —
   the standalone storefronts never load the FA sheet, so a `.fas` <i> drew nothing
   there. Sized here so a site sheet's global `svg` rule cannot inflate them. */
.lx-next .lx-searchbar__ico { width: 16px; height: 16px; flex: none; display: block; stroke: currentColor; }
.lx-next #abe-filters-activator.lx-searchbar__go .lx-searchbar__ico { width: 17px; height: 17px; color: #fff; }

/* ── §225: Reset — a real secondary control, on every site ──────────────────
   Was a bare text link that ALSO got painted as a white box on every site by
   an ID-strength !important in results.php's legacy inline <style> (now
   removed). This is the chassis version: a ghost/outlined button on lx tokens
   so each site's palette applies (ink text, --lx-color-line-2 boundary — the
   3.25:1 control-boundary token, WCAG 1.4.11), the SAME height as the Filters
   button beside it, icon + label, hover = subtle fill, keyboard ring.
   HEIGHT: it sits OUTSIDE the search card, so it stretches to the bar row and
   is inset by the card's 6px padding + 1px border on each side — its box is
   then exactly the Filters button's height whatever font the site sets.
   !important throughout: legacy css.css and the site sheets both address
   #reset-button / .lx-searchbar__reset, and the site sheets load AFTER this
   file. A site restyles it at (1,2,0)+!important (tsp does — square). */
.lx-next #reset-button.lx-searchbar__reset {
  align-self: stretch; height: auto !important; min-height: 40px; box-sizing: border-box;
  margin: 7px 0 7px 12px !important; padding: 0 16px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  background: transparent !important; color: var(--lx-color-ink) !important;
  border: 1px solid var(--lx-color-line-2) !important; border-radius: var(--lx-radius-sm) !important;
  box-shadow: none !important; cursor: pointer; white-space: nowrap; line-height: 1;
  font-family: var(--lx-font-sans); font-size: var(--lx-text-sm) !important;
  font-weight: var(--lx-weight-medium); letter-spacing: 0; text-transform: none;
  transition: background var(--lx-transition), border-color var(--lx-transition), color var(--lx-transition);
}
.lx-next #reset-button.lx-searchbar__reset:hover {
  background: var(--lx-color-bg-2) !important; border-color: var(--lx-color-ink) !important; color: var(--lx-color-ink) !important;
}
.lx-next #reset-button.lx-searchbar__reset:focus-visible {
  outline: 2px solid var(--lx-color-brand) !important; outline-offset: 2px !important;
}
.lx-next #reset-button.lx-searchbar__reset .lx-searchbar__ico { 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. §225: the Reset
   drops under the card, right-aligned, at its own compact height — the
   desktop stretch would otherwise collapse it on a row of its own. */
@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; }
  .lx-next #reset-button.lx-searchbar__reset { align-self: auto; margin: 0 0 0 auto !important; min-height: 40px; }
}

/* ── 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; }
}

/* ── Direct-booking savings: icon + tooltip (unitcard-next.php, 2026-09-05) ──
   The sentence used to take a whole row of every tile; it now sits behind an
   icon. Hover / keyboard focus / a tap (focus on touch) reveals it. The
   results drawer prints the same data-tip in full. */
/* §216: lifted above the card's stretched .lx-card__link overlay (z-index 1)
   like the heart and the carousel arrows — underneath it the icon could never
   be hovered or tapped, so the tooltip never showed (owner report). */
.lx-next .lx-card__savings { margin-top: 4px; line-height: 0; position: relative; z-index: 2; width: max-content; }
.lx-next .lx-savings-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--lx-color-accent); cursor: help;
}
.lx-next .lx-savings-tip:hover, .lx-next .lx-savings-tip:focus-visible { background: rgba(0, 0, 0, .06); outline: none; }
.lx-next .lx-savings-tip::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: min(300px, 80vw);
  padding: 8px 10px; border-radius: 8px;
  background: var(--lx-color-ink, #161513); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.lx-next .lx-savings-tip:hover::after, .lx-next .lx-savings-tip:focus::after { opacity: 1; visibility: visible; transform: none; }

/* ── §218 · unit page polish (owner's spacing report + the breakpoint pass) ──
   The meta row under the title (map · email · favorite) mixed nested spans,
   inline images and text with no common baseline; the spec row (beds / baths
   / sleeps / pets) drifted; the booking card's price block was one flex row
   that squeezed "from $X / night", "Minimum stay" and the dates note into
   three cramped columns. */
.lx-unit #top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 8px 0 10px; }
.lx-unit #top-links a, .lx-unit #top-links .favorite { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; padding: 6px 10px; }
.lx-unit #top-links a > span { display: inline-flex; align-items: center; gap: 6px; }
.lx-unit #top-links img { width: 16px; height: 16px; transform: none !important; display: inline-block; vertical-align: middle; }
.lx-unit #top-links svg { width: 16px; height: 16px; flex: 0 0 auto; }
.lx-unit #top-links .ps-1 { padding-left: 0 !important; }
.lx-unit .lx-row.icons { margin: 4px 0 18px; }
.lx-unit .lx-icons-2 { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: 2px; }
.lx-unit .lx-icons-2 > span { display: inline-flex; align-items: center; }
.lx-unit .lx-icons-2 > span.pt-1 { padding-top: 0 !important; }
.lx-unit .lx-icons-2 img { width: 20px; height: 20px; transform: none !important; display: inline-block; }
/* The booking card's price block stacks: amount + per, then the minimum, then the note. */
#checkavailbox.lx-next .lx-bookcard__price { display: block; margin-bottom: var(--lx-space-3); }
#checkavailbox.lx-next .lx-daily-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; }
#checkavailbox.lx-next .lx-bookcard__minstay { margin: 4px 0 0 !important; }
#checkavailbox.lx-next .lx-bookcard__compliance { margin: 10px 0 0; line-height: 1.45; }
/* Book Direct without dates: visibly off, still focusable so the click opens the picker. */
#checkavailbox.lx-next .lx-booklink--external.is-disabled { opacity: .45; cursor: not-allowed; }
/* The plugin's "Property not found" page in the site's own tokens, not the legacy blue. */
.lx-unit-notfound h1 { color: var(--lx-color-ink) !important; font-family: inherit !important; }
.lx-unit-notfound .button { display: inline-block; background: var(--lx-color-brand) !important; color: #fff !important; border: 0; border-radius: var(--lx-radius-md, 10px); padding: 12px 22px; font-weight: 700; text-decoration: none; text-transform: none; letter-spacing: 0; }
/* Phones and tablets: the details come first, the booking card sits below them
   (the sticky bottom bar carries the CTA down the page). */
@media (max-width: 1140px) {
  /* 0,4,0 + !important: css.css stacks this row three different ways below
     1140px (.lx-row column, .lx-unit .lx-container .lx-row column-reverse at
     <=960, another column at <=600) and the card, first in the DOM, kept
     winning. Details first, card after, at every stacked width. */
  .lx-unit .lx-container .lx-row.lx-unit-main-row { display: flex !important; flex-direction: column-reverse !important; }
}

/* §218: the sticky bottom bar's own stylesheet (lx-popups.css) loads without
   blocking; until it applies, the bar that lx-popups.js injects would sit
   in-flow and its nowrap children widened a 375px page to 564px. Pin it here
   too (this file is synchronous on every plugin-rendered page). */
.lx-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 100vw; box-sizing: border-box; overflow: hidden; }

/* §225 · "N more available on nearby dates" under the results bar — the
   ± near-misses sort after the exact matches, so this line is how a visitor
   on page 1 learns they exist. Site tokens; the link is the brand colour. */
.lx-results-nearby {
  margin: 4px 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-color-ink-2, #475569);
}
.lx-results-nearby strong { color: var(--lx-color-ink, #1f2937); font-weight: 700; }
.lx-results-nearby a { color: var(--lx-color-brand, #2563eb); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lx-results-nearby a:hover { text-decoration: none; }
.lx-card__flexnote:target { outline: 2px solid var(--lx-color-brand, #2563eb); outline-offset: 3px; }

/* ── property page · breathing room above the photo mosaic ──────────────────
   css.css's `.lx-hero { margin: 0 auto var(--lx-space-5) }` puts 24px UNDER
   the mosaic (down to the section tabs) and nothing above it, so the photos
   sat flush against the site header on every install (the owner's report on
   tsp; Mt Baker had patched it per-site with an ID rule in §208, now retired).
   This is the chassis's answer: the same token above as below, so the mosaic
   floats between the header and the tabs with one even gap on every site.
   This file loads after css.css, so equal specificity wins by source order.
   Phones (≤640px): the mosaic is a single swipe photo — the tighter step. */
.lx-hero { margin-top: var(--lx-space-5); }
@media (max-width: 640px) {
  .lx-hero { margin-top: var(--lx-space-4); }
}
/* §228 · community + drive-time on cards (a site that publishes its
   communities' drive times — manifest content `neighbourhoods` — gets the
   badge; skins colour it). The minimum-stay note rides the from-price line. */
.lx-card__drive { position: absolute; left: 10px; top: 10px; z-index: 3; padding: 4px 9px; border-radius: 3px; font-size: 12px; font-weight: 700; line-height: 1.2; background: var(--lx-color-ink, #1f2937); color: #fff; pointer-events: none; }
.lx-card__minstay { font-size: 12.5px; color: var(--lx-color-ink-3, #64748b); }
.lx-units-all__list { list-style: none; padding: 0; margin: 18px 0 40px; columns: 2; column-gap: 40px; }
.lx-units-all__list li { break-inside: avoid; padding: 5px 0; font-size: 15px; }
.lx-units-all__meta { color: var(--lx-color-ink-3, #64748b); font-size: 13px; }
@media (max-width: 720px) { .lx-units-all__list { columns: 1; } }