/* ==== KARTA & POPUPS ==== */
#map {
  width: 100%;
  height: calc(100vh - var(--nav-h));
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,.10);
}

.map-popup { padding: 5px; max-width: 300px; }
.map-popup h5 { margin: 0 0 5px; }
.map-popup .popup-title { font-size: 1.15rem; font-weight: 700; color: var(--brand); }
.popup-image-container { margin: 10px 0; text-align: center; }
.popup-image { max-width: 100%; max-height: 150px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }

/* Kategoritaggar */
.map-popup .category-tag {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 2px 8px; border-radius: 12px; font-size: .8rem; margin-bottom: 10px;
}

/* Kontrollkort – ersatt av .controls-panel ovan, men behåll stilen om något annat använder .map-controls */
.map-controls {
  background: var(--card); padding: 14px; border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 14px; border: 1px solid var(--border);
}
.map-controls h4, .map-controls h5 { color: var(--brand); margin-bottom: 10px; font-weight: 600; }

/* Bildmodal */
.image-modal { display: none; position: fixed; z-index: 1000; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,.85); }
.modal-content { margin: auto; display: block; max-width: 90%; max-height: 80vh; object-fit: contain; }
#modalCaption { margin: 0 auto; width: 80%; max-width: 700px; text-align: center; color: #fff; padding: 10px 0; }
.close-modal { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: #bbb; }

/* Leaflet marginaler / stapling */
.leaflet-bottom.leaflet-left { margin: 12px; }
.leaflet-control.geocode-control { z-index: 10000; }