body {
    font-family: Arial, sans-serif;
    margin: 20px;
    direction: rtl; /* Set text direction to right-to-left */
}
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border-radius: 20px;
    border: 4px solid ;
    border-image: linear-gradient(to right,red, rgb(95, 15, 15), rgb(199, 186, 186)) 1;
    
}
.product {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px; 
    padding: 10px; /* Add padding to the product container */
    border: 1px solid #000000; /* Add border for better visual separation */
    border-radius: 12px;
    
}

.product img {
    width: 80px; /* Set the width of the image */
    margin-left: 30px; /* Adjust as needed */
    /* flex-shrink: 0;  */
    /* Prevent image from shrinking */
}

.product h2 {
    font-size: 1.2em;
    margin: 0; /* Remove default margin */
    color: #333; /* Set the color of the product name */
    text-transform: capitalize; /* Capitalize the product name */
    font-weight: bold; /* Make the product name bold */
    font-style:initial;
    
}

.product p {
    margin: 5px 0; /* Add margin to paragraphs */
}

.product form {
    display: flex;
    align-items: center;
}

.product input[type='number'] {
    width: 100%; /* Set the width of the input field */
    margin-left: 10px; /* Add spacing between input field and button */
}

.product button {
    color: white;
    background-color: blue;
    color: #ccc;
    border: none;
    border-radius: 6px;
    padding: 8px 12px; /* Add padding to the button */
    cursor: pointer;
}

.product button:hover {
    background-color: #1e0070; /* Darker green background on hover */
    color: white;
}

.panier {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

.panier-item {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.panier-item:last-child {
    border-bottom: none;
}

.supp-button {
    background-color: #ff4444; /* Red background */
    border: none;
    color: white;
    padding: 8px 16px; /* Adjust padding as needed */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.supp-button:hover {
    background-color: #cc0000; /* Darker red background on hover */
}

.registre-form {
    margin-top: 20px;
}

.registre-button {
    background-color: #58d187; /* Green background */
    border: none;
    color: rgb(0, 0, 0);
    padding: 10px 20px; /* Padding to increase clickable area */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    word-spacing: 4;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin: 0 auto;
}

.registre-button:hover {
    background-color: #213822; /* Darker green background on hover */
    color: white;
}