/* Components: Listing Detail */

/* ---- Listing Detail ---- */
.listing-detail {
  padding: var(--space-xl) 0;
}

.listing-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.listing-detail-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.listing-detail-price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.listing-detail-address {
  font-size: var(--font-size-lg);
  color: var(--color-body);
  margin-bottom: var(--space-xs);
}

.listing-detail-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Listing Gallery */
.gallery-grid {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 3D Tour card — hoisted onto the hero photo when a Matterport /
   Giraffe360 tour is available. Bottom-left of the gallery (away from
   the "+N Photos" overlay on the third thumb). The preview image is
   rotated in 3D space with two faint stacked shadows behind it that
   read as a tilted cube, with an animated arrow on the CTA. */
.gallery-tour-card {
  position: absolute;
  bottom: var(--space-md, 16px);
  left: var(--space-md, 16px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(6px);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, transform 160ms ease;
}
.gallery-tour-card:hover { background: rgba(0, 0, 0, 0.9); }
.gallery-tour-card:active { transform: translateY(1px); }
.gallery-tour-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.gallery-tour-card__stage {
  position: relative;
  width: 84px;
  height: 64px;
  flex-shrink: 0;
  perspective: 700px;
}

.gallery-tour-card__preview {
  position: absolute;
  inset: 4px 10px 4px 4px;
  width: calc(100% - 14px);
  height: calc(100% - 8px);
  object-fit: cover;
  border-radius: 4px;
  transform: rotateY(-22deg) rotateX(8deg);
  transform-origin: center center;
  /* Two stacked offset shadows fake the back/side faces of a cube
     without needing three real preserve-3d planes — looks the same on
     every browser, no backface-visibility quirks. */
  box-shadow:
    8px 6px 0 -1px rgba(255, 255, 255, 0.18),
    14px 11px 0 -3px rgba(255, 255, 255, 0.10),
    0 6px 12px rgba(0, 0, 0, 0.45);
  transition: transform 280ms cubic-bezier(.22,.61,.36,1);
}
.gallery-tour-card:hover .gallery-tour-card__preview {
  transform: rotateY(-28deg) rotateX(10deg) translateZ(6px);
}
.gallery-tour-card__preview--placeholder {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.gallery-tour-card__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.gallery-tour-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gallery-tour-card__title i { font-size: 1.05em; }
.gallery-tour-card__cta {
  font-size: 0.78rem;
  opacity: 0.88;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gallery-tour-card__cta i {
  display: inline-block;
  animation: kpdd-tour-arrow 1.6s ease-in-out infinite;
}
@keyframes kpdd-tour-arrow {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-tour-card__cta i { animation: none; }
  .gallery-tour-card__preview,
  .gallery-tour-card:hover .gallery-tour-card__preview { transition: none; }
}

@media (max-width: 575px) {
  .gallery-tour-card {
    padding: 8px 14px 8px 10px;
    gap: 10px;
    bottom: 12px;
    left: 12px;
  }
  .gallery-tour-card__stage {
    width: 64px;
    height: 50px;
  }
  .gallery-tour-card__title { font-size: 0.85rem; }
  .gallery-tour-card__cta   { font-size: 0.72rem; }
}

.gallery-grid--single {
  grid-template-columns: 1fr;
}

.gallery-grid--single .gallery-main {
  height: auto;
  max-height: 560px;
}

.gallery-grid--double {
  grid-template-columns: 1fr 1fr;
}

.gallery-grid--placeholder .gallery-main {
  aspect-ratio: 16 / 9;
  max-height: 520px;
  /* No letterbox bars — the placeholder image (Google Street View at
     1280x720, or the company default) gets object-fit: cover below
     and fills the frame edge-to-edge. */
  background: #111;
}

.gallery-main,
.gallery-split {
  aspect-ratio: 16 / 10;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  display: block;
  text-align: left;
}

.gallery-main img,
.gallery-split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-main-img {
  object-fit: cover !important;
  object-position: center;
}

.gallery-placeholder-img {
  width: 100%;
  height: 100%;
  /* Cover so Street View (or the company default) fills the 16:9 hero
     the same way an MLS photo would. Was `contain` — caused letterbox
     bars on the dark backdrop and made the property page look broken. */
  object-fit: cover !important;
  object-position: center;
}

.gallery-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  height: 100%;
  min-height: 0;
}

.gallery-thumb {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  display: block;
  text-align: left;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-more {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  cursor: pointer;
}

.gallery-main:focus-visible,
.gallery-split:focus-visible,
.gallery-thumb:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

@media (max-width: 575px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid--single .gallery-main {
    max-height: 360px;
  }
  .gallery-grid--placeholder .gallery-main {
    max-height: 320px;
  }
  .gallery-side {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }
  .gallery-thumb {
    aspect-ratio: 16 / 10;
  }
}

/* Listing Detail Content */
.listing-content-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
}

/* CSS Grid implicit `min-width: auto` lets a child's content size
   force the column wider than the container — e.g. a long unbroken
   URL in remarks, a wide agent name, or any text that doesn't break.
   Forcing `min-width: 0` on each grid item makes the tracks honor
   the parent's width and the children wrap / truncate instead of
   bleeding off the right edge of the page. This was making My
   Notes, Description, Open Houses, the agent card, etc. look
   "too wide" on mobile. */
.listing-content-grid > * {
  min-width: 0;
}

@media (max-width: 991px) {
  .listing-content-grid {
    grid-template-columns: 1fr;
  }
}

.listing-section {
  margin-bottom: var(--space-xl);
  /* Belt-and-suspenders for any block-level child that has long
     unbreakable content. Word-wrap on long URLs, etc. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Skeleton placeholders for lazy-loaded rails (similar homes, comparable
   sales, recently viewed). Reserves layout space + visible shimmer so
   the user sees that something is loading rather than a blank gap. */
.listing-card-skeleton {
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
}

.listing-card-skeleton__photo {
  aspect-ratio: 16 / 10;
  width: 100%;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: kpdd-skeleton-shimmer 1.4s ease-in-out infinite;
}

.listing-card-skeleton__lines {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.listing-card-skeleton__line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: kpdd-skeleton-shimmer 1.4s ease-in-out infinite;
}

.listing-card-skeleton__line--price { width: 40%; height: 16px; }
.listing-card-skeleton__line--addr  { width: 80%; }
.listing-card-skeleton__line--meta  { width: 60%; }

@keyframes kpdd-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .listing-card-skeleton__photo,
  .listing-card-skeleton__line {
    animation: none;
  }
}

.listing-section h3 {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
}

/* "What's Special" chip strip — sits between the header and the
   description. Single visual row that wraps on narrow screens. The
   gold star icon is Bootstrap Icons' bi-stars; the chip is a pill
   with a soft accent background so it reads as marketing copy and
   not a UI control. Source attribute lets us style remarks-derived
   tags slightly differently if we ever want to tone them down (the
   structured ones come straight from MLS feature lists; the remarks
   ones are interpretive). */
.highlight-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.highlight-chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  background: var(--color-bg-alt, #f3f6fa);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text, #1a2330);
  line-height: 1.2;
  overflow: hidden;
}

.highlight-chip__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  color: inherit;
  text-decoration: none;
}

.highlight-chip__label:hover {
  background: rgba(0, 0, 0, 0.04);
}

.highlight-chip__label i {
  color: var(--color-accent, #c9a227);
  font-size: 0.95em;
}

/* Divider between label and vote group keeps the two click targets
   visually separable so users don't accidentally hit a thumb when
   they meant to filter. */
.highlight-chip__vote {
  display: inline-flex;
  border-left: 1px solid var(--color-border);
}

.highlight-chip__thumb {
  background: transparent;
  border: 0;
  padding: 0 8px;
  cursor: pointer;
  color: var(--color-text-muted, #6b7785);
  font-size: 0.95em;
  display: inline-flex;
  align-items: center;
  transition: color 120ms ease, background 120ms ease;
}

.highlight-chip__thumb:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text, #1a2330);
}

.highlight-chip__thumb--up.is-active {
  color: var(--color-success, #1f8a4c);
}

.highlight-chip__thumb--down.is-active {
  color: var(--color-danger, #c0392b);
}

.highlight-chip__thumb + .highlight-chip__thumb {
  border-left: 1px solid var(--color-border);
}

.listing-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

/* Property Details single column on phones — the two-column grid
   gives narrow per-column widths that label/value pairs end up
   wrapping awkwardly on. Stack them. */
@media (max-width: 575px) {
  .listing-features {
    grid-template-columns: 1fr;
  }
}

.listing-feature {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.listing-feature-label {
  color: var(--color-muted);
  min-width: 120px;
}

.listing-feature-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

/* Sidebar (listing detail) */
.listing-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.sidebar-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.sidebar-card h4 {
  margin-bottom: var(--space-md);
}

/* Agent Card (sidebar) */
.agent-sidebar-card {
  text-align: center;
}

.agent-sidebar-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--space-sm);
}

.agent-sidebar-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.agent-sidebar-title {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* Listing Contact Card */
.contact-owner-card {
  text-align: center;
}

.contact-owner-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--space-sm);
}

.contact-owner-logo {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto var(--space-sm);
}

.contact-owner-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.contact-owner-title {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: 2px;
}

.contact-owner-actions {
  margin-top: var(--space-md);
}

.contact-team-leads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.contact-lead {
  text-align: center;
  font-size: var(--font-size-xs);
}

.contact-lead img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: 2px;
}

.contact-lead-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
  color: var(--color-muted);
}

.contact-selection {
  margin-bottom: var(--space-md);
}

.contact-selection-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
}

.contact-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  cursor: pointer;
}

.contact-option:last-child {
  margin-bottom: 0;
}

.contact-option input {
  accent-color: var(--color-primary);
}

.contact-option-body {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.contact-option-body img {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.contact-option-placeholder {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.contact-option-text {
  display: flex;
  flex-direction: column;
}

.contact-option-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.contact-option-role {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Affordability Estimate */
.affordability-card .affordability-total {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  text-align: center;
  margin-bottom: var(--space-md);
}

.affordability-card .affordability-label {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}

.affordability-breakdown {
  font-size: var(--font-size-sm);
}

.affordability-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.affordability-row:last-child {
  border-bottom: none;
}

.affordability-controls {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.affordability-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.affordability-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
}

.affordability-slider-header label {
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

.affordability-slider-value {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.affordability-slider {
  width: 100%;
  height: 6px;
  appearance: none;
  background: var(--color-border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.affordability-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

.affordability-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

.affordability-select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg);
  color: var(--color-body);
  cursor: pointer;
}

/* ---- Map ---- */
.listing-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 300px;
  background: var(--color-bg-gray);
}

/* ---- Gallery Lightbox ---- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  /* iOS Safari ignores body{overflow:hidden} for touchmove — the
     gesture chains through a fixed overlay and scrolls the page,
     which steals swipe-nav from the lightbox. `touch-action:none`
     tells the browser to perform no native scroll/zoom on touches
     over the overlay, so our touchstart/touchend swipe handler gets
     a clean signal. `overscroll-behavior:contain` is a belt-and-
     suspenders against any future scroll bleed. */
  touch-action: none;
  overscroll-behavior: contain;
}

.lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

/* 3D-tour iframe slide — same outer footprint as the photo, but the
   provider's UI fills the entire frame so we don't object-fit it. */
.lightbox-content .lightbox-tour {
  width: 90vw;
  height: 85vh;
  max-width: 1600px;
  border: 0;
  background: #000;
  border-radius: var(--radius-md, 6px);
}
.lightbox-content .lightbox-tour[hidden] { display: none; }
.lightbox-content img[hidden] { display: none; }

@supports (view-transition-name: test) {
  .lightbox-overlay {
    transition: none;
  }
}

.lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev { left: var(--space-md); }
.lightbox-next { right: var(--space-md); }

.lightbox-counter {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-sm);
}

/* ---- MLS Disclaimer Bar ---- */
.mls-disclaimer-bar {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.mls-disclaimer-bar p {
  margin: 0.25rem 0 0;
  line-height: 1.4;
}

.mls-disclaimer-logo {
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* ---- Map Legend Dots ---- */
.map-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  margin-right: var(--space-xs);
  vertical-align: middle;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.map-dot-blue   { background: #2563eb; }
.map-dot-purple { background: #7c3aed; }
.map-dot-green  { background: #16a34a; }

/* ---- Sidebar Similar Listings ---- */
.sidebar-similar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-similar-card {
  display: flex;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.sidebar-similar-card:hover {
  background: var(--color-bg-alt);
}

.sidebar-similar-photo {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-gray);
}

.sidebar-similar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-similar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--font-size-lg);
}

.sidebar-similar-info {
  flex: 1;
  min-width: 0;
}

.sidebar-similar-price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  font-size: var(--font-size-sm);
}

.sidebar-similar-meta {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.sidebar-similar-addr {
  font-size: var(--font-size-xs);
  color: var(--color-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Tour Preview (clickable image → lightbox) ---- */
.tour-preview {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background: #111;
}

.tour-preview:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.tour-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.tour-preview:hover .tour-preview-img {
  transform: scale(1.03);
}

.tour-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: rgba(255, 255, 255, 0.3);
  font-size: 4rem;
}

.tour-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  transition: background var(--transition-base);
}

.tour-preview-overlay i {
  font-size: 2.5rem;
}

.tour-preview:hover .tour-preview-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* ---- Tour Lightbox (Giraffe360/Matterport) ---- */
.tour-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.tour-lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}

@supports (view-transition-name: test) {
  .tour-lightbox-overlay {
    transition: none;
    opacity: 1;
    visibility: visible;
  }
}

.tour-lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background var(--transition-fast);
}

.tour-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tour-lightbox-iframe {
  width: 90vw;
  height: 90vh;
  border: none;
  border-radius: var(--radius-lg);
  transition: opacity var(--transition-base);
}

/* While the provider iframe is fetching, hide it so the tinted dark
   overlay reads as "loading" with the spinner on top, rather than a
   white iframe placeholder pop-in. */
.tour-lightbox-iframe.is-loading {
  opacity: 0;
}

.tour-lightbox-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  color: #fff;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.tour-lightbox-loading.is-hidden {
  opacity: 0;
}

.tour-lightbox-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kpdd-tour-spin 0.9s linear infinite;
}

.tour-lightbox-loading-label {
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  opacity: 0.85;
}

@keyframes kpdd-tour-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tour-lightbox-spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.6);
  }
}

@media (max-width: 768px) {
  .tour-lightbox-iframe {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .tour-lightbox-close {
    top: var(--space-sm);
    right: var(--space-sm);
  }
}

/* ---- Map / Street View Lightbox (kpdd-map dialogs) ----
   <dialog> in the browser's top layer. Inline styles in the JS handle
   sizing; this rule just paints the backdrop. */
.kpdd-map-lightbox::backdrop,
.kpdd-streetview-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

/* ---- Open House Cards ---- */
.oh-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.oh-card {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: box-shadow var(--transition-fast);
  /* No `overflow: hidden` — it would clip the calendar dropdown
     popover. The date-block (below) carries its own border-radius on
     the left side so the blue background still respects the card's
     rounded corners. */
  position: relative;
}

.oh-card:hover {
  box-shadow: var(--shadow-md);
}

.oh-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary);
  color: #fff;
  min-width: 80px;
  text-align: center;
  line-height: 1.1;
  /* Match the card's rounded corners on the left side — replaces the
     `overflow: hidden` clip that used to do this work on the parent
     (the parent now lets the calendar dropdown break out). The right
     side stays square since this block is flush with the .oh-info
     panel next to it. */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.oh-day-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.oh-day-num {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin: 2px 0;
}

.oh-month {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.oh-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md);
  gap: var(--space-xs);
  flex: 1;
}

/* Small chip that replaces the section h3 — labels the card as an
   Open House so the date block alone doesn't have to carry the
   meaning. Sits flush-top inside oh-info. */
.oh-title-chip {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary, #012169);
  color: #fff;
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oh-time {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.oh-time i {
  color: var(--color-primary);
  font-size: 0.9em;
}

.oh-remarks {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.4;
}

.oh-host {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.oh-host a {
  color: var(--color-primary);
  text-decoration: none;
}

.oh-host a:hover {
  text-decoration: underline;
}

.oh-host-photo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.oh-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.oh-cal-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 575px) {
  .oh-date-block {
    min-width: 64px;
    padding: var(--space-sm) var(--space-md);
  }

  .oh-day-num {
    font-size: var(--font-size-2xl);
  }
}

/* ---- Neighborhood Context Block ---- */
.neighborhood-context {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.nc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.nc-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.nc-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.nc-link:hover { text-decoration: underline; }

.nc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.nc-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.nc-card-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  line-height: 1.2;
}

.nc-card-label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-xs);
}

.nc-card-extra {
  font-size: var(--font-size-xs);
  margin-top: var(--space-xs);
  color: var(--color-muted);
}

@media (max-width: 768px) {
  .nc-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .nc-header { flex-direction: column; }
  .neighborhood-context { padding: var(--space-md); }
}

/* ---- Listing Action Buttons (save, share, alert) ---- */
.listing-action-btns {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.listing-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-body);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.listing-action-btn:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-muted);
}

/* Pressed/loading state — set by JS while async work runs (clipboard,
   navigator.share). Gives a 1-frame visual acknowledgement that the
   click registered, before the action resolves. */
.listing-action-btn.is-pressed,
.listing-action-btn[aria-busy="true"] {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
  transform: scale(0.97);
  transition: transform 80ms ease-out, background var(--transition-fast), border-color var(--transition-fast);
}

.listing-action-btn i {
  font-size: 1em;
}

/* ---- Tour CTA Banner ---- */
.listing-tour-cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}

.listing-tour-cta > i {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  flex-shrink: 0;
}

.listing-tour-cta > div {
  flex: 1;
  min-width: 0;
}

.listing-tour-cta strong {
  display: block;
  color: var(--color-heading);
}

.listing-tour-cta span {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.listing-tour-cta .btn {
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .listing-tour-cta {
    flex-wrap: wrap;
  }
  .listing-tour-cta .btn {
    width: 100%;
  }

  /* On phones, drop the action-btns row BELOW the price instead of
     squeezing 4 buttons to the right of "$107,900" — the previous
     layout produced a 2×2 button grid floating to the right that
     looked cramped and ate visual real estate from the price. */
  .listing-detail-price-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .listing-detail-price {
    width: 100%;
  }
  .listing-action-btns {
    flex-wrap: wrap;
    width: 100%;
  }
  /* Icon-only on phone — the labels (Save / Compare / Price Alert /
     Share) were the source of the overflow. Icon alone is enough cue
     (heart = save, split = compare, bell = alert, share = share).
     Both .listing-action-btn AND the .fav-btn-lg variant collapse since
     they share the action row. */
  .listing-action-btns .listing-action-btn,
  .listing-action-btns .fav-btn-lg {
    padding: var(--space-xs) var(--space-sm);
    flex: 0 0 auto;
  }
  .listing-action-btns .listing-action-btn span,
  .listing-action-btns .fav-btn-lg span {
    display: none;
  }
}

.listing-action-btn.subscribed {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* ---- Alert Preference Prompt ---- */
.alert-pref-prompt {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-dropdown);
  padding-top: var(--space-xs);
}

.alert-pref-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
  min-width: 280px;
  max-width: 340px;
}

.alert-pref-card h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-base);
}

.alert-pref-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1;
}

.alert-pref-options {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.alert-pref-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.alert-pref-option:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.alert-pref-option i {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

.save-search-notify-prompt {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  padding-top: var(--space-xs);
}

/* ---- Favorites Alert Toggles ---- */
.fav-card-wrap {
  position: relative;
}

.fav-alert-toggle {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
}

.fav-alert-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px var(--space-xs);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.fav-alert-label:hover {
  border-color: var(--color-primary);
}

.fav-alert-check {
  accent-color: var(--color-primary);
}

/* ---- Saved Search Cards ---- */
.saved-search-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.saved-search-info {
  flex: 1;
  min-width: 0;
}

.saved-search-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.saved-search-sms-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.saved-search-sms-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--color-muted);
}

.saved-search-sms-toggle input:checked + i {
  color: var(--color-primary);
}

@media (max-width: 575px) {
  .saved-search-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .saved-search-actions {
    flex-wrap: wrap;
  }
}

/* ---- Notification Bell ---- */
kpdd-notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

kpdd-notification-bell {
  position: relative;
  display: inline-block;
}

.notif-bell-btn {
  background: none;
  border: none;
  color: var(--color-body);
  font-size: 1.25rem;
  cursor: pointer;
  position: relative;
  padding: var(--space-xs);
  line-height: 1;
  transition: color var(--transition-fast);
}

.notif-bell-btn:hover {
  color: var(--color-primary);
}

.notif-bell-badge {
  position: absolute;
  top: 0;
  right: -2px;
  background: #dc2626;
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: var(--radius-full);
  padding: 0 3px;
}

.notif-bell-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 9999;
  width: 360px;
  max-height: 480px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.notif-bell-dropdown:not([hidden]) {
  display: flex;
}

.notif-bell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.notif-bell-mark-all {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: 0;
}

.notif-bell-mark-all:hover {
  text-decoration: underline;
}

.notif-bell-list {
  overflow-y: auto;
  flex: 1;
}

.notif-bell-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.notif-bell-item:last-child {
  border-bottom: none;
}

.notif-bell-item:hover {
  background: var(--color-bg-alt);
}

.notif-bell-item.unread {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.notif-bell-item > i {
  color: var(--color-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-bell-item-body {
  flex: 1;
  min-width: 0;
}

.notif-bell-item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  line-height: 1.3;
}

.notif-bell-item-text {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-bell-item-time {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 2px;
}

.notif-bell-loading,
.notif-bell-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.notif-bell-loading i {
  animation: spin 1s linear infinite;
  font-size: 1.2rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .notif-bell-dropdown {
    width: calc(100vw - 2rem);
    right: -1rem;
  }
}

/* ---- Open House RSVP Button ---- */
.oh-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  flex-wrap: wrap;
}

.oh-rsvp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.oh-rsvp-btn:hover {
  background: var(--color-primary-dark, #1d4ed8);
}

.oh-rsvp-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.oh-rsvp-confirmed {
  background: var(--color-success, #16a34a);
  border-color: var(--color-success, #16a34a);
}

.oh-rsvp-confirmed:hover {
  background: var(--color-success, #16a34a);
}

.oh-cal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--transition-fast);
}

.oh-cal-link:hover {
  color: var(--color-primary-dark, #1d4ed8);
  text-decoration: underline;
}

/* ----- Calendar dropdown (<details> disclosure) -----
   Native <details>/<summary> for the dropdown so we get keyboard +
   click-outside behavior for free. The default disclosure triangle
   is hidden in favor of an inline chevron icon. */
.oh-cal {
  position: relative;
  display: inline-block;
}

.oh-cal-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;            /* Hide native triangle in WebKit */
  user-select: none;
}
.oh-cal-summary::-webkit-details-marker { display: none; }  /* Safari */
.oh-cal-summary::marker { display: none; }                  /* Firefox */

.oh-cal-summary:hover {
  color: var(--color-primary-dark, #1d4ed8);
}

.oh-cal-summary::after {
  content: '\F282';            /* bi-chevron-down (Bootstrap Icons font) */
  font-family: 'bootstrap-icons';
  font-size: 0.75em;
  margin-left: 2px;
  transition: transform 0.15s;
}

.oh-cal[open] .oh-cal-summary::after {
  transform: rotate(180deg);
}

.oh-cal-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs) 0;
  /* Two-column on viewports tight enough that the menu would fall off
     the right edge of the action row. Otherwise stays single column. */
  display: flex;
  flex-direction: column;
}

.oh-cal-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-body);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.oh-cal-option:hover,
.oh-cal-option:focus {
  background: var(--color-bg-alt, #f1f5f9);
  color: var(--color-primary);
  text-decoration: none;
  outline: none;
}

.oh-cal-option i {
  width: 1em;
  text-align: center;
  color: var(--color-muted);
}

.oh-cal-option:hover i {
  color: var(--color-primary);
}

/* Survey link — only renders when an open-house QR is provisioned + active.
   Same shape as .oh-cal-link with a gold accent so it visually pops as
   the action that exists during the event window (not the calendar /
   RSVP affordances which fire ahead of time). */
.oh-survey-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--transition-fast);
}

.oh-survey-link:hover {
  color: var(--color-primary-dark, #1d4ed8);
  text-decoration: underline;
}

/* Inline placement under the host row (SSR markup uses .oh-survey
   wrapper) — keeps it visually grouped with the time + remarks rather
   than floating with the action buttons. */
.oh-survey {
  margin-top: var(--space-xs);
}

/* ---- Compare Page ---- */
.compare-page {
  padding: var(--space-xl) 0;
}

.compare-empty {
  text-align: center;
  padding: var(--space-3xl) 0;
  color: var(--color-muted);
}

.compare-empty i {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-md);
}

.compare-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.compare-toolbar-actions {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.compare-grid {
  display: grid;
  gap: 0;
  overflow-x: auto;
}

.compare-grid[data-cols="2"] { grid-template-columns: 200px repeat(2, 1fr); }
.compare-grid[data-cols="3"] { grid-template-columns: 200px repeat(3, 1fr); }
.compare-grid[data-cols="4"] { grid-template-columns: 200px repeat(4, 1fr); }
.compare-grid[data-cols="5"] { grid-template-columns: 200px repeat(5, 1fr); }
.compare-grid[data-cols="6"] { grid-template-columns: 200px repeat(6, 1fr); }

.compare-header-cell {
  padding: var(--space-md);
  text-align: center;
  border-bottom: 2px solid var(--color-border);
  position: relative;
}

.compare-photo-wrap {
  position: relative;
  margin-bottom: var(--space-sm);
}

.compare-photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.compare-photo-empty {
  aspect-ratio: 16 / 11;
  background: var(--color-bg-gray);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 2rem;
}

.compare-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.compare-photo-wrap:hover .compare-photo-nav {
  opacity: 1;
}

.compare-photo-prev { left: var(--space-xs); }
.compare-photo-next { right: var(--space-xs); }

.compare-photo-counter {
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-xs);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.625rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.compare-header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.compare-header-address {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.compare-header-address:hover {
  color: var(--color-primary);
}

.compare-header-cell .compare-remove {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.compare-map-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

.compare-fav {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 2;
}

.compare-fav .fav-btn {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #fff;
  padding: 4px 6px;
  border-radius: var(--radius-full);
  line-height: 1;
}

.compare-fav .fav-btn.favorited {
  color: #ef4444;
  background: rgba(0, 0, 0, 0.5);
}

.compare-label {
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.compare-value {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-value.compare-best {
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  font-weight: var(--font-weight-semibold);
}

.compare-corner {
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg);
}

/* Notes row */
.compare-note-cell {
  padding: var(--space-xs);
}

.compare-note {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  font-size: var(--font-size-xs);
  resize: vertical;
  font-family: inherit;
}

.compare-note:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.compare-note:disabled {
  background: var(--color-bg-alt);
  cursor: not-allowed;
}

/* Map section */
.compare-map-section,
.compare-drive-section {
  margin-top: var(--space-xl);
}

.compare-section-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.compare-map {
  width: 100%;
  height: 350px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* Drive times */
.compare-drive-login,
.compare-drive-empty {
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.compare-add-location {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.compare-drive-table-wrap {
  overflow-x: auto;
}

.compare-drive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.compare-drive-table th,
.compare-drive-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.compare-drive-table th {
  background: var(--color-bg-alt);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
}

.compare-drive-table td:first-child,
.compare-drive-table th:first-child {
  text-align: left;
}

@media (max-width: 768px) {
  .compare-grid {
    font-size: var(--font-size-xs);
  }
  .compare-grid[data-cols="2"] { grid-template-columns: 140px repeat(2, 1fr); }
  .compare-grid[data-cols="3"] { grid-template-columns: 140px repeat(3, 1fr); }
  .compare-grid[data-cols="4"] { grid-template-columns: 140px repeat(4, minmax(120px, 1fr)); }
  .compare-grid[data-cols="5"] { grid-template-columns: 140px repeat(5, minmax(120px, 1fr)); }
  .compare-grid[data-cols="6"] { grid-template-columns: 140px repeat(6, minmax(120px, 1fr)); }
  .compare-toolbar { flex-direction: column; align-items: flex-start; }
  .compare-map { height: 250px; }
}

/* ---- Compare Bar (floating) ---- */
kpdd-compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
}

.compare-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  max-width: 720px;
  margin: 0 auto var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-heading);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
}

.compare-bar-previews {
  display: flex;
  gap: var(--space-sm);
  flex: 1;
  overflow-x: auto;
  min-width: 0;
}

.compare-bar-preview {
  flex-shrink: 0;
  width: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  text-align: center;
}

.compare-bar-thumb {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

.compare-bar-thumb-empty {
  width: 100%;
  height: 64px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Loading-state shimmer for the compare-bar preview tile while the
   listings/by-keys fetch is in flight. Reads as "we're loading"
   rather than "broken thumb." */
.compare-bar-preview--loading {
  pointer-events: none;
}

.compare-bar-thumb-shimmer {
  width: 100%;
  height: 64px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 100%);
  background-size: 200% 100%;
  animation: kpdd-compare-shimmer 1.4s ease-in-out infinite;
}

.compare-bar-line-shimmer {
  height: 8px;
  margin: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 100%);
  background-size: 200% 100%;
  animation: kpdd-compare-shimmer 1.4s ease-in-out infinite;
}

.compare-bar-line-shimmer--short {
  width: 60%;
}

@keyframes kpdd-compare-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-bar-thumb-shimmer,
  .compare-bar-line-shimmer {
    animation: none;
  }
}

.compare-bar-addr {
  font-size: 0.5625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px 0;
  line-height: 1.3;
}

.compare-bar-price {
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  padding: 0 4px 3px;
  line-height: 1.3;
}

.compare-bar-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.625rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.compare-bar-preview:hover .compare-bar-remove {
  opacity: 1;
}

.compare-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.compare-bar-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: var(--font-size-xs);
}

.compare-bar-clear:hover {
  color: #fff;
}

.compare-bar-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-xs);
}

/* ---- Compare Checkbox on Listing Cards ---- */
.compare-check-label {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition-fast);
}

.compare-check-label:hover {
  background: rgba(0, 0, 0, 0.8);
}

.compare-check {
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
}

/* ---- Listing Notes Section ---- */
.listing-notes-section {
  margin-bottom: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.listing-notes-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  color: var(--color-heading);
  font-size: var(--font-size-sm);
}

.listing-note {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  resize: vertical;
  font-family: inherit;
  background: var(--color-bg);
}

.listing-note:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.listing-note-status {
  font-size: var(--font-size-xs);
  color: var(--color-success, #16a34a);
  min-height: 1.2em;
  margin-top: var(--space-xs);
}

/* ---- Compare Similar Properties ---- */
.compare-similar-section {
  margin-top: var(--space-xl);
}

.compare-similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .compare-similar-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .compare-similar-grid { grid-template-columns: 1fr; }
}

/* ---- Previous / Next Navigation ---- */
.listing-prev-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
}

.listing-prev-next a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.listing-prev-next a:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

.listing-prev-next-spacer {
  flex: 1;
}

.listing-prev-next-counter {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

/* ---- Affordability Calculator (standalone page) ---- */
.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  padding: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .calc-layout { grid-template-columns: 1fr; }
}

.calc-inputs h3 {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-lg);
}

.calc-field {
  margin-bottom: var(--space-md);
}

.calc-field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  margin-bottom: 4px;
}

.calc-field label small {
  font-weight: var(--font-weight-normal);
  color: var(--color-muted);
}

.calc-field select {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg);
}

.calc-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.calc-input-wrap input[type="number"] {
  flex: 1;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

.calc-prefix,
.calc-suffix {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
}

.calc-slider {
  flex: 1;
  appearance: none;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  cursor: pointer;
}

.calc-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.calc-slider-label {
  min-width: 40px;
  text-align: right;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.calc-rate-presets {
  display: flex;
  gap: var(--space-xs);
  margin-top: 4px;
  flex-wrap: wrap;
}

.calc-rate-btn {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.calc-rate-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.calc-rate-source {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
}

.calc-results {
  position: sticky;
  top: 100px;
  align-self: start;
}

.calc-result-hero {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.calc-result-label {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calc-result-price {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: var(--space-xs) 0;
}

.calc-result-sublabel {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.calc-breakdown {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.calc-breakdown h4 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-base);
}

.calc-breakdown-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.calc-breakdown-bar > div {
  transition: width var(--transition-base);
}

.calc-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.calc-breakdown-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  font-size: var(--font-size-sm);
}

.calc-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

.calc-down-summary {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-align: center;
}

.calc-disclaimer {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.4;
}

/* ---- Three-Button Contact CTA Card ---- */
.contact-cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-cta-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-weight: var(--font-weight-semibold);
}

.contact-cta-offer {
  border-style: dashed;
  color: var(--color-success, #16a34a);
  border-color: var(--color-success, #16a34a);
}

.contact-cta-offer:hover {
  background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
}

/* ---- Tour Schedule Fields ---- */
.tour-schedule-fields {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-bg-alt, #f8f9fa);
}

.tour-schedule-fields[hidden] { display: none; }

.tour-schedule-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.tour-date-row {
  display: flex;
  gap: var(--space-sm);
}

.form-label-sm {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

@media (max-width: 480px) {
  .tour-date-row {
    flex-direction: column;
  }
}

/* ---- Comparable Sales Grid ---- */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.comp-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.comp-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.comp-card-img {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.comp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comp-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2rem;
  color: var(--color-muted);
}

.comp-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-sold-bg, #fee2e2);
  color: var(--color-sold, #dc2626);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.comp-card-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.comp-card-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.comp-card-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.comp-delta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.comp-delta-up {
  color: var(--color-success, #16a34a);
  background: color-mix(in srgb, var(--color-success, #16a34a) 10%, transparent);
}

.comp-delta-down {
  color: var(--color-sold, #dc2626);
  background: color-mix(in srgb, var(--color-sold, #dc2626) 10%, transparent);
}

.comp-card-meta {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: 2px;
}

.comp-card-address {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comp-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.comp-card-stats i {
  font-size: 0.7em;
  margin-right: 2px;
}

@media (max-width: 575px) {
  .comp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  .comp-card-stats {
    display: none;
  }
}

/* Property Watch Card */
.property-watch-card {
  text-align: center;
}
.property-watch-card h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.property-watch-card p {
  margin-bottom: var(--space-md);
}
.property-watch-btn {
  width: 100%;
}
.property-watch-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---- Property Lifecycle: Phase 1 — Just Sold Banner ---- */
.just-sold-banner {
  background: linear-gradient(135deg, var(--color-bg-gray) 0%, #fff 100%);
  border: 2px solid var(--color-primary, #1a365d);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.just-sold-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.badge-lg {
  font-size: var(--font-size-base);
  padding: var(--space-xs) var(--space-md);
}
.just-sold-days {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.just-sold-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.just-sold-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}
.just-sold-list-price {
  font-size: var(--font-size-lg);
  color: var(--color-muted);
  text-decoration: line-through;
}
.just-sold-ratio {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.just-sold-agent {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-white, #fff);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.just-sold-agent-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.just-sold-agent-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.just-sold-agent-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}
.just-sold-cta {
  text-align: center;
}
.just-sold-cta-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
}
.just-sold-cta .btn {
  margin: 0 var(--space-xs);
}

/* Phase 1: Featured agent sidebar card */
.sidebar-card--featured-agent {
  border: 2px solid var(--color-primary, #1a365d);
  background: linear-gradient(180deg, var(--color-primary, #1a365d) 0%, var(--color-primary-dark, #0f2440) 100%);
  color: #fff;
}
.featured-agent-card {
  text-align: center;
  padding: var(--space-md) 0;
}
.featured-agent-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
  margin-bottom: var(--space-sm);
}
.featured-agent-photo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-sm);
}
.sidebar-card--featured-agent h4 {
  color: #fff;
  margin-bottom: var(--space-xs);
}
.sidebar-card--featured-agent .text-muted {
  color: rgba(255,255,255,0.7) !important;
}
.sidebar-card--featured-agent .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.sidebar-card--featured-agent .btn-outline:hover {
  background: rgba(255,255,255,0.1);
}
.sidebar-card--featured-agent .btn-primary {
  background: #fff;
  color: var(--color-primary, #1a365d);
}
.sidebar-card--featured-agent .btn-primary:hover {
  background: rgba(255,255,255,0.9);
}

/* ---- Phase 3: Evergreen Record ---- */
.evergreen-record {
  background: var(--color-surface-alt, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.evergreen-record-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.badge-evergreen {
  background: var(--color-muted-bg, #e2e8f0);
  color: var(--color-text-secondary, #64748b);
  padding: var(--space-xxs, 2px) var(--space-xs);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.evergreen-record-sold {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary, #64748b);
}
.evergreen-record-stats {
  margin-bottom: var(--space-md);
}
.evergreen-record-stats h4 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary, #64748b);
  margin-bottom: var(--space-sm);
}
.evergreen-record-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
}
.evergreen-kpi {
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-sm) var(--space-md);
}
.evergreen-kpi-value {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--color-text-primary, #1e293b);
}
.evergreen-kpi-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary, #64748b);
  margin-top: 2px;
}
.evergreen-record-comps {
  margin-top: var(--space-md);
}
.evergreen-record-comps h4 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary, #64748b);
  margin-bottom: var(--space-sm);
}
.evergreen-comps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}
.evergreen-comp-card {
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.evergreen-comp-card:hover {
  border-color: var(--color-primary, #1a365d);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.evergreen-comp-price {
  font-weight: 700;
  font-size: var(--font-size-base);
}
.evergreen-comp-addr {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evergreen-comp-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary, #64748b);
}

/* Phase 3: Evergreen sidebar CTA */
.sidebar-card--evergreen-cta {
  background: var(--color-surface-alt, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
}

/* ─── Consolidated Listing Contact Card ─────────────────────────────────
 * One sidebar card with three regions stacked inside: agent hero →
 * intent chips → adaptive form. Replaces the old three stacked
 * .contact-cta-card / .contact-owner-card / .contact-form-card. Hairline
 * dividers between regions, no margin gaps, so it reads as one
 * component with three jobs.
 */
.contact-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.contact-card > * + * {
  border-top: 1px solid var(--color-border, #e4e9f0);
}

/* Hero region */
.contact-card__hero {
  padding: var(--space-md, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 6px);
}

/* IDX listing-attribution block — required by MLS rules on non-KPDD
   listings (CBOR 20.3.3, EABOR 18.2.12, LCAR 18.2.12). Sits under the
   KPDD hero, visually quieter than the hero but readable.

   Row layout: agent + brokerage stacked on the left, an icon "message"
   button on the right that opens the lead-capture modal. The firm
   phone/email is intentionally not surfaced inline — see comment on
   listingAttributionBlock() for the compliance trade-off. */
.listing-attribution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 12px);
  padding: var(--space-sm, 12px) var(--space-md, 16px);
  background: var(--color-bg-alt, #f8fafc);
  font-size: 0.875rem;
}
.listing-attribution__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.listing-attribution__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-muted, #64748b);
  text-transform: uppercase;
}
.listing-attribution__agent {
  font-weight: 600;
  color: var(--color-text, #1e293b);
}
.listing-attribution__office,
.listing-attribution__contact-info {
  color: var(--color-muted, #64748b);
}

/* Icon "message" button on the right side of the attribution row.
   Hydrated by <kpdd-listing-firm-modal> to call dialog.showModal();
   without JS, the button is inert (the form inside the dialog is still
   posted via the page reload path if the user can open the dialog
   through any other means — but that's a corner case). */
.listing-attribution__icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border, #e4e9f0);
  background: var(--color-bg, #fff);
  color: var(--color-primary, #1a365d);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.listing-attribution__icon-btn:hover {
  background: var(--color-primary, #1a365d);
  color: #fff;
  border-color: var(--color-primary, #1a365d);
}
.listing-attribution__icon-btn .bi {
  font-size: 1rem;
  line-height: 1;
}

/* Photo variant — used for the in-house listing-agent chip on company
   listings. Same layout as the IDX "LISTED BY" attribution; the photo
   replaces the implicit gap on the left so the chip reads visually as
   "this is a person, here's how to reach them" without changing the
   eyebrow + name + office + chat-icon pattern. */
.listing-attribution--with-photo {
  /* No background tint here — chip rides above the contact card and
     should feel attached to it, not segmented off like the IDX banner. */
  background: transparent;
  border-bottom: 1px solid var(--color-border, #e4e9f0);
}
.listing-attribution__photo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt, #f3f4f6);
}
.listing-attribution__photo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted, #9ca3af);
  font-size: 18px;
}

/* Native <dialog> modal — explicit centering for browsers that don't
   apply the user-agent margin:auto when width is set. closes on backdrop
   click via the island. */
.listing-firm-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: 12px;
  padding: var(--space-md, 20px);
  width: min(440px, 92vw);
  height: fit-content;
  max-height: 92vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  background: var(--color-bg, #fff);
  color: var(--color-text, #1e293b);
}
.listing-firm-modal::backdrop {
  background: rgba(15, 23, 42, 0.5);
}
.listing-firm-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm, 10px);
  margin-bottom: var(--space-xs, 6px);
}
.listing-firm-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.listing-firm-modal__close {
  background: transparent;
  border: none;
  font-size: 1rem;
  color: var(--color-muted, #64748b);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.listing-firm-modal__close:hover {
  background: var(--color-bg-alt, #f1f5f9);
  color: var(--color-text, #1e293b);
}
.listing-firm-modal__note {
  margin: 0 0 var(--space-sm, 12px);
}

/* Side-by-side action row: [Call] [Send Message]. Both stay disabled
   until the visitor fills their info (gated by kpdd-listing-firm-modal),
   so the lead is captured before a call can be placed. */
.listing-firm-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.listing-firm-modal__actions .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.listing-firm-modal__submit:disabled,
.listing-firm-modal__call[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.listing-firm-modal__call .bi { font-size: 1rem; line-height: 1; }
/* After-hours availability note shown in place of the call button. */
.listing-firm-modal__hours {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 var(--space-sm, 12px);
}

.listing-firm-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 10px);
}
.listing-firm-modal__submit {
  margin-top: 4px;
}
.listing-firm-modal__submit[aria-busy="true"] { cursor: progress; }
.listing-firm-modal__followup-note {
  margin: var(--space-sm, 10px) 0 0;
  line-height: 1.4;
}
.contact-card__hero[data-attribution="my-agent"] {
  background: linear-gradient(180deg, rgba(26,54,93,0.04) 0%, transparent 100%);
}

/* Dual-agent picker — radio-style choice between catfish (primary)
   and the in-house listing agent (secondary) on company listings.
   See kpdd-agent-picker.js for selection behavior. */
.contact-card__picker-dual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--space-md);
}
.agent-tile {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--color-border, #d1d5db);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font: inherit;
  color: inherit;
}
.agent-tile:hover {
  border-color: var(--color-primary, #1a365d);
}
.agent-tile:focus-visible {
  outline: 2px solid var(--color-primary, #1a365d);
  outline-offset: 2px;
}
.agent-tile.is-selected {
  border-color: var(--color-primary, #1a365d);
  background: rgba(26, 54, 93, 0.04);
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.15);
}
.agent-tile__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-bg-alt, #f3f4f6);
}
.agent-tile__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted, #9ca3af);
  font-size: 20px;
}
.agent-tile__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.agent-tile__role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-muted, #6b7280);
}
.agent-tile.is-selected .agent-tile__role {
  color: var(--color-primary, #1a365d);
}
.agent-tile__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-tile__phone {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
}
.contact-card__hero-row {
  display: flex;
  gap: var(--space-md, 14px);
  align-items: center;
}
.contact-card__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-bg-alt, #f0f4f8);
}
.contact-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--color-muted, #6b7280);
}
/* Logo variant for the company-routing card — keep the round footprint
   but contain the brand mark instead of cropping it. */
.contact-card__photo--logo {
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  width: 72px;
  height: 72px;
}
.contact-card__hero-body { min-width: 0; flex: 1; }
.contact-card__name {
  margin: 0;
  font-size: var(--font-size-lg, 1.05rem);
  font-weight: 700;
  color: var(--color-heading, #0f172a);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-card__name-link {
  color: inherit;
  text-decoration: none;
}
.contact-card__name-link:hover {
  color: var(--color-primary, #1a365d);
  text-decoration: underline;
}
.contact-card__photo-link {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  transition: opacity 0.12s;
}
.contact-card__photo-link:hover { opacity: 0.85; }
.contact-card__role { margin: 2px 0 0; }
.contact-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary, #1a365d);
  margin-bottom: 2px;
}
.contact-card__microcopy {
  margin: var(--space-xs, 6px) 0 0;
  line-height: 1.4;
}
.contact-card__hero-actions {
  display: flex;
  gap: var(--space-sm, 10px);
  margin-top: var(--space-sm, 10px);
  flex-wrap: wrap;
}
.contact-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  color: var(--color-primary, #1a365d);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.contact-card__phone:hover { text-decoration: underline; }
.contact-card__phone i { font-size: 0.9em; }

.contact-card__profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-sm, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-primary, #1a365d);
  text-decoration: none;
}
.contact-card__profile-link:hover { text-decoration: underline; }

/* After-hours phone replacement — two lines: availability above, a
   callback nudge pointing to the form below. Same inline rhythm as the
   open-hours phone block (icon + text), no panel, no border. */
.contact-card__phone--closed {
  align-items: flex-start;
  gap: 8px;
  font-weight: 500;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-muted, #6b7280);
  cursor: default;
}
.contact-card__phone--closed:hover { text-decoration: none; }
.contact-card__phone--closed > i {
  margin-top: 2px;
  font-size: 1rem;
  flex-shrink: 0;
}
.contact-card__phone-closed-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}
.contact-card__phone-closed-text strong {
  font-weight: 700;
  color: var(--color-heading, #0f172a);
}

/* Tabs region — segmented control */
.contact-card__tabs,
.contact-card__chips /* legacy class kept for back-compat */ {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--color-bg-alt, #f0f4f8);
}
.contact-card__tab,
.contact-card__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-sm, 10px) var(--space-xs, 6px);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: var(--font-size-xs, 0.78rem);
  font-weight: 600;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.contact-card__tab i,
.contact-card__chip i { font-size: 1.1rem; }
.contact-card__tab:hover,
.contact-card__chip:hover {
  color: var(--color-heading, #0f172a);
  background: rgba(0,0,0,0.02);
}
.contact-card__tab.is-active,
.contact-card__chip.is-active {
  color: var(--color-primary, #1a365d);
  border-bottom-color: var(--color-primary, #1a365d);
  background: var(--color-bg, #fff);
}

/* Tab panels — only the active one is visible. The selectors target
   both the new `data-intent-panel` blocks and the legacy
   `data-intent-fields` blocks so existing pages don't regress. */
.contact-card__panel,
.contact-card__intent-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 10px);
}
.contact-card__panel[hidden],
.contact-card__intent-fields[hidden] { display: none; }
.contact-card__panel-prompt {
  margin: 0;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
  color: var(--color-heading, #0f172a);
}

/* Common fields wrapper — Tour step 1 hides this entirely so the
   wizard isn't competing visually with the date / type selection. */
[data-common-fields][hidden] { display: none; }

/* Tour wizard — date pills */
.contact-card__date-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs, 6px);
}
.date-pill {
  position: relative;
  cursor: pointer;
}
.date-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.date-pill__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-sm, 10px) var(--space-xs, 6px);
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: var(--radius-md, 6px);
  background: #fff;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.date-pill input:checked + .date-pill__body {
  border-color: var(--color-primary, #1a365d);
  background: rgba(26, 54, 93, 0.05);
  box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.12);
}
.date-pill input:focus-visible + .date-pill__body {
  outline: 2px solid var(--color-primary, #1a365d);
  outline-offset: 2px;
}
.date-pill__day {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted, #6b7280);
}
.date-pill input:checked + .date-pill__body .date-pill__day {
  color: var(--color-primary, #1a365d);
}
.date-pill__date {
  font-size: var(--font-size-sm, 0.95rem);
  font-weight: 700;
  color: var(--color-heading, #0f172a);
}

/* Tour-type pills (in-person / video) */
.contact-card__tour-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs, 6px);
}
.tour-type-pill {
  position: relative;
  cursor: pointer;
}
.tour-type-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tour-type-pill__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-sm, 10px);
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: var(--radius-md, 6px);
  background: #fff;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
  color: var(--color-heading, #0f172a);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.tour-type-pill__body i { font-size: 1.05em; color: var(--color-muted, #6b7280); }
.tour-type-pill input:checked + .tour-type-pill__body {
  border-color: var(--color-primary, #1a365d);
  background: rgba(26, 54, 93, 0.05);
  color: var(--color-primary, #1a365d);
  box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.12);
}
.tour-type-pill input:checked + .tour-type-pill__body i {
  color: var(--color-primary, #1a365d);
}

/* Wizard navigation buttons */
.contact-card__next-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-sm, 8px);
}
.contact-card__back-btn {
  background: transparent;
  border: 0;
  padding: 0 0 var(--space-xs, 6px) 0;
  color: var(--color-muted, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.contact-card__back-btn:hover { color: var(--color-primary, #1a365d); }

/* Form region */
.contact-card__form {
  padding: var(--space-md, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 10px);
}
.contact-card__form .form-group { margin: 0; }
.contact-card__form .form-control { width: 100%; font-size: var(--font-size-sm, 0.9rem); }

.contact-card__intent-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 10px);
  padding: var(--space-sm, 10px);
  background: var(--color-bg-alt, #f0f4f8);
  border-radius: var(--radius-md, 6px);
  border-left: 3px solid var(--color-primary, #1a365d);
}
.contact-card__intent-prompt {
  margin: 0;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
  color: var(--color-heading, #0f172a);
}
.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm, 10px);
}
.form-label-sm {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-muted, #6b7280);
  margin-bottom: 4px;
}

/* Preferred-agent picker */
.contact-card__picker {
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-sm, 10px);
  margin: 0;
}
.contact-card__picker-title {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted, #6b7280);
  padding: 0 4px;
}
.contact-card__picker-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 10px);
  padding: var(--space-xs, 6px) 4px;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.12s;
}
.contact-card__picker-option:hover { background: var(--color-bg-alt, #f0f4f8); }
.contact-card__picker-option input { margin: 0; }
.contact-card__picker-body {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 10px);
  flex: 1;
  min-width: 0;
}
.contact-card__picker-body img,
.contact-card__picker-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card__picker-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-card__picker-name {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-heading, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-card__picker-role {
  font-size: var(--font-size-xs, 0.7rem);
  color: var(--color-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Submit */
.contact-card__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-xs, 6px);
}

/* ── Routing agent rows ──────────────────────────────────────
   Each touring/buyer/fallback agent renders as a chinstrap-style
   row matching .listing-attribution--with-photo (same chip the
   secondary listing agent uses). Acts as a radio: click to
   highlight + assign preferredAgentProfileID; click again to
   clear. data-strip-intent on the wrapper gates per-tab
   visibility; "all" stays visible (fallback case). */
.contact-card__agent-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.contact-card__agent-rows[hidden] { display: none; }

.contact-card__agent-row {
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.contact-card__agent-row:hover {
  border-color: var(--color-primary, #012169);
  background: var(--color-bg-alt, #f8fafc);
}
.contact-card__agent-row:focus-visible {
  outline: 2px solid var(--color-primary, #012169);
  outline-offset: 2px;
}
.contact-card__agent-row-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.contact-card__agent-row-check {
  display: none;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary, #012169);
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card__agent-row:has(input:checked) {
  border-color: var(--color-primary, #012169);
  background: rgba(1, 33, 105, 0.06);
  box-shadow: 0 0 0 2px rgba(1, 33, 105, 0.18);
}
.contact-card__agent-row:has(input:checked) .contact-card__agent-row-check {
  display: inline-flex;
}

/* ── Offer wizard ─────────────────────────────────────────────
   Branching wizard inside the Offer panel. Step 1/2 use binary
   choice pills; 3a/3b host the agent autocomplete; step 4 collects
   the offer details; step 5 hands off to the common contact fields. */

.contact-card__choice-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm, 10px);
  margin: var(--space-xs, 6px) 0 var(--space-sm, 10px);
}
.choice-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-md, 14px) var(--space-sm, 10px);
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: var(--radius-md, 6px);
  background: #fff;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
  color: var(--color-heading, #0f172a);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.choice-pill i {
  font-size: 1.6em;
  color: var(--color-muted, #6b7280);
  transition: color 0.12s;
}
.choice-pill:hover {
  border-color: var(--color-primary, #1a365d);
  background: rgba(26, 54, 93, 0.04);
}
.choice-pill:hover i { color: var(--color-primary, #1a365d); }
.choice-pill:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.18);
}
.choice-pill:active { transform: translateY(1px); }

/* Discreet "Need help?" link rendered as a button. */
.contact-card__help-link {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin: 0;
  color: var(--color-muted, #6b7280);
  font-size: var(--font-size-xs, 0.8rem);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.contact-card__help-link:hover { color: var(--color-primary, #1a365d); }
.contact-card__help-link i { font-size: 0.95em; }

/* "Don't see them?" disclosure — ties the manual fallback fields
   under the autocomplete in step 3b. */
.contact-card__manual-toggle {
  margin: var(--space-xs, 6px) 0;
  font-size: var(--font-size-sm, 0.875rem);
}
.contact-card__manual-toggle > summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-muted, #6b7280);
  font-weight: 500;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.contact-card__manual-toggle > summary::-webkit-details-marker { display: none; }
.contact-card__manual-toggle > summary::before {
  content: '\f4fe'; /* bi-plus */
  font-family: 'bootstrap-icons';
  font-size: 0.95em;
}
.contact-card__manual-toggle[open] > summary::before { content: '\f2ea'; /* bi-dash */ }
.contact-card__manual-toggle > summary:hover { color: var(--color-primary, #1a365d); }
.contact-card__manual-toggle[open] {
  background: var(--color-bg-alt, #f7f9fc);
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-sm, 10px);
}
.contact-card__manual-toggle[open] > summary { padding-bottom: 6px; color: var(--color-heading, #0f172a); }
.contact-card__manual-toggle .form-group + .form-group { margin-top: var(--space-xs, 6px); }

/* ── kpdd-agent-search dropdown ──────────────────────────────── */

kpdd-agent-search {
  display: block;
}
/* Portaled to <body> with position:fixed so ancestor overflow/transform
   on the contact card can't clip it. The component sets top/left/width
   from the input's bounding rect on every scroll/resize. */
.kpdd-agent-search__dropdown {
  position: fixed;
  z-index: 1000;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border, #e4e9f0);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.kpdd-agent-search__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 10px);
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-heading, #0f172a);
}
.kpdd-agent-search__row:hover,
.kpdd-agent-search__row.is-active {
  background: rgba(26, 54, 93, 0.06);
}
.kpdd-agent-search__photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-bg-alt, #f0f4f8);
}
.kpdd-agent-search__photo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary, #1a365d);
  font-size: 0.95rem;
}
.kpdd-agent-search__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.kpdd-agent-search__name {
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kpdd-agent-search__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-primary, #1a365d);
  color: #fff;
}
.kpdd-agent-search__office {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Mobile sticky contact bar ---- */
.listing-contact-bar { display: none; }

kpdd-listing-contact-bar {
  display: contents;
}
kpdd-listing-contact-bar.is-hidden .listing-contact-bar {
  transform: translateY(110%);
  pointer-events: none;
}

@media (max-width: 991px) {
  .listing-contact-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    background: #fff;
    border: 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    font: inherit;
    text-align: left;
    color: var(--color-body, #1a1a1a);
    cursor: pointer;
    transition: transform 0.25s ease;
  }
  .listing-contact-bar__photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--color-bg-alt, #f3f4f6);
  }
  .listing-contact-bar__photo--logo {
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    padding: 4px;
  }
  .listing-contact-bar__photo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted, #6b7280);
    font-size: 22px;
  }
  .listing-contact-bar__name {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-heading, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .listing-contact-bar__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--color-primary, #003366);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
  }
  .listing-detail { padding-bottom: 80px; }
}