table.custom-variation-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 13px;
}
table.custom-variation-table thead th {
background-color: #f2f2f2;
padding: 5px 6px;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.4px;
text-align: center;
border: 1px solid #ddd;
}
table.custom-variation-table tbody td {
border: 1px solid #ddd;
padding: 5px 6px;
text-align: center;
vertical-align: middle;
line-height: 1.2;
} table.custom-variation-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
} table.custom-variation-table tbody tr:hover {
background-color: #eef7f0;
} .qty-control {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
height: 30px;
padding: 0;
overflow: hidden;
}
.qty-control input.qty-input {
width: 36px;
height: 100%;
text-align: center;
border: none;
font-size: 13px;
padding: 0;
box-sizing: border-box;
}
.qty-control button {
background: #eee;
border: none;
height: 100%;
padding: 0 8px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
} .note-input {
width: 90px;
padding: 4px 5px;
font-size: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
} .single-add {
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #005b31;
color: white;
border: none;
padding: 0 12px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.single-add:hover {
background-color: #007c3b;
} #add-selected {
margin-top: 20px;
padding: 8px 14px;
background: #005b31;
color: #fff;
border: none;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}
#add-selected:hover {
background: #007c3b;
} .custom-variation-table td .action-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 4px 0;
} .table-scroll {
overflow-x: auto;
width: 100%;
}
.table-scroll table {
min-width: 600px; } @media (max-width: 768px) {
table.custom-variation-table {
font-size: 12px;
}
.single-add, #add-selected {
font-size: 11px;
padding: 6px 10px;
}
.qty-control input.qty-input,
.note-input {
font-size: 11px;
}
} .btn-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #fff;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-left: 8px;
vertical-align: middle;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}