/* Boutons Recentrer et Nord verticalement à droite */
#recenterNorthButtons {
    position: absolute;
    bottom: 4.1875rem;          /* 0.75rem gap to #infoButtonMain (2.8125rem tall) */
    right: 0.625rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;              /* vorher 0.3125rem → grösserer Abstand zwischen #followMe und #resetNorth */
}
/* Make distance of North and FollowMe Button bigger */
button#resetNorth {
margin-top: 0.3125rem;
}
/* Remove default Leaflet zoom control; we use custom buttons */
.leaflet-control-zoom { display: none !important; }

#recenterNorthButtons button {
    width: 2.8125rem;
    height: 2.8125rem;
font-size: 1.375rem;
border-radius: 50%;
background: white;
border: none;
box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}

/* Layer button icon size */
#recenterNorthButtons #layerBtn img { width: 1.625rem; height: 1.625rem; pointer-events: none; }

/* Layer chooser popup (bottom-right) */
#layerPopup {
  position: absolute;
  right: 0.625rem;
  bottom: 7.5rem; /* above the bottom buttons */
  z-index: 1100;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.25);
  width: min(92vw, 22.5rem);
  padding: 0.75rem;
  display: none;
}
#layerPopup.visible { display: block; }
#layerPopup .lp-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; margin-bottom: 0.5rem;
}
#layerPopup .lp-close {
  border: none; background: transparent; font-size: 1.25rem; cursor: pointer;
}
#layerPopup .lp-options { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.375rem; }
#layerPopup .lp-option {
  flex: 1; border: 0.0625rem solid #ddd; border-radius: 0.625rem; padding: 0.5rem; cursor: pointer; text-align: center;
}
#layerPopup .lp-option.active { border-color: #0ea5e9; box-shadow: 0 0 0 0.125rem rgba(14,165,233,0.25) inset; }
#layerPopup .lp-thumb { width: 100%; aspect-ratio: 1/1; border-radius: 0.5rem; background: #eee; margin-bottom: 0.375rem; }
#layerPopup .lp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; display: block; }
#layerPopup .lp-label { font-size: 0.75rem; color: #333; }
#layerPopup .lp-row { display:flex; align-items:center; justify-content: flex-start; margin-top: 0.5rem; gap:0.5rem; }
#layerPopup .lp-row label { display:flex; align-items:center; gap:0.5rem; }
#layerPopup #lpGradientLabel { white-space: nowrap; }

/* Hide old layer buttons in top-right panel */
#buttonPanel #satelliteBtn, #buttonPanel #minimalBtn, #buttonPanel #gradientBtn { display: none; }

/* (removed) no offset needed since default zoom control is hidden */

/* Gradient legend (shown when gradient overlay is on) */
#gradientLegend {
  position: absolute;
  left: 0.625rem;
  top: auto; /* will be set via JS under #searchInput */
  bottom: auto;
  /* Keep above the map tiles but under popups (filter/add/layer/info/watch overlay) */
  z-index: 1200;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.25);
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  color: #111827;
  display: none; /* toggled via JS */
}
#gradientLegend .gl-title { font-weight: 600; margin-bottom: 0.375rem; }
#gradientLegend .gl-item { display:flex; align-items:center; gap:0.5rem; line-height: 1.2; }
#gradientLegend .gl-item + .gl-item { margin-top: 0.25rem; }
#gradientLegend .gl-swatch { width: 0.875rem; height: 0.875rem; border-radius: 0.1875rem; border: 1px solid rgba(0,0,0,0.08); }

/* Déplacer Go Live en haut à droite */
/*#wm-status-teaser {
    /top: 3.125rem !important;
    right: 0.625rem !important;
    bottom: auto !important;
}
    /* Boutons horizontaux */
    #buttonPanel {
      position: absolute;
      top: 0.625rem;
      right: 0.625rem;
      z-index: 1000;
      display: flex;
      gap: 0.3125rem;
    }
    #buttonPanel button {
      background: white;
      border: 0.0625rem solid #ccc;
      padding: 0.3125rem 0.625rem;
      cursor: pointer;
    }

/* Hidden by default; shown when a route exists */
#saveRouteBtn{ display: none; }
#clearRouteTopBtn{ display: none; }
#cancelRouteTopBtn{ display: none; }
#routeProfileTopWrap{ display: none; }
#routeProfileTop{ margin-bottom: 0 !important; }
/* removed centering class for save button */

/* Hide Snap to Roads in popup */
#snapToRoads, #snapToRoadsLabel { display: none !important; }