.thema-avatar-wrap{ position:relative; display:inline-block; width:auto; }
.thema-avatar-anchor{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: calc(100% - var(--avatar-overlap, 12px));
  width: var(--avatar-width, 90px);
  height:var(--avatar-height,auto);
  pointer-events:none; z-index:10;
}
.thema-avatar{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:100%; height:auto; transition:opacity .6s ease;
}
.thema-bubble{
  position:absolute; max-width:320px; padding:10px 14px; background:#fff;
  border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12);
  font-size:14px; line-height:1.3; text-align:center; opacity:0; z-index:11;
}
.thema-bubble:after{ content:""; position:absolute; border-style:solid; }
.thema-bubble.pos-top{ left:50%; transform:translateX(-50%); bottom:calc(100% + var(--bubble-margin,12px)); }
.thema-bubble.pos-top:after{ left:50%; transform:translateX(-50%); bottom:-8px; border-width:8px 8px 0 8px; border-color:#fff transparent transparent transparent; }
.thema-bubble.pos-left{ right:calc(100% + var(--bubble-margin,12px)); top:35%; transform:translateY(-50%); }
.thema-bubble.pos-left:after{ right:-8px; top:50%; transform:translateY(-50%); border-width:8px 0 8px 8px; border-color:transparent transparent transparent #fff; }
.thema-bubble.pos-right{ left:calc(100% + var(--bubble-margin,12px)); top:50%; transform:translateY(-50%); }
.thema-bubble.pos-right:after{ left:-8px; top:50%; transform:translateY(-50%); border-width:8px 8px 8px 0; border-color:transparent #fff transparent transparent; }

/* Variant: geslaagde/OK ballon */
/*
.thema-bubble.ok{
  background: #e8fff0;
  border: 1px solid #17c964;
  color: #0b8242;
}

.thema-bubble.ok.pos-top:after{
  border-color: #e8fff0 transparent transparent transparent;
}
.thema-bubble.ok.pos-left:after{
  border-color: transparent transparent transparent #e8fff0;
}
.thema-bubble.ok.pos-right:after{
  border-color: transparent #e8fff0 transparent transparent;
}
*/
/* Optioneel: duimpje ietsje groter + marge */
.thema-bubble .thumb{
  margin-left: .35em;
  font-size: 1.05em;
}



/* Badge die de ballon vervangt na keuze */
.thema-badge{
  position: absolute;
  padding: 8px 12px;
  background: #e8fff0;
  border: 1px solid #17c964;
  color: #0b8242;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  opacity: 0; /* start hidden, JS fade-in */
  z-index: 12;
  white-space: nowrap;
}
.thema-badge .thumb{
  font-size: 16px; line-height: 1;
}

/* Badge op dezelfde plekken als de ballon (t.o.v. het poppetje) */
.thema-badge.pos-top{
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + var(--bubble-margin, 12px));
}
.thema-badge.pos-left{
  right: calc(100% + var(--bubble-margin, 12px));
  top: 50%;
  transform: translateY(-50%);
}
.thema-badge.pos-right{
  left: calc(100% + var(--bubble-margin, 12px));
  top: 50%;
  transform: translateY(-50%);
}


.wta-tooltip{ background:#ffe7b3; color:#222; border:1px solid #e5c800; border-radius:6px; padding:6px 10px; font-size:14px; box-shadow:0 3px 10px rgba(0,0,0,.1); white-space:nowrap; }

.wta-tooltip::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-style: solid;
  border-color: transparent #ffe7b3 transparent transparent;
}


@media (max-width:480px){ .thema-bubble{ max-width:70vw; font-size:13px; } }