/**
 * LWF Tooltip Styles
 */

/* Elements with tooltips get a special cursor */
.lwf-tooltip {
    cursor: help !important; /* Force cursor to help style */
    position: relative;
}

/* Add a subtle dotted underline to tooltip elements */
.lwf-tooltip > div {
    display: inline-block;
    width: auto !important;
    padding: 0 !important;
    margin: 5px 5px 0 5px !important;
    border-bottom: 1px dotted var(--wp--preset--color--brand-teal-600);
}

/* Optional visual indicator that an element has a tooltip */
.lwf-tooltip.with-indicator {
    border-bottom: 1px dotted #666;
}

/* The tooltip popup itself */
.lwf-tooltip-popup {
    position: fixed;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 300px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    pointer-events: none; /* Allow clicking through the tooltip */
    transition: opacity 0.3s ease; /* Smooth fade transition */
    line-height: 1.4;
}

/* Optional arrow for the tooltip */
.lwf-tooltip-popup.with-arrow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

/* Hide elements that contain tooltip content by default */
[id^="tooltip-content-"],
[class*="tooltip-content-"] {
    display: none !important; /* Force hiding */
}

/* Use more specific selectors to ensure tooltips in tables display properly */
table .lwf-tooltip {
    cursor: help !important;
    display: inline-block;
}

/* Handle different table plugins that might override cursor */
.rv_tb-cell .lwf-tooltip,
.tablepress .lwf-tooltip,
.wp-block-table .lwf-tooltip {
    cursor: help !important;
}