/* Stili di base per il menu */
.twitter-like-menu {
    display: none !important; /* Nasconde il menu di default */
}

@media only screen and (max-width: 768px) {
    .twitter-like-menu {
        position: fixed !important;
        bottom: 0 !important; /* L'offset verrà applicato dinamicamente tramite JavaScript */
        width: 100% !important;
        background: #000 !important;
        border-top: 1px solid #ddd !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important; /* Centra verticalmente il menu */
        z-index: 9999 !important;
        height: auto !important;
        padding: 10px 0 !important; /* Aggiungi padding verticale */
    }

    .menu-button {
        text-decoration: none !important;
        color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important; /* Imposta direzione colonna */
        align-items: center !important;
        justify-content: center !important; /* Centra verticalmente e orizzontalmente le icone e il testo */
        height: 100% !important;
        text-align: center !important; /* Centra il testo orizzontalmente */
    }

    .menu-icon {
        display: block !important; /* Assicura che l'icona sia visualizzata come blocco */
        margin-bottom: 5px !important; /* Aggiunge margine tra icona e testo */
    }

    .menu-text {
        display: block !important; /* Assicura che il testo sia visualizzato sotto l'icona */
    }

    .menu-button.icon-below .menu-icon {
        order: 2 !important; /* Posiziona l'icona sotto il testo */
        margin-bottom: 0 !important; /* Rimuove il margine inferiore dell'icona */
        margin-top: 5px !important; /* Aggiunge margine superiore all'icona */
    }

    .menu-button.icon-below .menu-text {
        order: 1 !important; /* Posiziona il testo sopra l'icona */
    }
}