/* --- Tabs refinement --- */
#listingTabs {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 0;
}

#listingTabs .nav-link {
  color: #495057;
  border: 1px solid transparent;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  background-color: #f8f9fa;
  margin-right: 2px;
  padding: 0.6rem 1rem;
  transition: all 0.2s ease-in-out;
}

#listingTabs .nav-link:hover {
  background-color: #e9ecef;
  border-color: #dee2e6 #dee2e6 #fff;
}

#listingTabs .nav-link.active {
  color: #0d6efd;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
  font-weight: 600;
}

/* --- Tab content container --- */
#listingTabsContent {
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 0.4rem 0.4rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* More specific and guaranteed to override */
.modal#modal-map .modal-body {
  padding: 1.5rem !important;
  background-color: #f8f9fa !important;
}

/* Default height inside the modal (desktop and tablets) */
#modal-map #map-canvas {
  width: 100%;
  height: 75vh;              /* taller view: 75% of viewport height */
}

/* Even taller on very large monitors */
@media (min-width: 1400px) {
  #modal-map #map-canvas {
    height: 80vh;
  }
}

/* On mobile (<=576px), use full height minus header controls */
@media (max-width: 575.98px) {
  #modal-map #map-canvas {
    height: 85vh;            /* nearly full screen */
  }
}

/* Tiny phones (just in case) */
@media (max-width: 360px) {
  #modal-map #map-canvas {
    height: 82vh;
  }
}

.property-facts ul li + li { margin-top: .35rem; }
.property-features .row > div { padding-bottom: .25rem; }



/* Listing header: consistent typography */
.listing-head .lh-title,
.listing-head .lh-price {
  font-size: 1.75rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.2;
}

/* Secondary/meta row */
.listing-head .lh-meta {
  font-size: .975rem;
  color: #6c757d;
}

/* Tiny dot separators */
.listing-head .lh-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
  display: inline-block;
}

/* Pill (For Sale / For Rent) */
.listing-head .lh-pill {
  padding: .15rem .55rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  font-weight: 600;
  color: #495057;
  background: #fff;
}

/* Meta links */
.listing-head .lh-link {
  color: #6c757d;
  text-decoration: none;
}
.listing-head .lh-link:hover {
  color: #495057;
  text-decoration: underline;
}

/* Mobile scaling */
@media (max-width: 575.98px){
  .listing-head .lh-title,
  .listing-head .lh-price { font-size: 1.5rem; }
  .listing-head .lh-meta { font-size: .92rem; }
}

/* Title & price unified style */
.listing-headline {
  margin: 0 !important;
  padding: 0 !important;          /* make sure no padding sneaks in */
  font-size: 1.35rem;
  color: #005f73;
  font-weight: 700;
  line-height: 1.2;
}

/* Align address and available text on the same vertical rhythm */
.align-line {
  line-height: 1.35;
  padding-top: 0.15rem;      /* nudge down slightly */
}

.listing-spacer {
  margin-bottom: .35rem !important;
}

.agent-qr {
  max-width: 72px;
  height: auto;
}


@media (max-width: 575.98px) {
  /* Let the outer nano wrapper grow naturally */
  #descr .nano {
    max-height: none !important;
    height: auto !important;
  }

  /* Clamp the inner text by height and add a fade */
  #descr .nano-content {
    height: auto;
    max-height: 10rem;              /* tighten: ~3–4 lines, tweak as you like */
    overflow: hidden;
    position: relative;
  }

  #descr .nano-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2rem;
    background: linear-gradient(to bottom,
                                rgba(248, 249, 250, 0),
                                #ffffff);
  }

  #descr .nano-content.expanded {
    max-height: none;
  }
  #descr .nano-content.expanded::after {
    display: none;
  }

  #descr .read-more-toggle {
    display: inline-block;
    margin-top: .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: #009ecb;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
  }
}