/* Compare toggle button (3rd icon alongside cart/wishlist) + floating compare tray.
   Shared by category.php, brand.php, search-result.php — see assets/js/compare-widget.js. */
.qcmp-toggle.qbp-icon-btn.active {
  background: var(--q-primary);
  color: #fff;
}

.qcmp-tray {
  position: fixed;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  z-index: 200;
  background: #0f1b2a;
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: bottom 220ms cubic-bezier(.4,0,.2,1);
}
.qcmp-tray.show { bottom: 24px; }
.qcmp-tray span { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.qcmp-tray button.go {
  background: var(--q-primary, #1ea6d3);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms;
}
.qcmp-tray button.go:hover { transform: translateY(-1px); }
.qcmp-tray button.clear {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 13px;
  padding: 6px;
}
.qcmp-tray button.clear:hover { color: #fff; }

@media (max-width: 480px) {
  .qcmp-tray { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .qcmp-tray.show { bottom: 12px; }
}