.chicken{
width:100%;
height:100%;

}

.image-container{

width:15em;
height:10.2952em;
}

.title-circle-container
{
border:1px solid blue;
display:flex;
flex-direction:column;
}
.main-body {
  display: flex;
  justify-content: center;
}


#cart-window{
width:100%;
height:100vh;
position:fixed;
top:0;
left:0;
z-index:2;
background-color:rgba(0,0,0,0);
transition:.3s;
visibility:hidden;
}

#cart-window.active{
    background-color:rgba(0,0,0,.5);
    visibility:visible;
}

#checkout-button{
border:1px solid blue;
}
#cart-box #checkout-button svg{
border:1px solid blue;

    width:100%;
    height:100%;
    fill:rgb(128,0,255);
    stroke:rgb(128,0,255);
}


#cart-box{
display:flex;
flex-direction:column;
justify-content:space-between;
position:fixed;
top:0;
right:0;
width:0;
height:calc(100%-80px);
background:white;
padding:40px 0;
padding:0;
color:rgb(50,50,50);
border-top-left-radius:10%;
box-shadow:-5px 0 80px rgba(255,255,255,.65);
overflow:hidden;
text-wrap:nowrap;
text-overflow:ellipsis;
transition:.5s;
}

@media screen and (max-width: 900px) {

#cart-window.active #cart-box{
    width:calc(85%);
 padding:40px 0;
 padding:0 0;
}
}
@media screen and (min-width: 901px) {

#cart-window.active #cart-box{
    width:calc(35%);
 padding:40px 0;
 padding:0 0;
}
}

#cart-box .heading{
    display:flex;
    flex-direction:row;
    width:100%;
    justify-content:space-between;
    place-items:center;
}
#cart-box .heading h1{
font-size:25px;
font-weight:600;
}

#cart-box heading p{
    color:rgb(186,186,186);
    font-size:15px;
    font-weight:400;
    text-align:left;
}

#cart-box .close-button svg{
    width:25px;
    height:25px;
    fill:rgb(128,0,255);
    stroke:rgb(128,0,255);
}

#cart-box .close-button{
    background:transparent;
    border:0;
}

#cart-items-container{
    position:relative;
    text-align:center;
}

.empty-cart-message{
    font-size:15px;
    font-weight:500;
    display:none;
}

#cart-items-container ul{
    height:50vh;
    overflow-y:scroll;
}
#cart-items-container ul::webkit-scrollbar{
display:none;
}
#cart-items-container{
    display:flex;
    flex-direction:row;
    place-items:center;
    justify-content:space-between;
    width:100%;
    margin-bottom:18px;
}
#cart-items-container .cart-item .item-1{
    display:flex;
    flex-direction:row;
    place-items:center;
}

#cart-items-container .cart-item .cart-item-image{
width:70px;
height:70px;
display:flex;
justify-content:center;
place-items:center;
background-color:rgba(236,192,255,.442);
overflow:hidden;
position:relative;
border-radius:10px;
}

#cart-items-container .cart-item .cart-item-image button.remove-button{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0);
    border:0;
    position:absolute;
    z-index:100;
    transition:background-color .4s ease-in-out;
}
#cart-items-container .cart-item .cart-item-image:hover button.remove-button{
    background-color:rgba(0,0,0,.5);
}
#cart-items-container .cart-item .cart-item-image button.remove-button svg{
    width:40px;
    height:40px;
    opacity:0;
    transition:opacity .4s ease-in-out;
}

#cart-items-container .cart-item .cart-item-image:hover button.remove-button svg{
opacity:1;
}
#cart-items-container .cart-item .cart-item-image img{
width:80%;
height:80%;
object-fit:contain;
}

#cart-box .cart-item .cart-item-desc{
display:flex;
flex-direction:column;
text-align:left;
font-weight:500;
font-size:15px;
margin-left:30px;
}

#cart-box .cart-item .cart-item-desc span:nth-child(2){
color:rgb(170,170,170);
font-size:13px;
}

.cart-item-price{
border:1px solid blue;
font-weight:500;
font-size:15px;
}
.white-fade-overflow{
position:absolute;
width:100%;
height:15vh;
left:0;
z-index:99;
transition:opacity .2s ease-in-out
}


.white-fade-overflow.top{

    opacity:0;
    top:0;
    background:linear-gradient(to bottom, white, rgba(255,255,255,.5,rgba(255,255,255,.5)));
}

.white-fade-overflow.bottom{

    opacity:0;
    bottom:0;
    background:linear-gradient(to bottom, white, rgba(255,255,255,.5,rgba(255,255,255,.5)));
}

#cart-box #cart-checkout{

    font-weight:600;
    -webkit-font-smoothing:antialiased;
    font-size:17px;
    display:flex;
    flex-direction:column;
}


CREATE TABLE wp_orders (
    order_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    userid VARCHAR(50) NOT NULL,
    productid VARCHAR(50),
    orderstatus VARCHAR(100),
    quote DECIMAL(10, 2)
) AUTO_INCREMENT = 100;

CREATE TABLE wp_orders (
    order_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    userid VARCHAR(50) NOT NULL,
    productid VARCHAR(50),
    orderstatus VARCHAR(100)
) AUTO_INCREMENT = 100;

INSERT INTO wp_orders (userid, orderstatus) VALUES ('oscaipaul@gmail.com', 'working');


ob_end_clean();
ob_start();

    $checkboxValue = $_POST['myCheckbox'];

               echo "<h2>Selected Items:</h2>";
    echo "<ul>";
  
     echo "Discount action";
echo '<table class="wp-list-table widefat fixed striped">';
    echo '<thead>';
    echo '<tr>';
    echo '<th>Column 1 Header</th>'; // Replace with your actual column headers
    echo '<th>Column 2 Header</th>';
    echo '<th>Column 3 Header</th>';
    echo '<th>Column 4 Header</th>';
    echo '<th>Column 5 Header</th>';
    echo '<th>Column 6 Header</th>';
    echo '</tr>';
    echo '</thead>';
    echo '<tbody>';
    if ( $results ) {
     foreach ( $results as $row ) {
        echo '<tr>';
        ?>
        <form method="post" action="">
        <label for="myCheckbox">Check me:</label>
        <input type="checkbox" id="myCheckbox" name="myCheckbox[]" value="<?php print_r(($row->quote)); ?>" >
        
        <input type="submit" name="discount_button" value="discount">
    </form>
        <?php
        echo '<td>' . esc_html( $row->order_id ) . '</td>'; // Access object properties
        echo '<td>' . esc_html( $row->userid ) . '</td>'; // Access object properties
        echo '<td>' . esc_html( $row->productid ) . '</td>';
        echo '<td>' . esc_html( $row->orderstatus ) . '</td>';
        echo '<td>' . esc_html( $row->quote ) . '</td>';
        echo '</tr>';
    }
    
 echo '</tbody>';
    echo '</table>';
    }
    else {
    echo '<p>No results found.</p>';
    }
 foreach ($checkboxValue as $itemId) {

     echo "<li>Item ID: " . htmlspecialchars($itemId) . "</li>";
   
     
 }



document.getElementById('agree_terms').addEventListener('change', function() {
        const isChecked = this.checked;
        const checkboxValue = this.value;

        fetch('your_php_script.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `myCheckboxStatus=${isChecked}&myCheckboxValue=${checkboxValue}`
        })
        .then(response => response.text())
        .then(data => {
            console.log('Server response:', data);
            // Handle the response from your PHP script if needed
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
   <label for="toggleButton">Check me:</label>
        <input type="submit" id="toggle-button" name="toggle-button" value="toggle">


     $('#toggle-button').on('click', function() {
                var targetId = 'poscai42@outlook.com';
                // Toggle visibility of all rows within the same group, except the first one
                $('.row-group-' + targetId).slice(1).classList.toggle(".hidden-row"); 
            });