/* eMobility EV Map — map.css */
:root {
  --em-green:      #1D9E75;
  --em-green-dk:   #0F6E56;
  --em-green-lt:   #E1F5EE;
  --em-black:      #111111;
  --em-gray-700:   #444444;
  --em-gray-500:   #777777;
  --em-gray-200:   #e8e8e5;
  --em-gray-100:   #f5f5f3;
  --em-white:      #ffffff;
  --em-fast:       #1D9E75;
  --em-slow:       #378ADD;
  --em-ppc:        #E6920A;
  --em-radius:     8px;
  --em-shadow:     0 2px 12px rgba(0,0,0,.10);
}

/* ── Wrapper ── */
#emmap-wrapper {
  position: relative;
  width: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--em-gray-100);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--em-gray-200);
}

/* ── Toolbar ── */
#emmap-toolbar {
  background: var(--em-white);
  border-bottom: 1px solid var(--em-gray-200);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Search */
#emmap-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}
#emmap-search {
  width: 100%;
  border: 1px solid var(--em-gray-200);
  border-radius: var(--em-radius);
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  font-family: inherit;
  color: var(--em-black);
  outline: none;
  transition: border-color .15s;
}
#emmap-search:focus { border-color: var(--em-green); }
#emmap-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--em-gray-500);
  pointer-events: none;
}

/* Filter pills */
.emmap-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.emmap-filter {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--em-gray-200);
  background: var(--em-white);
  color: var(--em-gray-700);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.emmap-filter:hover { border-color: var(--em-green); color: var(--em-green); }
.emmap-filter.active {
  background: var(--em-green);
  border-color: var(--em-green);
  color: var(--em-white);
}
.emmap-filter.fast.active  { background: var(--em-fast); border-color: var(--em-fast); }
.emmap-filter.slow.active  { background: var(--em-slow); border-color: var(--em-slow); }
.emmap-filter.ppc.active   { background: var(--em-ppc);  border-color: var(--em-ppc);  }

/* My location btn */
#emmap-locate {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--em-green);
  background: var(--em-green-lt);
  color: var(--em-green-dk);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
#emmap-locate:hover { background: var(--em-green); color: var(--em-white); }

/* Counter badge */
#emmap-count {
  font-size: 11px;
  color: var(--em-gray-500);
  white-space: nowrap;
  margin-left: auto;
}
#emmap-count strong { color: var(--em-green); font-weight: 700; }

/* ── Map container ── */
#emmap-map {
  width: 100%;
  height: 580px;
  z-index: 1;
}

/* ── Loading overlay ── */
#emmap-loading {
  position: absolute;
  inset: 52px 0 0 0;
  background: rgba(255,255,255,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1000;
  font-size: 14px;
  color: var(--em-gray-700);
}
.emmap-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--em-gray-200);
  border-top-color: var(--em-green);
  border-radius: 50%;
  animation: emmap-spin .7s linear infinite;
}
@keyframes emmap-spin { to { transform: rotate(360deg); } }
#emmap-loading.hidden { display: none; }

/* ── Custom markers ── */
.emmap-marker {
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: pointer;
}
.emmap-marker.fast { background: var(--em-fast); }
.emmap-marker.slow { background: var(--em-slow); }
.emmap-marker.ppc  { background: var(--em-ppc);  }

.emmap-marker-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg);
  font-size: 12px; font-weight: 700; color: white;
}

/* Cluster */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-clip: padding-box;
}
.marker-cluster-small div  { background: rgba(29,158,117,.85); }
.marker-cluster-medium div { background: rgba(55,138,221,.85); }
.marker-cluster-large div  { background: rgba(230,146,10,.85); }
.marker-cluster div {
  width: 30px; height: 30px;
  margin: 5px;
  border-radius: 15px;
  text-align: center;
  font: bold 12px 'DM Sans', sans-serif;
  color: white;
  line-height: 30px;
}

/* ── Popup ── */
.emmap-popup { min-width: 240px; font-family: 'DM Sans', system-ui, sans-serif; }
.emmap-popup-header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
}
.emmap-popup-icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.emmap-popup-icon.fast { background: var(--em-green-lt); }
.emmap-popup-icon.slow { background: #E6F1FB; }
.emmap-popup-icon.ppc  { background: #FAEEDA; }
.emmap-popup-title { font-size: 14px; font-weight: 700; color: var(--em-black); line-height: 1.3; }
.emmap-popup-operator { font-size: 11px; color: var(--em-gray-500); margin-top: 2px; }
.emmap-popup-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.emmap-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
}
.emmap-badge.fast  { background: var(--em-green-lt); color: var(--em-green-dk); }
.emmap-badge.slow  { background: #E6F1FB; color: #0C447C; }
.emmap-badge.ppc   { background: #FAEEDA; color: #633806; }
.emmap-badge.free  { background: #EAF3DE; color: #27500A; }
.emmap-badge.open  { background: #EAF3DE; color: #27500A; }

.emmap-popup-connectors { font-size: 12px; color: var(--em-gray-700); margin-bottom: 10px; }
.emmap-popup-connector  { padding: 4px 0; border-bottom: 1px solid var(--em-gray-200); }
.emmap-popup-connector:last-child { border-bottom: none; }
.emmap-popup-connector strong { color: var(--em-black); }

.emmap-popup-actions { display: flex; gap: 6px; margin-top: 10px; }
.emmap-popup-btn {
  flex: 1; text-align: center; padding: 7px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: all .15s; cursor: pointer; border: none; font-family: inherit;
}
.emmap-popup-btn.primary {
  background: var(--em-green); color: white;
}
.emmap-popup-btn.primary:hover { background: var(--em-green-dk); color: white; }
.emmap-popup-btn.secondary {
  background: var(--em-gray-100); color: var(--em-gray-700);
  border: 1px solid var(--em-gray-200);
}
.emmap-popup-btn.secondary:hover { border-color: var(--em-green); color: var(--em-green); }

/* Leaflet popup override */
.leaflet-popup-content-wrapper { border-radius: 10px !important; padding: 0 !important; }
.leaflet-popup-content { margin: 16px !important; }

/* ── Stats bar ── */
#emmap-stats {
  background: var(--em-white);
  border-top: 1px solid var(--em-gray-200);
  padding: 10px 16px;
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--em-gray-500);
  flex-wrap: wrap;
}
.emmap-stat strong { color: var(--em-black); font-weight: 700; }
.emmap-stat-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 4px;
  vertical-align: middle;
}
.dot-fast { background: var(--em-fast); }
.dot-slow { background: var(--em-slow); }
.dot-ppc  { background: var(--em-ppc);  }

/* PPC Blue branding strip */
#emmap-ppc-brand {
  background: var(--em-black);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
}
#emmap-ppc-brand strong { color: var(--em-ppc); }

/* ── Mobile ── */
@media (max-width: 640px) {
  #emmap-toolbar { padding: 10px 12px; gap: 8px; }
  #emmap-map { height: 420px; }
  #emmap-count { display: none; }
  .emmap-filter { padding: 4px 10px; font-size: 10px; }
}