{% block title %}Welcome{% endblock %}

{% block content %}

<div class="card">
  <div class="card__header">
    <h4>Thank you for your attention</h4>
    <div class="card__subtitle">Please read before you begin</div>
  </div>

  <div class="card__body">
    <p>When you click <strong>Next</strong>, you will enter a short comprehension quiz.</p>
    <p>For each question you answer correctly on your first attempt, you will earn
      <strong>{{ quiz_bonus_cents }}</strong>.</p>
  </div>
</div>

<div class="next-wrap">
  {{ next_button }}
</div>

<style>
  /* Card shell */
  .card{
    max-width:900px; margin:16px auto; border:1px solid #e5e7eb; border-radius:10px;
    background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.06);
  }
  .card__header{
    padding:14px 18px 10px 18px; border-bottom:1px solid #f0f2f5; background:#fafafa;
    border-radius:10px 10px 0 0;
  }
  .card__header h4{ margin:0; font-weight:600; font-size:18px; }
  .card__subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  .card__body{ padding:16px 18px 18px 18px; }

  /* Next row container (align to right, match page width) */
  .next-wrap{
    max-width:900px; margin:10px auto 0 auto; display:flex; justify-content:flex-end;
  }

  /* Polished Next button to match cards */
  .next-wrap .btn,
  .otree-btn-next,
  button[type="submit"].btn {
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    border: 1px solid #dbe2f3;
    background: linear-gradient(180deg, #f4f7ff 0%, #e9efff 100%);
    color: #1e3a8a;
    box-shadow: 0 4px 10px rgba(30, 91, 255, 0.08);
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
  }
  .next-wrap .btn:hover,
  .otree-btn-next:hover,
  button[type="submit"].btn:hover {
    background: linear-gradient(180deg, #eaf0ff 0%, #dee7ff 100%);
    box-shadow: 0 6px 14px rgba(30, 91, 255, 0.12);
  }
  .next-wrap .btn:active,
  .otree-btn-next:active,
  button[type="submit"].btn:active {
    transform: translateY(1px);
  }
  .next-wrap .btn:focus,
  .otree-btn-next:focus,
  button[type="submit"].btn:focus {
    outline: none;
    box-shadow: 0 0 0 6px rgba(30, 91, 255, .15);
  }
  .next-wrap .btn:disabled,
  .otree-btn-next:disabled,
  button[type="submit"].btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Title bar — align with card content */
  .otree-title{
  max-width: 900px;
  margin: 6px auto 14px auto !important;

  /* match .card__header / .card__body horizontal padding */
  padding-left: 2px !important;
  padding-right: 2px !important;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: #111827;
  border: 0;
}
</style>

{% endblock %}