/* Stili per la Modale Personalizzata */

.body-modal-open {

  overflow: hidden;

}



.custom-modal {

  display: none; /* Nascosto di default */

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1050;

  align-items: center;

  justify-content: center;

}



.modal-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

}



.modal-content-wrapper {

  position: relative;

  background-color: #fff;

  border-radius: 8px;

  width: 90%;

  max-width: 800px;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  animation: modal-fade-in 0.3s ease-out;

}



@keyframes modal-fade-in {

  from {

    opacity: 0;

    transform: translateY(-20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem;

  border-bottom: 1px solid #dee2e6;

}



.modal-title {

  margin: 0;

  font-size: 1.25rem;

  font-family: "Playfair Display", serif;

  color: #2b2d2f;

}



.modal-close-btn {

  background: transparent;

  border: 0;

  font-size: 1.5rem;

  font-weight: 700;

  line-height: 1;

  color: #000;

  opacity: 0.5;

  cursor: pointer;

  padding: 0.5rem;

}



.modal-close-btn:hover {

  opacity: 0.8;

}



.modal-body {

  padding: 1.5rem;

  overflow-y: auto;

}



.modal-body h3 {

  margin-top: 1.5rem;

  font-size: 1.1rem;

}



.modal-body p,

.modal-body li {

    font-size: 0.9rem;

}