/* ===== palette (matches bucket greens/teals) ===== */
:root{
  --c-deep:#0a6a6a;   /* 84–100 */
  --c-strong:#0f8a88; /* 59–83  */
  --c-mid:#2aa7a4;    /* 43–58  */
  --c-light:#79c6c2;  /* 18–42  */
  --c-pale:#c6d8de;   /* 0–17   */
  --ink:#0d1b1e;
}

body{
  font-family: Arial, sans-serif;
  margin:0; padding:0; height:100vh; overflow:hidden; color:#111;
}

#map-container{ position:absolute; inset:0; z-index:1; }
#map{ width:100%; height:100vh; }

/* Spinner */
#spinner{
  position:absolute; top:15px; left:15px; z-index:9999;
  background:rgba(255,255,255,.95);
  padding:8px 12px; border-radius:6px; font-weight:600; color:#333;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}

/* Legend */
.legend{
  background: rgba(15,20,26,.85); color:#eaf2ff;
  padding:8px 10px; border-radius:10px;
  font:12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.legend .row{ display:flex; align-items:center; margin:3px 0; }
.legend i{
  width:14px; height:14px; border-radius:50%;
  display:inline-block; margin-right:7px; border:1px solid rgba(0,0,0,.4);
}

#overlay{
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: rgba(9,31,33,0.32);
  transition: opacity .4s ease;
}
.fade-out{ opacity:0; pointer-events:none; }

.overlay-card{
  background: rgba(0, 0, 0, 0.666);/* solid teal w/ transparency */
  color: #ffffff;
  width: min(640px, 85vw);  /* smaller than before */
  padding: 20px 24px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.25);
  line-height: 1.6;
}

#overlay .overlay-card a,
#overlay .overlay-card a:visited {
  color: #ffffff !important;     /* force white */
  text-decoration: underline;
  text-underline-offset: 3px;
}

#overlay .overlay-card a:hover {
  color: #d9f7f6 !important;     /* softer white/teal on hover */
}


#overlay.fade-out { opacity: 0; pointer-events: none; }  /* pointer-events:none is crucial */

.overlay-header h1{
  margin-top: 0; margin-bottom: 16px;
  text-align: center;
  font-size: clamp(22px, 3vw, 32px);
}

.overlay-text{
  margin: 12px auto;
  max-width: 70ch;
  font-size: 1rem;
}

.overlay-text a{ color:#063e41; text-decoration: underline; }

.overlay-footer{
  margin-top: 20px;
  text-align: center;
}

.btn-primary{
  border:0; border-radius:10px; cursor:pointer;
  padding:10px 20px;
  font-size:16px; font-weight:700;
  background:#0f8a88; color:#f4feff;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.btn-primary:hover{ background:#0a6a6a; }

/* fade helper */
.fade-out{ opacity:0; pointer-events:none; }

/* ===== Left info panel (teal theme with close) ===== */
#info-fixed{
  position:absolute; top:120px; left:24px; z-index:999;
  width:310px; color:#ffffff;
  background: rgba(0, 4, 7, 0.532); border:1px solid rgba(10,106,106,.45);
  padding:18px 20px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
#info-fixed h3{ margin:0 0 6px; }

#info-fixed #info-close{
  position:absolute; top:8px; right:10px; width:30px; height:30px;
  border:none; border-radius:8px; background: #0a6a6a; color:#f7fafa;
  font-size:18px; font-weight:700; cursor:pointer;
}

#info-fixed #info-close:hover{ background: rgba(9,31,33,.45); }

/* Popups match dark theme a bit */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:#0f141a; color:#eaf2ff; border:1px solid rgba(255,255,255,.06);
}