{% block title %}
Participant Information
{% endblock %}

{% block styles %}
<link
  href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&display=swap"
  rel="stylesheet"
/>
<style>
  /* Remove all default margin/padding and prevent scrolling */
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f9f9f9;
    font-family: "Merriweather", serif;
    color: #333;
  }

  /* Container to center card both vertically and horizontally */
  .full-screen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
  }

  /* The card: smaller text & less padding so it fits higher */
  .card.card-intro {
    background: #fff;
    border: none;
    border-radius: 6px;
    max-width: 600px;
    padding: 0.8rem; /* Decreased from 1rem */
    box-sizing: border-box;
  }

  /* Slightly smaller text and tighter line spacing */
  .card-intro .card-body {
    font-size: 0.9em;  /* Decreased from 0.95em */
    line-height: 1.3;  /* Tighter than 1.4 */
    padding: 0;        /* Remove extra padding inside .card-body */
  }

  /* Headlines and Underlines */
  .card-intro u {
    font-weight: 700;
    color: #2c3e50;
    text-decoration: none;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 2px;
    display: inline-block;
    margin-bottom: 8px; /* Slightly reduced */
    margin-top: 10px;   /* Slightly reduced */
  }

  /* Compress paragraph spacing further */
  p {
    margin: 0.5em 0;   /* Was 0.6em previously */
  }

  /* Button styling */
  .btn-primary {
    background-color: #2c3e50;
    border-color: #2c3e50;
    font-weight: 700;
    font-size: 0.9em;   /* Slightly smaller than 0.95em */
    padding: 6px 14px;  /* Reduced padding */
    transition: background-color 0.2s ease;
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: #243645;
    border-color: #243645;
  }

  /* Reduce spacing above button */
  .otree-btn-next {
    margin-top: 15px; /* Was 20px/30px originally */
  }

  /* Responsive adjustments for very small screens */
  @media (max-width: 600px) {
    .card-intro .card-body {
      font-size: 0.85em;  /* Even smaller on very small screens */
      line-height: 1.3;
    }
    .btn-primary {
      font-size: 0.85em;
      padding: 5px 10px;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="full-screen-container">
  <div class="card card-intro shadow">
    <div class="card-body">
      <p>
        Thank you for participating in this study. You will receive a show-up fee of
        <strong>£0.20</strong>.
        <u>You will earn an additional bonus, and its amount will depend on your decisions.</u>
      </p>

      <u>Demographics</u>
      <p>Please provide the following information:</p>
      {% formfield player.gender label="Gender:" %}
      {% formfield player.age label="Age:" %}
      {% formfield player.connect_id label="Prolific ID:" %}

      <u>Consent</u>
      <p>
        By pressing <strong>“I agree”</strong> you indicate your consent to participate in this study.
      </p>
      <button class="otree-btn-next btn btn-primary">I agree</button>
    </div>
  </div>
</div>
{% endblock %}