{% extends spa_base or "base.html"%}
{% block title %}Pagamento Concluido{% endblock %}
{% block extra_head %}
<style>
    .payment-done { max-width: 500px; margin: 60px auto; text-align: center; }
    .payment-done .icon { font-size: 4em; margin-bottom: 20px; }
    .payment-done h1 { font-size: 1.6em; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
    .payment-done p { color: var(--text-secondary); font-size: 0.95em; margin-bottom: 8px; }
    .payment-done .hint { color: var(--text-muted); font-size: 0.82em; margin-bottom: 32px; }
    .payment-done .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
</style>
{% endblock %}
{% block content %}
<div class="payment-done">
    <div class="icon">&#x2705;</div>
    <h1>Pagamento Recebido!</h1>
    <p>Seu pagamento foi processado com sucesso.</p>
    <p class="hint">Seu plano sera ativado em instantes. Caso nao seja, entre em contato com o suporte.</p>
    <div class="actions">
        <a href="{{ url_for('dashboard') }}" class="btn">Ir para o Dashboard</a>
        <a href="{{ url_for('planos') }}" class="btn btn-outline">Ver Planos</a>
    </div>
</div>
{% endblock %}