/* Accessible tooltips for interactive elements */

.has-tooltip {
    position: relative;
}

.tooltip-box {
    position: absolute;
    z-index: 10000;
    padding: 6px 10px;
    background: rgba(0, 5, 9, 0.89);
    color: #FCFCFD;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

.tooltip-box::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
}

/* Tooltip above trigger (default) */
.tooltip-box:not(.tooltip-below)::after {
    top: 100%;
    border-color: rgba(0, 5, 9, 0.89) transparent transparent transparent;
}

/* Tooltip below trigger */
.tooltip-box.tooltip-below::after {
    bottom: 100%;
    border-color: transparent transparent rgba(0, 5, 9, 0.89) transparent;
}

.tooltip-box.tooltip-visible {
    opacity: 1;
    visibility: visible;
}