.favorite-icon-container {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 999;

    .fa {
        transition: all 0.1s ease-in-out;
        font-size: 30px;
        color: #fff;
        cursor: pointer;

        &:hover {
            transform: scale(1.1);
        }

        &.fa-heart {
            color: var(--primary);
        }
    }

    &.primary {
        .fa {
            color: var(--primary);
        }
    }

    .favorite-tooltip {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        pointer-events: none;
        max-width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;

        &::before {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid rgba(0, 0, 0, 0.9);
        }

        &.show {
            opacity: 1;
        }
    }
}