/* ==========================================================================
   Homino (site13) — property search / listings page.

   Everything is namespaced ls- (listings) and es- (estate card) and scoped
   under .ls-page so it cannot reach the shared shell (layout.css) or any
   other site13 screen. Palette and radii mirror public/css/site13/home.css
   and property.css so a card here and the page it links to read as one
   product.

   Loads after theme13.min.css -> styleLtr.css -> layout.css, so it wins on
   cascade order alone and needs no !important except where the vendor theme
   uses !important itself (font-family, mostly).
   ========================================================================== */

/* The global stylesheet pins Arial with !important, which flattens the type
   hierarchy — restore a stack that actually ships semibold/bold weights. */
.ls-page,
.ls-page h1,
.ls-page h2,
.ls-page h3,
.ls-page b,
.ls-page strong,
.ls-page button,
.ls-page input,
.ls-page select,
.ls-page textarea,
.leaflet-container {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.ls-page {
  --t: #142D54;
  --t-dark: #0E2142;
  --t-soft: #F8F1DE;
  --navy: #142D54;
  --ink: #142D54;
  --muted: #5A6B86;
  --line: #E9E4DA;
  --bg: #FFFFFF;
  --bg-soft: #F8F6F1;
  --amber: #F59E0B;
  --green: #16A34A;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 20px;
  --pill: 999px;

  --sh-sm: 0 2px 10px rgba(20,45,84, .05);
  --sh: 0 10px 30px rgba(20,45,84, .08);
  --sh-lg: 0 20px 55px rgba(20,45,84, .14);

  --max: 1350px;
  --gut: 28px;

  /* Height of the sticky filter bar. The map panel and the sticky columns all
     need it, and it changes with the breakpoint and with which controls the
     current deal type shows — so the page measures the bar and writes the real
     value back onto this element. The literal here is only the pre-script
     fallback. */
  --bar-h: 92px;

  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

.ls-page img { max-width: 100%; }

.ls-shell {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin-inline: auto;
}

/* Utility: visible to screen readers only. */
.ls-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ls-btn--primary {
  color: #fff;
  background: var(--t);
  box-shadow: 0 8px 20px rgba(20,45,84, .28);
}

.ls-btn--primary:hover {
  color: #fff;
  background: var(--t-dark);
  transform: translateY(-1px);
}

.ls-btn--ghost {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}

.ls-btn--ghost:hover {
  border-color: #C9D6E2;
  background: var(--bg-soft);
}

/* --------------------------------------------------------------------------
   Sticky search bar
   -------------------------------------------------------------------------- */

.ls-bar {
  position: sticky;
  /* layout.css makes .hm-header sticky at top:0 with this height; without the
     offset the filter bar slides underneath it and the first row of controls
     becomes unclickable. */
  top: var(--hm-header-h, 84px);
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.ls-bar__inner {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin-inline: auto;
  padding: 14px 0;
}

/* ---- desktop filter row ---- */

.ls-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ls-filters__body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.ls-filters__head,
.ls-filters__foot { display: none; }

.ls-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ls-field > label,
.ls-field__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Buy and rent do not share a price ladder, a rent period or a build-status
   chip, so each of those blocks declares which deal type it belongs to and the
   form shows only the matching set. */
.ls-filters[data-deal="1"] [data-deal="2"],
.ls-filters[data-deal="2"] [data-deal="1"] { display: none !important; }

.ls-field--grow { flex: 1 1 210px; min-width: 150px; }

/* Bars with only a handful of controls — the community page has no location
   picker, since the location is the page. Without this the single free-text
   field grows to fill the row and reads as one huge empty box sitting next to
   three small dropdowns. */
.ls-filters--compact .ls-field--grow { flex: 0 1 320px; }

.ls-field--type { flex: 0 1 168px; }
.ls-field--beds { flex: 0 1 116px; }
.ls-field--baths { flex: 0 1 112px; }
.ls-field--price { flex: 0 1 196px; }
.ls-field--go { flex: none; }
.ls-field--go .ls-btn { height: 46px; }

/* Native controls — one look for every select on the bar and in the sheet. */
.ls-input,
.ls-page .ls-input {
  width: 100%;
  height: 46px;
  padding: 0 34px 0 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2362778C' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* The caret and the pointer cursor belong to the <select>s. A text field that
   draws a dropdown arrow reads as a menu that never opens, and every one of
   these bars has at least one free-text field in it. */
input.ls-input,
textarea.ls-input,
.ls-page input.ls-input,
.ls-page textarea.ls-input {
  padding-inline-end: 14px;
  background-image: none;
  cursor: text;
}

.ls-input:hover { border-color: #C9D6E2; }

.ls-input:focus,
.ls-input:focus-visible {
  outline: none;
  border-color: var(--t);
  box-shadow: 0 0 0 3px rgba(20,45,84, .16);
}

/* ---- segmented Buy / Rent ---- */

.ls-seg {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}

.ls-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ls-seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 36px;
  padding: 0 16px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.ls-seg input:checked + label {
  color: var(--navy);
  background: #fff;
  box-shadow: var(--sh-sm);
}

.ls-seg input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(20,45,84, .3);
}

/* ---- status chips (off-plan / ready) ---- */

.ls-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ls-chips input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ls-chips label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ls-chips label:hover { border-color: #C9D6E2; }

.ls-chips input:checked + label {
  color: var(--t-dark);
  background: var(--t-soft);
  border-color: rgba(20,45,84, .45);
}

/* ---- price popover ---- */

.ls-pop__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.ls-pop__trigger:hover { border-color: #C9D6E2; }

.ls-pop__trigger svg {
  flex: none;
  width: 12px;
  height: 8px;
  fill: var(--muted);
  transition: transform .2s ease;
}

.ls-pop.is-open .ls-pop__trigger {
  border-color: var(--t);
  box-shadow: 0 0 0 3px rgba(20,45,84, .16);
}

.ls-pop.is-open .ls-pop__trigger svg { transform: rotate(180deg); }

.ls-pop__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 40;
  display: none;
  width: 320px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
}

.ls-pop.is-open .ls-pop__panel { display: block; }

.ls-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
}

.ls-range__sep {
  padding-bottom: 13px;
  color: var(--muted);
  font-weight: 700;
}

.ls-range > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ls-range span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- mobile summary bar (hidden on desktop) ---- */

.ls-mobilebar,
.ls-sheet-backdrop { display: none; }

/* --------------------------------------------------------------------------
   Community intro — the editorial text and photo a district carries, when it
   has one. The old district page put these in a raw Bootstrap .row that had no
   styling of its own, so the text ran the full width of the screen.
   -------------------------------------------------------------------------- */

.ls-about {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: var(--sh-sm);
}

.ls-about--noimg { grid-template-columns: minmax(0, 1fr); }

.ls-about img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.ls-about h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 21px;
  font-weight: 800;
}

.ls-about p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
  white-space: pre-line;
}

@media (max-width: 767px) {
  .ls-about {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
}

/* --------------------------------------------------------------------------
   Results header
   -------------------------------------------------------------------------- */

.ls-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 18px;
}

/* The title now lives in the shared .hm-pagehead band, so this row carries only
   the sort control and the list/map toggle — they belong on the right. */
.ls-head--toolsonly { justify-content: flex-end; }

/* h2 as well as h1: the community page already carries its <h1> in the
   .hm-pagehead band, so its results heading has to be a level down. */
.ls-head h1,
.ls-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 27.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.ls-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.ls-head p b { color: var(--ink); }

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

.ls-head__tools .ls-input {
  width: auto;
  min-width: 168px;
  height: 42px;
}

/* ---- list / map toggle ---- */

.ls-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}

.ls-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  background: none;
  border: 0;
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.ls-toggle button.is-active {
  color: var(--navy);
  background: #fff;
  box-shadow: var(--sh-sm);
}

/* --------------------------------------------------------------------------
   Page body — three columns that re-arrange between list and map view
   -------------------------------------------------------------------------- */

.ls-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 28px;
  padding-bottom: 64px;
}

/* Pages that put their title in the shared .hm-pagehead band instead of .ls-head
   still need the top gap that .ls-head used to provide. */
.ls-body--nohead { padding-top: 26px; }

/* No banner column: the results take the full width of the shell so the card
   grid has room for three tiles per row. The [data-view] rule below is more
   specific on purpose — the map view still needs its two columns. */
.ls-body--wide { grid-template-columns: minmax(0, 1fr); }

.ls-body[data-view="2"] {
  grid-template-columns: minmax(360px, 38%) minmax(0, 1fr);
}

.ls-main { min-width: 0; }

.ls-aside {
  position: sticky;
  top: calc(var(--hm-header-h, 84px) + var(--bar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ls-aside a {
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

.ls-aside img {
  display: block;
  width: 100%;
  height: auto;
}

.ls-body[data-view="2"] .ls-aside { display: none; }

/* ---- the map column ---- */

.ls-mapcol { display: none; }

.ls-body[data-view="2"] .ls-mapcol {
  display: block;
  position: sticky;
  top: calc(var(--hm-header-h, 84px) + var(--bar-h) + 16px);
  height: calc(100vh - var(--hm-header-h, 84px) - var(--bar-h) - 32px);
  min-height: 460px;
}

.ls-mapwrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

#map {
  width: 100%;
  height: 100%;
  background: #E9EEF3;
}

/* --------------------------------------------------------------------------
   Results grid + skeletons
   -------------------------------------------------------------------------- */

.ls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.ls-empty[hidden] { display: none; }

.ls-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 64px 24px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r);
}

.ls-empty i {
  font-size: 34px;
  color: var(--t);
}

.ls-empty strong {
  color: var(--navy);
  font-size: 18px;
}

.ls-empty span {
  color: var(--muted);
  font-size: 15px;
}

.ls-skeletons {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.ls-skeletons[hidden] { display: none; }

.ls-skel {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  height: 208px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.ls-skel span,
.ls-skel i {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #EEF2F6 25%, #F8FAFC 37%, #EEF2F6 63%);
  background-size: 400% 100%;
  animation: ls-shimmer 1.3s ease infinite;
}

.ls-skel > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.ls-skel i { height: 14px; }
.ls-skel i:nth-child(1) { width: 45%; height: 22px; }
.ls-skel i:nth-child(2) { width: 80%; }
.ls-skel i:nth-child(3) { width: 60%; }
.ls-skel i:nth-child(4) { width: 35%; }

@keyframes ls-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-skel span,
  .ls-skel i { animation: none; }
}

/* --------------------------------------------------------------------------
   Property card — narrow variant

   The card itself lives in estate-card.css because three screens render it.
   Only the map-column squeeze belongs to this page.
   -------------------------------------------------------------------------- */

.ls-body[data-view="2"] .es-card { grid-template-columns: 1fr; }
.ls-body[data-view="2"] .es-card__media {
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.ls-body[data-view="2"] .es-card__body { padding: 15px 16px; gap: 8px; }
.ls-body[data-view="2"] .es-card__price { font-size: 20px; }
.ls-body[data-view="2"] .es-card__ref { display: none; }

/* --------------------------------------------------------------------------
   Tile layout — photo on top, several cards to a row

   Opt-in (.ls-grid--tiles) rather than the default for .ls-grid: the same two
   cards are rendered one-per-row on the project page, the advisor page and the
   area page, and those columns are too narrow for a tile grid.

   Everything here is a card override reached through the grid, so it beats the
   card's own one-class rules in estate-card.css / projects.css whatever order
   the two files load in.
   -------------------------------------------------------------------------- */

.ls-grid--tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 22px 20px;
}

/* The map view hands the list a ~38% column; one tile per row is all that fits
   there, and auto-fill would start a second one on a very wide screen. */
.ls-body[data-view="2"] .ls-grid--tiles { grid-template-columns: minmax(0, 1fr); }

.ls-grid--tiles .es-card,
.ls-grid--tiles .pj-card { grid-template-columns: minmax(0, 1fr); }

.ls-grid--tiles .es-card__media,
.ls-grid--tiles .pj-card__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}

.ls-grid--tiles .es-card__body,
.ls-grid--tiles .pj-card__body { gap: 9px; padding: 16px 17px; }

.ls-grid--tiles .es-card__price { font-size: 21px; }
.ls-grid--tiles .pj-card__title { font-size: 18px; }

/* Two facts per row instead of three: at tile width the third column clips the
   starting price to an ellipsis, which is the one number on the card. */
.ls-grid--tiles .pj-stats { grid-template-columns: 1fr 1fr; }
.ls-grid--tiles .pj-stats .pj-stat:last-child:nth-child(3) { grid-column: 1 / -1; }

/* The reference number takes its own row so the buttons can share the width
   evenly instead of being squeezed into whatever is left beside it. */
.ls-grid--tiles .es-card__ref,
.ls-grid--tiles .pj-card__ref {
  flex: 1 1 100%;
  order: 3;
  margin-inline-end: 0;
}

.ls-grid--tiles .es-mini,
.ls-grid--tiles .pj-mini { flex: 1 1 0; padding: 0 10px; }

/* Skeletons follow the same shape, or the loading state is a row of wide bars
   that jumps into a grid of tiles the moment the results land. */
.ls-skeletons--tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 22px 20px;
}

.ls-skeletons--tiles .ls-skel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 180px 1fr;
  height: auto;
}

/* --------------------------------------------------------------------------
   Leaflet — pins, clusters, popups, controls
   -------------------------------------------------------------------------- */

.leaflet-container { background: #E9EEF3; }

.leaflet-container a.leaflet-popup-close-button { color: #fff; }

/* Price pin */
.ls-pin { background: none !important; border: 0 !important; }

.ls-pin__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  color: var(--navy, #142D54);
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20,45,84, .28);
  transform: translate(-50%, -100%);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ls-pin__inner::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: inherit;
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}

.ls-pin:hover .ls-pin__inner,
.ls-pin.is-active .ls-pin__inner {
  z-index: 5;
  color: #fff;
  background: #142D54;
  transform: translate(-50%, -100%) scale(1.06);
}

.ls-pin.is-seen .ls-pin__inner {
  color: #62778C;
  background: #F1F5F9;
}

.ls-pin.is-active .ls-pin__inner {
  background: #142D54;
}

/* Cluster bubble */
.ls-cluster { background: none !important; border: 0 !important; }

.ls-cluster__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  background: radial-gradient(circle at 32% 28%, #2A4A82 0%, #142D54 60%, #0E2142 100%);
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(20,45,84, .45);
}

.ls-cluster--md .ls-cluster__inner { font-size: 15px; }
.ls-cluster--lg .ls-cluster__inner {
  font-size: 16px;
  background: radial-gradient(circle at 32% 28%, #3A5E9E 0%, #1B3A6B 55%, #142D54 100%);
}

/* Popup card */
.ls-popup .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(20,45,84, .28);
}

.ls-popup .leaflet-popup-content {
  width: 268px !important;
  margin: 0;
  line-height: 1.4;
}

.ls-popup .leaflet-popup-tip { box-shadow: 0 20px 55px rgba(20,45,84, .28); }

.ls-popup a.leaflet-popup-close-button {
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  color: #142D54;
  font-size: 19px;
  line-height: 24px;
  background: rgba(255, 255, 255, .9);
  border-radius: 50%;
}

.ls-mc {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* The popup body is built from <span>s so it can live inside a single <a>;
   every one of them needs an explicit display or the layout collapses to
   inline text. */
.ls-mc__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #EEF2F6;
}

.ls-mc__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ls-mc__tag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: rgba(20,45,84, .85);
  border-radius: 999px;
}

.ls-mc__tag--offplan {
  inset-inline-start: auto;
  inset-inline-end: 42px;
  background: rgba(245, 158, 11, .95);
}

.ls-mc__body { display: block; padding: 12px 14px 14px; }

.ls-mc__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #142D54;
  font-size: 19px;
  font-weight: 800;
}

.ls-mc__price small { color: #62778C; font-size: 13.5px; font-weight: 700; }

.ls-mc__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
  color: #142D54;
  font-size: 14.5px;
  font-weight: 700;
}

.ls-mc__place {
  display: block;
  margin-top: 3px;
  color: #62778C;
  font-size: 13.5px;
  font-weight: 600;
}

.ls-mc__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.ls-mc__specs span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  color: #142D54;
  font-size: 13.5px;
  font-weight: 700;
  background: #F7FAFC;
  border-radius: 8px;
}

.ls-mc__cta {
  display: block;
  margin-top: 11px;
  padding: 9px 0;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  background: #142D54;
  border-radius: 10px;
}

.ls-mc__cta:hover { color: #fff; background: #9A7421; }

/* Map controls */
.ls-mapwrap .leaflet-control-zoom {
  border: 0 !important;
  box-shadow: var(--sh) !important;
  border-radius: 12px;
  overflow: hidden;
}

.ls-mapwrap .leaflet-control-zoom a {
  width: 34px;
  height: 34px;
  color: var(--navy);
  font-size: 19px;
  line-height: 34px;
  background: #fff;
  border-bottom-color: var(--line);
}

.ls-mapwrap .leaflet-control-zoom a:hover { background: var(--bg-soft); }

.ls-maptools {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.ls-mapstyle {
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--pill);
  box-shadow: var(--sh);
}

.ls-mapstyle button {
  height: 32px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 800;
  background: none;
  border: 0;
  border-radius: var(--pill);
  cursor: pointer;
}

.ls-mapstyle button.is-active {
  color: #fff;
  background: var(--t);
}

.ls-maptool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, .95);
  border: 0;
  border-radius: var(--pill);
  box-shadow: var(--sh);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.ls-maptool:hover { background: #fff; }

.ls-maptool.is-active {
  color: #fff;
  background: var(--t);
}

/* kama.js injects its own draw-boundary control into the map; this page ships a
   styled button for it in .ls-maptools instead, so hide the raw one. */
.ls-mapwrap .leaflet-draw { display: none !important; }

.ls-mapcount {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 20px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--pill);
  box-shadow: var(--sh);
}

.ls-mapcount i { color: var(--t); }

/* The bottom card that replaces the popup on phones. */
.ls-mapcard { display: none; }

/* --------------------------------------------------------------------------
   Floating list/map switch — phones only
   -------------------------------------------------------------------------- */

.ls-fab { display: none; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .ls-page { --gut: 22px; }

  /* :not() so the banner-less pages keep their single full-width column —
     this rule sits after .ls-body--wide and would otherwise win on order. */
  .ls-body:not(.ls-body--wide) { grid-template-columns: minmax(0, 1fr) 260px; }

  .ls-field--baths { display: none; }
}

@media (max-width: 991px) {
  .ls-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ls-aside { display: none; }
}

/* ---- phones / small tablets: the filter row becomes a bottom sheet ---- */

@media (max-width: 991px) {
  .ls-page {
    --gut: 16px;
    --bar-h: 68px;
  }

  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants, which would anchor the filter sheet to this
     56px-tall bar instead of to the viewport. The bar is opaque here anyway. */
  .ls-bar {
    background: #fff;
    backdrop-filter: none;
  }

  .ls-bar__inner { padding: 11px 0; }

  /* Compact bar the user actually sees */
  .ls-mobilebar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px 8px 14px;
    text-align: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    box-shadow: var(--sh-sm);
    cursor: pointer;
  }

  .ls-mobilebar > i {
    flex: none;
    color: var(--t);
    font-size: 17px;
  }

  .ls-mobilebar__txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .ls-mobilebar__txt strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ls-mobilebar__txt small {
    overflow: hidden;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ls-mobilebar__btn {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background: var(--t);
    border-radius: 50%;
  }

  .ls-mobilebar__btn em {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    display: none;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    color: var(--t-dark);
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
    background: #fff;
    border-radius: var(--pill);
    box-shadow: var(--sh-sm);
  }

  .ls-mobilebar__btn em.is-on { display: block; }

  /* Sheet */
  .ls-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: block;
    opacity: 0;
    visibility: hidden;
    background: rgba(20,45,84, .45);
    transition: opacity .24s ease, visibility .24s ease;
  }

  .ls-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .ls-filters {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 60px rgba(20,45,84, .3);
    transform: translateY(101%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }

  .ls-filters.is-open { transform: translateY(0); }

  .ls-filters__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--line);
  }

  .ls-filters__head::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 4px;
    background: var(--line);
    border-radius: var(--pill);
    transform: translateX(-50%);
  }

  .ls-filters__head strong {
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
  }

  .ls-filters__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--muted);
    font-size: 16px;
    background: var(--bg-soft);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .ls-filters__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 18px 20px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ls-field { flex: none !important; }

  /* The sheet has its own Apply button in the footer. */
  .ls-field--go { display: none; }
  .ls-field--baths { display: flex; }

  .ls-seg { width: 100%; }
  .ls-seg label { flex: 1 1 0; min-width: 0; height: 40px; }

  .ls-chips label { flex: 1 1 0; justify-content: center; height: 42px; }

  .ls-input { height: 48px; font-size: 16px; }

  /* The price popover is just another block inside the sheet. */
  .ls-pop__trigger { display: none; }

  .ls-pop__panel {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .ls-filters__foot {
    display: flex;
    flex: none;
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
  }

  .ls-filters__foot .ls-btn { flex: 1 1 auto; height: 50px; }
  .ls-filters__foot .ls-btn--ghost { flex: 0 0 108px; }

  /* Results header */
  .ls-head {
    align-items: stretch;
    gap: 12px;
    padding: 18px 0 14px;
  }

  .ls-head h1,
  .ls-head h2 { font-size: 21px; }

  .ls-head__tools { justify-content: space-between; }
  .ls-head__tools .ls-input { min-width: 0; flex: 1 1 auto; }
  .ls-head__toggle { display: none; }

  .ls-skel { grid-template-columns: 1fr; height: 330px; }

  /* ---- map view takes the whole screen ---- */
  .ls-body[data-view="2"] { grid-template-columns: minmax(0, 1fr); }

  /* The results header sits above .ls-body, so it cannot be reached from the
     [data-view] on .ls-body — setView() mirrors the state onto .ls-page. */
  .ls-page[data-view="2"] .ls-head { display: none; }
  .ls-page[data-view="2"] .ls-shell { padding-bottom: 0; }

  /* With the map fixed to the viewport there is nothing left to scroll, and a
     rubber-banding page behind a full-screen map feels broken. */
  body.ls-maplock { overflow: hidden; }

  .ls-body[data-view="2"] .ls-mapcol {
    position: fixed;
    inset: calc(var(--hm-header-h, 72px) + var(--bar-h)) 0 0 0;
    z-index: 55;
    height: auto;
    min-height: 0;
  }

  .ls-body[data-view="2"] .ls-main { display: none; }

  .ls-mapwrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ls-maptools { top: 10px; right: 10px; }
  .ls-mapcount { bottom: 14px; left: 10px; }

  /* Tapping a pin slides a card up from the bottom instead of opening a
     popup — a popup anchored to a pin near the top edge of a phone screen
     ends up half off-screen, and the close target is tiny. */
  .ls-body[data-view="2"] .ls-mapcard {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: block;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r);
    box-shadow: 0 18px 50px rgba(20,45,84, .32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }

  .ls-body[data-view="2"] .ls-mapcard.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .ls-mapcard__close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--navy);
    font-size: 15px;
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--sh-sm);
    cursor: pointer;
  }

  .ls-mapcard .ls-mc {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: stretch;
  }

  .ls-mapcard .ls-mc__media { aspect-ratio: auto; height: 100%; }
  .ls-mapcard .ls-mc__tag { top: 6px; left: 6px; height: 21px; font-size: 13px; }
  .ls-mapcard .ls-mc__tag--offplan { display: none; }
  .ls-mapcard .ls-mc__body { padding: 11px 13px; }
  .ls-mapcard .ls-mc__cta { display: none; }

  /* Floating switch */
  .ls-fab {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 75;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    background: var(--navy);
    border: 0;
    border-radius: var(--pill);
    box-shadow: 0 12px 30px rgba(20,45,84, .4);
    transform: translateX(-50%);
    cursor: pointer;
  }

  .ls-fab i { font-size: 15px; }

  /* Popups are unused on phones, but Leaflet still renders one if something
     opens it — keep it inside the viewport. */
  .ls-popup .leaflet-popup-content { width: 230px !important; }
}

@media (max-width: 575px) {
  .ls-head h1 { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   select2 — the vendor skin is a Bootstrap-3 relic; make it match .ls-input
   -------------------------------------------------------------------------- */

.ls-page .select2-container { width: 100% !important; }

.ls-page .select2-container--default .select2-selection--single {
  height: 46px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.ls-page .select2-container--default .select2-selection--single:hover {
  border-color: #C9D6E2;
}

.ls-page .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--t);
  box-shadow: 0 0 0 3px rgba(20,45,84, .16);
}

.ls-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 34px 0 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 44px;
}

.ls-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--muted);
  font-weight: 500;
}

.ls-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 8px;
  height: 44px;
}

.select2-dropdown {
  border: 1px solid var(--line, #E8EEF3);
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(20,45,84, .16);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E8EEF3;
  border-radius: 8px;
}

.select2-container--default .select2-results__option {
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #142D54;
  background: #F8F1DE;
}

.select2-container--default .select2-results__group {
  padding: 8px 14px 4px;
  color: #62778C;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* select2 renders its dropdown in a portal at the end of <body>, outside
   .ls-page, so it needs a z-index above the filter sheet. */
.select2-container--open { z-index: 1200; }