/* =============================================
 * JOURNEY MAP COMPONENT - FIXED VERSION
 * ============================================= */

/* Journey Map Section */
.journey-map-section {
  padding: 40px 0;
  background-color: transparent; /* Transparent background */
  position: relative;
}

.journey-map-wrapper {
  padding: 15px;
  background-color: transparent; /* Transparent background */
  border-radius: 12px;
  box-shadow: none; /* No shadow on transparent background */
  overflow: hidden;
}

/* FIXED: Reduced map size by 50% */
.journey-map-container {
  position: relative;
  width: 20%; /* Reduced from 40% */
  max-width: 250px; /* Reduced from 500px */
  margin: 0 auto;
  min-height: 125px; /* Reduced from 250px */
  border-radius: 10px;
  overflow: hidden;
}

.journey-map-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Style for transparent map image */
.journey-map-container img.transparent-map {
  width: 100%;
  height: auto;
  display: block;
  /* Slightly increased opacity for better visibility */
  opacity: 0.9;
  /* Reduced blur for sharper map details */
  backdrop-filter: blur(1px);
}

/* Better color handling for PNG maps */
.journey-map-container img.transparent-map[src$=".png"] {
  /* Adjusted filter for better contrast */
  filter: brightness(1.2) contrast(1.2) saturate(1.1);
  mix-blend-mode: normal; /* Changed from multiply for better marker visibility */
}

/* FIXED: Improved marker visibility and positioning */
.journey-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; /* Ensure markers appear above the map */
}

/* FIXED: Enhanced marker visibility */
.journey-marker {
  position: absolute;
  width: 12px; /* Reduced but still visible */
  height: 12px; /* Reduced but still visible */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 15;
  pointer-events: auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); /* White outline for visibility */
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.journey-marker:hover {
  transform: translate(-50%, -50%) scale(1.5); /* Increased scale for better interaction */
  z-index: 20;
}

.journey-marker.active {
  background-color: var(--secondary-color);
  width: 16px; /* Slightly larger for active state */
  height: 16px; /* Slightly larger for active state */
  z-index: 30;
  animation: mapMarkerPulse 1.5s infinite;
}

.journey-marker.visited {
  background-color: var(--primary-color);
}

.journey-marker.upcoming {
  background-color: #ccc;
}

/* Enhanced marker pulsing animation */
@keyframes mapMarkerPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(109, 213, 237, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(109, 213, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(109, 213, 237, 0);
  }
}

/* Improved map legend */
.map-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.legend-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid white;
}

.legend-marker.current {
  background-color: var(--secondary-color);
}

.legend-marker.visited {
  background-color: var(--primary-color);
}

.legend-marker.upcoming {
  background-color: #ccc;
}

.journey-tip {
  font-size: 14px;
  color: var(--dark-text-muted);
  margin-top: 10px;
}

/* Light theme overrides */
body.light-theme .journey-map-section {
  background-color: transparent;
}

body.light-theme .journey-map-wrapper {
  background-color: transparent;
  box-shadow: none;
}

body.dark-theme .journey-map-container img.transparent-map {
  /* Adjust brightness for dark backgrounds */
  filter: brightness(1.3) contrast(1.2);
}

/* Responsive styles (unchanged) */
@media (max-width: 991.98px) {
  /* Responsive code - unchanged */
}