.kuretech-geostory {
  --kgs-bg: #07152f;
  --kgs-bg-2: #0c1d42;
  --kgs-panel: rgba(9, 20, 46, 0.82);
  --kgs-line: rgba(255, 255, 255, 0.12);
  --kgs-text: #f5f8ff;
  --kgs-muted: rgba(245, 248, 255, 0.74);
  --kgs-accent: #1bc9a4;
  --kgs-accent-2: #1e90ff;
  --kgs-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color: var(--kgs-text);
  background:
    radial-gradient(circle at top left, rgba(27, 201, 164, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(30, 144, 255, 0.16), transparent 26%),
    linear-gradient(180deg, var(--kgs-bg-2), var(--kgs-bg));
  border: 1px solid var(--kgs-line);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--kgs-shadow);
  overflow: hidden;
}

.kgs-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.kgs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kgs-accent);
  margin-bottom: 10px;
}

.kgs-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.kgs-subtitle {
  margin: 12px 0 0;
  color: var(--kgs-muted);
  max-width: 62ch;
  font-size: 1.02rem;
}

.kgs-head-badge {
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--kgs-line);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  backdrop-filter: blur(10px);
}

.kgs-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.kgs-search input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--kgs-line);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
  font-size: 1rem;
}

.kgs-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.kgs-search input:focus {
  border-color: rgba(27, 201, 164, 0.8);
  box-shadow: 0 0 0 4px rgba(27, 201, 164, 0.12);
}

.kgs-search button,
.kgs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 12px 26px rgba(30, 144, 255, 0.22);
}

.kgs-search button:hover,
.kgs-cta:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 16px 32px rgba(30, 144, 255, 0.28);
}

.kgs-search.is-loading button {
  opacity: 0.7;
  pointer-events: none;
}

.kgs-compare-wrap {
  position: relative;
  width: 100%;
}

.kgs-compare {
  position: relative;
  width: 100%;
  height: var(--kgs-height, 520px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--kgs-line);
  background: rgba(255, 255, 255, 0.03);
}

.kgs-pane {
  position: absolute;
  inset: 0;
}

.kgs-pane-street {
  background: #0b1d3c;
}

.kgs-pane-satellite {
  width: var(--kgs-split, 50%);
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.14);
}

.kgs-map {
  position: absolute;
  inset: 0;
}

.kgs-pane-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 500;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(4, 11, 28, 0.65);
  color: #fff;
  font-size: 0.86rem;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}

.kgs-split-slider {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 600;
  width: calc(100% - 36px);
  appearance: none;
  height: 0;
  background: transparent;
  pointer-events: auto;
}

.kgs-split-slider::-webkit-slider-thumb {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  cursor: ew-resize;
  margin-top: -17px;
}

.kgs-split-slider::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  cursor: ew-resize;
}

.kgs-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kgs-split, 50%);
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 18px rgba(255,255,255,0.35);
  z-index: 550;
  pointer-events: none;
}

.kgs-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kgs-accent), var(--kgs-accent-2));
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.kgs-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.kgs-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kgs-line);
  border-radius: 18px;
  padding: 14px 16px;
}

.kgs-stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.kgs-stat-value {
  display: block;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.4;
}

.kgs-story {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.kgs-story-main,
.kgs-bullets {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kgs-line);
  border-radius: 18px;
}

.kgs-story-main {
  padding: 16px;
  color: var(--kgs-muted);
  line-height: 1.6;
}

.kgs-bullets {
  margin: 0;
  padding: 16px 20px 16px 34px;
  list-style: disc;
  color: #fff;
}

.kgs-bullets li + li {
  margin-top: 8px;
}

.kgs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 18px;
}

.kgs-hint {
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
}

.kgs-pane .leaflet-container {
  background: #0a1830;
}

.kgs-marker-icon {
  background: transparent;
  border: 0;
}

.kgs-marker-icon span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff3b4a;
  border: 3px solid #fff;
  box-shadow: 0 0 0 10px rgba(255,59,74,0.18), 0 0 26px rgba(255,59,74,0.4);
}

@media (max-width: 980px) {
  .kgs-head,
  .kgs-story {
    grid-template-columns: 1fr;
    display: grid;
  }

  .kgs-head-badge {
    justify-self: start;
  }

  .kgs-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kgs-search {
    grid-template-columns: 1fr;
  }

  .kgs-compare {
    height: 380px;
  }

  .kgs-pane-label {
    left: 12px;
    bottom: 12px;
  }

  .kgs-split-slider {
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    bottom: 12px;
  }
}

/* ── Nigeria / West Africa regional context flags ────────────── */
.kgs-region-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(27, 201, 164, 0.06);
  border: 1px solid rgba(27, 201, 164, 0.22);
  border-radius: 16px;
  animation: kgs-flags-in 0.4s ease both;
}

@keyframes kgs-flags-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.kgs-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Flood risk — amber */
.kgs-flag--flood {
  background: rgba(255, 180, 0, 0.15);
  border-color: rgba(255, 180, 0, 0.4);
  color: #ffd666;
}

/* Agricultural belt — green */
.kgs-flag--agric {
  background: rgba(80, 200, 80, 0.12);
  border-color: rgba(80, 200, 80, 0.35);
  color: #7de07d;
}

/* Sahel / desertification — sand */
.kgs-flag--sahel {
  background: rgba(220, 165, 80, 0.13);
  border-color: rgba(220, 165, 80, 0.35);
  color: #e8c07a;
}

/* Niger Delta — teal/blue */
.kgs-flag--delta {
  background: rgba(27, 201, 164, 0.12);
  border-color: rgba(27, 201, 164, 0.35);
  color: #1bc9a4;
}

/* River — blue */
.kgs-flag--river {
  background: rgba(30, 144, 255, 0.12);
  border-color: rgba(30, 144, 255, 0.35);
  color: #69b4ff;
}

/* Urban / FCT — purple-blue */
.kgs-flag--urban {
  background: rgba(130, 100, 255, 0.12);
  border-color: rgba(130, 100, 255, 0.35);
  color: #b09cff;
}

/* West Africa (non-Nigeria) — warm orange */
.kgs-flag--westafrica {
  background: rgba(255, 120, 40, 0.12);
  border-color: rgba(255, 120, 40, 0.32);
  color: #ffaa70;
}

@media (max-width: 640px) {
  .kgs-region-flags {
    gap: 6px;
    padding: 10px 12px;
  }
  .kgs-flag-badge {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
}

/* ── Leaflet attribution — restyled for license compliance ───────
   OSM (ODbL) and Esri tile licenses require attribution to remain
   in the DOM and visible. We restyle it to fit the dark card UI
   rather than showing the default white box.                      */
.kuretech-geostory .leaflet-control-attribution {
  background: rgba(4, 11, 28, 0.55) !important;
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 0.62rem !important;
  padding: 2px 6px !important;
  border-radius: 4px 0 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kuretech-geostory .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.45) !important;
}

.kuretech-geostory .leaflet-control-attribution a:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Hide the Leaflet logo SVG prefix — the text credit is sufficient */
.kuretech-geostory .leaflet-control-attribution svg {
  display: none !important;
}