/* ============================================================
   Listing Popover — MLS Listing Cards for Map Polygons
   ============================================================ */

/* ---- Outer Container ---- */
.listing-popover {
  position: absolute;
  width: 320px;
  background: var(--color-white);
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 4px 8px rgba(17, 24, 39, 0.04),
    0 12px 24px rgba(17, 24, 39, 0.03);
  z-index: 1000;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition:
    opacity var(--duration-normal) ease-out,
    transform var(--duration-normal) ease-out;
}

.listing-popover--visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.listing-popover--exiting {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition:
    opacity 200ms ease-in,
    transform 200ms ease-in;
}

/* ---- Arrow (points left toward polygon) ---- */
.listing-popover-arrow {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--color-white);
  filter: drop-shadow(-2px 0 1px rgba(17, 24, 39, 0.06));
}

/* ---- Header ---- */
.listing-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-light-gray);
}

.listing-popover-header h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.listing-popover-close {
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-mid-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 150ms ease-out;
}

.listing-popover-close:hover {
  background-color: var(--color-light-gray);
}

.listing-popover-close:active {
  transform: scale(0.96);
}

/* ---- Scrollable Listing Container ---- */
.listing-popover-scroll {
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-xs);
}

.listing-popover-scroll::-webkit-scrollbar {
  width: 4px;
}

.listing-popover-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.listing-popover-scroll::-webkit-scrollbar-thumb {
  background: var(--color-light-gray);
  border-radius: 2px;
}

/* ---- Individual Listing Card ---- */
.listing-card {
  display: block;
  position: relative;
  border-radius: 4px;
  margin-bottom: var(--space-xs);
  border: 1px solid var(--color-light-gray);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) ease-out;
}

.listing-card:last-child {
  margin-bottom: 0;
}

.listing-card:hover {
  border-color: var(--color-mid-gray);
}

.listing-card:active {
  transform: scale(0.98);
}

/* ---- Card Image ---- */
.listing-card-image {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.listing-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Card Body ---- */
.listing-card-body {
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
}

/* ---- Price ---- */
.listing-card-price {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ---- Address ---- */
.listing-card-address {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin: 0 0 var(--space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Details (beds / baths / sqft) ---- */
.listing-card-details {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  color: var(--color-mid-gray);
  display: flex;
  gap: var(--space-xs);
  margin: 0;
}

/* Dots are rendered inline via JS */

/* ---- Meta (MLS#, days on market) ---- */
.listing-card-meta {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--color-mid-gray);
  margin: var(--space-xs) 0 0;
  opacity: 0.7;
}

/* ---- Footer ---- */
.listing-popover-footer {
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--color-light-gray);
  text-align: center;
}

.listing-popover-footer a {
  position: relative;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.listing-popover-footer a:hover {
  color: var(--color-accent-dark);
}

.listing-popover-footer a:active {
  transform: scale(0.98);
}

/* ============================================================
   Loading / Skeleton State
   ============================================================ */

@keyframes shimmer {
  0% { background-position: -320px 0; }
  100% { background-position: 320px 0; }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-light-gray) 25%,
    var(--color-off-white) 50%,
    var(--color-light-gray) 75%
  );
  background-size: 640px 100%;
  animation: shimmer 1.4s linear infinite;
}

.listing-card--skeleton {
  pointer-events: none;
}

.listing-card--skeleton .listing-card-image {
  aspect-ratio: 2 / 1;
}

.skeleton-line {
  border-radius: 4px;
}

/* ---- Empty state ---- */
.listing-popover-empty {
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-mid-gray);
}