.wbq-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:9999}
.wbq-modal{position:fixed;right:20px;top:20px;width:360px;max-width:95vw;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:16px;display:none;z-index:10000;font-family:system-ui}
.wbq-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.wbq-list{max-height:320px;overflow:auto;margin:8px 0;border:1px solid #eee;border-radius:8px}
.wbq-item{display:grid;grid-template-columns:48px 1fr auto;gap:8px;padding:8px;border-bottom:1px solid #f2f2f2}
.wbq-item img{width:48px;height:48px;object-fit:cover;border-radius:6px}
.wbq-item .name{font-size:14px}
.wbq-item .qty{display:flex;gap:6px;align-items:center}
.wbq-footer{display:grid;gap:8px}
.wbq-row{display:grid;gap:6px}
.wbq-row input{padding:8px 10px;border:1px solid #ddd;border-radius:8px;width:100%}
.wbq-actions{display:flex;gap:8px;justify-content:flex-end}
.wbq-button{background:#10b981;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer}
.wbq-button[disabled]{opacity:.5;cursor:not-allowed}
.wbq-icon{position:fixed;right:20px;bottom:20px;background:#0ea5e9;color:#fff;border-radius:999px;padding:12px 14px;font-weight:700;cursor:pointer;z-index:10001}
.wbq-total{font-weight:700;text-align:right;padding:8px}
button.wbq-dec, button.wbq-inc, button.wbq-rem, button.wbq-close { padding: 4px 10px; border-radius: 12px; margin: 0; height: 15px; top: 0; display: flex ; align-content: center; justify-content: center; align-items: center; padding-top: 0; }

button.button.wbq-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: #0048b4;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    font-size: 16px;
}

.wbq-toast {
  position: fixed;
  top: 7%;
  right: 20px;
  background: #10b981;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 10002;
  font-size: 14px;
}


.wbq-modal {
    top: 15%;
}

@media only screen and (max-width: 600px) {
    .wbq-modal {
        right: 2%;
        top: 68px;
    }

}