#photo-map {
  width: 100%;
  height: 70vh;
  min-height: 500px;
  border-radius: 12px;
  overflow: hidden;
}

/* --- CUSTOM MARKER --- */
.emoji-marker {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 20px; /* Match the iconSize height to vertically center */
  text-align: center; /* Horizontally center */
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.4); 
}

/* --- MINIMAL BORDER POPUP --- */

/* 1. Give the white wrapper a tiny padding to act as a thin border */
.minimal-popup .leaflet-popup-content-wrapper {
  padding: 3px; 
  border-radius: 5px;
}

/* 2. Remove Leaflet's default massive margins */
.minimal-popup .leaflet-popup-content {
  margin: 6px !important;
  line-height: 0; 
}

/* 3. Set your 25% larger image size */
.minimal-popup img {
  width: 225px;
  height: 225px;
  object-fit: cover;
  display: block;
  border-radius: 8px; /* Slightly smaller than wrapper's 8px to nest cleanly */
}

/* 4. Ensure it is perfectly opaque */
.leaflet-popup.minimal-popup {
  opacity: 1 !important;
}