/* ==========================================================================
   Promo side panel — 右侧垂直居中推广位（Halloween 2026 原型）
   --------------------------------------------------------------------------
   一个活动的全部差异都集中在四处，换活动只改这四处：
     1) HTML：容器 href / data-promo / 文案 / Learn More 链接
     2) 配色：--promo-a / --promo-b（下方 .promo-side 内）
     3) 文案：.promo-kicker / .promo-title / .promo-tab-text / .promo-pill-text
     4) 关闭记忆用的 cookie 值与 data-promo 的 id 保持一致
   其余（定位、层级、避让、展开、最小化、响应式、打印）与活动无关。

   三种形态（同一个 .promo-side 容器内）：
     .promo-card  桌面展开：标题 + 优惠 + Learn More + 最小化
     .promo-tab   中等宽度：竖排窄条，hover/focus 展开成 .promo-card
     .promo-pill  手机 / 已最小化：图标 + 折扣数字
   ========================================================================== */

.promo-side {
  /* 换活动只改这两个颜色 */
  --promo-a: #F97316;
  --promo-b: #DC2626;

  position: fixed;
  right: 0;                      /* 窄条/胶囊形态贴边；宽屏卡片形态在下方改为 1.75rem */
  top: 75%;                      /* 视口高度的 3/4 处 */
  z-index: 1050;                 /* 低于 #backToTop(1100) 与 header(1200) */
  transform: translateY(-50%);
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 1) 桌面展开卡片 ---------- */

.promo-card {
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 212px;
  padding: 18px 18px 16px;
  background: linear-gradient(160deg, var(--promo-a), var(--promo-b));
  border-radius: 16px 0 0 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.3);
  position: relative;
}

.promo-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
}

.promo-kicker svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.promo-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 0.55rem 0.9rem;
  background: #fff;
  color: #C2410C;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

.promo-cta:hover,
.promo-cta:focus-visible {
  color: #9A3412;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
}

.promo-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.promo-cta svg {
  width: 14px;
  height: 14px;
}

/* 最小化按钮：写 cookie，7 天内只显示 .promo-pill */
.promo-min {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.promo-min:hover,
.promo-min:focus-visible {
  background: rgba(255, 255, 255, 0.38);
}

.promo-min:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.promo-min svg {
  width: 12px;
  height: 12px;
}

/* ---------- 2) 中等宽度：竖排窄条 ---------- */

.promo-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 46px;
  padding: 14px 0 16px;
  background: linear-gradient(180deg, var(--promo-a), var(--promo-b));
  color: #fff;
  text-decoration: none;
  border-radius: 14px 0 0 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  transition: transform .2s ease, box-shadow .2s ease;
}

.promo-tab:hover,
.promo-tab:focus-visible {
  color: #fff;
  transform: translateX(-4px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.36);
}

.promo-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.promo-tab svg {
  width: 20px;
  height: 20px;
}

.promo-tab-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------- 3) 手机 / 已最小化：小胶囊 ---------- */

.promo-pill {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 40px;
  margin-left: auto;
  padding: 10px 0 12px;
  background: linear-gradient(180deg, var(--promo-a), var(--promo-b));
  color: #fff;
  text-decoration: none;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28);
}

.promo-pill:hover,
.promo-pill:focus-visible {
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.34);
}

.promo-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.promo-pill svg {
  width: 18px;
  height: 18px;
}

.promo-pill-text {
  writing-mode: vertical-rl;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ---------- 显示规则 ---------- */

/* 宽屏（≥1920px）常驻展开卡片：
   与语言卡、回到顶部按钮统一右缩进 1.75rem，右侧边缘对齐；
   卡片宽 212px，正文容器 max-width 1440px，此时卡片仍落在正文右侧空白里。 */
@media (min-width: 1920px) {
  .promo-side {
    right: 1.75rem;
  }

  .promo-card {
    display: flex;
    border-radius: 16px;
  }

  .promo-tab {
    display: none;
  }

  .promo-pill {
    border-radius: 12px;
  }
}

/* 中等宽度：默认窄条贴边，hover / 键盘聚焦时展开成卡片 */
@media (min-width: 641px) and (max-width: 1919px) {
  .promo-side:hover .promo-card,
  .promo-side:focus-within .promo-card {
    display: flex;
  }

  .promo-side:hover .promo-tab,
  .promo-side:focus-within .promo-tab {
    display: none;
  }
}

/* 手机：只显示小胶囊 */
@media (max-width: 640px) {
  .promo-card,
  .promo-tab {
    display: none;
  }

  .promo-side {
    right: -4px;               /* 吃掉 4px，可见 36px，尽量不压正文 */
  }

  .promo-pill {
    display: flex;
  }
}

/* 已最小化（cookie）：任何宽度都只显示小胶囊 */
html.promo-minimized .promo-card,
html.promo-minimized .promo-tab {
  display: none !important;
}

html.promo-minimized .promo-pill {
  display: flex;
}

/* 矮屏（横屏手机、过小窗口）不显示，避免和底部元素挤在一起 */
@media (max-height: 640px) {
  .promo-side {
    display: none;
  }
}

/* 语言建议卡出现时自动上移：75% 位置在多数视口会与底部语言卡重叠，
   用 min() 把中心点夹到「语言卡顶边再往上 320px」以内，避免互相压盖。 */
body:has(#langSuggest) .promo-side {
  top: min(75%, calc(100% - 340px));
}

@media (prefers-reduced-motion: reduce) {
  .promo-tab,
  .promo-cta {
    transition: none;
  }

  .promo-tab:hover,
  .promo-tab:focus-visible,
  .promo-cta:hover {
    transform: none;
  }
}

@media print {
  .promo-side {
    display: none;
  }
}