/* Notification styles */
         .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 350px;
        }

        .notification {
            background: white;
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: flex-start;
            gap: 15px;
            position: relative;
            overflow: hidden;
            transform: translateX(100%);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;
        }

        .notification.show {
            transform: translateX(0);
            opacity: 1;
        }

        .notification.hide {
            transform: translateX(100%);
            opacity: 0;
        }

        .notification-icon {
            font-size: 1.5rem;
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .notification.success .notification-icon {
            background: rgba(76, 175, 80, 0.15);
            color: #4caf50;
        }

        .notification.error .notification-icon {
            background: rgba(244, 67, 54, 0.15);
            color: #f44336;
        }

        .notification.warning .notification-icon {
            background: rgba(255, 152, 0, 0.15);
            color: #ff9800;
        }

        .notification.info .notification-icon {
            background: rgba(33, 150, 243, 0.15);
            color: #2196f3;
        }

        .notification-content {
            flex: 1;
        }

        .notification-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 1.05rem;
        }

        .notification-message {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .notification-close {
            background: none;
            border: none;
            color: #9e9e9e;
            cursor: pointer;
            font-size: 1.1rem;
            transition: color 0.3s;
            flex-shrink: 0;
        }

        .notification-close:hover {
            color: #616161;
        }

        .notification-loader {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: rgba(0, 0, 0, 0.1);
            width: 100%;
            border-radius: 0 0 12px 12px;
            overflow: hidden;
        }

        .notification-loader::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border-radius: 0 0 12px 12px;
            transform-origin: left;
            animation: loader 3s linear forwards;
        }

        .notification.success .notification-loader::after {
            background: #4caf50;
        }

        .notification.error .notification-loader::after {
            background: #f44336;
        }

        .notification.warning .notification-loader::after {
            background: #ff9800;
        }

        .notification.info .notification-loader::after {
            background: #2196f3;
        }

        @keyframes loader {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0);
            }
        }

        @media (max-width: 600px) {
        
            .notification-container {
                left: 20px;
                right: 20px;
                max-width: none;
            }
        }