/* Tooltip Highlighter Styles */
.tooltip-highlight {
    cursor: pointer; /* Change pointer to a finger */
    position: relative; /* Enable positioning for the tooltip */
}

.tooltip-highlight::after {
    content: attr(data-tooltip); /* Tooltip text */
    position: absolute;
    bottom: 125%; /* Position the tooltip above the word */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Tooltip background color */
    color: #fff; /* Tooltip text color */
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    visibility: hidden; /* Tooltip is hidden by default */
    opacity: 0; /* Fully transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    pointer-events: none; /* Prevent hover interactions */
}

.tooltip-highlight::before {
    content: '';
    position: absolute;
    bottom: 120%; /* Adjust to align with tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px; /* Size of the triangle */
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Triangle matches tooltip background */
    visibility: hidden; /* Triangle is hidden by default */
    opacity: 0; /* Fully transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.tooltip-highlight.tooltip-visible::after,
.tooltip-highlight.tooltip-visible::before {
    visibility: visible; /* Make tooltip and triangle visible */
    opacity: 1; /* Fully opaque */
}