/* Styling for the village layer. Loaded after the site's own map CSS, so it overrides it. */

/* Dots for places to stay. No hard black ring: it made them look stuck on rather than part of the map. */
.pz-dot{ display:block; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.45); }
.pz-dot-low{ box-shadow:none; }

/* Name tags: the black frame and white text shouted over the map. Softer frame in the site's own blue-grey,
   text a shade down from white. */
.pz-poi-lab{
  background:rgba(38,43,54,0.78) !important;
  color:#C2CAD6 !important;
  border:1px solid rgba(124,132,148,0.35);
  font-weight:600 !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}

/* Village names that come from the drawing: these were plain white browser tooltips, which did not belong. */
.leaflet-tooltip.lab{
  background:rgba(16,19,26,0.8); border:1px solid rgba(124,132,148,0.3); color:#C2CAD6;
  font-size:11px; padding:1px 6px; box-shadow:none;
}
.leaflet-tooltip.lab:before{ display:none; }
.leaflet-tooltip.lab.place{
  background:none; border:none; color:#DCE2EA; font-family:'Big Shoulders Display',sans-serif;
  font-weight:700; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
  text-shadow:0 1px 4px rgba(11,22,32,0.95);
}

/* Cluster bubbles: smaller, and quiet enough not to cover the village underneath. */
.pz-bubble{ display:flex; align-items:center; justify-content:center; border-radius:50%;
  font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:11px; color:#0B1620;
  opacity:0.78; }

button.pz-open-cluster{
  margin-top:6px; font-family:inherit; font-size:12px; cursor:pointer;
  background:#262B36; color:#F3F5F7; border:1px solid #3C4453; border-radius:5px; padding:4px 9px;
}
button.pz-open-cluster:hover{ border-color:#6FC6E8; color:#6FC6E8; }

/* The second pill: how sure we are of the POSITION. Same shape as the trading pill, but it carries the very
   icon the place is drawn with, so the icon itself reads as the confidence. */
.pz-poi-popup .pz-conf-pos{ margin-top:-4px; }
.pz-poi-popup .pz-conf-pos.is-high strong{ color:#DDE3EC; }
.pz-poi-popup .pz-conf-pos.is-low{ color:#78808F; }
.pz-poi-popup .pz-conf-dot{ width:10px; height:10px; border-radius:50%; flex:none; display:block; }
.pz-poi-popup .pz-conf-mark{ display:flex; width:14px; height:14px; flex:none; }
.pz-poi-popup .pz-conf-mark svg{ width:14px; height:14px; }

/* Cluster bubbles: no hard dark ring. */
.pz-bubble{ box-shadow:none !important; }

/* Both pills the same width, stacked tidily. Everything in the popup shares ONE left edge: the icon inside a
   pill, the note under it, the name, the category and the button. Only the pill's rounded outline sits outside
   that line, which is why the pill is pulled left by its own padding and border. */
.pz-poi-popup .pz-conf{
  display:flex !important; align-items:flex-start;
  margin-left:-9px;                 /* 8px padding + 1px border: puts the icon on the same line as the text below */
  width:calc(100% + 9px); box-sizing:border-box;
}
.pz-poi-popup .pz-conf > span{ flex:1 1 auto; }
/* the dot and the icon are the confidence mark, not a bar: they must not stretch */
.pz-poi-popup .pz-conf > span.pz-conf-dot{ flex:0 0 10px; }
.pz-poi-popup .pz-conf > span.pz-conf-mark{ flex:0 0 14px; }
.pz-poi-popup .pz-conf-detail{ margin-left:0; }

/* Names open their own place. The dots are small when you are zoomed right in, and the name beside one is a much
   bigger target, so clicking it should do what clicking the dot does.
   The label belongs to that place's own marker, so the click reaches the marker and opens its popup. */
.pz-poi-lab{ pointer-events:auto !important; cursor:pointer; }
.pz-poi-lab:hover{ background:rgba(38,43,54,0.95) !important; color:#F3F5F7 !important; border-color:rgba(111,198,232,0.6); }