/* Dialog Box - główny kontener */
#dialog-box {
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(29, 29, 29, 0.9);
	color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
	width: 80vw;
	max-width: 1100px;
	height: auto;
	max-height: 80vh;
	display: flex;
	flex-direction: column; /* Domyślnie kolumnowy layout */
	align-items: center;
	justify-content: center;
	gap: 20px;
	z-index: 110 !important;
	overflow-y: hidden;
}

/* Jeśli dialog ma obrazek – układ w poziomie */
#dialog-box.has-image {
	flex-direction: row;
	align-items: flex-start;
}

/* Obrazek w dialogu */
#dialog-box img {
	max-width: 40%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 8px;
	display: none;
	margin-right: 20px;
}
#dialog-box.has-image img {
	display: block;
}

/* Kontener tekstu w dialogu */
#dialog-description {
	display: flex;
	text-align: left;
	width: 100%;
	max-width: 90%;
	margin: 0 auto;
	flex: 1;
	padding: 10px;
	font-family: "Georgia", serif;
	font-size: 1.8rem;
	line-height: 1.5;
	/* color: #fff; */
	max-height: 70vh;
	overflow-y: auto;
}

/* Gdy dialog MA obrazek (klasa .has-image) – tekst do lewej */
#dialog-box.has-image #dialog-description {
	text-align: left;
}

/* Przycisk zamknięcia */
#dialog-box button {
	padding: 10px 20px;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1.2rem;
}

#dialog-box button:hover {
	background-color: #45a049;
}

/* Przycisk w prawym górnym rogu dla wariantu z samym obrazkiem */
#dialog-box.has-image button.top-right {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* Ukrycie dialogu */
#dialog-box.hidden {
	display: none;
}

/* Overlay */
#dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	z-index: 100;
	display: none;
}

/* Overlay widoczny */
#dialog-overlay.visible {
	display: block;
}

/* Blokowanie interakcji w grze podczas otwartego dialogu */
body.dialog-active #background-video,
body.dialog-active #navigation,
body.dialog-active #items-container {
	pointer-events: none; /* Wyłącza interakcję z grą, ale NIE z inwentarzem i dialogiem */
}

/* ALE INWENTARZ I DIALOG POZOSTAJĄ INTERAKTYWNE */
body.dialog-active #inventory.interactive,
body.dialog-active #dialog-box {
	pointer-events: auto;
	z-index: 110; /* Dialog nad wszystkim */
}

/* Opcjonalnie: animacja przyciemnienia */
#dialog-overlay.visible {
	animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Dodatkowe style dla wariantu z samym obrazkiem */
#dialog-box.has-image.image-only {
	padding: 0;
	max-width: 90%;
	max-height: 90%;
}

#dialog-box.has-image.image-only img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	margin-right: 0; /* Usuwamy margines dla pełnego ekranu */
}

#dialog-box.has-image.image-only button.top-right {
	position: absolute;
	top: 10px;
	right: 10px;
}

@media (max-width: 926px) {
	#dialog-description {
		font-size: 1.4rem;
	}
}