/* Στυλ για το ίδιο το tooltip */
.custom-article-tooltip {
    display: none;  
    position: absolute;     
    top: 110% !important;      
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: rgb(51, 51, 51);
    color: white !important;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: normal;
    width: 800px !important; /* Το μέγεθος που θέλεις */
    line-height: 1.4;
    z-index: 10000; /* Ψηλό z-index για να μην κρύβεται */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-align: left;
}

/* Ενεργοποίηση με Hover (δουλεύει και για τις δύο κλάσεις) */
.article-tooltip-trigger {
    position: relative;
}
.modification-link {
    position: relative;
}

.article-tooltip-trigger:hover .custom-article-tooltip,
.modification-link:hover .custom-article-tooltip {
    display: block !important;
}

@media (max-width: 768px) {
    .custom-article-tooltip {
        width: 90vw !important;     /* Πιάνει το 90% του πλάτους της οθόνης του κινητού */
        left: 5% !important;        /* Το ευθυγραμμίζει να ξεκινάει κοντά στην αριστερή άκρη */
        transform: none !important; /* Ακυρώνει το translateX για να μην κεντράρεται περίεργα */
        box-sizing: border-box;
    }
	
	/* Ακυρώνουμε το CSS hover στα κινητά για να ελέγχει η JS πότε θα φανεί */
    .article-tooltip-trigger:hover .custom-article-tooltip,
    .modification-link:hover .custom-article-tooltip {
        display: none !important;
    }
}