#productModal {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 80vh;
    background: white;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    transition: bottom 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
    padding:50px;
}

#productModal.active {
    bottom: 0;

}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

#productModal.active + .modal-backdrop {
    display: block;
}

/* Product Grid Styles */
#productListGrid {
    margin-bottom: 20px;
}

.e-grid .e-rowcell img.gridimg {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.e-grid .e-headercell {
    background-color: #f8f9fa;
    font-weight: bold;
}

.e-grid .e-toolbar {
    background-color: #f8f9fa;
}

.e-grid .e-pager {
    background-color: #f8f9fa;
}

/* Scrollbar styles for grid */
.e-grid .e-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.e-grid .e-content::-webkit-scrollbar-thumb {
    background: #cdcdcd;
    border-radius: 4px;
}

.e-grid .e-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

/* Hover effect for grid rows */
.e-grid .e-row:hover {
    background-color: #f0f8ff !important;
}