/* Kontener dla powiadomień - lewy górny róg */
.notification-container {
 position: fixed;
 top: 20px;
 left: 20px;
 z-index: 9999;
 max-width: 350px;
 pointer-events: none;
}

/* Pojedyncze powiadomienie */
.notification {
 background-color: #fff;
 border-left: 4px solid #3498db;
 border-radius: 8px;
 padding: 15px 20px;
 margin-bottom: 15px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 display: flex;
 align-items: flex-start;
 gap: 12px;
 pointer-events: auto;
 animation: slideInLeft 0.4s ease-out;
 transition: all 0.3s ease;
}

.notification:hover {
 transform: translateX(5px);
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Animacja wejścia */
@keyframes slideInLeft {
 from {
 transform: translateX(-100%);
 opacity: 0;
 }
 to {
 transform: translateX(0);
 opacity: 1;
 }
}

/* Animacja wyjścia */
@keyframes slideOutLeft {
 from {
 transform: translateX(0);
 opacity: 1;
 }
 to {
 transform: translateX(-100%);
 opacity: 0;
 }
}

.notification.hiding {
 animation: slideOutLeft 0.4s ease-in forwards;
}

/* Ikona powiadomienia */
.notification-icon {
 font-size: 24px;
 flex-shrink: 0;
 width: 30px;
 height: 30px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
}

/* Treść powiadomienia */
.notification-content {
 flex: 1;
}

.notification-title {
 font-weight: 600;
 font-size: 15px;
 color: #2c3e50;
 margin-bottom: 5px;
}

.notification-message {
 font-size: 13px;
 color: #555;
 line-height: 1.4;
}

/* Przycisk zamknięcia */
.notification-close {
 background: none;
 border: none;
 color: #95a5a6;
 font-size: 20px;
 cursor: pointer;
 padding: 0;
 width: 24px;
 height: 24px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 transition: all 0.2s ease;
 flex-shrink: 0;
}

.notification-close:hover {
 background-color: #ecf0f1;
 color: #2c3e50;
}

/* Typy powiadomień */

/* Sukces */
.notification.success {
 border-left-color: #27ae60;
}

.notification.success .notification-icon {
 background-color: #d5f4e6;
 color: #27ae60;
}

/* Błąd */
.notification.error {
 border-left-color: #e74c3c;
}

.notification.error .notification-icon {
 background-color: #fadbd8;
 color: #e74c3c;
}

/* Ostrzeżenie */
.notification.warning {
 border-left-color: #f39c12;
}

.notification.warning .notification-icon {
 background-color: #fef5e7;
 color: #f39c12;
}

/* Informacja */
.notification.info {
 border-left-color: #3498db;
}

.notification.info .notification-icon {
 background-color: #d6eaf8;
 color: #3498db;
}

/* Pasek postępu (opcjonalny) */
.notification-progress {
 position: absolute;
 bottom: 0;
 left: 0;
 height: 3px;
 background-color: rgba(52, 152, 219, 0.3);
 border-radius: 0 0 0 8px;
 animation: progressBar 5s linear forwards;
}

@keyframes progressBar {
 from {
 width: 100%;
 }
 to {
 width: 0%;
 }
}

.notification.success .notification-progress {
 background-color: rgba(39, 174, 96, 0.3);
}

.notification.error .notification-progress {
 background-color: rgba(231, 76, 60, 0.3);
}

.notification.warning .notification-progress {
 background-color: rgba(243, 156, 18, 0.3);
}
.notification.info .notification-progress {
 background-color: rgba(243, 156, 18, 0.3);
}

/* Responsywność */
@media (max-width: 480px) {
 .notification-container {
 left: 10px;
 right: 10px;
 max-width: none;
 }

 .notification {
 padding: 12px 15px;
 }

 .notification-title {
 font-size: 14px;
 }

 .notification-message {
 font-size: 12px;
 }
}