:root{
  --wj-care:#22c55e;
  --wj-buddy:#86efac;
  --wj-request:#facc15;
  --wj-trusted:#38bdf8;
  --wj-dark:#05210f;
  --wj-text:#f7fff8;
}

/* Clean marketplace map states:
   zoom wide  = coloured dots
   zoom mid   = coloured purpose pins
   zoom close = Walkje logo pins with coloured rings
*/

.leaflet-container.wj-map-wide .leaflet-popup,
.leaflet-container.wj-map-mid .leaflet-popup{
  font-size:13px;
}

.wj-market-pin,
.wj-live-pin{
  box-sizing:border-box!important;
  transform-origin:center center!important;
  transition:
    width .18s ease,
    height .18s ease,
    border-radius .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease!important;
}

.wj-market-pin{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid rgba(5,20,12,.92);
  box-shadow:0 8px 26px rgba(0,0,0,.32);
  color:#05210f;
  font-weight:1000;
  overflow:visible;
}

.wj-market-pin.provider,
.wj-live-pin.provider{background:var(--wj-care)!important}

.wj-market-pin.buddy,
.wj-live-pin.buddy{background:var(--wj-buddy)!important}

.wj-market-pin.request,
.wj-live-pin.request{background:var(--wj-request)!important}

.wj-market-pin.trusted,
.wj-live-pin.trusted{background:var(--wj-trusted)!important}

.wj-market-pin .wj-pin-logo{
  width:100%;
  height:100%;
  border-radius:inherit;
  background-image:url("/media/icons/paw.svg");
  background-size:72%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#0f3a21;
  display:none;
}

.wj-market-pin .wj-pin-emoji{
  display:grid;
  place-items:center;
  line-height:1;
}

.wj-market-pin .wj-pin-label{
  position:absolute;
  left:50%;
  top:calc(100% + 7px);
  transform:translateX(-50%);
  max-width:190px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:28px;
  display:flex;
  align-items:center;
  border-radius:999px;
  padding:0 10px;
  background:rgba(5,20,12,.88);
  border:1px solid rgba(255,255,255,.14);
  color:#f7fff8;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  pointer-events:none;
}

/* Zoomed out: no logos, no text. Just coloured purpose dots. */
.leaflet-container.wj-map-wide .wj-market-pin{
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  border-width:3px!important;
  box-shadow:0 0 0 4px rgba(5,20,12,.34),0 8px 22px rgba(0,0,0,.30)!important;
}

.leaflet-container.wj-map-wide .wj-market-pin .wj-pin-emoji,
.leaflet-container.wj-map-wide .wj-market-pin .wj-pin-logo,
.leaflet-container.wj-map-wide .wj-market-pin .wj-pin-label{
  display:none!important;
}

.leaflet-container.wj-map-wide .wj-live-pin{
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  font-size:0!important;
  border-width:3px!important;
  box-shadow:0 0 0 4px rgba(5,20,12,.34),0 8px 22px rgba(0,0,0,.30)!important;
}

/* Mid zoom: coloured pins with tiny purpose emoji, still no labels. */
.leaflet-container.wj-map-mid .wj-market-pin{
  width:32px!important;
  height:32px!important;
  border-radius:999px!important;
  border-width:3px!important;
}

.leaflet-container.wj-map-mid .wj-market-pin .wj-pin-emoji{
  display:grid!important;
  font-size:15px!important;
}

.leaflet-container.wj-map-mid .wj-market-pin .wj-pin-logo,
.leaflet-container.wj-map-mid .wj-market-pin .wj-pin-label{
  display:none!important;
}

.leaflet-container.wj-map-mid .wj-live-pin{
  width:32px!important;
  height:32px!important;
  border-radius:999px!important;
  font-size:15px!important;
}

/* Close zoom: Walkje logo pins with coloured rings and short labels. */
.leaflet-container.wj-map-close .wj-market-pin{
  width:42px!important;
  height:42px!important;
  border-radius:15px!important;
  background:#0f3a21!important;
  border-width:3px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.34)!important;
}

.leaflet-container.wj-map-close .wj-market-pin.provider{border-color:var(--wj-care)!important}
.leaflet-container.wj-map-close .wj-market-pin.buddy{border-color:var(--wj-buddy)!important}
.leaflet-container.wj-map-close .wj-market-pin.request{border-color:var(--wj-request)!important}
.leaflet-container.wj-map-close .wj-market-pin.trusted{border-color:var(--wj-trusted)!important}

.leaflet-container.wj-map-close .wj-market-pin .wj-pin-logo{
  display:block!important;
}

.leaflet-container.wj-map-close .wj-market-pin .wj-pin-emoji{
  display:none!important;
}

.leaflet-container.wj-map-close .wj-market-pin .wj-pin-label{
  display:flex!important;
}

.leaflet-container.wj-map-close .wj-live-pin{
  width:42px!important;
  height:42px!important;
  border-radius:15px!important;
  font-size:0!important;
  background:#0f3a21!important;
  background-image:url("/media/icons/paw.svg")!important;
  background-size:72%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}

.leaflet-container.wj-map-close .wj-live-pin.provider{border-color:var(--wj-care)!important}
.leaflet-container.wj-map-close .wj-live-pin.buddy{border-color:var(--wj-buddy)!important}
.leaflet-container.wj-map-close .wj-live-pin.request{border-color:var(--wj-request)!important}
.leaflet-container.wj-map-close .wj-live-pin.trusted{border-color:var(--wj-trusted)!important}

.wj-map-legend-v20{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:900;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  max-width:calc(100% - 24px);
  pointer-events:none;
}

.wj-map-legend-v20 span{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:0 9px;
  background:rgba(5,20,12,.86);
  border:1px solid rgba(255,255,255,.14);
  color:#f7fff8;
  font-size:11px;
  font-weight:1000;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.wj-map-legend-v20 b{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}

.wj-map-legend-v20 .care b{background:var(--wj-care)}
.wj-map-legend-v20 .buddy b{background:var(--wj-buddy)}
.wj-map-legend-v20 .request b{background:var(--wj-request)}
.wj-map-legend-v20 .trusted b{background:var(--wj-trusted)}

@media(max-width:900px){
  .wj-map-legend-v20{
    bottom:92px;
  }

  .leaflet-container.wj-map-close .wj-market-pin .wj-pin-label{
    display:none!important;
  }

  .leaflet-container.wj-map-close .wj-market-pin{
    width:39px!important;
    height:39px!important;
  }
}