/* -------- MAP & BASICS -------- */
html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  transition: background 0.3s, color 0.3s;
}

.top-bar {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

#searchInput {
  border: none; outline: none;
  font-size: 13px; padding: 6px 10px;
  border-radius: 999px;
  background: #f0f0f0; width: 180px;
}

#locateBtn {
  background: #c00; color: #fff;
  border: none; padding: 6px 10px;
  border-radius: 999px; cursor: pointer;
  font-size: 14px;
}
#locateBtn.active { background: #0c0; }

#darkToggle {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1000;
  background: #fff; padding: 6px 10px;
  font-size: 16px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer; user-select: none; border: none;
  transition: background 0.3s, color 0.3s;
}

.suggestions {
  position: absolute;
  top: 58px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #fff; max-height: 140px;
  overflow-y: auto; font-size: 13px;
  width: 250px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.suggestions div {
  padding: 6px 10px; cursor: pointer;
  text-decoration: none; /* rimuove sottolineatura */
}
.suggestions div:hover { background-color: #eee; }

.nearest-info {
  position: absolute;
  top: 58px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000; font-size: 13px;
  background: #fff; padding: 10px 12px;
  border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: none;
  max-width: 300px;
}

.nearest-info div.links {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 4px;
}

.nearest-info a, .leaflet-popup-content a {
  text-decoration: none; /* rimuove sottolineatura ovunque */
  font-weight: 500;
  color: #2563eb;
  white-space: nowrap;
}
.nearest-info a:hover, .leaflet-popup-content a:hover { color: #1e40af; text-decoration: underline; }

/* DARK MODE */
body.dark {
  background: #333; color: #eee;
}
body.dark .top-bar,
body.dark #darkToggle,
body.dark .suggestions,
body.dark .nearest-info {
  background: #777; color: #eee;
}
body.dark .suggestions div:hover { background: #888; }
body.dark #searchInput { background: #888; color: #eee; }
body.dark .leaflet-tile-pane img { filter: brightness(1.5) contrast(0.8); }

/* FAVORITES BUTTON */
#open-favorites {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 16px; left: 16px;
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  border: none; border-radius: 50%;
  font-size: 28px; cursor: pointer;
  z-index: 1000;
}

/* POPUP FAVORITI */
#favorites-popup {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1100;
}
.fav-popup-content {
  background: #fff;
  width: 90%; max-width: 320px;
  margin: 10% auto; padding: 20px;
  border-radius: 8px; position: relative;
}
#close-favorites { position: absolute; top: 8px; right: 12px; font-size: 24px; cursor: pointer; }
#favorites-list { list-style: none; padding: 0; margin-top: 12px; }
#favorites-list li { padding: 8px 0; border-bottom: 1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
#favorites-list li a { text-decoration: none; color:#003366; font-weight:500; }
body.dark #favorites-list li a { color: #ffd54f; }
#favorites-list li button.remove-fav { background:transparent; border:none; color:#ff6666; cursor:pointer; font-size:16px; transition: transform 0.2s ease,color 0.2s ease; }
#favorites-list li button.remove-fav:hover { color:#ff0000; transform:scale(1.2); }

/* STELLE POPUP ANIMAZIONE */
.popup-star.fav-on  { color: gold; }
.popup-star.fav-off { color: #ccc; }
.popup-star { display: inline-block; transition: transform 0.2s ease; }
.popup-star.animate { animation: star-burst 0.6s ease-out; }

@keyframes star-burst {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.6) rotate(-20deg); }
  40%  { transform: scale(1.4) rotate(20deg); }
  60%  { transform: scale(1.6) rotate(-20deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* ---------------------- POSIZIONE UTENTE ---------------------- */
.user-location-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a73e8 40%, #4285f4 100%);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(26,115,232,0.8);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 6px rgba(26,115,232,0.6); }
  50% { transform: scale(1.2); box-shadow: 0 0 12px rgba(26,115,232,0.9); }
  100% { transform: scale(1); box-shadow: 0 0 6px rgba(26,115,232,0.6); }
}
/* Marker blu stile Google Maps per la posizione utente */
.user-location-dot {
  width: 16px;
  height: 16px;
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* Pallino blu + alone */
.leaflet-user-circle {
  stroke-dasharray: 4;
  animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
  0% { stroke-opacity: 0.6; fill-opacity: 0.2; }
  50% { stroke-opacity: 0.2; fill-opacity: 0.1; }
  100% { stroke-opacity: 0.6; fill-opacity: 0.2; }
}