{% extends 'front/base.html.twig' %}

{% block title %}Commande introuvable{% endblock %}


{% block stylesheets %}
    {{ parent() }}

<style>
    /* ===== ORDER NOT FOUND ===== */

.order-not-found-card {
    border: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    border-radius: 10px;
}

/* Icône centrale */
.order-not-found-icon i {
    font-size: 64px;
    color: #adb5bd;
}

/* Alerte spécifique */
.alert-order-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    font-size: 0.95rem;
    padding: 12px 16px;
}

/* ===== FIX VISIBILITÉ TEXTE BOUTONS ===== */

/* Bouton principal */
.order-not-found-card .btn-primary {
    color: #fff !important; /* texte blanc */
}

/* Bouton outline */
.order-not-found-card .btn btn-secondary {
    color: #6c757d !important; /* gris Bootstrap */
}

/* Icônes dans les boutons */
.order-not-found-card .btn i {
    color: inherit; /* même couleur que le texte */
}

/* Mobile optimisation */
@media (max-width: 575.98px) {
    .order-not-found-icon i {
        font-size: 52px;
    }
}

</style>
{% endblock %}
{% block body %}
<section class="pt-60 pb-60">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <div class="card order-not-found-card text-center">
                    <div class="card-body p-4 p-md-5">

                        <div class="order-not-found-icon mb-4">
                            <i class="fa fa-box-open"></i>
                        </div>

                        <h4 class="mb-2">Commande introuvable</h4>

                        <div class="alert alert-order-warning mt-3 mb-4">
                            Cette commande n’existe pas ou ne vous appartient pas.
                        </div>

                        <p class="text-muted mb-4">
                            Vérifiez votre référence ou consultez votre espace client
                            pour retrouver l’ensemble de vos commandes.
                        </p>

                        <div class="d-flex justify-content-center gap-2 flex-wrap">
                            <a href="{{ path('user_account') }}"
                               class="btn btn-primary">
                                <i class="fa fa-user me-1"></i>
                                Mon compte
                            </a>

                            <a href="{{ path('user_account') }}#orders"
                               class="btn btn btn-secondary">
                                <i class="fa fa-list me-1"></i>
                                Mes commandes
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}