{% block content %}
    <div class="header">
        <h1> ⚠️Stock information⚠️</h1>
    </div>
    <div class="spacer"></div>
    <div class="main">
        <p>The cashier warns you that if you have chosen the bottle of wine you will receive it depending on the available stock which has been made for this offer. In case of stock shortage, you will receive the 10 € discount instead of the bottle.</p>
        <p>Le(la) caissier(-ière) vous avertit que si vous avez choisi la bouteille de vin, vous la recevrez si elle est encore disponible dans le stock qui a été réalisé pour cette offre. En cas d'épuisement du stock, vous recevrez les 10 € de réduction à la place de la bouteille.</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: 2000px;
            max-height: 450px;
            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 %}