/* Container voor de tooltip */
.spotzi-tooltip {
  position: relative;
  display: inline;
  cursor: pointer;
}

.click-text-spotzi-tooltip {
  display: inline;           /* zodat border niet hele regel neemt */
  border-bottom: 1px dashed #777777; /* dunne, grijze stippellijn */
  padding-bottom: 2px;       /* optionele afstand tussen tekst en lijn */
}

.spotzi-tooltip-title {
  color: var(--color-primary);
  font-size: 1rem;
  font-family: 'Inter Bold', sans-serif;
}

/* Tooltiptekst zelf */
.spotzi-tooltip .spotzi-tooltiptext {
  visibility: hidden;
  background-color: var(--color-bg-100);
  color: var(--color-text-000);
  text-align: left;
  border-radius: 6px;
  padding: 12px;
  font-size: 0.8em;
  border: #777777 0.5px solid;
  
  /* Tooltip positioned on the right side of the button */
  position: absolute;
  z-index: 1;
  
  /* Animation */
  opacity: 0;
  transition: opacity 0.3s;
}

/* BEGIN MOBILE RESPONSIVENESS */
@media (max-width: 480px) {
.spotzi-tooltip .spotzi-tooltiptext {
  width: 50vw;
  left: 5%;
  transform: translateY(10%);
}
}

@media (min-width: 480px) and (max-width: 800px) {
.spotzi-tooltip .spotzi-tooltiptext {
  width: 50vw;
  left: 5%;
  transform: translateY(10%);
}
}

@media (min-width: 800px) {
.spotzi-tooltip .spotzi-tooltiptext {
  width: 30vw;
  left: 15%;
  transform: translateY(10%);
}
}

/* Tooltip visible on hover */
.spotzi-tooltip:hover .spotzi-tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Arrow left-side tooltip */
/*.spotzi-tooltip .spotzi-tooltiptext::before {*/
/*  content: ''; */
/*  position: absolute; */
/*  top: 45%; */
/*  left: -10px; */
/*  transform: translateY(-50%); */
/*  border-width: 6px; */
/*  border-style: solid; */
/*  border-color: transparent #333333 transparent transparent; */
/*} */