/* Bali Fuel Live Styles */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0f172a;
}

#map {
  width: 100%;
  height: 100%;
  background: #0f172a;
}

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Marker Styling */
.spbu-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.spbu-pin:hover {
  transform: scale(1.15) translateY(-2px);
  z-index: 1000 !important;
}

.spbu-pin.regular {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border: 2px solid #60a5fa;
  color: #ffffff;
}

.spbu-pin.pertashop {
  background: linear-gradient(135deg, #059669, #047857);
  border: 2px solid #34d399;
  color: #ffffff;
}

.spbu-pin.spbun {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  border: 2px solid #22d3ee;
  color: #ffffff;
}

.spbu-pin.ges {
  background: linear-gradient(135deg, #0d9488, #115e59);
  border: 2px solid #2dd4bf;
  color: #ffffff;
}

/* Pulse animation for stations with reported long queues */
.spbu-pin.alert-queue {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  border: 2px solid #fda4af !important;
  animation: pulse-ring 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(225, 29, 72, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
  }
}

/* Cluster Marker Customization */
.marker-cluster-small {
  background-color: rgba(37, 99, 235, 0.5) !important;
}
.marker-cluster-small div {
  background-color: rgba(29, 78, 216, 0.9) !important;
  color: white !important;
  font-weight: 700 !important;
}

.marker-cluster-medium {
  background-color: rgba(14, 165, 233, 0.5) !important;
}
.marker-cluster-medium div {
  background-color: rgba(2, 132, 199, 0.9) !important;
  color: white !important;
  font-weight: 700 !important;
}

.marker-cluster-large {
  background-color: rgba(225, 29, 72, 0.5) !important;
}
.marker-cluster-large div {
  background-color: rgba(190, 18, 60, 0.9) !important;
  color: white !important;
  font-weight: 700 !important;
}

/* Leaflet Attribution styling override */
.leaflet-container .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  backdrop-filter: blur(4px);
  padding: 2px 8px !important;
  border-radius: 6px 0 0 0;
}
.leaflet-container .leaflet-control-attribution a {
  color: #38bdf8 !important;
}

/* Custom Zoom Control */
.leaflet-top.leaflet-left {
  top: 130px !important;
}
.leaflet-bar a {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(8px);
}
.leaflet-bar a:hover {
  background-color: rgba(30, 41, 59, 0.95) !important;
  color: #38bdf8 !important;
}