/* ----- Reset & Basic Styles ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

:root {
  /* Palette Colori Consistente */
  --primary: #365e51;
  --secondary: #8db187;
  --accent: #d18c60;
  --light: #f8f5ef;
  --dark: #1e3b2f;
  --dark-rgb: 30, 59, 47; /* Valori RGB di var(--dark) per rgba() */
  --white: #ffffff;
  --gray-light: #e9e9e9;
  --gray-medium: #cccccc;
  --gray-dark: #555555;
  --danger: #e74c3c;
  --danger-rgb: 231, 76, 60;
  --success: #2ecc71;
  --success-rgb: 46, 204, 113;
  --warning: #f39c12;
  --info: #3498db;


  /* Stili Comuni */
  --shadow-light: 0 6px 20px rgba(0, 0, 0, 0.09);
  --shadow-medium: 0 10px 38px rgba(0, 0, 0, 0.13);
  --border-radius-medium: 15px;
  --border-radius-large: 24px;
  --transition-fast: all 0.2s ease-in-out;

  /* Variabili di transizione modificate per maggiore controllo */
  --transition-duration-medium: 0.3s;
  --transition-timing-medium: ease-in-out;
  --transition-medium: all var(--transition-duration-medium) var(--transition-timing-medium);

  --navbar-height: 80px;
}

html, body {
  overflow-x: hidden;
}

body {
  background-color: var(--light);
  color: var(--dark);
  line-height: 1.9;
  font-size: 22px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  padding-top: var(--navbar-height);
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
}

h1 { font-size: clamp(2.8rem, 5.8vw, 3.5rem); }
h2 { font-size: clamp(2.3rem, 4.8vw, 2.9rem); }
h3 { font-size: clamp(1.8rem, 3.8vw, 2.1rem); }
h4 { font-size: clamp(1.45rem, 3.2vw, 1.7rem); }

p {
  margin-bottom: 1.4rem;
  font-size: 1.25rem;
}
.card-content p, .card-info, .card-description {
  text-align: left;
  font-size: 1.2rem;
}
.section-content p, .section-text {
  text-align: left;
  font-size: 1.25rem;
}


a {
  color: var(--secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--accent);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----- Utility Classes ----- */
.container {
  max-width: 1400px;
  width: 97%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
}

.section-padding {
  padding-top: clamp(1.2rem, 3vw, 2rem);
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.mt-1 { margin-top: 0.9rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 2.6rem; }
.mb-1 { margin-bottom: 0.9rem; }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 2.6rem; }

/* ----- Navbar ----- */
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--primary);
  box-shadow: var(--shadow-medium);
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
}

.navbar-container.hidden {
  transform: translateY(-100%);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  max-width: 1400px;
  width: 97%;
  margin: 0 auto;
}

.navbar .logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar .logo a {
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar .logo a:hover {
  text-decoration: none;
  opacity: 0.9;
}

.navbar .logo h2 {
  color: var(--white);
  font-size: clamp(1.4rem, 3.4vw, 1.7rem);
  margin: 0;
  font-weight: 600;
}

.navbar .logo .emoji {
  font-size: 2rem;
}

.navbar .menu {
  display: none;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar .menu a {
  color: var(--light);
  font-size: 1.1rem;
  padding: 0.8rem 0;
  position: relative;
  text-decoration: none;
}

.navbar .menu a::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--accent);
  transition: width var(--transition-duration-medium) var(--transition-timing-medium);
}

.navbar .menu a:hover::after, .navbar .menu a.active::after {
  width: 100%;
}
.navbar .menu a:hover {
  text-decoration: none;
}

.navbar .menu .separator {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.3rem;
  line-height: 1;
}

.navbar .right-menu {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.navbar .login-btn, .navbar .user-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar .login-btn:hover, .navbar .user-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(0px);
  box-shadow: none;
  text-decoration: none;
}

.hamburger {
  display: block;
  font-size: 2.1rem;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--white);
  padding: 0.6rem;
  margin-left: 0.8rem;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  width: 100%;
  height: auto;
  background: var(--primary);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0%);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0%);
}

.mobile-menu a {
  color: var(--white);
  padding: 1.4rem 2rem;
  font-size: 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.mobile-menu a:last-child {
  border-bottom: none;
}

.mobile-menu a:hover, .mobile-menu a.active {
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

/* In style.css */
.page-index .hero-section {
  min-height: 100vh; /* OCCUPA SEMPRE L'INTERA ALTEZZA DELLA FINESTRA */
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative; /* NECESSARIO PER POSIZIONARE IL CONTENUTO */
  /* RIMOSSE TUTTE LE PROPRIETA' background-* DA QUI */
  box-shadow: var(--shadow-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-color: transparent; /* Assicura che la sezione sia trasparente */
}
/* NUOVO BLOCCO PER LA SOLUZIONE COMPATIBILE CON IOS (CON FIX ALTEZZA) */
.page-index .hero-section::before {
  content: '';
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  /* CHIAVE DELLA SOLUZIONE: Assicura che l'altezza copra sempre tutto lo spazio visibile su iOS */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* Proprietà specifica per Safari/iOS */
  height: 100vh;
  z-index: -2; /* Assicura sia sempre lo strato più basso */

  background-image: var(--hero-bg-image, linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('images/eremo.jpg'));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
  
  /* Assicura che il padding superiore non venga rimosso */
  padding-top: clamp(1.2rem, 3vw, 2rem);
}

main section:first-of-type.hero-section {
  margin-top: calc(-1 * var(--navbar-height));
  padding-top: var(--navbar-height);
  min-height: 70vh;
}


.hero-content {
  text-align: center;
  max-width: 750px; /* Aumentato da 650px per dare più spazio al titolo */
  padding: clamp(1.5rem, 4vw, 2rem); /* Leggermente ridotto il padding orizzontale massimo */
  background: rgba(20, 30, 25, 0.2);
  border-radius: var(--border-radius-medium);
  backdrop-filter: blur(2.5px);
  color: var(--white);
}

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 3.2rem); /* Ridotta la dimensione massima e leggermente quella base/media */
  margin-bottom: 1.4rem;
  font-weight: 600;
  color: var(--white);
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  white-space: nowrap; /* Forza il testo a stare su una sola riga */
}

.hero-subtitle {
  font-size: clamp(1.35rem, 3.4vw, 1.65rem);
  line-height: 1.8;
  color: var(--white); /* Assicurati che sia bianco */
  opacity: 0.95; /* << MODIFICA (Opzionale): puoi aumentarla per maggiore leggibilità del sottotitolo */
  /* Anche qui, se serve, puoi aggiungere/modificare text-shadow */
}

/* Titolo principale dentro .container nelle pagine */
main > .container > h1:first-child:not(.hero-title) {
  text-align: center;
  color: var(--primary);
}

/* Sezioni di contenuto generiche */
.content-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .content-section {
    grid-template-columns: 1fr 1fr;
    gap: 4.8rem;
  }
  .content-section:nth-child(even) .section-image-container {
    order: 1;
  }
  .content-section:nth-child(even) .section-content {
    order: 0;
  }
}

.section-content {
  padding: 1.3rem 0;
  text-align: left;
}
.section-content h2, .section-content h3, .section-content p {
  text-align: left;
}


.section-title {
  font-size: clamp(2.3rem, 4.8vw, 2.9rem);
  color: var(--primary);
  margin-bottom: 2.2rem;
  position: relative;
  padding-left: 2.8rem;
  text-align: left;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 0.8rem);
  width: 9px;
  background: var(--accent);
  border-radius: 4.5px;
}

.section-text {
  font-size: 1.25rem;
  line-height: 1.95;
  color: var(--gray-dark);
  margin-bottom: 2.2rem;
}

.section-image-container {
  border-radius: var(--border-radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: transform var(--transition-duration-medium) var(--transition-timing-medium), box-shadow var(--transition-duration-medium) var(--transition-timing-medium);
  line-height: 0;
}

.section-image-container:hover {
  transform: scale(1.028) translateY(-5.5px);
  box-shadow: var(--shadow-medium);
}

.section-image {
  width: 100%;
  height: 460px;
  object-fit: cover;
}

/* ----- Cards Generiche ----- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.card-grid > .no-events, .card-grid > .error-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem;
  color: var(--gray-dark);
  font-size: 1.4rem;
}
.error-message .btn-popup {
  margin-top: 2.2rem;
}

.card {
  background: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-light);
  opacity: 1;
  transition: opacity 0.45s ease-in-out,
  transform var(--transition-duration-medium) var(--transition-timing-medium),
  box-shadow var(--transition-duration-medium) var(--transition-timing-medium);
}


.card:hover {
  transform: translateY(-9px);
  box-shadow: var(--shadow-medium);
}

.card-image-container {
  height: 280px;
  overflow: hidden;
  background-color: var(--gray-light);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-image {
  transform: scale(1.09);
}

.card-content {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-content h3 {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
}

.card-content p, .card-info, .card-description {
  font-size: 1.2rem;
  color: var(--gray-dark);
  line-height: 1.8;
  margin-bottom: 1.1rem;
  text-align: left;
}
.card-description {
  flex-grow: 1;
  min-height: 6em;
}


.card-info {
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
}
.card-info b {
  color: var(--primary);
  font-weight: 600;
}
.card-info .posti-disponibili {
  font-weight: bold;
  color: var(--primary);
}

.card-actions {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  gap: 1.05rem;
  flex-wrap: wrap;
}

.card-actions .card-btn {
  flex: 1 1 150px;
  min-width: 130px;
  text-align: center;
}

.card-actions.single-action {
  justify-content: center;
}
.card-actions.single-action .card-btn {
  flex-grow: 0;
  max-width: 280px;
}

.card-btn {
  padding: 0.9rem 1.5rem;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-duration-medium) var(--transition-timing-medium),
  border-color var(--transition-duration-medium) var(--transition-timing-medium),
  box-shadow var(--transition-duration-medium) var(--transition-timing-medium);
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  white-space: nowrap; /* <-- AGGIUNTO QUESTO */
}
.card-btn:hover {
  text-decoration: none;
}
.card-btn:disabled {
  background-color: var(--gray-medium) !important;
  color: var(--gray-dark) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--gray-medium) !important;
}
.card-btn.btn-prenota-rapido[disabled], .card-btn.btn-visualizza-volantino[disabled] {
  opacity: 0.6;
}


.card-btn-primary {
  background-color: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}
.card-btn-primary:hover:not(:disabled) {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);
  color: var(--white);
}

.card-btn-secondary {
  background-color: var(--white);
  color: var(--dark);
  border: 1px solid var(--gray-medium);
}
.card-btn-secondary:hover:not(:disabled) {
  background-color: var(--gray-light);
  border-color: var(--gray-dark);
}

/* SOSTITUISCI IL BLOCCO PRECEDENTE CON QUESTO: */

.info-card .card-content {
  text-align: center;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* MODIFICATO: Allinea il contenuto in alto invece che al centro */
}

.info-card .card-content h3,
.info-card .card-content p {
  text-align: center;
}

/* Regolazione per allineare il testo nelle card informative come da richiesta precedente */
.info-card .card-content > h3 {
    margin-bottom: 0.75rem;
}
.info-card .card-content .editable-text-wrapper > p:first-of-type {
    margin-top: 0;
}


/* ----- Footer ----- */
footer {
  background: var(--dark);
  color: var(--light);
  padding: 3rem 2.2rem;
  text-align: center;
  margin-top: auto;
  font-size: 1.15rem;
}

footer p {
  margin: 0;
  opacity: 0.7;
  text-align: center;
}


/* ----- Pagina Chi Siamo ----- */
.chi-siamo-section {
  display: flex;
  flex-direction: column; /* Default per mobile */
  gap: 2.5rem; /* Gap ridotto per mobile */
  align-items: center;
  margin-bottom: 2rem; /* Aumentato leggermente per separazione */
}

.chi-siamo-image-container {
  flex: 1 1 45%; /* Permette al contenitore di crescere/restringersi, base del 45% */
  max-width: 600px; /* Già presente, va bene */
  width: 100%;
  border-radius: var(--border-radius-large); /* Già presente */
  overflow: hidden; /* Già presente */
  box-shadow: var(--shadow-medium); /* Già presente */
  line-height: 0; /* Già presente */
  order: -1; /* Immagine sopra il testo su mobile di default */

  /* NUOVO: Per stabilizzare il layout prima del caricamento dell'immagine */
  aspect-ratio: 3 / 2; /* O il rapporto che preferisci, es. 16/9, 4/3 */
  background-color: var(--gray-light); /* Sfondo mentre l'immagine carica */
}

img.chi-siamo-image { /* Applica a tutte le immagini nelle sezioni chi-siamo */
  display: block;
  width: 100%;
  height: 100%; /* Richiede che il contenitore abbia un'altezza definita o aspect-ratio */
  object-fit: cover; /* Riempie il contenitore, mantenendo le proporzioni e tagliando se necessario */
}

.chi-siamo-content {
  flex: 1 1 50%; /* Permette al contenitore di crescere/restringersi, base del 50% */
  max-width: 800px; /* Già presente */
  width: 100%;
  text-align: left;
  order: 0; /* Testo sotto l'immagine su mobile di default */
}
.chi-siamo-content h2, .chi-siamo-content p { text-align: left; }
.chi-siamo-content h3 { margin-top: 2.2rem; margin-bottom: 1.1rem; font-size: 1.6rem; color: var(--secondary); text-align: left; }

@media (min-width: 992px) {
  .chi-siamo-section {
    flex-direction: row; /* Immagine sinistra, testo destra per default */
    gap: 5.8rem; /* Gap per desktop */
    align-items: center; /* Allinea verticalmente al centro */
  }
  .chi-siamo-image-container {
    order: initial !important; /* Resetta l'ordine per desktop */
  }
  .chi-siamo-content {
    order: initial !important; /* Resetta l'ordine per desktop */
    max-width: none; /* Permetti al contenuto di prendere il suo spazio flex */
  }
  .chi-siamo-section.reverse {
    flex-direction: row-reverse; /* Immagine destra, testo sinistra */
  }
}


.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--primary);
  font-weight: 500;
  font-size: 1.2rem;
  text-align: left;
}

.form-control {
  width: 100%;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--gray-medium);
  border-radius: 9px;
  font-size: 1.2rem;
  transition: var(--transition-fast);
  background-color: var(--white);
}
.form-control:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 4.5px rgba(141, 177, 135, 0.35);
  outline: none;
}
.form-control:disabled {
  background-color: var(--gray-light);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-group small {
  font-size: 1.05rem;
  color: var(--gray-dark);
  margin-top: 0.4rem;
  display: block;
  text-align: left;
}

.btn-save {
  background: var(--secondary);
  color: white;
  border: none;
  padding: 1rem 2.2rem;
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-medium);
  display: block;
  width: fit-content;
  margin: 2.6rem auto 0;
}
.btn-save:hover {
  background: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-light);
  text-decoration: none;
}

.avatar-container {
  width: 120px;
  height: 120px;
  background: var(--white);
  border-radius: 50%;
  margin: 1.4rem auto 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6rem;
  border: 4.5px solid var(--light);
  box-shadow: 0 4.5px 15px rgba(0,0,0,0.11);
  color: var(--primary);
}
.avatar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  justify-content: center;
  margin-top: 2.2rem;
}
.avatar-option {
  font-size: 2.4rem;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-medium);
  background: var(--gray-light);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3.5px solid transparent;
}
.avatar-option:hover {
  transform: scale(1.12);
  background: var(--light);
}
.avatar-option.selected {
  border-color: var(--secondary);
  background-color: var(--light);
  box-shadow: 0 0 0 3.5px rgba(141, 177, 135, 0.35);
}

#user-bookings-grid .card {
}
#user-bookings-grid .card-info span {
  font-weight: bold;
  padding: 0.35rem 0.8rem;
  border-radius: 5.5px;
  font-size: 1.05rem;
}
#user-bookings-grid .stato-confermata {
  background-color: rgba(var(--success-rgb), 0.22);
  color: var(--success);
}
#user-bookings-grid .stato-concluso {
  background-color: rgba(149, 165, 166, 0.22);
  color: #7f8c8d;
}
#user-bookings-grid .stato-annullata {
  background-color: rgba(var(--danger-rgb), 0.22);
  color: var(--danger);
}

.btn-annulla-prenotazione {
  background-color: rgba(var(--danger-rgb), 0.1); /* Sfondo rosso molto chiaro */
  color: var(--danger);
  border: 1px solid rgba(var(--danger-rgb), 0.3); /* Bordo rosso più tenue */
}
.btn-annulla-prenotazione:hover {
  background-color: var(--danger);
  color: var(--white);
  border-color: var(--danger);
  box-shadow: 0 3px 10px rgba(var(--danger-rgb), 0.25); /* Aggiunge un'ombra al passaggio del mouse */
}

#no-bookings-message { display: none; }
#no-bookings-message p { font-size: 1.2rem; }
#no-bookings-message .card-btn { font-size: 1.1rem; padding: 0.8rem 1.5rem; }


/* ----- Pagina Contatti ----- */
.contatti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 2.2rem;
  margin-top: 3rem;
  align-items: stretch;
}

.contatto-card {
  background-color: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  padding: 2.4rem;
  text-align: center;
  transition: var(--transition-medium);
  display: flex;
  flex-direction: column;
}

.contatto-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-medium);
}

.contatto-icon {
  margin: 0 auto 1.4rem;
  color: var(--secondary);
  font-size: 3rem;
}

.contatto-card h3 {
  font-size: 1.7rem;
  color: var(--primary);
  margin-bottom: 0.8rem;
  text-align: center;
}

.contatto-card p {
  color: var(--gray-dark);
  margin-bottom: 1.8rem;
  font-size: 1.2rem;
  flex-grow: 1;
  text-align: center;
}
.contatto-card p.contatto-valore {
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--dark);
  word-break: break-all;
}

.btn-contatto {
  padding: 0.9rem 1.7rem;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-medium);
  border: none;
  background-color: var(--secondary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: auto;
  text-decoration: none;
}

.btn-contatto {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .btn-contatto {
    width: 100%;
    margin-bottom: 10px;
  }
}

.btn-contatto:hover {
  background-color: var(--primary);
  box-shadow: 0 3.5px 11px rgba(0, 0, 0, 0.11);
  text-decoration: none;
}
.btn-contatto[href="dovesiamo.html"]:hover {
  background-color: var(--accent);
  opacity: 0.95;
}

.btn-contatto {
  height: 50px;
  padding: 0 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

/* ----- Pagina Dove Siamo ----- */
.btn-contatto:hover,
.btn-contatto:active {
  color: var(--white) !important;
  text-decoration: none;
}

.map-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}
@media (min-width: 992px) {
  .map-section {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.map-container {
  height: 500px;
  width: 100%;
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  border: 3.5px solid var(--white);
}
.iframe-map {
  width: 100%;
  height: 100%;
  border: none;
}

.location-description {
  background: var(--white);
  padding: 2.4rem;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  text-align: left;
}
.location-description h2 {
  margin-bottom: 1.8rem;
  font-size: 2.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--gray-light);
  text-align: left;
}
.location-description p {
  margin-bottom: 1.1rem;
  line-height: 1.9;
  text-align: left;
  font-size: 1.25rem;
}
.location-description strong {
  color: var(--primary);
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 1.8rem;
  justify-content: flex-start;
}
.location-actions a {
  padding: 0.9rem 1.7rem;
  border-radius: 10px;
  font-weight: 500;
  transition: var(--transition-medium);
  text-align: center;
  flex-grow: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.9rem;
}
.location-actions a i {
  display: none;
}

.location-actions a:hover {
  text-decoration: none;
}
.location-actions .btn-primary {
  background: var(--secondary);
  color: white;
}
.location-actions .btn-primary:hover {
  background: var(--primary);
  box-shadow: 0 3.5px 11px rgba(0,0,0,0.13);
}
.location-actions .btn-secondary {
  background: var(--gray-light);
  color: var(--dark);
  border: 1px solid var(--gray-medium);
}
.location-actions .btn-secondary:hover {
  background: var(--gray-medium);
}

.location-info-cards {
  margin-top: 4rem;
}
.location-info-cards h2 {
  text-align: center;
  margin-bottom: 3rem;
}
.location-info-cards .card-grid {
  align-items: stretch;
}
.location-info-cards .card {
  text-align: center;
}
.location-info-cards .card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.location-info-cards .card-content p { text-align: center; }
.location-info-cards .card-content p:first-of-type {
  flex-grow: 1;
}
.location-info-cards .card-content p:last-of-type {
  margin-bottom: 0;
}
.location-info-cards .card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  font-size: 1.65rem;
  text-align: center;
}
.location-info-cards .card h3 i {
  color: var(--secondary);
  font-size: 1.7rem;
  width: 28px;
}

/* ----- Pagina Aggiungi Media Admin ----- */
.form-container {
  max-width: 680px;
  margin: 3rem auto;
  padding: clamp(2.2rem, 5.5vw, 3rem);
  background-color: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
}
.form-container h2 {
  text-align: center;
  margin-bottom: 2.2rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 2.1rem;
}
.form-container form label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 500;
  color: var(--primary);
  text-align: left;
  font-size: 1.2rem;
}
.form-container input[type="file"],
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"],
.form-container textarea,
.form-container select {
  width: 100%;
  padding: 1.05rem 1.3rem;
  margin-bottom: 1.8rem;
  border: 1px solid var(--gray-medium);
  border-radius: 9px;
  font-size: 1.2rem;
  background-color: var(--white);
}
.form-container input[type="file"] {
  padding: 0.9rem 1.1rem;
  background-color: var(--light);
}
.form-container textarea { resize: vertical; min-height: 120px; }
.form-container button[type="submit"] {
  width: 100%;
  padding: 1.05rem;
  background-color: var(--secondary);
  color: white;
  font-size: 1.3rem;
  font-weight: 500;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.form-container button[type="submit"]:hover {
  background-color: var(--primary);
  box-shadow: var(--shadow-light);
}
.form-container button[type="submit"]:disabled {
  background-color: var(--gray-medium);
  cursor: not-allowed;
}
#upload-feedback {
  margin-top: 1.4rem;
  font-weight: 500;
  text-align: center;
  font-size: 1.2rem;
}

/* ----- Pagina Incontri sulla Parola ----- */
#next-meeting-date { font-weight: bold; }

.lectio-steps-grid .card {
  text-align: center;
}
.lectio-steps-grid .step-number {
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 1.1rem;
  line-height: 1;
}
.lectio-steps-grid h3 {
  font-size: 1.55rem;
  color: var(--primary);
  text-align: center;
}
.lectio-steps-grid p {
  text-align: center;
  font-size: 1.2rem;
}


/* ----- Popup Login/Registrazione ----- */
.login-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--dark-rgb), 0.8);
  z-index: 1010;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.login-popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: 90%;
  max-width: 500px;
  background: var(--white);
  border-radius: var(--border-radius-medium);
  padding: 2.4rem;
  box-shadow: 0 14px 42px rgba(0,0,0,0.22);
  z-index: 1011;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.login-popup-overlay.active {
  display: block; /* Modificato da flex a block per popup di login standard */
  opacity: 1;
}
.login-popup.active {
  display: block; /* Modificato da flex a block */
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.login-tabs {
  display: flex;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--gray-light);
}
.login-tab {
  padding: 1rem 1.3rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--gray-dark);
  border-bottom: 3.5px solid transparent;
  transition: var(--transition-fast);
  flex-grow: 1;
  text-align: center;
  font-size: 1.25rem;
}
.login-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.login-form { display: none; }
.login-form.active { display: block; animation: fadeIn 0.3s ease-out; }

.login-popup .form-group { margin-bottom: 1.1rem; }
.login-popup .form-control {
  padding: 1rem 1.2rem;
  font-size: 1.2rem;
  border-radius: 9px;
}
.login-popup .form-control.error-border {
  border-color: var(--danger) !important;
}
.login-popup input:-webkit-autofill,
.login-popup input:-webkit-autofill:hover,
.login-popup input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;
  -webkit-text-fill-color: var(--dark) !important;
}


.form-actions { margin-top: 1.8rem; text-align: right; }
.btn-popup {
  padding: 0.9rem 1.9rem;
  border-radius: 9px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  background: var(--secondary);
  color: white;
  transition: var(--transition-medium);
  font-size: 1.2rem;
}
.btn-popup:hover { background: var(--primary); box-shadow: var(--shadow-light); }

.terms-checkbox {
  display: flex;
  align-items: center;
  margin: 1.1rem 0;
  font-size: 1.15rem;
  color: var(--gray-dark);
  text-align: left;
}
.terms-checkbox input[type="checkbox"] {
  margin-right: 0.6rem;
  width: auto;
  height: auto;
  flex-shrink: 0;
  transform: scale(1.1);
}
.terms-checkbox label { font-weight: normal; color: var(--gray-dark); font-size: 1.1rem; }
.terms-checkbox a { color: var(--primary); }

.close-popup {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 2.1rem;
  cursor: pointer;
  color: var(--gray-medium);
  transition: var(--transition-fast);
  line-height: 1;
  padding: 0.32rem;
}
.close-popup:hover { color: var(--dark); transform: rotate(90deg) scale(1.08); }

/* ----- Media Queries per Responsive ----- */
@media (min-width: 1300px) {
  .navbar .menu {
    display: flex;
  }
  .hamburger {
    display: none;
  }
  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 991px) {
  body { font-size: 20px; }
  main section:first-of-type.hero-section {
    margin-top: calc(-1 * var(--navbar-height));
    padding-top: var(--navbar-height);
    min-height: 100vh;
  }
  .content-section {
    grid-template-columns: 1fr;
  }
  .content-section .section-image-container {
    order: -1;
    height: 340px;
  }
  .map-section {
    grid-template-columns: 1fr;
  }
  .container {
    width: 96%;
  }
}

@media (max-width: 767px) {
  body { font-size: 19px; }
  :root { --navbar-height: 75px; }

  main { padding-top: var(--navbar-height); }
  .navbar-container { height: var(--navbar-height); }

  .navbar { padding: 0.8rem 0; width: 98%; }
  .navbar .logo h2 { font-size: 1.25rem; }
  .navbar .logo .emoji { font-size: 1.7rem; }
  .navbar .menu a { font-size: 1.15rem; }
  .navbar .login-btn, .navbar .user-btn { padding: 0.6rem 1.1rem; font-size: 1.1rem; }
  .hamburger { font-size: 1.8rem; padding: 0.45rem; }


  .container { width: 98%; padding-left: 10px; padding-right: 10px; }

  .page-index .hero-section, main section:first-of-type.hero-section {
    min-height: 100vh;
    margin-top: calc(-1 * var(--navbar-height));
    padding-top: var(--navbar-height);
  }
  .hero-title { font-size: 2.4rem; }
  .hero-subtitle { font-size: 1.15rem; }

  .card-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .chi-siamo-section { gap: 2.2rem; }

  .location-actions a { width: 100%; margin-bottom: 0.8rem; }


  .comment-form-container { flex-direction: column; align-items: stretch; }
  .btn-comment { width: 100%; margin-left: 0; }
  .comment-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .comment-meta small { margin-left: 0; display: block; margin-top: 0.22rem;}
  .reply-form, .replies { margin-left: 1.2rem; padding-left: 0.9rem; }

  .contatti-grid { grid-template-columns: 1fr; }
  .map-container { height: 340px; }

  .login-popup { padding: 2.2rem; max-width: calc(100% - 15px); }
  .event-popup { padding: 2.2rem; max-width: calc(100% - 15px); }
}


/* ----- Stili Stampa ----- */
@media print {
  body {
    background-color: var(--white);
    color: black;
    font-size: 14pt;
    line-height: 1.5;
  }
  header, footer, .login-popup-overlay, .login-popup, .card-actions, .comment-form, .comment-actions, .location-actions, .btn-prenota-evento, .hamburger, .mobile-menu, .btn-save, .btn-contatto, .volantino-preview, .media-gallery, .avatar-options, .btn-annulla-prenotazione, .event-filters, .volantino-link, .btn-reply, .like-btn, .user-dropdown, .close-popup, .add-event-btn-container, .loading-overlay, .volantino-morph-overlay, .booking-popup-overlay, .dashboard-quick-stats, .modal, .event-header-admin i {
    display: none !important;
  }
  main { padding-top: 1.4cm; padding-bottom: 1.4cm; }
  main.dashboard-main { padding: 1.4cm !important; }
  main.dashboard-main h1 { font-size: 19pt; margin-bottom: 0.7cm; }
  .dashboard-section h2 { font-size: 17pt; margin-bottom: 0.7cm; }


  .container { width: 100%; max-width: 100%; padding: 0; margin: 0; }
  h1, h2, h3 { page-break-after: avoid; }
  p, ul, ol, table { page-break-inside: avoid; }
  img, .iframe-map { max-width: 100% !important; height: auto !important; page-break-inside: avoid; border: 1px solid #ccc; }
  .map-container { height: auto; border: none; box-shadow: none; }
  a { color: black; text-decoration: underline; }
  a[href^="http"]::after, a[href^="mailto"]::after, a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: 11pt; }
  .card-grid, .gallery-grid, .contatti-grid, .form-grid, .map-section, .chi-siamo-section, .content-section, .event-list-admin {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 1.1cm;
  }
  .card, .profile-section, .location-description, .dashboard-section, .event-item-admin {
    box-shadow: none;
    border: 1px solid #eee;
    padding: 1.1cm;
    margin-bottom: 1.1cm;
    page-break-inside: avoid;
  }
  .section-image-container, .chi-siamo-image-container {
    box-shadow: none;
    border: 1px solid #eee;
    margin-bottom: 1.1cm;
  }
  .section-title::before { display: none; }
  .participants-table th, .participants-table td { font-size: 12pt; padding: 0.45cm; }
  .event-header-admin { background-color: #f0f0f0; padding: 0.7cm; }
  .event-details-admin { display: block !important; padding: 0.7cm; }
}

/* ----- Pulsante Aggiungi Evento (Admin) ----- */
.add-event-btn-container {
  position: fixed;
  top: calc(var(--navbar-height) + 22px);
  right: 2.2rem;
  z-index: 999;
}

.add-event-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.7rem;
  padding-left: 1.1rem;
  border-radius: 11px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-medium);
  line-height: 1;
}

.plus-icon {
  font-size: 1.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(255,255,255,0.22);
  border-radius: 50%;
  transition: var(--transition-medium);
}

.btn-label {
  white-space: nowrap;
}

.add-event-btn:hover {
  background-color: var(--dark);
  transform: translateY(-2.5px);
  box-shadow: var(--shadow-medium);
}

.add-event-btn:hover .plus-icon {
  transform: scale(1.12);
  background-color: rgba(255,255,255,0.32);
}

@media (max-width: 767px) {
  .add-event-btn-container {
    bottom: 1.8rem;
    top: auto;
    right: 1.8rem;
  }
  .btn-label {
    display: none;
  }
  .add-event-btn {
    padding: 1rem;
    border-radius: 50%;
    width: 52px;
    height: 52px;
  }
  .plus-icon {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 1.7rem;
  }
}

/* ----- Popup Nuovo Evento (Admin) ----- */
.event-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--dark-rgb), 0.8);
  z-index: 1010;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.event-popup-overlay.active { display: block; opacity: 1; }

.event-popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: 90%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--border-radius-medium);
  padding: 2.4rem;
  box-shadow: 0 14px 45px rgba(0,0,0,0.22);
  z-index: 1011;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.event-popup.active { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }

.event-popup h2 {
  color: var(--primary);
  margin-bottom: 1.8rem;
  text-align: center;
  font-size: 2.1rem;
}

.event-popup .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.event-popup .form-group.full-width {
  grid-column: 1 / -1;
}


.event-popup .form-check-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  text-align: left;
  font-size: 1.2rem;
}
.event-popup .form-check-group input[type="checkbox"] {
  width: auto;
  margin-right: 0.6rem;
  transform: scale(1.1);
}
.event-popup .form-check-group label { font-weight: normal; color: var(--dark); font-size: 1.15rem; }


@media (max-width: 767px) {
  .event-popup .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- User Dropdown (Navbar) ----- */
.user-dropdown {
  position: relative;
  display: inline-block;
}
.user-dropdown .user-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.user-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 11px);
  background-color: var(--white);
  min-width: 240px;
  box-shadow: 0 8.5px 25px rgba(0,0,0,0.15);
  z-index: 1001;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--gray-light);
}
.user-dropdown .dropdown-menu a {
  color: var(--dark);
  padding: 1rem 1.4rem;
  text-decoration: none;
  display: block;
  font-size: 1.2rem;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.user-dropdown .dropdown-menu a:hover {
  background-color: var(--light);
  color: var(--primary);
}
.user-dropdown .dropdown-menu a:last-child {
  border-top: 1px solid var(--gray-light);
  color: var(--danger);
}
.user-dropdown .dropdown-menu a:last-child:hover {
  background-color: rgba(var(--danger-rgb), 0.11);
  color: #a71d2a;
}
.user-dropdown.show .dropdown-menu {
  display: block;
  animation: fadeInDropdown 0.2s ease-out;
}
@keyframes fadeInDropdown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.user-dropdown .dropdown-arrow {
  font-size: 0.9rem;
  transition: transform var(--transition-fast);
}
.user-dropdown.show .dropdown-arrow {
  transform: rotate(180deg);
}

/* ----- Loading Spinner e Overlay (Calendario Attività) ----- */
#eventiGridContainer {
  position: relative;
  min-height: 340px;
  border-radius: 11px;
}

.loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(248, 245, 239, 0.94);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
  border-radius: inherit;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  visibility: hidden;
  opacity: 0;
}
.loading-overlay.visible {
  visibility: visible;
  opacity: 1;
}

.loading-overlay .spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 58px;
  margin-bottom: 26px;
}
.spinner > div {
  width: 17px;
  height: 17px;
  background-color: var(--primary);
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  margin: 0 5.5px;
}
.spinner .bounce1 { animation-delay: -0.32s; }
.spinner .bounce2 { animation-delay: -0.16s; }

@keyframes sk-bouncedelay {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.6; }
  40% { transform: scale(1.1); opacity: 1; }
}

.loading-overlay p {
  font-size: 1.3em;
  color: var(--dark);
  font-weight: 500;
  text-align: center;
}

.spinner-mini {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 3.5px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 5.5px;
}
/* @keyframes spin è già definito sopra, non serve ripeterlo */

/* ----- Animazione FadeIn Generica ----- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----- NUOVA ANIMAZIONE VOLANTINO (SOSTITUISCE QUELLA PRECEDENTE) ----- */
body.volantino-morph-active {
  overflow: hidden; /* Mantenuto: previene lo scroll della pagina quando il popup è attivo */
}

.volantino-morph-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--dark-rgb), 0.85); /* Sfondo scuro semitrasparente */
  backdrop-filter: blur(6px); /* Effetto sfocato */
  display: flex; /* Usato per centrare il popup del volantino */
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Assicura che sia sopra il resto del contenuto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Transizione SEMPLIFICATA solo per opacità e visibilità */
  transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
}

.volantino-morph-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s; /* Rimuove ritardi non necessari quando diventa attivo */
  /* Rimosse proprietà mask-image e relative transizioni complesse */
}

/* Stile per la card/popup che contiene il volantino */
.card.morph-active-card { /* Questa classe è usata dal JS per creare il contenitore del volantino */
  position: fixed; /* Posizionamento fisso per centrarlo nella viewport */
  top: 50%;
  left: 50%;

  width: auto; /* Larghezza determinata dal contenuto, con un massimo */
  height: auto; /* Altezza determinata dal contenuto, con un massimo */
  max-width: 90vw;  /* Massimo 90% della larghezza della viewport */
  max-height: 90vh; /* Massimo 90% dell'altezza della viewport */

  background-color: var(--dark); /* Sfondo per il contenitore del volantino */
  border-radius: var(--border-radius-medium);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3); /* Ombra per effetto popup */
  overflow: hidden; /* Nasconde contenuto che potrebbe eccedere (es. bordi immagine) */

  display: flex; /* Per centrare l'immagine/contenuto del volantino al suo interno */
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  /* Animazione leggera: compare con fade-in e leggero scale-up */
  transform: translate(-50%, -50%) scale(0.95);
  /* Transizione SEMPLIFICATA per opacità, transform e visibilità */
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s;
  z-index: 2001; /* Sopra l'overlay */
  /* Rimosse transizioni complesse per width, height, top, left della vecchia animazione morph */
}

/* Stato attivo per il popup del volantino */
/* La logica JS esistente aggiunge .zoomed-in e poi .volantino-visible.
   Usiamo questa combinazione per attivare il popup semplificato. */
.card.morph-active-card.zoomed-in.volantino-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1); /* Scala alla dimensione normale */
  transition-delay: 0s;
}

/* Contenitore interno per l'immagine del volantino o messaggio */
.morph-content-wrapper { /* Mantenuto se il JS lo usa ancora per strutturare il contenuto interno */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 10px; /* Opzionale: piccolo spazio attorno al contenuto del volantino */
}

.morph-content-wrapper .volantino-image-container-morph {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 1; /* Sempre visibile quando il popup è attivo */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Lo sfondo è già su .card.morph-active-card */
}

.morph-content-wrapper .volantino-image-container-morph img {
  max-width: 100%;
  max-height: calc(90vh - 60px); /* Es: 90vh meno padding e spazio per bottone chiusura */
  object-fit: contain;
  border-radius: calc(var(--border-radius-medium) - 5px); /* Raggio leggermente inferiore a quello del popup, se il popup ha padding */
  display: block;
}

.volantino-image-container-morph .volantino-message-display {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--light);
  padding: 20px;
  text-align: center;
}
.volantino-message-display p { color: var(--light); margin-bottom: 1rem; font-size: 1.1rem; }
.volantino-message-display a { color: var(--accent); text-decoration: underline; font-weight: 500; }


/* Pulsante di chiusura per il nuovo popup del volantino */
.close-morph-volantino-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2002;
  transition: var(--transition-fast);
  line-height: 1;
  opacity: 0; /* Nascosto inizialmente */
  pointer-events: none;
}

/* Mostra il pulsante di chiusura quando il popup del volantino è completamente visibile */
.card.morph-active-card.zoomed-in.volantino-visible .close-morph-volantino-btn {
  opacity: 0.8;
  pointer-events: auto;
  transition: opacity 0.3s ease-out 0.15s, transform 0.2s ease-out; /* Appare dopo che il popup è stabile */
}

.close-morph-volantino-btn:hover {
  background: var(--danger);
  opacity: 1;
  transform: scale(1.1) rotate(90deg);
}

/* MANTENERE questo per nascondere il contenuto clonato della card quando il volantino è visibile */
.card.morph-active-card.zoomed-in.volantino-visible .card-content-morph {
  opacity: 0;
  pointer-events: none;
}
/* MANTENERE questo per nascondere l'immagine di copertina clonata quando il volantino è visibile */
.card.morph-active-card.zoomed-in.volantino-visible .card-image-container-morph {
  opacity: 0;
  pointer-events: none;
}
/* ----- FINE MODIFICHE VOLANTINO ----- */


/* ----- Popup Prenotazione (Calendario Attività) ----- */
.booking-popup-overlay {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--dark-rgb), 0.8);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  backdrop-filter: blur(6px);
}
.booking-popup-overlay.active { display: block; opacity: 1; }

.booking-popup {
  display: none; position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: 90%; max-width: 600px;
  max-height: 90vh; overflow-y: auto;
  background: var(--white);
  border-radius: var(--border-radius-medium);
  padding: 2.4rem;
  box-shadow: 0 14px 45px rgba(0,0,0,0.22);
  z-index: 1051;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.booking-popup.active { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }

.booking-popup h2 {
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 1.8rem;
  text-align: center;
  font-size: 2.1rem;
}
.booking-popup .form-group { margin-bottom: 1.1rem; }
.booking-popup .form-group label {
  display: block; margin-bottom: 0.6rem;
  color: var(--primary); font-weight: 500; font-size: 1.2rem;
  text-align: left;
}
.booking-popup .form-control {
  width: 100%; padding: 1rem 1.2rem;
  border: 1px solid var(--gray-medium);
  border-radius: 9px;
  font-size: 1.2rem;
  background-color: var(--white);
}
.booking-popup .form-control:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3.5px rgba(141, 177, 135, 0.35);
  outline: none;
}

.participant-fields-container {
  margin-top: 1.1rem; margin-bottom: 1.1rem;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 11px;
  border: 1px solid var(--gray-light);
  border-radius: 9px;
  padding: 1.1rem;
}
.participant-fields-container .participant-entry {
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px dotted var(--gray-light);
}
.participant-fields-container .participant-entry:last-child {
  border-bottom: none; margin-bottom: 0;
}
.participant-fields-container .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.1rem;
  align-items: center;
}
.participant-fields-container .form-grid label {
  font-size: 1.15rem; margin-bottom: 0.24rem;
}

.booking-popup .form-actions {
  margin-top: 1.8rem;
  text-align: right;
}
.booking-popup .close-popup {
  z-index: 10;
}

#bookingResponseMessage {
  margin-top: 1.1rem; padding: 1rem 1.2rem;
  border-radius: 9px;
  font-size: 1.2rem;
  text-align: center;
  display: none;
}
#bookingResponseMessage.success {
  background-color: rgba(var(--success-rgb), 0.18);
  border: 1px solid var(--success);
  color: var(--dark);
}
#bookingResponseMessage.error {
  background-color: rgba(var(--danger-rgb), 0.18);
  border: 1px solid var(--danger);
  color: var(--dark);
}

/* ----- INIZIO STILI SPECIFICI DASHBOARD (da aggiungere a style.css) ----- */

body.page-dashboard {
  background-color: var(--light);
}

body.page-dashboard main.dashboard-main {
  padding-top: calc(var(--navbar-height) + 1.5rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2.5rem;
}

body.page-dashboard main.dashboard-main h1 {
  color: var(--primary);
  margin-bottom: 2rem;
  text-align: center; /* Mantenuto per fallback o se display:flex viene rimosso */
  margin-top: 0;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  display: flex;
  align-items: center; /* Allinea verticalmente l'icona e il testo */
  justify-content: center; /* AGGIUNTO: Centra orizzontalmente l'icona e il testo */
}
body.page-dashboard main.dashboard-main h1 i {
  margin-right: 0.8rem;
  font-size: 0.9em;
  color: var(--secondary);
}

.dashboard-section {
  background-color: var(--white);
  padding: 1.5rem;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  margin-bottom: 2rem;
}

.dashboard-section h2 {
  color: var(--secondary);
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 1rem;
  font-size: 1.6rem;
  text-align: left;
  display: flex;
  align-items: center;
}
.dashboard-section h2 i {
  margin-right: 0.6rem;
  font-size: 1em;
}

.dashboard-quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stat-card {
  background-color: var(--white);
  padding: 1.2rem 1.5rem;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  text-align: center;
  transition: var(--transition-medium);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}
.stat-card > i.fas {
  font-size: 2.2rem;
  color: var(--secondary);
  margin-bottom: 0.8rem;
  display: block;
}
.stat-card .fa-calendar-alt { color: var(--accent); }
.stat-card .fa-users { color: var(--secondary); }
.stat-card .fa-user-check { color: var(--success); }
.stat-card .fa-comments { color: var(--info); }

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.3rem;
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: 0.9rem;
  color: var(--gray-dark);
}

.event-list-admin .event-item-admin {
  border: 1px solid var(--gray-light);
  border-radius: var(--border-radius-medium);
  margin-bottom: 1.5rem;
  overflow: hidden;
  background-color: var(--white);
}
.event-header-admin {
  background-color: var(--light);
  padding: 0.9rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-light);
  transition: background-color var(--transition-fast);
}
.event-header-admin:hover {
  background-color: #e8f0e7;
}
.event-header-admin h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 600;
}
.event-header-admin .event-date-admin {
  font-size: 0.9rem;
  color: var(--dark);
  display: block; /* Per andare a capo se necessario */
  margin-top: 0.2rem;
}
.event-header-admin > i.fas {
  transition: transform 0.25s ease;
  font-size: 0.9rem;
  color: var(--primary);
}
.event-header-admin > i.fa-chevron-up {
  transform: rotate(180deg);
}

.event-details-admin {
  padding: 1.2rem 1.5rem;
  display: none;
}
.event-details-admin.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}
.event-details-admin h4 {
  color: var(--primary);
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  text-align: left;
  font-weight: 500;
  padding-bottom: 0.3rem;
  border-bottom: 1px dotted var(--gray-light);
}
.event-details-admin h4:first-child {
  margin-top: 0;
}
.event-details-admin .actions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-admin {
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius-medium);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-medium);
  border: 1px solid transparent;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  line-height: 1.3;
}
.btn-admin:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-light);
}
.btn-admin i.fas { line-height: 1; }

.btn-admin.btn-admin-primary { background-color: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-admin.btn-admin-primary:hover { background-color: var(--dark); border-color: var(--dark); }
.btn-admin.btn-admin-secondary { background-color: var(--secondary); color: var(--white); border-color: var(--secondary); }
.btn-admin.btn-admin-secondary:hover { background-color: var(--primary); border-color: var(--primary); }
.btn-admin.btn-admin-danger { background-color: var(--danger); color: var(--white); border-color: var(--danger); }
.btn-admin.btn-admin-danger:hover { background-color: #c0392b; border-color: #b92c1c; }
.btn-admin.btn-admin-warning { background-color: var(--warning); color: var(--dark); border-color: var(--warning); }
.btn-admin.btn-admin-warning:hover { background-color: #e67e22; border-color: #d35400; }
.btn-admin.btn-admin-info { background-color: var(--info); color: var(--white); border-color: var(--info); }
.btn-admin.btn-admin-info:hover { background-color: #2980b9; border-color: #2471a3; }

.btn-admin.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  gap: 0.25em;
}
.btn-admin.btn-sm i.fas { font-size: 0.9em; }

.participants-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.participants-table th, .participants-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--gray-light);
  vertical-align: middle;
}
.participants-table th {
  background-color: var(--light);
  color: var(--primary);
  font-weight: 600;
}
.participants-table td .btn-admin.btn-sm { margin: 0; }

/* Modal Dashboard */
body.page-dashboard .modal-content {
  max-width: 750px; /* Leggermente più largo per contenuto admin */
  /* display:flex e flex-direction:column sono ereditati da .modal-content globale */
}
.modal-content-scrollable {
  overflow-y: auto;
  flex-grow: 1;
  padding: 0.5rem 1rem; /* Padding per l'area scrollabile */
  min-height: 200px;
  margin-bottom: 1rem; /* Spazio prima dei bottoni del modal se ci sono */
}
.modal-content h3 {
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  text-align: left;
  font-weight: 600;
}
.modal-content h4 {
  color: var(--primary);
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
}
.modal-content .form-group { margin-bottom: 1rem; }
.modal-content .form-group label { display: block; margin-bottom: 0.4rem; font-weight: 500; color: var(--dark); font-size: 0.95rem; text-align: left; }
.modal-content .form-group input[type="file"],
.modal-content .form-group textarea,
.modal-content .form-group input[type="text"] {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--gray-medium); border-radius: var(--border-radius-medium); font-size: 0.95rem; box-sizing: border-box;
}
.modal-content .form-group input[type="file"] { padding: 0.5rem; }
.modal-content .form-group textarea { min-height: 70px; resize: vertical; }
.modal-content form button[type="submit"].btn-admin { margin-top: 1rem; }


.existing-media-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--gray-light); }
.existing-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; max-height: 300px; overflow-y: auto; padding: 0.5rem; background-color: var(--light); border-radius: 8px; border: 1px solid var(--gray-light); }
.existing-media-item { border: 1px solid var(--gray-medium); padding: 0.6rem; border-radius: 8px; background-color: var(--white); font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-light); transition: var(--transition-fast); }
.existing-media-item:hover { box-shadow: var(--shadow-medium); }
.existing-media-item img, .existing-media-item video { width: 100%; height: 70px; object-fit: cover; margin-bottom: 0.4rem; border-radius: 4px; border: 1px solid var(--gray-light); background-color: var(--gray-light); }
.existing-media-item .media-icon-placeholder { font-size: 28px; height: 70px; display: flex; align-items: center; justify-content: center; color: var(--gray-medium); margin-bottom: 0.4rem; width: 100%; }
.existing-media-item .media-filename { font-weight: 500; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 0.7rem; color: var(--dark); line-height: 1.2; text-align: center; }
.existing-media-item .media-description { font-size: 0.65rem; color: var(--gray-dark); margin-bottom: 0.4rem; max-height: 2.6em; overflow: hidden; text-overflow: ellipsis; line-height: 1.3em; word-wrap: break-word; text-align: center; width: 100%; }
.existing-media-item .btn-delete-media { width: auto; align-self: center; margin-top: auto; padding-top: 0.4rem; }

#uploadMediaFeedback p, #commentsManagementFeedback p { margin: 0; padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid transparent; }
#uploadMediaFeedback p.success-message, #commentsManagementFeedback p.success-message { background-color: rgba(var(--success-rgb), 0.15); border-color: var(--success); color: var(--dark); }
#uploadMediaFeedback p.error-message, #commentsManagementFeedback p.error-message { background-color: rgba(var(--danger-rgb), 0.15); border-color: var(--danger); color: var(--dark); }

/* Stili per prenotazioni raggruppate nella Dashboard */
.user-bookings-list { margin-top: 1rem; }
.user-booking-group { border: 1px solid var(--gray-light); border-radius: var(--border-radius-medium); padding: 1rem; margin-bottom: 1rem; background-color: #fdfdfd; }
.user-booking-group h5 { font-size: 1.05rem; color: var(--primary); margin-top: 0; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px dotted var(--gray-medium); }
.single-booking-details { padding: 0.5rem; margin-bottom: 0.5rem; border-left: 3px solid var(--secondary); background-color: var(--white); }
.single-booking-details > p { font-size: 0.9rem; margin-bottom: 0.3rem; } /* Paragrafo con ID Prenotazione e posti */
.participant-list-inline { list-style: none; padding-left: 0; margin-bottom: 0.5rem; font-size: 0.85rem; }
.participant-list-inline li { display: inline-block; margin-right: 0.8rem; padding: 0.2rem 0.5rem; background-color: var(--light); border-radius: 4px; border: 1px solid var(--gray-light); }
.single-booking-details .btn-admin.btn-sm { display: inline-block; margin-top: 0.5rem; }

/* Stili base per i commenti nel modal, ispirati a evento_dettaglio_accesso.html */
#manageCommentsModal .comments-list-admin-styled { /* Nuovo contenitore per i commenti stilizzati */
  list-style: none;
  padding: 0;
  margin: 0;
}

#manageCommentsModal .comment-item-admin-styled {
  background: var(--white);
  border-radius: var(--border-radius-medium);
  padding: 1.5rem; /* Più padding per un aspetto migliore */
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-light);
  border-left: 4px solid var(--secondary); /* Bordo colorato come in evento_dettaglio */
}
#manageCommentsModal .comment-item-admin-styled:last-child {
  margin-bottom: 0;
}

#manageCommentsModal .comment-header {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Spazio tra avatar e meta */
  margin-bottom: 0.8rem;
}

#manageCommentsModal .comment-header .user-avatar {
  width: 40px; /* Dimensioni avatar come in evento_dettaglio */
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-light); /* Leggero bordo all'avatar */
}

#manageCommentsModal .comment-meta strong {
  font-size: 1rem; /* Dimensione nome utente */
  color: var(--dark);
  font-weight: 600;
}
#manageCommentsModal .comment-meta small {
  font-size: 0.8rem; /* Dimensione data e ID */
  color: var(--gray-dark);
  margin-left: 0.5rem;
  display: block; /* Per far andare ID a capo se necessario */
}
#manageCommentsModal .comment-meta small.comment-id-details {
  font-style: italic;
  font-size: 0.75rem;
}


#manageCommentsModal .comment-text-admin {
  font-size: 0.95rem; /* Dimensione testo commento */
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem; /* Spazio prima delle azioni */
  word-wrap: break-word;
}

#manageCommentsModal .comment-actions-admin {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gray-light); /* Separatore leggero */
}

#manageCommentsModal .btn-admin-reply,
#manageCommentsModal .btn-admin-delete-comment { /* Classi più specifiche per i bottoni nel modal */
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  gap: 0.3em;
}
#manageCommentsModal .btn-admin-reply {
  background-color: var(--secondary);
  color: white;
}
#manageCommentsModal .btn-admin-reply:hover {
  background-color: var(--primary);
}


/* Stile per il form di risposta admin */
#manageCommentsModal .reply-form-admin {
  display: none; /* Nascosto di default, mostrato da JS */
  margin-top: 1rem;
  margin-left: 50px; /* Indentazione per la risposta, allineata dopo l'avatar */
  padding: 1rem;
  background-color: var(--light);
  border-radius: 8px;
  border: 1px solid var(--gray-light);
}
#manageCommentsModal .reply-form-admin.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}
#manageCommentsModal .reply-form-admin textarea {
  width: 100%;
  min-height: 70px;
  padding: 0.6rem;
  border: 1px solid var(--gray-medium);
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  resize: vertical;
}
#manageCommentsModal .reply-form-admin .form-actions-reply {
  text-align: right;
}
#manageCommentsModal .reply-form-admin .form-message-local {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: left;
}

/* Stili per le risposte nidificate (se decidi di implementarle visivamente) */
#manageCommentsModal .comment-replies-list-styled {
  list-style: none;
  padding-left: 0; /* Reset padding, l'indentazione è gestita dal margin del contenitore */
  margin-top: 1rem;
  margin-left: 25px; /* Indentazione per le risposte */
  border-left: 2px dotted var(--gray-medium);
  padding-left: 15px; /* Spazio dopo la linea di indentazione */
}

/* ----- FINE STILI SPECIFICI DASHBOARD ----- */

/* ----- INIZIO NUOVI STILI DASHBOARD PER CARD EVENTI ----- */

/* Contenitore per le card admin, simile a .card-grid */
.admin-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* Adatta minmax se necessario */
  gap: 2rem; /* Spazio tra le card */
  margin-top: 1.5rem;
}

.admin-event-grid .loading-message-dashboard,
.admin-event-grid .error-message-dashboard,
.admin-event-grid .no-events-dashboard {
  grid-column: 1 / -1; /* Occupa tutta la larghezza */
  text-align: center;
  padding: 2rem;
  font-size: 1.1rem;
  color: var(--gray-dark);
  background-color: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
}
.admin-event-grid .loading-message-dashboard i {
  margin-right: 0.5em;
}

.admin-event-card {
  background: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--gray-light);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Per angoli arrotondati sull'immagine */
  transition: var(--transition-medium);
}
.admin-event-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.admin-event-card-image-container {
  height: 180px; /* Altezza fissa per l'immagine della card admin */
  background-color: var(--gray-light); /* Sfondo per immagini non caricate */
  overflow: hidden;
}
.admin-event-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Immagine copre il contenitore */
  transition: transform 0.3s ease-out;
}
.admin-event-card:hover .admin-event-card-image {
  transform: scale(1.05);
}

.admin-event-card-content {
  padding: 1rem 1.2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.admin-event-card-header {
  margin-bottom: 0.8rem;
}
.admin-event-card-header .admin-event-title {
  font-size: 1.3rem;
  color: var(--primary);
  margin: 0 0 0.3rem 0;
  font-weight: 600;
  line-height: 1.4;
}
.admin-event-card-header .admin-event-date {
  font-size: 0.85rem;
  color: var(--gray-dark);
}

.admin-event-card-quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Due colonne per le stats */
  gap: 0.5rem 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--gray-light);
}
.admin-event-card-quick-stats .stat-item {
  font-size: 0.85rem;
  color: var(--dark);
  display: flex;
  align-items: center;
  background-color: var(--light);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}
.admin-event-card-quick-stats .stat-item i {
  margin-right: 0.5em;
  color: var(--secondary);
  font-size: 0.9em;
  width: 16px; /* Allinea le icone */
  text-align: center;
}

.admin-event-card-actions {
  display: grid; /* Usa grid per allineare i bottoni */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.admin-event-card-actions .btn-admin {
  width: 100%; /* I bottoni occupano tutta la larghezza della cella grid */
  font-size: 0.8rem; /* Riduci leggermente il font per più bottoni */
  padding: 0.5rem 0.6rem;
}
.admin-event-card-actions .btn-admin i {
  font-size: 0.9em;
}


.admin-event-card-expand-toggle {
  background-color: var(--light);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary);
  transition: background-color var(--transition-fast);
  border: 1px solid var(--gray-light);
  margin-top: auto; /* Spinge il toggle in fondo alla card-content se lo spazio lo permette */
}
.admin-event-card-expand-toggle:hover {
  background-color: #e8f0e7; /* Leggero hover come event-header-admin */
}
.admin-event-card-expand-toggle i {
  transition: transform 0.25s ease;
}
.admin-event-card-expand-toggle i.fa-chevron-up {
  transform: rotate(180deg);
}

.admin-event-card-details {
  padding: 0 1.2rem 1.2rem 1.2rem; /* Padding per i dettagli espansi */
  background-color: #fcfcfc; /* Leggero sfondo per distinguere */
  border-top: 1px solid var(--gray-light);
  display: none; /* Nascosto di default */
}
.admin-event-card-details.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}
.admin-event-card-details h4 {
  color: var(--primary);
  margin-top: 1rem;
  margin-bottom: 0.8rem;
  font-size: 1.05rem;
  text-align: left;
  font-weight: 500;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted var(--gray-medium);
}
.admin-event-card-details .user-bookings-list {
  margin-top: 0.5rem;
}
.admin-event-card-details .user-booking-group h5 small { /* Per rendere il contatto meno prominente */
  font-weight: normal;
  font-size: 0.9em;
  color: var(--gray-dark);
}

/* Stili per messaggi di feedback nell'annullamento prenotazione (se non già globali) */
.success-message {
  padding: 0.8rem; margin: 0.5rem 0;
  background-color: rgba(var(--success-rgb), 0.15);
  border: 1px solid var(--success);
  color: var(--dark);
  border-radius: 6px;
  font-size: 0.9rem;
}
.error-message {
  padding: 0.8rem; margin: 0.5rem 0;
  background-color: rgba(var(--danger-rgb), 0.15);
  border: 1px solid var(--danger);
  color: var(--dark);
  border-radius: 6px;
  font-size: 0.9rem;
}
.cancel-feedback-placeholder { /* Stile per il placeholder del feedback, se necessario */
  font-size: 0.9rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

/* Stili per i commenti nel modal (assicurati che siano coerenti) */
#manageCommentsModal .comment-replies-list {
  margin-left: 15px; /* Già presente, conferma coerenza */
  padding-left: 10px; /* Già presente */
  border-left: 2px dotted var(--gray-medium); /* Già presente */
}

/* Modifiche Responsive per Admin Cards */
@media (max-width: 767px) {
  .admin-event-grid {
    grid-template-columns: 1fr; /* Una colonna su mobile */
  }
  .admin-event-card-quick-stats {
    grid-template-columns: 1fr; /* Stats in una colonna su mobile se troppo strette */
  }
  .admin-event-card-actions {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Bottoni più piccoli o 2 per riga */
  }
}

/* ----- FINE NUOVI STILI DASHBOARD ----- */

/* ----- REGOLE FONDAMENTALI PER I MODAL GENERICI (dal tuo file, se diverse da .modal-eff) ----- */
/* Se .modal e .modal-eff sono concettualmente la stessa cosa, potresti voler unificare gli stili.
   Per ora, mantengo entrambe le definizioni come nel tuo file originale,
   ma la logica JS che ti ho dato usa #conversationModal che ha la classe .modal-eff */
.modal {
  display: none;
  position: fixed;
  z-index: 1050; /* Assicurati che questo z-index sia appropriato rispetto a .modal-eff se coesistono */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(var(--dark-rgb), 0.84);
  backdrop-filter: blur(5px);
  transition: opacity 0.2s ease-out;
  align-items: center;
  justify-content: center;
}
.modal.active {
  display: flex;
  opacity: 1;
}
.modal-content { /* Stile base per il box bianco del popup generico */
  background-color: var(--white);
  padding: 2.4rem 3rem;
  border: none;
  width: 90%;
  max-width: 660px;
  border-radius: var(--border-radius-medium);
  position: relative;
  box-shadow: 0 11px 38px rgba(0,0,0,0.15);
  /* animation: fadeInModal 0.25s ease-out;  Potrebbe essere ridondante se .modal-eff ha già un'animazione */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.close-modal-btn { /* Bottone di chiusura per .modal generico */
  color: var(--gray-medium);
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: 2.4rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 0.32rem;
  transition: var(--transition-fast);
  z-index: 10;
}
.close-modal-btn:hover, .close-modal-btn:focus {
  color: var(--dark);
  transform: rotate(90deg) scale(1.12);
}
/* ... (Potrebbero esserci altri stili per .modal-content specifico della dashboard qui sotto, se erano separati) ... */
/* Modal Dashboard (generalmente erediterà da .modal, .modal-content globali) */
/* Puoi aggiungere qui sovrascritture specifiche se necessario */
/* .modal-content { ... (se c'erano stili specifici per la dashboard qui, sono stati uniti sopra o sono ereditati) ... } */
.modal-content-scrollable {
  overflow-y: auto;
  flex-grow: 1;
  padding: 0.5rem;
  min-height: 150px;
}
.modal-content h3 {
  color: var(--primary);
  font-size: 1.7rem;
  margin-bottom: 1.5rem;
}
/* ----- FINE REGOLE FONDAMENTALI PER I MODAL ----- */

/* Modal Dashboard (generalmente erediterà da .modal, .modal-content globali) */
/* Puoi aggiungere qui sovrascritture specifiche se necessario */
.modal-content { /* Assicurati che i modal della dashboard usino questo */
  max-width: 700px; /* Larghezza massima per modal dashboard */
  display: flex; /* Per usare flex-grow su modal-content-scrollable */
  flex-direction: column;
  /* Altri stili come padding, background, sono già in style.css */
}
.modal-content-scrollable { /* Nuovo per gestire lo scroll interno al modal */
  overflow-y: auto;
  flex-grow: 1; /* Fa sì che questa parte si espanda e permetta lo scroll */
  padding: 0.5rem; /* Leggero padding interno */
  min-height: 150px; /* Altezza minima prima che inizi lo scroll */
}

.modal-content h3 { /* Titolo del modal */
  color: var(--primary); /* Coerente con h3 globali */
  font-size: 1.7rem; /* Dimensione titolo modal */
  margin-bottom: 1.5rem;
}
.modal-content .form-group {
  margin-bottom: 1rem;
}
.modal-content .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--dark);
  font-size: 1rem; /* Dimensione label form modal */
  text-align: left;
}
/* Stile per input e textarea nei modal, riprende .form-control */
.modal-content .form-group input[type="file"],
.modal-content .form-group textarea,
.modal-content .form-group input[type="text"] { /* E altri tipi di input se necessario */
  width: 100%;
  padding: 0.8rem 1rem; /* Padding input modal */
  border: 1px solid var(--gray-medium);
  border-radius: var(--border-radius-medium); /* Coerente */
  font-size: 1rem; /* Dimensione font input */
  box-sizing: border-box; /* Importante per width 100% e padding */
}
.modal-content .form-group input[type="file"] {
  padding: 0.6rem; /* Diverso padding per file input */
}
.modal-content .form-group textarea {
  min-height: 80px; /* Altezza minima textarea */
  resize: vertical;
}
/* Stile per il bottone di submit dentro il modal */
.modal-content form button[type="submit"].btn-admin {
  margin-top: 1rem; /* Spazio sopra il bottone */
  width: auto; /* Non forzare 100% a meno che non sia un design specifico */
  display: block; /* O inline-block se vuoi che sia largo quanto il contenuto */
  margin-left: auto; /* Se display:block e vuoi allinearlo a destra nel form-actions */
  margin-right: auto; /* O auto per centrarlo se display:block */
}
/* Se hai un contenitore .form-actions nel modal */
.modal-content .form-actions {
  margin-top: 1.5rem;
  text-align: right; /* Per allineare bottoni a destra */
}
.modal-content .form-actions .btn-admin {
  margin-left: 0.5rem; /* Spazio tra bottoni se multipli */
}


/* Sezione Media Esistenti nel Modal */
.existing-media-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
}
.existing-media-section h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem; /* Dimensione titolo "Media Caricati" */
  color: var(--primary);
  font-weight: 500;
}
.existing-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem; /* Spazio ridotto tra i media */
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
  background-color: var(--light); /* Sfondo leggero per la griglia */
  border-radius: 8px; /* Leggero arrotondamento per la griglia */
  border: 1px solid var(--gray-light);
}
.existing-media-item {
  border: 1px solid var(--gray-medium);
  padding: 0.75rem;
  border-radius: 8px;
  background-color: var(--white);
  text-align: center;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Spazia contenuto verticalmente */
  box-shadow: var(--shadow-light);
  transition: var(--transition-fast);
}
.existing-media-item:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}
.existing-media-item img,
.existing-media-item video {
  width: 100%; /* Occupa tutta la larghezza disponibile nell'item */
  height: 70px; /* Altezza fissa per anteprime */
  object-fit: cover; /* 'cover' per riempire, 'contain' per mostrare tutto */
  margin-bottom: 0.5rem;
  border-radius: 4px; /* Leggero arrotondamento per l'anteprima */
  border: 1px solid var(--gray-light); /* Bordo sottile per l'anteprima */
  background-color: var(--gray-light); /* Sfondo per immagini che non caricano */
}
.existing-media-item .media-icon-placeholder {
  font-size: 30px; /* Dimensione icona file */
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-medium);
  margin-bottom: 0.5rem;
}
.existing-media-item .media-filename {
  font-weight: 500;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem; /* Dimensione nome file */
  color: var(--dark);
  line-height: 1.2;
}
.existing-media-item .media-description {
  font-size: 0.75rem; /* Dimensione descrizione */
  color: var(--gray-dark);
  margin-bottom: 0.5rem;
  max-height: 2.6em; /* Circa 2 righe */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3em;
  word-wrap: break-word;
}
/* Stile specifico per il bottone elimina media per centrarlo e renderlo coerente */
.existing-media-item .btn-delete-media {
  /* .btn-admin e .btn-sm dovrebbero già dare lo stile base */
  /* Assicurati che .btn-admin non abbia margini laterali che lo spingono */
  /* Se .existing-media-item è flex column, il bottone sarà largo 100% */
  /* Il contenuto del bottone (icona + testo) è già centrato da .btn-admin */
  width: auto; /* Permette al bottone di adattarsi al contenuto */
  align-self: center; /* Centra il bottone stesso nell'item flex */
  margin-top: auto; /* Spinge il bottone in fondo se c'è spazio extra */
  padding-top: 0.5rem; /* Spazio sopra il bottone se è l'ultimo elemento */
}


/* Feedback messages nel modal */
#uploadMediaFeedback, #commentsManagementFeedback {
  margin-top: 1rem;
  padding: 0.8rem 1rem; /* Padding per messaggi */
  border-radius: 8px; /* Coerente con --border-radius-medium */
  font-size: 0.95rem; /* Dimensione font messaggi */
  text-align: center;
}
#uploadMediaFeedback p, #commentsManagementFeedback p {
  margin: 0; /* Rimuovi margini default dei p */
  padding: 0.5rem;
  border-radius: 6px;
}
#uploadMediaFeedback p.success-message,
#commentsManagementFeedback p.success-message { /* Usa classi invece di style inline */
  background-color: rgba(var(--success-rgb), 0.15);
  border: 1px solid var(--success);
  color: var(--dark);
}
#uploadMediaFeedback p.error-message,
#commentsManagementFeedback p.error-message { /* Usa classi invece di style inline */
  background-color: rgba(var(--danger-rgb), 0.15);
  border: 1px solid var(--danger);
  color: var(--dark);
}


/* Lista partecipanti/commenti nel modal (se diversa da quella in .event-details-admin) */
.modal-content .participants-list { /* Già definito in style.css, verifica se serve qui */
  /* max-height: 300px; */ /* Controllato da .modal-content-scrollable */
  /* overflow-y: auto; */
  padding-right: 5px; /* Piccolo padding per la scrollbar */
  margin-bottom: 1rem;
}
.modal-content .participants-list li {
  padding: 0.7rem 0.5rem; /* Padding per item lista */
  font-size: 0.95rem; /* Dimensione font item lista */
  border-bottom: 1px solid var(--gray-light);
  display: flex; /* Per allineare nome e bottone */
  justify-content: space-between;
  align-items: center;
}
.modal-content .participants-list li:last-child {
  border-bottom: none;
}
.modal-content .participants-list li strong { /* Nome utente commento/partecipante */
  display: block;
  margin-bottom: 0.2rem;
  color: var(--primary);
}
.modal-content .participants-list li small { /* Data commento o dettagli minori */
  font-size: 0.85em;
  color: var(--gray-dark);
}
.modal-content .participants-list li .btn-admin { /* Bottoni nella lista commenti/partecipanti */
  margin-left: 0.5rem; /* Spazio a sinistra del bottone */
}


/* ----- FINE STILI DASHBOARD ----- */

/* ----- POPUP AVVISO SITO IN COSTRUZIONE -----*/
.construction-warning-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--dark-rgb), 0.84);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
.construction-warning-popup {
  display: none;
  width: 90%;
  max-width: 590px;
  background: var(--white);
  border-radius: var(--border-radius-medium);
  padding: 2.6rem 3.2rem;
  box-shadow: var(--shadow-medium);
  z-index: 2001;
  text-align: center;
  opacity: 0;
  transform: scale(0.92) translateY(-14px);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.construction-warning-overlay.active {
  display: flex;
  opacity: 1;
}
.construction-warning-overlay.active .construction-warning-popup {
  display: block;
  opacity: 1;
  transform: scale(1) translateY(0);
}

.construction-warning-popup h2 {
  color: var(--accent);
  font-size: clamp(2rem, 5vw, 2.4rem);
  margin-top: 0;
  margin-bottom: 1.4rem;
}

.construction-warning-popup p {
  color: var(--dark);
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: 1.4rem;
}
.construction-warning-popup p:last-of-type {
  margin-bottom: 2.2rem;
}

.close-construction-warning {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: none;
  border: none;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  color: var(--gray-medium);
  cursor: pointer;
  padding: 0.35rem;
  transition: var(--transition-fast);
}
.close-construction-warning:hover {
  color: var(--dark);
  transform: rotate(90deg) scale(1.14);
}



/* ----- SEZIONE COMMENTI RESTYLING (Come da tue ultime indicazioni e mie precedenti risposte) ----- */
.comments-section { margin-top: 4rem; border-top: 1px solid var(--gray-light); padding-top: 3rem; background-color: #f9f9f9; border-radius: var(--border-radius-large); padding: 2rem clamp(1rem, 5vw, 3rem); box-shadow: 0 8px 25px rgba(0,0,0,0.07); }
.comments-section > h2, .comments-section > h3 { text-align: center; margin-bottom: 2.5rem; color: var(--primary); font-weight: 600; }
.comments-section > h2 { font-size: clamp(2rem, 4.5vw, 2.6rem); }
.comments-section > h3 { font-size: clamp(1.6rem, 3.8vw, 2.2rem); margin-top: 3rem; color: var(--secondary); }
.comment-form { background: var(--white); border-radius: var(--border-radius-medium); padding: clamp(1.5rem, 3vw, 2rem); margin-bottom: 3rem; box-shadow: var(--shadow-light); border: 1px solid var(--gray-light); }
.comment-form h4 { margin-bottom: 1.5rem; font-size: clamp(1.3rem, 2.5vw, 1.5rem); color: var(--primary); text-align: left; font-weight: 600; }
.comment-form-container { display: flex; flex-direction: column; gap: 1rem; }
.comment-form textarea { flex-grow: 1; min-height: 120px; resize: vertical; width: 100%; font-size: 1.1rem; padding: 0.8rem 1rem; border: 1px solid var(--gray-medium); border-radius: 9px; transition: var(--transition-fast); }
.comment-form textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3.5px rgba(var(--secondary-rgb, 141, 177, 135), 0.35); outline: none; } /* Aggiunto --secondary-rgb fallback */
.btn-comment { background: var(--secondary); color: white; border: none; padding: 0.9rem 1.8rem; border-radius: 9px; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: var(--transition-medium); align-self: flex-end; display: inline-flex; align-items: center; gap: 0.6em; }
.btn-comment:hover { background: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-light); }
.btn-comment.btn-small { padding: 0.7rem 1.2rem; font-size: 1rem; }
.comments-list { margin-top: 2rem; }
.comment { background: var(--white); border-radius: var(--border-radius-medium); padding: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.8rem; box-shadow: 0 5px 15px rgba(0,0,0,0.08); border: 1px solid var(--gray-light); position: relative; overflow-wrap: break-word; width: 100%; box-sizing: border-box; }
.comment:not(.reply)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background-color: var(--secondary); border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); }
.comment.admin-comment-highlight:not(.reply)::before { background-color: var(--accent); }
.comment:not(.reply) { padding-left: clamp(2rem, 4vw, 2.8rem); }
.comment-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.comment .user-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid var(--light); flex-shrink: 0; }
.comment-meta { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.comment-meta .author-line { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 0.2rem; }
.comment-meta strong { font-size: 1.1rem; color: var(--primary); font-weight: 600; margin-right: 0.5rem; word-break: break-word; }
.comment-meta small { font-size: 0.85rem; color: var(--gray-dark); word-break: break-word; }
/* .badge-staff è definito all'inizio, assicurati sia quello corretto */
.comment p { margin-bottom: 1.2rem; color: #4a4a4a; font-size: 1.05rem; line-height: 1.7; word-wrap: break-word; text-align: left; overflow-wrap: break-word; min-width: 0; }
.comment-actions { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-light); }
.like-btn, .btn-reply { background: none; border: 1px solid transparent; color: var(--gray-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4rem 0.8rem; border-radius: 6px; transition: all 0.2s ease-in-out; font-weight: 500; }
.like-btn i, .btn-reply i { font-size: 0.95em; }
.like-btn:hover, .btn-reply:hover { background-color: var(--gray-light); color: var(--primary); border-color: var(--gray-medium); text-decoration: none; }
.like-btn.active { color: var(--danger); }
.like-btn.active:hover { color: var(--danger); background-color: rgba(var(--danger-rgb), 0.15); }
.replies { margin-top: 1.5rem; padding-left: clamp(1.2rem, 3.5vw, 1.8rem); position: relative; box-sizing: border-box; }
.replies::before { content: ""; position: absolute; left: calc(clamp(1.2rem, 3.5vw, 1.8rem) / 2 - 1px); top: -0.5rem; bottom: 0.5rem; width: 2px; background-color: #e0e0e0; border-radius: 2px; }
.comment.reply { background-color: #fdfdfd; box-shadow: 0 3px 10px rgba(0,0,0,0.06); border: 1px solid #eef0f1; padding: clamp(1.2rem, 2.5vw, 1.8rem); margin-bottom: 1.5rem; }
.comment.reply:not(.reply)::before { display: none; }
.reply-form { display: none; margin-top: 1.2rem; padding: clamp(1rem, 2vw, 1.2rem); background-color: var(--white); border-radius: var(--border-radius-medium); border: 1px solid var(--gray-light); box-shadow: var(--shadow-light); animation: fadeIn 0.3s ease-out; }
.reply-form.active { display: block; }
.reply-form form { display: flex; flex-direction: column; gap: 0.8rem; }
.reply-form textarea { width: 100%; font-size: 1rem; min-height: 70px; padding: 0.6rem 0.8rem; }
.reply-form .btn-comment.btn-small { align-self: flex-end; }
.form-message-local { font-size: 0.85rem; text-align: left; }
.form-message-local.error { color: var(--danger); }
.form-message-local.success { color: var(--success); }
.no-content-message { text-align: center; padding: 2rem; font-size: 1.1rem; color: var(--gray-dark); background-color: var(--white); border-radius: var(--border-radius-medium); border: 1px dashed var(--gray-medium); margin: 2rem auto; max-width: 600px; }
#login-to-comment-message a { color: var(--secondary); font-weight: 500; text-decoration: underline; }
#login-to-comment-message a:hover { color: var(--primary); }

/* === GALLERIA EVENTO === */

.event-gallery-container {
  margin-bottom: 4rem;
}

.event-gallery-container h2.section-title {
  text-align: center;
  padding-left: 0;
  margin-bottom: 3.5rem;
  color: var(--primary);
  font-size: clamp(2.4rem, 5vw, 3rem);
}
.event-gallery-container h2.section-title::before {
  display: none;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.4rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 16/10;
  background-color: var(--gray-light);
}

.gallery-item:hover {
  transform: scale(1.07);
  box-shadow: var(--shadow-medium);
}

.gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item .media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item a:hover .media-overlay {
  opacity: 1;
}

.gallery-item .media-play-icon {
  font-size: 4rem;
  color: var(--white);
  text-shadow: 0 0 14px rgba(0,0,0,0.6);
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(var(--dark-rgb), 0.96);
  justify-content: center; align-items: center;
  padding: 30px;
  backdrop-filter: blur(6px);
}

.lightbox.active { display: flex; animation: fadeIn 0.3s ease-out; }

.lightbox-content {
  max-width: 94%; max-height: 94%; position: relative;
  display: flex; justify-content: center; align-items: center;
}
.lightbox-content img, .lightbox-content video, .lightbox-content iframe {
  max-width: 100%; max-height: 90vh; display: block; margin: auto;
  border-radius: var(--border-radius-medium);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  border: 3.5px solid var(--light);
}
.lightbox-content iframe {
  width: 90vw; height: calc(90vw * 9 / 16);
  max-width: 1300px;
  max-height: 84vh;
}

.lightbox-close {
  position: absolute; top: 14px; right: 26px; color: var(--white);
  font-size: 3.2rem; font-weight: bold; cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease; z-index: 2001;
}
.lightbox-close:hover { color: var(--accent); transform: rotate(90deg); }

.lightbox-navigation {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60px; background-color: rgba(0,0,0,0.52);
  color: white; border: none; font-size: 2.6rem; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease; z-index: 2001;
}
.lightbox-navigation:hover { background-color: var(--secondary); transform: translateY(-50%) scale(1.08); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

#lightbox-caption {
  text-align: center; color: var(--light); margin-top: 20px; font-size: 1.25rem;
  font-weight: 500; padding: 11px 20px; background-color: rgba(0,0,0,0.6);
  border-radius: var(--border-radius-medium); display: none;
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  max-width: 84%;
}
.lightbox-caption.visible { display: inline-block; }

/* =============== INIZIO STILI PER LA SEZIONE DETTAGLI EVENTO (Corretti) =============== */

/* Contenitore principale per centrare il contenuto specifico della pagina dettaglio evento */
.event-detail-container {
  /* Il .container globale gestisce già max-width e padding laterali */
}

/* Titolo Principale della Pagina Evento (H1) */
.event-detail-container > h1#eventTitleHeader {
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  color: var(--primary);
  font-size: clamp(2.3rem, 5vw, 2.9rem); /* Esempio: come un H2 globale ma con stile Playfair */
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 0.8rem;
  /* border-bottom: 1px solid var(--gray-light); /* Bordo leggero opzionale per H1 */
}

/* Immagine di Copertina Evento */
#eventCoverImage.event-cover-image {
  display: block; /* Necessario per far funzionare margin: auto; e per controllo layout */
  width: 100%;    /* L'immagine cerca di occupare tutta la larghezza del contenitore padre */
  max-width: 850px; /* Limite massimo alla larghezza dell'immagine su schermi grandi */
  height: auto;   /* Mantiene le proporzioni dell'immagine quando la larghezza cambia */
  margin-left: auto;  /* Centra l'immagine se la sua larghezza effettiva è inferiore a quella del contenitore */
  margin-right: auto; /* Centra l'immagine */
  border: 3px solid var(--white);
  box-shadow: var(--shadow-medium);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  border-radius: var(--border-radius-medium);
  /* object-fit: cover; /* Opzionale: se vuoi che l'immagine copra sempre lo spazio mantenendo le proporzioni,
                           ma potrebbe tagliare parti dell'immagine se le proporzioni non corrispondono.
                           Generalmente non necessario se height è auto. */
}

/* Informazioni Meta Evento (Data, Ora, Relatore) */
#eventMetaInfo.event-meta-info {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--light);
  padding: 1.2rem 1.5rem;
  border-radius: var(--border-radius-medium);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), var(--shadow-light);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.5rem;
  margin-bottom: 2.5rem;
}
#eventMetaInfo span {
  background-color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid var(--gray-light);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
}
#eventMetaInfo span:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}
#eventMetaInfo span i {
  color: var(--accent);
  margin-right: 0.5em;
  font-size: 1em;
}

/* Descrizione Completa Evento */
#eventDescriptionFull.event-description-full {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--white);
  padding: 1.5rem 2rem;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  margin-bottom: 2.5rem;
  font-size: 1.2rem; /* Coerente con .card-content p */
  line-height: 1.85;
  color: var(--dark);
  text-align: left; /* Standard, o 'justify' se preferito */
}
#eventDescriptionFull p:last-child {
  margin-bottom: 0;
}

/* Contenitore Link Volantino */
#eventVolantinoContainer.volantino-link-container {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--light);
  padding: 1.5rem;
  border-radius: var(--border-radius-medium);
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-light);
}
#eventVolantinoContainer h4 {
  font-family: 'Segoe UI', sans-serif;
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 600;
}
/* .btn-volantino è già definito globalmente e dovrebbe andare bene */


/* Titoli delle Sezioni Galleria e Commenti (H2) */
/* Questi sono gli stili di riferimento per i titoli di questa pagina */
.event-detail-container #event-gallery > h2,
.event-detail-container #event-comments > h2 { /* Aumentata specificità anteponendo .event-detail-container */
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  color: var(--primary);
  font-size: clamp(2.0rem, 4vw, 2.5rem); /* Dimensione specifica per questi H2 */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  /* border-bottom: 1px dashed var(--gray-medium); /* Opzionale */
}

/* Sottotitolo "Commenti:" (H3) */
.event-detail-container #event-comments > h3 { /* Aumentata specificità */
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  color: var(--primary);
  font-size: clamp(1.7rem, 3.5vw, 2.0rem); /* Dimensione per H3, più piccola dell'H2 */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.3rem;
}

/* Messaggio di errore per caricamento evento */
#eventLoadingError.no-content-message {
  max-width: 850px;
  margin: 2rem auto;
}

/* Stili generali per la galleria e i commenti (se non già presenti e sufficienti globalmente) */
.event-gallery-container, .comments-section {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  /* padding-top: 0; /* Rimosso per lasciare gestire ai titoli il loro margine superiore */
}
/* Rimuovi la specificità eccessiva se .section-title non è usato qui per gli H2 */
/* .event-gallery-container h2.section-title (e simili) vanno rimossi se non usi la classe .section-title */


/* Assicurati che i titoli H4 dentro .comment-form siano standard o come desideri */
.comment-form h4 {
  /* font-family: 'Segoe UI', sans-serif; /* Se vuoi il font standard per questo h4 */
  /* text-align: left; */ /* Già così dallo stile globale per .comment-form h4 */
  /* font-size: 1.65rem; */ /* Già così dallo stile globale per .comment-form h4 */
}
/* =============== FINE STILI PER LA SEZIONE DETTAGLI EVENTO =============== */



/* ----- INIZIO NUOVI STILI DASHBOARD ----- */

/* Stile Filtri Dashboard (Box rimpicciolito e centrato) */
.event-filters {
  background-color: var(--white);
  padding: 1.5rem;
  border-radius: var(--border-radius-medium);
  margin-bottom: 2rem; /* Spazio sotto i filtri */
  box-shadow: var(--shadow-light);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  justify-content: center; /* Centra i gruppi di form all'interno di questo box */
  /* width: 100%; /* RIMOSSO per non farlo a tutta larghezza */
  max-width: 980px; /* NUOVO: Larghezza massima per il box dei filtri */
  margin-left: auto;   /* NUOVO: Centra il box dei filtri nella pagina */
  margin-right: auto;  /* NUOVO: Centra il box dei filtri nella pagina */
}
.event-filters .form-group {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
  max-width: 320px; /* Limita l'espansione massima di ogni gruppo input */
}
.event-filters label {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--primary);
  display: block;
  font-weight: 500;
}
.event-filters input.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-medium);
  border-radius: 8px;
  font-size: 1rem;
  background-color: var(--white);
  line-height: 1.5;
}
.event-filters input.form-control:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(141, 177, 135, 0.25);
  outline: none;
}
.event-filters .form-group.filter-button-group {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  /* margin-left: auto; Rimosso perché justify-content:center sul parent gestisce il blocco */
}
.event-filters #resetFiltersBtn.btn-admin {
  background-color: var(--gray-dark);
  color: white;
  border-color: var(--gray-dark);
  padding: 0.75rem 1.2rem;
  line-height: 1.5;
  white-space: nowrap;
  height: calc( (0.75rem * 2) + 1rem * 1.5 + 2px );
}
.event-filters #resetFiltersBtn.btn-admin:hover {
  background-color: var(--dark);
  border-color: var(--dark);
}

/* Contenitore principale per il contenuto delle tab (griglie eventi) */
.tabbed-content-area.dashboard-section {
  background-color: var(--white);
  padding: 0; /* Il padding sarà gestito da #eventManagementContent all'interno */
  border: 1px solid var(--gray-medium);       /* APPLICA BORDO SU TUTTI I LATI */
  border-radius: var(--border-radius-medium); /* APPLICA STONDATURA SU TUTTI GLI ANGOLI */
  box-shadow: var(--shadow-light);
  margin-top: 1.5rem; /* Aggiunge spazio sopra, separandolo da .event-view-controls */
  /* Se .event-view-controls ha già margin-bottom, potresti voler regolare questo */
  overflow: hidden; /* IMPORTANTE: per assicurare che i figli rispettino la stondatura */
}
.event-tabs-container { display: flex; position: relative; z-index: 1; }
.event-tab-button {
  padding: 0.9rem 1.8rem; font-size: 1.1rem; font-weight: 500; color: var(--gray-dark);
  background-color: var(--gray-light); border: 1px solid var(--gray-medium); border-bottom: none;
  cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  display: flex; align-items: center; gap: 0.5em; margin-right: -1px;
  border-radius: 10px 10px 0 0;
}
.event-tab-button:hover { background-color: #e0e0e0; color: var(--primary); }
.event-tab-button.active {
  color: var(--primary); background-color: var(--white);
  border-color: var(--gray-medium) var(--gray-medium) var(--white);
  font-weight: 600; position: relative; z-index: 2;
}
.event-tab-button.active i { color: var(--accent); }
.event-tab-button i { color: var(--primary); transition: color 0.2s ease; }
.event-tab-button:hover i { color: var(--primary); }

#eventManagementContent {
  padding: 1.5rem; /* Padding per il contenuto interno (griglie, barra "Nuovo Evento") */
  /* Rimuovi eventuali background-color, border, border-radius, box-shadow specifici per questo ID,
     poiché ora sono gestiti dal genitore .tabbed-content-area.dashboard-section */
  background-color: transparent; /* O ometti se il genitore ha già var(--white) */
}
#eventManagementContent .event-tab-content { display: none; }
#eventManagementContent .event-tab-content.active { display: block; animation: fadeIn 0.3s ease-out; }


/* Barra "Nuovo Evento" */
.add-event-bar {
  grid-column: 1 / -1 !important;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1rem; border: 2px dashed var(--secondary);
  border-radius: var(--border-radius-medium); background-color: var(--light);
  color: var(--secondary); font-size: 1.15rem; font-weight: 500;
  text-align: center; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-bottom: 1.8rem; min-height: 60px;
}
.add-event-bar:hover { background-color: #e8f0e7; border-color: var(--primary); color: var(--primary); }
.add-event-bar i { font-size: 1.3rem; }

/* Card Admin e Griglia */
.admin-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.8rem;
  padding-bottom: 1rem;
}
.admin-event-card {
  min-height: 380px;
  background: var(--white);
  border-radius: var(--border-radius-medium); box-shadow: var(--shadow-light);
  border: 1px solid var(--gray-light); display: flex; flex-direction: column;
  overflow: hidden; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.admin-event-card:not(.add-event-bar) {
  max-width: 380px; /* Manteniamo max-width per le card evento */
  margin-left: auto;
  margin-right: auto;
}
.admin-event-card:not(.add-event-bar):hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.admin-event-card-image-container { height: 180px; background-color: var(--gray-light); overflow: hidden; }
.admin-event-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-out; }
.admin-event-card:not(.add-event-bar):hover .admin-event-card-image { transform: scale(1.05); }
.admin-event-card-content { padding: 1rem 1.2rem; flex-grow: 1; display: flex; flex-direction: column; }
.admin-event-card-header { margin-bottom: 0.8rem; }
.admin-event-card-header .admin-event-title { font-size: 1.25rem; color: var(--primary); margin: 0 0 0.3rem 0; font-weight: 600; line-height: 1.3; }
.admin-event-card-header .admin-event-date { font-size: 0.8rem; color: var(--gray-dark); }
.admin-event-card-quick-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 0.7rem; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--gray-light); }
.admin-event-card-quick-stats .stat-item { font-size: 0.8rem; color: var(--dark); display: flex; align-items: center; background-color: var(--light); padding: 0.35rem 0.5rem; border-radius: 6px; }
.admin-event-card-quick-stats .stat-item i { margin-right: 0.4em; color: var(--secondary); font-size: 0.85em; width: 15px; text-align: center; }

/* Pulsanti Card */
.admin-event-card-actions { display: grid; gap: 0.6rem; }
.admin-event-card-actions .btn-admin { font-size: 0.82rem; padding: 0.5rem 0.55rem; }
.admin-event-card-actions.top-actions { grid-template-columns: repeat(3, 1fr); margin-bottom: 0.5rem; }
.admin-event-card-actions.bottom-actions { grid-template-columns: repeat(3, 1fr); padding-top: 0.5rem; margin-top: 0; border-top: none; }

.admin-event-card-actions .btn-bookings { background-color: #4CAF50; color: var(--white); border-color: #4CAF50; }
.admin-event-card-actions .btn-bookings:hover { background-color: #45a049; border-color: #388E3C; }
.admin-event-card-actions .btn-edit { background-color: var(--accent); color: var(--white); border-color: var(--accent); }
.admin-event-card-actions .btn-edit:hover { background-color: #b8734a; border-color: #b8734a; }

/* Intestazioni Mese/Anno */
.month-year-header {
  font-size: 1.45rem; color: var(--accent); margin-top: 1.5rem; margin-bottom: 1.2rem;
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--accent);
  text-align: left; font-weight: 600;
  grid-column: 1 / -1 !important; width: 100%;
}
.admin-event-grid > .add-event-bar + .month-year-header,
.admin-event-grid > .month-year-header:first-child { margin-top: 0; }

/* Stili Modal Prenotazioni e altri modal (invariati) */
#manageBookingsModal .modal-content { max-width: 750px; }
#bookingsListContainerModal .user-booking-group { border: 1px solid var(--gray-light); border-radius: 8px; padding: 0.8rem; margin-bottom: 0.8rem; background-color: #fdfdfd; }
#bookingsListContainerModal .user-booking-group h5 { font-size: 1.05rem; color: var(--primary); margin-top: 0; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px dotted var(--gray-medium); }
#bookingsListContainerModal .single-booking-details { padding: 0.5rem; margin-bottom: 0.5rem; border-left: 3px solid var(--secondary); background-color: var(--white); }
#bookingsListContainerModal .single-booking-details > p { font-size: 0.9rem; margin-bottom: 0.3rem; }
#bookingsListContainerModal .participant-list-inline { list-style: none; padding-left: 0; margin-bottom: 0.5rem; font-size: 0.85rem; }
#bookingsListContainerModal .participant-list-inline li { display: inline-block; margin-right: 0.8rem; padding: 0.2rem 0.5rem; background-color: var(--light); border-radius: 4px; border: 1px solid var(--gray-light); }
#bookingsListContainerModal .single-booking-details .btn-admin.btn-sm { display: inline-block; margin-top: 0.5rem; }
#bookingsManagementFeedbackModal p { margin: 0; padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.9rem; }
#bookingsManagementFeedbackModal p.success-message { background-color: rgba(var(--success-rgb), 0.15); border-color: var(--success); color: var(--dark); }
#bookingsManagementFeedbackModal p.error-message { background-color: rgba(var(--danger-rgb), 0.15); border-color: var(--danger); color: var(--dark); }

/* Messaggi di caricamento/errore/nessun evento */
.loading-message-dashboard, .error-message-dashboard, .no-events-dashboard {
  text-align: center; padding: 2rem; font-size: 1.1rem; color: var(--gray-dark);
}
.admin-event-grid > .no-events-dashboard { grid-column: 1 / -1; }
.no-events-dashboard a { color: var(--accent); text-decoration: underline; }
.no-events-dashboard a:hover { color: var(--primary); }

@media (max-width: 767px) {
  .event-filters { flex-direction: column; align-items: stretch; max-width: 100%; /* Occupa tutta la larghezza su mobile */ }
  .event-filters .form-group, .event-filters .form-group.filter-button-group { max-width: none; width: 100%; margin-left:0; }
  .event-filters #resetFiltersBtn { width: 100%; margin-top: 0.5rem; }

  .tabbed-content-area.dashboard-section { margin-bottom: 1rem; }
  .event-tabs-container { flex-direction: column; border-radius: var(--border-radius-medium); margin-bottom: 0; box-shadow: var(--shadow-light); border: 1px solid var(--gray-medium); }
  .event-tab-button { margin-right: 0; border-right: none; border-bottom: 1px solid var(--gray-medium); border-radius: 0; }
  .event-tab-button:first-child { border-radius: 10px 10px 0 0; }
  .event-tab-button:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
  .event-tab-button.active { border-color: var(--gray-medium); border-left: 3px solid var(--accent); border-right: 3px solid var(--accent); border-bottom: 1px solid var(--gray-medium);}

  #eventManagementContent.dashboard-section { border-top: 1px solid var(--gray-light); margin-top: 1rem; }

  .admin-event-grid { grid-template-columns: 1fr; }
  .admin-event-card { max-width: none; min-height: auto; }
  .add-event-bar { min-height: auto; padding: 1rem; margin-bottom: 1rem; }
  .add-event-bar i { font-size: 1.5rem; }
  .add-event-bar span { font-size: 1.1rem; }
  .admin-event-card-actions.top-actions,
  .admin-event-card-actions.bottom-actions {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  }
}
/* ----- FINE NUOVI STILI DASHBOARD ----- */

/* ----- INIZIO NUOVI STILI PER COMMENTI STAFF (EVENTO DETTAGLIO ACCESSO) ----- */

/* Opzionale: Stile generale per il box di un commento admin */
.comment.commento-admin-stile { /* Nuova classe per lo stile generale del div admin */
  border-left-color: var(--accent) !important;
  background-color: #fffaf0; /* Leggermente diverso da .comment.reply e dal default .comment */
}

/* Opzionale: Stile per l'avatar dell'admin se vuoi differenziarlo */
.comment.commento-admin-stile .comment-header .user-avatar {
  border-color: var(--accent); /* Esempio: bordo avatar admin con colore accent */
}

/* NUOVO STILE PER IL BADGE STAFF (elemento SPAN) */
.badge-staff {
  display: inline-block; /* Per permettere padding e margin */
  margin-left: 0.6em;  /* Spazio dal nome dell'autore */
  padding: 0.2em 0.6em; /* Padding interno al badge */
  font-size: 0.75em;    /* Dimensione font del badge, più piccolo del nome */
  font-weight: bold;   /* Grassetto per il badge */
  color: var(--white);      /* Colore testo badge */
  background-color: var(--accent); /* Colore di sfondo del badge */
  border-radius: 4px;       /* Angoli arrotondati */
  line-height: 1.2;         /* Altezza linea per allineamento verticale */
  vertical-align: middle;   /* Allinea il badge con il testo del nome */
  text-transform: uppercase; /* Opzionale */
  letter-spacing: 0.5px;   /* Opzionale */
}

/* ----- FINE NUOVI STILI PER COMMENTI STAFF ----- */

/* ----- INIZIO NUOVI STILI PER COMMENTI ADMIN (DASHBOARD MODAL) ----- */

/* Opzionale: Stile generale per il box di un commento admin nel modal */
#manageCommentsModal .comment-item-admin-styled.commento-admin-generale {
  border-left-color: var(--accent) !important; /* Esempio: stesso colore di accento */
  background-color: #fffaf5; /* Sfondo leggermente diverso, es. un crema/giallo pallido per admin */
}

/* NUOVO STILE PER IL BADGE ADMIN (elemento SPAN) NELLA DASHBOARD */
.badge-admin-dashboard { /* Classe specifica per evitare conflitti con .badge-staff */
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.2em 0.6em;
  font-size: 0.75em;
  font-weight: bold;
  color: var(--white); /* Testo bianco per contrasto */
  background-color: var(--primary); /* Colore primario per il badge admin */
  border-radius: 4px;
  line-height: 1.2;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ----- INIZIO STILI CONTROLLI ORDINAMENTO DASHBOARD ----- */
.event-sorting-controls {
  background-color: var(--white);
  padding: 1rem 1.5rem; /* Ridotto padding rispetto ai filtri */
  border-radius: var(--border-radius-medium);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-light);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem; /* Spazio tra i gruppi form */
  align-items: flex-end; /* Allinea baseline dei label/select */
  justify-content: center; /* Centra i controlli */
  max-width: 700px; /* Larghezza massima per il box dei controlli */
  margin-left: auto;
  margin-right: auto;
}

.event-sorting-controls .form-group {
  flex-grow: 1; /* Permette ai gruppi di crescere */
  flex-shrink: 1;
  flex-basis: 180px; /* Base per ogni controllo */
  max-width: 280px; /* Limita espansione */
}

.event-sorting-controls label {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--primary);
  display: block;
  font-weight: 500;
  text-align: left; /* Assicura che le label siano a sinistra */
}

.event-sorting-controls select.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-medium);
  border-radius: 8px;
  font-size: 1rem;
  background-color: var(--white);
  line-height: 1.5; /* Altezza linea per select */
  appearance: none; /* Rimuove stile nativo per personalizzare freccia */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23365e51%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* Freccia SVG (colore primario --primary) */
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.65em auto;
  padding-right: 2.5rem; /* Spazio per la freccia */
  cursor: pointer;
}
.event-sorting-controls select.form-control:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(141, 177, 135, 0.25); /* Usa il colore secondary per il focus */
  outline: none;
}

/* Responsive per controlli di ordinamento */
@media (max-width: 767px) {
  .event-sorting-controls {
    flex-direction: column; /* Controlli in colonna su mobile */
    align-items: stretch; /* Allunga i form-group */
    max-width: 100%;
  }
  .event-sorting-controls .form-group {
    max-width: none; /* Occupa tutta la larghezza disponibile */
    width: 100%;
  }
}
/* ----- FINE STILI CONTROLLI ORDINAMENTO DASHBOARD ----- */

/* ----- INIZIO STILI NUOVA BARRA FILTRI/TAB E CONTROLLI VISTA ----- */

/* Contenitore principale per la riga con bottone Filtri e Tab Eventi */
.event-tabs-and-filter-container {
  display: flex;
  align-items: flex-start; /* Allinea gli elementi all'inizio se hanno altezze diverse */
  position: relative;
  background-color: var(--light); /* Sfondo per la barra base */
  /* Rimuoviamo bordi e radius da qui, gestiti dai bottoni e dal contenuto sotto */
  margin-bottom: 0; /* Si attaccherà a event-view-controls o eventManagementContent */
}

.filter-trigger-container {
  position: relative; /* Per il posizionamento assoluto del pannello filtri */
  z-index: 10; /* Per stare sopra altri elementi della riga */
}

/* Bottone Filtri */
#filterToggleButton.event-tab-button.filter-tab-button {
  border-radius: 10px 0 0 0;
  margin-right: -1px; /* Sovrappone il bordo per un look unito */
  border: 1px solid var(--gray-medium);
  border-bottom: none; /* Il bordo inferiore è gestito dal contenuto sotto o dal pannello */
  background-color: var(--gray-light); /* Colore di default come gli altri tab non attivi */
}
#filterToggleButton.event-tab-button.filter-tab-button.active {
  background-color: var(--white); /* Sfondo bianco quando il pannello filtri è aperto */
  border-bottom-color: var(--white); /* Nasconde il bordo inferiore del bottone per unirlo al pannello */
  position: relative; /* Per z-index se necessario */
  z-index: 11; /* Per stare sopra la linea del contenitore sottostante */
}

.dropdown-arrow-filter {
  margin-left: 0.5em;
  font-size: 0.8em;
  transition: transform 0.2s ease-in-out;
}
#filterToggleButton.active .dropdown-arrow-filter {
  transform: rotate(180deg);
}

/* Pannello Filtri Dropdown */
.filter-panel {
  display: none;
  position: absolute;
  top: calc(100% - 1px); /* Si sovrappone al bordo inferiore del bottone per continuità */
  left: 0;
  z-index: 100; /* Sopra il contenuto della pagina */
  background-color: var(--white);
  border: 1px solid var(--gray-medium);
  /* border-top: none; Se il bottone.active gestisce bene la connessione */
  box-shadow: var(--shadow-medium);
  padding: 1.5rem;
  width: 320px; /* Larghezza fissa o min-width/max-width */
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
}
.filter-panel.active {
  display: block;
  animation: fadeInDropdown 0.2s ease-out;
}
.filter-panel h4 {
  margin-top: 0;
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
  color: var(--primary);
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 0.6rem;
  text-align: left;
}
.filter-panel .form-group {
  margin-bottom: 1rem;
}
.filter-panel .form-group label { text-align: left; }
.filter-panel .filter-panel-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between; /* O flex-end se vuoi i bottoni a destra */
  gap: 0.5rem;
}
.filter-panel .filter-panel-actions .btn-admin {
  flex-grow: 1; /* Fa sì che i bottoni si espandano se c'è spazio */
  /* flex-basis: calc(50% - 0.5rem); Se vuoi due bottoni di uguale larghezza */
}


/* Contenitore per i tab "Eventi Futuri", "Archivio Eventi" */
.event-tabs-container {
  display: flex;
  flex-grow: 1; /* Occupa lo spazio rimanente nella riga */
  /* Stile già definito per .event-tab-button dovrebbe andare bene */
}
/* Assicurati che il primo tab evento non abbia un angolo arrotondato a sinistra se segue il bottone Filtri */
.event-tabs-container .event-tab-button:first-child {
  border-top-left-radius: 0;
}
.event-tabs-container .event-tab-button:last-child {
  border-top-right-radius: 10px; /* Arrotonda l'ultimo tab a destra */
}


/* Controlli di Vista (Ordina per, Raggruppa per) */
.event-view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1rem 1.5rem;
  background-color: #f8f9fa; /* Sfondo leggermente diverso per distinguerlo */
  border-left: 1px solid var(--gray-medium);
  border-right: 1px solid var(--gray-medium);
  border-bottom: 1px solid var(--gray-medium);
  /* Non c'è bordo superiore perché si attacca alla barra dei tab/filtri */
  margin-bottom: 1.5rem; /* Spazio prima della griglia eventi */
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  /* box-shadow: var(--shadow-light); Ombra leggera */
}
.event-view-controls .form-group {
  flex-grow: 1;
  flex-basis: 180px; /* Base per ogni controllo, permettendo flessibilità */
  min-width: 160px; /* Minima larghezza per controllo */
}
.event-view-controls label {
  font-size: 0.85rem; /* Leggermente più piccolo */
  margin-bottom: 0.3rem;
  color: var(--primary);
  display: block;
  font-weight: 500;
  text-align: left;
}
.event-view-controls select.form-control {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--gray-medium);
  border-radius: 6px; /* Raggio più piccolo */
  font-size: 0.9rem;
  background-color: var(--white);
  line-height: 1.4;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23365e51%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.6em auto;
  padding-right: 2rem; /* Spazio per la freccina */
  cursor: pointer;
}
.event-view-controls select.form-control:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(141, 177, 135, 0.25);
  outline: none;
}

/* Stile per il contenitore principale del contenuto delle tab (griglie eventi) */
/* Questo è .tabbed-content-area > #eventManagementContent */
#eventManagementContent {
  background-color: var(--white);
  padding: 1.5rem;
  border: 1px solid var(--gray-medium);
  border-top: none; /* Si collega a .event-view-controls */
  box-shadow: var(--shadow-light);
  /* Rimuovi margin-top se .event-view-controls è direttamente sopra */
  margin-top: 0;
}

/* Adattamenti responsive */
@media (max-width: 991px) { /* Tablet */
  .event-view-controls {
    /* Potrebbero andare due controlli per riga invece di tre */
    /* flex-basis e min-width aiutano già, ma potresti voler forzare */
  }
}

@media (max-width: 767px) { /* Mobile */
  .event-tabs-and-filter-container {
    flex-direction: column;
    /* Non serve più il border-radius qui, sarà sui singoli elementi */
    background-color: transparent; /* Sfondo neutro */
    border: none; /* Nessun bordo generale */
  }
  .filter-trigger-container {
    width: 100%;
    margin-bottom: -1px; /* Sovrapponi al primo tab evento */
  }
  #filterToggleButton.event-tab-button.filter-tab-button {
    border-radius: 10px 10px 0 0;
    width: 100%;
    justify-content: center;
    border-right: 1px solid var(--gray-medium); /* Ripristina bordo destro */
    border-left: 1px solid var(--gray-medium);
    border-bottom: 1px solid var(--gray-medium); /* Bordo inferiore se il pannello è chiuso */
  }
  #filterToggleButton.event-tab-button.filter-tab-button.active {
    border-bottom-color: var(--white); /* Si collega al pannello */
  }

  .filter-panel {
    width: calc(100% - 2px); /* Sottrai i bordi laterali del contenitore */
    position: static; /* Flusso normale sotto il bottone */
    border-radius: 0 0 10px 10px; /* Arrotonda se è l'ultimo */
    box-shadow: var(--shadow-light); /* Ripristina ombra */
    border-left: 1px solid var(--gray-medium);
    border-right: 1px solid var(--gray-medium);
    border-bottom: 1px solid var(--gray-medium);
    margin-bottom: 1rem; /* Spazio prima dei tab eventi */
  }

  .event-tabs-container {
    width: 100%;
    flex-direction: column;
  }
  .event-tabs-container .event-tab-button {
    border-radius: 0;
    margin-right: 0;
    border-left: 1px solid var(--gray-medium);
    border-right: 1px solid var(--gray-medium);
  }
  .event-tabs-container .event-tab-button:first-child {
    border-radius: 10px 10px 0 0; /* Primo tab arrotondato sopra */
  }
  .event-tabs-container .event-tab-button:last-child {
    border-radius: 0 0 10px 10px; /* Ultimo tab arrotondato sotto */
    border-bottom: 1px solid var(--gray-medium);
  }

  .event-view-controls {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--border-radius-medium);
    margin-top: 1rem;
    border: 1px solid var(--gray-medium); /* Bordo completo se blocco separato */
  }
  #eventManagementContent {
    border-radius: var(--border-radius-medium);
    margin-top: 1rem;
    border: 1px solid var(--gray-medium); /* Bordo completo */
  }
}
/* ----- FINE STILI NUOVA BARRA FILTRI/TAB E CONTROLLI VISTA ----- */

/* ----- ULTIMI FIX COMMENTI ----- */
/* ----- Stili per visibilità commenti e bottoni ----- */
.comments-list-wrapper.collapsed #commentsList > ul > li:nth-child(n+4) { /* Nasconde dal 4° commento in poi (se MAX_INITIAL_TOP_LEVEL_COMMENTS = 3) */
  display: none;
}

#comments-visibility-controls { /* Contenitore per i bottoni "Mostra/Nascondi" */
  /* text-align: center; margin-top: 1.5rem; sono già inline */
}

.btn-secondary-style { /* Stile per un bottone secondario, es. "Mostra meno" */
  background-color: var(--gray-light);
  color: var(--dark);
  border: 1px solid var(--gray-medium);
  padding: 0.9rem 1.8rem; /* Stesso padding del .btn-comment per coerenza */
  border-radius: 9px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-medium);
}
.btn-secondary-style:hover {
  background-color: var(--gray-medium);
  color: var(--dark); /* Mantiene il colore del testo scuro */
  transform: translateY(-2px);
  box-shadow: var(--shadow-light);
}

/* ----- Affinamenti Stili Commenti (dal restyling precedente + correzioni bug visivo) ----- */

.comment {
  /* ... stili esistenti dal restyling ... */
  box-sizing: border-box; /* Assicura che padding e border non aggiungano alla larghezza */
  width: 100%; /* Occupa tutta la larghezza del suo parent <li> */
  overflow-wrap: break-word; /* Per prevenire overflow da parole lunghe */
}

.comment p {
  /* ... stili esistenti dal restyling ... */
  overflow-wrap: break-word; /* Alternativa più moderna a word-wrap */
  word-wrap: break-word; /* Mantenuto per compatibilità */
  min-width: 0; /* Aiuta gli elementi flex a restringersi e fare wrap correttamente */
}

.comment-meta strong,
.comment-meta small {
  word-break: break-word; /* Se nomi o date molto lunghe causano problemi */
}

.replies {
  margin-top: 1.5rem;
  /* Leggermente ridotta l'indentazione massima e resa più consistente */
  padding-left: clamp(1.2rem, 3.5vw, 1.8rem);
  position: relative;
  box-sizing: border-box;
}

.replies::before {
  content: "";
  position: absolute;
  /* Adattato per il nuovo padding-left e una linea più sottile */
  left: calc(clamp(1.2rem, 3.5vw, 1.8rem) / 2 - 1px);
  top: -0.5rem; /* Inizia leggermente sopra il primo commento di risposta */
  bottom: 0.5rem; /* Termina leggermente prima della fine dell'ultimo commento di risposta */
  width: 2px; /* Larghezza della linea di connessione */
  background-color: #e0e0e0; /* Colore più chiaro per la linea */
  border-radius: 2px; /* Angoli arrotondati per la linea */
}

/* Assicurati che il badge staff sia come definito nel restyling precedente se ti piaceva */
.badge-staff {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  background-color: var(--accent);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  line-height: 1.3;
  vertical-align: middle;
  margin-left: 0.5rem; /* Spazio dal nome autore */
}

.comment-meta .author-line { /* Contenitore per nome autore e badge */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

/* ----- INIZIO RESTYLING SEZIONE COMMENTI E POPUP CONVERSAZIONE (v4) ----- */

/* Stili generali per .comments-section, .comment-form, .btn-comment, .comments-list-ul (come da v3) */
.comments-section {
  margin-top: 3rem; border-top: 1px solid var(--gray-light); padding-top: 2.5rem;
  background-color: #fdfdfd; border-radius: var(--border-radius-large);
  padding: 2rem clamp(1rem, 4vw, 2.5rem); box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.comments-section > h2, .comments-section > h3 {
  text-align: center; margin-bottom: 2rem; color: var(--primary); font-weight: 600;
}
.comments-section > h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.comments-section > h3 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-top: 2.5rem; color: var(--secondary); }
.comment-form {
  background: var(--white); border-radius: var(--border-radius-medium);
  padding: clamp(1.2rem, 2.5vw, 1.8rem); margin-bottom: 2.5rem;
  box-shadow: var(--shadow-light); border: 1px solid var(--gray-light);
}
.comment-form h4 {
  margin-bottom: 1.2rem; font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  color: var(--primary); text-align: left; font-weight: 600;
}
.comment-form-container { display: flex; flex-direction: column; gap: 0.8rem; }
.comment-form textarea {
  flex-grow: 1; min-height: 100px; width: 100%; font-size: 1rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--gray-medium); border-radius: 8px;
}
.comment-form textarea:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3.5px rgba(var(--secondary-rgb, 141, 177, 135), 0.3); outline: none;
}
.btn-comment {
  background: var(--secondary); color: white; border: none; padding: 0.8rem 1.5rem;
  border-radius: 8px; font-size: 1rem; font-weight: 500; align-self: flex-end; gap: 0.5em;
}
.btn-comment:hover { background: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-light); }
.btn-comment.btn-small { padding: 0.6rem 1rem; font-size: 0.9rem; }
.comments-list-ul { list-style: none; padding-left: 0; margin: 0; }

/* Stili commenti principali (pagina e popup) */
.comment {
  background: var(--white); border-radius: var(--border-radius-medium);
  padding: clamp(1.2rem, 2.5vw, 1.8rem); margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.07); border: 1px solid #e9e9e9;
  position: relative; overflow-wrap: break-word; width: 100%; box-sizing: border-box;
  min-width: 200px; /* Evita che i commenti diventino troppo stretti con indentazione */
}
.comment:not(.reply) { padding-left: clamp(1.8rem, 3.5vw, 2.5rem); }
.comment:not(.reply)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background-color: var(--secondary);
  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
}
.comment.admin-comment-highlight:not(.reply)::before { background-color: var(--accent); }
.comment-header { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.8rem; }
.comment .user-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gray-light); flex-shrink: 0;
}
.comment-meta { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.comment-meta .author-line { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 0.1rem; }
.comment-meta strong {
  font-size: 1rem; color: var(--primary); font-weight: 600; margin-right: 0.4em; word-break: break-word;
}
.comment-meta small { font-size: 0.8rem; color: var(--gray-dark); word-break: break-word; }
.badge-staff {
  display: inline-block; margin-left: 0.5em; padding: 0.15em 0.5em; font-size: 0.7rem; font-weight: 700;
  color: var(--white); background-color: var(--accent); border-radius: 4px;
  line-height: 1.2; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.5px;
}
.comment p {
  margin-bottom: 1rem; color: #333; font-size: 1rem; line-height: 1.75;
  word-wrap: break-word; text-align: left; overflow-wrap: break-word; min-width: 0;
}
.comment-actions {
  display: flex; gap: 0.8rem; align-items: center; font-size: 0.85rem;
  margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--gray-light);
}
.like-btn, .btn-reply {
  background: none; border: 1px solid transparent; color: var(--gray-dark); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3rem 0.6rem;
  border-radius: 6px; transition: all 0.2s ease-in-out; font-weight: 500;
}
.like-btn i, .btn-reply i { font-size: 0.9em; }
.like-btn:hover, .btn-reply:hover { background-color: var(--gray-light); color: var(--primary); text-decoration: none; }
.like-btn.active { color: var(--danger); }
.like-btn.active i { font-weight: 900; }
.like-btn.active:hover { color: var(--danger); background-color: rgba(var(--danger-rgb), 0.1); }

.replies { margin-top: 1rem; padding-left: clamp(1rem, 3vw, 1.5rem); position: relative; box-sizing: border-box; }
.replies::before {
  content: ""; position: absolute; left: calc(clamp(1rem, 3vw, 1.5rem) / 2 - 1px);
  top: 0; bottom: 0; width: 2px; background-color: #e0e0e0; border-radius: 2px;
}
/* Adattamenti per la linea di connessione delle risposte */
.comment > .replies::before { top: 1rem; } /* Inizia più in basso se è direttamente figlio di .comment */
li.reply-item > .comment.reply > .replies::before { top: 1rem; }
ul.nested > li.reply-item:first-child > .comment.reply > .replies::before { top: 1rem; }
ul.nested > li.reply-item:last-child > .comment.reply > .replies { margin-bottom: -1rem; } /* Tenta di far finire la linea correttamente */
ul.nested > li.reply-item:last-child > .comment.reply > .replies::before { bottom: 1rem; }


.comment.reply {
  background-color: #f9f9f9; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #f0f0f0;
  padding: clamp(1rem, 2vw, 1.5rem); margin-bottom: 1rem;
}
.comment.reply:not(.reply)::before { display: none; }
.comment.reply.admin-comment-highlight { background-color: #fff8f0 !important; }

.reply-form {
  display: none; margin-top: 1rem; padding: clamp(0.8rem, 1.8vw, 1rem);
  background-color: var(--white); border-radius: var(--border-radius-medium);
  border: 1px solid var(--gray-light); box-shadow: var(--shadow-light); animation: fadeIn 0.3s ease-out;
}
.reply-form.active { display: block; }
.reply-form form { display: flex; flex-direction: column; gap: 0.6rem; }
.reply-form textarea { width: 100%; font-size: 0.9rem; min-height: 60px; padding: 0.5rem 0.7rem; }
.reply-form .btn-comment.btn-small { align-self: flex-end; }
.form-message-local { font-size: 0.8rem; text-align: left; }

li.top-level-comment-item { padding-bottom: 0.5rem; margin-bottom: 1rem; }
li.top-level-comment-item:last-child { border-bottom: none; margin-bottom: 0; }

.btn-expand-conversation {
  display: block; width: auto; max-width: calc(100% - 1rem); margin: 1rem auto 0.5rem;
  padding: 0.7rem 1.2rem; font-size: 0.9rem; font-weight: 500; color: var(--primary);
  background-color: var(--light); border: 1px solid var(--gray-medium); border-radius: 8px;
  cursor: pointer; transition: all 0.2s ease-in-out; text-align: center;
}
.btn-expand-conversation i { margin-right: 0.5em; }
.btn-expand-conversation:hover {
  background-color: #e9e9e9; border-color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Popup per Conversazione Estesa - Stili Corretti */
.modal-content.conversation-popup-main {
  max-width: 780px; width: 95%; padding: 1.2rem; max-height: 90vh;
  opacity: 0; transform: translateY(20px) scale(0.98);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.modal.active > .modal-content.conversation-popup-main { opacity: 1; transform: translateY(0) scale(1); }
.modal-content.conversation-popup-main h3#conversationPopupTitle {
  font-size: 1.3rem; color: var(--primary); margin-top: 0; margin-bottom: 1rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--gray-light); text-align: left;
}
.modal-content.conversation-popup-main .modal-content-scrollable {
  padding-right: 8px; max-height: calc(90vh - 70px - 2.4rem);
}

/* Stili specifici per commenti DENTRO il Popup */
#conversationPopupUL .comment {
  background-color: var(--light); border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 0.8rem 1rem; margin-bottom: 0.8rem;
}
#conversationPopupUL .comment:not(.reply)::before { background-color: var(--accent); width: 4px; }
#conversationPopupUL .comment.reply { background-color: #fcfcfc; border-color: #e8e8e8; }
#conversationPopupUL .comment p { font-size: 0.9rem; line-height: 1.6; }
#conversationPopupUL .comment-header { gap: 0.6rem; margin-bottom: 0.5rem; }
#conversationPopupUL .comment .user-avatar { width: 35px; height: 35px; }
#conversationPopupUL .comment-meta strong { font-size: 0.9rem; }
#conversationPopupUL .comment-meta small { font-size: 0.75rem; }
#conversationPopupUL .badge-staff { font-size: 0.65rem; padding: 0.1em 0.4em; }
#conversationPopupUL .comment-actions {
  margin-top: 0.6rem; padding-top: 0.6rem; font-size: 0.75rem; gap: 0.5rem;
}
#conversationPopupUL .like-btn, #conversationPopupUL .btn-reply { padding: 0.2rem 0.4rem; }
#conversationPopupUL .reply-form { padding: 0.6rem; margin-top: 0.6rem; }
#conversationPopupUL .reply-form textarea { font-size: 0.85rem; min-height: 50px; padding: 0.4rem; }
#conversationPopupUL .reply-form .btn-comment.btn-small { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
#conversationPopupUL .btn-expand-conversation { display: none !important; } /* Mai bottoni espandi nel popup */


/* Gestione indentazione progressiva nel popup */
#conversationPopupUL .replies { padding-left: 1rem; }
#conversationPopupUL .replies::before { left: calc(1rem / 2 - 1px); background-color: #e8e8e8; }

#conversationPopupUL .replies .replies { padding-left: 0.8rem; } /* Livello 2 */
#conversationPopupUL .replies .replies::before { left: calc(0.8rem / 2 - 1px); }

#conversationPopupUL .replies .replies .replies { padding-left: 0.6rem; } /* Livello 3 */
#conversationPopupUL .replies .replies .replies::before { left: calc(0.6rem / 2 - 1px); }

#conversationPopupUL .replies .replies .replies .replies { /* Livello 4+ */
  padding-left: 0.4rem; border-left: none;
}
#conversationPopupUL .replies .replies .replies .replies::before { display: none; }


.modal-content.conversation-popup-main .close-modal-btn {
  z-index: 10; top: 0.6rem; right: 0.6rem; font-size: 1.8rem;
}
.no-content-message {
  text-align: center; padding: 1.5rem; font-size: 1.05rem; color: var(--gray-dark);
  background-color: var(--white); border-radius: var(--border-radius-medium);
  border: 1px dashed var(--gray-medium); margin: 1.5rem auto; max-width: 600px;
}
#login-to-comment-message a { color: var(--secondary); font-weight: 500; text-decoration: underline; }
#login-to-comment-message a:hover { color: var(--primary); }

/* Stili per i bottoni Modifica/Elimina e form di modifica */
.comment-edit-form {
  margin-top: 0.8rem;
  padding: 0.8rem;
  background-color: #f0f0f0; /* Un colore di sfondo leggermente diverso per il form di modifica */
  border-radius: 8px;
  border: 1px solid var(--gray-medium);
}

.comment-edit-form textarea {
  width: 100%;
  min-height: 80px; /* O l'altezza che preferisci */
  padding: 0.6rem;
  border: 1px solid var(--gray-medium);
  border-radius: 6px;
  font-size: 1rem; /* Coerente con il testo del commento */
  margin-bottom: 0.5rem;
  resize: vertical;
  box-sizing: border-box; /* Importante per width 100% e padding */
}
.comment-edit-form textarea:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3.5px rgba(var(--secondary-rgb, 141, 177, 135), 0.3);
  outline: none;
}

.comment-edit-actions {
  display: flex;
  justify-content: flex-end; /* Allinea i bottoni a destra */
  gap: 0.5rem; /* Spazio tra i bottoni */
}

.btn-save-edit, .btn-cancel-edit {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-save-edit {
  background-color: var(--success);
  color: white;
  border-color: var(--success);
}
.btn-save-edit:hover {
  background-color: #27ae60; /* Un verde più scuro per hover */
  border-color: #27ae60;
}
.btn-save-edit:disabled {
  background-color: var(--gray-medium);
  border-color: var(--gray-medium);
  cursor: not-allowed;
}
.btn-save-edit .spinner-mini { /* Stile per lo spinner nel bottone Salva */
  border-top-color: var(--white); /* Spinner bianco su sfondo verde */
}


.btn-cancel-edit {
  background-color: var(--gray-light);
  color: var(--dark);
  border-color: var(--gray-medium);
}
.btn-cancel-edit:hover {
  background-color: var(--gray-medium);
}


/* Stili per i bottoni "Modifica" e "Elimina" originali */
.btn-edit-comment, .btn-delete-comment {
  background: none;
  border: 1px solid transparent; /* Inizialmente trasparente */
  color: var(--gray-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.6rem; /* Uguale a like/reply */
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  font-size: 0.85rem; /* Coerente con like/reply */
}
.btn-edit-comment i, .btn-delete-comment i {
  font-size: 0.9em; /* Coerente con like/reply */
}

.btn-edit-comment:hover {
  background-color: rgba(243, 156, 18, 0.1); /* var(--warning) con trasparenza */
  color: #c87f0a; /* Colore warning più scuro per testo */
  /* border-color: rgba(243, 156, 18, 0.3); /* Bordo leggero warning */
}
.btn-delete-comment:hover {
  background-color: rgba(231, 76, 60, 0.1); /* var(--danger-rgb) con trasparenza */
  color: #a93226; /* Colore danger più scuro per testo */
  /* border-color: rgba(231, 76, 60, 0.3); /* Bordo leggero danger */
}

/* Icone per i bottoni (se non già coperte da FontAwesome o classi globali) */
.btn-edit-comment i { color: var(--warning); } /* Colore icona Modifica */
.btn-delete-comment i { color: var(--danger); } /* Colore icona Elimina */


/* Classe per nascondere azioni durante la modifica */
.comment-editing .comment-actions .like-btn,
.comment-editing .comment-actions .btn-reply,
.comment-editing .comment-actions .btn-edit-comment,
.comment-editing .comment-actions .btn-delete-comment {
  display: none !important; /* Forza la scomparsa dei bottoni azione standard */
}
/* Placeholder per il form di modifica, se necessario per layout */
.comment-edit-form-placeholder {
  /* Eventuali stili per il placeholder se non è vuoto prima dell'inserimento del form */
}

/* Aggiustamento per la data del commento se necessario */
.comment-meta small {
  line-height: 1.3; /* Può aiutare con il wrapping della data */
}

/* Stili per i messaggi di errore/successo locali dentro i form di modifica/risposta */
.reply-form .form-message-local,
.comment-edit-form .form-message-local {
  font-size: 0.85rem;
  text-align: left;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  display: none; /* Nascosto di default */
}
.reply-form .form-message-local.error,
.comment-edit-form .form-message-local.error {
  color: var(--danger);
  background-color: rgba(var(--danger-rgb), 0.1);
  border: 1px solid rgba(var(--danger-rgb), 0.3);
}
.reply-form .form-message-local.success,
.comment-edit-form .form-message-local.success {
  color: var(--success); /* Usa un colore di testo scuro per leggibilità su sfondo verde chiaro */
  background-color: rgba(var(--success-rgb), 0.1);
  border: 1px solid rgba(var(--success-rgb), 0.3);
}

/* ----- Stili Popup Likers ----- */
.likers-popup-main {
  max-width: 450px; /* Più piccolo di quello delle conversazioni */
  padding: 1.5rem;
}

.likers-popup-main h3 {
  font-size: 1.4rem;
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 0.8rem;
}

.likers-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.likers-list li {
  display: flex;
  align-items: center;
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--gray-light);
  transition: background-color var(--transition-fast);
}
.likers-list li:last-child {
  border-bottom: none;
}
.likers-list li:hover {
  background-color: var(--light);
}

.likers-list .liker-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
  border: 1px solid var(--gray-medium);
}

.likers-list .liker-name {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--dark);
}

#likersPopupContent .no-content-message {
  font-size: 1rem;
  padding: 1.5rem;
}

/* Stile per rendere cliccabile il contatore dei like */
.like-btn .like-count {
  cursor: pointer;
  text-decoration: none; /* Rimuovi sottolineatura di default */
  border-bottom: 1px dashed transparent; /* Sottolineatura tratteggiata invisibile */
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
  padding: 0 2px; /* Piccolo padding per facilitare il click */
  margin-left: 2px; /* Spazio dall'icona */
}

.like-btn .like-count:hover {
  border-bottom-color: var(--primary); /* Mostra sottolineatura al hover */
  color: var(--primary); /* Opzionale: cambia colore al hover */
}

/* Impedisci che il click sul numero attivi il bottone, gestisci click separati */
.like-btn {
  /* Manteniamo il bottone come contenitore */
}
.like-btn > i,
.like-btn > .like-count {
  pointer-events: auto; /* Assicura che sia l'icona che il numero siano cliccabili */
}
.like-btn > i {
  cursor: pointer; /* Cursore per l'icona */
}
/* ----- Fine Stili Popup Likers ----- */

/* ----- Stili per Comment Actions Responsive ----- */
.comment-actions {
  display: flex;
  flex-wrap: wrap; /* Permette ai bottoni di andare a capo */
  gap: 0.5rem 0.8rem; /* Ridotto il gap verticale, mantenuto quello orizzontale (da v4) */
  align-items: center;
  font-size: 0.85rem; /* (da v4) */
  margin-top: 0.8rem; /* (da v4) */
  padding-top: 0.8rem; /* (da v4) */
  border-top: 1px solid var(--gray-light);
  /* Opzionale: per allineare i gruppi di bottoni se vanno a capo */
  /* justify-content: flex-start; */ /* o space-between se preferisci */
}
/* ----- FINE RESTYLING SEZIONE COMMENTI (v4) ----- */
/* Stile per il pulsante AI Genera Descrizione Breve (DASHBOARD) */
/* Assicurati che #eventFormDashboard abbia position: relative; */
.ai-generate-btn-dashboard {
  position: absolute;
  top: -10px; /* Aggiustare se necessario per sovrapporlo correttamente alla label */
  right: 0px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px; /* Dimensione ridotta */
  height: 28px; /* Dimensione ridotta */
  font-size: 0.9rem; /* Dimensione icona ridotta */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  z-index: 10;
}
.ai-generate-btn-dashboard:hover {
  background-color: var(--secondary);
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ai-generate-btn-dashboard .ai-icon {
  display: inline-block;
  transition: transform 0.5s ease;
}
.ai-generate-btn-dashboard.loading .ai-icon {
  animation: spin 1s linear infinite; /* 'spin' dovrebbe essere già definito */
}
#aiShortDescStatusDashboard { /* Messaggio di stato sotto il campo descrizione breve */
  font-size: 0.8rem;
  color: var(--gray-dark);
  display: block;
  margin-top: 0.3rem;
  min-height: 1em; /* Per evitare salti di layout */
}


/* Stili per l'area di visualizzazione dei filtri attivi */
.active-filters-display {
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.5rem;
  background-color: #eef3f7; /* Un colore neutro e leggero */
  border: 1px solid #d1dce5;
  border-radius: var(--border-radius-medium);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.active-filters-display h4 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  font-size: 1rem;
  color: var(--primary);
  font-weight: 600;
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted var(--gray-medium);
}
.active-filters-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.active-filters-list li {
  background-color: var(--secondary);
  color: var(--white);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.active-filters-list li .filter-label { /* Etichetta tipo filtro es. "Titolo:" */
  opacity: 0.85;
  margin-right: 0.4em;
  font-weight: normal;
}
.active-filters-display .no-filters-active-message { /* Messaggio se non ci sono filtri */
  font-style: italic;
  color: var(--gray-dark);
  font-size: 0.9rem;
  padding: 0.3rem 0;
}

/* Assicurati che #eventFormDashboard abbia position: relative per il bottone AI */
#eventFormDashboard {
  position: relative;
}

/* NUOVI STILI PER SEZIONE AI ICON GENERATOR (da aggiungere a style.css) */
.ai-icon-generator-section {
  margin-top: 2rem; /* Aumentato spazio sopra */
  padding-top: 1.5rem;
  border-top: 1px dashed var(--gray-medium); /* Separatore per distinguerla */
}

.ai-icon-generator-section h3 { /* Stile per il titolo della sezione AI */
  font-size: 1.5rem; /* Dimensione più contenuta per un sottotitolo di sezione */
  color: var(--secondary); /* Usa colore secondario per coerenza con altri h2 di sezione */
  margin-bottom: 1.5rem;
  text-align: left; /* Allineamento a sinistra */
  display: flex;
  align-items: center;
  gap: 10px; /* Spazio tra icona e testo */
}
.ai-icon-generator-section h3 i {
  font-size: 1.1em; /* Icona leggermente più grande del testo */
}


.ai-icon-generator-section .form-group label {
  font-size: 1.1rem;
  color: var(--primary); /* Colore primario per la label */
  font-weight: 500; /* Leggermente in grassetto */
}

.ai-icon-generator-section textarea#ai-icon-prompt {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--gray-medium);
  border-radius: 8px; /* Stondatura media */
  font-size: 1rem;
  min-height: 70px;
  resize: vertical;
  margin-bottom: 0.5rem; /* Spazio sotto la textarea */
  background-color: var(--white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-icon-generator-section textarea#ai-icon-prompt:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3.5px rgba(141, 177, 135, 0.3); /* Effetto focus standard */
  outline: none;
}

.ai-icon-generator-section .btn-ai-generate {
  background-color: var(--accent); /* Colore accent per il bottone AI */
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px; /* Stondatura media */
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-medium); /* Usa la tua variabile di transizione */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.5rem; /* Spazio sopra il bottone */
}

.ai-icon-generator-section .btn-ai-generate:hover:not(:disabled) {
  background-color: #b8734a; /* Accento più scuro per hover */
  transform: translateY(-2px);
  box-shadow: var(--shadow-light); /* Ombra leggera standard */
}

.ai-icon-generator-section .btn-ai-generate:disabled {
  background-color: var(--gray-medium) !important; /* Stile disabilitato standard */
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ai-generated-icon-preview-container {
  margin-top: 1.5rem;
  text-align: center; /* Centra l'anteprima */
  padding: 1rem;
  background-color: var(--light); /* Sfondo leggero per il contenitore anteprima */
  border-radius: var(--border-radius-medium);
}

.ai-generated-icon-preview-container p { /* Testo sopra l'anteprima */
  font-size: 0.95rem;
  color: var(--gray-dark);
  margin-bottom: 0.8rem;
  text-align: center;
}

.ai-generated-icon-preview-container img#ai-generated-icon-preview {
  width: 100px; /* Dimensione anteprima AI */
  height: 100px;
  border-radius: 50%; /* Rotonda come le altre */
  object-fit: cover;
  border: 3px solid var(--gray-light);
  cursor: pointer;
  transition: border-color 0.3s ease, transform 0.3s ease;
  display: block; /* Per far funzionare margin auto */
  margin-left: auto;
  margin-right: auto;
}

.ai-generated-icon-preview-container img#ai-generated-icon-preview:hover {
  transform: scale(1.05); /* Leggero zoom all'hover */
  border-color: var(--secondary);
}

.ai-generated-icon-preview-container img#ai-generated-icon-preview.selected {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(141, 177, 135, 0.5); /* Stesso effetto delle icone predefinite */
}

.spinner-ai { /* Spinner CSS per il bottone AI */
  display: inline-block;
  width: 1em; /* Relativo al font-size del bottone */
  height: 1em; /* Relativo al font-size del bottone */
  border: 2px solid currentColor; /* Usa il colore del testo del bottone */
  border-right-color: transparent; /* Crea l'effetto rotante */
  border-radius: 50%;
  animation: spin 0.6s linear infinite; /* Animazione definita sotto */
  margin-left: 0.5em; /* Spazio dallo testo del bottone */
  vertical-align: middle; /* Allineamento verticale */
}

/* L'animazione @keyframes spin dovrebbe essere già presente nel tuo CSS se lo spinner-mini la usa.
   Se non c'è, aggiungila:
*/
/* @keyframes spin { to { transform: rotate(360deg); } } */

/* Per il messaggio di errore/successo specifico dell'AI */
#ai-icon-message.form-message {
  margin-top: 1rem; /* Spazio sopra il messaggio */
}
/* === NUOVI STILI PER ANIMAZIONI E DISPLAY ICONE AI === */

/* Contenitore Sezione AI - per Overlay di Caricamento */
.ai-icon-generator-section {
  position: relative; /* Necessario per posizionare l'overlay interno */
  /* ... mantieni gli altri tuoi stili per .ai-icon-generator-section ... */
}

/* Overlay di Caricamento per la Sezione AI */
.ai-section-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(248, 245, 239, 0.85); /* Sfondo --light con trasparenza */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20; /* Sopra gli altri elementi della sezione */
  border-radius: var(--border-radius-medium); /* Se la section ha bordi arrotondati */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}
.ai-section-loading-overlay.active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Spinner Moderno (ispirato Apple) - Sostituisce .spinner-ai se vuoi */
.modern-spinner {
  width: 48px; /* Dimensione */
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: var(--secondary) var(--secondary) transparent transparent; /* Colore principale e parte trasparente */
  box-sizing: border-box;
  animation: spin 1s linear infinite; /* Usa la tua animazione @keyframes spin */
  margin-bottom: 1.2rem;
}
.modern-spinner::after,
.modern-spinner::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent var(--primary) var(--primary); /* Colore secondario */
  width: 40px; /* Dimensione interna */
  height: 40px;
  border-radius: 50%;
  animation: spinBack 0.7s linear infinite;
  transform-origin: center center;
}
.modern-spinner::before {
  width: 32px; /* Dimensione ancora più interna */
  height: 32px;
  border-color: var(--accent) var(--accent) transparent transparent; /* Terzo colore */
  animation: spin 1.5s linear infinite;
}

@keyframes spinBack { /* Per far girare in senso opposto alcuni cerchi */
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
/* Se @keyframes spin è già definito, non ripeterlo */
/* @keyframes spin { to { transform: rotate(360deg); } } */


.ai-section-loading-overlay p {
  font-size: 1.05rem;
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Miglior Display per Immagine Generata */
#ai-generated-icon-preview-container {
  /* ... mantieni i tuoi stili ... */
  border: 1px solid var(--gray-light);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* Ombra più morbida e definita */
  padding: 1.5rem;
  margin-top: 2rem; /* Più spazio sopra */
  background-color: var(--white); /* Sfondo bianco pulito */
  opacity: 0; /* Inizialmente nascosto per animazione */
  transform: translateY(15px) scale(0.98);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
#ai-generated-icon-preview-container.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#ai-generated-icon-preview {
  /* ... mantieni i tuoi stili per width, height, border-radius, object-fit ... */
  border: 4px solid var(--gray-light); /* Bordo più spesso e neutro */
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
  border-color 0.3s ease,
  box-shadow 0.3s ease;
}
#ai-generated-icon-preview:hover {
  transform: scale(1.08); /* Ingrandimento più evidente all'hover */
  border-color: var(--secondary);
}
#ai-generated-icon-preview.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--primary), 0 8px 20px rgba(var(--primary-rgb, 54, 94, 81), 0.4);
  transform: scale(1.1);
}

/* Animazione per il Bottone di Salvataggio Icona */
.btn-save#save-icon-btn {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease-out, box-shadow 0.2s ease-in-out;
  position: relative; /* Per lo spinner e il testo */
  overflow: hidden; /* Per contenere animazioni interne */
}
.btn-save#save-icon-btn .btn-text { /* Aggiungi uno span attorno al testo del bottone se vuoi animare il testo separatamente */
  display: inline-block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-save#save-icon-btn .btn-icon-fa { /* Per l'icona FontAwesome nel bottone */
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-right: 8px; /* Mantieni lo spazio se c'è testo */
}

.btn-save#save-icon-btn.saving {
  background-color: var(--accent) !important;
  color: white !important;
  cursor: wait;
}
.btn-save#save-icon-btn.saving .btn-text,
.btn-save#save-icon-btn.saving .btn-icon-fa {
  opacity: 0;
  transform: translateY(-5px);
}
.btn-save#save-icon-btn .spinner-btn-overlay { /* Overlay per lo spinner nel bottone */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn-save#save-icon-btn.saving .spinner-btn-overlay {
  opacity: 1;
}
.btn-save#save-icon-btn .spinner-btn-overlay .modern-spinner { /* Riusa lo spinner moderno, ma più piccolo */
  width: 20px; height: 20px; border-width: 2px; margin: 0;
  border-color: white white transparent transparent; /* Spinner bianco su sfondo colorato */
}
.btn-save#save-icon-btn .spinner-btn-overlay .modern-spinner::after,
.btn-save#save-icon-btn .spinner-btn-overlay .modern-spinner::before {
  border-width: 2px;
}
.btn-save#save-icon-btn .spinner-btn-overlay .modern-spinner::after {
  width: 16px; height: 16px;
  border-color: transparent transparent white white;
}
.btn-save#save-icon-btn .spinner-btn-overlay .modern-spinner::before {
  width: 12px; height: 12px;
  border-color: rgba(255,255,255,0.7) rgba(255,255,255,0.7) transparent transparent;
}


.btn-save#save-icon-btn.saved-success {
  background-color: var(--success) !important;
  color: white !important;
}
.btn-save#save-icon-btn.saved-success .btn-icon-fa.fa-save { /* Cambia icona a check */
  display: none; /* Nasconde l'icona di salvataggio */
}
.btn-save#save-icon-btn.saved-success .btn-icon-fa.fa-check { /* Mostra icona check */
  display: inline-block !important; /* Importante per sovrascrivere display:none potenziale */
  animation: bounceIn 0.5s ease;
}

/* Stile Toast per il messaggio di salvataggio */
#icon-save-message.form-message.toast-style {
  position: fixed;
  bottom: -100px; /* Parte da fuori schermo */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.9rem 1.5rem; /* Leggermente meno verticale */
  border-radius: 10px; /* Più stondato */
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 10010; /* Molto alto */
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  min-width: 280px; /* Larghezza minima */
  max-width: 90%;
  text-align: center;
}
#icon-save-message.form-message.toast-style.show {
  opacity: 1;
  bottom: 25px; /* Posizione finale */
}
#icon-save-message.form-message.toast-style.success { /* Stile specifico per successo */
  background-color: var(--success) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
#icon-save-message.form-message.toast-style.error { /* Stile specifico per errore */
  background-color: var(--danger) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
/* Stile Migliorato per il Titolo della Sezione AI */
.ai-icon-generator-section h3 {
  font-family: 'Playfair Display', serif; /* Un font più elegante, assicurati sia importato */
  font-size: 1.8rem; /* Leggermente più grande */
  color: var(--primary); /* Colore primario per più importanza */
  margin-bottom: 1.8rem; /* Più spazio sotto */
  padding-bottom: 0.5rem; /* Spazio per la linea sotto */
  border-bottom: 2px solid var(--secondary-light, #c9dbd6); /* Linea decorativa sottile e chiara, usa un tuo colore secondario chiaro se definito */
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px; /* Aumenta leggermente lo spazio */
  font-weight: 600; /* Playfair Display è già elegante, 600 è un buon peso */
  letter-spacing: 0.5px; /* Leggera spaziatura */
}

.ai-icon-generator-section h3 i.fa-magic {
  font-size: 1.3em; /* Icona leggermente più grande rispetto al testo */
  color: var(--accent); /* Colore accento per l'icona, per staccare */
  padding-bottom: 3px; /* Allineamento fine con il testo Playfair */
}
/* Stile "Figo" per il Bottone Genera Icona AI */
.ai-icon-generator-section .btn-ai-generate {
  background: linear-gradient(145deg, var(--secondary), var(--primary)); /* Gradiente con i tuoi colori principali/secondari */
  color: white;
  border: none;
  padding: 0.9rem 1.8rem; /* Leggermente più grande */
  border-radius: 10px; /* Più stondato */
  font-size: 1.05rem;
  font-weight: 600; /* Più deciso */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transizione più fluida */
  display: inline-flex;
  align-items: center;
  gap: 0.6em; /* Spazio tra icona e testo */
  margin-top: 0.5rem;
  box-shadow: 0 4px 15px rgba(var(--dark-rgb, 30, 59, 47), 0.2), /* Ombra più definita */
  0 2px 8px rgba(var(--dark-rgb, 30, 59, 47), 0.15);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Leggera ombra al testo per profondità */
  position: relative; /* Per effetti pseudo-elementi */
  overflow: hidden; /* Per contenere il "glow" */
}

.ai-icon-generator-section .btn-ai-generate i.fa-lightbulb {
  transition: transform 0.3s ease;
}

.ai-icon-generator-section .btn-ai-generate:hover:not(:disabled) {
  background: linear-gradient(145deg, var(--primary), var(--secondary)); /* Inverte il gradiente */
  transform: translateY(-3px) scale(1.03); /* Sollevamento e leggero ingrandimento */
  box-shadow: 0 8px 25px rgba(var(--dark-rgb, 30, 59, 47), 0.25),
  0 4px 12px rgba(var(--dark-rgb, 30, 59, 47), 0.2);
}
.ai-icon-generator-section .btn-ai-generate:hover:not(:disabled) i.fa-lightbulb {
  transform: scale(1.2) rotate(-15deg); /* Animazione icona */
}

.ai-icon-generator-section .btn-ai-generate:active:not(:disabled) {
  transform: translateY(-1px) scale(0.99); /* Effetto pressione */
  box-shadow: 0 2px 10px rgba(var(--dark-rgb, 30, 59, 47), 0.2);
}

/* Effetto "Glow" al passaggio del mouse (opzionale) */
.ai-icon-generator-section .btn-ai-generate::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}
.ai-icon-generator-section .btn-ai-generate:hover:not(:disabled)::before {
  width: 250%; /* dimensione del glow */
  height: 250%;
  opacity: 0.3;
}


/* Stile quando il bottone è disabilitato (durante il caricamento gestito dall'overlay sulla sezione) */
.ai-icon-generator-section .btn-ai-generate:disabled {
  background: var(--gray-medium) !important;
  color: var(--gray-dark) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}
.ai-icon-generator-section .btn-ai-generate:disabled i.fa-lightbulb {
  transform: none; /* Resetta animazione icona se disabilitato */
}
/* Stile Titolo Sezione AI (Revertito e con Stelle) */
.ai-title-container {
  position: relative; /* Contenitore per le stelle posizionate assolutamente */
  display: inline-block; /* Per adattarsi alla larghezza del contenuto h3 */
  margin-bottom: 1.8rem; /* Spazio sotto il titolo e le stelle */
}

.ai-icon-generator-section h3 {
  font-family: 'Segoe UI', sans-serif; /* Ripristina font standard se preferito */
  font-size: 1.6rem; /* Dimensione leggermente più grande del precedente 1.5rem */
  color: var(--secondary); /* Colore originale che preferivi */
  /* Rimuoviamo il border-bottom e padding-bottom per un look più pulito con le stelle */
  /* border-bottom: none; */
  /* padding-bottom: 0; */
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600; /* Un buon peso per Segoe UI */
  letter-spacing: normal; /* Ripristina letter-spacing */
  margin-bottom: 0; /* Il margine inferiore sarà gestito da .ai-title-container */
}

.ai-icon-generator-section h3 i.fa-magic {
  font-size: 1.2em; /* Dimensione icona */
  color: var(--secondary); /* Colore icona uguale al testo per semplicità, o usa var(--accent) se preferisci stacco */
  margin-right: 8px; /* Ripristina margine destro che era inline */
  /* padding-bottom: 0; // Rimosso */
}

/* Stili per le Stelle Attorno al Titolo */
.star-title {
  position: absolute;
  background-color: var(--accent); /* Colore delle stelle, puoi cambiarlo (es. var(--primary) o un giallo) */
  border-radius: 50%;
  opacity: 0; /* Partono invisibili e appaiono con l'animazione */
  animation: twinkleAround 2s infinite ease-in-out; /* Animazione personalizzata per le stelle del titolo */
  box-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent); /* Effetto glow */
}

/* Animazione per le stelle del titolo */
@keyframes twinkleAround {
  0%, 100% { opacity: 0.3; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(180deg); }
  75% { opacity: 0.7; transform: scale(0.8) rotate(270deg); }
}

/* Posizionamento e dimensione delle singole stelle attorno al titolo */
/* Puoi aggiungere più stelle o modificare queste posizioni e ritardi */
.star-title.s1 { width: 3px; height: 3px; top: -5px; left: -10px; animation-delay: 0s; }
.star-title.s2 { width: 4px; height: 4px; top: 0px; right: -15px; animation-delay: 0.3s; }
.star-title.s3 { width: 3px; height: 3px; bottom: -5px; left: 20%; animation-delay: 0.6s; }
.star-title.s4 { width: 4px; height: 4px; bottom: 0px; right: 15%; animation-delay: 0.9s; }
.star-title.s5 { width: 3px; height: 3px; top: 50%; left: -20px; transform: translateY(-50%); animation-delay: 1.2s; }
.star-title.s6 { width: 2px; height: 2px; top: 20%; right: -25px; animation-delay: 1.5s; }

/* Stili per il nuovo logo nella Navbar */
.navbar-logo-wrapper {
  display: inline-block; /* o flex se vuoi più controllo sull'allineamento verticale con il testo */
  vertical-align: middle; /* Aiuta ad allineare l'immagine con il testo del titolo se sono sulla stessa linea */
  position: relative; /* Necessario per il posizionamento assoluto dell'icona di modifica */
}

.navbar-logo-img {
  height: 55px; /* NUOVA ALTEZZA SUGGERITA - puoi regolarla ulteriormente */
  width: auto;   /* Mantiene le proporzioni */
  margin-right: 10px; /* Spazio tra il logo e il titolo "Eremo Frate Francesco" */
  display: inline-block;
  vertical-align: middle; /* Assicura che l'immagine sia allineata bene se il contenitore 'a' è display:flex */
}

/* Potresti voler nascondere l'icona di modifica del logo per default e mostrarla solo in edit mode */
.navbar-logo-wrapper .edit-icon-image {
  /* Stili base già presenti, ma qui puoi sovrascrivere/aggiungere per il logo specificamente se necessario */
  /* Esempio: rendere l'icona leggermente più piccola o posizionarla diversamente per il logo */
  top: 0px;
  right: -5px; /* Regola per posizionarla meglio rispetto al logo */
  width: 18px;
  height: 18px;
  font-size: 0.6em;
  line-height: 18px; /* Per centrare l'emoji della matita verticalmente */
}

/* Assicurati che il link del logo si comporti bene con l'immagine */
.navbar .logo a {
  display: flex; /* Allinea l'immagine e il titolo h2 sulla stessa linea */
  align-items: center; /* Allinea verticalmente l'immagine e il titolo h2 */
  text-decoration: none;
  color: inherit;
}

.terms-acceptance-info {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light-color, #e0e0e0); /* Colore per la linea di separazione */
  text-align: center;
}
.terms-acceptance-info p {
  font-size: 0.9rem; /* Dimensione testo */
  color: var(--gray-dark-color, #555555); /* Colore testo */
  margin-bottom: 0; /* Rimuovi margine inferiore se non necessario */
}
.terms-acceptance-info p i.fa-check-circle {
  color: var(--success-color, green); /* Colore spunta */
  margin-right: 5px;
}
.terms-acceptance-info p a {
  text-decoration: underline;
  color: var(--primary-color, #365e51); /* Colore link */
}
.terms-acceptance-info p a:hover {
  color: var(--accent-color, #d4a373); /* Colore link hover */
}

/* === INIZIO NUOVI STILI ANIMAZIONE HEADER PROFILO (v2 - Più Dinamica) === */

/* Stato iniziale degli elementi: nascosti e pronti per l'animazione.
   La classe .profile-header-loading viene aggiunta via JS. */
.profile-header.profile-header-loading .avatar-container img,
.profile-header.profile-header-loading #profile-greeting,
.profile-header.profile-header-loading > p { /* Seleziona il paragrafo diretto figlio di .profile-header */
    opacity: 0;
    will-change: transform, opacity; /* Suggerimento per le performance del browser */
}

/* Lo stato iniziale specifico per ogni elemento è ora definito all'inizio dei keyframes. */

/* Keyframes per l'animazione dell'avatar: entra scalando, ruotando e con "pop" */
@keyframes avatarEnterDynamic {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.2) rotate(-30deg); /* Parte da più lontano, più piccolo e ruotato */
    }
    60% {
        opacity: 1;
        transform: translateY(-15px) scale(1.15) rotate(10deg); /* Overshoot più pronunciato */
    }
    80% {
        transform: translateY(5px) scale(0.95) rotate(-7deg); /* Contro-movimento */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg); /* Stato finale */
    }
}

/* Keyframes per l'animazione del titolo: entra scivolando con un leggero skew */
@keyframes textEnterDynamicLeft {
    0% {
        opacity: 0;
        transform: translate(-50px, 50px) skewX(-20deg); /* Più spostato e inclinato */
    }
    70% {
        opacity: 1;
        transform: translate(8px, -8px) skewX(7deg); /* Overshoot e inclinazione opposta */
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) skewX(0deg); /* Stato finale */
    }
}

/* Keyframes per l'animazione del paragrafo: entra scivolando con un leggero skew (opposto al titolo) */
@keyframes textEnterDynamicRight {
    0% {
        opacity: 0;
        transform: translate(50px, 60px) skewX(20deg); /* Più spostato e inclinato */
    }
    70% {
        opacity: 1;
        transform: translate(-8px, -10px) skewX(-7deg); /* Overshoot e inclinazione opposta */
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) skewX(0deg); /* Stato finale */
    }
}

/* Applica le animazioni quando la classe .loaded viene aggiunta a .profile-header */
.profile-header.loaded .avatar-container img {
    opacity: 0; /* Assicura che parta invisibile prima che l'animazione inizi */
    animation: avatarEnterDynamic 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Easing con "bounce" */
    animation-delay: 0.15s; /* Leggero ritardo per l'avatar */
}

.profile-header.loaded #profile-greeting {
    opacity: 0; /* Assicura che parta invisibile */
    animation: textEnterDynamicLeft 0.85s cubic-bezier(0.23, 1, 0.32, 1) forwards; /* Easing "easeOutQuint" */
    animation-delay: 0.45s; /* Dopo l'avatar */
}

.profile-header.loaded > p {
    opacity: 0; /* Assicura che parta invisibile */
    animation: textEnterDynamicRight 0.85s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.6s; /* Dopo il titolo */
}

/* === FINE NUOVI STILI ANIMAZIONE HEADER PROFILO (v2) === */

#ai-assistant-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 80px;
    height: 80px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1002; 
    transition: transform 0.2s ease-in-out, background-color 0.2s ease;
}
#ai-assistant-fab:hover {
    transform: scale(1.1);
    background-color: var(--accent);
}

#ai-chat-popup {
    position: fixed;
    bottom: 95px; 
    right: 25px;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background-color: var(--white);
    border-radius: var(--border-radius-large, 12px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1001;
    display: none; 
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gray-light, #e0e0e0);
    transform-origin: bottom right;
}
#ai-chat-popup.active {
    display: flex;
    animation: chatPopupEnter 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
@keyframes chatPopupEnter {
    from { opacity: 0; transform: translateY(30px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#ai-chat-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
#ai-chat-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    color: white; 
}
#ai-chat-header h3 i { opacity: 0.9; }
#ai-chat-close-btn {
    background: none; border: none; color: white;
    font-size: 1.6rem; cursor: pointer; opacity: 0.8;
    padding: 5px; transition: opacity 0.2s, transform 0.2s;
}
#ai-chat-close-btn:hover { opacity: 1; transform: rotate(90deg); }

#ai-chat-messages {
    flex-grow: 1; padding: 18px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
    background-color: var(--light, #f8f5ef);
}
.user-message, .ai-message {
    padding: 10px 15px; border-radius: 20px;
    max-width: 85%; word-wrap: break-word;
    font-size: 0.98rem; line-height: 1.55;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.user-message {
    background-color: var(--secondary); color: white;
    align-self: flex-end; border-bottom-right-radius: 6px;
}
.ai-message {
    background-color: var(--white); color: var(--dark, #333);
    align-self: flex-start; border: 1px solid var(--gray-light, #e0e0e0);
    border-bottom-left-radius: 6px;
}
.ai-message.thinking { font-style: italic; color: var(--gray-dark, #555); }
.ai-message.thinking span.dots { display: inline-block; }
.ai-message.thinking span.dots::after {
    content: '.'; animation: thinkingDotsAnimation 1.2s infinite;
    display: inline-block; width: 1.5em; text-align: left;
}
@keyframes thinkingDotsAnimation {
    0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; }
}

#ai-chat-input-container {
    display: flex; padding: 12px 15px;
    border-top: 1px solid var(--gray-light, #e0e0e0);
    background-color: #f5f5f5; align-items: center;
}
#ai-chat-input {
    flex-grow: 1; padding: 10px 15px;
    border: 1px solid var(--gray-medium, #cccccc); border-radius: 22px;
    margin-right: 10px; resize: none; font-size: 0.95rem;
    line-height: 1.45; max-height: 90px; overflow-y: auto;
    background-color: white;
}
#ai-chat-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 209, 140, 96), 0.2);
    outline: none;
}
#ai-chat-send-btn {
    background-color: var(--accent); color: white; border: none;
    border-radius: 50%; width: 42px; height: 42px;
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, transform 0.15s;
}
#ai-chat-send-btn:hover { background-color: var(--primary); transform: scale(1.05); }
#ai-chat-send-btn:disabled { background-color: var(--gray-medium, #cccccc); cursor: not-allowed; transform: none; }
#ai-chat-send-btn i { transition: transform 0.2s ease-out; }
#ai-chat-send-btn:hover i { transform: translateX(1px) rotate(10deg); }

/* Chat AI — interfaccia a lettura comoda, ispirata ai controlli di sistema. */
#ai-chat-popup {
  bottom: 100px;
  width: min(420px, calc(100vw - 32px));
  height: min(650px, calc(100dvh - 128px));
  max-height: none;
  min-height: 0;
  border: 1px solid rgba(64, 71, 60, 0.12);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(35, 44, 32, 0.22), 0 3px 12px rgba(35, 44, 32, 0.08);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

#ai-chat-popup.active { animation: chatPopupEnter 0.36s cubic-bezier(.2, .85, .28, 1.12); }

#ai-chat-header {
  flex: 0 0 auto;
  min-height: 72px;
  padding: 12px 14px 12px 18px;
  color: #273126;
  background: linear-gradient(135deg, rgba(246, 249, 242, 0.98), rgba(237, 243, 232, 0.93));
  border-bottom: 1px solid rgba(64, 71, 60, 0.1);
}

#ai-chat-header h3 {
  gap: 10px;
  color: #273126;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

#ai-chat-header h3::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #48a868;
  box-shadow: 0 0 0 4px rgba(72, 168, 104, 0.15);
}

#ai-chat-header h3 i { color: #657b5b; font-size: 0.95em; }
#ai-chat-header h3 .ai-chat-brand-icon { width: 16px; height: 16px; color: #657b5b; stroke-width: 2.1; }

#ai-chat-close-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  color: #455343;
  background: rgba(74, 89, 70, 0.08);
  font-size: 1.5rem;
  line-height: 1;
}

#ai-chat-close-btn:hover { color: #273126; background: rgba(74, 89, 70, 0.15); transform: none; }

#ai-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 0 0, rgba(221, 235, 212, 0.38), transparent 35%),
    #f8faf6;
}
#ai-chat-messages > * { flex: 0 0 auto; }

.user-message, .ai-message {
  max-width: 88%;
  padding: 12px 15px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(44, 57, 41, 0.06);
  font-size: 0.95rem;
  line-height: 1.58;
  letter-spacing: -0.005em;
}

.ai-message {
  color: #283126;
  background: rgba(255, 255, 255, 0.96);
  border-bottom-left-radius: 5px;
}

.ai-message-row {
  display: flex;
  align-items: flex-end;
  align-self: flex-start;
  gap: 8px;
  max-width: 100%;
}
.ai-message-row .ai-message { max-width: min(328px, calc(100vw - 110px)); }
.ai-message-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 1px;
  border: 1px solid rgba(89, 120, 78, .2);
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #88a77b, #496a45);
  box-shadow: 0 3px 8px rgba(53, 81, 48, .18);
  font-size: .78rem;
}
.ai-message-avatar svg { width: 15px; height: 15px; stroke-width: 2; }
.ai-message.is-streaming { white-space: pre-wrap; }

.user-message {
  color: #fff;
  background: linear-gradient(135deg, #58704f, #3f5b42);
  border-bottom-right-radius: 5px;
}

.ai-message strong { font-weight: 700; color: #283126; }
.ai-message code { padding: 0.08em 0.35em; border-radius: 5px; background: #edf2e9; font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace; }
.ai-list-item { display: block; padding-left: 1.1em; position: relative; }
.ai-list-item::before { content: '•'; position: absolute; left: 0.25em; color: #729067; }

.ai-typing-indicator {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(75, 92, 69, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 2px 8px rgba(44, 57, 41, 0.05);
  color: #667263;
  font-size: 0.78rem;
}

.ai-typing-avatar {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #86a477, #57734f);
  font-size: 0.67rem;
}
.ai-typing-avatar svg { width: 14px; height: 14px; stroke-width: 2; }

.ai-typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.ai-typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: #7a8975; animation: aiTypingPulse 1.15s infinite ease-in-out; }
.ai-typing-dots i:nth-child(2) { animation-delay: .15s; }
.ai-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aiTypingPulse { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-3px); opacity: 1; } }

.ai-quick-actions { display: grid; gap: 8px; padding-top: 2px; }
.ai-quick-actions-label { padding-left: 4px; color: #7d8978; font-size: 0.73rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ai-quick-action {
  display: grid;
  grid-template-columns: 28px 1fr 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid rgba(70, 88, 65, 0.1);
  border-radius: 14px;
  color: #334132;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 2px rgba(32, 45, 29, 0.03);
  cursor: pointer;
  font: 600 0.86rem/1.2 inherit;
  text-align: left;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ai-quick-action > i:first-child { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #5d7955; background: #eaf1e6; }
.ai-quick-action > i:last-child { color: #98a693; font-size: .7rem; }
.ai-quick-action:hover { background: #fff; box-shadow: 0 5px 14px rgba(48, 65, 44, 0.1); transform: translateY(-1px); }
.ai-quick-action:focus-visible { outline: 3px solid rgba(102, 145, 88, 0.35); outline-offset: 2px; }

/* Carte operative nella conversazione: la chat mostra dati e chiede una conferma esplicita. */
.ai-operation-card {
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(74, 105, 66, .15);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(244, 249, 241, .96));
  box-shadow: 0 6px 18px rgba(51, 73, 46, .08);
}
.ai-operation-card.is-danger { border-color: rgba(185, 80, 67, .22); background: linear-gradient(145deg, #fff, #fff8f6); }
.ai-operation-heading { display: flex; align-items: center; gap: 10px; padding: 13px 14px 9px; }
.ai-operation-heading > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #55734e; background: #e8f1e4; font-size: .9rem; }
.ai-operation-card.is-danger .ai-operation-heading > i { color: #a64d42; background: #fff0ed; }
.ai-operation-heading > div { display: grid; gap: 2px; min-width: 0; }
.ai-operation-heading strong { overflow: hidden; color: #2f3c2d; font-size: .9rem; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.ai-operation-eyebrow { color: #74856e; font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ai-operation-details { display: grid; gap: 4px; padding: 0 14px 12px 56px; color: #586556; font-size: .77rem; line-height: 1.35; }
.ai-operation-details span:last-child { color: #768174; }
.ai-operation-status { min-height: 0; margin: 0; padding: 0 14px; color: #657661; font-size: .76rem; }
.ai-operation-status:empty { display: none; }
.ai-operation-status.is-success { padding-bottom: 12px; color: #277447; }
.ai-operation-status.is-error { padding-bottom: 12px; color: #ad483d; }
.ai-operation-actions { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid rgba(74, 105, 66, .1); background: rgba(247, 250, 245, .72); }
.ai-operation-button { flex: 1; min-height: 35px; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: #507047; cursor: pointer; font: 700 .75rem/1 inherit; transition: transform .16s ease, background-color .16s ease, opacity .16s ease; }
.ai-operation-button:hover { background: #3e603b; transform: translateY(-1px); }
.ai-operation-button.is-danger { background: #af5146; }
.ai-operation-button.is-danger:hover { background: #963e35; }
.ai-operation-button.is-secondary { color: #536450; background: #e9efe6; }
.ai-operation-button:disabled { cursor: wait; opacity: .6; transform: none; }
.ai-operation-button:focus-visible { outline: 3px solid rgba(102, 145, 88, .32); outline-offset: 2px; }

/* Scheda evento generata dalla chat: riepiloga solo i dati dell'API dell'evento. */
.ai-event-card {
  flex: 0 0 auto;
  min-height: 280px;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(74, 105, 66, .16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(51, 73, 46, .1);
}
.ai-event-card-image-wrap {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: linear-gradient(135deg, #d8e7d0, #8da980);
}
.ai-event-card-image-wrap::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(0deg, rgba(28, 46, 30, .28), transparent 58%);
  pointer-events: none;
}
.ai-event-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-event-card-image-wrap.is-unavailable .ai-event-card-image { display: none; }
.ai-event-card-image-wrap.is-placeholder { display: grid; place-items: center; color: #fff; }
.ai-event-card-image-wrap.is-placeholder svg { position: relative; z-index: 1; width: 35px; height: 35px; }
.ai-event-card-content { padding: 14px; }
.ai-event-card-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #6f8569;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ai-event-card-title { display: block; color: #2f412f; font-size: .98rem; line-height: 1.3; }
.ai-event-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-event-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(79, 105, 73, .11);
  border-radius: 999px;
  color: #5a6956;
  background: #f5f8f2;
  font-size: .71rem;
  line-height: 1.2;
}
.ai-event-card-meta svg { width: 12px; height: 12px; color: #62805a; stroke-width: 2.2; }
.ai-event-card-description {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #697267;
  font-size: .78rem;
  line-height: 1.45;
}
.ai-event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(74, 105, 66, .1);
}
.ai-event-card-state { font-size: .71rem; font-weight: 750; }
.ai-event-card-state.is-open { color: #287645; }
.ai-event-card-state.is-closed { color: #a64d42; }
.ai-event-card-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 9px;
  color: #42653d;
  background: #eaf2e6;
  font-size: .73rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .16s ease, transform .16s ease;
}
.ai-event-card-button:hover { color: #31562e; background: #dfedd9; transform: translateY(-1px); }
.ai-event-card-button:focus-visible { outline: 3px solid rgba(102, 145, 88, .32); outline-offset: 2px; }
.ai-event-card-button svg { width: 13px; height: 13px; stroke-width: 2.2; }

/* Più eventi: una galleria orizzontale con snap, compatta come una raccolta di card di sistema. */
.ai-event-collection { align-self: stretch; min-width: 0; }
.ai-event-collection-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px 4px;
  color: #73826e;
  font-size: .7rem;
  font-weight: 700;
}
.ai-event-collection-hint svg { width: 13px; height: 13px; stroke-width: 2.1; }
.ai-event-card-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 1px 2px 10px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ai-event-card-rail::-webkit-scrollbar { display: none; }
.ai-event-card.is-in-collection {
  flex: 0 0 min(330px, calc(100% - 24px));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.ai-event-card.is-in-collection .ai-event-card-image-wrap { height: 118px; }

#ai-chat-input-container { flex: 0 0 auto; padding: 12px; gap: 10px; border-top: 1px solid rgba(64, 71, 60, 0.1); background: rgba(255, 255, 255, 0.88); }
#ai-chat-input { min-height: 44px; margin: 0; padding: 11px 14px; border: 1px solid rgba(75, 92, 69, 0.18); border-radius: 15px; background: #fff; color: #283126; font: 0.92rem/1.4 inherit; }
#ai-chat-input::placeholder { color: #8b9588; }
#ai-chat-input:focus { border-color: #6e9162; box-shadow: 0 0 0 4px rgba(105, 147, 91, 0.14); }
#ai-chat-send-btn { flex: 0 0 44px; width: 44px; height: 44px; background: #4a6845; box-shadow: 0 3px 8px rgba(56, 80, 51, 0.22); }
#ai-chat-send-btn:hover { background: #385b37; transform: scale(1.04); }

@media (max-width: 520px) {
  #ai-chat-popup { right: 16px; bottom: 86px; width: calc(100vw - 32px); height: min(620px, calc(100dvh - 108px)); border-radius: 21px; }
  #ai-chat-messages { padding: 14px; }
  .user-message, .ai-message { max-width: 92%; }
  .ai-message-row .ai-message { max-width: calc(100vw - 104px); }
}

@media (max-height: 720px) {
  #ai-chat-popup {
    right: 12px;
    bottom: 12px;
    width: min(420px, calc(100vw - 24px));
    height: calc(100dvh - 24px);
    border-radius: 20px;
  }
  #ai-chat-header { min-height: 62px; padding-block: 9px; }
  #ai-chat-messages { padding: 13px; gap: 11px; }
  #ai-chat-input-container { padding: 9px 10px; }
  .ai-event-card-image-wrap,
  .ai-event-card.is-in-collection .ai-event-card-image-wrap { height: 104px; }
  .ai-event-card-content { padding: 12px; }
}

/* Il popup è un vero drawer: non può mai uscire dalla viewport, anche quando
   cambia l'altezza disponibile del browser mobile. */
#ai-chat-popup {
  position: fixed !important;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  height: min(650px, calc(100svh - 24px));
  max-height: calc(100svh - 24px);
  min-height: 0;
}
#ai-chat-header,
#ai-chat-input-container {
  position: relative;
  z-index: 2;
}
#ai-chat-messages {
  position: relative;
  z-index: 1;
  min-height: 0;
  contain: layout paint;
}

/* Stili per il pulsante TTS nell'header della chat AI */
#ai-chat-header {
  /* Assicurati che l'header usi flex per allineare i bottoni */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-header-btn { /* Classe comune per i bottoni nell'header della chat AI */
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem; /* Dimensione simile al close button */
  cursor: pointer;
  opacity: 0.8;
  padding: 5px;
  margin-left: 8px; /* Spazio tra i bottoni */
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1; /* Per un miglior allineamento verticale dell'icona */
}

.ai-chat-header-btn:hover {
  opacity: 1;
  transform: scale(1.1); /* Leggero ingrandimento all'hover */
}

#ai-chat-tts-toggle-btn {
  /* Stili specifici se necessari, altrimenti eredita da .ai-chat-header-btn */
  /* Potrebbe essere utile per ordinare se hai più bottoni */
  order: -1; /* Mette il pulsante TTS prima del pulsante di chiusura se entrambi usano flex order */
}

/* Assicurati che il titolo H3 nell'header non occupi tutto lo spazio se usi flex */
#ai-chat-header h3 {
  flex-grow: 1; /* Permette al titolo di occupare lo spazio disponibile */
  margin: 0; /* Rimuovi margini di default se presenti */
  /* ...altri tuoi stili per h3... */
}

/* Stile per il feedback di sistema nella chat (Opzionale, se decidi di mostrarlo) */
.system-feedback-message {
  font-style: italic;
  color: var(--gray-dark, #555555);
  font-size: 0.85em;
  text-align: center;
  padding: 8px 15px;
  margin: 5px auto; /* Centra il messaggio se è un blocco a sé */
  max-width: 90%;
  background-color: var(--gray-light, #e9e9e9);
  border-radius: 10px;
}

/* =================================================================== */
/* SOLUZIONE DEFINITIVA PER SFONDO FISSO E PATINA SUL CONTENUTO */
/* =================================================================== */

/* 1. Spinge l'immagine di sfondo dell'Eremo ancora più indietro (z-index: -2) 
      per essere sicuri che sia sempre lo strato più basso. */
.page-index .hero-section::before {
  z-index: -2;
}

/* 2. Imposta ogni sezione di contenuto per creare un contesto di posizionamento.
      Questo è FONDAMENTALE per far funzionare la patina. */
main > section.section-padding {
  position: relative;
  z-index: 1; /* Assicura che la sezione di contenuto sia sopra lo sfondo fisso */
}

/* 3. Aggiunge la "patina" bianca semi-trasparente DENTRO ogni sezione di contenuto,
      ma la posiziona DIETRO al testo e alle immagini di quella sezione. */
main > section.section-padding::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Ecco la patina biancastra richiesta. È il colore di sfondo della pagina
     ma con una trasparenza del 5%, così si intravede appena l'Eremo dietro. */
  background-color: rgba(248, 245, 239, 0.95); /* var(--light) con 95% di opacità */

  z-index: -1; /* Posiziona la patina dietro al contenuto (h2, p, img) della sua sezione */
}

/* =================================================================== */
/* FIX: Ripristina l'altezza della hero section su desktop */
/* =================================================================== */

@media (min-width: 992px) {
  .page-index .hero-section {
    /* Imposta un'altezza più contenuta per gli schermi grandi, 
       lasciando 100vh per i dispositivi mobili e tablet. */
    min-height: 95vh; 
  }
}

/* Stili per messaggi di errore autenticazione con animazione */
.auth-error-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: rgba(var(--danger-rgb), 0.1);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    color: #a93226; /* Testo danger più scuro */
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 1rem;
    /* Animazione shake per attirare l'attenzione */
    animation: shakeError 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.login-popup .form-message.error {
    display: none; /* Nasconde il vecchio contenitore di errori */
}

.auth-error-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.auth-error-icon .cross-mark {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.auth-error-icon .cross-mark::before,
.auth-error-icon .cross-mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px; /* Lunghezza delle linee della X */
    height: 3px; /* Spessore */
    background-color: var(--danger);
    border-radius: 2px;
    /* Animazione per "disegnare" le linee */
    animation: drawCross 0.3s ease-out forwards;
}

.auth-error-icon .cross-mark::before {
    transform: translate(-50%, -50%) rotate(45deg);
    animation-delay: 0.1s;
}

.auth-error-icon .cross-mark::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    animation-delay: 0.25s;
}

@keyframes shakeError {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes drawCross {
    0% { width: 0; }
    100% { width: 20px; }
}

/* Stile per l'avviso di sessione scaduta */
#session-expired-toast {
    position: fixed;
    top: -100px; /* Parte da fuori schermo */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--warning);
    color: var(--dark);
    padding: 1rem 1.8rem;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-medium);
    z-index: 10050; /* Z-index molto alto */
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transizione con effetto "elastico" */
}
#session-expired-toast.show {
    top: 0; /* Posizione finale visibile */
}
#session-expired-toast i {
    font-size: 1.4rem;
}

/* ===== NUOVO LAYOUT DASHBOARD AREA PERSONALE ===== */

/* Contenitore Principale */
.profile-main-content {
  background-color: #f4f7f6; /* Un grigio molto chiaro per lo sfondo della pagina */
}
.profile-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* --- Sidebar di Navigazione (Sinistra) --- */
.profile-sidebar {
  flex: 0 0 280px; /* Non cresce, non si restringe, base di 280px */
  position: sticky; /* Rimane visibile durante lo scroll! */
  top: calc(var(--navbar-height) + 2rem);
  background-color: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  padding: 1.5rem;
}
.sidebar-header {
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-light);
}
.sidebar-header .avatar-container {
  width: 90px;
  height: 90px;
  margin: 0 auto 1rem;
}
.sidebar-header .avatar-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sidebar-header h3 {
  font-size: 1.25rem;
  color: var(--primary);
  margin: 0;
  word-break: break-word;
}
.sidebar-header p {
  font-size: 0.9rem;
  color: var(--gray-dark);
  margin: 0.25rem 0 0 0;
  word-break: break-all;
}
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav a.sidebar-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  color: var(--gray-dark);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-bottom: 0.5rem;
}
.sidebar-nav a.sidebar-link:hover {
  background-color: var(--light);
  color: var(--primary);
}
.sidebar-nav a.sidebar-link.active {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(var(--dark-rgb), 0.15);
}
.sidebar-nav a.sidebar-link i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}
.sidebar-danger-zone {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--gray-medium);
}
.sidebar-danger-zone a.sidebar-link:hover {
  background-color: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}
.sidebar-danger-zone a.sidebar-link.active {
  background-color: var(--danger);
  color: white;
}


/* --- Pannello dei Contenuti (Destra) --- */
.profile-content {
  flex-grow: 1;
}
.profile-panel {
  display: none; /* Nascosto di default */
  background-color: var(--white);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-light);
  overflow: hidden; /* Per contenere i bordi interni */
}
.profile-panel.active {
  display: block;
  animation: fadeInPanel 0.5s ease-out forwards;
}
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--gray-light);
  background-color: #fafcfa;
}
.panel-header h2 {
  font-size: 1.75rem;
  color: var(--primary);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.panel-header p {
  font-size: 1rem;
  color: var(--gray-dark);
  margin: 0;
}
.profile-panel form {
  padding: 2rem;
}
.form-section {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed var(--gray-medium);
}
.profile-panel form .form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.form-section h4 {
  font-size: 1.2rem;
  color: var(--secondary);
  margin-top: 0;
  margin-bottom: 1.5rem;
}
p.form-section-description {
    font-size: 0.95rem;
    color: var(--gray-dark);
    margin-top: -1rem;
    margin-bottom: 1rem;
}

/* --- Stili Componenti Interni Migliorati --- */

/* Miglioramento UX pulsante di salvataggio */
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.btn-save:disabled, .btn-danger:disabled {
  background-color: var(--gray-medium);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  color: var(--gray-dark);
}

/* Nuovo stile per i pulsanti danger */
.btn-danger {
  background-color: var(--danger);
  color: white;
  border: none;
  padding: 1rem 2.2rem;
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-medium);
}
.btn-danger:hover {
  background-color: #c0392b;
  box-shadow: var(--shadow-light);
}

/* Pannello danger */
.danger-panel .panel-header { background-color: rgba(var(--danger-rgb), 0.05); }
.danger-panel .panel-header h2, .danger-panel .panel-header .danger-text { color: var(--danger); }
.danger-panel p { color: var(--gray-dark); }

/* Miglioramento UX Selezione Icona */
.avatar-option-image.selected {
  border-color: var(--primary);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(var(--dark-rgb), 0.3);
}

/* Accordion per Generatore AI */
.ai-generator-accordion {
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  margin-top: 1.5rem;
}
.ai-generator-accordion summary {
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: background-color 0.2s ease;
}
.ai-generator-accordion summary:hover {
  background-color: var(--light);
}
.ai-generator-accordion[open] summary {
  border-bottom: 1px solid var(--gray-light);
}
.ai-generator-content {
  padding: 1.5rem;
}
.ai-generator-content .btn-ai-generate { margin-top: 0.5rem; }
#ai-generated-icon-preview-container {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid var(--gray-light);
}
.ai-preview-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.btn-icon-action {
    background: var(--success);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-icon-action:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-light);
}
.btn-icon-action.btn-danger {
    background: var(--danger);
}


/* Responsive Design */
@media (max-width: 992px) {
  .profile-container {
    flex-direction: column;
  }
  .profile-sidebar {
    position: static;
    width: 100%;
    flex-basis: auto;
  }
}