/* Styles needed for the AI image overlay */

.image-wrapper {
    display: inline-block;
    position: relative;
}

    .image-wrapper img.main-img {
        display: block;
        height: 100%;
        width: 100%;
    }

.overlay-AI-icon {
    background: url('../images/AI-icon.png') no-repeat center center;
    background-size: cover;
    bottom: 0;
    cursor: pointer;
    height: 10px;
    position: absolute;
    right: 0;
    width: 10px;
}

.custom-tooltip-bottomRight {
    display: none;
    position: absolute;
    top: 110%; /* Moves tooltip below the icon */
    left: 110%; /* Moves tooltip to the right of the icon */
    background-color: #353535; /* rgba(0, 0, 0, 0.85); */
    color: white;
    padding: 5px 8px;
    font-size: 11px;
    white-space: normal;
    border-radius: 4px;
    width: max-content;
    max-width: 260px;
    text-align: left;
    z-index: 10;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.custom-tooltip-topLeft {
    display: none;
    position: absolute;
    bottom: 110%; /* Moves tooltip above the icon */
    right: 110%; /* Moves tooltip to the left of the icon */
    background-color: #353535; /* rgba(0, 0, 0, 0.85); */
    color: white;
    padding: 5px 8px;
    font-size: 11px;
    white-space: normal;
    border-radius: 4px;
    width: max-content;
    max-width: 260px;
    text-align: left;
    z-index: 10;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.overlay-AI-icon:hover .custom-tooltip-bottomRight {
    display: block;
}

.overlay-AI-icon:hover .custom-tooltip-topLeft {
    display: block;
}