/* Extraído de css/_components.css (carrega logo depois dele — mesma posição na cascata). */
/* =============================================================
   TOOLTIPS (data-tooltip)
   ============================================================= */
.flowly-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    background: rgba(8, 9, 14, 0.96);
    color: var(--flowly-text-primary);
    font-size: calc(11.5px * var(--flowly-text-k));
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 9px;
    border-radius: calc(6px * var(--flowly-radius-k));
    border: 1px solid var(--flowly-border-subtle);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center bottom;
    max-width: 280px;
    white-space: normal;
}
.flowly-tooltip--visible {
    display: block;
}
.flowly-tooltip--show {
    opacity: 1;
}

.flowly-tooltip__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(8, 9, 14, 0.96);
    border: 1px solid var(--flowly-border-subtle);
    transform: rotate(45deg);
}
.flowly-tooltip[data-pos="top"] .flowly-tooltip__arrow {
    bottom: -5px;
    border-top: none;
    border-left: none;
}
.flowly-tooltip[data-pos="bottom"] .flowly-tooltip__arrow {
    top: -5px;
    border-bottom: none;
    border-right: none;
}
.flowly-tooltip[data-pos="left"] .flowly-tooltip__arrow {
    right: -5px;
    border-left: none;
    border-bottom: none;
}
.flowly-tooltip[data-pos="right"] .flowly-tooltip__arrow {
    left: -5px;
    border-right: none;
    border-top: none;
}