#cwc-modal {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
direction: rtl;
}
#cwc-modal.cwc-visible { display: flex; }
#cwc-modal.cwc-hidden { display: none; }
.cwc-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
}
.cwc-content {
position: relative;
width: 90%;
max-width: 1100px;
background: #fff;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
border: 3px solid #ccc;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
} .cwc-header {
background: #555;
color: #fff;
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.cwc-header h3 {
margin: 0;
font-size: 16px;
color: #fff;
}
.cwc-close {
position: absolute;
right: 15px;
background: #fff;
color: #c00;
border: 2px solid #c00;
font-size: 20px;
line-height: 1;
padding: 2px 8px;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
}
#cwc-results {
overflow-y: auto;
padding: 15px;
} .cwc-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.cwc-table th, .cwc-table td {
border: 1px solid #eee;
padding: 15px;
vertical-align: middle;
} .cwc-table tbody tr:nth-child(even) {
background: #fdfdfd;
} .cwc-label-col {
background: #d1f2e5 !important;
color: #1e7e55;
font-weight: bold;
width: 20%;
} .cwc-remove {
background: #ff7675;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
font-size: 13px;
}
.cwc-img img {
max-width: 150px;
height: auto;
margin: 0 auto 10px;
display: block;
}
.cwc-title {
font-weight: bold;
color: #333;
font-size: 14px;
}
.cwc-instock { color: #00b894; font-weight: bold; }
.cwc-outstock { color: #d63031; font-weight: bold; }