:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 8px 30px rgba(16,24,40,.08);

  --red:#d32f2f;
  --orange:#f57c00;
  --blue:#1976d2;
}

@font-face{
  font-family:"NotoSans";
  src:url("./NotoSans-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"NotoSans",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
  font-weight:500;
  color:var(--text);
  background:var(--bg);
}

button,input,select,textarea{
  font-family:inherit;
  font-weight:inherit;
}

.page{max-width:1200px;margin:0 auto;padding:20px}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.filter{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:8px 12px;
  border-radius:0;
  cursor:pointer;
  font-size:13px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.filter:hover{border-color:#d1d5db}
.filter.is-active{
  border-color:#cbd5e1;
  background:#BC111C;
  color:#fff;
}
.filter.is-active:hover{filter:brightness(.97)}
.filter:focus-visible{
  outline:3px solid rgba(188,17,28,.22);
  outline-offset:2px;
}

.mapCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:0;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.mapWrap{
  position:relative;
  padding:0;
}

.leafletMap{
  width:100%;
  height:420px;
  min-height:420px;
  background:#fff;
  border:0;
}

/* Leaflet overrides */
.leaflet-container{
  font-family:inherit;
}
.leaflet-control-attribution{
  font-size:10px;
}

.zoomControls{
  display:flex;
  gap:8px;
  z-index:30;
}
.zoomBtn{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:#111827;
  padding:8px 10px;
  line-height:1;
  font-size:14px;
  cursor:pointer;
}
.zoomBtn:hover{border-color:#d1d5db}
.zoomBtn:active{transform:translateY(1px)}

#worldSvg{
  width:100%;
  height:auto;
  display:block;
}

/* soften country strokes */
#worldSvg path{
  stroke:#9ca3af;
  stroke-width:.25;
}

.legend{
  display:flex;
  align-items:center;
  justify-content:center;
}
.legend__items{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.legend__item{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
  border:2px solid transparent;
  background:#fff;
}
.dot--logotek{border-color:var(--red)}
.dot--partner{border-color:var(--orange)}
.dot--project{border-color:var(--blue)}

.popup{
  position:absolute;
  min-width:260px;
  max-width:360px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:0;
  box-shadow:0 18px 60px rgba(16,24,40,.22);
  overflow:hidden;
  z-index:1200; /* above Leaflet panes/controls */
}
.popup__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:#fafafa;
}
.popup__title{font-weight:700;font-size:13px}
.popup__close{
  appearance:none;
  border:0;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#374151;
  padding:0 4px;
}
.popup__body{padding:10px 12px}
.popup pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.popup__groupTitle{
  font-weight:700;
  font-size:12px;
  margin:10px 0 6px;
  color:#111827;
  display:flex;
  align-items:center;
  gap:8px;
}
.popup__groupTitle:first-child{margin-top:0}
.popup__list{margin:0;padding-left:18px;color:#111827}
.popup__list li{margin:4px 0;color:#111827;font-size:13px}
.badge{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
}
.badge--logotek{background:var(--red)}
.badge--partner{background:var(--orange)}
.badge--project{background:var(--blue)}

@media (max-width:760px){
  .header{flex-direction:column;align-items:flex-start}
  .filters{justify-content:flex-start}
}

/* iframe/embed mode (either ?embed=1 or auto-detected in JS) */
body.is-embed{
  background:transparent;
}
body.is-embed .page{
  max-width:none;
  margin:0;
  padding:0;
}
body.is-embed .header{
  padding:12px 12px 10px;
  margin:0;
}
body.is-embed .content{
  padding:0;
}
body.is-embed .mapCard{
  border-radius:0;
  box-shadow:none;
  border-left:0;
  border-right:0;
}
body.is-embed .mapWrap{
  padding:0;
}

body.is-embed .leafletMap{
  height:420px;
  min-height:300px;
  border-left:0;
  border-right:0;
}

@media (max-width: 760px){
  .header{
    gap:8px;
    margin-bottom:10px;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
  .filters{
    gap:6px;
    justify-content:center;
    width:100%;
  }
  .filter{
    padding:6px 10px;
    font-size:12px;
  }
  .zoomControls{
    gap:6px;
    justify-content:center;
    width:100%;
  }
  .zoomBtn{
    padding:6px 8px;
    font-size:12px;
  }
  .leafletMap{
    height:280px;
    min-height:280px;
  }
  body.is-embed .leafletMap{
    height:280px;
    min-height:280px;
  }

  /* legend already centered */
}

/* Legend below the map */
.legend--below{
  margin-top:10px;
  padding:0;
  background:transparent;
  border:0;
}

/* Category marker (Leaflet divIcon) */
.wm-pin{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-sizing:border-box;
}
.wm-pin--logotek{border:3px solid var(--red)}
.wm-pin--partner{border:3px solid var(--orange)}
.wm-pin--project{border:3px solid var(--blue)}

/* Cluster icon */
.wm-cluster{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#374151;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  border:2px solid rgba(255,255,255,.85);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}