/**
 * WIZ v2: Custom Tooltip
 *
 * The panel is fixed-positioned at runtime by custom-tooltip.js (it reads the
 * trigger rect and writes top/left + an arrow offset). CSS owns appearance,
 * the show/hide transition, and the arrow geometry per position.
 */

.wiz-custom-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    /* Hidden until JS opens it. visibility (not display:none) so we can measure it. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.wiz-custom-tooltip.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.wiz-custom-tooltip__box {
    position: relative;
    box-sizing: border-box;
    max-width: 90vw;
    overflow: auto;
    background-color: #ffffff;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.wiz-custom-tooltip__content > * {
    margin: 0;
}

/* ----------------------------------------------------------------------------
 * Arrow
 * A rotated square that visually merges with the box. JS sets its inline
 * left/right offset for the corner (left/right) variants; CSS centers it for
 * the plain top/bottom variants.
 * ------------------------------------------------------------------------- */
.wiz-custom-tooltip__arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    transform: rotate(45deg);
    pointer-events: none;
}

.wiz-custom-tooltip[data-show-arrow="0"] .wiz-custom-tooltip__arrow {
    display: none;
}

/* Bottom variants: tooltip is BELOW the trigger, so the arrow sits on the TOP edge.
 * Clip to the OUTWARD (upward-pointing) half only. The rotated square's inner
 * half would otherwise overlap the box; on a solid background that's invisible,
 * but over a gradient it paints as an odd solid patch. Clipping along the
 * diamond's horizontal centerline (local anti-diagonal x+y=100%) leaves a clean
 * triangle whose flat base meets the box edge seamlessly. */
.wiz-custom-tooltip--bottom .wiz-custom-tooltip__arrow,
.wiz-custom-tooltip--bottom-left .wiz-custom-tooltip__arrow,
.wiz-custom-tooltip--bottom-right .wiz-custom-tooltip__arrow {
    top: -6px;
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
            clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Top variants: tooltip is ABOVE the trigger, so the arrow sits on the BOTTOM edge.
 * Keep the OUTWARD (downward-pointing) half only — same rationale as above. */
.wiz-custom-tooltip--top .wiz-custom-tooltip__arrow,
.wiz-custom-tooltip--top-left .wiz-custom-tooltip__arrow,
.wiz-custom-tooltip--top-right .wiz-custom-tooltip__arrow {
    bottom: -6px;
    -webkit-clip-path: polygon(100% 100%, 100% 0, 0 100%);
            clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

/* Centered arrow for the plain top/bottom variants. The corner variants get
 * their horizontal offset from JS (inline style) so the arrow lands over the
 * trigger center. */
.wiz-custom-tooltip--top .wiz-custom-tooltip__arrow,
.wiz-custom-tooltip--bottom .wiz-custom-tooltip__arrow {
    left: 50%;
    margin-left: -6px;
}

/* ----------------------------------------------------------------------------
 * Editor preview: render in-flow, no fixed positioning / overlay.
 * ------------------------------------------------------------------------- */
.wiz-custom-tooltip--editor {
    position: relative;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    display: inline-block;
}

.wiz-custom-tooltip--editor .wiz-custom-tooltip__arrow {
    display: none;
}