/* Dots and name tags for the map: three dot sizes by tier (large, medium, small). Loaded by map.html with map-labels.js. */
.pz-tier-marker{ display:flex; align-items:center; justify-content:center; }
.pz-dot{ border-radius:50%; box-sizing:border-box; background:#6FC6E8; border:2px solid #0B3B4A; transition:transform 0.12s ease; }
.pz-dot-1{ box-shadow:0 0 0 2px rgba(111,198,232,0.35); }
.pz-dot-2{ border-width:1.5px; }
.pz-dot-3{ background:#8FA3B8; border-width:1px; }
/* Dot hover is driven by the .pz-hover class that assets/map-labels.js sets from the pointer's POSITION, never by CSS :hover: a :hover rule that grows the dot
   changes what is under the pointer and made neighbouring dots flicker. */
.leaflet-marker-icon.pz-tier-marker.pz-hover{ z-index:1000 !important; }
.leaflet-marker-icon.pz-tier-marker.pz-hover .pz-dot{ transform:scale(1.5); }   /* grows whether the mouse is on the dot or on its name */

/* Hover on a tag that already carries a pass colour: the same colour a shade LIGHTER, background only, text unchanged.
   A translucent white layer over the pass colour works for a single colour and for the striped multi-pass background alike.
   (Four classes so it beats both the pass rule in map-layers.css and the generic hover rule in map.html.) */
.leaflet-tooltip.pz-label.pz-pass-tag.pz-resort-active{
  background:linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)), var(--pz-pass-bg) !important;
  color:#fff !important; box-shadow:0 0 0 2px rgba(16,19,26,0.6) !important;   /* the generic hover rule would make the text dark: keep it as the tag's own */
}
.leaflet-tooltip.pz-label.pz-pass-tag.pz-pass-light.pz-resort-active{ color:#10131A !important; }
/* Everything shows its name on hover, including a name the pass filter has quietened. */
.leaflet-tooltip.pz-label.pz-pass-hide.pz-resort-active{ opacity:1 !important; pointer-events:auto !important; }

/* A dot that is on a pass takes the pass colour itself: no ring, no glow */
.leaflet-marker-icon.pz-pass-hit .pz-dot{ background:var(--pz-pass-bg) !important; border-color:#10131A !important; box-shadow:none !important; }

/* The name that appears when the mouse is on a place with no printed name: never catches the mouse itself. */
.leaflet-tooltip.pz-label.pz-poi-hover{ pointer-events:none; }

/* Place names (cities, villages): reference only. Faint, small, never clickable, hidden wherever they would touch anything else. */
.leaflet-tooltip.pz-place-name{
  background:none !important; border:none !important; box-shadow:none !important; pointer-events:none !important;
  color:rgba(199,205,214,0.62) !important; font-size:11px !important; opacity:1 !important;
  text-shadow:0 0 3px #10131A, 0 0 3px #10131A, 0 1px 2px #10131A;
}
.leaflet-tooltip.pz-place-name.pz-place-village{ font-size:11.5px !important; letter-spacing:0.05em; }

/* The dot follows: while its name is lit (mouse on the dot OR on the name) a pass-coloured dot goes a shade lighter too. */
.leaflet-marker-icon.pz-pass-hit.pz-hover .pz-dot{ background:linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)), var(--pz-pass-bg) !important; }

/* Zoom: the name tags fade out where they stand, then fade back in once the zoom is over and their places are worked out,
   most important first (three short waves). The fading is done by the browser (a CSS opacity transition), no script runs per frame. */
.leaflet-tooltip.pz-label,
.leaflet-tooltip.pz-place-name{ transition:opacity 0.42s ease; }
.leaflet-tooltip.pz-wave-2{ transition-delay:0.28s; }
.leaflet-tooltip.pz-wave-3,
.leaflet-tooltip.pz-place-name{ transition-delay:0.56s; }
.leaflet-container.pz-zooming .leaflet-tooltip.pz-label,
.leaflet-container.pz-zooming .leaflet-tooltip.pz-place-name{
  opacity:0 !important; pointer-events:none !important; transition:opacity 0.2s ease !important; transition-delay:0s !important;
}
/* Phones and low-power devices: one simple fade, no waves. Reduced-motion: no fade at all. */
.leaflet-container.pz-fade-simple .leaflet-tooltip{ transition-delay:0s !important; }
.leaflet-container.pz-fade-none .leaflet-tooltip{ transition:none !important; }

/* A place name stays hidden until the engine has chosen its spot (the village drawing is rebuilt after every zoom, and a fresh
   tag must not show in its default position first). The engine switches it on, once, in its final place. */
.leaflet-tooltip.pz-place-name{ visibility:hidden; }

/* The region names fade with the other name tags during a zoom (first wave: they are the most important). */
.leaflet-marker-icon.pz-region-label{ transition:opacity 0.42s ease; }
.leaflet-container.pz-zooming .leaflet-marker-icon.pz-region-label{ opacity:0 !important; pointer-events:none !important; transition:none !important; }   /* gone at once: fading while the map zooms under it made it slide about */
.leaflet-container.pz-fade-none .leaflet-marker-icon.pz-region-label{ transition:none !important; }

/* No browser focus ring round the map frame when it is clicked or used (it showed as a coloured rectangle). */
.leaflet-container:focus,
.leaflet-container:focus-visible{ outline:none !important; }