{{ block title }}
    {{ page_title }}
{{ endblock }}

{{ block content }}

<div class="instruction-box mb-4">
    <p class="lead">
        {{ t.topic_lead }}
    </p>
</div>

<div class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ t.topic_q1_heading }}</h5>
        
        <label class="form-label small mb-3">
            {{ t.topic_q1_help }}
        </label>

        <div class="card-title mb-3">
            {{ formfield 'opinion' label="" }}
        </div>
    </div>
</div>

<div class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ topic_q2_heading_f }}</h5>

        <label class="form-label small mb-3">
            {{ topic_q2_help_f|safe }}
        </label>
        <div class="card-title mb-3">
            {{ formfield 'punish' label="" }}
        </div>
    </div>
</div>

<div class="d-flex justify-content-end mt-4">
    {{ next_button label=t.btn_next }}
</div>

{{ endblock }}

{{ block styles }}
<style>
    /* Global Container */
    .otree-body {
        max-width: 800px;
        margin: 40px auto;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        color: #333;
    }

    /* Unified Card Styling */
    .card {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background-color: #fff;
    }

    .card-title {
        font-size: 1.15rem;
        font-weight: 600;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 15px;
        color: #2c3e50;
    }

    /* Typography consistency */
    .form-label {
        font-size: 1.05rem;
        color: #000;
    }

    .text-secondary {
        color: #6c757d !important;
        line-height: 1.5;
    }

    /* Button Styling */
    .btn-primary {
        padding: 10px 30px;
        font-weight: 600;
        border-radius: 4px;
    }
</style>
{{ endblock }}