/* assets/css/quizvragen-frontend.css */

.quizvragen-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.quizvragen-question {
    margin-bottom: 15px;
}

.quizvragen-question h3 {
    margin-bottom: 5px;
}

.quizvragen-question label {
    display: block;
    margin-bottom: 5px;
}
#quizvragen-quiz-content {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 20px;
}
/* Invoervelden voor vragen (zowel open als multiple choice) */
.quizvragen-question input[type="text"] {
    width: 200px;
}

/* Invoervelden voor antwoordopties (multiple choice) */
.answer-option input[type="text"] {
    width: 200px; /* Pas de breedte aan naar wens */
}

/* Invoerveld voor de naam van de deelnemer */
.quizvragen-container input[type="text"]#participant_name {
    width: 200px; /* Pas de breedte aan naar wens */
}

/* Textarea voor open vragen */
.quizvragen-question textarea {
    width: 90%;
    height: 150px;
}
.quizvragen-qr-code-container {
    position: relative; /* Maakt relatieve positionering voor kinderen mogelijk */
    display: inline-block; /* Zorgt ervoor dat de div niet de volledige breedte inneemt */
}

.quizvragen-qr-code-image {
    display: block; /* Zorgt ervoor dat de afbeelding geen extra ruimte inneemt */
}

.quizvragen-qr-code-logo {
    position: absolute; /* Positioneert het logo absoluut t.o.v. de container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centreert het logo perfect */
    width: 50px; /* Stel hier de gewenste breedte van het logo in */
    height: auto; /* Behoud de hoogte/breedte verhouding */
    /* opacity: 0.8; Maakt het logo eventueel licht doorzichtig (optioneel) */
    pointer-events: none; /* Zorgt ervoor dat het logo de klik op de link niet blokkeert */
}

/* Stijl voor de link onder de QR-code en het logo */
.quizvragen-qr-code-container p {
    text-align: center; /* Centreert de link */
}
#quizvragen-question-display {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 20px;
}

#quizvragen-question-content {
    margin-bottom: 10px;
}

#quizvragen-prev-question, #quizvragen-next-question {
    margin-right: 10px;
}
#quizvragen-question-display {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
}

#quizvragen-question-content {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Zorg voor voldoende hoogte voor de vraag */
}

#quizvragen-prev-question, #quizvragen-next-question {
    margin-right: 10px;
}

#quizvragen-start-quiz {
    margin-top: 20px;
}

.coffee-button {
	display: inline-flex;
	align-items: center;
	background-color: #3C2A21;
	color: #FFFFFF;
	padding: 12px 24px;
	border-radius: 50px;
	text-decoration: none;
	font-family: Arial, sans-serif;
	font-weight: bold;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.coffee-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
	background-color: #4C3528;
}

.coffee-icon {
	width: 24px;
	height: 24px;
	margin-right: 8px;
}

.button-text {
	font-size: 16px;
}