/* ==========================================================================
   listing.css — Single Listing Detail Page
   Zillow/Redfin-inspired UX: gallery grid, soft CTAs, mortgage widget,
   expandable descriptions, trust signals, mobile-first responsive.
   ========================================================================== */

:root{
  --bg: #0b0f19;
  --panel: rgba(255,255,255,.92);
  --panel2: rgba(255,255,255,.82);
  --card: #ffffff;
  --border: rgba(16, 24, 40, .10);
  --text: #0b1220;
  --text-muted: rgba(11,18,32,.65);
  --white: #ffffff;
  --brand: #0f5fff;
  --brand2:#7c3aed;
  --green: #12b76a;
  --red: #f04438;
  --amber: #f79009;
  --shadow: 0 14px 44px rgba(0,0,0,.18);
  --shadow2: 0 10px 28px rgba(17,24,39,.12);
  --radius: 18px;
  --radius2: 14px;
  --maxw: 1060px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #f5f5f7;
}

a{ color:inherit; }
button{ font-family: inherit; }

/* ── Top Bar (same as default.php) ── */
.top-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 20px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:100;
}
.top-logo{
  font-family: "DM Serif Display", Georgia, serif;
  font-size:16px; font-weight:400; color: var(--text);
  margin-right:auto;
  text-decoration: none;
}
a.top-logo:hover{ opacity:.8; }

.lang-toggle{
  display:flex; gap:2px;
  border:1px solid var(--border);
  border-radius:6px; padding:2px;
  background: rgba(11,18,32,.03);
}
.lang-btn{
  border:none; background:none; cursor:pointer;
  padding:3px 10px; border-radius:4px;
  font-size:11px; font-weight:600;
  color: var(--text-muted);
  transition: all .15s;
}
.lang-btn.active{
  background: var(--text); color: var(--white);
}
.theme-toggle{
  width:34px; height:34px;
  border:1px solid var(--border);
  border-radius:8px;
  background: rgba(11,18,32,.03);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s;
}
.theme-toggle:hover{ background: rgba(11,18,32,.07); }
.theme-toggle svg{
  width:16px; height:16px;
  fill:none; stroke:var(--text); stroke-width:1.5;
}
.theme-toggle .ico-sun{ display:none; }
.theme-toggle .ico-moon{ display:block; }

/* ── Mobile menu z-index overrides (listing top-bar is z-index:100) ── */
.mobile-menu-overlay{ z-index: 99; }
.mobile-menu{ z-index: 101; }

/* Hamburger button */
.mobile-menu-btn{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  margin-left: auto;
  order: 10;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-bar{
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-menu-btn.open .mobile-menu-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open .mobile-menu-bar:nth-child(2){ opacity: 0; }
.mobile-menu-btn.open .mobile-menu-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.mobile-menu{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  padding: 60px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: background .15s;
}
.mobile-menu-item:active{ background: rgba(15,23,42,.06); }
.mobile-menu-icon{
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.mobile-menu-divider{
  height: 1px;
  background: rgba(15,23,42,.06);
  margin: 8px 16px;
}
.mobile-menu-lang{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-muted);
}
.mobile-menu-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
}
.mobile-menu-overlay.open{ display: block; }

/* ── Nav link colors for listing page (light top bar) ── */
.top-nav{
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.top-nav-link{
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(11,18,32,.45);
  transition: background .15s, color .15s;
}
.top-nav-link:hover{
  color: var(--text);
  background: rgba(15,23,42,.05);
}
.top-nav-link.active{
  color: var(--text);
  background: rgba(15,23,42,.07);
}
.top-right{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
@media(max-width:640px){
  .top-nav{ display: none; }
  .mobile-menu-btn{ display: flex; }
  .top-right .lang-toggle{ display: none; }
}

/* ── Back Link ── */
.listing-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500;
  color: var(--brand);
  text-decoration: none;
  padding: 16px 0 8px;
  transition: opacity .15s;
}
.listing-back:hover{ opacity:.7; }
.listing-back svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:2;
}

/* ── Page Container ── */
.listing-container{
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 48px;
}

/* ── Loading Skeleton ── */
.listing-skeleton{
  padding: 32px 0;
}
.skel-block{
  background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.skel-gallery{ height:400px; margin-bottom:20px; }
.skel-title{ height:32px; width:60%; margin-bottom:12px; }
.skel-line{ height:18px; width:80%; margin-bottom:10px; }
.skel-line.short{ width:40%; }
.skel-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-top:24px;
}
.skel-card{ height:80px; }

/* ── Error State ── */
.listing-error{
  text-align:center;
  padding: 80px 20px;
}
.listing-error-icon{
  width:48px; height:48px;
  margin:0 auto 16px;
  color: var(--red);
}
.listing-error-icon svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:1.5;
}
.listing-error h2{
  font-family: "DM Serif Display", Georgia, serif;
  font-size:24px; font-weight:400;
  margin:0 0 8px;
}
.listing-error p{
  color: var(--text-muted);
  font-size:14px; margin:0 0 24px;
}
.listing-error a{
  display:inline-block;
  padding:10px 24px;
  background: var(--brand);
  color:#fff; border-radius:8px;
  font-weight:600; font-size:14px;
  text-decoration:none;
  transition: opacity .15s;
}
.listing-error a:hover{ opacity:.85; }

/* ==========================================================================
   GALLERY — Zillow-style grid: hero + 2 side thumbnails
   ========================================================================== */
.listing-gallery-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4px;
  border-radius: var(--radius);
  overflow: hidden;
  height: 460px;
  margin-bottom: 24px;
  position: relative;
}
.listing-gallery-hero{
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.listing-gallery-hero img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #e8e8e8;
  transition: transform .3s;
}
.listing-gallery-hero:hover img{
  transform: scale(1.02);
}
.listing-gallery-side{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.listing-gallery-side-img{
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.listing-gallery-side-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #e8e8e8;
  transition: transform .3s;
}
.listing-gallery-side-img:hover img{
  transform: scale(1.03);
}

/* "+X more" overlay on last side image */
.listing-gallery-more{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  pointer-events: none;
  transition: background .2s;
}
.listing-gallery-side-img:hover .listing-gallery-more{
  background: rgba(0,0,0,.55);
}

/* "View all photos" button */
.listing-gallery-viewall{
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .15s;
  z-index: 2;
  display: flex; align-items: center; gap: 6px;
}
.listing-gallery-viewall:hover{
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.listing-gallery-viewall svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* Single image fallback (1-2 photos) */
.listing-gallery-single{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 460px;
  margin-bottom: 24px;
}
.listing-gallery-single img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: #e8e8e8;
  cursor: pointer;
}

.listing-no-photo{
  width:100%; height:360px;
  display:flex; align-items:center; justify-content:center;
  background: #e8e8e8;
  color: var(--text-muted);
  font-size:14px;
  border-radius: var(--radius);
  margin-bottom:24px;
}

/* ==========================================================================
   LIGHTBOX — Full screen with counter
   ========================================================================== */
.listing-lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.92);
  z-index:1000;
  display:none; align-items:center; justify-content:center;
  cursor:pointer;
}
.listing-lightbox.open{ display:flex; }
.listing-lightbox img{
  max-width:92vw; max-height:85vh;
  object-fit:contain;
  border-radius:4px;
  cursor:default;
}
.listing-lightbox-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px;
  background: rgba(255,255,255,.12);
  border:none; border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: background .15s;
}
.listing-lightbox-close:hover{ background: rgba(255,255,255,.25); }
.listing-lightbox-close svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2;
}
.listing-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  background: rgba(255,255,255,.12);
  border:none; border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: background .15s;
}
.listing-lightbox-nav:hover{ background: rgba(255,255,255,.25); }
.listing-lightbox-nav svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2.5;
}
.listing-lightbox-prev{ left:16px; }
.listing-lightbox-next{ right:16px; }

/* Lightbox counter "3 / 15" */
.listing-lightbox-counter{
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85);
  font-size: 14px; font-weight: 600;
  letter-spacing: .03em;
  pointer-events: none;
}

/* ==========================================================================
   HEADER — Price, address, stats
   ========================================================================== */
.listing-header{
  margin-bottom: 20px;
}
.listing-status-badge{
  display:inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size:11px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#fff;
  margin-bottom: 10px;
}
.listing-status-badge.active{ background: var(--green); }
.listing-status-badge.sold{ background: var(--red); }
.listing-status-badge.leased{ background: var(--amber); }
.listing-status-badge.other{ background: var(--text-muted); }

.listing-price{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 40px; font-weight: 400;
  margin: 0 0 2px;
  line-height: 1.15;
}
.listing-price-sub{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.listing-price-sub .separator{
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: .5;
}
.listing-price-sold{
  font-size:14px;
  color: var(--text-muted);
  margin-bottom:4px;
}
.listing-address{
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Stats row with icons */
.listing-stats-row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
}
.listing-stat{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}
.listing-stat svg{
  width: 18px; height: 18px;
  fill: none; stroke: var(--text-muted);
  stroke-width: 1.8;
  flex-shrink: 0;
}
.listing-stat strong{
  font-weight: 700;
}
.listing-stat span{
  color: var(--text-muted);
  font-size: 13px;
}
.listing-mls{
  font-size:12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==========================================================================
   CTA ACTION ROW — Ask, Calculate, Share
   ========================================================================== */
.listing-cta-row{
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.listing-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.listing-cta-btn svg{
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Primary CTA */
.listing-cta-primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,95,255,.25);
}
.listing-cta-primary:hover{
  background: #0d50e0;
  box-shadow: 0 6px 20px rgba(15,95,255,.35);
  transform: translateY(-1px);
}
.listing-cta-primary:active{
  transform: translateY(0);
}

/* Outline CTA */
.listing-cta-outline{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.listing-cta-outline:hover{
  background: rgba(11,18,32,.04);
  border-color: rgba(11,18,32,.18);
}

/* ==========================================================================
   TWO-COLUMN LAYOUT — Estimate + Details side by side on desktop
   ========================================================================== */
.listing-two-col{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

/* ==========================================================================
   MORTGAGE ESTIMATE WIDGET
   ========================================================================== */
.listing-aside{
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 110px;
  align-self: start;
}
.listing-estimate{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 24px;
}
.listing-estimate-title{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  margin: 0 0 4px;
}
.listing-estimate-amount{
  font-size: 32px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 16px;
  line-height: 1.2;
}
.listing-estimate-amount small{
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.listing-estimate-breakdown{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.listing-estimate-line{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(11,18,32,.06);
}
.listing-estimate-line:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.listing-estimate-line .label{
  color: var(--text-muted);
}
.listing-estimate-line .value{
  font-weight: 600;
}
.listing-estimate-note{
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.listing-estimate-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  transition: opacity .15s;
}
.listing-estimate-link:hover{ opacity:.7; }
.listing-estimate-link svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* ==========================================================================
   SECTION CARDS
   ========================================================================== */
.listing-section{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding: 24px;
  margin-bottom: 16px;
}
.listing-section-title{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px; font-weight: 400;
  margin: 0 0 16px;
}

/* ── Details Grid ── */
.listing-details-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.listing-detail-item{
  display:flex; justify-content:space-between;
  padding: 10px 0;
  border-bottom:1px solid rgba(11,18,32,.06);
  font-size:14px;
}
.listing-detail-label{
  color: var(--text-muted);
}
.listing-detail-value{
  font-weight:600;
  text-align:right;
}

/* ── Description (expandable) ── */
.listing-description{
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}
.listing-description.collapsed{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-readmore{
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: opacity .15s;
}
.listing-readmore:hover{ opacity:.7; }

/* ── Rooms Table ── */
.listing-rooms-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.listing-rooms-table th{
  text-align:left;
  font-weight:600;
  padding:8px 12px;
  border-bottom:2px solid var(--border);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.3px;
  color: var(--text-muted);
}
.listing-rooms-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(11,18,32,.06);
}
.listing-rooms-table tr:last-child td{
  border-bottom:none;
}
.listing-rooms-table tr:hover td{
  background: rgba(11,18,32,.02);
}

/* ── Map Section ── */
.listing-map{
  border-radius:10px;
  overflow:hidden;
  height:340px;
  background: #e8e8e8;
}
.listing-map iframe{
  width:100%; height:100%;
  border:none;
}

/* ── Agent / Office Info (enhanced with CTA) ── */
.listing-agent-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.listing-agent-card{
  padding: 20px;
  border:1px solid var(--border);
  border-radius: 12px;
  background: rgba(11,18,32,.02);
}
.listing-agent-role{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.listing-agent-name{
  font-size: 16px; font-weight: 600;
  margin-bottom: 6px;
}
.listing-agent-detail{
  font-size:13px;
  color: var(--text-muted);
  margin-bottom:3px;
}
.listing-agent-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  text-decoration: none;
  font-family: inherit;
  transition: all .15s;
}
.listing-agent-cta:hover{
  background: var(--brand);
  color: #fff;
}
.listing-agent-cta svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* ── Taxes / Fees Row ── */
.listing-fees-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.listing-fee-card{
  text-align:center;
  padding: 18px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  background: rgba(11,18,32,.02);
}
.listing-fee-value{
  font-size: 22px; font-weight: 700;
  margin-bottom: 4px;
}
.listing-fee-label{
  font-size: 12px;
  color: var(--text-muted);
}

/* ==========================================================================
   AI PROPERTY ESTIMATE SECTION
   ========================================================================== */
.listing-ai-estimate{
  text-align: center;
}
.listing-ai-value{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--brand);
  margin: 8px 0 10px;
}
.listing-ai-confidence{
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.listing-ai-confidence.high{
  background: rgba(18,183,106,.12);
  color: #12b76a;
}
.listing-ai-confidence.med{
  background: rgba(247,144,9,.12);
  color: #f79009;
}
.listing-ai-confidence.low{
  background: rgba(240,68,56,.12);
  color: #f04438;
}
.listing-ai-range-section{
  text-align: left;
  margin-top: 4px;
}
.listing-ai-range-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.listing-ai-range{
  padding: 0 4px;
}
.listing-ai-range-bar{
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(18,183,106,.25) 0%, var(--brand) 100%);
  margin-bottom: 6px;
}
.listing-ai-range-marker{
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transform: translate(-50%, -50%);
}
.listing-ai-range-labels{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.listing-ai-range-labels span{
  line-height: 1.3;
}
.listing-ai-note{
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 14px;
  text-align: center;
  line-height: 1.5;
}

/* ==========================================================================
   BUILDING INFORMATION SECTION
   ========================================================================== */
.listing-building-header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.listing-building-img{
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  background: #e8e8e8;
  flex-shrink: 0;
}
.listing-building-name{
  font-size: 18px;
  font-weight: 600;
}
.listing-building-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.listing-building-tag{
  display: inline-block;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(11,18,32,.05);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
}

/* ==========================================================================
   NEIGHBORHOOD / PLACES SECTION
   ========================================================================== */
.listing-places-category{
  margin-bottom: 20px;
}
.listing-places-category:last-child{
  margin-bottom: 0;
}
.listing-places-cat-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.listing-places-cat-icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-places-cat-icon svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
}
.listing-places-cat-title{
  font-size: 15px;
  font-weight: 600;
}
.listing-places-list{
  display: flex;
  flex-direction: column;
}
.listing-place-item{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(11,18,32,.04);
  font-size: 14px;
}
.listing-place-item:last-child{
  border-bottom: none;
}
.listing-place-name{
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing-place-meta{
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
  white-space: nowrap;
}

/* ==========================================================================
   TRUST / DISCLAIMER SECTION
   ========================================================================== */
.listing-trust{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(11,18,32,.03);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.listing-trust svg{
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── Footer ── */
.listing-footer{
  text-align:center;
  font-size:11px;
  color: var(--text-muted);
  padding:24px 0 16px;
  line-height:1.6;
}

/* ==========================================================================
   SHARE TOAST
   ========================================================================== */
.listing-toast{
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  z-index: 200;
}
.listing-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:768px){
  .listing-gallery-grid{
    grid-template-columns: 1fr;
    height: auto;
  }
  .listing-gallery-hero{
    height: 300px;
  }
  .listing-gallery-side{
    display: none;
  }
  .listing-gallery-single{
    height: 300px;
  }
  .listing-price{ font-size: 32px; }
  .listing-details-grid{ grid-template-columns:1fr; }
  .listing-agent-grid{ grid-template-columns:1fr; }
  .listing-fees-row{ grid-template-columns:1fr; }
  .listing-stats-row{ gap: 14px; }
  .listing-section{ padding:18px; }
  .listing-two-col{
    grid-template-columns: 1fr;
  }
  .listing-aside{
    position: static;
  }
  .listing-cta-row{
    flex-direction: column;
  }
  .listing-cta-btn{
    justify-content: center;
    width: 100%;
  }
  .listing-building-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .listing-ai-value{ font-size: 30px; }
}
@media(max-width:480px){
  .listing-gallery-grid{ border-radius: 12px; }
  .listing-gallery-hero{ height: 240px; }
  .listing-gallery-single{ height: 240px; border-radius: 12px; }
  .listing-price{ font-size: 28px; }
  .listing-section-title{ font-size:18px; }
  .listing-stat{ font-size: 14px; }
  .listing-estimate-amount{ font-size: 26px; }
  .listing-ai-value{ font-size: 26px; }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"]{
  --bg: #141414;
  --panel: #1c1c1c;
  --panel2: #1c1c1c;
  --card: #1c1c1c;
  --border: rgba(255,255,255,.10);
  --text: #e4e4e4;
  --text-muted: rgba(228,228,228,.55);
  --white: #ffffff;
  --brand: #4d8cff;
  --brand2: #a78bfa;
  --green: #34d399;
  --red: #f87171;
}

[data-theme="dark"] body{
  background: #141414 !important;
  color: #e4e4e4 !important;
}

/* Top bar */
[data-theme="dark"] .top-bar{
  background: rgba(20,20,20,.92) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .top-logo{ color: #e4e4e4; }
[data-theme="dark"] .top-nav-link{ color: rgba(228,228,228,.40); }
[data-theme="dark"] .top-nav-link:hover{ color: #e4e4e4; background: rgba(255,255,255,.08); }
[data-theme="dark"] .top-nav-link.active{ color: #e4e4e4; background: rgba(255,255,255,.10); }
[data-theme="dark"] .mobile-menu{ background: #1c1c1c; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .mobile-menu-item{ color: #e4e4e4; }
[data-theme="dark"] .mobile-menu-item:active{ background: rgba(255,255,255,.08); }
[data-theme="dark"] .mobile-menu-divider{ background: rgba(255,255,255,.08); }
[data-theme="dark"] .mobile-menu-lang{ color: rgba(228,228,228,.55); }
[data-theme="dark"] .mobile-menu-overlay{ background: rgba(0,0,0,.6); }
[data-theme="dark"] .lang-toggle{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .lang-btn{ color: rgba(228,228,228,.65) !important; }
[data-theme="dark"] .lang-btn.active{
  background: #e4e4e4 !important;
  color: #141414 !important;
}

/* Theme toggle */
[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }
[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
[data-theme="dark"] .theme-toggle{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #e4e4e4;
}
[data-theme="dark"] .theme-toggle:hover{
  background: rgba(255,255,255,.14);
}
[data-theme="dark"] .theme-toggle svg{
  stroke: #e4e4e4;
}

/* Skeleton */
[data-theme="dark"] .skel-block{
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* Section cards */
[data-theme="dark"] .listing-section{
  background: #1c1c1c !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Details */
[data-theme="dark"] .listing-detail-item{
  border-bottom-color: rgba(255,255,255,.06);
}

/* Rooms table */
[data-theme="dark"] .listing-rooms-table th{
  border-bottom-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .listing-rooms-table td{
  border-bottom-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .listing-rooms-table tr:hover td{
  background: rgba(255,255,255,.03);
}

/* Agent cards */
[data-theme="dark"] .listing-agent-card{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

/* Fee cards */
[data-theme="dark"] .listing-fee-card{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

/* Gallery */
[data-theme="dark"] .listing-gallery-hero img,
[data-theme="dark"] .listing-gallery-side-img img,
[data-theme="dark"] .listing-gallery-single img{ background:#222; }
[data-theme="dark"] .listing-no-photo{ background:#222; }
[data-theme="dark"] .listing-gallery-viewall{
  background: rgba(30,30,30,.9);
  color: #e4e4e4;
  border-color: rgba(255,255,255,.12);
}

/* Map */
[data-theme="dark"] .listing-map{ background:#222; }

/* Estimate widget */
[data-theme="dark"] .listing-estimate{
  background: #1c1c1c;
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .listing-estimate-line{
  border-bottom-color: rgba(255,255,255,.06);
}

/* CTA buttons */
[data-theme="dark"] .listing-cta-outline{
  background: #1c1c1c;
  border-color: rgba(255,255,255,.12);
  color: #e4e4e4;
}
[data-theme="dark"] .listing-cta-outline:hover{
  background: rgba(255,255,255,.06);
}

/* Trust bar */
[data-theme="dark"] .listing-trust{
  background: rgba(255,255,255,.04);
}

/* AI Estimate */
[data-theme="dark"] .listing-ai-estimate{
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .listing-ai-range-bar{
  background: linear-gradient(90deg, rgba(255,255,255,.10), var(--brand), rgba(255,255,255,.10));
}
[data-theme="dark"] .listing-ai-range-labels{
  color: #aaa;
}
[data-theme="dark"] .listing-ai-note{
  color: #777;
}

/* Building section */
[data-theme="dark"] .listing-building-tag{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] .listing-building-img{
  background: #222;
}

/* Places / Neighborhood */
[data-theme="dark"] .listing-places-cat-header{
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .listing-place-item{
  border-bottom-color: rgba(255,255,255,.04);
}

/* Toast */
[data-theme="dark"] .listing-toast{
  background: #e4e4e4;
  color: #141414;
}

/* ==========================================================================
   STICKY BOTTOM CHAT BAR
   ========================================================================== */
.listing-chat-bar{
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px 12px 20px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transition: box-shadow .15s ease, opacity .2s;
  user-select: none;
  white-space: nowrap;
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.listing-chat-bar:hover{
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.listing-chat-bar:active{
  opacity: .9;
}
.listing-chat-bar-icon{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.listing-chat-bar-icon svg{
  width: 14px; height: 14px;
  fill: none; stroke: #fff; stroke-width: 2;
}
.listing-chat-bar-text{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}
.listing-chat-bar-arrow{
  font-size: 16px;
  font-weight: 400;
  opacity: .7;
  transition: transform .15s;
}
.listing-chat-bar:hover .listing-chat-bar-arrow{
  margin-left: 3px;
  opacity: 1;
}

/* Dark mode bar */
[data-theme="dark"] .listing-chat-bar{
  background: #e4e4e4;
  color: #141414;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"] .listing-chat-bar-icon{
  background: rgba(0,0,0,.10);
}
[data-theme="dark"] .listing-chat-bar-icon svg{
  stroke: #141414;
}

/* ==========================================================================
   CHAT WIDGET OVERRIDES FOR LISTING PAGE
   ========================================================================== */
.chat-fab{ display:none !important; }

@media (min-width: 601px){
  .chat-box{
    bottom: 80px;
  }
}

/* sr-only helper */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}

@media(max-width:480px){
  .listing-chat-bar{
    left: 16px;
    right: 16px;
    width: auto;
    margin: 0;
    justify-content: center;
    bottom: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   SUB-NAV BAR — Sticky section navigation
   ========================================================================== */
.listing-subnav{
  position: sticky;
  top: 52px;
  z-index: 99;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.listing-subnav-inner{
  display: flex;
  gap: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.listing-subnav-inner::-webkit-scrollbar{ display: none; }
.listing-subnav-tab{
  flex-shrink: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.listing-subnav-tab:hover{ color: var(--text); }
.listing-subnav-tab.active{
  color: var(--text);
  border-bottom-color: var(--text);
}

[data-theme="dark"] .listing-subnav{
  background: rgba(20,20,20,.95);
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .listing-subnav-tab.active{
  color: #e4e4e4;
  border-bottom-color: #e4e4e4;
}

@media(max-width:768px){
  .listing-subnav-tab{ padding: 10px 14px; font-size: 12px; }
}

/* ==========================================================================
   MOBILE GALLERY CAROUSEL
   ========================================================================== */
.listing-gallery-carousel{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 16px;
  height: 300px;
  touch-action: pan-y pinch-zoom;
}
.listing-gallery-track{
  display: flex;
  height: 100%;
  will-change: transform;
}
.listing-gallery-slide{
  flex: 0 0 100%;
  height: 100%;
}
.listing-gallery-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #e8e8e8;
  user-select: none;
  -webkit-user-drag: none;
}
.listing-gallery-counter{
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

[data-theme="dark"] .listing-gallery-slide img{ background: #222; }
[data-theme="dark"] .listing-gallery-counter{ background: rgba(255,255,255,.15); }

@media(max-width:480px){
  .listing-gallery-carousel{ height: 240px; border-radius: 12px; }
}

/* ==========================================================================
   ACTION BUTTONS — Message, Call, Tour
   ========================================================================== */
.listing-action-row{
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.listing-action-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.listing-action-btn:hover{
  background: rgba(11,18,32,.04);
  border-color: rgba(11,18,32,.18);
}
.listing-action-btn svg{
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  flex-shrink: 0;
}

[data-theme="dark"] .listing-action-btn{
  background: #1c1c1c;
  border-color: rgba(255,255,255,.12);
  color: #e4e4e4;
}
[data-theme="dark"] .listing-action-btn:hover{
  background: rgba(255,255,255,.06);
}

@media(max-width:768px){
  .listing-action-row{ gap: 6px; }
  .listing-action-btn{ padding: 12px 10px; font-size: 12px; }
}
@media(max-width:380px){
  .listing-action-btn span{ display: none; }
  .listing-action-btn{ justify-content: center; padding: 12px; }
}

/* ==========================================================================
   TOUR BOOKING — Inverted dark card
   ========================================================================== */
#listingTourForm.cta-form{
  background: rgba(15,23,42,.92);
  color: #fff;
  border-color: transparent;
}
#listingTourForm .cta-form-title{ color: #fff; }
#listingTourForm .cta-form-sub{ color: rgba(255,255,255,.65); }
#listingTourForm .cta-form-field label{ color: rgba(255,255,255,.75); }
#listingTourForm .cta-form-field input{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}
#listingTourForm .cta-form-field input::placeholder{ color: rgba(255,255,255,.35); }
#listingTourForm .cta-form-field input:focus{
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}
#listingTourForm .cta-form-btn{ background: #fff; color: rgba(15,23,42,.92); }
#listingTourForm .cta-form-trust{ color: rgba(255,255,255,.45); }
#listingTourForm .cta-form-error{ color: #fca5a5; }
#listingTourForm .cta-form-field input[type="date"],
#listingTourForm .cta-form-field input[type="time"]{
  color-scheme: dark;
}

[data-theme="dark"] #listingTourForm.cta-form{
  background: #e4e4e4;
  color: #141414;
}
[data-theme="dark"] #listingTourForm .cta-form-title{ color: #141414; }
[data-theme="dark"] #listingTourForm .cta-form-sub{ color: rgba(20,20,20,.65); }
[data-theme="dark"] #listingTourForm .cta-form-field label{ color: rgba(20,20,20,.75); }
[data-theme="dark"] #listingTourForm .cta-form-field input{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.15);
  color: #141414;
}
[data-theme="dark"] #listingTourForm .cta-form-field input::placeholder{ color: rgba(20,20,20,.35); }
[data-theme="dark"] #listingTourForm .cta-form-btn{ background: #141414; color: #e4e4e4; }
[data-theme="dark"] #listingTourForm .cta-form-trust{ color: rgba(20,20,20,.45); }
[data-theme="dark"] #listingTourForm .cta-form-field input[type="date"],
[data-theme="dark"] #listingTourForm .cta-form-field input[type="time"]{
  color-scheme: light;
}

/* ==========================================================================
   ACCORDION — Expandable detail sections
   ========================================================================== */
.listing-accordion{
  border-bottom: 1px solid var(--border);
}
.listing-accordion:last-child{ border-bottom: none; }
.listing-accordion-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: color .15s;
}
.listing-accordion-header:hover{ color: var(--text-muted); }
.listing-accordion-chevron{
  width: 18px; height: 18px;
  fill: none; stroke: var(--text-muted); stroke-width: 2;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.listing-accordion.open .listing-accordion-chevron{
  transform: rotate(180deg);
}
.listing-accordion-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.listing-accordion.open .listing-accordion-body{
  max-height: 600px;
}

[data-theme="dark"] .listing-accordion{ border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .listing-accordion-header{ color: #e4e4e4; }
[data-theme="dark"] .listing-accordion-header:hover{ color: rgba(228,228,228,.55); }
[data-theme="dark"] .listing-accordion-chevron{ stroke: rgba(228,228,228,.55); }