html,
body,
#map {
  height: 100%;
  margin: 0;
}
/* Remove ALL backgrounds and borders */
.leaflet-popup-content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  width: auto !important;
  background: none !important;
}
/* Remove the white tip/arrow */
.leaflet-popup-tip-container {
  display: none !important;
}
.leaflet-popup-tip {
  display: none !important;
}
/* Image should have no styles */
.popup-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Remove close button */
.leaflet-popup-close-button {
  display: none !important;
}
/* Ensure popup appears above everything */
.leaflet-popup-pane {
  z-index: 1000 !important;
}
/* Remove any wrapper styling */
.custom-image-popup {
  background: none !important;
}
.custom-image-popup .leaflet-popup-content-wrapper {
  background: none !important;
  box-shadow: none !important;
}
/**
 * SVG Route Animation Styles
 *
 * These styles define the appearance of the animated route paths
 * - st1: Outer stroke (border/outline) - thicker, darker
 * - st0: Inner stroke (main line) - thinner, brighter
 */
/* Outer stroke (border/shadow effect) */
.str1 {
  fill: none;
  stroke: #1a1a1a; /* Dark color for contrast */
  stroke-width: 30; /* Thicker for border effect */
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
/* Inner stroke (main colored line) */
.str0 {
  fill: none;
  stroke: rgb(156, 203, 235); /* Gold/yellow color - highly visible */
  stroke-width: 15; /* Thinner than outer stroke */
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}
/* Alternative color schemes - uncomment to use */
/* Blue route theme
.st1 {
  stroke: #000080;
  stroke-width: 12;
}
.st0 {
  stroke: #4169E1;
  stroke-width: 6;
}
/* Green route theme
.st1 {
  stroke: #004D00;
  stroke-width: 12;
}
.st0 {
  stroke: #00FF00;
  stroke-width: 6;
}
*/
/* Red route theme
.st1 {
  stroke: #8B0000;
  stroke-width: 12;
}
.st0 {
  stroke: #FF0000;
  stroke-width: 6;
}
*/
.map-buttons {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px; /* spacing between buttons */
  z-index: 1000;
}
/* Glossy circular map buttons */
.map-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0); /* Transparent black */
  border: 2px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3),
    /* Outer glow */ 0 0 20px rgba(255, 255, 255, 0.2),
    /* Soft halo */ inset 0 0 8px rgba(255, 255, 255, 0.3); /* Inner glow */
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999 !important;
  position: relative;
}
/* Glossy highlight (white reflection) */
.map-btn::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 40%;
  background: linear-gradient(180deg, rgb(14, 13, 13), rgb(15, 15, 15));
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.7;
}
/* Hover effect with enhanced glow */
.map-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
    0 0 35px rgba(255, 255, 255, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}
/* Icon inside the button */
.map-btn img {
  width: 22px;
  height: 22px;
  z-index: 2;
  opacity: 0.9;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.map-btn:hover img {
  opacity: 1;
  transform: scale(1.1);
}
.night-btn {
  font-size: 18px;
  color: rgb(12, 12, 12);
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgb(17, 17, 17);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.night-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.map-buttons {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 9999;
}

/* ICON STYLING */
.circle-btn svg {
  width: 24px;
  height: 24px;
  z-index: 2;
}
/* POPUPS */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.popup-overlay.active {
  display: flex;
}
.popup-content {
  background: rgba(255, 255, 255, 0.575);
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  text-align: center;
}
.video-container iframe {
  width: 100%;
  height: 315px;
  border-radius: 12px;
}
/* Phases styling */
.st0 {
  filter: url(#outer-glow-1);
}
.st0,
.st1,
.st2,
.st3,
.st4,
.st5 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 8px;
}
.st6 {
  opacity: 0.61;
}
.st7 {
  fill: #00b7ff;
  opacity: 0.3;
}
.st7,
.st8,
.st9,
.st10,
.st11,
.st12 {
  mix-blend-mode: multiply;
}
.st1 {
  filter: url(#outer-glow-3);
}
.st13 {
  fill: #fff;
}
.st8 {
  fill: #ffb600;
  opacity: 0.3;
}
.st9 {
  fill: #0037ff;
  opacity: 0.3;
}
.st2 {
  filter: url(#outer-glow-5);
}
.st10 {
  fill: red;
  opacity: 0.3;
}
.st14 {
  opacity: 0.63;
}
.st15 {
  isolation: isolate;
}
.st3 {
  filter: url(#outer-glow-2);
}
.st4 {
  filter: url(#outer-glow-4);
}
.st11 {
  fill: #0fa;
  opacity: 0.3;
}
.st16 {
  opacity: 0.66;
}
.st5 {
  filter: url(#outer-glow-6);
}
.st12 {
  fill: #ff4e00;
  opacity: 0.3;
}
.st17 {
  opacity: 0.62;
}
/* position them on top-left of the map */
.map-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgb(233, 226, 226);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.89);
}
.map-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 4px 0;
  border: none;
  color: white;
  border-radius: 6px;
  background: #000000;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}
.map-button:hover {
  background: #7a7676;
}
.filter-container {
  display: flex;
  z-index: 1000;
  flex-direction: column;
  align-items: flex-start;
}
.filter-options {
  display: none;
  flex-direction: column;
  margin-top: 6px;
  animation: fadeIn 0.3s ease;
}
.filter-options.show {
  display: flex;
}
.map-button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fullscreen video popup container */
#videoPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}
/* When opened */
#videoPopup.active {
  opacity: 1;
  pointer-events: all;
}
/* Full fullscreen video WITHOUT side gaps */
#videoPlayer {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important; /* THIS REMOVES LEFT/RIGHT SPACE */
  margin: 0;
  padding: 0;
  display: block;
  background: rgb(0, 0, 0);
}
/* Close button (optional) */
#closeVideo {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  z-index: 9999999;
}
/* PDF fullscreen container */
.pdf-fullscreen {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
  padding: 0;
  overflow: hidden;
}
/* PDF iframe fills screen */
.pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
}
/* Close button — TOP RIGHT */
.pdf-fullscreen .close-btn {
  position: absolute;
  top: 60px; /* adjust vertical position */
  right: 20px; /* adjust horizontal position */
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}
.pdf-fullscreen .close-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.circle-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  background-color: rgba(
    0,
    0,
    0,
    0.4
  ); /* slightly darker semi-transparent black */
  transition: background-color 0.3s; /* smooth hover effect */
}
.circle-btn:hover {
  /*background: rgba(255, 255, 255, 0.35);*/
  transform: scale(1.08);
  background-color: rgba(0, 0, 0, 0.6); /* darker on hover */
}

.btn-image {
  width: 10px;
  height: 10px;
  object-fit: contain;
  pointer-events: none; /* so the button still works */
}
.circle-btn img {
  max-width: 120%;
  max-height: 120%;
  object-fit: contain;
}
.map-buttons {
  z-index: 5000 !important;
  position: absolute;
  display: flex; /* keep buttons in a row */
  gap: 10px; /* spacing between buttons */
}

/* Individual image sizes for each button */
#infoBtn img {
  width: 45px;
  height: 45px;
}
#playBtn img {
  width: 40px;
  height: 40px;
}
#nightModeBtn img {
  width: 40px;
  height: 40px;
}
#lightModeBtn img {
  width: 40px;
  height: 40px;
}

a {
  z-index: 1500;
  color: #0fa;
}

/* Phase 1 page styling */

.stypes0 {
  opacity: 0.5;
  fill: #ff8d8d;
}
.stypes1 {
  opacity: 0.5;
  fill: #ff3636;
}
.stypes2 {
  opacity: 0.5;
  fill: #d9ff50;
}
.stypes3 {
  opacity: 0.5;
  fill: #ffbc00;
}
.stypes4 {
  opacity: 0.5;
  fill: #ce0000;
}
.stypes5 {
  opacity: 0.5;
  fill: #0019ff;
}
.stypes6 {
  opacity: 0.5;
  fill: #007aff;
}
.stypes7 {
  opacity: 0.5;
  fill: #00dbff;
}