/* Stile per la pagina principale */
html, body {
  height: 100%; /* Altezza totale della finestra del browser */
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 2%;
}

.container {
  max-width: 90%;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 4%;
  font-size: 3rem;
}

/* Stile per la barra di ricerca */
#searchInput {
  width: 96%;
  padding: 2%;
  margin-bottom: 4%;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Stile per la mappa */
#map {
  margin-bottom: 4%;
  width: 100%;
}

/* Stili CSS aggiornati per il listing dei luoghi */
.listing {
  display: flex;
  margin-bottom: 6%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  flex-direction: column;
}

.listing-content {
  display: flex;
  width: 100%;
  align-items: flex-start; /* Allinea gli elementi all'inizio del contenitore */
}

.listing-text {
  padding: 4%;
  flex: 1;
}

.listing h3 {
  font-size: 2rem;
  margin-bottom: 2%;
  color: #333;
}

.listing p {
  font-size: 1.2rem;
  margin-bottom: 2%;
  color: #666;
}

.listing img {
  width: 40%;
  height: auto;
  object-fit: cover;
  border-radius: 0 0 8px 8px;
}

/* Stili per il bottone "Mostra sulla mappa" */
.show-on-map-btn {
  padding: 4% 6%;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 2%;
  width: 100%;
  text-align: center;
}

.show-on-map-btn:hover {
  background-color: #2980b9;
}

/* Stili per il popup */
.leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  max-width: 300px; /* Imposta la larghezza massima del popup */
  width: auto; /* Permette al popup di adattarsi al contenuto */
}

.leaflet-popup-content {
  padding: 2%;
  margin: 0;
}

.leaflet-popup-tip-container {
  display: none; /* Nasconde la punta del popup */
}

/* Stili per il contenuto del popup */
.popup-content {
  padding: 8px;
}

.popup-header h3 {
  font-size: 1.5em;
  margin-bottom: 5px;
}

.place-location {
  font-style: italic;
  color: #555;
}

.popup-body {
  
}

.place-details {
  line-height: 1.6;
  flex: 1; /* Flessibilità per il testo per occupare lo spazio disponibile */
}

.place-image {
  max-width: 100%;
  max-height: 100px; /* Imposta l'altezza massima per l'immagine */
  object-fit: contain; /* Per mantenere le proporzioni dell'immagine */
  height: auto;
  border-radius: 8px;
}

.popup-footer {
  margin-top: 15px;
  align-items: center;
}

.popup-footer button,
.popup-footer a {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.popup-footer button:hover,
.popup-footer a:hover {
  background-color: #0056b3;
}

.popup-footer .get-directions-btn{
    font-size: 14px;
}

.details-link {
  text-decoration: none;
  color: #fff;
}

.long-description-container {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 4%;
}

.popup-image {
  flex: 0 0 auto; /* Dimensione fissa per l'immagine */
  margin-left: 10px; /* Spazio a sinistra dell'immagine */
}

.popup-image img {
  max-width: 100%; /* Immagine responsiva */
  height: auto; /* Per mantenere le proporzioni originali */
  /* Altri stili per l'immagine */
}

.content-container {
  display: flex;
  align-items: center;
  margin-bottom: 4%;
}

.image-container {
  flex: 0 0 30%;
}

.project-image {
  max-width: 100%;
  height: auto;
}

.text-container {
  flex: 1;
}

.responsive-image {
  max-width: 100%;
  height: auto;
}

/* CSS del dettaglio SCHEDA  */
.scheda {
  background-color: #f9f9f9;
  margin-bottom: 4%;
  border-radius: 5px;
}

.luogo {
  font-style: italic;
}

.scheda-img {
  max-width: 100%;
  height: auto;
  margin-top: 2%;
}

.posizione {
  font-weight: bold;
}

.errore {
  color: red;
}

/* Stili per il bottone "Ottieni indicazioni" */

button.get-directions-btn {
  margin-top: 10px;
  padding: 2% 4%;
  border: none;
  border-radius: 5px;
  background-color: #3498db;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 4%;
  width: 100%;
  text-align: center;
}

.popup-buttons button.get-directions-btn{
  font-size: 1rem;
}

button.get-directions-btn:hover {
  background-color: #2980b9;
}

#tornaIndietroBtn {
  display: inline-block;
  padding: 2% 4%;
  margin-top: 4%;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#tornaIndietroBtn:hover {
  background-color: #0056b3;
}

/* Stile per il footer */
.footer {
  background-color: #f8f9fa; /* Cambia il colore di sfondo del footer */
  color: #333; /* Cambia il colore del testo */
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer a {
  color: #007bff; /* Cambia il colore dei link nel footer */
}

.footer a:hover {
  color: #0056b3; /* Cambia il colore al passaggio del mouse sui link */
}

a.details-btn {
  width: 100%;
  text-align: center;
  display: inline-block;
  padding: 8px 16px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

a.details-btn:hover {
  background-color: #0056b3;
}