/* Gradient overlay: darker at top, fades out */
.notification-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    display: none;
    justify-content: center;
    align-items: end;
    /* ✅ bottom center now */
    padding-bottom: 7rem;
    z-index: 1055;
    opacity: 0;
}


/* Notification card */
.notification {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    min-width: 320px;
    max-width: 400px;
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.4s ease;
}

/* When active */
.notification-overlay.show {
    display: flex;
    opacity: 1;
}

.notification-overlay.show .notification {
    transform: translateY(0);
    opacity: 1;
}