/* Explore map: photo pins with names. Near view shows every name, all-Nepal view stays uncluttered. */
.lyr-pin-wrap { width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; }
.lyr-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: max-content; cursor: pointer;
}
.lyr-pin > img {
  display: block; flex: none; box-sizing: border-box; width: 32px !important; height: 32px !important; max-width: none !important; aspect-ratio: 1; object-fit: cover !important; border-radius: 50%;
  border: 2px solid #f3d27a; background: #efe9dc; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  transition: width .2s ease, height .2s ease, border-color .2s ease;
}
.lyr-pin span {
  display: none; max-width: 150px; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255, 255, 255, .95); color: #2a1c0e; border-radius: 6px;
  font: 600 12.5px/1.45 'Outfit', 'Noto Sans', sans-serif; box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.lyr-near .lyr-pin > img { width: 48px !important; height: 48px !important; }
.lyr-near .lyr-pin span, .lyr-pin.on span { display: block; }
.lyr-pin.on > img { width: 56px !important; height: 56px !important; border-color: #fff; }
@media (hover: hover) {
  .lyr-pin:hover span { display: block; }
  .lyr-pin:hover > img { border-color: #fff; }
}

/* Popup: white card with photo, name, deity and location */
#root .sy-popup .leaflet-popup-content-wrapper {
  padding: 0 !important; overflow: hidden; background: #fff !important; border: 0 !important;
  border-radius: 12px !important; box-shadow: 0 8px 28px rgba(20, 10, 0, .35) !important;
}
#root .sy-popup .leaflet-popup-content { margin: 0 !important; width: 260px !important; }
#root .sy-popup .leaflet-popup-tip { background: #fff !important; border: 0 !important; box-shadow: none !important; }
#root .sy-popup .leaflet-popup-close-button {
  top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .92) !important; color: #2a1c0e !important; font-size: 18px !important; line-height: 1 !important;
}
#root .syp-inner { display: flex; flex-direction: column; padding: 0 0 14px !important; min-width: 0 !important; background: #fff !important; }
/* Each temple photo keeps its own shape, so nothing is cut: wide photos fill the card width,
   tall ones (some temples are photographed upright) are limited in height and centred. */
#root .lyr-pop-img { order: -1; display: block; align-self: center; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 175px; aspect-ratio: auto; object-fit: contain; margin-bottom: 10px; }
/* Until the photo arrives it holds the tallest size, so the map moves the card fully into view when it opens.
   The loaded photo can only make the card shorter, never push it out of view. */
#root .lyr-pop-img:not([data-sy="ready"]) { width: 100% !important; height: 175px !important; background: #efe9dc; }
/* Short phone screens: a lower limit, so the whole card still fits above the pin */
@media (max-height: 640px) {
  #root .lyr-pop-img { max-height: 150px; }
  #root .lyr-pop-img:not([data-sy="ready"]) { height: 150px !important; }
}
#root .syp-cat { display: none !important; }
#root .syp-name, #root .syp-deity, #root .syp-loc, #root .lyr-pop-go { margin-left: 14px !important; margin-right: 14px !important; }
#root .syp-name { color: #2a1c0e !important; font-size: 17px !important; line-height: 1.3 !important; letter-spacing: 0 !important; margin-bottom: 2px !important; }
#root .syp-deity { color: #5d5146 !important; font: 500 14px/1.4 'Outfit', 'Noto Sans', sans-serif !important; margin-bottom: 4px !important; }
#root .syp-loc { color: #5d5146 !important; font: 400 13px/1.4 'Outfit', 'Noto Sans', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; margin-bottom: 10px !important; }
#root .lyr-pop-go {
  order: 5; display: inline-flex; align-self: flex-start; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 8px;
  background: var(--c-gold) !important; border: 1px solid #c9992b; color: var(--c-gold-ink) !important;
  font: 600 14px 'Outfit', 'Noto Sans', sans-serif; text-decoration: none !important;
}

/* Clear zoom buttons */
#root .leaflet-control-zoom { border: 0 !important; border-radius: 10px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; }
#root .leaflet-control-zoom a {
  width: 42px !important; height: 42px !important; line-height: 42px !important; font-size: 22px !important;
  background: #fff !important; color: #2a1c0e !important; border: 0 !important;
}
#root .leaflet-control-zoom a:first-child { border-bottom: 1px solid #e8e2d8 !important; }
#root .leaflet-control-zoom a:hover { background: #faf5e9 !important; }

/* City names on the map */
.lyr-city { width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; pointer-events: none; }
.lyr-city span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; color: #fff;
  font: 600 13px/1.4 'Outfit', 'Noto Sans', 'Noto Sans Devanagari', sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .7);
}

/* Neighbouring countries: large, spaced, quiet, so they read as context and not as places to visit */
.lyr-country { width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; pointer-events: none; }
.lyr-country span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; color: rgba(255, 246, 225, .92);
  font: 600 clamp(14px, 2.2vw, 20px)/1.2 'Cinzel', 'Noto Serif Devanagari', Georgia, serif; letter-spacing: .22em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6);
}
.lyr-near .lyr-country span { opacity: .55; }
/* Small screens: one label for each country, so the names do not crowd the pins */
@media (max-width: 600px) { .lyr-country-2 { display: none !important; } }

/* The map's image source line is hidden at the owner's request. */
#root .leaflet-control-attribution { display: none !important; }

/* The map zooms without a click first (bundle patch), so the old "click to enable" hint is not needed.
   Its text was already hidden, which left an empty dark bar. */
#root .map-activate-tip { display: none !important; }

/* ---------- Pins: calmer when zoomed out, a proper card on hover ---------- */
/* All-Nepal view: smaller pins with a thin gold ring, so 60+ temples do not pile up. */
.leaflet-container:not(.lyr-near) .lyr-pin > img { width: 26px !important; height: 26px !important; border-width: 1.5px; }
.leaflet-container:not(.lyr-near) .lyr-pin.on > img { width: 46px !important; height: 46px !important; }
.lyr-pin span { max-width: 190px; }
/* The pin under the pointer comes to the front. */
.leaflet-marker-icon.lyr-pin-wrap:hover { z-index: 9999 !important; }

/* Hover card: photo, full name, deity and district. Pointer devices only; a tap opens the popup. */
.lyr-pin-card {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: 220px; padding: 0 0 10px; overflow: hidden; pointer-events: none;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(20, 10, 0, .38);
  font-family: 'Outfit', 'Noto Sans', 'Noto Sans Devanagari', sans-serif; text-align: left;
}
.lyr-pin-card img {
  display: block !important; width: 100% !important; height: 124px !important; max-width: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: cover !important; object-position: 50% 35%;
  background: #efe9dc;
}
.lyr-pin-card b { display: block; margin: 9px 12px 2px; color: #2a1c0e; font: 600 15px/1.3 'Cinzel', Georgia, serif; white-space: normal; }
.lyr-pin-card small { display: block; margin: 0 12px; color: #6a5a45; font-size: 13px; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .lyr-pin:hover .lyr-pin-card { display: block; animation: lyr-card-in .16s ease-out; }
  .lyr-pin:hover > span { display: none !important; }
}
@keyframes lyr-card-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* City names sit above the pins, with a firm outline so they read on the photo map. */
.lyr-city span { font-size: 13px; text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .75); }

/* Hover card stays inside the map (enhance.js sets the side shift and the below class). */
.lyr-pin-card { transform: translateX(calc(-50% + var(--lyr-shift, 0px))); }
.lyr-pin.lyr-card-below .lyr-pin-card { bottom: auto; top: calc(100% + 10px); }
@keyframes lyr-card-in { from { opacity: 0; } }

/* No flicker on hover: the pin's box is the photo only. The name label floats under it, so showing
   or hiding the label (or the card) never moves the photo away from the pointer. */
.lyr-pin { display: block; gap: 0; }
.lyr-pin > img { position: relative; }
.lyr-pin > span { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); }
@media (hover: hover) and (pointer: fine) {
  .lyr-pin:hover > span { display: none !important; }
}

/* Explore map: hint shown when the page is scrolled over the map (zoom needs pinch or Ctrl/Cmd + scroll). */
#root .leaflet-container .lyr-map-hint {
  position: absolute; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; pointer-events: none;
  background: rgba(20, 14, 6, .42); color: #fff; font: 600 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s ease;
}
#root .leaflet-container .lyr-map-hint.is-on { opacity: 1; }