/* ==========================================================================
   商品定制画布 —— 设计缩略图 / 弹窗 / 后台样式
   ========================================================================== */

/* ---------- 缩略图列表 ---------- */
.pc-designs { margin-top: 10px; }

.pc-designs-title {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 600;
}

.pc-designs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pc-design-item {
  position: relative;
  width: 72px;
  text-align: center;
}

.pc-design-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
}

.pc-design-thumb:hover {
  border-color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.pc-design-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-design-meta {
  margin-top: 3px;
  font-size: 10px;
  color: #999;
  line-height: 1.3;
  word-break: break-all;
}

.pc-design-no { display: block; }

.pc-design-lens {
  display: inline-block;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 8px;
  background: #f2f2f2;
  color: #666;
}

.pc-design-actions {
  position: absolute;
  top: -6px;
  right: -6px;
}

.pc-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}

.pc-dl:hover { background: #000; color: #fff; }

/* 购物车行内：稍微收窄，避免挤压表格 */
.pc-designs-cart .pc-design-item { width: 60px; }
.pc-designs-cart .pc-design-thumb { width: 60px; height: 60px; }
.pc-designs-cart .pc-design-meta { font-size: 9px; }

/* 迷你购物车（右上角侧边抽屉 cart/mini.blade.php）：
   抽屉只有 ~380px 宽，商品行里还要放选择框 + 商品图 + 文字，
   72px 的缩略图会把行撑爆（设计单号也会被折成两行）。
   这里收小到 48px，并去掉 meta 里的单号（抽屉里空间不够，看大图时弹窗会显示）。 */
.pc-designs-mini { margin-top: 6px; }
.pc-designs-mini .pc-designs-list { gap: 6px; }
.pc-designs-mini .pc-design-item { width: 48px; }
.pc-designs-mini .pc-design-thumb { width: 48px; height: 48px; border-radius: 6px; }
.pc-designs-mini .pc-design-meta { margin-top: 2px; font-size: 9px; }
.pc-designs-mini .pc-design-no { display: none; }
.pc-designs-mini .pc-design-lens { margin-top: 0; }

/* 结账页 */
.pc-checkout-designs {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px dashed #e0e0e0;
  border-radius: 10px;
}

.pc-checkout-row + .pc-checkout-row { margin-top: 10px; }

.pc-checkout-product {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

/* 后台订单详情：紧凑一些 */
.pc-designs-admin .pc-design-item { width: 64px; }
.pc-designs-admin .pc-design-thumb { width: 64px; height: 64px; }

/* 订单支付页（弃单恢复落地页）：
   商品行右侧还有价格/数量，72px 的缩略图会把行撑开；
   这里收到 64px，与「订单详情」区块的观感保持一致。 */
.pc-designs-pay { margin-top: 8px; }
.pc-designs-pay .pc-designs-title { margin-bottom: 4px; }
.pc-designs-pay .pc-design-item { width: 64px; }
.pc-designs-pay .pc-design-thumb { width: 64px; height: 64px; }
.pc-designs-pay .pc-designs-list { gap: 8px; }

/* ---------- 查看弹窗 ---------- */
.pc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.pc-lightbox.active { display: flex; }

.pc-lightbox-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .75);
}

.pc-lightbox-body {
  position: relative;
  z-index: 2;
  width: min(92vw, 720px);
  max-height: 92vh;
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.pc-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.pc-lightbox-title { font-weight: 700; font-size: 15px; }
.pc-lightbox-no { font-size: 12px; color: #999; }

.pc-lightbox-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.pc-lightbox-close:hover { background: #eaeaea; }

.pc-lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  overflow: auto;
  padding: 14px;
}

.pc-lightbox-stage img {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.pc-lightbox-loading {
  position: absolute;
  color: #888;
  font-size: 13px;
}

.pc-lightbox-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

.pc-lightbox-info { font-size: 12px; color: #777; }

.pc-lightbox-btns { display: flex; gap: 8px; }

/* ---------- 商品页入口按钮 ---------- */
.pc-start-customize { border-radius: 30px; }

/* 品牌橙：底色 / 描边 #fd560f，文字 #fff。
   ⚠️ 选择器为什么要写满 `.pc-entry-wrap .btn.pc-start-customize`：
     按钮本身的 class 是 `btn btn-dark ... pc-start-customize`，Bootstrap 的
     `.btn-dark` 给了 #212529 底 + 同色描边，而且 `.btn-dark:hover` 还会再变深。
     单写 `.pc-start-customize` 跟 `.btn-dark` 同权重(0,1,0)，只能靠加载顺序取胜，
     一旦样式表顺序变了（比如主题换了加载位置）就会悄悄退回黑色。
     这里用 (0,3,0) / hover (0,4,0) 压过去，跟加载顺序无关。
     ⚠️ 改完必须重新发布到 public/plugin/product_customizer/css/，见 README「七、前端」。 */
.pc-entry-wrap .btn.pc-start-customize {
  background-color: #fd560f;
  border-color: #fd560f;
  color: #fff;
}

/* hover / focus / active 用同色系加深一档，保留"按得动"的反馈。
   必须显式覆盖，否则鼠标移上去会跳回 Bootstrap 的深灰 #1c1f23。 */
.pc-entry-wrap .btn.pc-start-customize:hover,
.pc-entry-wrap .btn.pc-start-customize:focus,
.pc-entry-wrap .btn.pc-start-customize:focus-visible,
.pc-entry-wrap .btn.pc-start-customize:active {
  background-color: #e64d0e;
  border-color: #e64d0e;
  color: #fff;
}

/* 按下再深一档 */
.pc-entry-wrap .btn.pc-start-customize:active {
  background-color: #cc440c;
  border-color: #cc440c;
}

/* 焦点环跟着品牌色走（Bootstrap 默认是深灰 rgba(33,37,41,.5)，压在橙底上很脏） */
.pc-entry-wrap .btn.pc-start-customize:focus,
.pc-entry-wrap .btn.pc-start-customize:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(253, 86, 15, .35);
}

/* 左右抖动，吸引点击：每 3.2s 轻微晃一次（晃动集中在周期末段，其余时间静止） */
@keyframes pc-nudge-x {
  0%, 70%, 100% { transform: translateX(0); }
  74%  { transform: translateX(-5px); }
  79%  { transform: translateX(5px); }
  84%  { transform: translateX(-4px); }
  89%  { transform: translateX(4px); }
  94%  { transform: translateX(-2px); }
  97%  { transform: translateX(2px); }
}

.pc-start-customize {
  animation: pc-nudge-x 3.2s cubic-bezier(.36, .07, .19, .97) 1s infinite;
}

/* 用户已经把注意力放上来（悬停/聚焦/按下）→ 停止抖动，避免干扰操作 */
.pc-start-customize:hover,
.pc-start-customize:focus,
.pc-start-customize:focus-visible,
.pc-start-customize:active,
.pc-entry-wrap:hover .pc-start-customize {
  animation: none;
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .pc-start-customize { animation: none; }
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 749px) {
  .pc-lightbox-body { width: 94vw; }
  .pc-lightbox-stage img { max-height: 52vh; }
  .pc-design-item { width: 64px; }
  .pc-design-thumb { width: 64px; height: 64px; }
}

/* ==========================================================================
   后台 · 定制款商品设置页
   ========================================================================== */
.pc-selected-list { display: flex; flex-direction: column; gap: 10px; }

.pc-selected-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  background: #fafafa;
}

.pc-sel-img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  flex-shrink: 0;
}

.pc-sel-body { flex: 1; min-width: 0; }
.pc-sel-name { font-weight: 600; font-size: 14px; color: #222; margin-bottom: 2px; word-break: break-word; }
.pc-sel-meta { font-size: 12px; color: #999; margin-bottom: 6px; }
.pc-sel-meta a { color: #666; }
.pc-sel-type { display: flex; align-items: center; gap: 8px; }
.pc-sel-type label { font-size: 12px; color: #666; margin: 0; white-space: nowrap; }
.pc-sel-type .form-select { max-width: 280px; }

.pc-sel-remove { flex-shrink: 0; line-height: 1; font-size: 18px; padding: 2px 9px; }

.pc-add-box { position: relative; }
.pc-search-result {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  margin-top: 4px;
}
.pc-sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f4f4f4;
}
.pc-sr-item:last-child { border-bottom: none; }
.pc-sr-item:hover { background: #f7f7f7; }
.pc-sr-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; background: #fff; }
.pc-sr-name { flex: 1; font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sr-id { font-size: 12px; color: #aaa; }
.pc-sr-empty { padding: 14px 12px; font-size: 13px; color: #999; text-align: center; }

/* ==========================================================================
   后台设置页：交付配置（下载按钮开关 / 弹窗提示文案 / 邮件下载链接）
   ========================================================================== */
.pc-switch-item {
  padding: 12px 14px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fcfcfd;
}
.pc-switch-item .form-check { margin: 0; }
.pc-switch-hint { font-size: 12px; margin-top: 6px; line-height: 1.5; }

/* 弹窗内提示行（后台「弹窗提示文案」配置，非空即显示） */
.pc-lightbox-note {
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: #f0f7f0;
  border: 1px solid #d6e6d6;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3d6b3d;
}

/* 后台设置页：弹窗提示文案输入框（独立配置项，与开关同级排版） */
.pc-switch-item textarea {
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.pc-switch-item .btn-link {
  font-size: 12px;
  text-decoration: none;
  padding-left: 0;
}