.wc-table-scroll {
    max-height: 413px;
    overflow-y: auto; /* auto = show scrollbar only when needed */
    border-radius: 25px;
    background-color: #222f30;
    position: relative;
    box-shadow: inset 0 0 0 1px #222f30;
    border: 1px solid #293536;
    margin-top: 30px;
}/* Hide scrollbar for all browsers */
.wc-table-scroll {
    overflow-y: scroll; /* still scrollable */
    -ms-overflow-style: none;  /* IE & Edge */
    scrollbar-width: none;      /* Firefox */
}

/* Chrome, Safari, Opera */
.wc-table-scroll::-webkit-scrollbar {
    display: none;
}


table {
    background-color: #222f30;}
    
    
   #compound-table tr:hover {
    background: #222f30 !Important;
} 

tr:hover {
    background: #cef79e;
   
}    



 tr:hover td {
 
  color: #222f30 !important;  } 
#wcProductTable tbody tr td:nth-child(2) {
    font-weight: bold;
}

tr.visible-desktop:hover{background:none;}
input#wcSearch {
    position: absolute;
    width: 100%;
    left: 0;
    top: -50px;
    border-radius: 9px;
    line-height: 2rem;
    background: #e5e9eb;
    border: none;
}

#wcProductTable thead th {
    background: #ffffff !important;
    border: none;
}

td {
   font-family: "Roboto Mono", Sans-serif;
    font-weight: 400;
    font-size: 14px;
    color:white;
    border:none !important;
}
th {
    text-align: left;
}
/* Placeholder text color */
#wcSearch::placeholder {
    color: #222f30;
    opacity: 1; /* Ensure full color, not faded */
}

/* Optional: focus state */
#wcSearch:focus {
    border-color: #00aaff; /* Example accent color */
    box-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
}

#wcProductTable {
    width: 100%;
    border-collapse: collapse;
}

#wcProductTable thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

#wcProductTable th,
#wcProductTable td {
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.wc-select-product {
    cursor: pointer;
}

.wc-az-filter button {
    background-color: #222F30;
    border: 1px solid #222F30;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem 1rem;
    text-align: center;
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.wc-az-filter button:hover {
    background: #cef79e !Important;
    color: #222f30 !Important;
    border-color: #cef79e;
}

.wc-az-filter button.active {
    background: #cef79e;
    color: #222f30;
    border-color: #cef79e;

}

div#wcAddToCartSelected {
    position: absolute;
    left: 0;
    bottom: -72px;
}

#wcAddToCartSelected.disabled {
    opacity: 0.5;
    pointer-events: none; /* makes it unclickable */
}
/* Add this to your main_table.css */
#wcAddToCartSelected {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#wcAddToCartSelected.active {
    opacity: 1;
    pointer-events: auto;
}
/* Hover cursor and selected row style */
#wcProductTable tbody tr {
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* Selected row style */
#wcProductTable tbody tr.selected {
    background-color: #cef79e !important;
}

#wcProductTable tbody tr.selected td {
    color: #222f30 !important;  /* Forces text inside <td> to dark color */
}

/* Style checkboxes */
#wcProductTable tbody tr.selected .wc-select-product {
    accent-color: #c8ef9c; /* checkmark color */
    background-color: #222f30 !important; /* background when checked */
}

/* Ensure unchecked boxes keep default background */
#wcProductTable tbody tr .wc-select-product {
    accent-color: #222f30 !important; /* base color when unchecked (tick will not appear) */
    background-color: #fff; /* default background if you want white unchecked */
}

@media (max-width: 900px) {
input#wcSearch{
    left: 0;
    width:100% !important;
    top: -66px !Important;

}
    
    .wc-az-filter {
    margin: 0 !Important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
}
}

@media (max-width: 620px) {
input#wcSearch{
    left: 0;
    top: -40px !important;
    width:100% !important;
}
    
    .wc-az-filter {
    margin-top: 25px !Important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}
}