/* Stili di base */

#start-screen {
  height: 100vh;
  background: url('images/sfondi/sfondostart.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start-overlay {
  padding: 40px;
  padding-top: 120px;
  border-radius: 20px;
  text-align: center;
  max-width: 400px;
}


.start-title {
  font-size: 28px;
  margin-bottom: 10px;
  color: #2e7d32;
}

.start-subtitle {
  font-size: 16px;
  margin-bottom: 30px;
  color: #555;
}

.start-buttons button {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  font-size: 16px;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.start-buttons button:hover {
  background-color: #388e3c;
}


body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    font-size: 2rem;
}

main {
  background: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 400px;
  animation: fadeIn 0.5s ease;
  margin: 0 auto; /* Centra il contenuto orizzontalmente */
}

/* Per schermi più piccoli (smartphone) */
@media (max-width: 768px) {
  main {
    max-width: 90%;  /* Larghezza più grande per schermi più piccoli */
    padding: 1.5rem; /* Riduci il padding per avere più spazio */
  }
}

/* Per schermi grandi (PC) */
@media (min-width: 769px) {
  main {
    max-width: 600px;  /* Aumenta la larghezza massima per schermi più grandi */
    padding: 2.5rem;   /* Maggiore padding per schermi più grandi */
  }
}


form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

input, select {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1rem;
  transition: 0.3s ease;
}

input:focus, select:focus {
  border-color: #00c896;
  outline: none;
}

button {
  padding: 0.9rem;
  background: #00c896;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #00aa7f;
}

p {
  text-align: center;
  margin-top: 1rem;
}

a {
  color: #0077ff;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.center-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* altezza piena viewport */
    background-color: #f0f0f0; /* opzionale, per stacco visivo */
    padding: 1rem;
}

#forgot-password-section {
    padding: 2rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 100%;
    box-sizing: border-box;
}

#forgot-password-section input {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

#forgot-password-section button {
    width: 100%;
    padding: 1rem;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#forgot-password-section button:hover {
    background-color: #218838;
}

#goToWelcome() {
  position: fixed
  margin-left: 150px;
}


/* Menu di navigazione */
#bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f4f4f4; 
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    z-index: 1000; /* Per assicurarsi che il menu stia sopra gli altri elementi */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Ombra per effetto 3D */
}

/* Elenco dei pulsanti nel menu */
#bottom-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: space-around;
}

/* Stili dei singoli elementi di menu */
#bottom-nav li {
    text-align: center;
    flex: 1;
    padding: 12px;
    transition: transform 0.3s ease;
    position: relative;
}

/* Stili delle icone */
#bottom-nav i {
    font-size: 32px; /* Icone un po' più grandi */
    color: #777;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover su ciascun elemento */
#bottom-nav li:hover {
    cursor: pointer;
    transform: translateY(-5px); /* Solleva leggermente il pulsante al passaggio del mouse */
}

/* Hover sulle icone */
#bottom-nav li:hover i {
    transform: scale(1.3); /* Ingrandisce ulteriormente l'icona durante l'hover */
    color: #777; /* Mantiene il bianco sull'hover */
}

/* Aggiungi un'animazione per le icone quando sono cliccate */
#bottom-nav li:active i {
    transform: scale(1.1);
}

/* Selezione del pulsante attivo (quando la sezione è selezionata) */
#bottom-nav li.selected {
    background-color: #388E3C;
    transform: scale(1.1);
}

/* Mappa */
#map-container {
    height: calc(100vh - 50px); /* Mappa che occupa tutto lo schermo meno il menu */
    width: 100%;
}

/* Profilo Section */
.profile-container {
    background-image:
    linear-gradient(to bottom, rgb(0 0 0 / 33%) 45%, #ffffff 75%), url(images/sfondi/profiloalto.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-blend-mode: normal;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.id-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #333;
}

.id-card-list li {
  margin-bottom: 6px;
}

.id-card-list strong {
  display: inline-block;
  color: #222;
}



.profile-pic {
    width: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 25px;
    aspect-ratio: 1/1;
}

.username {
  font-size: 14px;
  color: #555;
  margin-top: 4px;
}


#user-name {
    font-size: 0.8rem;
}

#username {
    font-size: 1rem;
    color: #888;
}

.user-role {
  font-size: 16px;
  color: #555; /* Puoi cambiare il colore come preferisci */
}


.profile-details {
    margin-bottom: 20px;
}

.profile-details h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.profile-details p {
    font-size: 1rem;
    margin: 5px 0;
}

.profile-details ul {
    list-style-type: none;
    padding: 0;
}

.profile-details ul li {
    font-size: 1rem;
    margin: 5px 0;
}

/* Profilo Settings */
.profile-settings {
    text-align: center;
}

#edit-profile {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#edit-profile:hover {
    background-color: #45a049;
}

/* Aggiustamenti responsivi per schermi più piccoli */
@media screen and (max-width: 768px) {
    .profile-container {
      
    }

    .profile-pic {
        width: 90px;
    }

    .profile-details h3 {
        font-size: 1.1rem;
    }

    .profile-details p, .profile-details ul li {
        font-size: 0.9rem;
    }
}
#badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.badge-image {
  width: 65px;
  height: 65px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 6px #222;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  position: relative;
}

.badge-image:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Tooltip */
.badge-image[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  opacity: 0.9;
}

.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 14px;
  background: linear-gradient(131deg, #ab9d1954, rgba(0, 0, 0, 0.15));
  color: white;
  font-weight: bold;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 2px 6px #222;
  transition: transform 0.2s ease-in-out;
  width: max-content;
  align-self: center;
}

.pa-badge:hover {
  transform: scale(1.05);
}

.token-icon {
  width: 18px;
  height: 18px;
}

/* tokensegnalazione */
.token-badge-container {
  margin-top: 20px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(131deg, #f0f0f0, #e2e2e2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

.token-list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 10px;
}

.token-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(131deg, #ab9d1954, rgba(0, 0, 0, 0.15));
  color: white;
  font-weight: bold;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 2px 6px #222;
  transition: transform 0.2s ease-in-out;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.token-item:hover {
  transform: scale(1.05);
}

.token-icon-small {
  width: 18px;
  height: 18px;
}



.profile-top {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  justify-content: flex-start;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-header {
  box-shadow: 0 4px 8px #222;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  background: url('images/sfondi/cartaidentita.jpg') center;
}

#badges {
  margin-top: 10px;
  padding-bottom: 10px;
}

.profile-details {
}


/* Modale di base */
.pa-modal {
  display: none; /* Di default nascosto */
  position: fixed;
  z-index: 1; /* Assicura che il modale sia sopra gli altri contenuti */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Fondo scuro per effetto overlay */
}

.app-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 550;
  color: #1a511d; /* verde scuro ecologico */
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 10;
}

.leaflet-control-attribution {
    margin-bottom: 30px !important; /* solleva i crediti */
    z-index: 1000 !important;        /* assicurati che siano sopra il menu */
    position: relative !important;
}



/* Contenuto del modale */
.pa-modal-content {
  background-color: #f4f4f4;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 250px; /* Larghezza predefinita per il modale */
  text-align: center;
}

/* Icona di chiusura */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Bottone di conversione */
.convert-btn {
  padding: 8px 12px;
  background-color: #0078a8;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}

.convert-btn:hover {
  background-color: #005c7f;
}

/* Media query per schermi piccoli */
@media (max-width: 768px) {
  /* Modifica la larghezza del modale sui dispositivi mobili */
  .pa-modal-content {
    width: 90%; /* Più largo sui dispositivi mobili */
    margin-top: 20%;
    padding: 15px;
  }

  /* Riduci la dimensione del testo nel modale per smartphone */
  .pa-modal-content p {
    font-size: 14px;
  }

  /* Icona di chiusura più grande per facilitarne la visibilità sui dispositivi mobili */
  .close {
    font-size: 32px;
    right: 10px;
    top: 5px;
  }

  /* Bottone di conversione più grande */
  .convert-btn {
    width: 100%;
    padding: 12px;
  }
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.3s ease;
}

.popup.hidden {
  opacity: 0;
  pointer-events: none;
}

.popup-content {
  background-color: white;
  padding: 30px 40px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
  animation: fadeIn 0.3s ease forwards;
  max-width: 90%;
  position: relative;
}

#popup-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
}

#popup-text {
  font-size: 16px;
  color: #333;
  margin: 0;
}

@keyframes fadeIn {
  to {
    transform: scale(1);
  }
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease;
}

.popup-close:hover {
  color: #000;
}

#login-section {
  padding: 20px;
}

#register-section {
  padding: 20px;
}

  .settings-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
  }

  .settings-icon i {
    font-size: 24px;
    color: #333;
  }

.settings-screen {
  display: none; /* Nasconde la schermata finché non viene cliccato il pulsante */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  font-family: sans-serif;
  overflow-y: auto;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-header h2 {
  margin: 0;
  font-size: 22px;
}

.close-settings {
  font-size: 26px;
  font-weight: bold;
  cursor: pointer;
}

.settings-list {
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.settings-item {
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  cursor: pointer;
}

.settings-item:hover {
  background-color: #f9f9f9;
}

.settings-item.danger {
  color: #e74c3c;
}

#reset-password-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.donation-banner {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  margin: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.donation-icon {
  width: 48px;
  height: 48px;
}

.donation-text h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

.donation-text p {
  margin: 4px 0 0;
  font-size: 0.9em;
  color: #666;
}

.full-screen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  overflow-y: auto;
}

.donation-screen-content h2 {
  text-align: center;
  margin-bottom: 20px;
}

.donation-option {
  border: 2px solid #4CAF50;
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: background 0.2s;
}

.donation-option:hover {
  background-color: #e7f9ed;
}

.modal.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.95);
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  max-width: 500px;
  margin: 0 auto;
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 20px;
}

.modal-content input,
.modal-content textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 16px;
}

.form-buttons {
  display: flex;
  justify-content: space-between;
}

/* Overlay modale */
.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
}

.modal.hidden {
  display: none;
}

/* Contenuto modale (stile Google Maps slide-up) */
.modal-content {
  background: #fff;
  width: 100%;
  max-height: 80%;
  overflow-y: auto;
  padding: 1px 20px 32px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: slideUp 0.3s ease;
}

/* Animazione apertura */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Bottone chiusura */
.close-button {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  color: #666;
  cursor: pointer;
}

/* Galleria immagini */
.modal-img-gallery {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 12px;
}

.modal-img-gallery img {
  width: 50%;
  border-radius: 10px;
  object-fit: cover;
}

.modal-drag-area {
  position: relative;
  width: 100%; /* o quanto serve */
  height: 30px; /* l'area cliccabile estesa */
  margin-bottom: 12px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-drag-handle {
  width: 40px;
  height: 6px;
  background: #ccc;
  border-radius: 3px;
  pointer-events: none; /* il drag avviene sulla .modal-drag-area */
}