/* team-map.css — Lofty-style split map+list property search for the team site.
   Ported from the agent site (public/agent-search.css). The search fills the
   viewport BELOW the team header; --tmh (team header height) is set at runtime
   by team-map.js so the fixed toolbar/page sit under whatever the header is. */

:root { --tmh: 92px; --tm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body.tm-search-lock { overflow: hidden; }
/* Match the agent site's clean sans + Title Case (the team theme force-uppercases
   buttons/labels, so reset it on the search UI). */
#tm-search-host, .ase-toolbar, .ase-page, .ase-modal-backdrop { font-family: var(--tm-font); }
.ase-pill, .ase-view-toggle button, .ase-draw-btn, .ase-card, .ase-card-price,
.ase-card-addr, .ase-card-city, .ase-card-meta, .ase-tb-search input, .ase-pop, .ase-pop *, .ase-modal * { text-transform: none !important; letter-spacing: normal !important; font-family: var(--tm-font) !important; }
/* The theme also sets font-size (16px) and line-height (1.4) on buttons/inputs
   with a selector that beats these classes — so the toolbar rendered 42px-tall
   pills against the agent site's ~34px despite BYTE-IDENTICAL declarations.
   That size gap was the whole "why is the toolbar so large" difference. */
.ase-toolbar .ase-pill,
.ase-toolbar .ase-view-toggle button,
.ase-map-toolbar .ase-draw-btn { font-size: 13px !important; line-height: 1.2 !important; }
.ase-toolbar .ase-tb-search input { font-size: 14px !important; line-height: 1.2 !important; }
/* keep the team header solid + legible over the white search */
/* The header must out-stack the toolbar (z-index 500) or the BUYING submenu
   opens UNDERNEATH it and appears cut off after a couple of items. */
.tm-search-lock .header-main-wrap { position: relative; z-index: 700 !important; }
.tm-search-lock .header-main-wrap .sub-menu,
.tm-search-lock .header-main-wrap .elementor-nav-menu .sub-menu,
.tm-search-lock .header-main-wrap ul ul { z-index: 701 !important; }
.tm-search-lock .header-main-wrap { background: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,.08) !important; }
.tm-search-lock .header-main-wrap a, .tm-search-lock .header-main-wrap .elementor-item { color: #1a1a1a !important; }
.tm-search-lock .header-main-wrap img[src*="Logo-White"], .tm-search-lock .header-main-wrap img[src*="14402964"] { filter: invert(1) !important; }

/* Toolbar directly under the team header, full width. */
.ase-toolbar {
  position: fixed; top: var(--tmh); left: 0; right: 0; height: 62px;
  background: #fff; border-bottom: 1px solid #eaeaea; z-index: 500;
  display: flex; align-items: center; font-family: var(--tm-font);
}
.ase-toolbar-row { display: flex; align-items: center; gap: 12px; padding: 0 20px; width: 100%; }
.ase-tb-search { position: relative; width: 280px; }
.ase-tb-search input {
  width: 100%; box-sizing: border-box; padding: 10px 14px;
  border: 1px solid #e2e2e2; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fafafa;
}
.ase-tb-search input:focus { background: #fff; border-color: #999; outline: none; }
.ase-tb-search .ase-typeahead-pop { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 60; }

.ase-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ase-pill-wrap { position: relative; }
.ase-pill {
  padding: 9px 16px; border: 1px solid #e2e2e2; border-radius: 999px; background: #fff; color: #1a1a1a;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.ase-pill:hover { border-color: #999; background: #fafafa; }
.ase-pill:focus { outline: none; border-color: #1a1a1a; }
.ase-pill.is-on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

.ase-pop {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 50;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.10); padding: 14px; min-width: 240px;
}
.ase-pop[hidden] { display: none !important; }
.ase-pop-title { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.ase-pop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ase-pop-field { display: flex; flex-direction: column; gap: 4px; }
.ase-pop-field label { font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ase-pop-field input { padding: 8px 10px; border: 1px solid #e2e2e2; border-radius: 6px; font-family: inherit; font-size: 14px; }
.ase-pop-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ase-pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ase-pop-chips button { padding: 7px 13px; border: 1px solid #e2e2e2; border-radius: 6px; background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; }
.ase-pop-chips button:hover { border-color: #999; }
.ase-pop-chips button.is-on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

.ase-view-toggle { margin-left: auto; display: flex; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; }
.ase-view-toggle button { padding: 8px 14px; border: 0; background: #fff; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; color: #6b7280; }
.ase-view-toggle button + button { border-left: 1px solid #e2e2e2; }
.ase-view-toggle button.is-on { background: #1a1a1a; color: #fff; }

/* Page: below header + 62px toolbar. Grid switches by view class. */
.ase-page {
  position: fixed; inset: calc(var(--tmh) + 62px) 0 0 0; display: grid;
  grid-template-columns: 620px 1fr; background: #fff; font-family: var(--tm-font);
}
.ase-page.view-list { grid-template-columns: 1fr; }
.ase-page.view-list .ase-map-pane { display: none; }
.ase-page.view-map { grid-template-columns: 1fr; }
.ase-page.view-map .ase-results-pane { display: none; }

.ase-results-pane { border-right: 1px solid #eaeaea; background: #fff; overflow-y: auto; padding: 16px 16px 60px; display: flex; flex-direction: column; gap: 12px; }
/* Plain "13,542 results" — the uppercase letter-spaced treatment wrapped to two
   lines in the narrow results column. */
.ase-results-head { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #333; white-space: nowrap; }
.ase-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ase-page.view-list .ase-results { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 1100px) { .ase-results { grid-template-columns: 1fr; } }
/* Show more — left-aligned with the cards (was centred), squared off to match
   the card language, and a hover that actually reads as interactive. */
.ase-more-btn {
  /* It's appended INTO the card grid, so without this it becomes a grid item and
     sits in the first column. Span the full row and start it at the left edge so
     it lines up with the cards above. */
  /* Was white with a hairline grey border, sitting under a column of white
     cards — it read as another card edge and got missed. It is the only way to
     see the rest of the results, so it should look like the action it is.
     Solid by default; the old treatment is now the hover. */
  grid-column: 1 / -1; justify-self: stretch;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 16px 0 8px; padding: 13px 20px;
  border: 1px solid #1a1a1a; border-radius: 10px; background: #1a1a1a;
  font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: #fff; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.ase-more-btn::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .16s ease;
}
.ase-more-btn:hover {
  background: #333; border-color: #333; color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); transform: translateY(-1px);
}
.ase-more-btn:hover::after { transform: rotate(45deg) translate(1px, 1px); }
.ase-more-btn:active { transform: translateY(0); box-shadow: none; }
.ase-more-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ase-more-btn, .ase-more-btn::after { transition: none; }
  .ase-more-btn:hover { transform: none; }
}
.ase-empty { padding: 40px 12px; text-align: center; color: #999; font-size: 14px; }

.ase-card { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: inherit; }
.ase-card:hover { border-color: #c8c8c8; box-shadow: 0 6px 18px -10px rgba(0,0,0,0.18); }
.ase-card.is-selected { border-color: #1a1a1a; box-shadow: 0 0 0 1px #1a1a1a; }
.ase-card-photo { position: relative; width: 100%; aspect-ratio: 16/11; flex-shrink: 0; background: #f1f1f1 center/cover no-repeat; }
.ase-card-photo [data-fav-id] { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); border-radius: 50%; color: #333; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.ase-card-photo [data-fav-id] svg { width: 16px; height: 16px; display: block; }
.ase-card-body { flex: 1; padding: 10px 12px 11px; min-width: 0; }
.ase-card-price { font-size: 16.5px; font-weight: 700; color: #111; margin-bottom: 3px; }
.ase-card-addr { font-size: 13px; font-weight: 600; color: #222; line-height: 1.3; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ase-card-city { font-size: 12px; color: #8a8a8a; margin-bottom: 7px; }
.ase-card-meta { font-size: 11.5px; color: #555; padding-top: 7px; border-top: 1px solid #f0f0f0; color: #888; letter-spacing: 0.02em; }
.ase-card-badge { position: absolute; top: 6px; left: 6px; background: #111; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; }

.ase-map-pane { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ase-map-toolbar { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; gap: 4px; background: #fff; border: 1px solid #e1e1e1; border-radius: 6px; padding: 4px; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18); }
.ase-draw-btn { padding: 6px 10px; background: transparent; border: none; color: #222; font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 4px; font-family: inherit; }
.ase-draw-btn:hover { background: #f3f3f3; }
.ase-draw-btn.is-on { background: #1a1a1a; color: #fff; }
.ase-map { flex: 1; min-height: 0; background: #e9edf0; }
/* Listing-detail overlay over the map pane */
/* Listing detail as a centred dialog over the page, not pinned in the map pane. */
.tm-detail-ov {
  position: fixed; inset: 0; z-index: 9990; display: none;
  align-items: stretch; justify-content: center; padding: 0;
  background: rgba(28, 27, 25, .45);
}
/* Full height, edge to edge vertically — the same shape Zillow uses. Insetting
   it left gaps above and below that made the panel look like it was floating
   rather than taking over. */
/* The listing supplies its own close button inside its header bar, so the
   parent's floating X is redundant and was landing on top of Share. */
.tm-detail-ov .tm-detail-x { display: none; }
.tm-detail-panel {
  position: relative; width: min(1320px, 100vw); height: 100vh;
  background: #fff; border-radius: 0; overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, .38);
}
body.tm-modal-open { overflow: hidden; }
.tm-detail-frame { display: block; width: 100%; height: 100%; border: 0; }
/* Hidden inside the dialog: the listing draws its own close in its header bar,
   and this one landed on top of Share. Declared AFTER the base rule because the
   base rule would otherwise win on source order. */
.tm-detail-x { position: absolute; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.tm-detail-ov .tm-detail-x, .tm-detail-panel .tm-detail-x { display: none !important; }
.tm-detail-x:hover { background: rgba(0,0,0,0.72); }
.ase-map-msg { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 24px; color: #888; font-size: 13px; }

/* Typeahead */
.ase-typeahead-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e1e1e1; border-radius: 8px; box-shadow: 0 12px 28px -8px rgba(0,0,0,0.18); padding: 4px; z-index: 60; max-height: 300px; overflow-y: auto; }
.ase-typeahead-pop[hidden] { display: none !important; }
.ase-typeahead-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 9px 11px; font-family: inherit; font-size: 13px; color: #1a1a1a; cursor: pointer; border-radius: 5px; }
.ase-typeahead-item:hover, .ase-typeahead-item.is-active { background: #f3f3f3; }

/* Loading spinner */
.ase-loading { position: fixed; inset: var(--tmh) 0 0 0; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 490; }
.ase-spinner { width: 34px; height: 34px; border: 3px solid #eaeaea; border-top-color: #1a1a1a; border-radius: 50%; animation: ase-spin 0.7s linear infinite; }
@keyframes ase-spin { to { transform: rotate(360deg); } }

/* Modal (Filters / Save Search) */
.ase-modal-backdrop { position: fixed; inset: 0; background: rgba(20,20,20,0.55); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--tm-font); }
.ase-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.3); }
.ase-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid #eaeaea; }
.ase-modal-title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: #111; }
.ase-modal-x { margin-left: auto; background: transparent; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; padding: 4px 8px; }
.ase-modal-x:hover { color: #111; }
.ase-modal-body { padding: 18px 22px; overflow-y: auto; }
.ase-modal-foot { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid #eaeaea; background: #fafafa; justify-content: flex-end; }
.ase-mf-group { margin-bottom: 18px; }
.ase-mf-group > label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
.ase-mf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ase-mf-row input, .ase-modal-body select { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #e1e1e1; border-radius: 6px; font-size: 13px; font-family: inherit; }
.ase-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ase-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #1a1a1a; cursor: pointer; user-select: none; }
.ase-check input { width: 16px; height: 16px; accent-color: #1a1a1a; cursor: pointer; margin: 0; }
.ase-btn-primary { background: #1a1a1a; color: #fff; border: none; padding: 11px 18px; font-family: inherit; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; border-radius: 6px; cursor: pointer; }
.ase-btn-primary:hover { opacity: 0.9; }
.ase-btn-ghost { background: transparent; color: #1a1a1a; border: 1px solid #e1e1e1; padding: 11px 18px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; font-family: inherit; }
.ase-btn-ghost:hover { border-color: #999; }
.ase-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ase-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; }
.ase-field input, .ase-field textarea { padding: 9px 11px; border: 1px solid #e1e1e1; border-radius: 6px; font-size: 13px; font-family: inherit; }
.ase-msg { font-size: 13px; margin-top: 10px; }

@media (max-width: 900px) {
  .ase-page { grid-template-columns: 1fr; grid-template-rows: 46vh 1fr; }
  .ase-page.view-mixed .ase-results-pane { order: 2; }
  .ase-tb-search { width: 150px; }
  .ase-view-toggle { display: none; }
}

/* ── Price histogram + dual-range slider (matches the agent site) ── */
.ase-histo { display: flex; align-items: flex-end; gap: 2px; height: 68px; margin: 4px 0 2px; padding: 0 2px; }
.ase-histo-bar { flex: 1; background: #d8d8d8; border-radius: 1px 1px 0 0; min-height: 4px; }

.ase-range { position: relative; height: 26px; margin: 0 2px; }
.ase-range-rail { position: absolute; top: 11px; left: 0; right: 0; height: 4px; background: #e6e6e6; border-radius: 2px; }
.ase-range-fill { position: absolute; top: 11px; height: 4px; background: #141414; border-radius: 2px; }
/* Both native ranges stack on the same track; only the thumbs take pointer
   events, otherwise the upper input swallows clicks meant for the lower one. */
.ase-range input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.ase-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #141414; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
.ase-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #141414; cursor: grab;
}
.ase-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin: 2px 2px 10px; }

/* ── More Filters: chips + hint ── */
.ase-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ase-chip {
  font-size: 12.5px; padding: 7px 13px; border: 1px solid #dcdcdc; border-radius: 999px;
  background: #fff; color: #333; cursor: pointer; font-family: var(--tm-font);
}
.ase-chip:hover { border-color: #b5b5b5; }
.ase-chip.is-on { background: #141414; border-color: #141414; color: #fff; }
.ase-field-hint { font-size: 11.5px; color: #8a8a8a; margin-top: 5px; }
.ase-mf-group > input[type="text"], .ase-mf-group > input[type="number"] { width: 100%; box-sizing: border-box; }

/* Status bubble, top-left of each card photo */
.ase-card-photo { position: relative; }
.ase-card-status {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(20,20,20,.72); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(3px); letter-spacing: .01em;
}

/* Bigger, cleaner cards in the mixed/list panes */
.ase-card:hover .ase-card-photo { filter: brightness(1.03); }
.ase-card-status { font-size: 12px; padding: 5px 11px; top: 10px; left: 10px; }
/* Exclusive = the Active pill plus a gradient star (see statusPillHtml). */
.ase-card-status { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.ase-card-status.is-exclusive { padding-left: 9px; }
.ase-card-status .ase-star { flex: 0 0 auto; display: block; }

/* Live status dot — same pulse as the homepage Trending/Featured pills, so a
   card reads as "on the market right now" at a glance. Exclusive keeps its
   gradient star instead. */
.ase-card-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: #41c464; box-shadow: 0 0 0 0 rgba(65,196,100,.75);
  animation: ase-dot-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.ase-card-status.is-exclusive::before { display: none; }
.ase-card-status.is-pending::before { background: #e2a33a; animation-name: ase-dot-pulse-amber; }
.ase-card-status.is-off::before { background: #9a9a9a; animation: none; box-shadow: none; }
@keyframes ase-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(65,196,100,.7); }
  70%  { box-shadow: 0 0 0 6px rgba(65,196,100,0); }
  100% { box-shadow: 0 0 0 0 rgba(65,196,100,0); }
}
@keyframes ase-dot-pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(226,163,58,.7); }
  70%  { box-shadow: 0 0 0 6px rgba(226,163,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,163,58,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ase-card-status::before { animation: none !important; }
}

.ase-results { padding-bottom: 8px; }

.ase-results-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ase-sort { font-family: var(--tm-font); font-size: 12.5px; color: #333; border: 1px solid #e0e0e0;
  border-radius: 999px; padding: 6px 26px 6px 12px; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/13px;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.ase-sort:focus { outline: none; border-color: #999; }

/* Town boundary control — deliberately identical to .ase-draw-btn so it reads
   as one more tool in the row, not a separate pill. */
.ase-bnd-chip {
  padding: 6px 10px; background: transparent; border: none; color: #222;
  font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 4px;
  font-family: inherit; white-space: nowrap;
}
.ase-bnd-chip[hidden] { display: none; }
.ase-bnd-chip:hover { background: #f3f3f3; }
.ase-bnd-name { display: none; }

/* Results are still loading: dim rather than blank, so a slower pool arriving
   doesn't read as content disappearing. */
/* Don't dim the cards while a new area loads — greyed-out results read as
   "disabled", and the header already says "Searching…". */
.ase-results.is-loading { opacity: 1; }
.ase-empty-loading { color: #8d8880; }

/* Shown when a view holds more listings than one response can carry, so a
   partial result is never mistaken for the whole picture. */
.ase-cap-note {
  font-size: 12px; line-height: 1.4; color: #6b6b6b;
  padding: 4px 0 0;
}
.ase-cap-note[hidden] { display: none; }


/* Zillow-style preview when a map dot is clicked. */
/* Matches the platform's map info window (.bpb-iw-card) so the consumer map and
   the agent platform read as one product: status pill above the photo, then
   price, address, facts and a "View details" row, on the platform's type scale
   (15 / 12 / 11.5) rather than this card's older, larger one. */
.tm-dot-card {
  position: absolute; z-index: 40; width: 240px; display: none; cursor: pointer;
  background: #fff; border-radius: 12px;
  padding: 10px 12px 12px;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.tm-dot-card-status {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; color: #fff;
  margin-bottom: 8px; letter-spacing: .03em; text-transform: uppercase;
}
.tm-dot-card-status.active       { background: #16a34a; }
.tm-dot-card-status.pending,
.tm-dot-card-status.under-contract { background: #f59e0b; }
/* Charcoal rather than the platform's slate — slate is a blue, and the brand
   palette is greys and charcoals only. */
.tm-dot-card-status.sold         { background: #2f2f2f; }
.tm-dot-card-status.coming-soon  { background: #55514b; }
.tm-dot-card-photo {
  height: 130px; border-radius: 6px; margin-bottom: 8px;
  background: #e8e8e6 center/cover no-repeat;
}
.tm-dot-card-nophoto {
  display: flex; align-items: center; justify-content: center;
  color: #9a9a9a; font-size: 12px;
}
.tm-dot-card-body { padding: 0; }
.tm-dot-card-price { font-size: 15px; font-weight: 600; color: #18181b; margin-bottom: 4px; }
.tm-dot-card-addr { font-size: 12px; color: #3a3a3a; line-height: 1.4; margin-bottom: 4px; }
.tm-dot-card-meta { font-size: 11.5px; color: #555; margin-bottom: 8px; }
.tm-dot-card-cta { font-size: 11.5px; font-weight: 600; color: #1c1b19;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* NJMLS Internet Data Exchange mark, bottom-right of the map card. Small and
   quiet — it is an attribution, not a brand moment — but never scaled below
   legibility, which is what the agreement actually asks for. */
/* Height-constrained for the same reason as the sidebar marks: the NJMLS
   logo is a wide banner, so a fixed WIDTH renders it a few pixels tall. */
.tm-dot-card-idx { flex: 0 0 auto; width: auto; height: auto; max-height: 22px;
  max-width: 112px; display: block; opacity: 0.95; object-fit: contain; }
.tm-dot-card-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: #333; font-size: 16px; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* "12 mi away" on each card, measured from the visitor's own position. */
.ase-card-dist {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; font-size: 12px; color: #6b6b6b;
}
.ase-card-dist svg { flex: 0 0 auto; opacity: .75; }

/* ── More Filters: hardened against the WordPress theme ──────────────────────
   The theme styles bare `label`, `button` and `input` at a much higher weight
   than this file, so the panel rendered with 16px slate-blue labels, oversized
   native checkboxes and balloon-sized chips — nothing like the rest of the
   site. Everything below is scoped to .ase-modal and forced, so the panel keeps
   its own typography wherever it's mounted. */
.ase-modal { max-width: 620px !important; border-radius: 16px !important; }
.ase-modal-head { padding: 20px 26px 16px !important; border-bottom: 1px solid #efedea !important; }
.ase-modal-title {
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: #141414 !important; margin: 0 !important;
}
.ase-modal-body { padding: 22px 26px 6px !important; }

.ase-modal .ase-mf-group { margin-bottom: 0 !important; padding: 16px 0 !important; border-top: 1px solid #f2f0ed; }
.ase-modal .ase-mf-group:first-child { border-top: 0; padding-top: 0 !important; }
.ase-modal .ase-mf-group > label {
  display: block !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .13em !important; text-transform: uppercase !important;
  color: #8a857e !important; margin: 0 0 10px !important; line-height: 1.3 !important;
}

.ase-modal input[type="text"], .ase-modal input[type="number"], .ase-modal select {
  width: 100% !important; box-sizing: border-box !important; height: 42px !important;
  padding: 0 13px !important; border: 1px solid #e5e3df !important; border-radius: 9px !important;
  font-size: 14px !important; font-family: var(--tm-font) !important; color: #141414 !important;
  background: #fff !important; box-shadow: none !important; margin: 0 !important;
}
.ase-modal select { appearance: none; -webkit-appearance: none; padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141414' stroke-width='1.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important;
}
.ase-modal input::placeholder { color: #a8a49e !important; }
.ase-modal input:focus, .ase-modal select:focus { outline: none !important; border-color: #141414 !important; }

/* Custom checkbox — the native control ignores font sizing and rendered huge. */
.ase-modal .ase-checks { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px !important; }
.ase-modal .ase-check {
  display: flex !important; align-items: center !important; gap: 10px !important;
  font-size: 14px !important; font-weight: 400 !important; letter-spacing: normal !important;
  color: #141414 !important; text-transform: none !important; margin: 0 !important; cursor: pointer;
}
.ase-modal .ase-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 19px !important; height: 19px !important;
  flex: 0 0 19px; border: 1.5px solid #d6d3ce !important; border-radius: 5px !important;
  background: #fff !important; margin: 0 !important; padding: 0 !important; cursor: pointer;
  position: relative; transition: background .12s ease, border-color .12s ease;
}
.ase-modal .ase-check input[type="checkbox"]:checked { background: #141414 !important; border-color: #141414 !important; }
.ase-modal .ase-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(43deg);
}

.ase-modal .ase-chips { gap: 8px !important; }
.ase-modal .ase-chip {
  font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: normal !important;
  text-transform: none !important; padding: 8px 16px !important; height: auto !important;
  border: 1px solid #e5e3df !important; border-radius: 999px !important;
  background: #fff !important; color: #4a4a4a !important; line-height: 1.35 !important;
  font-family: var(--tm-font) !important; box-shadow: none !important; margin: 0 !important;
}
.ase-modal .ase-chip:hover { border-color: #141414 !important; color: #141414 !important; }
.ase-modal .ase-chip.is-on { background: #141414 !important; border-color: #141414 !important; color: #fff !important; }
.ase-modal .ase-field-hint { font-size: 12px !important; color: #9a958e !important; margin-top: 7px !important; }

.ase-modal-foot { padding: 16px 26px !important; border-top: 1px solid #efedea !important; background: #fff !important; }
.ase-modal-foot .ase-btn-primary, .ase-modal-foot .ase-btn-ghost {
  height: 44px !important; padding: 0 22px !important; border-radius: 999px !important;
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .13em !important;
  text-transform: uppercase !important; font-family: var(--tm-font) !important; line-height: 1 !important;
}
.ase-modal-foot .ase-btn-primary { background: #141414 !important; color: #fff !important; border: 1px solid #141414 !important; }
.ase-modal-foot .ase-btn-ghost { background: #fff !important; color: #141414 !important; border: 1px solid #ddd9d4 !important; }
.ase-modal-foot .ase-btn-ghost:hover { border-color: #141414 !important; }

@media (max-width: 560px) { .ase-modal .ase-checks { grid-template-columns: 1fr; } }

/* Listing without photos — a stated absence, not an empty box. */
.ase-card-photo.is-nophoto { background: #f2f0ed; }
.ase-card-nophoto {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  color: #b3ada4; pointer-events: none;
}
.ase-card-nophoto i {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* For Sale / For Rent. Rents are monthly, so they get their own mode rather
   than being mixed into a sale search where the price sort stops meaning
   anything. Styled to match .ase-view-toggle. */
.ase-deal-toggle {
  display: inline-flex; flex: 0 0 auto; margin-left: auto;
  background: #f2f0ed; border-radius: 999px; padding: 3px;
}
.ase-deal-toggle button {
  border: 0; background: none; cursor: pointer;
  font-family: var(--tm-font); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: #6b6b6b;
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.ase-deal-toggle button:hover { color: #141414; }
.ase-deal-toggle button.is-on { background: #fff; color: #141414; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ase-card-mo { font-size: .62em; font-weight: 600; color: #8a857e; margin-left: 3px; }

/* Card meta as icon + number ("3 bd · 2 ba" read as an abbreviation puzzle).
   Icons inherit the meta colour via currentColor, matching the distance pin. */
.ase-card-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ase-meta-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ase-meta-i svg { flex: 0 0 auto; opacity: .8; }

/* Exclusive: dark pill + gradient sparkle, matching the list card and the
   detail page. Placed AFTER the colour rules so it wins on equal specificity. */
.ase-iw-status.exclusive,
.tm-dot-card-status.exclusive {
  background: #1f1f22 !important; color: #fff;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
}
.ase-iw-status .ase-star,
.tm-dot-card-status .ase-star { flex: none; display: block; }

/* ---- IDX attribution (NJMLS IDX agreement) ---------------------------
   "Real estate listings held by brokerage firms other than [our office] are
   marked with the Internet Data Exchange logo and information about them
   includes the name of the listing brokers."

   Deliberately quiet: this is a legal requirement, not a selling point, so it
   sits below the property facts in small muted type and never competes with
   the price. The logo is capped in height so it reads as a mark rather than
   an image, and the row wraps rather than truncating a long brokerage name —
   the name is the part that has to be legible. */
.idx-attr {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(0,0,0,.07);
  min-width: 0;
}
.idx-attr .idx-logo {
  height: 15px; width: auto; flex: 0 0 auto; display: block;
  image-rendering: -webkit-optimize-contrast;
  /* Official mark (black lettering, transparent paper) — sits directly on the
     white card. The reversed/white mark stays on the dark footer only. */
  box-sizing: content-box;
}
.idx-attr-txt {
  font-size: 10.5px; line-height: 1.35; color: #8a8a8a;
  letter-spacing: .01em; min-width: 0;
  /* WRAPS rather than truncating. The agreement requires that information
     about another brokerage's listing "includes the name of the listing
     brokers" — and "KELLER WILLIAMS VILLA…" is not that name. Two lines cost a
     few pixels of card height; a clipped legal attribution costs more. Capped
     at two lines so one very long brokerage name can't unbalance the grid. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* The logo must stay top-aligned once the name runs to two lines, or it
   floats against the middle of the text block. */
.idx-attr { align-items: flex-start; }
.idx-attr .idx-logo { margin-top: 1px; }
.idx-attr.is-compact { margin-top: 6px; padding-top: 6px; }
.idx-attr.is-compact .idx-logo { height: 12px; }
.idx-attr.is-compact .idx-attr-txt { font-size: 10px; }

/* NJMLS IDX disclaimer in the footer. Required by the licensing agreement and
   read word-for-word at compliance review, so it must be legible — not 8px
   grey mush — while still reading as fine print rather than content. */
.ttf-idx { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
/* The footer mark is the transparent variant: paper removed, "Internet Data
   Exchange" reversed to white, NJMLS yellow/teal untouched. No white chip
   needed — it sits directly on the dark band. */
.ttf-idx-logo { height: 24px; width: auto; flex: 0 0 auto; margin-top: 1px; }
/* Fine print, not body copy. It was rendering LARGER and brighter than the
   Coldwell Banker legal line beneath it, which inverted the hierarchy — a
   required disclosure should be legible but must not out-shout the brokerage
   notice it sits above. */
.ttf-idx p {
  margin: 0; font-size: 10px; line-height: 1.6; color: #c9c9c9;
  max-width: 110ch; letter-spacing: .01em;
}
@media (max-width: 700px) { .ttf-idx { flex-direction: column; gap: 8px; } }

/* ---- Card photo arrows (Zillow-style) ---------------------------------
   Hidden until the card is hovered so the grid stays calm; the photo itself
   is only fetched when someone actually clicks an arrow. */
.ase-card-photo { overflow: hidden; }
.ase-cnav {
  position: absolute; top: 50%; transform: translateY(-50%) scale(.9);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; padding: 0; border-radius: 999px; cursor: pointer; z-index: 3;
  color: #1f1f1f; background: rgba(255,255,255,.88);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.ase-cprev { left: 8px; }
.ase-cnext { right: 8px; }
.ase-card:hover .ase-cnav, .ase-card:focus-within .ase-cnav {
  opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1);
}
.ase-cnav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.ase-cdots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3;
  display: flex; justify-content: center; gap: 5px;
  opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
.ase-card:hover .ase-cdots { opacity: 1; }
.ase-cdots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ase-cdots i.on { background: #fff; width: 6px; height: 6px; }
.ase-card-photo.is-loading::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: rgba(255,255,255,.18);
}
@media (prefers-reduced-motion: reduce) { .ase-cnav { transition: none; } }
@media (hover: none) { .ase-cnav, .ase-cdots { opacity: 1; pointer-events: auto; } }

/* One photo after all — the arrows were optimistic, take them away. */
.ase-card-photo.is-single .ase-cnav, .ase-card-photo.is-single .ase-cdots { display: none; }

/* Status filter as a list: one row per status, live dot on the left.
   (.ase-pop-chips keeps the existing click wiring; .ase-pop-list is layout.) */
.ase-pop-list { display: flex !important; flex-direction: column; gap: 4px; min-width: 210px; }
.ase-pop-list button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; justify-content: flex-start;
}
.ase-pop-list .ase-star { flex: 0 0 auto; }
.ase-sdot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #41c464; box-shadow: 0 0 0 0 rgba(65,196,100,.75);
  animation: ase-sdot-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.ase-sdot.is-pending { background: #e2a33a; animation-name: ase-sdot-pulse-amber; }
.ase-sdot.is-closed  { background: #8a8a8a; animation: none; box-shadow: none; }
.ase-sdot.is-any     { background: #cfcfcf; animation: none; box-shadow: none; }
@keyframes ase-sdot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(65,196,100,.7); }
  70%  { box-shadow: 0 0 0 6px rgba(65,196,100,0); }
  100% { box-shadow: 0 0 0 0 rgba(65,196,100,0); }
}
@keyframes ase-sdot-pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(226,163,58,.7); }
  70%  { box-shadow: 0 0 0 6px rgba(226,163,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,163,58,0); }
}
@media (prefers-reduced-motion: reduce) { .ase-sdot { animation: none !important; } }

/* "N Saved Homes" in the search toolbar (Zillow places it on this row). */
.ase-saved-link, .ase-saved-link span {
  color: #1a1a1a !important;   /* the toolbar's own anchor colour was hiding it */
}
.ase-saved-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  text-decoration: none; padding: 8px 14px;
  border: 1px solid #e2e2e2; border-radius: 999px; background: #fff;
  white-space: nowrap; margin-right: 10px;
  transition: color .16s ease, border-color .16s ease, transform .15s ease;
}
.ase-saved-link svg { color: #e0245e; flex: 0 0 auto; }
.ase-saved-link:hover, .ase-saved-link:hover span { color: #e0245e !important; }
.ase-saved-link:hover { border-color: #e0245e; transform: translateY(-1px); }
.ase-saved-link[hidden] { display: none; }

/* ============================================================
   RIGHT RAIL — Search · Saved · Searches · Updates · My Home
   A persistent icon rail down the right of the search view. It swaps the pane
   beside it rather than navigating, so the map keeps its viewport, filters and
   drawn boundary while the visitor checks their saved homes.
   The rail is first in the DOM, so `order` puts it last on screen.
   ============================================================ */
.ase-page { grid-template-columns: 620px 1fr 76px; }
.ase-page.view-list { grid-template-columns: 1fr 76px; }
.ase-page.view-map  { grid-template-columns: 1fr 76px; }
/* A pane is open: it takes the whole area beside the rail. */
.ase-page.rail-open { grid-template-columns: 1fr 76px; }
.ase-page.rail-open .ase-results-pane,
.ase-page.rail-open .ase-map-pane { display: none; }

.ase-rail {
  order: 9;
  border-left: 1px solid #eaeaea; background: #fff;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 0; gap: 2px; overflow-y: auto;
}
.ase-rail-btn {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 2px 9px; color: #6b6b6b;
  /* !important: the site's own type scale was rendering these at 16px, which
     overflowed a 76px rail and clipped "Searches"/"Updates". */
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; line-height: 1.2 !important; text-transform: none !important;
  transition: color .16s ease, background .16s ease;
}
.ase-rail-lbl {
  font-size: 10.5px !important; letter-spacing: .01em !important; line-height: 1.2 !important;
  text-transform: none !important;
  max-width: 100%; text-align: center; white-space: nowrap;
}
.ase-rail-btn:hover { color: #141414; background: #f7f7f5; }
.ase-rail-btn.is-on { color: #141414; }
.ase-rail-btn.is-on .ase-rail-ico { background: #f0efec; }
/* The Saved heart reads in the same red as a saved listing's heart. */
.ase-rail-btn[data-rail="saved"] svg { color: #e0245e; }
.ase-rail-ico {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 34px; border-radius: 10px;
  transition: background .16s ease;
}
.ase-rail-badge {
  position: absolute; top: -3px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #e0245e; color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 16px;
  text-align: center; box-shadow: 0 0 0 2px #fff;
}
.ase-rail-badge[hidden] { display: none; }

.ase-pane { background: #fff; overflow-y: auto; padding: 22px 26px 60px; }
.ase-pane[hidden] { display: none; }
.ase-pane-head h2 {
  font-family: inherit; font-size: 22px; font-weight: 700; color: #141414;
  margin: 0 0 4px; letter-spacing: -.01em;
}
.ase-pane-note { font-size: 13.5px; color: #6b6b6b; margin: 0 0 18px; }
.ase-pane-loading { padding: 40px 0; text-align: center; color: #9a9a9a; font-size: 14px; }
.ase-pane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.ase-pane-empty { max-width: 460px; margin: 60px auto; text-align: center; }
.ase-pane-empty-ic { color: #e0245e; margin-bottom: 12px; }
.ase-pane-empty h3 { font-size: 19px; font-weight: 700; color: #141414; margin: 0 0 8px; }
.ase-pane-empty p { font-size: 14px; line-height: 1.6; color: #6b6b6b; margin: 0 0 18px; }
.ase-pane-btn {
  border: 0; background: #141414; color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 10px; cursor: pointer;
  transition: transform .15s ease, box-shadow .18s ease, opacity .15s ease;
}
.ase-pane-btn:hover { opacity: .94; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* Saved searches list */
.ase-ss-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ase-ss-row {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #eaeaea; border-radius: 12px; padding: 14px 16px; background: #fff;
}
.ase-ss-main { flex: 1; min-width: 0; }
.ase-ss-sum { font-size: 14.5px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
.ase-ss-when { font-size: 12.5px; color: #9a9a9a; margin-top: 3px; }
.ase-ss-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ase-ss-run {
  font-size: 13px; font-weight: 700; color: #141414 !important; text-decoration: none;
  border: 1px solid #141414; border-radius: 999px; padding: 8px 16px;
  transition: background .16s ease, color .16s ease;
}
.ase-ss-run:hover { background: #141414; color: #fff !important; }
.ase-ss-del {
  border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  color: #b0b0b0; padding: 2px 6px; border-radius: 8px;
}
.ase-ss-del:hover { color: #e0245e; background: #faf0f3; }

@media (max-width: 900px) {
  .ase-page, .ase-page.view-list, .ase-page.view-map, .ase-page.rail-open { grid-template-columns: 1fr 62px; }
  .ase-rail-lbl { display: none; }
}


/* ── Updates pane: a saved home that CHANGED ─────────────────────────────
   The listing card the visitor already knows (photo, arrows, heart), with a
   ribbon above it saying what moved. Unread carries the heart red. */
.ase-upd { display: flex; flex-direction: column; gap: 0; }
.ase-upd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.ase-upd-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid #e0ddd8; color: #6b6b6b; white-space: nowrap;
}
.ase-upd-chip.is-drop { color: #2f7d55; border-color: rgba(47,125,85,.45); }
.ase-upd-chip.is-up { color: #6b6b6b; }
.ase-upd-chip.is-uc { color: #c8871b; border-color: rgba(200,135,27,.45); }
.ase-upd-chip.is-back { color: #e0245e; border-color: rgba(224,36,94,.4); }
.ase-upd-chip.is-sold { color: #6b6b6b; }
.ase-upd-when { font-size: 11.5px; color: #9a9a9a; white-space: nowrap; }
.ase-upd-detail { font-size: 12.5px; color: #4a4843; margin: 0 0 8px; }
.ase-upd-detail s { color: #9a9a9a; }
.ase-upd-detail b { color: #2f7d55; }
.ase-upd.is-unread .ase-upd-head { position: relative; padding-left: 12px; }
.ase-upd.is-unread .ase-upd-head::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #e0245e;
}
.ase-pane-note-2 { margin-top: 26px; }

/* Home Type — a checkbox grid (Zillow's Home Type panel). Homes come
   pre-selected; land/commercial/multi-family are opt-in. */
.ase-mf-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ase-mf-types .ase-check { font-size: 13px !important; }
.ase-mf-types input { accent-color: #1a1a1a; }

/* Sold cards name BOTH sides of the sale. The buyer-side line wraps onto its
   own row (flex-basis 100%) so the IDX logo keeps its place beside "Listed by"
   instead of the two attributions colliding on one line. */
.idx-attr { flex-wrap: wrap; }
.idx-attr-sold { flex-basis: 100%; color: #6f6f6f; }

/* Map / Satellite toggle. Bottom-left so it never fights Google's own zoom and
   recentre controls on the right, and styled to match the draw toolbar rather
   than inventing a second visual language for an on-map control. */
.ase-maptype {
  position: absolute; bottom: 24px; left: 12px; z-index: 5; display: flex; gap: 4px;
  background: #fff; border: 1px solid #e1e1e1; border-radius: 6px; padding: 4px;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18);
}
.ase-mt-btn {
  padding: 6px 12px; background: transparent; border: none; color: #222;
  font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 4px; font-family: inherit;
  /* The site's global button styling uppercases everything; these are labels,
     not shouted calls to action, and house style is Title Case. */
  text-transform: none; letter-spacing: 0;
}
.ase-mt-btn:hover { background: #f3f3f3; }
.ase-mt-btn.is-on { background: #1a1a1a; color: #fff; }
/* Aerial is far busier than the road map, so the price pins need a harder edge
   to stay readable against tree cover and rooftops. */
.ase-map-pane.is-sat .ase-map { background: #3a3a3a; }

/* Parcel card — opens when a lot outline is clicked at street zoom. Deliberately
   quiet: the estimate is the headline, the public-record facts support it, and
   the CTA is the one thing that leads anywhere. */
.ase-parcel-card {
  position: absolute; z-index: 7; width: 260px;
  background: #fff; border: 1px solid #e1e1e1; border-radius: 10px;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,0.3); padding: 14px 15px 13px;
  font-size: 13px; color: #1a1a1a;
}
.ase-pc-x {
  position: absolute; top: 6px; right: 8px; border: none; background: transparent;
  font-size: 19px; line-height: 1; color: #9a9a9a; cursor: pointer; padding: 2px 4px;
}
.ase-pc-x:hover { color: #1a1a1a; }
.ase-pc-addr { font-weight: 600; font-size: 14px; padding-right: 18px; line-height: 1.3; }
.ase-pc-sub { font-size: 12px; color: #8a8a8a; margin-top: 2px; }
.ase-pc-est { margin: 12px 0 10px; padding: 11px 12px; background: #f7f7f6; border-radius: 8px; }
.ase-pc-est-l { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; }
.ase-pc-est-v { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ase-pc-est-r { font-size: 12.5px; color: #6f6f6f; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ase-pc-est-n { font-size: 11px; color: #9a9a9a; margin-top: 5px; line-height: 1.4; }
.ase-pc-est-none { font-size: 12.5px; color: #8a8a8a; margin-top: 4px; line-height: 1.4; }
.ase-pc-facts { display: flex; flex-direction: column; gap: 5px; }
.ase-pc-facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ase-pc-facts span { color: #8a8a8a; }
.ase-pc-facts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ase-pc-cta {
  display: block; margin-top: 12px; text-align: center; background: #1a1a1a; color: #fff;
  text-decoration: none; padding: 9px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.ase-pc-cta:hover { background: #333; }

/* The placeholder is always in the DOM now; it only shows when the card has no
   photo OR the probe image below failed to load. A background-image cannot
   report failure, which is how a broken photo produced a blank white card. */
.ase-card-photo:not(.is-nophoto) .ase-card-nophoto { display: none; }
.ase-card-probe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* MLS notices at the foot of the results column. The page footer carries the
   same block, but this is a full-height app shell and that footer is below a
   viewport nobody scrolls to — which is why NJMLS reported not finding one. */
.tm-side-idx {
  grid-column: 1 / -1;
  margin: 18px 0 8px;
  padding: 14px 14px 4px;
  border-top: 1px solid #e8e6e3;
}
.tm-side-idx .tmidx {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}
/* Constrain by HEIGHT, not width. These marks have wildly different aspect
   ratios — NJMLS is a 582x60 banner, GSMLS near-square at 300x283 — so a fixed
   width rendered the NJMLS logo 26x3px: in the DOM, invisible on screen.
   ---------------------------------------------------------------------------
   !important is load-order insurance, not laziness. team-footer.js INJECTS a
   stylesheet at runtime carrying `.ttf-idx-ajmls .ttf-idx-logo{height:19px}`
   and siblings. Those are (0,2,0) — the same specificity as this rule — so the
   later sheet wins, and because it is injected after first paint the marks
   visibly resized mid-load. That is what read as "NJMLS and All Jersey take a
   while to show up". Winning the tie outright makes all four correct on the
   first frame. */
.tm-side-idx .tmidx .tmidx-logo {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-height: 34px !important;
  max-width: 156px !important;
  margin-top: 1px;
  object-fit: contain;
}
.tm-side-idx .tmidx p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: #77736d;
}