/* Widget specific styles */
.widget-container {
  font-family: "Inter", sans-serif;
  background-color: #0b1121;
}

.map-grid-bg {
  background-image:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
}

.zone-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-width: 2px;
  border-style: solid;
  background-color: #1e293b;
  border-color: #475569;
}

.zone-card:hover {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
  z-index: 30;
}

.zone-card.active {
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(0, 0, 0, 0.6);
  z-index: 30;
}

/* Wave Animations */
@keyframes wave-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.animate-wave-ripple {
  animation: wave-ripple 2s infinite;
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* SVG Path Animation */
.route-path {
  stroke-dasharray: 12;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -1000;
  }
}

/* Menu Item Styles - Dark Mode */
.menu-item {
  transition: all 0.2s ease;
}
.menu-item:hover {
  background-color: #1e293b; /* slate-800 */
}
.menu-item.active {
  background-color: #1e293b;
  border-color: currentColor;
}

/* Custom map markers */
.marker-main {
  color: #eab308;
  background-color: #eab308;
} /* Yellow */
.marker-food {
  color: #d97757;
  background-color: #d97757;
} /* Orange */
.marker-refreshment {
  color: #fbbf24;
  background-color: #fbbf24;
} /* Amber */
.marker-workshops {
  color: #60a5fa;
  background-color: #60a5fa;
} /* Blue */
.marker-restrooms {
  color: #86efac;
  background-color: #86efac;
} /* Green */
.marker-media {
  color: #c084fc;
  background-color: #c084fc;
} /* Purple */
.marker-speaker {
  color: #f472b6;
  background-color: #f472b6;
} /* Pink */

/* Hide scrollbar for menu */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}