/* Kontener dla wszystkich powiadomień - pozycjonowanie */
.toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
}

/* --- Styl Pixel Art Toast --- */

.toast {
	/* Główny element graficzny i czcionka */
	border: 2px solid #000; 
	padding: 8px 12px;
	margin-top: 10px;
	width: 250px;
	box-sizing: border-box;
	
	/* Cień / 3D efekt Pixel Art */
	box-shadow: 
		4px 4px 0 0 #000, 
		-2px -2px 0 0 rgba(255, 255, 255, 0.5) inset;

	/* Ustawienia czcionki naśladujące retro */
	font-family: 'Courier New', monospace; 
	font-size: 14px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000; 

	/* Animacja i ukrywanie */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Kolory dla różnych typów powiadomień */
.toast.success {
	background-color: #4CAF50; /* Zieleń sukcesu */
	color: #FFEB3B; /* Żółty tekst */
}

.toast.warning {
	background-color: #FF9800; /* Pomarańcz ostrzeżenia */
	color: #212121; /* Ciemny tekst */
}

.toast.error {
	background-color: #F44336; /* Czerwień błędu */
	color: #FFFFFF; /* Biały tekst */
}

.toast.info {
	background-color: #2196F3; /* Niebieski informacji */
	color: #E0F7FA; /* Jasny, chłodny tekst */
}

/* Klasa do pokazania powiadomienia (dodawana przez JS) */
.toast.show {
	opacity: 1;
	transform: translateY(0);
}

/* --- Styl przycisku i sekcji demonstracyjnej --- */
.demo-controls {
	padding: 20px;
	background-color: #333;
	border: 4px solid #111;
	box-shadow: 4px 4px 0 0 #111;
	display: inline-block;
}

.pixel-button {
	background-color: #FF5722; 
	color: #FFF;
	border: none;
	padding: 10px 15px;
	font-family: 'Courier New', monospace;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	
	/* Efekt Pixel Art */
	border: 2px solid #000;
	box-shadow: 
		4px 4px 0 0 #000;
	transition: all 0.1s;
	margin-right: 5px;
}

.pixel-button:active {
	/* Wciśnięcie przycisku */
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 #000;
}