/* ============================================================
   GLOBAL NOTIFICATION STYLES
   ============================================================ */

/* Base notification container */
.global-notification {
    position: fixed;
    min-width: 320px;
    max-width: 480px;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-left: 5px solid #3498db;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Notification types */
.global-notification[data-type="success"] {
    border-left-color: #27ae60;
}

.global-notification[data-type="error"] {
    border-left-color: #e74c3c;
}

.global-notification[data-type="warning"] {
    border-left-color: #f39c12;
}

.global-notification[data-type="info"] {
    border-left-color: #3498db;
}

.global-notification[data-type="loading"] {
    border-left-color: #2c85aa;
}

/* Notification icon colors */
.global-notification[data-type="success"] .notification-icon {
    background: rgba(39, 174, 96, 0.15);
}

.global-notification[data-type="error"] .notification-icon {
    background: rgba(231, 76, 60, 0.15);
}

.global-notification[data-type="warning"] .notification-icon {
    background: rgba(243, 156, 18, 0.15);
}

.global-notification[data-type="info"] .notification-icon {
    background: rgba(52, 152, 219, 0.15);
}

/* Position variations */
.global-notification.top-right {
    top: 20px;
    right: 20px;
}

.global-notification.top-left {
    top: 20px;
    left: 20px;
}

.global-notification.bottom-right {
    bottom: 20px;
    right: 20px;
}

.global-notification.bottom-left {
    bottom: 20px;
    left: 20px;
}

/* Notification close button hover */
.global-notification .notification-close-btn:hover {
    color: #e74c3c !important;
}

/* Multiple notifications stacking */
.global-notification + .global-notification {
    margin-top: 10px;
}

/* Loading spinner animation */
.global-notification[data-type="loading"] .notification-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .global-notification {
        min-width: 280px;
        max-width: 90%;
        right: 10px !important;
        left: 10px !important;
        top: 10px !important;
    }
}