/* share.css —— 商品/需求详情页 分享 · 海报（v2 · 2026-09-12） */

/* 详情页标题区「分享海报」按钮 */
.share-fab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 9px 18px;
  background: #c93628;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(201, 54, 40, .25);
  transition: background .15s ease, transform .1s ease;
}
.share-fab:hover { background: #b22f22; }
.share-fab:active { transform: translateY(1px); }
.share-fab-ico { font-size: 17px; line-height: 1; }

/* 弹窗遮罩 */
.share-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.share-mask[hidden] { display: none; }

.share-modal {
  position: relative;
  width: 372px;
  max-width: 100%;
  max-height: 94vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}
.share-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #b3a89d;
  cursor: pointer;
}
.share-close:hover { color: #6b5f55; }
.share-title { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: #241d17; }

.share-poster-wrap {
  position: relative;
  background: #f4e6d7;
  border-radius: 14px;
  padding: 8px;
  display: flex;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.share-poster {
  /* ⚠️ 这里**不能**写 width:100% + height:auto —— 海报是 1080×1350 的竖版，
     在矮视口里会把下面的分享按钮顶出可视区，用户得滚动才能点到「分享到微信」。
     改成只给 max-width / max-height（宽高都 auto）：canvas 是有固有比例的替换元素，
     浏览器会按 4:5 的比例塞进这个盒子里，既不变形也不会挤掉按钮。 */
  max-width: 100%;
  max-height: 45vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  display: block;
  background: #f4e6d7;
}
.share-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8f3027;
  font-size: 14px;
  font-weight: 600;
}

.share-actions {
  display: grid;
  /* 2 列：两个宽按钮（分享到微信 / 分享到其他应用）各占满一行，
     剩下的「复制图文链接」「保存图片」正好并排铺满一行。
     2026-09-15：原来次级按钮是 3 个（多一个「复制链接」），所以是 3 列；
     那个重复按钮去掉后若仍用 3 列，两个按钮会只占左侧 2/3、右边空一截。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.share-actions button {
  padding: 11px 6px;
  border: 1px solid #efe2d5;
  border-radius: 11px;
  background: #f8efe4;
  color: #8f3027;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .12s ease, transform .1s ease, background .12s ease;
}
.share-actions button.primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #d2402f, #b02b1f);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(201, 54, 40, .28);
}
.share-actions button:hover { filter: brightness(.98); }
.share-actions button:not(.primary):hover { background: #f3e6d7; }
.share-actions button:active { transform: translateY(1px); }
/* ---- 分享到微信 / 其他应用（2026-09-14 新增）---- */
/* 用 wide 跨满整行（现在是 3 列网格，两个宽按钮各占一行） */
.share-actions button.wide { grid-column: 1 / -1; }
/* 「分享到其他应用」不是主按钮，但要比普通次级按钮显眼一档 */
.share-actions button.share-apps { background: #fff; border: 1px solid #e3d2c0; color: #8f3027; font-weight: 700; }
.share-actions button.share-wx { display: flex; align-items: center; justify-content: center; gap: 7px; }
/* ⚠️ 别在这里用 content:'分享' 之类的硬编码中文做装饰 —— 按钮文案由 share.js 按语言输出，
   CSS 里的字既跟不上中英切换，也和按钮文字重复。 */

/* 微信内置浏览器里的右上角引导（就地展开，不叠弹窗） */
.share-wx-guide {
  display: none;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: #f1f8f2;
  border: 1px solid #cfe6d2;
  color: #1d6b25;
  font-size: 12.5px;
  line-height: 1.75;
}
.share-wx-guide.on { display: block; }

.share-hint {
  margin: 12px 2px 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #a4988c;
}
.share-tip {
  margin: 8px 0 0;
  min-height: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #2e9b5b;
}

/* 移动端微调 */
@media (max-width: 480px) {
  .share-modal { width: 100%; }
}