.popup {
    display: none; /* Standaard verborgen */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}

.popup-content {
    position: relative;
    margin: 15% auto;
    padding: 20px;
    background: #fff;
    width: 50%;
    border-radius: 10px;
}
.spacingY-xs-24 {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

.spacingX-xs-24 {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.spacingT-md-60 {
	@media  (min-width: 992px) {
		padding-top: 60px !important;
	}
}

.spacingL-md-60  {
	@media  (min-width: 992px) {
		padding-left: 60px !important;
	}
}

.spacingT-md-40 {
	@media  (min-width: 992px) {
		padding-top: 40px !important;
	}
}

.spacingL-md-40  {
	@media  (min-width: 992px) {
		padding-left: 40px !important;
	}
}

.spacingB-xs-20  {
	padding-bottom: 20px !important;
}

.spacingB-md-60 {
	@media  (min-width: 992px) {
		padding-bottom: 60px !important;
	}
}

.marginT-xs-32 {
margin-top: 32px;	
}

#popup-close {
    cursor: pointer;
}

.advice-popups .modal-dialog {
  max-width: 1190px !important;
	width: 100%;
}

.advice-popups .modal-body {
  overflow: scroll; 
}

.advice-popups .modal-body .modalImage {
  height: 260px;

  @media  (min-width: 992px) {
    height: 100%;
  }
}

.modal {
display: flex;
	align-items: center;
	justify-content: center;
	
	h1, h2, h3, h4 {
font-family: "Playfair Display", serif;
	}
	
	p {
font-size: 16px;
	}
}



.advice-popups .btn-close {
position: absolute;
      right: 1.5rem;
      top: 1.5rem;
      width: 40px;
    height: 40px;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid rgba(51, 51, 51, 0.20) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;

      svg {
        width: 20px;
        /* color: #141414; */

        path {
          fill: #141414;
        }
      }
}

.cover {
width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media  (min-width: 992px) {
        
     .advice-popups .btn-close {
        /* right: 2rem;
        width: 58px;
        height: 58px; */
      }

      .advice-popups .modal-body {
  overflow: hidden !important; 
}


.advice-popups .modal-body .modalImage {
  height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

    }

/* Maak de modal container flex wanneer zichtbaar (BS4 & BS5) */
.advice-popups.modal.show {
  display: flex !important;
  align-items: center;        /* verticaal centreren */
  justify-content: center;    /* horizontaal centreren */
}

/* Posities voor always-on popups */
.advice-popups.pos-bottom-left.modal.show,
.advice-popups.pos-bottom-right.modal.show {
  align-items: flex-end; /* naar onder */
  justify-content: flex-start; /* default links */
  pointer-events: none; /* laat clicks door op backdrop-niveau */
}
.advice-popups.pos-bottom-right.modal.show {
  justify-content: flex-end; /* rechts onder */
}

/* Zorg dat content nog klikbaar is, ondanks pointer-events none op container */
.advice-popups.pos-bottom-left .modal-dialog,
.advice-popups.pos-bottom-right .modal-dialog {
  pointer-events: auto;
}

/* Compacte breedte voor hoek-popups */
.advice-popups.pos-bottom-left .modal-dialog,
.advice-popups.pos-bottom-right .modal-dialog {
  max-width: 670px !important;
  margin: 16px;
}

/* Zorg dat de dialog zich mooi gedraagt binnen flex */
.advice-popups .modal-dialog {
  margin: 0;                  /* Bootstrap zet anders margins die flex-centrering verstoren */
  max-width: 100%;
}

/* Voor kleinere schermen iets ademruimte */
@media (max-width: 575.98px) {
  .advice-popups .modal-dialog {
    padding: 0.5rem;
  }
}

@media  (min-width: 992px) {
  .lsb-form-body  {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
  }
  .lsb-field-tag-email {
    width: 100%;
    margin: 0 !important;
  }
  .lsb-field-tag-voornaam, .lsb-field-tag-achternaam  {
    width: calc(50% - 10px);
    margin: 0 !important;
  }
  .lsb-form-button-and-loader-wrapper, .lsb-form-button {
    width: 100%;
    margin: 0 !important;
    border-radius: 100px !important;
  }
  
}