/* Data-attribute based tooltips (rendered by JavaScript)
 * Add to any element: data-tooltip="Tooltip text" data-tooltip-position="top|bottom|left|right"
 * Optional attributes:
 *   - data-tooltip-persistent="true" - Tooltip stays visible and has a close button
 *   - data-tooltip-wrap="true" - Allow text wrapping for longer tooltips
 *   - data-tooltip-interactive="true" - Allow clicking links inside tooltip
 *   - data-tooltip-trigger="hover|click|load" - How tooltip is triggered (default: hover, use 'load' to show on page load)
 */
.tooltip-target {
    position: relative;
}

/* The actual tooltip element (created by JavaScript) */
.tooltip-popup {
    position: absolute;
    z-index: var(--tooltip-popup-z-index, 500);
    background-color: #363636;
    color: #fff;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    /* Pointer events are required so JS can capture and intelligently prevent propagation */
    pointer-events: auto;
    cursor: default;
    /* Prevent pointer/hand cursor on tooltip body */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Allow wrapping for longer tooltips */
.tooltip-popup.tooltip-wrap {
    white-space: normal;
    width: 240px;
    max-width: 90vw;
}

/* Persistent tooltips with close button need extra padding */
.tooltip-popup.tooltip-persistent {
    padding-right: 32px;
}

/* Close button for persistent tooltips */
.tooltip-popup .tooltip-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-popup .tooltip-close-btn:hover {
    opacity: 1;
}

/* Show tooltip */
.tooltip-popup.tooltip-visible {
    opacity: 1 !important;
    visibility: visible;
}

/* Tooltip arrow */
.tooltip-popup::after {
    content: "";
    position: absolute;
    border-width: 6px;
    border-style: solid;
}

/* Position: Top */
.tooltip-popup.tooltip-position-top {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-popup.tooltip-position-top::after {
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-color: #363636 transparent transparent transparent;
}

/* Position: Bottom */
.tooltip-popup.tooltip-position-bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-popup.tooltip-position-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-color: transparent transparent #363636 transparent;
}

/* Position: Left */
.tooltip-popup.tooltip-position-left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-popup.tooltip-position-left::after {
    left: 100%;
    top: 50%;
    margin-top: -6px;
    border-color: transparent transparent transparent #363636;
}

/* Position: Right */
.tooltip-popup.tooltip-position-right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-popup.tooltip-position-right::after {
    right: 100%;
    top: 50%;
    margin-top: -6px;
    border-color: transparent #363636 transparent transparent;
}

/* Alignment modifiers for top/bottom tooltips */
.tooltip-popup.tooltip-position-top.tooltip-align-left,
.tooltip-popup.tooltip-position-bottom.tooltip-align-left {
    left: 0;
    transform: none;
}

.tooltip-popup.tooltip-position-top.tooltip-align-left::after,
.tooltip-popup.tooltip-position-bottom.tooltip-align-left::after {
    left: 12px;
    margin-left: 0;
}

.tooltip-popup.tooltip-position-top.tooltip-align-right,
.tooltip-popup.tooltip-position-bottom.tooltip-align-right {
    left: auto;
    right: 0;
    transform: none;
}

.tooltip-popup.tooltip-position-top.tooltip-align-right::after,
.tooltip-popup.tooltip-position-bottom.tooltip-align-right::after {
    left: auto;
    right: 12px;
    margin-left: 0;
}

/* Interactive tooltips */
.tooltip-popup.tooltip-interactive a {
    color: #fff;
    text-decoration: underline;
}

.tooltip-popup.tooltip-interactive a:hover {
    color: #f5f5f5;
}

/* Prevent guided tour tooltips from showing on hover - they should only show via showStep() */
[data-tour-step]:not([data-tooltip-persistent="true"]) .tooltip-popup {
    display: none !important;
}