#leaflet-map {
  height: 100dvh;
  width: 100%;
}

#leaflet-map .leaflet-top.leaflet-right {
  max-width: calc(100% - 2rem - 45px);
}

#leaflet-map .leaflet-control-layers-expanded {
  background-color: transparent;
  border: 0;
  max-width: 100%;
}

#leaflet-map .leaflet-control-layers-list {
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

#leaflet-map .leaflet-control-layers-overlays {
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  scrollbar-width: none; /* Nasconde la barra di scorrimento in Firefox */
  padding: 0 0.5rem;
}

#leaflet-map .leaflet-control-layers-overlays::-webkit-scrollbar {
  display: none; /* Nasconde la barra di scorrimento in Chrome, Safari e Edge */
}

#leaflet-map .leaflet-control-layers-selector {
  display: none;
}

#leaflet-map .leaflet-control-layers-overlays label {
  display: inline-block;
  margin-right: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: #e0e0e0; /* Colore sfondo quando disattivato */
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

#leaflet-map .leaflet-control-layers-overlays .museo-a-cielo-aperto-control:has(input:checked) {
  background-color: #f7cdad; /* Colore sfondo quando attivato */
  color: black;
}

#leaflet-map .leaflet-control-layers-overlays .punti-di-interesse-control:has(input:checked) {
  background-color: #d6814b; /* Colore sfondo quando attivato */
  color: white;
}

#leaflet-map .leaflet-control-layers-overlays .itinerario-control:has(input:checked) {
  background-color: #896151; /* Colore sfondo quando attivato */
  color: white;
}

#leaflet-map .leaflet-control-layers-separator {
  display: none;
}

#leaflet-map .leaflet-popup-content-wrapper {
  background-color: #edeae6;
}

#leaflet-map .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: 13px 20px;
  text-align: center;
  min-width: 40vw;
  width: auto!important;

}

#leaflet-map .leaflet-popup-content-wrapper .leaflet-popup-content-link {
  color: black;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

#leaflet-map .leaflet-popup-content-wrapper .leaflet-popup-content-image {
  width: 2rem;
  margin: 0.75rem auto;
  display: block;

}

#leaflet-map .leaflet-popup-tip {
  background-color: #edeae6;
}

#leaflet-map .leaflet-popup-close-button {
  display: none;
}

#leaflet-map #leaflet-overlay {
  position: absolute;
  z-index: 1100;
  height: 80vh;
  width: 100vw;
  bottom: -100%;
  left: 0;
  right: 0;
  background-color: #edeae6;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  border-top-left-radius: 60px 10px;
  border-top-right-radius: 60px 10px;
  padding: 1.5rem 2rem;
  transition: bottom .5s;
}

#leaflet-map .leaflet-overlay-content-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: min-content 30% 10% auto 65px;
  grid-template-areas: "title title close-icon"
    "image image image"
    "audio audio audio"
    "text text text"
    ". map-icon .";
    height: 100%;
}

#leaflet-map .leaflet-overlay-content-wrapper.hidden > * {
  opacity: 0;
  visibility: hidden;
}

#leaflet-map .leaflet-overlay-content-wrapper > * {
  transition: 500ms all;
  transition-delay: 300ms;
  opacity: 1;
  visibility: visible;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-loading-spinner {
  grid-area: 3/2/4/3;
  animation: rotate-spinner 1s infinite;
  height: 100%;
  place-self: center;
  opacity: 0;
  visibility: hidden;
  transition: 250ms all;
}

#leaflet-map .leaflet-overlay-content-wrapper.hidden .leaflet-overlay-content-loading-spinner {
  opacity: 1;
  visibility: visible;
}

@keyframes rotate-spinner {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-title {
  grid-area: title;
  font-size: 1.75rem;
  padding: 0;
  align-self: center;
  justify-self: start;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-close-icon {
  grid-area: close-icon;
  margin: 0;
  align-self: center;
  justify-self: end;
  height: 2rem;
  width: 2rem;
}
#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-image {
  grid-area: image;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
  padding-top: 10px;
}
#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio {
  grid-area: audio;
  width: 100%;
  box-shadow: none;
  background: transparent;
  place-self: center;
  padding: 0;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .play-pause-btn {
  background: radial-gradient(circle, rgba(178,151,126,1) 0%, rgba(199,170,133,1) 100%);
  border-radius: 50%;
  height: 36px;
  width: 36px;
  display: grid;
  place-items: center;
  padding: 8px;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .play-pause-btn svg {
  height: 100%;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .play-pause-btn[aria-label="Play"] svg {
  margin-left: 3px;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .play-pause-btn path {
  fill: #414142;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .controls__current-time {
  display: none;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .controls__slider {
  margin: 0;
  height: 8px;
  border: 1px solid white;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .controls__progress {
  background: radial-gradient(circle, rgba(178,151,126,1) 0%, rgba(199,170,133,1) 100%);
  height: 8px;
  margin: -1px;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .progress__pin {
  display: none;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-audio .controls__total-time {
  display: none;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-text {
  overflow: hidden;
  grid-area: text;
  margin-bottom: 15px;
  font-size: 1rem;
  position: relative;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-text-inner {
  overflow-y: scroll;
  max-height: 100%;
  padding-bottom: 30px;
}

#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-text-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px; /* Altezza della sfumatura */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(237, 234, 230, 1) 100%);
  pointer-events: none;
}
#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-map-icon {
  grid-area: map-icon;
  place-self: center;
}
#leaflet-map .leaflet-overlay-content-wrapper .leaflet-overlay-content-map-icon img {
  max-height: 65px;
  height: 100%;
  border-radius: 50%;
  box-shadow: -7px -5px 9px 0px rgba(0,0,0,0.3);
}
/* Classi per le transizioni */

#leaflet-map #leaflet-overlay.slide-in {
  bottom: 0;
}

#leaflet-map #leaflet-overlay.slide-out {
  bottom: -100%;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (min-width: 1080px) {
  #leaflet-map .leaflet-marker-pane .leaflet-marker-icon {
    height: 1.5rem!important;
    width: 1.5rem!important;
  }

  #leaflet-map .marker-cluster {
    border-radius: 50%;
  }

  #leaflet-map .marker-cluster div {
    height: 1rem!important;
    width: 1rem!important;
    margin-top: 0.25rem!important;
    margin-left: 0.25rem!important;
    font-size: 0.75rem;
    border-radius: 50%;
    
  }
  #leaflet-map .marker-cluster div span {
    line-height: 1rem;
  }
}