/* ============================================================
   DESTINATION PAGE — destinations.css
   Live-replica layer for luxuri.com/destinations/{city}.

   Measured on luxuri.com/destinations/miami (1440x1000, 390x844):
     hero    : same 3-video cycle as the homepage, min-h 90vh /
               md:70vh -> 700px @1000; h1 Mulish 48/48 600 upper
               ls1.2 (32/38.4 ls.8 below sm); sub 20/31.11 400;
               planner max-w-2xl
     listing : max-w-7xl p-6/lg:p-8; h2 32/38.4 400 upper; pill
               buttons border zinc-50/30 radius 6 px2.5 py1.5
               14/20 400; body = flex-col-reverse -> lg:grid-cols-3
               gap-6, cards span 2 (803px), map 389px
     cards   : grid 1 / sm:2 / lg:3 gap-6 -> 251.5px
     map     : sticky top-88, radius 16, 30svh -> lg:80svh (800px)
     about   : grid lg:2 gap-8 (592px each); media radius 16
               min-h-64; h2 32/38.4 600 upper; p 16/28; h3 24/32
     faq     : max-w-4xl (896) centred; h2 centred 32/38.4 600
               upper mb-24; cards zinc-800 radius 12 p-24, 12 apart;
               question Mulish 16/24 600; plus icon rotates 45deg
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.dest-hero {
  position: relative;
  min-height: 90vh;             /* live min-h-[90vh] */
  padding-top: 56px;            /* live pt-14 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--black);
}
@media (min-width: 768px) { .dest-hero { min-height: 70vh; } }   /* live md:min-h-[70vh] */

.dest-hero .hero-media-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.dest-hero .hero-media-wrap img,
.dest-hero .hero-media-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dest-hero .hero-media-wrap img { z-index: 0; }
.dest-hero .hero-media-wrap video { z-index: 1; }
/* live: black/20 wash + from-black/10 -> via-black/20 80% -> black 95% */
.dest-hero .hero-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 1) 95%),
    rgba(0, 0, 0, .2);
}
/* live: the hero block shrinks to its widest child, which is the max-w-2xl
   planner — so the title and sub wrap at 672px, not the full container */
.dest-hero .hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 704px;             /* 672 content + live's px-4 gutters */
  padding: 0 16px;
}

.dest-hero-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;              /* live text-3xl */
  line-height: 38.4px;
  font-weight: 600;             /* live font-semibold */
  letter-spacing: .025em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
  margin: 0 0 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 3px 2px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .1);
}
@media (min-width: 640px) { .dest-hero-title { font-size: 48px; line-height: 48px; } }
.dest-hero .hero-sub {
  font-family: var(--lx-font-body);
  font-size: 20px;              /* live text-lg */
  line-height: 31.1111px;
  font-weight: 400;
  color: #fff;
  text-wrap: pretty;
  margin: 0 0 24px;             /* live space-y-6 to the planner */
}

/* ── LISTING SECTION ──────────────────────────────────────── */
.villas-section { background: var(--black); }
.villas-wrap {
  width: 100%;
  max-width: 1280px;            /* live max-w-7xl */
  margin: 0 auto;
  padding: 24px;                /* live p-6 */
}
@media (min-width: 1024px) { .villas-wrap { padding: 32px; } }

.villas-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;          /* live space-y-4 */
}
.villas-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;              /* live text-3xl */
  line-height: 38.4px;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0;
}
.dest-section-subtitle {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-300);
  margin: 8px 0 0;
}

/* sort / filter pills — live's standard outline button */
/* live puts the grid in its own container, so the buttons clear the cards
   by the container's 32px padding rather than the 24px section rhythm */
.villas-controls { display: flex; gap: 8px; margin-bottom: 32px; position: relative; flex-wrap: wrap; align-items: center; }

/* Listing search — sits to the right of Sort by / Filters. */
.villa-search { position: relative; margin-left: auto; display: flex; align-items: center; }
.villa-search i { position: absolute; left: 14px; font-size: 13px; color: rgba(255, 255, 255, .55); pointer-events: none; }
.villa-search input {
  height: 40px; width: 260px; max-width: 100%;
  padding: 0 14px 0 36px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: transparent; color: #fff; font-size: 14px; outline: none;
}
.villa-search input::placeholder { color: rgba(255, 255, 255, .45); }
.villa-search input:focus { border-color: rgba(255, 255, 255, .5); }
.villa-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

/* "Available in <city>" results for listings outside this destination. */
.villa-search-elsewhere { margin: 0 0 22px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.villa-search-elsewhere-title { margin: 0 0 10px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.villa-search-elsewhere-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.villa-search-hit {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border-radius: 10px;
  height: 76px;                         /* fixed, so every card matches exactly */
  box-sizing: border-box;
  background: rgba(255, 255, 255, .05);
  text-decoration: none; color: #fff;
  transition: background .18s;
  overflow: hidden;
}
.villa-search-hit:hover { background: rgba(255, 255, 255, .11); }

/* Thumbnail box: one fixed size for every result, whatever the source image's
   dimensions are (or whether it loads at all). flex-shrink/grow are pinned so
   a long villa name can never squeeze it. */
.villa-search-hit-img {
  flex: 0 0 auto;
  width: 80px; height: 60px;
  min-width: 80px; max-width: 80px;
  min-height: 60px; max-height: 60px;
  box-sizing: border-box;
  border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.villa-search-hit-img img {
  width: 80px; height: 60px;
  min-width: 80px; max-width: 80px;
  min-height: 60px; max-height: 60px;
  object-fit: cover; object-position: center;
  display: block; box-sizing: border-box;
  /* Hide the alt text of a broken image — the placeholder shows instead. */
  color: transparent; font-size: 0;
}
.villa-search-hit-img.is-empty img { display: none; }
/* Placeholder is hidden unless the thumbnail is missing or fails to load. */
.villa-search-hit-noimg { display: none; font-size: 10px; color: rgba(255, 255, 255, .45); text-align: center; line-height: 1.2; padding: 0 4px; }
.villa-search-hit-img.is-empty .villa-search-hit-noimg { display: block; }

.villa-search-hit-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.villa-search-hit-name {
  font-size: 14px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Keep the location to one line so a long city can't make the card taller. */
.villa-search-hit-city {
  font-size: 12px; color: rgba(255, 255, 255, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .villa-search { margin-left: 0; width: 100%; }
  .villa-search input { width: 100%; }
}
.ctrl-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;            /* live px-2.5 py-1.5 */
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 6px;
  background: transparent;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--lx-zinc-50);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: background-color .18s;
}
.ctrl-btn:hover { background: var(--lx-zinc-800); }
/* live sizes these with fa-xs / fa-sm — don't override the glyph size here.
   The label/icon gap is 8px rather than live's 4px, per client request. */
.ctrl-btn i { margin-left: 8px; }

/* sort dropdown — live: zinc-900 panel, zinc-50/30 border, radius 8 */
.sort-dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  margin-top: 8px;
  width: 192px;                 /* live w-48 */
  padding: 8px;
  background: #0b0a0a;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}
.sort-dropdown.open { display: block; }
.sort-dropdown a {
  display: block;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lx-zinc-400);
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
.sort-dropdown a:first-child { color: #fff; }
.sort-dropdown a:hover { background: var(--lx-zinc-800); color: var(--lx-zinc-50); }

/* ── SPLIT: cards + sticky map ────────────────────────────── */
.villas-body {
  display: flex;
  flex-direction: column-reverse;   /* live: map above the grid on mobile */
  gap: 24px;
}
@media (min-width: 1024px) {
  .villas-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* live lg:grid-cols-3 */
  }
  .villas-left { grid-column: span 2; }
}
.villas-left { min-width: 0; }
.villas-right { position: relative; min-width: 0; }

.villa-listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;                    /* live gap-6 */
}
@media (min-width: 640px)  { .villa-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .villa-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* .v-card carries a slider track width (calc((100% - 48px)/4)) from the
   homepage; inside a grid cell that has to go back to full width. */
.villa-listing-grid .v-card { width: 100%; align-self: start; }

/* live: price on the left, star rating on the right of the same row */
.v-pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.v-rating {
  margin-top: 6px;              /* live mt-1.5 */
  white-space: nowrap;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}

.map-sticky {
  position: sticky;
  top: 88px;                    /* live top-22 */
  height: 30svh;                /* live h-[30svh] */
  border-radius: 16px;          /* live rounded-2xl */
  overflow: hidden;
}
@media (min-width: 1024px) { .map-sticky { height: 80svh; } }   /* live lg:h-[80svh] */
.map-sticky #destMap { width: 100%; height: 100%; }
.map-count-badge {
  position: absolute;
  z-index: 5;
  right: 16px;
  top: 16px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--lx-font-body);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── ABOUT ────────────────────────────────────────────────── */
.about-section { background: var(--black); }
.about-section .wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
@media (min-width: 1024px) { .about-section .wrap { padding: 32px; } }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;                    /* live gap-8 */
}
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-img-wrap {
  position: relative;
  height: 100%;
  min-height: 256px;            /* live min-h-64 */
  border-radius: 16px;          /* live rounded-2xl */
  overflow: hidden;
}
.about-img-wrap img,
.about-img-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 600;             /* live font-semibold */
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0 0 16px;             /* live space-y-4 */
}

/* live content-format */
.dest-rich-text {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.dest-rich-text > * { margin: 0; }
.dest-rich-text > * + * { margin-top: 16px; }
.dest-rich-text p { line-height: 28px; }
.dest-rich-text h2, .dest-rich-text h3, .dest-rich-text h4 {
  font-family: var(--lx-font-accent);
  font-weight: 300;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
}
.dest-rich-text h2 { font-size: 32px; line-height: 38.4px; margin-top: 40px; margin-bottom: 16px; }
.dest-rich-text h3 { font-size: 24px; line-height: 32px; margin-top: 32px; margin-bottom: 16px; }
.dest-rich-text h4 { font-size: 20px; line-height: 31.1111px; margin-top: 32px; margin-bottom: 16px; }
.dest-rich-text > :first-child { margin-top: 0; }
.dest-rich-text a { color: #f9f6f0; text-decoration: underline; }
.dest-rich-text a:hover { color: #e9d9c3; }
.dest-rich-text strong, .dest-rich-text b { font-weight: bolder; }
.dest-rich-text ul, .dest-rich-text ol { margin: 16px 0; padding-left: 24px; }
.dest-rich-text ul { list-style: disc; }
.dest-rich-text ol { list-style: decimal; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-wrap {
  max-width: 896px;             /* live max-w-4xl */
  margin: 0 auto;
}
.faq-head {
  font-family: var(--lx-font-accent);
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-align: center;           /* live text-center */
  text-wrap: balance;           /* live text-balance — evens the two lines */
  color: var(--lx-zinc-50);
  margin: 0 0 24px;             /* live space-y-6 */
}
.faq-item {
  background: var(--lx-zinc-800);   /* live bg-zinc-800 */
  border-radius: 12px;              /* live rounded-xl */
  padding: 24px;                    /* live p-6 */
  margin-bottom: 12px;              /* live space-y-3 */
}
.faq-item:last-child { margin-bottom: 0; }
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;                    /* live gap-6 */
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--lx-zinc-50);
}
.faq-q h3 {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--lx-font-accent);
  font-size: 16px;              /* live text-base */
  line-height: 24px;
  font-weight: 600;             /* live font-semibold */
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
}
.faq-q .qi {
  flex: 0 0 auto;
  display: flex;                /* live: span.flex.size-6.items-center */
  align-items: center;
  justify-content: center;
  width: 24px;                  /* live size-6 */
  height: 24px;
  margin: 0;                    /* the homepage .qi adds a 2px top margin */
  /* live's icon is fa-lg against the card's 14px text = 17.5px, so the box
     must stay at 14px rather than the homepage's 20px */
  font-size: 14px;
  line-height: 1;
  transition: transform .2s;
}
.faq-item.open .faq-q .qi { transform: rotate(45deg); }   /* live rotate-45 */
/* the homepage adds 8px bottom padding when open, which doubles live's
   8px question/answer gap */
.faq-item.open .faq-q { padding-bottom: 0; }
.faq-a {
  display: none;
  margin-top: 8px;              /* live mt-2 */
  /* live's dd has no left padding — the homepage .faq-a adds 24px, which
     indents the answer away from the question */
  padding: 0 48px 0 0;          /* live pr-12 */
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;            /* live text-sm/20, not 1.75 */
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: #f9f6f0; text-decoration: underline; }

/* ── FILTERS MODAL (UI only — wiring comes later) ──────────── */
.dest-filters {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-end;        /* live items-end sm:items-center */
  justify-content: center;
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 16px 32px;      /* live p-4 pb-8 */
}
@media (min-width: 640px)  { .dest-filters { align-items: center; } }
@media (min-width: 1024px) { .dest-filters { padding: 32px; } }
.dest-filters.open { display: flex; }
.dest-filters-inner {
  display: flex;
  flex-direction: column;
  width: 512px;                 /* live max-w-lg */
  max-width: 100%;
  max-height: 90svh;
  background: #000;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 16px;
  overflow: hidden;
  animation: destModalIn .2s ease-out .1s both;
}
@keyframes destModalIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
.dest-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;           /* live px-6 py-4 */
}
.dest-filters-head h3 {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 600;
  letter-spacing: .025em;
  color: #fff;
  margin: 0;
}
.dest-filters-head button {
  background: none; border: 0;
  color: #fff; cursor: pointer;
  padding: 0; line-height: 0;
}
.dest-filters-head svg { width: 20px; height: 20px; }
.dest-filters-body {
  padding: 16px 24px;
  overflow-y: auto;
}
.filter-group { margin-bottom: 24px; }   /* live mb-6 */
.filter-group:last-child { margin-bottom: 0; }
.filter-label {
  display: block;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lx-zinc-400);
  margin-bottom: 12px;          /* live mb-3 */
}
.filter-sublabel {
  display: block;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-300);
  margin-bottom: 8px;
}

/* price range */
.filter-price { padding: 0 12px; }        /* live px-3 */
.filter-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filter-price-input { position: relative; width: 96px; }   /* live w-24 */
.filter-price-input span {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--lx-zinc-500);
  font-family: var(--lx-font-body);
  font-size: 16px;
}
.filter-price-input input {
  width: 100%;
  padding: 8px 12px 8px 32px;   /* live py-2 pl-8 pr-3 */
  border: 1px solid var(--lx-zinc-700);
  border-radius: 6px;
  background: var(--lx-zinc-800);
  color: #fff;
  font-family: var(--lx-font-body);
  font-size: 16px;
}
.filter-price-input input:focus {
  outline: none;
  border-color: #e9d9c3;
  box-shadow: 0 0 0 1px #e9d9c3;
}
.filter-slider { flex: 1 1 auto; margin: 0 16px; position: relative; height: 20px; display: flex; align-items: center; }
.filter-slider-track { position: relative; width: 100%; height: 8px; background: var(--lx-zinc-700); border-radius: 999px; }
.filter-slider-fill { position: absolute; top: 0; bottom: 0; background: #e9d9c3; border-radius: 999px; }
.filter-slider-knob {
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  background: #fff;
  border: 2px solid #e9d9c3;
  border-radius: 50%;
}
.filter-price-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--lx-font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--lx-zinc-500);
}

/* bedroom pills */
.filter-pills-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  padding: 4px 12px;            /* live px-3 py-1 */
  border: 1px solid var(--lx-zinc-700);
  border-radius: 6px;
  background: transparent;
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-400);
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.filter-pill:hover { border-color: #e9d9c3; }
.filter-pill.active {
  border-color: #e9d9c3;
  background: rgba(233, 217, 195, .1);
  color: #e9d9c3;
}
.filter-note {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  font-style: italic;
  color: var(--lx-zinc-500);
  margin: 16px 0 0;
}

/* guests stepper */
.filter-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.filter-stepper { display: flex; align-items: center; gap: 12px; }
.filter-stepper button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--lx-zinc-700);
  background: none;
  color: var(--lx-zinc-300);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 13px;
}
.filter-stepper button:hover { border-color: #4c4b47; }
.filter-stepper-val {
  min-width: 40px;
  text-align: center;
  font-family: var(--lx-font-body);
  font-size: 16px;
  color: var(--lx-zinc-50);
}

/* amenity checkboxes */
.filter-amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 640px) { .filter-amenities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.filter-amenity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--lx-zinc-700);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s;
}
.filter-amenity:hover { border-color: #e9d9c3; }
.filter-amenity input {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  accent-color: #e9d9c3;
  cursor: pointer;
}
.filter-amenity span {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: #fff;
}
.filter-showmore {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-400);
  cursor: pointer;
  transition: color .2s;
}
.filter-showmore:hover { color: #e9d9c3; }
.filter-showmore svg { width: 12px; height: 12px; display: inline-block; vertical-align: middle; margin-left: 4px; transition: transform .2s; }
.filter-showmore.open svg { transform: rotate(180deg); }

.dest-filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px;                /* live px-6 py-6 */
}
.filter-clear {
  background: none;
  border: 0;
  padding: 8px 16px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-400);
  cursor: pointer;
  transition: color .2s;
}
.filter-clear:hover { color: #e9d9c3; }
.filter-apply {
  padding: 8px 24px;            /* live px-6 py-2 */
  border: 0;
  border-radius: 6px;
  background: #e9d9c3;          /* live bg-amber-200 */
  color: #000;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s;
}
.filter-apply:hover { background: #dec6a6; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.no-results {
  grid-column: 1 / -1;
  border: 1px solid rgba(248, 247, 247, .14);
  border-radius: 14px;
  background: #121212;
  padding: 54px 24px;
  text-align: center;
  font-family: var(--lx-font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--lx-zinc-400);
}

/* map marker (Leaflet) */
.lx-home-marker { position: relative; }
.lx-home-halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(60, 60, 60, .28);
  border: 1px solid rgba(60, 60, 60, .38);
}
.lx-home-pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ── "Also near <destination>" ───────────────────────────────────────────────
   Villas from neighbouring towns, shown below the destination's own listings
   and visually separated so they are never mistaken for being in the city. */
.villas-nearby {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.villas-nearby-head { margin-bottom: 20px; }
.villas-nearby-head h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: .01em;
}
.villas-nearby-head p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .55); }
/* Distance + real city, so the guest always knows where it actually is. */
.v-nearby-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, .58);
  margin: 2px 0 6px;
}

/* ── Destination map pins ────────────────────────────────────────────────────
   One black circular pin per villa, with a count bubble where pins overlap —
   matching the live site's map treatment. */
.lx-villa-pin,
.lx-cluster-pin {
  display: flex; align-items: center; justify-content: center;
  background: #111; color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-family: var(--lx-font-body, sans-serif);
}
.lx-villa-pin { width: 34px; height: 34px; font-size: 14px; }
.lx-cluster-pin { width: 42px; height: 42px; font-size: 15px; font-weight: 700; }
.lx-villa-marker, .lx-cluster-marker { background: transparent; border: 0; }

/* Popup card shown when a pin is clicked. */
.lx-map-popup { display: block; text-decoration: none; color: #111; min-width: 140px; }
.lx-map-popup strong { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
.lx-map-popup span { font-size: 13px; color: #555; }