{{ block title }}
    CONSENT FORM
{{ endblock }}

{{ block content }}
    <div class="consent-card">

        <div class="consent-section">
            <h3>What is this study about?</h3>
            <p>
                You are invited to take part in an online decision-making study. The goal of the study is to better
                understand bargaining behavior and how people respond to negotiation procedures and recommendations in
                online environments.
            </p>
        </div>

        <div class="consent-section">
            <h3>What will I do if I participate?</h3>
            <p>
                If you agree to participate, you will complete an online study on Prolific. During the study, you will
                be anonymously matched with other participants and asked to take part in several bargaining rounds and
                related decision tasks.
            </p>
            <p>
                The study takes about 20 minutes to complete.
            </p>
        </div>

        <div class="consent-section">
            <h3>How will I be paid?</h3>
            <p>
                You will receive the participation payment stated on Prolific. In addition, your final payment may
                depend on your decisions and performance in the experiment, according to the rules explained during the
                study.
            </p>
        </div>

        <div class="consent-section">
            <h3>Are there any risks or benefits?</h3>
            <p>
                This study involves minimal risk beyond that of normal online decision-making tasks. There is no direct
                personal benefit from taking part, but your participation will contribute to research on economic
                decision-making.
            </p>
        </div>

        <div class="consent-section">
            <h3>Will my data remain confidential?</h3>
            <p>
                Your responses will be stored and analyzed in a confidential form. Participants are matched
                anonymously, and the research team will not use your responses to identify you personally in any
                publication or presentation of the results.
            </p>
        </div>

        <div class="consent-section">
            <h3>Is participation voluntary?</h3>
            <p>
                Your participation is entirely voluntary. You may stop participating at any time without giving a
                reason. Choosing not to participate will not result in any penalty from the research team.
            </p>
        </div>

        <div class="consent-section">
            <h3>Who can I contact?</h3>
            <p>
                If you have questions about the study, please contact
                <a href="mailto:Tanzhou.Liu@unil.ch">Tanzhou.Liu@unil.ch</a>.
            </p>
        </div>

        <div class="consent-checkbox">
            {% formfield player.accept_consent %}
        </div>

        <button class="otree-btn-next btn btn-primary consent-button">Continue</button>
    </div>
{{ endblock }}

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

        .consent-card {
            max-width: 900px;
            margin: 24px auto;
            padding: 32px 36px;
            background: #ffffff;
            border: 1px solid #d7e0ea;
            border-radius: 18px;
            box-shadow: 0 16px 40px rgba(24, 55, 86, 0.08);
        }

        .consent-header {
            padding-bottom: 18px;
            margin-bottom: 24px;
            border-bottom: 3px solid #d8e9f8;
        }

        .consent-kicker {
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #2e6f9e;
            margin-bottom: 8px;
        }

        .consent-header h2 {
            margin: 0 0 8px 0;
            color: #183756;
            font-size: 1.9rem;
        }

        .consent-subtitle {
            margin: 0;
            color: #5a6c7d;
        }

        .consent-section {
            margin-bottom: 20px;
        }

        .consent-section h3 {
            margin-bottom: 8px;
            color: #183756;
            font-size: 1.08rem;
        }

        .consent-section p {
            margin: 0 0 10px 0;
            color: #243746;
            line-height: 1.65;
            text-align: justify;
        }

        .consent-checkbox {
            margin-top: 28px;
            padding: 16px 18px;
            background: #fff7d6;
            border: 1px solid #f0d56a;
            border-radius: 12px;
        }

        .consent-button {
            margin-top: 18px;
            min-width: 160px;
        }

        .form-check-label {
            color: #243746;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .consent-card {
                margin: 12px;
                padding: 22px 18px;
            }

            .consent-header h2 {
                font-size: 1.5rem;
            }
        }
    </style>
{% endblock %}