/* ============================================
   NOTIFICATION COMPONENT
   Plugin: notification
   Version: 2.0.0
   last-modified: 06.02.2026
   ============================================ */
.bwShowNotification {
      position: fixed;
      bottom: 20px;
      right: -500px;
      z-index: 1000000;
      min-width: 300px;
      max-width: 500px;
      opacity: 0;
      transform: translateX(100%);
      animation: smoothSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      background-color: hsl(var(--card, 0 0% 100%) / 0.95);
      backdrop-filter: blur(10px);
      border-radius: var(--radius, 0.5rem);
      padding: 1rem 2.5rem 1rem 1rem;
      color: hsl(var(--foreground, 0 0% 0%));
}

.bwShowNotification .btn-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      padding: 0;
      background-color: hsl(var(--muted, 0 0% 80%));
      border: 1px solid hsl(var(--border, 0 0% 70%));
      border-radius: 50%;
      opacity: 0.7;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
      background-size: 0.5em;
      background-repeat: no-repeat;
      background-position: center;
}

.bwShowNotification .btn-close:hover {
      opacity: 1;
}

.bwShowNotificationBorder-success {
      border-left: 4px solid hsl(142 76% 36%);
}

.bwShowNotificationBorder-warning {
      border-left: 4px solid hsl(45 93% 47%);
}

.bwShowNotificationBorder-danger {
      border-left: 4px solid hsl(0 72% 51%);
}

.bwShowNotificationBorder-info {
      border-left: 4px solid hsl(280 70% 55%);
}

/* Alert styling for Notifications */
.bwShowNotification.alert-success {
      background-color: hsl(142 76% 36% / 0.15);
      border-color: hsl(142 76% 36% / 0.3);
}

.bwShowNotification.alert-warning {
      background-color: hsl(45 93% 47% / 0.15);
      border-color: hsl(45 93% 47% / 0.3);
}

.bwShowNotification.alert-danger {
      background-color: hsl(0 72% 51% / 0.15);
      border-color: hsl(0 72% 51% / 0.3);
}

.bwShowNotification.alert-info {
      background-color: hsl(280 70% 55% / 0.15);
      border-color: hsl(280 70% 55% / 0.3);
}

@keyframes smoothSlideIn {
      0% {
            opacity: 0;
            transform: translateX(100%);
      }
      60% {
            opacity: 1;
            transform: translateX(-20px);
      }
      80% {
            transform: translateX(8px);
      }
      100% {
            opacity: 1;
            transform: translateX(0);
      }
}