<div class="rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6 space-y-2 text-xs sm:text-sm text-stone-800">
      <p>
        <span class="font-medium">Order ID:</span>
        <span class="font-mono">#{{ order.id }}</span>
      </p>

      <p>
        <span class="font-medium">Created:</span>
        {% if order.created_at %}
          {{ order.created_at.strftime('%-d %b %Y, %H:%M') }}
        {% else %}
          —
        {% endif %}
      </p>

      <p>
        <span class="font-medium">Description:</span>
        {{ order.description or '–' }}
      </p>

      <p>
        <span class="font-medium">Status:</span>
        <span class="inline-flex items-center rounded-full px-2 py-1 text-[11px] font-medium
          {% if order.status == 'paid' %}
            bg-emerald-50 text-emerald-700 border border-emerald-200
          {% elif order.status == 'failed' %}
            bg-rose-50 text-rose-700 border border-rose-200
          {% else %}
            bg-stone-50 text-stone-700 border border-stone-200
          {% endif %}
        ">
          {{ order.status or 'pending' }}
        </span>
      </p>

      <p>
        <span class="font-medium">Currency:</span>
        {{ order.currency or 'GBP' }}
      </p>

      <p>
        <span class="font-medium">Total:</span>
        {% if order.total_amount %}
          {{ order.currency or 'GBP' }} {{ '%.2f'|format(order.total_amount) }}
        {% else %}
          –
        {% endif %}
      </p>

    </div>

    