/* ============================================================
   PROPERTY DETAIL — property.css
   Live-replica layer for luxuri.com/properties/... pages.

   Measured on luxuri.com/properties/florida/miami-lakes/villa-zev
   (Chrome, 1440x1000 and 390x844):
     hero    : blurred cover of image 1 (blur 12, opacity .7) with
               top fade + to-black gradient; gallery grid 4 cols /
               2 rows, gap 16, height max(40svh, 384): main 600x400,
               thumbs 292x192, cells zinc-900 radius 16 shadow-lg;
               104px spacer below, content pulled up 136px
     title   : breadcrumb 16/300; h1 Mulish 40/44.44 600 ls1 upper;
               meta 16/300 with sharp fa-sm icons
     desc    : collapsed 120px + bottom fade + "+ More" 12px upper
     section : hr white/30% my-32; h2 Mulish 32/38.4 400 ls.8 upper
     amen    : grid 2/3/4 gap-16, items 16/24 400 gap-12, icon 20
     details : cards zinc-800 radius 12 pad 24; h3 Mulish 20 600;
               body 14/24.5 300
     widget  : sticky top-96; zinc-900 card, border zinc-800,
               radius 12, pad 24; boxes border zinc-700 radius 8
     related : slides 270 gap 24 (4-up), listing-style cards
   ============================================================ */

/* ── HERO / GALLERY ───────────────────────────────────────── */
.prop-hero {
  position: relative;
  background: var(--black);
  overflow: hidden;
  padding-top: 56px;            /* live pt-14 */
  margin-bottom: -136px;        /* live -mb-34 — content overlaps the fade */
}
.prop-hero-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px);           /* live blur-md */
  opacity: .7;
  z-index: 0;
}
/* live: black wash under the nav + long fade to solid black */
.prop-hero-grad-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 104px;                /* live h-26 */
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .15) 70%, rgba(0, 0, 0, 0) 95%);
}
.prop-hero-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  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%);
}
.prop-hero-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;            /* live max-w-7xl */
  margin: 0 auto;
  padding: 24px;                /* live p-6 */
}
@media (min-width: 1024px) {
  .prop-hero-wrap { padding: 32px; }   /* live lg:p-8 */
}
.prop-hero-spacer { height: 104px; }   /* live h-26 */

.prop-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;                    /* live gap-4 */
  height: 40svh;
  min-height: 384px;            /* live min-h-96 */
}
.prop-gal-cell {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #0b0a0a;          /* live bg-zinc-900 */
  border-radius: 16px;          /* live rounded-2xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  cursor: pointer;
  grid-column: span 4;          /* mobile: main image only, full width */
}
.prop-gal-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;           /* live rounded-lg on the img */
  transition: transform .3s;
}
.prop-gal-cell:hover img { transform: scale(1.1); }
.prop-gal-cell--thumb { display: none; }   /* live max-md:hidden */
@media (min-width: 768px) {
  .prop-gal-cell--thumb { display: block; grid-column: span 1; }
}
@media (min-width: 1024px) {
  .prop-gallery { grid-template-rows: repeat(2, 1fr); }
  .prop-gal-cell--main { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .prop-gal-cell--main { grid-column: span 4; }
}
/* Properties with a single photo: one full-width image, no repeated thumbs. */
.prop-gallery--single { grid-template-columns: 1fr; }
.prop-gallery--single .prop-gal-cell--main { grid-column: 1 / -1; grid-row: 1 / -1; }

.prop-gal-viewall {
  position: absolute;
  bottom: 16px;                 /* live bottom-4 right-4 */
  right: 16px;
  z-index: 3;
}
.prop-gal-viewall button {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;             /* live font-semibold */
  color: #000;
  background: var(--lx-zinc-50);
  padding: 6px 10px;            /* live px-2.5 py-1.5 -> 34px tall */
  border: 1px solid rgba(142, 139, 134, .5);   /* live border-zinc-400/50 */
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  cursor: pointer;
  transition: background-color .18s;
}
.prop-gal-viewall button:hover { background: #e9d9c3; }   /* live hover:bg-amber-200 */

/* ── CONTENT LAYOUT ───────────────────────────────────────── */
.prop-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 0;         /* live p-6 !pb-0 */
}
@media (min-width: 1024px) {
  .prop-container { padding: 32px 32px 0; }
}
/* live leaves align-items at stretch on purpose: the right column runs the
   full height of the row, which is what gives the sticky widget its travel. */
.prop-cols { display: grid; gap: 24px; }   /* live gap-6 */
@media (min-width: 1024px) {
  .prop-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* live lg:grid-cols-3 */
  .prop-cols > .prop-left  { grid-column: span 2; }
  .prop-cols > .prop-right { grid-column: span 1; }
}
.prop-left { min-width: 0; }

/* ── TITLE BLOCK ──────────────────────────────────────────── */
.prop-breadcrumb a,
.prop-breadcrumb span {   /* cities without a destination page render unlinked */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
  text-decoration: none;
}
.prop-breadcrumb a:hover { color: #e9d9c3; }
.prop-name {
  font-family: var(--lx-font-accent);
  font-size: 40px;              /* live text-4xl via h1 */
  line-height: 44.4444px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 8px 0 0;              /* live mt-2 */
}
.prop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;                     /* live gap-1.5 */
  margin: 24px 0 12px;          /* space-y-6 above, mb-3 below */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.prop-meta i { margin-right: 4px; }   /* live me-1 */

/* ── DESCRIPTION (collapse + fade, like live) ─────────────── */
.prop-desc {
  position: relative;
  margin-bottom: 24px;
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.prop-desc-body {
  max-height: 120px;            /* live x-collapse.min.120px */
  overflow: hidden;
  transition: max-height .3s ease;
}
.prop-desc.expanded .prop-desc-body {
  max-height: 4000px;
  padding-bottom: 36px;         /* live pb-9 keeps text clear of the button */
}
.prop-desc-body p { margin: 0 0 16px; }
.prop-desc-body p:last-child { margin-bottom: 0; }
.prop-desc-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding-top: 24px;            /* live pt-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, #000 70%);
}
.prop-more-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--lx-font-body);
  font-size: 12px;              /* live text-xs */
  line-height: 16px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  cursor: pointer;
}

/* ── SECTION SHELL (hr + header + arrows) ─────────────────── */
.prop-hr {
  border: 0;
  border-top: 1px solid #fff;
  opacity: .3;                  /* live hr opacity-30 */
  margin: 32px 0;               /* live my-8 */
}
.prop-sec-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;          /* live space-y-6 */
}
.prop-sec-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;              /* live text-3xl */
  line-height: 38.4px;
  font-weight: 400;             /* live font-normal */
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0;
}
.prop-sec-arrows {
  display: flex;
  gap: 8px;
  padding: 8px 0;               /* live py-2 */
}
.prop-sec-arrows button {
  background: none;
  border: 0;
  padding: 0 4px;               /* live px-1 */
  font-size: 16px;              /* fa-xl is 1.5em -> 24px, live's arrow size */
  color: var(--lx-zinc-50);
  cursor: pointer;
}
.prop-sec-arrows button:disabled { opacity: .4; cursor: default; }

/* ── AMENITIES ────────────────────────────────────────────── */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* live grid-cols-2 */
  gap: 16px;                                /* live gap-4 */
  margin-bottom: 24px;
}
@media (min-width: 640px) { .amenities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .amenities-grid { grid-template-columns: repeat(4, 1fr); } }
.amenity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;                    /* live gap-3 */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;             /* live font-normal */
  color: var(--lx-zinc-50);
}
.amenity-item i {
  font-size: 20px;              /* live fa-lg */
  line-height: 24px;
  width: 25px;                  /* live fa-fw */
  text-align: center;
  flex: 0 0 auto;
}
.see-all-btn {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--lx-zinc-50);
  background: transparent;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 6px;
  padding: 6px 10px;            /* 34px tall */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: background-color .18s;
}
.see-all-btn:hover { background: var(--lx-zinc-800); }

/* ── DETAILS CARDS ────────────────────────────────────────── */
.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;                    /* live gap-4 */
}
@media (min-width: 1024px) { .details-grid { grid-template-columns: repeat(2, 1fr); } }
.details-card {
  background: var(--lx-zinc-800);   /* live bg-zinc-800 */
  border-radius: 12px;              /* live rounded-xl */
  padding: 24px;                    /* live p-6 */
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;                /* live text-sm */
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.details-card-icon {
  /* no font-size here: fa-xl is 1.5em, so it must resolve against the card's
     14px like live (14 x 1.5 = 21px). Setting 21px here made it 31.5px. */
  margin-bottom: 16px;          /* live mb-4 */
}
.details-card h3 {
  font-family: var(--lx-font-accent);
  font-size: 20px;              /* live text-lg */
  line-height: 31.1111px;
  font-weight: 600;             /* live font-semibold */
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0 0 8px;
}
.details-card p {
  font-size: 14px;
  line-height: 24.5px;          /* live content-format 1.75 */
  margin: 16px 0 0;             /* live content-format >*+* 1rem */
}
.details-card h3 + p { margin-top: 0; }

/* ── BED CONFIGURATION (not on live — styled to match) ────── */
.bedconf-wrap { overflow: hidden; }
.bedconf-track { display: flex; gap: 18px; transition: transform .35s; }
.bedconf-card {
  flex: 0 0 calc((100% - 36px) / 3);
  background: var(--lx-zinc-800);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 999px) { .bedconf-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 639px) { .bedconf-card { flex-basis: 100%; } }
.bedconf-img { aspect-ratio: 10 / 7; overflow: hidden; }
.bedconf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bedconf-body { padding: 14px 16px 16px; }
.bedconf-name {
  font-family: var(--lx-font-accent);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin-bottom: 8px;
}
.bedconf-beds { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bedconf-bed {
  font-family: var(--lx-font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--lx-zinc-200);
}
.bedconf-bed i { margin-right: 5px; }
.bedconf-bed-muted { color: var(--lx-zinc-400); }

/* ── MAP ──────────────────────────────────────────────────── */
.prop-map {
  border-radius: 16px;          /* live rounded-2xl */
  overflow: hidden;
  height: 384px;                /* live h-96 */
  width: 100%;
  margin-bottom: 24px;          /* live mb-6 on the map's rounded wrapper */
  background: var(--lx-zinc-800);
}
.prop-map iframe, .prop-map #propMap { width: 100%; height: 100%; border: 0; }
/* approximate-area marker (halo + home pin) */
.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);
}

/* ── BOOKING WIDGET ───────────────────────────────────────── */
.prop-right { min-width: 0; }
.booking-widget-sticky { position: sticky; top: 96px; z-index: 10; }   /* live top-24 */
.booking-widget {
  background: #0b0a0a;                       /* live bg-zinc-900 */
  border: 1px solid var(--lx-zinc-800);      /* live border-zinc-800 */
  border-radius: 12px;                       /* live rounded-xl */
  padding: 24px;                             /* live p-6 */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.bw-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 24px; }   /* live mb-6 */
.bw-amount {
  font-size: 24px;              /* live text-2xl */
  line-height: 32px;
  font-weight: 600;
  color: #e9e8e7;               /* live text-zinc-100 */
}
.bw-per { font-size: 16px; line-height: 24px; color: var(--lx-zinc-400); }

.bw-datewrap { position: relative; margin-bottom: 16px; }   /* live mb-4 */
.bw-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lx-zinc-700);   /* live border-zinc-700 */
  border-radius: 8px;
  overflow: hidden;
}
.bw-date-field {
  padding: 12px;                /* live p-3 */
  text-align: left;
  background: none;
  border: 0;
  color: var(--lx-zinc-50);
  font-family: var(--lx-font-body);
  cursor: pointer;
  transition: background-color .15s;
}
.bw-date-field:first-child { border-right: 1px solid var(--lx-zinc-700); }
.bw-date-field:hover { background: var(--lx-zinc-800); }
.bw-box-label {
  display: block;
  font-size: 12px;              /* live text-xs */
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lx-zinc-500);    /* live text-zinc-500 */
}
.bw-box-val {
  display: block;
  font-size: 14px;              /* live text-sm */
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-200);    /* live text-zinc-200 */
}

.bw-guests-box {
  display: block;
  width: 100%;
  margin-top: 8px;              /* live mt-2 */
  padding: 12px;
  text-align: left;
  background: none;
  border: 1px solid var(--lx-zinc-700);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s;
  font-family: var(--lx-font-body);
}
.bw-guests-box { color: var(--lx-zinc-50); }
.bw-guests-box:hover { background: var(--lx-zinc-800); }

/* guest picker popover — live: absolute mt-2 w-full zinc-900 panel */
.bw-guest-pop {
  display: none;
  position: absolute;
  z-index: 10;
  margin-top: 8px;
  width: 100%;
  background: #0b0a0a;
  border: 1px solid var(--lx-zinc-800);
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  padding: 16px;                /* live p-4 */
}
.bw-guest-pop.open { display: block; }
.bw-guest-row { display: flex; align-items: center; justify-content: space-between; }
.bw-guest-title { font-weight: 500; color: #e9e8e7; font-size: 16px; line-height: 24px; }
.bw-guest-max { font-size: 14px; line-height: 20px; color: var(--lx-zinc-400); }
.bw-guest-ctrl { display: flex; align-items: center; gap: 12px; }   /* live gap-3 */
.bw-guest-ctrl button {
  width: 32px; height: 32px;    /* live w-8 h-8 */
  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;
}
.bw-guest-ctrl button:hover { border-color: #4c4b47; }   /* live zinc-600 */
.bw-guest-ctrl button:disabled { opacity: .5; cursor: not-allowed; }
.bw-g-count { min-width: 16px; text-align: center; color: #e9e8e7; }

/* date picker panel — live: absolute mt-2 w-full zinc-900 panel */
.bw-date-dropdown {
  display: none;
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: 100%;
  background: #0b0a0a;
  border: 1px solid var(--lx-zinc-800);
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  padding: 16px;
}
.bw-date-dropdown.open { display: block; }
.bw-cal-pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bw-cal-pill {
  font-size: 12px;
  color: var(--lx-zinc-300);
  border: 1px solid var(--lx-zinc-700);
  padding: 3px 10px;
  border-radius: 999px;
}
.bw-date-dropdown .date-dd-clear {
  background: none; border: 0;
  font-size: 12px;
  color: var(--lx-zinc-300);
  text-decoration: underline;
  cursor: pointer;
}
.bw-cal-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e9e8e7;
}
.bw-cal-nav-row button {
  background: none; border: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--lx-zinc-300);
  cursor: pointer;
}
.bw-cal-nav-row button:hover { background: var(--lx-zinc-800); }

.bw-reserve-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  padding: 10px;                /* live py-2.5 -> 40px */
  background: var(--lx-zinc-50);
  color: #000;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: background-color .18s;
}
.bw-reserve-btn:hover { background: #e9d9c3; }
.bw-reserve-btn:disabled { opacity: .5; cursor: not-allowed; }
.bw-info-btn {
  display: block;
  width: 100%;
  margin-top: 8px;              /* live mt-2 */
  padding: 6px 10px;            /* 34px tall */
  text-align: center;
  background: transparent;
  color: var(--lx-zinc-50);
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s;
}
.bw-info-btn:hover { background: var(--lx-zinc-800); color: var(--lx-zinc-50); }
.bw-nocharge {
  margin: 16px 0 0;             /* live mt-4 */
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--lx-zinc-500);
}
.bw-warning {
  margin-top: 12px;
  font-size: 13px;
  line-height: 19px;
  color: #f3c2c2;
  display: flex;
  gap: 8px;
}

/* price breakdown — live shows it only once dates are picked */
/* live hides the price breakdown until dates are picked; we keep our own
   behaviour and show it straight away with the default one-night quote. */
.bw-breakdown-wrap { display: block; }
.bw-breakdown {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lx-zinc-800);
}
.bw-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-300);
  margin-bottom: 8px;
}
.bw-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--lx-zinc-800);
  color: #e9e8e7;
}
.bw-total strong { font-weight: 600; }

.bw-deposit {
  margin-top: 16px;             /* live mt-4 pt-4 border-t */
  padding-top: 16px;
  border-top: 1px solid var(--lx-zinc-800);
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-300);
}
.bw-deposit strong { font-weight: 500; }
.bw-notes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lx-zinc-800);
  font-size: 12px;              /* live text-xs leading-relaxed */
  line-height: 19.5px;
  color: var(--lx-zinc-400);
}
.bw-notes p { margin: 0 0 8px; }   /* live mb-2 */
.bw-notes p:last-child { margin-bottom: 0; }

/* ── AMENITIES MODAL — live: black panel 896px, zinc-50/30 border ── */
.amenities-modal {
  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);  /* live backdrop-blur-md */
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 16px 32px;      /* live p-4 pb-8 */
}
@media (min-width: 640px)  { .amenities-modal { align-items: center; } }
@media (min-width: 1024px) { .amenities-modal { padding: 32px; } }
.amenities-modal.open { display: flex; }
.amenities-modal-inner {
  display: flex;
  flex-direction: column;
  width: 896px;                 /* live w-4xl */
  max-width: 100%;
  max-height: 90svh;
  background: #000;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 16px;          /* live rounded-2xl */
  overflow: hidden;
  animation: propModalIn .2s ease-out .1s both;
}
@keyframes propModalIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
.amenities-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;           /* live px-6 py-4 */
}
.amenities-modal-header h2 {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 600;
  letter-spacing: .025em;
  color: #fff;
  margin: 0;
}
.amenities-modal-header button {
  background: none; border: 0;
  color: #fff;
  padding: 0; line-height: 0;
  font-size: 18px;
  cursor: pointer;
}
.amenities-modal-body {
  padding: 16px 24px;           /* live px-6 py-4 */
  overflow-y: auto;
}
.am-category { margin-bottom: 32px; }   /* live space-y-8 */
.am-category:last-child { margin-bottom: 0; }
.am-category h3 {
  font-family: var(--lx-font-accent);
  font-size: 20px;              /* live text-lg */
  line-height: 31.1111px;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0 0 12px;             /* live space-y-3 */
}
.am-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* live grid-cols-3 */
  gap: 16px;
}
@media (max-width: 639px) { .am-grid { grid-template-columns: repeat(2, 1fr); } }
.am-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--lx-font-body);
  font-size: 14px;              /* live text-sm */
  line-height: 20px;
  font-weight: 400;
  color: var(--lx-zinc-50);
}
.am-item i {
  font-size: 20px;              /* live fa-lg */
  line-height: 20px;
  width: 25px;                  /* live fa-fw */
  text-align: center;
  flex: 0 0 auto;
}
.am-empty { color: var(--lx-zinc-400); font-size: 14px; }

/* ── GALLERY LIGHTBOX — live: zinc-900 panel on black/80 ──── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);   /* live bg-black/80 */
  padding: 16px;
}
@media (min-width: 1024px) { .lightbox { padding: 32px; } }
.lightbox.open { display: flex; }
.lightbox-inner {
  display: flex;
  flex-direction: column;
  width: 1280px;                /* live max-w-7xl */
  max-width: 100%;
  height: 90svh;
  background: #0b0a0a;          /* live bg-zinc-900 */
  border: 1px solid var(--lx-zinc-800);
  border-radius: 12px;
  overflow: hidden;
  animation: propModalIn .2s ease-out .1s both;
}
.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;           /* live px-6 py-4 */
  border-bottom: 1px solid var(--lx-zinc-800);
  flex: 0 0 auto;
}
.lb-title {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 600;
  letter-spacing: .025em;
  color: #e9e8e7;
  margin: 0;
}
.lb-close {
  background: none; border: 0;
  color: #fff; cursor: pointer;
  padding: 0; line-height: 0;
  font-size: 18px;
}
.lb-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 24px 0;
  flex: 0 0 auto;
}
.lb-tab {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--lx-zinc-50);
  background: transparent;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all .15s;
}
.lb-tab.active {
  background: #f9f6f0;          /* live amber-50 */
  border-color: #f9f6f0;
  color: #000;
}
.lb-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.lb-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;    /* live 42x42 round */
  border-radius: 50%;
  background: rgba(26, 26, 25, .8);
  border: 1px solid var(--lx-zinc-700);
  color: #e9e8e7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.lb-prev { left: 33px; }
.lb-next { right: 33px; }
.lb-counter {
  position: absolute;
  right: 33px;
  bottom: 16px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #e9e8e7;
  background: rgba(11, 10, 10, .8);
  border: 1px solid var(--lx-zinc-700);
  border-radius: 999px;
  padding: 5px 14px;
}
.lb-strip {
  display: flex;
  gap: 12px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--lx-zinc-800);
  overflow-x: auto;
  flex: 0 0 auto;
}
.lb-strip-thumb {
  flex: 0 0 133px;              /* live 133x75 */
  height: 75px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .8;
}
.lb-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-strip-thumb.active { border-color: #dec6a6; opacity: 1; }   /* live amber outline */
.lb-strip::-webkit-scrollbar { height: 8px; }
.lb-strip::-webkit-scrollbar-track { background: rgba(248, 247, 247, .9); border-radius: 4px; }
.lb-strip::-webkit-scrollbar-thumb { background: #8e8b86; border-radius: 4px; }

/* ── REVIEWS ──────────────────────────────────────────────── */
.prop-reviews-grid { display: grid; gap: 24px; }
@media (min-width: 1280px) { .prop-reviews-grid { grid-template-columns: 1fr 3fr; } }
.rev-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.rev-summary-top { display: flex; gap: 16px; align-items: center; }
.rev-summary-top > i { font-size: 40px; }   /* live text-4xl fa-comments */
.rev-summary-score {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--lx-zinc-50);
}
.rev-summary-title {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 400;
  color: var(--lx-zinc-50);
  margin: 0;
}
.rev-summary-sub {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-50);
  margin: 0 0 24px;
}
.rev-wrap { overflow: hidden; }
.rev-prop-track { display: flex; gap: 24px; transition: transform .35s; }
.prop-rev-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: var(--lx-zinc-800);   /* live bg-zinc-800 */
  border-radius: 12px;
  padding: 24px;                     /* live p-6 */
  display: flex;
  flex-direction: column;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
@media (max-width: 1099px) { .prop-rev-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 699px)  { .prop-rev-card { flex-basis: 100%; } }
.prop-rev-top { margin-bottom: 24px; }
.prop-rev-top .fa-brands { font-size: 20px; margin-right: 8px; }
.prop-rev-stars i { font-size: 14px; margin-right: 1px; }
.prop-rev-stars .rev-star-off { opacity: .25; }
.prop-rev-author { font-weight: 600; margin-bottom: 8px; }
.prop-rev-msg { flex: 1 1 auto; margin-bottom: 16px; }
.prop-rev-villa {
  align-self: flex-end;
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  text-decoration: none;
}

/* ── RELATED PROPERTIES ───────────────────────────────────── */
.prop-related-wrap { overflow: hidden; }
.prop-related-track { display: flex; transition: transform .35s; }
.prop-rel-card {
  position: relative;
  flex: 0 0 calc((100% - 72px) / 4);   /* 4-up, 24px gaps */
  margin-right: 24px;
  text-decoration: none;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
@media (max-width: 1023px) { .prop-rel-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 639px)  { .prop-rel-card { flex-basis: 100%; margin-right: 12px; } }
.prop-rel-img {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 8px;
}
.prop-rel-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 8px;
  transition: transform .3s;
}
.prop-rel-card:hover .prop-rel-img img { transform: scale(1.1); }
.prop-rel-name {
  font-family: var(--lx-font-accent);
  font-size: 20px;
  line-height: 31.1111px;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0;
  transition: color .3s;
}
.prop-rel-card:hover .prop-rel-name { color: #e9d9c3; }
.prop-rel-locrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--lx-zinc-200);
}
.prop-rel-loc { font-style: italic; margin-bottom: 8px; min-width: 0; }
/* live lets this row wrap, which strands the bathroom count on its own line
   whenever the city name is long. Keep the stats on one line and let the
   location take the second line instead. */
.prop-rel-meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.prop-rel-meta i { margin-right: 4px; }
.prop-rel-pricerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.prop-rel-price strong { font-weight: 600; }
.prop-rel-price span { color: var(--lx-zinc-400); }
.prop-rel-rating { margin-top: 6px; white-space: nowrap; }

/* live nests reviews/related in their own padded container inside the
   content container, so they sit 32px further in than the grid above */
.prop-subsection { padding: 0 24px 24px; }
@media (min-width: 1024px) { .prop-subsection { padding: 0 32px 32px; } }

/* ── PAGE BOTTOM ──────────────────────────────────────────── */
.prop-bottom-pad { height: 64px; }   /* footer make-up, matches listing pages */
@media (max-width: 1023px) { .prop-bottom-pad { height: 48px; } }

/* ── MOBILE BOOKING BAR ───────────────────────────────────── */
/* live: lg:hidden fixed bottom-0 start-0 end-0 z-50 w-full p-5
         bg-black/70 border border-zinc-50/90 backdrop-blur-[2px] rounded-xl */
.prop-mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  width: 100%;
  padding: 20px;                                 /* live p-5 */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .7);                 /* live bg-black/70 */
  border: 1px solid rgba(248, 247, 247, .9);     /* live border-zinc-50/90 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 12px;                           /* live rounded-xl */
  font-family: var(--lx-font-body);
}
@media (min-width: 1024px) { .prop-mobile-bar { display: none; } }   /* live lg:hidden */

.pmb-row { display: flex; gap: 8px; }            /* live flex gap-2 */
.pmb-info { flex-grow: 1; width: 100%; min-width: 0; }

.pmb-price { display: flex; align-items: baseline; gap: 4px; }
.pmb-amount {
  font-size: 20px; line-height: 28px;
  font-weight: 600;                              /* live font-semibold */
  color: var(--lx-zinc-50);
}
.pmb-per { color: var(--lx-zinc-400); }

.pmb-dateline { display: flex; gap: 6px; font-size: 12px; line-height: 16px; }   /* live gap-1.5 text-xs */
.pmb-dates {
  display: block;
  font-weight: 300;                              /* matches the widget's light body weight */
  color: var(--lx-zinc-50);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmb-dates:hover { text-decoration: underline; }

/* live: size-[47px] shrink-0, border-zinc-50/30, hover:bg-zinc-800 */
.pmb-phone,
.pmb-plan {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;                            /* live rounded-md */
  padding: 10px;                                 /* live px-2.5 py-2.5 */
  font-size: 14px; line-height: 20px;            /* live text-sm */
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.pmb-phone {
  width: 47px; height: 47px;
  border: 1px solid rgba(248, 247, 247, .3);
  color: var(--lx-zinc-50);
}
.pmb-phone:hover { background: var(--lx-zinc-800); }
.pmb-plan {
  min-width: 70px;                               /* live min-w-17.5 */
  background: var(--lx-zinc-50);
  color: #000;
}
.pmb-plan:hover { background: var(--lx-gold); }
.pmb-phone:focus-visible,
.pmb-plan:focus-visible { outline: 2px solid var(--lx-gold-border); outline-offset: 2px; }

/* the bar overlays the footer, so give the footer room to clear it */
@media (max-width: 1023px) {
  .lx-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* the reCAPTCHA v3 badge is fixed bottom-right at a huge z-index and would
     land on the Plan button — lift it above the bar. (live has no badge here) */
  .grecaptcha-badge { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* brief highlight when the bar scrolls you down to the widget */
.booking-widget.bw-flash { border-color: var(--lx-gold-border); transition: border-color .3s; }