/* ===== Onyx — product pages: advanced listings + rich property detail ===== */

/* ---------------- Listings / Search ---------------- */
.lst-wrap { display: grid; grid-template-columns: 290px 1fr; gap: clamp(28px,3.5vw,56px); align-items: start; }

.lst-side { position: sticky; top: 116px; border: 1px solid var(--hair-soft); background: var(--onyx-850); }
.lst-side-top { display:flex; align-items:center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--hair-soft); }
.lst-side-top h4 { font-family: var(--body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin: 0; }
.lst-side-top button { background: transparent; border: 0; color: var(--faint); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: color .3s; }
.lst-side-top button:hover { color: var(--gold); }
.fgroup { padding: 24px; border-bottom: 1px solid var(--hair-soft); }
.fgroup:last-child { border-bottom: 0; }
.fgroup > .fl { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display:block; }
.pills { display:flex; flex-wrap: wrap; gap: 8px; }
.pill { background: transparent; border: 1px solid var(--hair-soft); color: var(--muted); font-size: 12px; letter-spacing: 0.06em; padding: 9px 15px; transition: all .3s; }
.pill.on { border-color: var(--gold); color: var(--ink); background: rgba(201,162,75,0.08); }
.pill:not(.on):hover { color: var(--ink); border-color: var(--hair); }
.checks { display:flex; flex-direction: column; gap: 2px; }
.chk { display:flex; align-items:center; gap: 12px; padding: 8px 0; cursor: pointer; color: var(--muted); font-size: 14px; transition: color .3s; }
.chk:hover { color: var(--ink); }
.chk .box { width: 18px; height: 18px; border: 1px solid var(--hair); display:flex; align-items:center; justify-content:center; color: #15130c; transition: all .3s; flex:0 0 auto; }
.chk.on .box { background: var(--gold); border-color: var(--gold); }
.chk .box svg { opacity: 0; transform: scale(.5); transition: all .25s; }
.chk.on .box svg { opacity: 1; transform: none; }
.chk .cnt { margin-left: auto; color: var(--faint); font-size: 12px; }

/* dual range slider */
.range { padding-top: 6px; }
.range-track { position: relative; height: 2px; background: var(--hair-soft); margin: 22px 0 18px; }
.range-fill { position: absolute; height: 100%; background: var(--gold); }
.range input[type=range] { position: absolute; top: -9px; left: 0; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; }
.range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #15130c; border: 1px solid var(--gold); cursor: pointer; box-shadow: 0 0 0 4px rgba(201,162,75,0.12); transition: box-shadow .3s, transform .2s; }
.range input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(201,162,75,0.16); }
.range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #15130c; border: 1px solid var(--gold); cursor: pointer; }
.range-vals { display:flex; justify-content: space-between; font-family: var(--display); font-size: 17px; color: var(--ink); }
.range-vals .smallcaps { font-family: var(--body); color: var(--faint); display:block; font-size: 9.5px; }

/* segmented */
.seg { display:flex; border: 1px solid var(--hair-soft); }
.seg button { flex:1; background: transparent; border:0; border-right: 1px solid var(--hair-soft); color: var(--muted); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 6px; transition: all .3s; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--gold); color: #15130c; }

/* toolbar */
.lst-bar { display:flex; align-items:center; justify-content: space-between; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.lst-count { color: var(--muted); font-size: 14px; }
.lst-count b { color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 400; margin-right: 4px; }
.lst-ctrls { display:flex; align-items:center; gap: 14px; }
.sortsel { position: relative; }
.sortsel select { -webkit-appearance: none; appearance: none; background: transparent; border: 1px solid var(--hair-soft); color: var(--ink); font-family: var(--body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 38px 12px 16px; cursor: pointer; }
.sortsel::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.viewtoggle { display:flex; border: 1px solid var(--hair-soft); }
.viewtoggle button { width: 42px; height: 42px; background: transparent; border:0; border-right: 1px solid var(--hair-soft); color: var(--muted); display:flex; align-items:center; justify-content:center; transition: all .3s; }
.viewtoggle button:last-child { border-right: 0; }
.viewtoggle button.on { color: var(--gold); background: rgba(201,162,75,0.07); }

/* results grid + list */
.results.grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); }
.results.list { display:flex; flex-direction: column; gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); }
@media (max-width: 1180px){ .results.grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){ .results.grid{ grid-template-columns: 1fr; } }

/* card fade-in stagger */
.rcard-wrap { animation: cardIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }

/* favorite heart */
.fav { position: absolute; top: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); background: var(--chip); backdrop-filter: blur(4px); color: var(--ink); display:flex; align-items:center; justify-content:center; transition: all .35s; }
.fav:hover { border-color: var(--gold); }
.fav.on { color: var(--gold); border-color: var(--gold); }
.fav svg { transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.fav.on svg { transform: scale(1.15); fill: var(--gold); }

/* list-view card */
.lcard { display:grid; grid-template-columns: 320px 1fr; background: var(--onyx-900); position: relative; overflow:hidden; }
.lcard .lcard-media { position: relative; min-height: 240px; overflow:hidden; }
.lcard .lcard-media .ph, .lcard .lcard-media .photo { position:absolute; inset:0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.lcard:hover .lcard-media .ph, .lcard:hover .lcard-media .photo { transform: scale(1.05); }
.lcard .lcard-cat { position:absolute; top:16px; left:16px; z-index:4; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink); background:var(--chip); border:1px solid var(--hair); padding:7px 12px; }
.lcard .lcard-body { padding: 34px 36px; display:flex; flex-direction: column; }
.lcard .lcard-loc { display:flex; align-items:center; gap:7px; color:var(--faint); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; }
.lcard .lcard-loc .ic { color: var(--gold); }
.lcard h3 { font-size: 32px; color: var(--ink); margin: 12px 0 16px; line-height: 1.04; }
.lcard .lcard-desc { color: var(--muted); font-weight: 300; font-size: 14px; max-width: 52ch; }
.lcard .lcard-meta { display:flex; gap: 22px; color: var(--muted); font-size: 13px; margin-top: 18px; }
.lcard .lcard-meta span { display:inline-flex; align-items:center; gap:7px; }
.lcard .lcard-meta .ic { color: var(--gold); opacity:.8; }
.lcard .lcard-foot { display:flex; align-items:center; justify-content: space-between; margin-top: auto; padding-top: 22px; }
.lcard .lcard-price { font-family: var(--display); font-size: 28px; color: var(--ink); }
.lcard .lcard-price small { display:block; color:var(--faint); font-family:var(--body); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; }
@media (max-width: 640px){ .lcard{ grid-template-columns: 1fr; } .lcard .lcard-media{ min-height: 200px; } }

/* pagination */
.pager { display:flex; align-items:center; justify-content: center; gap: 8px; margin-top: clamp(40px,5vw,64px); }
.pager button { min-width: 46px; height: 46px; border: 1px solid var(--hair-soft); background: transparent; color: var(--muted); font-family: var(--display); font-size: 17px; transition: all .3s; padding: 0 10px; }
.pager button.on { border-color: var(--gold); color: var(--ink); background: rgba(201,162,75,0.07); }
.pager button:not(.on):not(:disabled):hover { color: var(--ink); border-color: var(--hair); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* empty state */
.empty { text-align:center; padding: 80px 20px; border: 1px solid var(--hair-soft); }
.empty .ic { color: var(--gold); opacity: .5; }
.empty h3 { font-family: var(--display); font-size: 30px; color: var(--ink); margin: 18px 0 10px; }
.empty p { color: var(--muted); }

@media (max-width: 900px){ .lst-wrap{ grid-template-columns: 1fr; } .lst-side{ position: static; } }

/* toolbar fits on small screens (no right-edge overflow) */
@media (max-width: 600px){
  .lst-bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .lst-count { width: 100%; }
  .lst-ctrls { width: 100%; gap: 10px; }
  .sortsel { flex: 1 1 auto; min-width: 0; }
  .sortsel select { width: 100%; }
  .viewtoggle { flex: 0 0 auto; }
  .filt-toggle { flex: 0 0 auto; }
}

/* ---------------- mobile filter drawer ---------------- */
.filt-toggle { display:none; align-items:center; gap: 10px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px; }
.filt-toggle .ic { color: var(--gold); }
@media (max-width: 900px){
  .filt-toggle{ display:inline-flex; }
  .lst-side{ position: fixed; top:0; left:0; height:100%; width: min(88vw,340px); z-index: 95; transform: translateX(-100%); transition: transform .5s cubic-bezier(.16,.84,.3,1); overflow-y: auto; }
  .lst-side.open{ transform: none; }
  .lst-side-scrim{ position: fixed; inset:0; background: var(--scrim); z-index:94; opacity:0; pointer-events:none; transition: opacity .4s; }
  .lst-side-scrim.open{ opacity:1; pointer-events:auto; }
}
.lst-side-scrim{ display:none; }
@media (max-width: 900px){ .lst-side-scrim{ display:block; } }

/* ---------------- Property detail enhancements ---------------- */
/* lightbox */
.lightbox { position: fixed; inset:0; z-index: 120; background: var(--overlay); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .45s; }
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox .lb-stage { width: min(92vw, 1200px); height: min(82vh, 800px); position: relative; transform: scale(.97); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.lightbox.open .lb-stage { transform: none; }
.lightbox .lb-stage .photo, .lightbox .lb-stage .ph { position:absolute; inset:0; }
.lb-close { position: absolute; top: 26px; right: 30px; width: 50px; height: 50px; border:1px solid var(--hair); background: transparent; color: var(--ink); display:flex; align-items:center; justify-content:center; transition: all .3s; }
.lb-close:hover { border-color: var(--gold); color: var(--gold); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border:1px solid var(--hair); background: var(--chip); color: var(--ink); display:flex; align-items:center; justify-content:center; transition: all .3s; z-index: 5; }
.lb-nav:hover { border-color: var(--gold); color: var(--gold); }
.lb-prev { left: 3vw; } .lb-next { right: 3vw; }
.lb-count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 12px; letter-spacing: 0.2em; }
.gal-main { cursor: zoom-in; }
.gal-zoom { position:absolute; right:16px; top:16px; z-index:4; width:40px; height:40px; border:1px solid var(--hair); background: var(--chip); backdrop-filter: blur(4px); color: var(--ink); display:flex; align-items:center; justify-content:center; transition: all .3s; }
.gal-main:hover .gal-zoom { border-color: var(--gold); color: var(--gold); }

/* payment plan timeline */
.plan-tl { display:grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: clamp(28px,4vw,44px); position: relative; }
.plan-tl::before { content:""; position:absolute; top: 7px; left: 8%; right: 8%; height:1px; background: var(--hair-soft); }
.plan-step { text-align:center; position: relative; padding: 0 10px; }
.plan-step .node { width: 16px; height:16px; border-radius:50%; border:1px solid var(--gold); background: var(--onyx-900); margin: 0 auto 22px; position: relative; z-index:2; transition: background .4s; }
.plan-step.fill .node { background: var(--gold); }
.plan-step .pp { font-family: var(--display); font-size: clamp(30px,3vw,44px); color: var(--ink); font-weight: 300; }
.plan-step .pl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.plan-step .pd { font-size: 12.5px; color: var(--faint); margin-top: 8px; }
@media (max-width: 700px){ .plan-tl{ grid-template-columns: 1fr 1fr; gap: 36px 0; } .plan-tl::before{ display:none; } }

/* mortgage calculator */
.calc { display:grid; grid-template-columns: 1fr 0.85fr; gap: clamp(36px,5vw,72px); align-items: center; border: 1px solid var(--hair); background: var(--onyx-850); padding: clamp(30px,4vw,52px); }
.calc-controls .cc { margin-bottom: 30px; }
.calc-controls .cc:last-child { margin-bottom: 0; }
.cc-top { display:flex; align-items:center; justify-content: space-between; margin-bottom: 16px; }
.cc-top .cl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cc-top .cv { font-family: var(--display); font-size: 22px; color: var(--ink); }
.cslider { -webkit-appearance:none; appearance:none; width:100%; height:2px; background: var(--hair-soft); outline:none; }
.cslider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#15130c; border:1px solid var(--gold); cursor:pointer; box-shadow:0 0 0 5px rgba(201,162,75,.12); transition: transform .2s; }
.cslider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.cslider::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#15130c; border:1px solid var(--gold); cursor:pointer; }
.calc-result { text-align:center; border-left: 1px solid var(--hair-soft); padding-left: clamp(20px,3vw,48px); }
.calc-result .smallcaps { color: var(--gold); }
.calc-result .cr-big { font-family: var(--display); font-size: clamp(44px,5vw,68px); color: var(--ink); font-weight: 300; line-height: 1; margin: 14px 0; }
.calc-result .cr-sub { color: var(--muted); font-size: 13px; }
.calc-result .cr-note { color: var(--faint); font-size: 11px; margin-top: 22px; line-height: 1.6; }
@media (max-width: 760px){ .calc{ grid-template-columns: 1fr; } .calc-result{ border-left:0; border-top: 1px solid var(--hair-soft); padding-left:0; padding-top: 30px; } }

/* sticky CTA bar */
.scta { position: fixed; left:0; right:0; bottom:0; z-index: 70; background: var(--glass-2); backdrop-filter: blur(12px); border-top: 1px solid var(--hair); transform: translateY(110%); transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.scta.show { transform: none; }
body.scta-on .chat-fab { transform: translateY(-80px); }
.scta-in { display:flex; align-items:center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.scta .scta-info { display:flex; align-items: baseline; gap: 18px; }
.scta .scta-name { font-family: var(--display); font-size: 22px; color: var(--ink); }
.scta .scta-price { font-family: var(--display); font-size: 22px; color: var(--gold); }
.scta .scta-price small { font-family: var(--body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.scta-btns { display:flex; gap: 12px; }
@media (max-width: 640px){ .scta .scta-name{ display:none; } .scta-btns .btn-ghost{ display:none; } .scta-in{ padding: 12px 0; } }