/* =========================================================
   LISTINGS ADD-ONS - layered on top of Jay's style.css
   Uses existing brand vars: --bg --surface --surface-2 --text
   --text-muted --accent --accent-dark --border --font-display --font-body
   ========================================================= */

/* ---- Preview wrapper banner (NOT part of the live site) ---- */
/* live: keep the site's default fixed nav */        /* was fixed, sticky plays nicer under the banner */
.preview-banner{
  position: relative; z-index: 150;
  background: linear-gradient(90deg, #171204, #241b06);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 1.2rem; text-align: center;
}
.preview-banner strong{ color: var(--accent); font-weight: 700; }
.preview-banner span{ color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; font-size: 0.9em; }

/* ---- Search / filter toolbar ---- */
.idx-toolbar{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin: 0 0 2rem;
  display: grid; gap: 1.1rem;
}
.idx-row{ display:flex; flex-wrap:wrap; gap:0.9rem; align-items:flex-end; }
.idx-field{ display:flex; flex-direction:column; gap:0.4rem; }
.idx-field.grow{ flex:1 1 240px; min-width: 200px; }
.idx-field label{
  font-size:0.63rem; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--accent); font-weight:600;
}
.idx-field input, .idx-field select{
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; font-family: inherit; font-size: 0.9rem;
  min-width: 120px; transition: border-color var(--transition);
}
.idx-field input:focus, .idx-field select:focus{ outline:0; border-color: var(--accent); }

/* property-type chips */
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{
  cursor:pointer; user-select:none;
  border:1px solid var(--border); border-radius:999px;
  padding:0.5rem 1rem; font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-muted);
  background: transparent; transition: all var(--transition);
}
.chip:hover{ border-color: var(--accent); color: var(--text); }
.chip.active{ background: var(--accent); border-color: var(--accent); color:#1b1b1b; font-weight:600; }

.idx-actions{ display:flex; gap:0.7rem; align-items:center; margin-left:auto; }
.btn-sm{ padding:0.7rem 1.4rem; font-size:0.72rem; }
.link-reset{
  background:none; border:0; cursor:pointer; color: var(--text-muted);
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
}
.link-reset:hover{ color: var(--accent); }

/* results header */
.results-head{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:0.8rem; margin-bottom:1.4rem;
}
.results-count{ font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-muted); }
.results-count b{ color: var(--accent); }

/* ---- Card tweaks (reuses .listing-card / .listings) ---- */
.listing-card .listing-image img{ width:100%; height:100%; object-fit:cover; }
.listing-photo-count{
  position:absolute; bottom:0.8rem; right:0.8rem;
  background: rgba(0,0,0,0.7); color:#fff; font-size:0.68rem;
  letter-spacing:0.08em; padding:0.25rem 0.6rem; border-radius:999px;
  display:flex; align-items:center; gap:0.35rem;
}
.listing-status.new{ background:#2e7d32; color:#fff; }
.listing-status.land{ background: var(--text); color:#1b1b1b; }
.listing-courtesy{
  font-size:0.66rem; color: var(--text-muted); letter-spacing:0.04em;
  text-transform:none; margin-top:0.9rem; padding-top:0.8rem;
  border-top:1px solid var(--border); line-height:1.4;
}
.listing-sub{ font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.14em; margin-bottom:0.5rem;}
.empty{
  grid-column:1/-1; text-align:center; padding:4rem 1rem;
  color: var(--text-muted); border:1px dashed var(--border); border-radius: var(--radius);
}
.empty h3{ font-style:italic; color: var(--text); margin-bottom:0.6rem; }

/* ---- Detail overlay ---- */
.ov{
  position:fixed; inset:0; z-index:1500; display:none;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(6px);
  overflow-y:auto; padding: 2.5rem 1rem;
}
.ov.open{ display:block; }
.ov-inner{
  max-width: 1040px; margin:0 auto;
  background: var(--bg); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9);
}
#ov-close{
  position: fixed; top:16px; left:16px; z-index:8;
  width:56px; height:56px; border-radius:999px; cursor:pointer;
  background: var(--accent); color:#1b1b1b; border:2px solid #1b1b1b;
  font-size:2.1rem; line-height:1; font-weight:400;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,0.6); transition: all var(--transition);
}
#ov-close:hover{ background:#fff; transform:rotate(90deg); }
@media (max-width:768px){ #ov-close{ top:12px; left:12px; width:50px; height:50px; font-size:1.9rem; } }

/* gallery */
.gal{ position:relative; background:#0a0a0a; }
.gal-main{ aspect-ratio:16/10; overflow:hidden; }
.gal-main img{ width:100%; height:100%; object-fit:cover; }
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,0.55); color:#fff; border:0; cursor:pointer;
  width:48px; height:48px; font-size:1.5rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center; transition: background var(--transition);
}
.gal-nav:hover{ background: var(--accent); color:#1b1b1b; }
.gal-prev{ left:1rem; } .gal-next{ right:1rem; }
.gal-count{
  position:absolute; bottom:1rem; right:1rem;
  background: rgba(0,0,0,0.7); color:#fff; font-size:0.72rem;
  padding:0.3rem 0.75rem; border-radius:999px; letter-spacing:0.08em;
}
.gal-thumbs{ display:flex; gap:0.5rem; padding:0.7rem; overflow-x:auto; background:#0a0a0a; }
.gal-thumb{
  flex:0 0 92px; height:64px; border-radius:3px; overflow:hidden;
  cursor:pointer; opacity:0.5; border:2px solid transparent; transition: all var(--transition);
}
.gal-thumb img{ width:100%; height:100%; object-fit:cover; }
.gal-thumb.active,.gal-thumb:hover{ opacity:1; border-color: var(--accent); }

/* detail body */
.ov-body{ padding: 2rem 2.2rem 2.6rem; }
.ov-eyebrow{ font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color: var(--accent); }
.ov-price{ font-family: var(--font-display); font-style:italic; font-weight:700; color: var(--accent); font-size: clamp(2rem,4vw,2.8rem); line-height:1.1; margin:0.3rem 0; }
.ov-addr{ font-size:1.05rem; color: var(--text); font-weight:500; }
.ov-addr .muted{ color: var(--text-muted); font-weight:400; }
.ov-badges{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }
.ov-badge{
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid var(--border); color: var(--text-muted);
  padding:0.35rem 0.8rem; border-radius:999px;
}

.facts{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap:1px; background: var(--border); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden; margin:1.8rem 0;
}
.fact{ background: var(--surface); padding:1rem 1.1rem; }
.fact-label{ font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--text-muted); }
.fact-val{ font-size:1.05rem; color: var(--text); font-weight:500; margin-top:0.3rem; }
.fact-val.accent{ color: var(--accent); }

.ov-section-title{
  font-family: var(--font-body); font-weight:600; font-style:normal;
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  color: var(--accent); margin:2rem 0 0.9rem; text-transform:uppercase;
}
.ov-desc{ color: var(--text-muted); font-size:0.98rem; line-height:1.75; white-space:pre-line; }
.ov-courtesy{
  margin-top:1.6rem; font-size:0.75rem; color: var(--text-muted);
  padding:0.9rem 1.1rem; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius);
}

/* ---- Stage 2 calculator teaser ---- */
.calc{
  margin-top:2.2rem; border:1px solid var(--accent);
  border-radius: var(--radius); overflow:hidden;
  background: radial-gradient(circle at top left, rgba(206,177,137,0.10), transparent 55%), var(--surface);
}
.calc-head{
  display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; justify-content:space-between;
  padding:1.1rem 1.3rem; border-bottom:1px solid var(--border);
}
.calc-head h4{
  font-family: var(--font-display); font-style:italic; font-weight:700;
  text-transform:uppercase; font-size:1.25rem; color: var(--text); letter-spacing:0.5px;
}
.stage2-tag{
  font-family: var(--font-body); font-weight:700; font-style:normal;
  font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase;
  background: var(--accent); color:#1b1b1b; padding:0.3rem 0.7rem; border-radius:999px;
}
.calc-auto{ display:flex; flex-wrap:wrap; gap:0.6rem; padding:1rem 1.3rem 0; }
.calc-auto .pill{
  font-size:0.7rem; letter-spacing:0.06em; color: var(--text);
  background: var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:0.45rem 0.9rem;
}
.calc-auto .pill b{ color: var(--accent); font-weight:600; }
.calc-auto .pill .k{ color: var(--text-muted); text-transform:uppercase; letter-spacing:0.12em; font-size:0.9em; margin-right:0.35rem; }
.calc-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:1rem; padding:1.2rem 1.3rem; }
.calc-field label{ font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--accent); font-weight:600; display:block; margin-bottom:0.35rem; }
.calc-field input{
  width:100%; background: var(--bg); color: var(--text); border:1px solid var(--border);
  border-radius: var(--radius); padding:0.6rem 0.7rem; font-family:inherit; font-size:0.92rem;
}
.calc-field input:focus{ outline:0; border-color: var(--accent); }
.calc-out{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background: var(--border); border-top:1px solid var(--border);
}
.calc-out .out{ background: var(--surface-2); padding:1.1rem 1.3rem; }
.calc-out .out .k{ font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--text-muted); }
.calc-out .out .v{ font-family: var(--font-display); font-style:italic; font-weight:700; font-size:1.5rem; color: var(--accent); margin-top:0.25rem; }
.calc-out .out.total{ background:#000; }
.calc-out .out.total .v{ color:#fff; }
.calc-note{ padding:1rem 1.3rem 1.3rem; font-size:0.72rem; color: var(--text-muted); line-height:1.6; }
.calc-note b{ color: var(--accent); }
.calc-formula{ font-family: ui-monospace, Menlo, monospace; font-size:0.7rem; color: var(--text-muted); background: var(--bg); border:1px solid var(--border); border-radius:3px; padding:0.5rem 0.7rem; margin-top:0.6rem; display:inline-block; }

/* expanded calculator breakdown */
.calc-toggle{ display:flex; align-items:center; gap:0.55rem; padding:0.2rem 1.3rem 0.6rem; font-size:0.8rem; color:var(--text-muted); cursor:pointer; }
.calc-toggle input{ width:auto; accent-color:var(--accent); }
.calc-split{ display:grid; grid-template-columns:1.25fr 1fr; gap:1px; background:var(--border); border-top:1px solid var(--border); }
.calc-breakdown{ background:var(--surface-2); padding:1.2rem 1.3rem; }
.calc-figures{ background:var(--surface); padding:1.2rem 1.3rem; }
.calc-legend{ font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:0.7rem; }
.bd-row{ display:flex; justify-content:space-between; align-items:baseline; gap:0.6rem; padding:0.55rem 0; border-bottom:1px dashed var(--border); font-size:0.92rem; color:var(--text-muted); }
.bd-row .lbl{ display:flex; align-items:center; gap:0.5rem; }
.bd-row .val{ color:var(--text); font-weight:600; white-space:nowrap; }
.bd-row .tag{ font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:0.12rem 0.5rem; color:var(--text-muted); }
.bd-total{ display:flex; justify-content:space-between; align-items:baseline; gap:0.6rem; padding-top:0.95rem; margin-top:0.3rem; }
.bd-total .lbl{ font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted); }
.bd-total .val{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1.85rem; color:var(--accent); white-space:nowrap; }
.fig-row{ display:flex; justify-content:space-between; gap:0.6rem; padding:0.5rem 0; border-bottom:1px solid var(--border); font-size:0.86rem; }
.fig-row .k{ color:var(--text-muted); }
.fig-row .v{ color:var(--text); font-weight:600; white-space:nowrap; }
@media(max-width:640px){ .calc-split{ grid-template-columns:1fr; } }

/* tax-location selects inside the calculator */
.calc-tax{ padding:0.4rem 1.3rem 0.2rem; }
.calc-tax .calc-legend{ margin-bottom:0.6rem; }
.tax-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.calc-field select{ width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:0.6rem 0.7rem; font-family:inherit; font-size:0.9rem; }
.calc-field select:focus{ outline:0; border-color:var(--accent); }

/* request-a-showing form inside overlay */
.req-wrap{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--border); }

/* IDX disclaimer */
.idx-disclaimer{
  max-width: var(--maxw); margin: 0 auto; padding: 2rem;
  font-size:0.7rem; color: var(--text-muted); line-height:1.7;
  border-top:1px solid var(--border);
}
.idx-disclaimer .mls-mark{ color: var(--accent); font-weight:600; letter-spacing:0.05em; }

/* ---- More-filters row ---- */
.idx-more{ display:flex; flex-wrap:wrap; gap:0.9rem; align-items:flex-end; }

/* ---- View toggle (Grid / Map) ---- */
.view-toggle{ display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.view-toggle button{ background:transparent; border:0; cursor:pointer; color:var(--text-muted); font-family:var(--font-body); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; padding:0.5rem 1.05rem; display:flex; align-items:center; gap:0.4rem; }
.view-toggle button.active{ background:var(--accent); color:#1b1b1b; font-weight:600; }

/* ---- Map ---- */
#idx-map{ display:none; position:relative; z-index:0; isolation:isolate; height:620px; width:100%; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); }
#idx-map.show{ display:block; }
.leaflet-container{ background:#0d0d0d; font-family:var(--font-body); }
.price-marker span{
  display:inline-block; background:var(--accent); color:#1b1b1b; font-weight:700;
  font-size:0.72rem; padding:0.28rem 0.55rem; border-radius:999px; white-space:nowrap;
  border:1px solid #1b1b1b; box-shadow:0 3px 10px rgba(0,0,0,0.55); cursor:pointer;
  transform:translate(-50%,-50%);
}
.price-marker span:hover{ background:#fff; }
.leaflet-popup-content-wrapper{ background:var(--surface); color:var(--text); border:1px solid var(--border); }
.leaflet-popup-content{ margin:0.7rem 0.9rem; font-size:0.8rem; line-height:1.5; }
.leaflet-popup-tip{ background:var(--surface); }
.map-note{ font-size:0.66rem; color:var(--text-muted); margin-top:0.55rem; letter-spacing:0.03em; }

@media (max-width:768px){
  .idx-actions{ margin-left:0; width:100%; }
  .ov{ padding:0; } .ov-inner{ border-radius:0; border:0; }
  .ov-body{ padding:1.5rem 1.2rem 2rem; }
  #idx-map{ height:460px; }
}