{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
{% endblock %}

{% block content %}
<style>
    /* Force 16pt font and Black color for everything */
    #otree-content, p, li, div, h2, h4, span, label, textarea {
        font-size: 16pt !important;
        color: black !important;
    }

    /* SPECIFICALLY UNBOLD THE QUESTION TEXT */
    label, .col-form-label, .form-label {
        font-weight: normal !important;
    }

    /* Title box style */
    .custom-title-box {
        background-color: #d1e7dd;
        border: 1px solid #badbcc;
        color: #0f5132 !important;
        text-align: center;
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }

    .custom-title-box h2 {
        font-size: 22pt !important;
        font-weight: bold;
        color: #0f5132 !important;
        margin: 0;
    }

    /* --- TEXT AREA STYLING (REMAINING AT MEDIUM-LARGE) --- */
    textarea.form-control {
        min-height: 250px !important;
        height: 300px !important;
        font-size: 16pt !important;
        line-height: 1.5;
        border: 1px solid #ced4da !important;
        font-weight: normal !important; /* Ensures typed text isn't bold */
    }

    /* Keep the layout clean */
    .card {
        border: none !important;
        box-shadow: none !important;
    }
</style>

<div class="custom-title-box">
    <h2>POST-STUDY QUESTIONS</h2>
</div>

<div class="mb-4">
    <p>
        Recall that you played the role of Customer today.
    </p>
</div>

<div class="mb-4">
    {{ formfield 'Tip_OpenEnded' }}
</div>

<div class="mt-5 text-start">
    <p class="mb-3">Please click <strong>‘Next’</strong> to continue.</p>
    {{ next_button }}
</div>

{% endblock %}