{{ block title }}
    {{ t.beliefs_title }}
{{ endblock }}

{{ block content }}

<div class="card shadow-sm">
    <div class="card-body text-center">
        
        <div class="text-start mx-auto" style="max-width: 800px;">
             
            <p class="mb-2 mt-3"> 
                <label class="form-label small mb-2 d-block">
                    {{ t.beliefs_intro }}
                </label>
            </p>
            <ul class="text-start  mb-4" style="line-height: 1.8;">
                <li>{{ beliefs_li1|safe }}</li>
                <li>{{ beliefs_li2|safe }}</li>
                <li>{{ beliefs_li3|safe }}</li>
            </ul>
        </div>
        <div class="mb-4 mt-2">
            <button class="btn btn-primary btn-sm mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseVisual" aria-expanded="false" aria-controls="collapseVisual">
                <i class="bi bi-image me-1"></i> {{ t.beliefs_toggle_visual }}
            </button>
            
            <div class="collapse mt-3" id="collapseVisual">
                <h6 class="text-muted text-uppercase small ls-1">{{ t.beliefs_visual_room }}</h6>
                <img src="{{ static image_path }}" class="img-fluid border rounded" style="max-height: 600px;" />
            </div>
        </div>

        

        <hr class="my-4">

        <div class="alert alert-warning d-inline-block mx-auto mb-4" style="max-width: 700px;">
            <div class="d-flex align-items-center">
                <div class="fs-4 me-3 text-warning">
                    <i class="bi bi-trophy-fill"></i>
                </div>
                <div class="text-start">
                    <strong>{{ t.beliefs_payment_heading }}</strong><br>
                    {{ t.beliefs_payment_body }}
                </div>
            </div>
        </div>
        
        <p class="lead mb-3">
            {{ beliefs_prompt|safe }}
        </p>

        <div class="d-flex justify-content-center mb-2">
            <div class="input-group" style="max-width: 400px;">
                {{ formfield 'belief_lying' label="" }}
                <span class="input-group-text bg-light">{{ t.beliefs_out_of }}</span>
            </div>
        </div>
        
        <div class="form-text text-muted mb-4">
            {{ t.beliefs_enter }}
        </div>
        
        <div class="mt-2">
            <button class="btn btn-primary btn-lg px-5">{{ t.beliefs_submit }}</button>
        </div>
    </div>
</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;
    }

    /* --- Imported Typography from QuestionPage --- */
    .card-title, .lead {
        font-size: 1.15rem;
        font-weight: 600;
        color: #2c3e50; /* Matches QP title color */
    }

    .form-label, .col-form-label {
        font-size: 1.05rem;
        color: #000;
        margin-bottom: 0.75rem;
    }
    /* ------------------------------------------- */

    /* 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;
    }

    /* Image Styling */
    .visual-representation {
        border-radius: 12px;
        border: 1px solid #dee2e6;
        margin-top: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
</style>
{{ endblock }}