/* Container que segura todas as notificações */
#notification-container {
	position: fixed;
	top: 20px; /* Espaço do topo */
	right: 20px; /* Alinhado à direita */
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* Alinha as notificações à direita */
	gap: 10px; /* Espaço entre as notificações */
}

/* Estilo base de cada notificação */
.notification {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	color: white;
	min-width: 320px;
	max-width: 400px;
	opacity: 0;

	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;

	transform: translateX(120%);
	-webkit-transform: translateX(120%);
	-moz-transform: translateX(120%);
	-ms-transform: translateX(120%);
	-o-transform: translateX(120%);
	
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-webkit-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-moz-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-ms-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-o-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Estado visível da notificação (ativado via JS) */
.notification.show {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
}

/* Ícone dentro da notificação */
.notification-icon {
	font-size: 24px;
	margin-right: 15px;
	flex-shrink: 0; /* Impede que o ícone seja esmagado */
}

/* Mensagem de texto */
.notification-message {
	flex-grow: 1; /* Ocupa o espaço restante */
	font-size: 16px;
	line-height: 1.4;
}

/* Botão de fechar */
.notification-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 24px;
	font-weight: bold;
	opacity: 0.7;
	cursor: pointer;
	padding: 0 0 0 15px;
	line-height: 1;
	transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
}

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

/* Variações de cor */
.notification.success {
	background-color: #28a745;
}

.notification.warning {
	background-color: #ffc107;
	color: #212529;
}
.notification.error {
	background-color: #c82333;
}