{% block content %}
    <div class="header">
        <h1> ⚠️Stock information⚠️</h1>
    </div>
    <div class="spacer"></div>
    <div class="main">
        <p>The cashier applies the €10 discount to your shopping. Good for other customers who want to take advantage of the offer. Indeed , there may not be enough bottles of wine for everyone.</p>
        <p>Le(la) caissier(-ière) applique donc la réduction de 10€ sur vos courses. Tant mieux pour les autres clients qui souhaitent profiter de l'offre. En effet, il se peut qu'il n'y ait pas assez de bouteilles de vin pour tout le monde.</p>
        <div class="button-container">
            {{ next_button }}
        </div>
    </div>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background-color: #2c3e50;
            color: #fff;
            text-align: center;
            padding: 40px 0;
        }

        h1 {
            font-size: 50px;
            margin-top: 0;
            margin-bottom: 0.5em;
        }

        .spacer {
            height: 40px;
        }

        .main {
            background-color: #fff;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
            border: 2px solid #2c3e50;
            border-radius: 5px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        p {
            font-size: 24px;
            line-height: 1.5;
            margin-bottom: 30px;
        }

        .button-container {
            display: inline-block;
            margin-top: 30px;
        }

         button {
            background-color: #2c3e50;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 22px 44px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-weight: bold;
        }

        button:hover {
            background-color: #1a242f;
            padding: 22px 44px;
        }
    </style>
{% endblock %}