{% extends "base.html" %}

{% block content %}
<div style="max-width: 500px; margin: 60px auto; text-align: center; padding: 40px;">
    <div style="font-size: 80px; margin-bottom: 20px;">⏳</div>
    
    <h1 style="color: #FF9800; margin-bottom: 10px;">Pago Pendiente</h1>
    <p style="color: #666; font-size: 1.1em; margin-bottom: 30px;">Tu pago está siendo procesado</p>
    
    <div style="background: #fff8e1; padding: 20px; border-radius: 8px; margin-bottom: 30px; color: #f57f17;">
        <p style="margin: 0;">
            <strong>⚠️ Importante:</strong> Tu pago aún no ha sido confirmado. Esto puede tomar algunos minutos.
        </p>
    </div>
    
    <p style="color: #666; margin-bottom: 20px;">
        📧 Te notificaremos por correo cuando tu pago esté confirmado
    </p>
    
    <div style="display: flex; gap: 10px; justify-content: center;">
        <a href="/carrito/historial/" style="padding: 12px 30px; background: #8B4789; color: white; border-radius: 6px; text-decoration: none; font-weight: bold;">
            Ver mis compras
        </a>
        <a href="/" style="padding: 12px 30px; background: #f0f0f0; color: #333; border-radius: 6px; text-decoration: none; font-weight: bold;">
            Volver al inicio
        </a>
    </div>
</div>
{% endblock %}