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

    <div class="questionnaire-shell">
        <div class="questionnaire-card">
            <div class="questionnaire-intro">
                <p>Please enter a number from 0 to 10, where 0 means not willing to take risks at all and 10 means very willing to take risks.</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 }}