.comments-section {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	border-radius: 5px;
}

.comments-section h2 {
	margin-bottom: 20px;
	font-size: 1.5rem;
}

.comment {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-top: 1px solid #ddd;
}

.comment-meta {
	font-size: 0.9rem;
	color: #555;
	margin-bottom: 5px;
}

.comment-body {
	font-size: 1rem;
	line-height: 1.4;
	color: #333;
	white-space: pre-wrap;
}

.comment-form {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	border-radius: 5px;
	position: relative; /* Basis voor absolute positionering van de toolbar */
}

.comment-form h3 {
	margin-bottom: 20px;
	font-size: 1.2rem;
}

.comment-form label {
	display: block;
	font-size: 0.9rem;
	margin-bottom: 5px;
	font-weight: bold;
}

.comment-form input[type="text"],
.comment-form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	margin-top: 0px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 1rem;
}

/* Button: blauw vervangen door rood */
.comment-form button {
	padding: 10px 20px;
	background-color: #800000; /* Donkerrood */
	color: white;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	font-size: 1rem;
}

.comment-form button:hover {
	background-color: #600000; /* Nog donkerder rood */
}

.success-message {
	color: green;
	font-weight: bold;
}

.error-message {
	color: red;
	font-weight: bold;
}

/* Tekstarea-wrapper met flexbox */
.textarea-wrapper {
	position: relative; /* Relatieve positionering voor de emoji-toolbar */
	display: flex;
	flex-direction: column; /* Zorg dat de toolbar boven de textarea staat */
}

.emoji-toolbar {
	margin: auto 5px auto auto;
	position: relative; /* Plaats de toolbar binnen de textarea-wrapper */
	top: 10px; /* Zorg dat de toolbar boven de textarea staat */
	display: inline-flex; /* Zorgt voor knoppen naast elkaar */
	flex-wrap: wrap; /* Laat knoppen naar een nieuwe regel springen indien nodig */
	gap: 0px; /* Geen extra ruimte tussen de knoppen */
	padding: 4px; /* Ruimte binnen de toolbar */
	border: 1px solid #ddd;
	background-color: #fff; /* Witte achtergrond */
	border-radius: 4px; /* Geen afgeronde hoeken */
	max-width: max-content; /* Beperk de breedte tot de inhoud */
	z-index: 10; /* Zorg dat de toolbar boven andere elementen staat */
}

.emoji-toolbar .emoji-btn {
	width: 22px;
	height: 22px;
	font-size: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff; /* Witte achtergrond */
	border: none; /* Geen rand */
	cursor: pointer;
	border-radius: 4px; /* Geen afgeronde hoeken */
	margin: 0;
	padding: 0px 12px;
	transition: background-color 0.2s ease, filter 0.2s ease; /* Animatie voor kleur en hover */
	filter: grayscale(100%); /* Zwart-wit filter */
}

.emoji-toolbar .emoji-btn:hover {
	background-color: transparent; /* Lichte hover-achtergrond */
	filter: none; /* Verwijder zwart-wit filter bij hover */
	width: 22px;
	height: 22px;
	transform: scale(1.4); /* Vergroot de emoji met 30% bij hover */
}

.emoji-toolbar .emoji-btn:focus {
	outline: none; /* Verwijder focus-ring */
}

.emoji-toolbar .emoji-btn:active {
	background-color: #dbdbdb; /* Actieve achtergrondkleur */
	filter: none; /* Verwijder zwart-wit filter bij hover */
}

/* Tekstarea-stijl */
textarea {
	margin-top: 0px; /* Zorg voor ruimte onder de emoji-toolbar */
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.comment-form label {
	display: block;
	margin: 10px 0 5px;
}

.comment-form textarea,
.comment-form input {
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.success-message {
	color: green;
}

.error-message {
	color: red;
}

@media (max-width: 640px) {
	.emoji-toolbar {
		display: none;
		margin: auto 0px 2px auto;
		top: 0px; /* Zorg dat de toolbar boven de textarea staat */
		width: 100%; /* Maak de toolbar 100% breed */
		left: 0; /* Zorg dat de toolbar aan de linkerkant begint */
		right: 0; /* Zorg dat de toolbar aan de rechterkant eindigt */
		top: 0; /* Plaats de toolbar direct boven de tekst */
		justify-content: space-around; /* Verspreid de emoji's gelijkmatig */
		padding: 8px; /* Maak de padding iets groter voor een betere touch-ervaring */
	}
	
	.emoji-toolbar .emoji-btn, .emoji-toolbar .emoji-btn:hover {
		width: 28px;
		height: 26px;
		filter: none; /* Verwijder het zwart-wit filter, zodat de emoji's in kleur zijn */
		transform: scale(1.3); /* Vergroot de emoji met 30% bij hover */
	}
	.comments-section {
		margin-top: 30px;
		padding: 10px;
		border-top: none;
		background-color: #f9f9f9;
		border-radius: 8px;
	}
	.comment-form {
		margin-top: 30px;
		padding: 0px 10px;
		border: none;
		background-color: #ffffff;
		border-radius: 0px;
		position: relative;
	}
}