
/* 收藏和点赞按钮样式覆盖 */
/* 使用最高优先级的选择器 */

/* 统一按钮大小 */
.onenav-share-container .onenav-share-btn {
  width: 120px !important;
  height: 36px !important;
  text-align: center !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 统一按钮内部元素样式 */
.onenav-share-container .onenav-share-btn .btn-icon,
.onenav-share-container .onenav-share-btn .btn-text,
.onenav-share-container .onenav-share-btn .btn-count {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.onenav-share-container .onenav-share-btn .btn-icon {
  margin-right: 4px !important;
  font-size: 14px !important;
}

.onenav-share-container .onenav-share-btn .btn-text {
  margin-right: 4px !important;
}

.onenav-share-container .onenav-share-btn .btn-count {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  min-width: auto !important;
}
body .onenav-share-container .onenav-bookmark-btn.bookmarked,
body .onenav-share-container .onenav-bookmark-btn.liked,
html body .onenav-share-container .onenav-bookmark-btn.bookmarked,
html body .onenav-share-container .onenav-bookmark-btn.liked {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: #667eea !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
}

body .onenav-share-container .onenav-like-btn.liked,
html body .onenav-share-container .onenav-like-btn.liked {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
  border-color: #f093fb !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(240, 147, 251, 0.3) !important;
}

.onenav-share-container .onenav-like-btn.liked .btn-count,
.onenav-share-container .onenav-bookmark-btn.bookmarked .btn-count,
.onenav-share-container .onenav-bookmark-btn.liked .btn-count {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* 分享按钮美化 */
.onenav-share-container .onenav-share-toggle-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
  border-color: #4facfe !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(79, 172, 254, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.onenav-share-container .onenav-share-toggle-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(79, 172, 254, 0.4) !important;
}

.onenav-share-container .onenav-share-toggle-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(79, 172, 254, 0.2) !important;
}

/* 分享面板美化 */
.onenav-share-panel {
  border-radius: 8px !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* 分享面板暗色模式适配 */
html.io-black-mode .onenav-share-panel {
  background: rgba(45, 46, 47, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

.onenav-share-panel .share-platform {
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.onenav-share-panel .share-platform:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 分享平台按钮暗色模式适配 */
html.io-black-mode .onenav-share-panel .share-platform {
  background-color: var(--muted-bg-color, #24262a) !important;
  border-color: var(--muted-bg-color-l, #1b1c1e) !important;
  color: var(--main-color, #b4b8bf) !important;
}

html.io-black-mode .onenav-share-panel .share-platform:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
