/* ==========================================================================
   MAP (Leaflet) – shared styles
   File: /static/css/map.css
   ========================================================================== */


/* --- Instagram-style teardrop pins (SVG inside DivIcon) ------------------ */
:root{
  --pin-sight:      #ff5a5f;   /* red-ish */
  --pin-museum:     #7b61ff;   /* violet */
  --pin-park:       #28c76f;   /* green */
  --pin-restaurant: #ff9f43;   /* orange */
  --pin-theater:    #00c2ff;   /* cyan */
}

/* Wrapper for Leaflet’s DivIcon */
.poi-pin-wrap{
  /* no bg image – we fully control with inline SVG */
}

/* SVG filter for depth */
.poi-pin-svg{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

.glyph {
  fill: #fff;
  transform: scale(1.4) translate(6px, 8px); /* 1.4x bigger, nudged down */
  transform-origin: center;
}

/* Body color per category */
.pin-sight      .pin-shape{ fill: var(--pin-sight); }
.pin-museum     .pin-shape{ fill: var(--pin-museum); }
.pin-park       .pin-shape{ fill: var(--pin-park); }
.pin-restaurant .pin-shape{ fill: var(--pin-restaurant); }
.pin-theater    .pin-shape{ fill: var(--pin-theater); }


/* Inner disc + glyph tones */
.poi-pin-svg .pin-disc { fill: none; }
.poi-pin-svg .glyph { fill: #fff; }

/* Click to enable overlay */
.map-activation-overlay { display: block; }
.map-activation-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 600 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 999px;
  user-select: none;
}
.map-activation-overlay:focus-visible .map-activation-hint {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Keep the Google Fullscreen button visible and clickable above our overlay */
.gm-fullscreen-control { z-index: 20 !important; }

/* (Already added earlier) Click-to-enable overlay visuals */
.map-activation-overlay { display: block; }
.map-activation-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 600 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 999px;
  user-select: none;
}
.map-activation-overlay:focus-visible .map-activation-hint {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Google Maps wraps everything in .gm-style, use it to scope cleanly */
.gm-style .vw-locate-btn{
  background:#fff;         /* your color */
  box-shadow: 0 1px 2px rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  border: 0;
  border-radius: 2px;
}
.gm-style .vw-locate-btn:hover{
  filter: brightness(0.95);
}

/* spacing from neighboring controls */
.gm-style .vw-locate-wrap{
  margin-top:10px;            /* if RIGHT_TOP, keeps it just under fullscreen */
  margin-right:10px;          /* tweak offsets if you like */
  margin-bottom:10px;         /* useful when using RIGHT_BOTTOM */
}