/* Base styles for all tooltip variants */
.hover-text,
.hover-text-left,
.hover-text-right,
.hover-text-bottom {
  position: relative;
}

/* Shared tooltip styles */
.hover-text::after,
.hover-text-left::after,
.hover-text-right::after,
.hover-text-bottom::after {
  content: attr(data-text);
  position: absolute;
  background: var(--tooltip-bg, #333);
  color: #fff;
  border: 1px solid #eaebec;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  max-width: 200px;
  white-space: normal;
  word-wrap: break-word;
  font-size: 14px;
  z-index: 1000;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Transition for smooth appearance with delay */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transition-delay: 1s;
}

/* Show tooltip on hover/focus */
.hover-text:hover::after,
.hover-text:focus::after,
.hover-text-left:hover::after,
.hover-text-left:focus::after,
.hover-text-right:hover::after,
.hover-text-right:focus::after,
.hover-text-bottom:hover::after,
.hover-text-bottom:focus::after {
  opacity: 1;
  visibility: visible;
}

/* Immediate hide when not hovering */
.hover-text:not(:hover):not(:focus)::after,
.hover-text-left:not(:hover):not(:focus)::after,
.hover-text-right:not(:hover):not(:focus)::after,
.hover-text-bottom:not(:hover):not(:focus)::after {
  transition-delay: 0s;
}

/* TOP tooltip (default) */
.hover-text::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
}

/* LEFT tooltip */
.hover-text-left::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 5px;
}

/* RIGHT tooltip */
.hover-text-right::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 5px;
}

/* BOTTOM tooltip */
.hover-text-bottom::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
}