.map-popup-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.map-popup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text-primary);
  font-family: var(--typography-font-family-arial, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.2;
}

.map-popup-item:hover .map-popup-title {
  text-decoration: underline;
}

/* Legend Dot (Reuse Spirit sizes) */
.map-popup-dot {
  flex-shrink: 0;
  width: 16px; /* var(--size-xs) approx */
  height: 16px;
  /* Classes spirit-interactive-map__icon-* provide the image via ::after */
  /* We need to ensure the base class behaves correctly inside our popup */
}

/* Ensure the ::after from spirit styles works here */
.map-popup-dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Type Icon (Black) */
.map-popup-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #000000; /* Force black as requested */
}

.map-popup-title {
  flex-grow: 1;
  font-weight: 600; /* Semibold ish */
}

.map-popup-arrow {
  flex-shrink: 0;
  color: var(--color-text-brand, #0072CE); /* Plan Blue usually */
  display: flex;
  align-items: center;
}