#map {
  width: 100%; 
  height: 80vh;  
  border: 2px solid #000; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional styling */
}

.leaflet-popup-tip {
  display: none; /* Hides the arrow */
}

/* Button styles */
.enabled,
.enabled:focus,
.enabled:active {
  background-color: #4CAF50; /* Green */
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 18px;
}

.disabled,
.disabled:focus,
.disabled:active {
  background-color: #f44336; /* Red */
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 18px;
}

.enabled:hover {
  background-color: #45a049; /* Slightly darker green */
}

.disabled:hover {
  background-color: #da190b; /* Slightly darker red */
}

/* Custom popup styles */
.custom-popup {
  display: flex;
  align-items: flex-start;
  width: 100%; /* Full width of the popup container */
  flex-wrap: wrap; /* Enable wrapping for smaller screens */
  border: 1px solid #ccc; /* Optional: Add a border for visibility */
  border-radius: 5px;
  overflow: hidden;
  background-color: white; /* Ensure background is visible */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


/* Style the image in the left column */
.custom-popup img {
  width: 220px;
  height: auto;
  margin-right: 10px;
  border-radius: 5px;
  flex-shrink: 0;
}

/* Content on the right */
.custom-popup-content {
  flex: 1;
  padding: 10px;
}

.custom-popup-content h2 {
  margin: 0 0 5px;
  font-size: 18px;
}

.custom-popup-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Desktop (large screens: 1024px and above) */
@media (min-width: 1024px) {
  
  .leaflet-popup-content-wrapper {
      width: 650px;
  }
  
  .custom-popup {
      flex-direction: row; /* Columns side by side */
      width: 600px;
  }

  .custom-popup img {
      width: 250px; /* Larger image */
      vertical-align: middle;
  }
}

/* Tablet (medium screens: 768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .custom-popup {
      flex-direction: column; /* Still side by side */
  }

  .custom-popup img {
      width: 80%; /* Moderate image size */
      align-self: center;
  }
}

/* Mobile (small screens: up to 767px) */
@media (max-width: 767px) {
  .custom-popup {
      flex-direction: column; /* Stack the image and text vertically */
      text-align: center; /* Center align for better mobile display */
  }

  .custom-popup img {
      width: 80%; /* Reduce image width */
      margin: 0 auto 10px; /* Center the image and add spacing */
  }

  .custom-popup-content h2 {
      font-size: 16px; /* Slightly smaller font */
  }

  .custom-popup-content p {
      font-size: 13px; /* Adjust text size */
  }
}

/* .leaflet-popup {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
} */