/*!
 * © 2025 Anton O. — harkushyn.com
 * Proprietary license. Viewing and execution allowed only when the
 * script is delivered from https://harkushyn.com. Any reproduction,
 * modification, distribution or embedding elsewhere is strictly
 * prohibited without prior written consent.
*/


/* Tooltip Container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip Text */
.tooltip::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(51, 51, 51); /* Background color of the tooltip */
    color: #fff; /* Text color */
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.1s ease;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Light shadow for better visibility */
}

/* Tooltip Arrow */
.tooltip::before {
    position: absolute;
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* Tooltip Visible on Hover */
.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
}



/* Tooltip Container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip Text */
.tooltip::after {
    content: attr(data-title);
    position: absolute;
    top: 120%; /* Position the tooltip below the element */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Background color of the tooltip */
    color: #fff; /* Text color */
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Light shadow for better visibility */
}

/* Tooltip Arrow */
.tooltip::before {
    content: "";
    position: absolute;
    top: 100%; /* Position the arrow below the element */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Arrow pointing up */
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
    z-index: 10;
}

/* Tooltip Visible on Hover */
.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
    top: 130%; /* Adjusted position to ensure tooltip does not overlap with the element */
}