/* Fake-zoom OpenStreetMap widget (static). 10 pre-rendered zoom levels; click -> Google Maps. */
.osm-fakemap{
  position:relative; width:690px; max-width:100%; height:500px;
  overflow:hidden; border:1px solid #b7b7b7; background:#e9e5dc;
  cursor:pointer; -webkit-user-select:none; user-select:none;
}
.osm-fakemap .osm-stage{position:absolute; inset:0; top:0; left:0; right:0; bottom:0;}
.osm-fakemap .osm-layer{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.08);
  transition:opacity .28s ease, transform .28s ease; pointer-events:none;
}
.osm-fakemap .osm-layer.osm-active{opacity:1; transform:scale(1);}

/* centre marker pin */
.osm-fakemap .osm-pin{
  position:absolute; left:50%; top:50%; width:22px; height:22px;
  margin-left:-11px; margin-top:-22px; z-index:5; pointer-events:none;
}
.osm-fakemap .osm-pin::before{
  content:""; position:absolute; left:3px; top:0; width:16px; height:16px;
  background:#e2231a; border:2px solid #fff; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.osm-fakemap .osm-pin::after{
  content:""; position:absolute; left:9px; top:6px; width:4px; height:4px;
  background:#fff; border-radius:50%; z-index:6;
}

/* zoom controls */
.osm-fakemap .osm-zoom{
  position:absolute; top:10px; left:10px; z-index:10; display:flex; flex-direction:column;
  border-radius:4px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.osm-fakemap .osm-zoom button{
  width:34px; height:34px; padding:0; border:0; background:#fff; color:#333;
  font:20px/34px Arial,Helvetica,sans-serif; cursor:pointer; display:block;
}
.osm-fakemap .osm-zoom button + button{border-top:1px solid #ddd;}
.osm-fakemap .osm-zoom button:hover{background:#f0f0f0;}
.osm-fakemap .osm-zoom button:disabled{color:#bbb; background:#fafafa; cursor:default;}

/* hint + attribution */
.osm-fakemap .osm-openhint{
  position:absolute; left:0; bottom:0; z-index:8; background:rgba(255,255,255,.85); color:#333;
  font:12px/1.4 Arial,Helvetica,sans-serif; padding:3px 9px; border-top-right-radius:4px;
}
.osm-fakemap .osm-attr{
  position:absolute; right:0; bottom:0; z-index:8; background:rgba(255,255,255,.75);
  font:10px/1.4 Arial,Helvetica,sans-serif; padding:2px 6px;
}
.osm-fakemap .osm-attr a{color:#0645ad; text-decoration:none;}
.osm-fakemap .osm-attr a:hover{text-decoration:underline;}
.osm-fakemap:focus{outline:2px solid #2b6cb0; outline-offset:-2px;}
