/* Bottone di successo con animazione integrata */
.bubble-button-success {
    padding: 20px 25px;
    background-color: rgb(255, 255, 255);
    color: rgb(65, 6, 255);
    border: 2px solid rgb(249, 249, 249);
    box-shadow: 0px 4px 6px rgba(65, 6, 255, 0.3);
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.1em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin: 15px;
}

    .bubble-button-success:hover {
        background-color: rgb(65, 6, 255);
        color: #fff;
        transform: translateY(-5px);
        box-shadow: 0px 12px 14px rgba(65, 6, 255, 0.4);
    }

        .bubble-button-success:hover .material-symbols-outlined {
            color: white;
            transform: scale(1.1);
        }

/* Animazione all'interno del bottone */
.css-animation-completed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    /* Cerchio animato */
    .css-animation-completed .circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid #05FFA0;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        transform: scale(1);
        animation: pulseCircle 2s infinite ease-in-out;
    }

    /* Spunta di Google Icon */
    .css-animation-completed .checkmark {
        font-size: 5rem;
        color: #05FFA0;
        opacity: 1;
        transform: scale(1);
        animation: pulseCheckmark 2s infinite ease-in-out;
    }

    /* Stile del titolo (bold) */
    .css-animation-completed .message {
        margin-top: 15px;
        font-size: 1.3rem;
        color: rgb(65, 6, 255);
        font-weight: bold;
        transition: color 0.3s ease;
    }

    /* Sottotitolo in regular */
    .css-animation-completed .subtitle {
        margin-top: 5px;
        font-size: 1rem;
        color: #666;
        font-weight: 400;
        transition: color 0.3s ease;
    }

/* Effetto hover per il testo */
.bubble-button-success:hover .message {
    color: white;
}

.bubble-button-success:hover .subtitle {
    color: #ccc;
}

/* Animazione del cerchio */
@keyframes pulseCircle {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Animazione della spunta */
@keyframes pulseCheckmark {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Media query per dispositivi mobili */
@media (max-width: 514px) {
    .css-animation-completed .circle {
        width: 100px; /* Dimensione ridotta per il cerchio */
        height: 100px;
        border-width: 3px; /* Spessore del bordo ridotto */
    }

    .css-animation-completed .checkmark {
        font-size: 3rem; /* Dimensione ridotta per la spunta */
    }

    .css-animation-completed .message {
        font-size: 1.2rem; /* Testo leggermente pił piccolo */
    }

    .css-animation-completed .subtitle {
        font-size: 1rem; /* Testo leggermente pił piccolo */
    }
}

/*Animazione rifiuto*/

/* Bottone di rifiuto con animazione integrata */
.bubble-button-refuse {
    padding: 20px 25px;
    background-color: rgb(255, 255, 255);
    color: #ff0505;
    border: 2px solid rgb(249, 249, 249);
    box-shadow: 0px 4px 6px rgba(255, 5, 5, 0.3);
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.1em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin: 15px;
}

    .bubble-button-refuse:hover {
        background-color: #ff0505;
        color: white;
        transform: translateY(-5px);
        box-shadow: 0px 12px 14px rgba(255, 5, 5, 0.4);
    }

        .bubble-button-refuse:hover .material-symbols-outlined {
            color: white;
            transform: scale(1.1);
        }

/* Animazione all'interno del bottone di rifiuto */
.css-animation-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    /* Cerchio animato per il rifiuto */
    .css-animation-failed .circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid #ff0505; /* Bordi rossi */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        transform: scale(1);
        animation: pulseCircle 2s infinite ease-in-out;
        transition: border-color 0.3s ease;
    }

.bubble-button-refuse:hover .circle {
    border-color: white; /* Cambia solo il colore del bordo a bianco */
}

.css-animation-failed .closemark {
    font-size: 5rem;
    color: #ff0505;
    opacity: 1;
    transform: scale(1);
    animation: pulseCheckmark 2s infinite ease-in-out;
}

.bubble-button-refuse:hover .closemark {
    color: white;
}

/* Stile del titolo (bold) */
.css-animation-failed .message {
    margin-top: 15px;
    font-size: 1.3rem;
    color: #ff0505;
    font-weight: bold;
    transition: color 0.3s ease;
}

/* Sottotitolo in regular */
.css-animation-failed .subtitle {
    margin-top: 5px;
    font-size: 1rem;
    color: #666;
    font-weight: 400;
    transition: color 0.3s ease;
}

.bubble-button-refuse:hover .message {
    color: white;
}

.bubble-button-refuse:hover .subtitle {
    color: #ccc;
}

/* Animazione del cerchio */
@keyframes pulseCircle {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Animazione della spunta (icona di chiusura in questo caso) */
@keyframes pulseCheckmark {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Media query per dispositivi mobili */
@media (max-width: 514px) {
    .css-animation-failed .circle {
        width: 100px; /* Dimensione ridotta per il cerchio */
        height: 100px;
        border-width: 3px; /* Spessore del bordo ridotto */
    }

    .css-animation-failed .closemark {
        font-size: 3rem; /* Dimensione ridotta per la spunta */
    }

    .css-animation-failed .message {
        font-size: 1.2rem; /* Testo leggermente pił piccolo */
    }

    .css-animation-failed .subtitle {
        font-size: 1rem; /* Testo leggermente pił piccolo */
    }
}



/*Animazione email notifica*/

.bubble-button-send-animation {
    padding: 20px 25px;
    background-color: rgb(255, 255, 255);
    color: rgb(65, 6, 255);
    border: 2px solid rgb(249, 249, 249);
    box-shadow: 0px 4px 6px rgba(65, 6, 255, 0.3);
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.1em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin: 15px;
}

    .bubble-button-send-animation:hover {
        background-color: rgb(65, 6, 255);
        color: #fff;
        transform: translateY(-5px);
        box-shadow: 0px 12px 14px rgba(65, 6, 255, 0.4);
    }


/* Bottone con animazione send */
.bubble-button-send-animation {
    padding: 20px 25px;
    background-color: #fff; /* Bianco di default */
    color: #4106FF; /* Testo e icona blu di default */
    border: 2px solid rgba(249, 249, 249, 0.9);
    box-shadow: 0px 4px 6px rgba(65, 6, 255, 0.3);
    text-align: center; /* Allinea tutto al centro */
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    flex-direction: column; /* Disposizione verticale */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    margin: 15px;
    width: auto;
}

    /* Hover sul bottone: sfondo blu e testo bianco */
    .bubble-button-send-animation:hover {
        background-color: #4106FF; /* Sfondo blu durante l'hover */
        color: #fff; /* Testo e icona bianchi */
        transform: translateY(-5px);
        box-shadow: 0px 12px 14px rgba(65, 6, 255, 0.4);
    }

/* Contenitore per l'animazione pił grande */
.animation-notification-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px; /* Aumentata dimensione dell'animazione */
    height: 90px;
    border: 2px solid #4106FF; /* Cerchio blu di default */
    border-radius: 50%;
    margin-bottom: 15px; /* Spazio tra l'animazione e il testo */
    transition: all 0.3s ease;
}

    /* Icona animata, blu di default */
    .animation-notification-button .material-icons {
        color: #4106FF; /* Icona blu di default */
        font-size: 50px; /* Icona pił grande */
        transition: color 0.3s ease, transform 0.3s ease;
    }

/* Hover sul bottone: l'animazione diventa bianca */
.bubble-button-send-animation:hover .animation-notification-button {
    border-color: #fff; /* Cerchio bianco durante l'hover */
}

    .bubble-button-send-animation:hover .animation-notification-button .material-icons {
        color: #fff; /* Icona bianca durante l'hover */
        animation: animation-notification-send 1.2s ease-in-out infinite;
    }

/* Keyframes per l'animazione dell'icona "send" */
@keyframes animation-notification-send {
    0% {
        transform: translateX(0); /* Inizio dell'animazione, icona al centro */
    }

    40% {
        transform: translateX(100px); /* L'icona esce verso destra */
        opacity: 0; /* Scompare una volta superato il bordo */
    }

    60% {
        transform: translateX(-100px); /* L'icona rientra da sinistra */
        opacity: 0; /* Ancora nascosta */
    }

    100% {
        transform: translateX(0); /* L'icona torna al centro */
        opacity: 1; /* Riapparizione al centro */
    }
}

/* Testo principale del pulsante */
.bubble-button-send-animation .message {
    font-size: 1.3rem; /* Dimensione del testo */
    margin-bottom: 10px; /* Spazio pił bilanciato tra il testo principale e il sottotitolo */
}

/* Testo secondario (subtitle), grigio scuro di default */
.bubble-button-send-animation .subtitle {
    font-size: 0.9rem; /* Testo pił piccolo per il sottotitolo */
    color: rgba(105, 105, 105, 0.9); /* Grigio scuro di default */
    transition: color 0.3s ease;
    margin-top: 5px; /* Aggiunta di margine sopra il sottotitolo */
}

/* Hover sul bottone: il sottotitolo diventa grigio chiaro */
.bubble-button-send-animation:hover .subtitle {
    color: rgba(211, 211, 211, 1); /* Grigio chiaro durante l'hover */
}

/* Regola per i dispositivi mobili */
@media (max-width: 768px) {
    .animation-notification-button {
        width: 70px; /* Dimensione ridotta per i dispositivi mobili */
        height: 70px;
    }

        .animation-notification-button .material-icons {
            font-size: 40px; /* Riduzione della dimensione dell'icona sui dispositivi mobili */
        }
}