:root {
  /* Global Theme Variables */
  --primary-color: #2E8B57;
  --primary-hover: #1F5F3F;
  --secondary-color: #A2AAAD;
  --background-color: #fff;
  --text-color: #313131;
  --border-color: #ddd;
  --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-heavy: 0 2px 6px rgba(0,0,0,0.1);
  --border-radius: 8px;
  --border-radius-small: 4px;
  --font-family: Arial, sans-serif;
  --font-size: 13px;
  --line-height: 1.4;
  --padding-small: 5px;
  --padding-medium: 10px;
  --padding-large: 15px;
  --transition: all 0.2s ease;
}

/* Global Leaflet Popup Styling using CSS Variables */
.custom-popup-container .leaflet-popup-content-wrapper {
  background: var(--background-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-medium) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0 !important;
}

.custom-popup-container .leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--line-height) !important;
}

.custom-popup-container .leaflet-popup-tip {
  background: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-heavy) !important;
}

.custom-popup-container .leaflet-popup-close-button {
  color: #666 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  right: 8px !important;
  top: 8px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  transition: var(--transition) !important;
}

.custom-popup-container .leaflet-popup-close-button:hover {
  color: #333 !important;
  background: rgba(255,255,255,1) !important;
  transform: scale(1.1) !important;
}

.custom-popup {
  font-family: var(--font-family) !important;
  font-size: var(--font-size) !important;
  line-height: var(--line-height) !important;
}

.custom-popup img {
  border-radius: var(--border-radius-small) !important;
  box-shadow: var(--shadow-light) !important;
  transition: var(--transition) !important;
}

.custom-popup img:hover {
  transform: scale(1.02) !important;
}

.custom-popup a {
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.custom-popup a:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}