/**************************
   NOTIFICATIONS — OCEAN GLASS
**************************/
.notifications-container {
    position: fixed;
    top: 68px;
    right: 25px;
    z-index: 1204;
    display: flex;
    flex-direction: column;
    gap: 0.65em;
    max-width: 98vw;
    pointer-events: none;
}

.notification {
    display: flex;
    align-items: center;
    gap: 0.63em;
    background: var(--glass-bg, rgba(24,145,195,0.18));
    border: 1.2px solid var(--glass-border, rgba(24,145,195,0.19));
    box-shadow: 0 4px 22px 0 rgba(24,145,195,0.15), 0 1px 6px 0 rgba(24,145,195,0.07);
    border-radius: var(--radius-xl, 1.2em);
    padding: 0.7em 1.25em 0.7em 0.92em;
    min-width: 210px;
    max-width: 340px;
    color: var(--ocean-dark, #085177);
    font-size: 1em;
    font-weight: 500;
    pointer-events: all;
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    animation: notifIn 0.33s cubic-bezier(.7,-0.35,.4,1.15) forwards;
    position: relative;
    transition: opacity 0.22s, box-shadow 0.18s, transform 0.19s;
}

@keyframes notifIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97);}
    to { opacity: 1; transform: translateY(0) scale(1);}
}
.notification.removing {
    opacity: 0;
    transform: translateY(-18px) scale(0.92);
    transition: opacity 0.22s, transform 0.19s;
}

.notification-message {
    flex: 1 1 auto;
    line-height: 1.4;
    word-break: break-word;
    font-size: 1em;
    padding-right: 0.55em;
}

.notification-close {
    background: none;
    border: none;
    color: var(--ocean-main, #1891c3);
    font-size: 1.17em;
    font-weight: bold;
    cursor: pointer;
    padding: 0.05em 0.3em;
    margin-left: 0.2em;
    border-radius: 50%;
    transition: background 0.11s, color 0.11s;
    outline: none;
}
.notification-close:hover {
    background: var(--ocean-light, #b6efff);
    color: var(--ocean-dark, #085177);
}

.notification.info {
    border-left: 4.5px solid #1891c3;
}
.notification.success {
    border-left: 4.5px solid #11ba66;
}
.notification.error {
    border-left: 4.5px solid #ea5757;
}
.notification.warning {
    border-left: 4.5px solid #ffd25a;
}

@media (max-width: 600px) {
    .notifications-container {
        right: 2vw;
        top: 58px;
        max-width: 98vw;
    }
    .notification {
        max-width: 96vw;
        min-width: 0;
        font-size: 0.98em;
        padding: 0.52em 0.6em 0.52em 0.72em;
    }
}

/* Ocean emoji icons */
.notification.info:before {
    content: "ℹ️";
    margin-right: 0.39em;
    font-size: 1.1em;
}
.notification.success:before {
    content: "✅";
    margin-right: 0.39em;
    font-size: 1.1em;
}
.notification.error:before {
    content: "⛔";
    margin-right: 0.39em;
    font-size: 1.1em;
}
.notification.warning:before {
    content: "⚠️";
    margin-right: 0.39em;
    font-size: 1.1em;
}
body.dark-mode .notification,
[data-theme="dark"] .notification {
    background: rgba(30,40,55,0.83);
    color: #e7faff;
    border: 1.2px solid #22323c;
}
body.dark-mode .notification.info:before { content: "ℹ️"; }
body.dark-mode .notification.success:before { content: "✅"; }
body.dark-mode .notification.error:before { content: "⛔"; }
body.dark-mode .notification.warning:before { content: "⚠️"; }