/* Container */
.spop-container {
    position: fixed;
    z-index: 9999;
    width: auto;
    max-width: 90%;
    pointer-events: none;
}

/* Positions */
.spop-container.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.spop-container.bottom-left {
    bottom: 20px;
    left: 20px;
}

.spop-container.bottom-right {
    bottom: 20px;
    right: 20px;
}

/* Notification */
.spop {
    background: #1a1a1a;
    color: #fff;
    padding: 14px 18px;
    margin-top: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    min-width: 260px;
    max-width: 320px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    animation: spopFadeIn 0.4s ease forwards;
    pointer-events: auto;
}

/* Success style (green theme) */
.spop.success {
    background: linear-gradient(135deg, #2d8c2d, #4caf50);
    color: #fff;
}

/* Error */
.spop.error {
    background: #e53935;
}

/* Info */
.spop.info {
    background: #2196f3;
}

/* Fade in animation */
@keyframes spopFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fade out */
.spop.fade-out {
    animation: spopFadeOut 0.4s ease forwards;
}

@keyframes spopFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}