html {
  font-size: 16px;
  font-family: 'Inter', serif;
  
}


.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
  border-radius: 8px;
  padding: 1rem;
}

/* Adjust for dark mode */
.dark .glass {
  background: rgba(0, 0, 0, 0.2);
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
}

header nav {
  border: 1px solid #f16251 !important;
}

.glass-border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ripristina bordo rosso Marsi per le sezioni glass-border */
.glass-border {
  border: 1px solid #f16251 !important;
}

.text-comment {
    color: #0c6800;
}


.title-dot {
  color: #f16251;
}

.hidden-section {
  display: none !important;
}

.logo-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.logo-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* section entry animation */
.section-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.section-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* centra contenuto partnerships */
#partnerships > .glass {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* aumenta altezza sezione ISO */
#iso > .glass {
  min-height: 600px; /* regola a tuo piacimento */
}

/* chat container draggable & resizable */
#chat-container {
   width: 16rem;
   height: 10rem;
   display: none; /* nascosto di default */
   flex-direction: column;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   transition: opacity 0.3s ease, transform 0.3s ease;
   opacity: 0;
   resize: both;
   overflow: auto;
   min-width: 200px;
   min-height: 150px;
}

/* bordo colorato per chat container */
#chat-container {
  border: 2px solid #f16251;
  
}

#chat-container.open {
   display: flex;
   opacity: 1;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  width: 24rem;   /* larghezza maggiore */
  height: 30rem;  /* altezza maggiore */
}

/* posiziona logo chat sopra il footer */
#chat-toggle {
  position: fixed;
  bottom: 3.5rem; /* era 2.5rem, ora più in alto */
  right: 1rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  user-select: none;
  z-index: 1000;
}

/* footer font size */
#site-footer {
  font-size: 0.95rem;
}

/* footer positioning: flow with page */
#site-footer {
  position: static;
}

/* fullscreen chat */
#chat-container.fullscreen {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 100%; height: 100%;
  margin: 0;
  border-radius: 0;
  z-index: 10000;
}

/* partnership logos fadeInUp */
@keyframes partnershipFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

#partnership-logos .logo-animate {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

#partnership-logos .logo-animate.visible {
  animation: partnershipFadeIn 0.6s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* maggiore spaziatura nella sezione contatti */
#contatti .glass > .flex {
  gap: 3rem !important;
}

/* stile pulsante chiusura chat */
#chat-close {
  color: #f16251;
  font-size: 1.5rem;                     /* cerchio */
  background: transparent;
  line-height: 1;                  /* allinea simbolo */
  cursor: pointer;
}

/* glass effect per chat container */
#chat-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* glass per dark mode */
.dark #chat-container {
  background: rgba(0, 0, 0, 0.2);
}


/* testo chat sempre nero */
#chat-window {
  color: #f6f4f4;
}

/* WhatsApp-style chat bubbles */
#chat-window {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#chat-window .message {
  max-width: 75%;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  line-height: 1.4;
}
#chat-window .message.user {
  background: #f16251;
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}
#chat-window .message.assistant {
  background: #666666;
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
  display: inline-block;
  width: fit-content;
  max-width: 75%;
  /* il padding resta come sopra */
}

/* Loader bubble: compatta e adattiva */
#chat-window .message.assistant.bot-loader {
  background: #666666 !important;
  box-shadow: none !important;
  padding: 0.3rem 0.7rem !important;
  min-height: unset !important;
  height: auto !important;
  width: fit-content !important;
  max-width: fit-content !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Garantisce spazio minimo per il loader all’interno del box */
.bot-message {
  min-height: 4rem;    /* altezza minima più ampia */
  padding: 1rem;       /* padding interno maggiore */
}

/* arrotonda immagini nel box Team */
#Team img {
  border-radius: 50%;
  object-fit: cover;
}

/* Uniforma dimensioni pulsanti header e mobile */
#section-titles a,
#mobile-menu a {
  display: inline-flex;      /* garantisce inline-flex se non già */
  justify-content: center;
  align-items: center;
  width: 8rem;               /* larghezza fissa */
  height: 2.5rem;            /* altezza fissa */
  text-align: center;
  line-height: 1;            /* reset linea */
}

/* testi box neri con testo bianco */
input, textarea, select {
  background-color: #000 !important;
  color: #fff !important;
}
input::placeholder,
textarea::placeholder {
  color: #ccc !important;
}


/* Overlay semitrasparente come header */
.popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255,255,255,0.8);
  /* dark-mode fallback */
}
.dark .popup-overlay {
  background-color: rgba(31,41,55,0.8); /* bg-gray-800/80 */
}
.popup-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* Box del popup */
.popup-box {
  background-color: #ffffff;
}
.dark .popup-box {
  background-color: #1f2937; /* gray-800 */
}
.popup-box {
  border: 1px solid #f16251;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 50rem;
  /* Altezza fissa di 600px, ma mai più dell'85% dell'altezza schermo */
  height: 600px; 
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box; 
}

/* Container del contenuto (testo + lista) */
.popup-box .popup-content {
  flex: 1;           /* Occupa tutto lo spazio disponibile */
  overflow-y: auto;  /* Scroll se il contenuto globale eccede */
  margin-bottom: 1rem;
  text-align: left;  /* Per leggere meglio le descrizioni e liste */
  padding: 0 1rem;   /* Spaziatura laterale */
}

/* Stile per la lista clienti: scorre insieme al resto del contenuto */
.popup-box .popup-content ul {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  /* Rimosso bordo e sfondo grigio */
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.popup-box p,
.popup-box .popup-content {
  color: #1f2937;
}
.dark .popup-box p,
.dark .popup-box .popup-content {
  color: #f9fafb;
}
.popup-box button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #f16251;
  color: #ffffff;
  border-radius: 0.25rem;
}
.popup-box button:hover {
  background-color: #d94e3b;
}

/* popup title color */
.popup-box h2 {
  color: #f16251 !important;
}

/* nasconde sempre il pulsante hamburger di default */
#mobile-menu-button {
  display: none !important;
}
/* override della utility md:hidden */
#mobile-menu-button.md\:hidden {
  display: none !important;
}

/* mostra il pulsante hamburger in header quando viewport ≤1361px di larghezza */
@media (max-width: 1361px) {
  #mobile-menu-button {
    display: block !important;
  }
  /* assicura che anche la classe md:hidden venga ignorata */
  #mobile-menu-button.md\:hidden {
    display: block !important;
  }
  #section-titles {
    display: none !important;
  }
}


/* mostra il pulsante hamburger in header quando viewport ≤1361px di larghezza */
@media (max-width: 1361px) {
  #mobile-menu-button {
    display: block !important;
    
  }
  /* assicura che anche la classe md:hidden venga ignorata */
  #mobile-menu-button.md\:hidden {
    display: block !important;
  }
  #section-titles {
    display: none !important;
  }
}

/* nasconde sempre il footer sui dispositivi mobili */


/* header: impedisce al motto di spingere i link */
.logo-container {
  /* rimuove la width fissa precedente */
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
#home-motto {
  /* tronca il testo in eccesso */
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* responsive home-motto */
#home-motto {
  max-width: 30rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  #home-motto {
    font-size: 1rem;
    max-width: 80vw;
  }
}

@media (max-width: 480px) {
  #home-motto {
    font-size: 0.875rem;
    white-space: normal; /* consente il wrap su più righe */
  }
}

/* mantiene fissi i link nel nav e li centra */
#section-titles {
  position: absolute;
  left: calc(50% + 6rem) !important;    /* tasti leggermente verso destra per non sovrappori con il motto */
  transform: translateX(-50%) !important;
  flex-shrink: 0 !important;
}

/* header: blocca i pulsanti sempre a destra */
#section-titles {
  margin-left: auto !important;        /* spinge i link sul bordo destro */
  justify-content: flex-start !important;  /* allinea i link a sinistra del loro contenitore */
}

/* hamburger sempre a destra */
#mobile-menu-button {
  position: static !important;
  transform: none !important;
  order: 2 !important;
  margin-left: auto !important;
}

/* campi nome, email e messaggio con bordo rosso Marsi */
input[name="nome"],
input[name="email"],
textarea[name="messaggio"] {
  border-color: #f16251 !important;
}



/* Applica bordo rosso al contenitore .glass-border dentro il footer senza alterare le dimensioni esterne */
#site-footer .glass-border {
  border: 1px solid #f16251 !important;
}

@media (max-width: 768px) {
  #site-footer {
    position: static !important;
    display: block !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  /* chat-toggle sul bordo destro-inferiore su mobile */
  #chat-toggle {
    bottom: 0.5 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  /* centra il container della mappa */
  #contatti .max-w-xs {
    width: auto !important;
    margin: 0 auto !important;
  }

  /* centra correttamente il wrapper della mappa */
  #contatti .w-full.max-w-xs.mb-4 {
    width: min(80vw, 20rem) !important;
    margin: 0 auto !important;
  }
}

/* sposta il toggle della chat sopra il footer */
@media (min-width: 768px) {
  #chat-toggle {
    bottom: 7rem !important;   /* sposta il toggle sopra il footer */
    margin-bottom: 0 !important;
  }
}

@media (min-width: 768px) {
  /* evita che il footer copra gli ultimi loghi in Partnerships */
  #partnerships {
    padding-bottom: 0; /* rimosso padding extra per uniformare spazio */
  }
}

@media (max-width: 768px) {
  /* centra perfettamente i figli (mappa + form) dentro la glass-box */
  #contatti .glass > .flex {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    gap: 1.5rem;
  }

  /* QUESTA è la regola giusta: mb-4 e non mb-12 */
  #contatti .w-full.max-w-xs.mb-4 {
    width: min(80vw, 20rem) !important;
    margin: 0 auto !important;
  }
}

/* uniform spacing between sections */
main > section {
  margin-bottom: 1rem;
}

/* space above footer */
#site-footer {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* From Uiverse.io by ashish-yadv */
.loader {
  margin-top: 25px;
  margin-bottom: 15px;
  width: 60px;
  height: 10px;
  display: flex;
  justify-content: space-evenly;
}

.ball {
  list-style: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.ball:nth-child(1) {
  animation: bounce-1 2.1s ease-in-out infinite;
}

@keyframes bounce-1 {
  50% {
    transform: translateY(-18px);
  }
}

.ball:nth-child(2) {
  animation: bounce-3 2.1s ease-in-out 0.3s infinite;
}

@keyframes bounce-2 {
  50% {
    transform: translateY(-18px);
  }
}

.ball:nth-child(3) {
  animation: bounce-3 2.1s ease-in-out 0.6s infinite;
}

@keyframes bounce-3 {
  50% {
    transform: translateY(-18px);
  }
}

/* --- Animazione icone Chi Siamo --- */
.chi-siamo-icons {
  margin-top: 2.5rem !important; /* abbassa le icone rispetto al titolo */
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.chi-siamo-icon-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.chi-siamo-icon-animate.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chi-siamo-icons button {
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.chi-siamo-icons button:hover {
  transform: scale(1.12) rotate(-6deg);
}

/* --- Animazione schede dipendenti Team --- */
.team-card-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
  transition-delay: var(--team-delay, 0s);
}
.team-card-animate.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 768px) {
  #chat-toggle {
    bottom: 6.5rem !important; /* alza di poco il tasto del chat bot su mobile */
    right: 1rem !important;
    margin: 0 !important;
  }
}