/* cx-share.css —— 一键分享按钮
   摆法 D：hero 下面一条（靠右一颗）+ 正文末尾一条（带一句文案）
   样式：描边，平时安静，鼠标移上去才出各家品牌色
   留白对齐全站基准 80 / 30 / 20
   2026-09-30 */

#cx-share-top,
#cx-share-end {
  --sh-ink: #3F4D51;
  --sh-muted: #53666F;
  --sh-line: #E3DED5;
  --sh-cream: #F7F2EB;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}
#cx-share-top *, #cx-share-end * { box-sizing: border-box; }

/* ---------- 共用：一组图标 ---------- */
.cx-sh-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cx-sh-lbl {
  font: 700 10px/1 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sh-muted);
  margin-right: 4px;
  white-space: nowrap;
}

.cx-sh-ic {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.cx-sh-ic svg { width: 16px; height: 16px; fill: var(--sh-muted); transition: fill .16s ease; display: block; }
.cx-sh-ic:hover { transform: translateY(-1px); }
.cx-sh-ic:focus-visible { outline: 2px solid #C98B2C; outline-offset: 2px; }

/* 平时不上色，hover 才显出各家颜色 */
.cx-sh-ic[data-k="wa"]:hover { background: #25D366; border-color: #25D366; }
.cx-sh-ic[data-k="fb"]:hover { background: #1877F2; border-color: #1877F2; }
.cx-sh-ic[data-k="x"]:hover  { background: #000;    border-color: #000; }
.cx-sh-ic[data-k="li"]:hover { background: #0A66C2; border-color: #0A66C2; }
.cx-sh-ic[data-k="cp"]:hover { background: var(--sh-ink); border-color: var(--sh-ink); }
.cx-sh-ic:hover svg { fill: #fff; }

/* 复制成功的小提示 */
.cx-sh-ic { position: relative; }
.cx-sh-ic .cx-sh-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--sh-ink); color: #fff;
  font: 700 11px/1 Lato, sans-serif; letter-spacing: .04em;
  padding: 6px 9px; border-radius: 5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.cx-sh-ic.is-copied .cx-sh-tip { opacity: 1; }

/* 手机上那一颗 Share（调系统分享面板） */
.cx-sh-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--sh-line); background: #fff;
  border-radius: 999px; padding: 9px 17px 9px 14px;
  font: 700 11px/1 Lato, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sh-ink); cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.cx-sh-pill svg { width: 15px; height: 15px; fill: var(--sh-ink); }
.cx-sh-pill:hover { background: var(--sh-cream); border-color: #D6CEC2; }
.cx-sh-pill:focus-visible { outline: 2px solid #C98B2C; outline-offset: 2px; }

/* ---------- 顶部那一条：hero 下面，靠右 ---------- */
#cx-share-top {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 16px 80px 2px;
  background: transparent;
}

/* ---------- 文末那一条 ---------- */
#cx-share-end { padding: 0 80px; margin: 46px 0 44px; }
#cx-share-end .cx-sh-box {
  border-top: 1px solid var(--sh-line);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
#cx-share-end .cx-sh-txt { flex: 1 1 260px; min-width: 0; }
#cx-share-end .cx-sh-txt b {
  display: block;
  font: 700 17px/24px Arvo, Georgia, serif;
  color: var(--sh-ink);
}
#cx-share-end .cx-sh-txt i {
  font-style: normal; font-size: 14px; line-height: 21px; color: var(--sh-muted);
}
#cx-share-end .cx-sh-ic { width: 38px; height: 38px; }
#cx-share-end .cx-sh-ic svg { width: 17px; height: 17px; }

/* ---------- 留白基准 ---------- */
@media (max-width: 1024px) {
  #cx-share-top { padding-left: 30px; padding-right: 30px; }
  #cx-share-end { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
  #cx-share-top { padding: 14px 20px 0; }
  #cx-share-end { padding-left: 20px; padding-right: 20px; margin: 36px 0 34px; }
  #cx-share-end .cx-sh-box { padding-top: 20px; }
  #cx-share-end .cx-sh-txt b { font-size: 16px; line-height: 23px; }
  /* 手机上列平台时图标会换行，给它们自己一行 */
  #cx-share-end .cx-sh-set { flex: 1 1 100%; }
}

/* 打印和没有 JS 的时候不占地方 */
@media print { #cx-share-top, #cx-share-end { display: none; } }