/**
 * CPFA Library Notifications
 *
 * Toast-style notifications for user feedback
 *
 * @package CpfaCore
 * @version 1.1.0
 */

/* ==========================================================================
   NOTIFICATION CONTAINER
   ========================================================================== */

.cpfa-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	min-width: 320px;
	max-width: 500px;
	background: white;
	border-radius: 16px;
	padding: 18px 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 999999;
	transform: translateX(400px);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	pointer-events: all;
}

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

/* ==========================================================================
   NOTIFICATION TYPES
   ========================================================================== */

/* Success */
.cpfa-notification-success {
	border-left: 4px solid #10b981;
	background: linear-gradient(135deg, #d1fae5 0%, #ffffff 100%);
}

.cpfa-notification-success .cpfa-notification-icon {
	background: #10b981;
	color: white;
}

/* Error */
.cpfa-notification-error {
	border-left: 4px solid #ef4444;
	background: linear-gradient(135deg, #fee2e2 0%, #ffffff 100%);
}

.cpfa-notification-error .cpfa-notification-icon {
	background: #ef4444;
	color: white;
}

/* Warning */
.cpfa-notification-warning {
	border-left: 4px solid #f59e0b;
	background: linear-gradient(135deg, #fef3c7 0%, #ffffff 100%);
}

.cpfa-notification-warning .cpfa-notification-icon {
	background: #f59e0b;
	color: white;
}

/* Info */
.cpfa-notification-info {
	border-left: 4px solid #3b82f6;
	background: linear-gradient(135deg, #dbeafe 0%, #ffffff 100%);
}

.cpfa-notification-info .cpfa-notification-icon {
	background: #3b82f6;
	color: white;
}

/* ==========================================================================
   NOTIFICATION ELEMENTS
   ========================================================================== */

.cpfa-notification-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cpfa-notification-message {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #1a202c;
	font-weight: 500;
}

.cpfa-notification-close {
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
	transition: all 0.2s ease;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cpfa-notification-close:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #1a202c;
	transform: rotate(90deg);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
	.cpfa-notification {
		top: 10px;
		right: 10px;
		left: 10px;
		min-width: auto;
		max-width: none;
	}
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes notificationSlideIn {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes notificationSlideOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(400px);
		opacity: 0;
	}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.cpfa-notification-close:focus {
	outline: 2px solid #667eea;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cpfa-notification {
		transition-duration: 0.01ms !important;
	}
}