/* Tooltip */

.tooltip{
    position:relative;
    display:inline-block;
    cursor:help;

    color:#AD0000;
    font-weight:500;

    border-bottom:2px dotted #FFD600;
    transition:all .2s ease;
}

.tooltip:hover{

    color:var(--accent);
    border-bottom-color:var(--heading);
    background: #F6EDB3;
}

.tooltip-box {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(8px);

    width: 350px;
    padding: 16px 18px;

    background: #F6EDB3;
    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 1000;
}

.tooltip:hover .tooltip-box,
.tooltip:focus-within .tooltip-box {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tooltip-box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);

    border-width: 8px;
    border-style: solid;
    border-color: #FFF8CC transparent transparent transparent;
}


.tooltip-box img 
{border-radius: 4px;
margin-bottom: 12px;}



.tooltip-title{
    display:block;
    font-family:"Clash Display", sans-serif;
    font-size:18px;
    font-weight:600;
    color:var(--heading);
    margin-bottom:4px;
}

.tooltip-text{
    display:block;
    font-size:15px;
    line-height:1.4;
    color:var(--text);
}

@media (max-width:768px){

    .tooltip-box{
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: 20px;
        width: auto;
        transform: translateY(20px);
    }

    .tooltip:hover .tooltip-box,
    .tooltip:focus-within .tooltip-box{
        transform: translateY(0);
    }

    .tooltip-box::after{
        display:none;
    }

}