html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* Shared, deliberately restrained radius for Luxana interface elements. */
.tf-btn,
button,
.form-control,
input,
select,
textarea,
.nice-select,
.box-agent,
.flat-blog-item,
.box-tes-item,
.property-item,
.box-house,
.flat-property,
.modal-content,
.luxana-enquiry-dialog,
.luxana-tour-dialog {
  border-radius: 8px !important;
}
.img-style,
.box-agent .box-img,
.flat-blog-item .img-style {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.button-subscribe {
  color: var(--white) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 0 16px;
  min-width: 64px;
}

.luxana-enquiry-modal,
.luxana-tour-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(var(--navy-rgb), 0.62);
}
.luxana-enquiry-modal.is-open,
.luxana-tour-modal.is-open {
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.luxana-enquiry-modal {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.luxana-enquiry-dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 32px;
  background: var(--bg-surface);
  box-shadow: 0 18px 50px rgba(var(--black-rgb), 0.2);
}
.luxana-modal-close {
  position: absolute;
  top: 12px;
  right: 15px;
  border: 0;
  background: transparent;
  color: var(--text-heading);
  font-size: 28px;
  line-height: 1;
  padding: 6px;
}
.luxana-interest-options {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
.luxana-interest-options label {
  flex: 1;
  margin: 0;
}
.luxana-interest-options input {
  position: absolute;
  opacity: 0;
}
.luxana-interest-options span {
  display: block;
  padding: 11px 8px;
  border: 1px solid var(--slate-border);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.luxana-interest-options input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.luxana-enquiry-dialog .form-control {
  margin-bottom: 12px;
  min-height: 48px;
}
.luxana-enquiry-status {
  display: none;
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--blue-tint);
  color: var(--navy);
}
.luxana-enquiry-status.is-visible {
  display: block;
}

.luxana-tour-dialog {
  width: min(100%, 1000px);
  background: var(--gray-900-cool);
  padding: 0;
  overflow: hidden;
}
.luxana-tour-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  color: var(--white);
}
.luxana-tour-toolbar .luxana-modal-close {
  position: static;
  color: var(--white);
}
.luxana-tour-stage {
  height: min(65vh, 620px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: var(--slate-900) center / cover no-repeat;
}
.luxana-tour-stage.is-dragging {
  cursor: grabbing;
}
.luxana-tour-hint {
  color: rgba(var(--white-rgb), 0.8);
  font-size: 13px;
}

.review-clamp {
  display: -webkit-box;
  height: 4.5em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.review-clamp.is-expanded {
  display: block;
  height: 4.5em;
  overflow-y: auto;
}
.review-read-more {
  display: inline-block;
  margin-top: 6px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-body);
  font: inherit;
  font-weight: 600;
}

.luxana-agent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.luxana-agent-grid .box-agent {
  height: 100%;
}
.luxana-agent-grid .box-img {
  display: block;
  aspect-ratio: 0.82;
  overflow: hidden;
}
.luxana-agent-grid .box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.luxana-agent-grid .content {
  min-height: 102px;
}

/* Property photos come from admin uploads and vary in native size — pin a
   consistent aspect ratio (matching the theme's original demo images) so
   card heights stay aligned across a row instead of stretching to fit
   whichever image happens to be tallest.
   Scoped away from list-style-1/list-style-2 (the "list view" tab on
   properties-listing) the same way the theme's own hover-zoom rule just
   above this file's is — those variants already give the thumbnail its own
   sizing in styles.css (.list-style-1 .images-style { height: 100% },
   .archive-top { width: 36.5% }, stretching to fill the row's flex height).
   Forcing a fixed 41:27 box on top of that fought the theme's layout and
   squished/cropped list-view thumbnails instead of filling the row. */
.homelengo-box:not(.list-style-1, .list-style-2) .images-style {
  aspect-ratio: 41 / 27;
}
.homelengo-box:not(.list-style-1, .list-style-2) .images-style img {
  height: 100%;
  object-fit: cover;
}

/* Explore Cities location tiles — same problem as above. The theme's
   original 7 demo photos happen to share one aspect ratio, but tiles for
   locations picked up from a property's Location field (see
   LocationModel::ensureExists()) draw from a wider set of bundled/uploaded
   photos with mixed dimensions (square, portrait, wide). Without a pinned
   ratio, whichever tile got a wider/shorter image renders visibly shorter
   than its neighbours in the row/carousel. */
.box-location .image {
  aspect-ratio: 465 / 578;
}
.box-location .image img {
  height: 100%;
  object-fit: cover;
}

/* Featured Properties / Recommended For You homepage grid — the image is
   already pinned to a fixed ratio above, but the text content below it
   isn't: titles, locations and agent names vary in length per listing, and
   .homelengo-box is `display:block` with no height/flex mechanism of its
   own. Bootstrap's flex row already stretches each *column* to match the
   tallest one, but a block-level card never grows to fill that stretched
   column on its own — it just stays as tall as its own content, so a card
   next to a longer-titled neighbour renders visibly shorter. Turning the
   card into a full-height flex column makes it fill the column, and letting
   .archive-bottom stretch too (rather than sitting at its own content
   height) is what makes that column-fill actually reach the card's visible
   edges instead of leaving a blank strip below a short card floating inside
   a tall one.
   .archive-bottom itself keeps its content packed at the top (title, then a
   fixed gap, then the agent/price row) rather than space-between-ing them
   to the card's full height — space-between was tried first, but with the
   image already pinned to a fixed ratio above, the leftover room in a
   normal-height card is bigger than it looks, and stretching a two-line
   gap to fill it left an oversized, empty-looking band between the specs
   row and the price. Any genuine leftover (a card actually stretched
   taller than its own content needs, per the paragraph above) now just
   reads as breathing room under the price row instead.
   Scoped away from list-style-1/list-style-2: properties-listing.php's
   wrapping <section> also carries the flat-recommended class (reused for
   its shared box-title styling), so this rule reached the "list view" tab
   there too. .homelengo-box.list-style-1 in styles.css is itself
   `display:flex` — a row (image column beside content column), same
   specificity as this selector — and this file loading after styles.css
   meant flex-direction:column won that tie, collapsing the row into a
   stack: a narrow top-left image with the full-width content block shoved
   underneath it instead of beside it. */
.flat-recommended .homelengo-box:not(.list-style-1, .list-style-2) {
  /* height: 100%; */
  display: flex;
  flex-direction: column;
}
.flat-recommended .homelengo-box:not(.list-style-1, .list-style-2) .archive-bottom {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* No gap here — .content-top already carries its own padding-bottom +
     border + margin-bottom for the divider (styles.css), which is enough
     spacing on its own. An earlier version of this rule added a 12px flex
     gap on top of that, stacking to a ~41px dead band between the specs
     row and the price row instead of the ~29px the divider was already
     designed for. */
}
/* That alone still looked uneven: the divider line under Beds/Baths/Sqft
   sits right after the title, and the title is 1 line for a short name but
   2 for a long one — so the divider landed at a different height on every
   card. Pin the title to a consistent 2-line box (padding short titles,
   clamping ones that would wrap to 3+) so the divider lines up across every
   card regardless of title length.
   Same list-view exclusion as above — list rows already clamp their title
   to 1 line via their own text-line-clamp-1 class, so this 2-line min-height
   only added unwanted extra space under a list-row title. */
.flat-recommended .homelengo-box:not(.list-style-1, .list-style-2) .content-top h6 .link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
   /* 2 lines at the 25.2px line-height set on .link in style.css */
}

/* Property detail page (see property-detail.php). Most of the layout reuses
   the agtd-* system already shipped for the agent-detail page (grid, cards,
   profile card, similar-property list) — only the image gallery and a
   couple of small pieces (location line, price) have no existing
   equivalent, so they get their own prd- namespace to avoid colliding with
   agtd-homelengo-box rules used on the same page. */
.prd-gallery-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--cream-light);
}
.prd-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prd-gallery-tags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.prd-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
}
.prd-thumb-btn {
  flex: 0 0 auto;
  width: 84px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
  transition: border-color 0.2s ease;
}
.prd-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prd-thumb-btn.active,
.prd-thumb-btn:hover {
  border-color: var(--gold);
}
.prd-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--slate);
  font-size: 14px;
  margin-top: 8px;
}
.prd-price {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-heading);
  margin-top: 16px;
}
.prd-amenities-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.prd-amenities-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  font-size: 14px;
}
.prd-amenities-list li i {
  color: var(--gold);
}
@media (max-width: 575px) {
  .prd-amenities-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .luxana-agent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .luxana-agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
  .luxana-enquiry-dialog {
    padding: 26px 20px;
  }
}


@media (max-width: 475px) {
  .luxana-agent-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 15px;
  }
  .luxana-enquiry-dialog {
    padding: 20px 16px;
  }
}

/* Mapbox migration (see mapbox-brand-map.js): the old InfoBox library was a
   bare, unstyled container that relied entirely on .map-listing-item /
   .contact-map-item for its look. Mapbox's own Popup adds its own white
   rounded box + tip by default, which would double up with that existing
   card styling — this strips Mapbox's chrome so only the site's card shows. */
.mapboxgl-popup.luxana-map-popup .mapboxgl-popup-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.mapboxgl-popup.luxana-map-popup .mapboxgl-popup-tip {
  display: none;
}

/* Dark/light theme toggle button (components/header.php). See the comment
   in header.php for why the button and .mobile-nav-toggler share this one
   wrapper instead of being separate direct children of .inner-header. */
.header-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle-btn:hover {
  background: rgba(var(--gold-rgb), 0.12);
  border-color: var(--gold);
}
.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
/* Light theme (default): show the moon ("click to go dark").
   [data-theme="dark"]: show the sun ("click to go light"). */
.theme-toggle-btn .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: block;
}

/* Below 1099px .mobile-nav-toggler switches to display:block (styles.css)
   and, being position:absolute; right:16px against the same right edge
   .header-actions-right's grid column already hugs, lands exactly on top
   of the toggle button. Reserve its 16px offset + 26px width so they sit
   side by side instead of overlapping. */
@media only screen and (max-width: 1099px) {
  .theme-toggle-btn {
    margin-right: 60px;
  }
}