{% extends "base.html" %}
{% block title %}{{ t.sup_success_page_title }} - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<main style="background: linear-gradient(180deg, #F1F5F9, #F8FAFC); min-height: 80vh;">
  <div class="container-page py-12" style="max-width:560px;margin:0 auto;text-align:center">
    <div style="background:white;border-radius:16px;padding:48px 32px;box-shadow:0 4px 24px rgba(0,0,0,0.06)">
      <div style="width:64px;height:64px;border-radius:50%;background:#DCFCE7;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center">
        <span style="font-size:28px;color:#16A34A">&#10003;</span>
      </div>
      <h1 style="font-size:1.5rem;font-weight:800;margin:0 0 0.5rem">{{ t.sup_success_h2 }}</h1>
      <p style="color:#64748B;font-size:0.9375rem;margin:0 0 1.5rem">
        {{ t.sup_success_text }}
      </p>

      <div style="background:#F8FAFC;border-radius:12px;padding:1rem;margin-bottom:1.5rem;text-align:left">
        <h3 style="font-size:0.8125rem;font-weight:700;margin:0 0 0.5rem">{{ t.sup_success_next_h3 }}</h3>
        <ul style="list-style:none;padding:0;margin:0;font-size:0.8125rem;color:#475569">
          <li style="padding:3px 0">&#x2713; {{ t.sup_success_li1 }}</li>
          <li style="padding:3px 0">&#x2713; {{ t.sup_success_li2 }}</li>
          <li style="padding:3px 0">&#x2713; {{ t.sup_success_li3 }}</li>
          <li style="padding:3px 0">&#x2713; {{ t.sup_success_li4 }}</li>
        </ul>
      </div>

      <a href="{{ url_for('suppliers.lead_feed') }}" class="btn" style="display:inline-block;padding:12px 28px">{{ t.sup_success_btn }}</a>
    </div>
  </div>
</main>
{% endblock %}
