static/styles.css

<div id="modal" style="
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Centers the modal on the page */
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
    z-index: 1000;
    min-width: 350px;  /* Minimum width of the modal */
    min-height: 300px; /* Minimum height of the modal */
    overflow-y: auto;  /* Allow scrolling inside the modal if content is too tall */
">
    <div style="text-align: right;">
        <button onclick="closeModal()" style="
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #333;
        ">&times;</button>
    </div>
    <img id="modal-image" style="
        width: 100%;
        height: auto;
        border-radius: 12px;
        margin-bottom: 15px;
    " />
    <h2 id="modal-name" style="margin-bottom: 10px; font-size: 22px; color: #333;"></h2>
    <p id="modal-description" style="margin-bottom: 10px; color: #555; font-size: 16px;"></p>
    <p id="modal-price" style="margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #222;"></p>
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <label for="quantity" style="font-weight: bold;">Quantity:</label>
        <input type="number" id="quantity" value="1" min="1" style="
            width: 60px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        " />
        <button style="
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
        " onclick="addToCart()">Add</button>
    </div>
</div>