/* Notification Component */

.notification {
  position: fixed;
  top: var(--spacing-xl);
  right: var(--spacing-xl);
  min-width: 320px;
  max-width: 480px;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  z-index: var(--z-tooltip);
  opacity: 0;
  transform: translateX(400px);
  transition: all var(--transition-base);
}

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

/* Notification Types */
.notification-success {
  border-left: 4px solid var(--color-success);
}

.notification-error {
  border-left: 4px solid var(--color-error);
}

.notification-warning {
  border-left: 4px solid var(--color-warning);
}

.notification-info {
  border-left: 4px solid var(--color-info);
}

.notification::before {
  content: '';
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.notification-success::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.notification-info::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

/* Notification Content */
.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

.notification-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Close Button */
.notification-close {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.notification-close:hover {
  opacity: 1;
}

.notification-close::before,
.notification-close::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: var(--color-text-secondary);
  top: 50%;
  left: 50%;
}

.notification-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.notification-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Multiple Notifications Stack */
.notification + .notification {
  margin-top: var(--spacing-md);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .notification {
    top: var(--spacing-md);
    right: var(--spacing-md);
    left: var(--spacing-md);
    min-width: auto;
    max-width: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .notification {
    transition: opacity var(--transition-base);
    transform: none;
  }
  
  .notification.show {
    transform: none;
  }
}Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

.notification-warning::before {
  background-image: url("data:image/svg+xml,%3