{{ block title }}
    Questionnaire
{{ endblock }}
{{ block content }}

	<div class="questionnaire-shell">
		<div class="questionnaire-card">
			<div class="questionnaire-intro">
				<p>Please answer the following question carefully before moving to the next stage.</p>
			</div>

	    	{{ formfields }}

			<div class="questionnaire-actions">
	    		<button class="otree-btn-next btn btn-primary">Confirm</button>
			</div>
		</div>
	</div>

{{ endblock }}

{{ block styles }}
	<style>
		body {
			background: #eef3f7;
		}

		.questionnaire-shell {
			max-width: 860px;
			margin: 0 auto;
		}

		.questionnaire-card {
			background: #fbfdff;
			border: 1px solid #d4dde6;
			border-radius: 14px;
			box-shadow: 0 8px 24px rgba(30, 48, 66, 0.06);
			padding: 22px 24px;
		}

		.questionnaire-intro {
			margin-bottom: 18px;
			padding: 12px 14px;
			background: #edf4fa;
			border-left: 4px solid #4e6f8c;
			border-radius: 6px;
			color: #355066;
		}

		.questionnaire-intro p,
		.questionnaire-card p {
			line-height: 1.7;
		}

		.questionnaire-card .form-group,
		.questionnaire-card .mb-3,
		.questionnaire-card .otree-form-errors {
			margin-bottom: 18px;
		}

		.questionnaire-card label,
		.questionnaire-card .col-form-label {
			font-weight: 600;
			color: #24313d;
			margin-bottom: 8px;
		}

		.questionnaire-card input,
		.questionnaire-card select {
			border-radius: 8px;
			border: 1px solid #c8d4de;
		}

		.questionnaire-card input:focus,
		.questionnaire-card select:focus {
			border-color: #4e6f8c;
			box-shadow: 0 0 0 0.15rem rgba(78, 111, 140, 0.15);
		}

		.questionnaire-actions {
			margin-top: 18px;
		}

		.btn.btn-primary {
			background: #4e6f8c;
			border-color: #4e6f8c;
			border-radius: 8px;
			font-weight: 600;
			padding: 8px 18px;
		}

		.btn.btn-primary:hover,
		.btn.btn-primary:focus {
			background: #355066;
			border-color: #355066;
		}
	</style>
{{ endblock }}