/* style.css - Stili principali del sito Domus Justa */



:root {

  --main: #b24a12;

  --main-light: #ff8000;

  --second: #1e3c72;

  --second-light: #4682b4;

  --cta: #ff8000;

  --cta-hover: #b24a12;

  --bg: #f8fbfd;

  --white: #fff;

  --border-radius: 18px;

  --shadow: 0 2px 16px #dbeafe45;

}



body {

  font-family: 'Montserrat', sans-serif;

  background: var(--bg);

  color: var(--second);

  margin: 0;

}



nav {

  background: var(--second);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 2rem;

  position: sticky;

  top: 0;

  z-index: 100;

  box-shadow: 0 2px 8px #c1d7fa4a;

}



nav img {

  height: 44px;

}



nav ul {

  list-style: none;

  display: flex;

  gap: 2rem;

  margin: 0;

  padding: 0;

}



nav ul li a {

  color: var(--white);

  text-decoration: none;

  font-weight: 600;

  letter-spacing: 0.5px;

  transition: .18s;

}



nav ul li a:hover,

nav ul li.active a {

  color: var(--cta);

}



.nav-cta {

  background: var(--cta);

  color: var(--white);

  padding: 8px 18px;

  border-radius: 30px;

  font-weight: bold;

  box-shadow: 0 1px 8px #ff800066;

  margin-left: 1rem;

}



header {

  background: linear-gradient(90deg, var(--second) 60%, var(--main) 120%);

  color: var(--white);

  padding: 6rem 1rem 2.7rem 1rem;

  text-align: center;

  margin-bottom: 2rem;

}



header h1 {

  font-size: 2.7rem;

  margin: 1rem 0 0.6rem 0;

  font-weight: 800;

}



header p {

  font-size: 1.18rem;

  opacity: .96;

}



.firma-block {

  margin-top: 2.1rem;

  margin-bottom: 1.3rem;

}



.firma-slogan {

  font-size: 1.35rem;

  font-weight: 600;

  color: #ffdb58;

  letter-spacing: 1.5px;

  display: block;

  margin-bottom: .8rem;

  text-shadow: 0 2px 8px #1e3c7244;

}



.firma-img {

  margin-top: 0.1rem;

  max-width: 340px;

  width: 60vw;

  height: auto;

  filter: drop-shadow(0 2px 10px #1e3c7299);

  display: inline-block;

}



.hero-cta {

  background: var(--cta);

  color: var(--white);

  font-weight: 700;

  border-radius: 30px;

  padding: 12px 38px;

  font-size: 1.18rem;

  text-decoration: none;

  margin-top: 1.2rem;

  display: inline-block;

  box-shadow: 0 2px 12px #ff800055;

  transition: .15s;

}



.hero-cta:hover {

  background: var(--cta-hover);

}



.main-section {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 2.5rem;

  max-width: 1050px;

  margin: -2.4rem auto 2.3rem auto;

  padding: 1.5rem;

  background: var(--white);

  border-radius: var(--border-radius);

  box-shadow: var(--shadow);

}



.real-photo {

  max-width: 90px;

  border-radius: 50%;

  margin-bottom: 12px;

  box-shadow: 0 2px 8px #b3d6f055;

}



.welcome-txt {

  flex: 1 1 320px;

  min-width: 260px;

}



.welcome-txt h2 {

  margin-top: 0;

  color: var(--main);

}



.section {

  padding: 2.2rem 1rem;

  max-width: 1000px;

  margin: 0 auto 2rem auto;

  background: var(--white);

  border-radius: var(--border-radius);

  box-shadow: var(--shadow);

}



.gallery {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  justify-content: center;

}



.gallery img {

  width: 320px;

  max-width: 90vw;

  border-radius: 14px;

  box-shadow: 0 2px 8px #b3d6f055;

  cursor: pointer;

  transition: .13s;

}



.gallery img:hover {

  transform: scale(1.035);

  box-shadow: 0 3px 18px #ff800055;

}



footer {

  background: var(--second);

  color: var(--white);

  text-align: center;

  padding: 1.2rem;

  margin-top: 2rem;

  font-size: .97em;

}



.footer-extra {

  margin-top: 0.8em;

  font-size: .99em;

  color: var(--cta);

}



@media (max-width: 900px) {

  .main-section {

    flex-direction: column;

  }

  .welcome-txt,

  .avatar {

    text-align: center;

  }

  .gallery img {

    width: 90vw;

  }

}



.reviews {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: space-around;

  margin-top: 20px;

}



.review {

  background: #fdfdfd;

  border: 1px solid #ddd;

  padding: 16px;

  border-radius: 10px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  max-width: 300px;

  flex: 1 1 300px;

}



.stars {

  color: gold;

  font-size: 1.2em;

  margin-bottom: 5px;

}



.author {

  font-weight: bold;

  margin-top: 10px;

}



.date {

  font-size: 0.9em;

  color: #666;

}



/* === STILE CHATBOT === */

#chatbot {

  position: fixed;

  bottom: 24px;

  right: 24px;

  width: 340px;

  background: #fff;

  border-radius: 20px;

  box-shadow: 0 4px 32px #1e88e522;

  border: 1px solid #dbeafe;

  z-index: 9999;

  font-size: 15px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  max-height: 500px;

}

#chatbot-header {

  background: #1e88e5;

  color: #fff;

  font-weight: 600;

  padding: 18px 16px 14px 16px;

  border-radius: 20px 20px 0 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

#chatbot-header .close {

  cursor: pointer;

  font-size: 22px;

  opacity: .75;

}

#chatbot-helper {

  font-size: 14px;

  color: #0c4873;

  padding: 10px 17px 5px 17px;

  background: #f8fbfd;

  border-bottom: 1px solid #e3eaf2;

}

#chat-history {

  padding: 16px;

  height: 260px;

  overflow-y: auto;

  background: #f7fafd;

  flex: 1 1 auto;

}

.msg {

  margin-bottom: 10px;

  display: flex;

}

.msg.left {

  justify-content: flex-start;

}

.msg.right {

  justify-content: flex-end;

}

.bubble {

  max-width: 80%;

  padding: 10px 14px;

  border-radius: 16px;

  line-height: 1.4;

  box-shadow: 0 1px 6px #1e88e508;

}

.msg.left .bubble {

  background: #e3f2fd;

  color: #222;

  border-bottom-left-radius: 2px;

}

.msg.right .bubble {

  background: #1e88e5;

  color: #fff;

  border-bottom-right-radius: 2px;

}

#chatbot-footer {

  display: flex;

  border-top: 1px solid #e3eaf2;

  padding: 8px;

  background: #fff;

}

#chat-input {

  flex: 1;

  border: none;

  font-size: 15px;

  padding: 8px;

  border-radius: 10px;

  outline: none;

  background: #f7fafd;

}

#chat-send {

  margin-left: 6px;

  background: #1e88e5;

  color: #fff;

  border: none;

  padding: 0 18px;

  border-radius: 10px;

  font-size: 15px;

  cursor: pointer;

  transition: .2s;

  font-weight: 500;

}

#chat-send:hover {

  background: #1565c0;

}

.wa-btn {

  background: #25D366;

  color: #fff;

  border: none;

  border-radius: 7px;

  padding: 8px 18px;

  text-decoration: none;

  font-weight: 600;

  display: inline-block;

  margin-top: 7px;

  box-shadow: 0 1px 8px #aaf7c1b5;

}

.wa-btn:hover {

  background: #128c7



.reviews {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: space-around;

  margin-top: 20px;

}



.review {

  background: #fdfdfd;

  border: 1px solid #ddd;

  padding: 16px;

  border-radius: 10px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  max-width: 300px;

  flex: 1 1 300px;

}



.stars {

  color: gold;

  font-size: 1.2em;

  margin-bottom: 5px;

}



.author {

  font-weight: bold;

  margin-top: 10px;

}



.date {

  font-size: 0.9em;

  color: #666;

}