/* ==========================================================================
   Search results + listing detail pages, shared by every demo site.
   Structure lives here; each theme's styles.css maps its own tokens onto the
   --c-* variables below (accent, ink, muted, line, surfaces, radius, shadow).
   ========================================================================== */

:root { --filters-h: 66px; }
[hidden] { display: none !important; }
.form-status.is-note { display: block; background: rgba(255,255,255,.14); color: inherit; border: 1px dashed currentColor; opacity: .9; }
.form--light .form-status.is-note, .contact-card .form-status.is-note { background: var(--c-surface-2); color: var(--c-ink); }

/* Pages without a hero: the fixed header is always solid (search.js/listing.js add is-static). */
body.page-search { overflow: hidden; }
@media (max-width: 900px) { body.page-search { overflow: auto; } }

/* ---------- filter bar ---------- */
.results { padding-top: var(--header-h); background: var(--c-surface); color: var(--c-text); }
.results__filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px var(--gutter); min-height: var(--filters-h);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
}
.results__filters .field { padding: 7px 12px; min-width: 0; flex: 1 1 130px; max-width: 200px; background: var(--c-surface-2); border: 1px solid transparent; border-radius: var(--c-radius-sm); border-bottom-width: 1px; }
.results__filters .field--q { flex: 2 1 220px; max-width: 320px; }
.results__filters .field label { color: var(--c-muted); font-size: 10px; }
.results__filters .field select, .results__filters .field input { color: var(--c-ink); font-size: 14px; }
.results__filters .field--select::after { bottom: 14px; }
.results__filters .btn { padding: 12px 18px; }
.results__actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.results__actions .btn--ghost.is-on { background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.view-toggle { display: none; }
@media (max-width: 900px) {
  .results__filters { position: sticky; top: var(--header-h); z-index: 40; }
  .results__filters .field { flex: 1 1 42%; max-width: none; }
  .results__filters .field--q { flex-basis: 100%; }
  .results__actions { width: 100%; margin-left: 0; }
  .view-toggle { display: inline-flex; }
}

/* ---------- split layout ---------- */
.results__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); height: calc(100vh - var(--header-h) - var(--filters-h)); }
.results__list { overflow-y: auto; padding: 18px var(--gutter) 40px; scrollbar-width: thin; }
.results__map { position: relative; border-left: 1px solid var(--c-line); background: var(--c-surface-2); }
.results__map #map { position: absolute; inset: 0; }
.results[data-view="list"] .results__layout { grid-template-columns: 1fr; height: auto; }
.results[data-view="list"] .results__map { display: none; }
.results[data-view="list"] .results__list { overflow: visible; }
.results[data-view="map"] .results__layout { grid-template-columns: 1fr; }
.results[data-view="map"] .results__list { display: none; }
@media (max-width: 900px) {
  .results__layout { grid-template-columns: 1fr; height: auto; }
  .results__map { display: none; height: calc(100vh - var(--header-h) - 120px); border-left: 0; }
  .results[data-view="map"] .results__map { display: block; }
  .results[data-view="map"] .results__list { display: none; }
  .results__list { overflow: visible; }
}
.results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; font-size: 14px; color: var(--c-muted); }
.results__head b { color: var(--c-ink); font-weight: 700; }
.results__head .field { padding: 6px 12px; background: var(--c-surface-2); border-radius: var(--c-radius-sm); }
.results__head .field label { display: none; }
.results__head .field select { color: var(--c-ink); font-size: 14px; }
.results__list .grid { gap: 18px; }
.results__list .grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1240px) { .results__list .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .results__list .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .results__list .grid--2 { grid-template-columns: 1fr; } }
.card.is-active { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.card__office { font-size: 11.5px; color: var(--c-muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- map pins ---------- */
.pin-wrap { background: none; border: 0; }
.pin { position: relative; display: inline-block; transform: translate(-50%, calc(-100% - 6px)); padding: 5px 9px; border-radius: 999px; background: var(--c-ink); color: #fff; font: 700 12px/1 var(--font-body); white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; transition: background .15s, transform .15s; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.pin.is-active, .pin:hover { background: var(--c-accent); transform: translate(-50%, calc(-100% - 8px)) scale(1.06); z-index: 5; }
.leaflet-popup-content-wrapper { border-radius: var(--c-radius-sm); padding: 0; overflow: hidden; box-shadow: var(--c-shadow, 0 10px 30px rgba(0,0,0,.2)); }
.leaflet-popup-content { margin: 0; width: 240px !important; font-family: var(--font-body); }
.leaflet-popup-tip-container { display: none; }
.pop { display: block; color: var(--c-text); }
.pop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--c-surface-2); }
.pop__body { padding: 10px 12px 12px; }
.pop__price { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--c-ink); line-height: 1.1; }
.pop__meta { font-size: 12px; color: var(--c-muted); margin-top: 3px; }
.pop__addr { font-size: 13px; font-weight: 600; color: var(--c-ink); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-tools { position: absolute; z-index: 800; top: 12px; left: 56px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.map-tools .btn { pointer-events: auto; padding: 9px 14px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.map-tools .btn.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.leaflet-draw-toolbar { display: none; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px; }

/* ---------- pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 28px 0 8px; }
.pagination button { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); border-radius: var(--c-radius-sm); font: 600 13px var(--font-body); cursor: pointer; }
.pagination button:hover { border-color: var(--c-ink); }
.pagination button.is-current { background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.pagination button[disabled] { opacity: .4; cursor: default; }

/* ---------- listing detail ---------- */
.listing { padding-top: calc(var(--header-h) + 16px); background: var(--c-surface); color: var(--c-text); }
.listing .container { max-width: 1440px; }
.listing__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: 13px; color: var(--c-muted); }
.listing__top a { color: var(--c-accent); font-weight: 600; }

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 8px; border-radius: var(--c-radius); overflow: hidden; margin-bottom: 28px; position: relative; }
.gallery a { display: block; position: relative; background: var(--c-surface-2); overflow: hidden; cursor: zoom-in; }
.gallery a:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.gallery a:hover img { transform: scale(1.03); }
.gallery__all { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.gallery--few { grid-template-columns: 1fr; grid-template-rows: 460px; }
.gallery--few a:first-child { grid-row: auto; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px; } .gallery a:first-child { grid-column: span 2; grid-row: auto; } .gallery a:nth-child(n+4) { display: none; } }
@media (max-width: 600px) { .gallery { grid-template-rows: 240px; } .gallery a:nth-child(n+2) { display: none; } }

.listing__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-bottom: 64px; }
@media (max-width: 960px) { .listing__body { grid-template-columns: 1fr; gap: 32px; } }
.listing__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--c-line); margin-bottom: 22px; }
.listing__price { font-family: var(--font-display); font-size: clamp(32px, 4vw, 46px); font-weight: 500; color: var(--c-ink); line-height: 1; letter-spacing: -.02em; }
.listing__price small { font: 600 13px var(--font-body); color: var(--c-muted); margin-left: 8px; letter-spacing: 0; }
.listing__addr { margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--c-ink); }
.listing__city { color: var(--c-muted); font-size: 14.5px; margin-top: 2px; }
.listing__status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-dark); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.listing__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 26px; }
.facts div { font-size: 13px; color: var(--c-muted); }
.facts b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--c-ink); line-height: 1.1; }
.listing h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; margin: 34px 0 14px; }
.listing__remarks { font-size: 16px; line-height: 1.75; color: var(--c-text); white-space: pre-line; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }
.features h3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); }
.features dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 6px 12px; font-size: 14px; }
.features dt { color: var(--c-muted); }
.features dd { margin: 0; color: var(--c-text); font-weight: 500; }
.listing__map { height: 340px; border-radius: var(--c-radius); overflow: hidden; border: 1px solid var(--c-line); }
.listing__courtesy { margin-top: 26px; padding: 16px 18px; border-radius: var(--c-radius-sm); background: var(--c-surface-2); font-size: 13px; color: var(--c-muted); line-height: 1.6; }
.listing__courtesy b { color: var(--c-ink); font-weight: 600; }

.listing__aside { position: sticky; top: calc(var(--header-h) + 16px); }
.contact-card { padding: 24px; border-radius: var(--c-radius); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--c-shadow); }
.contact-card h3 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.contact-card p { font-size: 14px; color: var(--c-muted); margin-bottom: 16px; }
.contact-card .form { grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-card .form .field { background: var(--c-surface-2); }
.contact-card .form .field label { color: var(--c-muted); }
.contact-card .form .field input, .contact-card .form .field select, .contact-card .form .field textarea { color: var(--c-ink); }
.contact-card .form .field input::placeholder, .contact-card .form .field textarea::placeholder { color: var(--c-muted); opacity: .7; }
.contact-card .form .btn { margin-top: 2px; }
.contact-card .form__note { color: var(--c-muted); }
.contact-card .form-status.is-ok { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.contact-card__agent { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13.5px; color: var(--c-muted); }
.contact-card__agent b { display: block; color: var(--c-ink); font-weight: 600; }
.contact-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--c-ink); color: #fff; display: grid; place-items: center; font: 700 14px var(--font-body); flex: 0 0 44px; }
.listing__save { display: inline-flex; align-items: center; gap: 8px; }

.listing__similar { background: var(--c-surface-2); padding: clamp(48px, 6vw, 80px) 0; }
.listing__empty { padding: 120px var(--gutter); text-align: center; color: var(--c-muted); }
.listing__empty h1 { font-size: 32px; margin-bottom: 10px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,12,.96); display: none; flex-direction: column; color: #fff; }
.lightbox.is-open { display: flex; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 13px; color: rgba(255,255,255,.7); }
.lightbox__bar button, .lightbox__nav { background: rgba(255,255,255,.1); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.lightbox__bar button:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }
.lightbox__stage { flex: 1; position: relative; display: grid; place-items: center; padding: 0 70px 20px; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox__nav--prev { left: 14px; } .lightbox__nav--next { right: 14px; }
.lightbox svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 600px) { .lightbox__stage { padding: 0 8px 12px; } .lightbox__nav { width: 40px; height: 40px; } }

/* skeleton for the detail page while it loads */
.listing.is-loading .gallery a { background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface) 50%, var(--c-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

/* ---------- hearts ---------- */
.card__save.is-saved { background: #e0443a !important; color: #fff !important; }
.card__save.is-saved svg { fill: currentColor; }
.listing__save svg { width: 16px; height: 16px; }
.listing__save.is-saved { background: #e0443a; border-color: #e0443a; color: #fff; }
.listing__save.is-saved svg { fill: currentColor; }
.listing__save.is-saved span::after { content: "d"; }
.results__actions .is-on, .results__head .is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ---------- sign in / account ---------- */
body.page-plain .site-header::before { opacity: 0; }
.account-page { padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(64px, 8vw, 112px); background: var(--c-surface); color: var(--c-text); min-height: 70vh; }
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.auth__intro .lead { margin-top: 14px; }
.auth__card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: clamp(22px, 3vw, 36px); box-shadow: var(--c-shadow); }
.auth__tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--c-line); }
.auth__tabs button, .account__tabs button { background: none; border: 0; padding: 12px 16px; font: 700 14px var(--font-body); color: var(--c-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth__tabs button.is-active, .account__tabs button.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.auth .form .btn { justify-self: stretch; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__intro { display: none; } }
.account__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.account__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); margin-bottom: 28px; overflow-x: auto; }
.account__tabs span { color: var(--c-muted); font-weight: 500; }
.account__profile { max-width: 560px; }
.searches { display: grid; gap: 12px; }
.saved-search { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); }
.saved-search__name { font-weight: 700; color: var(--c-ink); font-size: 16px; }
.saved-search__name:hover { color: var(--c-accent); }
.saved-search__meta { font-size: 13px; color: var(--c-muted); margin-top: 3px; }
.saved-search__meta b { color: var(--c-accent-dark); }
.saved-search__actions { display: flex; align-items: center; gap: 8px; }
.saved-search__actions .field { padding: 6px 12px; background: var(--c-surface-2); border-radius: var(--c-radius-sm); min-width: 150px; }
.saved-search__actions .field label { font-size: 10px; color: var(--c-muted); }
.saved-search__actions .field select { color: var(--c-ink); font-size: 14px; }