/* ===============================
   MAPPA GLOBALE
   =============================== */

.global-map {
  position: fixed;

  top: calc(
    var(--header-h, 60px) +
    var(--safe-top, 0px)
  );

  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: auto;

  display: none;

  z-index: 1000;
}

.global-map.open {
  display: block;
}


/* ===============================
   LEAFLET
   =============================== */

#globalMap,
#globalMap .leaflet-container {
  width: 100%;
  height: 100%;
}


/* ===============================
   MAPBOX TERRAIN 3D
   =============================== */

#terrainMap {
  position: fixed;

  top: calc(
    var(--header-h, 60px) +
    var(--safe-top, 0px)
  );

  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: auto;

  display: none;

  z-index: 2000;
}

#terrainMap.open {
  display: block;
}

#terrainMap .mapboxgl-map,
#terrainMap .mapboxgl-canvas-container,
#terrainMap .mapboxgl-canvas {
  width: 100%;
  height: 100%;
}


/* ===============================
   GALLERY
   =============================== */

.gallery.hidden {
  display: none;
}


/* ===============================
   TOGGLE TRACCE ATTIVITÀ
   =============================== */

.map-toggle-routes {
  position: absolute;

  top: 12px;
  left: 56px;

  z-index: 2200;

  min-height: 36px;
  padding: 7px 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #111;

  border: 1px solid #cfcfcf;
  border-radius: 18px;

  box-shadow:
    0 2px 8px rgb(0 0 0 / 25%);

  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.map-toggle-routes:hover {
  background: #f7f7f7;
}

.map-toggle-routes:focus {
  outline: 2px solid #2b8cff;
  outline-offset: 2px;
}

.map-toggle-routes.active {
  background: #2b8cff;
  color: #fff;
  border-color: #2b8cff;
}


/* ===============================
   SELETTORE TIPO MAPPA TERRAIN
   =============================== */

.terrain-style-control {
  position: absolute;

  top: 10px;
  right: 56px;

  z-index: 2200;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}

.terrain-style-select {
  min-height: 36px;

  max-width:
    min(
      210px,
      calc(100vw - 130px)
    );

  padding:
    6px 32px 6px 10px;

  border:
    1px solid rgb(0 0 0 / 20%);

  border-radius: 6px;

  background-color:
    rgb(255 255 255 / 96%);

  color: #222;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;

  box-shadow:
    0 2px 8px rgb(0 0 0 / 18%);

  cursor: pointer;
}

.terrain-style-select:hover {
  background-color: #fff;
}

.terrain-style-select:focus {
  outline: 2px solid #2b8cff;
  outline-offset: 2px;
}


/* ===============================
   MOBILE
   =============================== */

@media (max-width: 600px) {
  .map-toggle-routes {
    top: 56px;
    left: 10px;

    max-width:
      calc(100vw - 20px);
  }

  #terrainMap > .map-toggle-routes {
    top: 56px !important;
    left: 10px !important;

    max-width:
      calc(100vw - 20px);
  }

  .terrain-style-control {
    top: 10px;
    right: 52px;
    left: 10px;
  }

  .terrain-style-select {
    width: 100%;
    max-width: none;
  }
}

/* Pulsante tracce sopra Mapbox 3D */
#terrainMap > .map-toggle-routes {
  position: absolute !important;

  top: 12px !important;
  left: 12px !important;

  z-index: 9999 !important;

  display: inline-flex;

  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
}