/* tooltip.css */

.tooltip-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .tooltip-container .tooltip {
        display: none;
        position: absolute;
        top: 65%; /* position below the target element */
        left: 0;
        background-color: #333;
        color: #fff;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.85rem;
        margin-top: 12px; /* extra space for the arrow */
        z-index: 999;
        white-space: nowrap;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

        .tooltip-container .tooltip::before {
    content: "";
    position: absolute;
    top: -6px; /* place arrow above the tooltip box */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    z-index: 1100; /* ensure it's above */
}

    /* Optional utility class to toggle tooltip */
    .tooltip-container.show-tooltip .tooltip {
        display: block;
    }