/* Typography default if not overridden by Elementor controls */
.tooltip-paragraph {
    font-family: 'Merriweather', 'Georgia', serif;
    line-height: 1.8;
}

/* Base Wrapper for Highlight and Tooltip */
.tooltip-paragraph .tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The Highlighted Text */
.tooltip-paragraph .highlight-word {
    background-color: #fcf3c2; /* Light Yellow */
    padding: 0.1em 0.3em;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.tooltip-wrapper:hover .highlight-word {
    filter: brightness(0.95);
}

/* Tooltip Popup Base */
.tooltip-paragraph .tooltip-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 150px;
    height: auto;
    object-fit: cover;
    z-index: 100;
    pointer-events: none;
    border-radius: 8px; /* Default rounding */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
}

/* Animations */

/* 1. Scale Up (Default) */
.anim-effect-scale .tooltip-popup {
    transform: translateX(-50%) scale(0.8);
    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.3s;
}

.anim-effect-scale .tooltip-wrapper:hover .tooltip-popup {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* 2. Fade In */
.anim-effect-fade .tooltip-popup {
    transition: opacity 0.3s ease, visibility 0.3s;
}

.anim-effect-fade .tooltip-wrapper:hover .tooltip-popup {
    visibility: visible;
    opacity: 1;
}

/* 3. Slide Up */
.anim-effect-slide .tooltip-popup {
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.anim-effect-slide .tooltip-wrapper:hover .tooltip-popup {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}