/* === 🔹 Keridan Tooltip Framework === */
/* Root variables already declared elsewhere */
:root {
    --keridan-cyan: #00e5ff;
    --keridan-blue: #0a192f;
    --keridan-dark: #0e223f;
    --keridan-orange: #ff8800;
    --keridan-yellow: #ffcc00;
    --keridan-glass: rgba(255, 255, 255, 0.08);
    --keridan-border: rgba(255, 255, 255, 0.18);
    --keridan-text: #dadada;
}

/* === Tooltip container === */
.keridan-tooltip {
    position: absolute;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--keridan-text);
    background: rgba(15, 20, 25, 0.9);
    border: 1px solid rgba(0,229,255,0.25);
    box-shadow: 0 0 10px rgba(0,229,255,0.25);
    padding: 4px 8px;
    border-radius: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
    z-index: 3000;
    transition: opacity 0.25s ease;
}

/* Positioning helpers */
[data-tip]:hover .keridan-tooltip,
.has-tooltip:hover .keridan-tooltip {
    opacity: 1;
    animation: keridanSlideFade 0.25s ease forwards;
}

/* Arrow */
.keridan-tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0,229,255,0.25) transparent transparent transparent;
}

/* === Colour Variants === */
.keridan-tooltip-orange {
    border-color: var(--keridan-orange);
    box-shadow: 0 0 12px rgba(255,136,0,0.45);
    color: var(--keridan-orange);
}

.keridan-tooltip-yellow {
    border-color: var(--keridan-yellow);
    box-shadow: 0 0 12px rgba(255,204,0,0.45);
    color: var(--keridan-yellow);
}

.keridan-tooltip-cyan {
    border-color: var(--keridan-cyan);
    box-shadow: 0 0 12px rgba(0,229,255,0.45);
    color: var(--keridan-cyan);
}

.keridan-tooltip-red {
    border-color: #ff5b5b;
    box-shadow: 0 0 12px rgba(255,91,91,0.45);
    color: #ff5b5b;
}

.keridan-tooltip-green {
    border-color: #4dff8b;
    box-shadow: 0 0 12px rgba(77,255,139,0.45);
    color: #4dff8b;
}

/* === Animations === */
@keyframes keridanSlideFade {
    from {
        opacity: 0;
        transform: translate(-50%, -120%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -100%);
    }
}

/* Optional subtle glow pulse for attention */
@keyframes keridanPulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(255,136,0,0.3);
    }

    50% {
        box-shadow: 0 0 16px rgba(255,136,0,0.8);
    }
}