:root {
  --panel: #16171d;
  --text: #e7e8ee;
  --muted: #a7aab7;
  --scp: #4a90e2;
  --tanap: #4a90e2;
  --tap: #4a90e2;
  --pipe-casing: #0c0d12;
  --pipe-shadow: #00000080;
}


.header .lead {
  max-width: 620px;
}

/** Below CSS is completely optional **/

.gallery-item {
  width: 200px;
  padding: 5px;
}

.socarmap html,
.socarmap body {
  margin: 0;
}
.socarmap {
  position: relative;
}
.socarmap body {
  color: var(--text);
  background: #0b0b0e;
  font: 14px/1.45 "Tahoma", Tahoma, Geneva, Verdana, sans-serif;
}

/* full screen map - changed to fixed height for homepage inclusion */
.socarmap #map {
  position: relative;
  width: 100%;
  height: 80vh; /* 80% of viewport height */
  min-height: 600px; /* minimum height */
}

/* overlay header - adjusted for relative positioning */
.socarmap header {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  padding: 10px 14px;

  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  border: 0px solid #23242c;
  font-family: "Tahoma", Tahoma, Geneva, Verdana, sans-serif;
}
.socarmap header .key {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}
.socarmap header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.socarmap .scp {
  background: var(--scp);
}
.socarmap .tanap {
  background: var(--tanap);
}
.socarmap .tap {
  background: var(--tap);
}
.socarmap .spacer {
  flex: 1;
}

/* theme picker */
.socarmap .picker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cfd3db;
}
.socarmap select,
.socarmap option {
  font: 13px/1.2 "Tahoma", Tahoma, Geneva, Verdana, sans-serif;
  background: #0f1218;
  color: #e7e8ee;
  border: 1px solid #2a2f37;
  border-radius: 8px;
  padding: 6px 8px;
}

/* overlay info panel - adjusted for relative positioning */
.socarmap #info {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  width: 320px;
  max-width: 90%;
  background: var(--panel);
  border: 1px solid #2a2b34;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 30px #0009;
  font-family: "Tahoma", Tahoma, Geneva, Verdana, sans-serif;
}
.socarmap #info h3 {
  margin: 0.2rem 0 0.35rem;
  font-size: 16px;
  color: var(--text);
}
.socarmap #info p {
  margin: 0.25rem 0;
  color: var(--muted);
}

.socarmap .badge {
  display: inline-block;
  padding: 0.18rem 0.48rem;
  margin-right: 0.35rem;
  margin-bottom: 0.25rem;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid #333646;
  color: #d7d8de;
  font-family: "Tahoma", Tahoma, Geneva, Verdana, sans-serif;
}
.socarmap .b-scp {
  background: #1a2a3a;
  border-color: #2a4a5a;
}
.socarmap .b-tanap {
  background: #1a2a3a;
  border-color: #2a4a5a;
}
.socarmap .b-tap {
  background: #1a2a3a;
  border-color: #2a4a5a;
}

.socarmap .leaflet-div-icon {
  background: #0000;
  border: none;
}
.socarmap .pipe-core {
  filter: drop-shadow(0 0 2px var(--pipe-shadow))
    drop-shadow(0 0 6px var(--pipe-shadow));
}

/* WiFi-style pulse animation for markers */
@keyframes socarmap-wifi-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.socarmap .wifi-marker::before,
.socarmap .wifi-marker::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #ffd859;
  border-radius: 50%;
  transform-origin: center center;
  animation: socarmap-wifi-pulse 2s ease-out infinite;
}

.socarmap .wifi-marker::before {
  animation-delay: 0s;
}

.socarmap .wifi-marker::after {
  animation-delay: 1s;
}