{{ block title }}
    {{ t.consent_title }}
{{ endblock }}

{{ block content }}

<div class="card instruction-card">
    <div class="card-body">
        <h4 class="mb-4">{{ t.consent_study_title }}</h4>
        
        <p><strong>{{ t.consent_pi }}</strong> [Mauricio Fernández-Duque]<br>
        <strong>{{ t.consent_institution }}</strong> [CIDE/Dartmouth]</p>

        <hr>

        <h5>{{ t.consent_s1_title }}</h5>
        <p>{{ t.consent_s1_body|safe }}</p>

        <h5>{{ t.consent_s2_title }}</h5>
        <p>{{ t.consent_s2_intro }}</p>
        <ul>
            <li>{{ t.consent_s2_li1|safe }}</li>
            <li>{{ t.consent_s2_li2|safe }}</li>
            <li>{{ t.consent_s2_li3|safe }}</li>
        </ul>

        <h5>{{ t.consent_s3_title }}</h5>
        <p>{{ t.consent_s3_risks|safe }}</p>
        <p>{{ t.consent_s3_benefits|safe }}</p>

        <h5>{{ t.consent_s4_title }}</h5>
        <p>{{ t.consent_s4_body }}</p>

        <h5>{{ t.consent_s5_title }}</h5>
        <p>{{ t.consent_s5_body|safe }}</p>

        <h5>{{ t.consent_s6_title }}</h5>
        <p>{{ t.consent_s6_body }}</p>

        <div class="alert alert-secondary mt-4">
            {{ t.consent_contact|safe }}
        </div>
    </div>
</div>

<div class="form-container">
    {{ formfield 'consent_given' label=t.consent_checkbox }}
</div>

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

{{ endblock }}

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

    /* Unified Instruction/Scenario Box */
    .instruction-card {
        border: none;
        background-color: #f8f9fa;
        border-left: 5px solid #007bff;
        border-radius: 8px;
        margin-bottom: 2rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .instruction-card .card-body {
        padding: 1.5rem 2rem;
    }

    /* Form Section Styling */
    .form-container {
        padding-left: 1.5rem;
        border-left: 2px solid #e9ecef;
        margin-top: 2rem;
    }

    /* Button Consistency */
    .otree-btn-next, .btn-primary {
        padding: 10px 35px;
        border-radius: 25px;
        font-weight: 600;
        
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }
</style>
{{ endblock }}