dialog {
    border: none;
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 320px;
    max-width: 480px;
    font-family: Arial, Tahoma;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    animation: dialogFadeIn 0.25s ease-out;
    margin:auto;
}

 
    dialog[open] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;  
    }


 
    dialog::backdrop {
        background: rgba(0, 0, 0, 0.45);
    }

 
    dialog p {
        margin: 0 0 16px 0;
        font-size: 16px;
        color: #333;
    }

 
    dialog button {
        padding: 8px 18px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
    }
 
    dialog .btn {
        color: black;
    }

        dialog .btn:hover {
            background: #c9302c;
        }

 
@keyframes dialogFadeIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}