/* ==========================================================
   八戒牧业 · 营销活动页主题（market.html）
   依赖 css/style.css + css/app.css，只做「活动主题色」与
   活动页专属元素。四种主题由 <body data-theme> 切换，
   后台新建活动时可选，实现同一页面的多样视觉。
   ========================================================== */

/* ---------- 加载 / 空态 ---------- */
.cp-loading{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted)}
.cp-spinner{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--green-600);border-radius:50%;animation:cpSpin .8s linear infinite}
@keyframes cpSpin{to{transform:rotate(360deg)}}
.cp-empty{min-height:62vh;display:flex;align-items:center;text-align:center;padding:70px 0}
.cp-empty .container{width:100%}
.cp-empty-icon{font-size:52px;margin-bottom:12px}
.cp-empty h1{font-size:26px;color:var(--green-900);margin-bottom:10px}
.cp-empty p{color:var(--muted);margin-bottom:24px}
.cp-empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- 横幅 ---------- */
.cp-hero{padding:74px 0 68px;overflow:hidden}
.cp-hero .container{position:relative;z-index:2}
.cp-tagline{
  display:inline-block;margin-bottom:12px;padding:5px 15px;border-radius:99px;
  font-size:12.5px;font-weight:700;letter-spacing:2px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;
}
.cp-hero h1{font-size:46px;letter-spacing:2px;line-height:1.22}
.cp-hero .lead{max-width:720px}
/* 有主图时：文字压在图上，加暗角保证可读 */
.cp-hero.has-img{padding:104px 0 96px;background-size:cover;background-position:center}
.cp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42}
.cp-hero-video{opacity:.55}
/* 分享卡片海报：服务端为微信转发卡片注入的顶部横幅（保证卡片能抓到首图）。
   活动配置 hero 时前台 JS 会移除它，改用 hero 的大图暗角样式 */
.cp-share-banner{display:block;width:100%;height:clamp(180px,38vw,340px);object-fit:cover;object-position:center}
.cp-hero.has-img::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.24) 100%);
}
.cp-hero.has-img h1{text-shadow:0 3px 20px rgba(0,0,0,.5)}
.cp-hero.has-img .lead{text-shadow:0 2px 12px rgba(0,0,0,.45)}

/* ---------- 主题色：红（节庆，默认） ---------- */
body[data-theme="red"] .cp-hero{
  background:
    radial-gradient(720px 280px at 88% -30%,rgba(251,191,36,.25) 0%,transparent 62%),
    radial-gradient(520px 220px at 6% 120%,rgba(251,191,36,.14) 0%,transparent 60%),
    linear-gradient(135deg,#7f1d1d 0%,#b91c1c 55%,#9a3412 100%);
}
body[data-theme="red"] .cp-hero h1 em{color:#fbbf24;font-style:normal}
body[data-theme="red"] .cp-hero .crumb{color:rgba(255,255,255,.8)}
body[data-theme="red"] .cp-hero .crumb a{color:#fecaca}
body[data-theme="red"] .cd-title{color:#fbbf24}
body[data-theme="red"] .cd-cell{color:var(--red-600)}
body[data-theme="red"] .story-card{background:#fffbeb;border-color:#fde68a;border-left-color:#d97706}
body[data-theme="red"] .story-card h3{color:#92400e}
body[data-theme="red"] .store-tip-note{color:var(--red-600)}

/* ---------- 主题色：绿（生态） ---------- */
body[data-theme="green"] .cp-hero{
  background:
    radial-gradient(700px 260px at 86% -28%,rgba(190,242,100,.22) 0%,transparent 62%),
    linear-gradient(135deg,#0f3d22 0%,#1c7a3f 55%,#3fa04b 100%);
}
body[data-theme="green"] .cp-hero h1 em{color:#bef264;font-style:normal}
body[data-theme="green"] .cp-hero .crumb{color:#a9d6ae}
body[data-theme="green"] .cp-hero .crumb a{color:#cfe8d2}
body[data-theme="green"] .cd-title{color:#86efac}
body[data-theme="green"] .cd-cell{color:var(--green-700)}
body[data-theme="green"] .story-card{background:#f0fdf4;border-color:#bbf7d0;border-left-color:var(--green-600)}
body[data-theme="green"] .story-card h3{color:var(--green-800)}

/* ---------- 主题色：金（丰收 / 特产） ---------- */
body[data-theme="gold"] .cp-hero{
  background:
    radial-gradient(680px 260px at 84% -26%,rgba(255,237,213,.28) 0%,transparent 62%),
    linear-gradient(135deg,#78350f 0%,#b45309 52%,#d97706 100%);
}
body[data-theme="gold"] .cp-hero h1 em{color:#fde68a;font-style:normal}
body[data-theme="gold"] .cp-hero .crumb{color:#fcd9a8}
body[data-theme="gold"] .cp-hero .crumb a{color:#fef3c7}
body[data-theme="gold"] .cd-title{color:#fcd34d}
body[data-theme="gold"] .cd-cell{color:#b45309}
body[data-theme="gold"] .story-card{background:#fffbeb;border-color:#fcd34d;border-left-color:#f59e0b}
body[data-theme="gold"] .story-card h3{color:#92400e}

/* ---------- 主题色：蓝（科技 / 溯源） ---------- */
body[data-theme="blue"] .cp-hero{
  background:
    radial-gradient(680px 260px at 86% -28%,rgba(147,197,253,.24) 0%,transparent 62%),
    linear-gradient(135deg,#0c2d48 0%,#155e75 55%,#0e7490 100%);
}
body[data-theme="blue"] .cp-hero h1 em{color:#7dd3fc;font-style:normal}
body[data-theme="blue"] .cp-hero .crumb{color:#a5d8ec}
body[data-theme="blue"] .cp-hero .crumb a{color:#cffafe}
body[data-theme="blue"] .cd-title{color:#7dd3fc}
body[data-theme="blue"] .cd-cell{color:#0e7490}
body[data-theme="blue"] .story-card{background:#f0f9ff;border-color:#bae6fd;border-left-color:#0284c7}
body[data-theme="blue"] .story-card h3{color:#075985}

/* ---------- 套餐补充样式（app.css 的 .yp-plan 已足够，这里只补缺口） ---------- */
.yp-plan .yp-slogan{font-size:13.5px;color:#6b7280;line-height:1.7;margin:0 0 14px;min-height:44px}
.yp-plan .yp-stock{font-size:12.5px;color:#9ca3af;margin:0 0 14px}
.yp-plan .btn{width:100%}
.yp-extra{
  margin-top:26px;text-align:center;font-size:14px;color:#7c5a2a;
  background:#fffbeb;border:1px dashed #fcd34d;border-radius:14px;padding:14px 20px;line-height:1.9;
}
.yp-extra a{color:var(--green-700);font-weight:700;text-decoration:underline}

/* ---------- 其他活动 ---------- */
.cp-others{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cp-other{
  display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm);transition:.25s;
}
.cp-other:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green-500)}
.cp-other-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:1.5px;color:#b45309;background:#fef3c7;padding:3px 10px;border-radius:99px}
.cp-other strong{font-size:17px;color:var(--green-900);line-height:1.5}
.cp-other-go{font-size:13px;font-weight:700;color:var(--green-700);margin-top:auto}

/* ---------- 表单区微调 ---------- */
.order-wrap .form-block{margin-bottom:22px}
.form-label{display:block;font-size:13px;font-weight:700;color:#4b5563;margin-bottom:10px}
.yp-agree{font-size:12.5px;color:#9ca3af;line-height:1.85;margin-top:14px}
.form-tip.ok{color:var(--green-700)}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .cp-others{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cp-hero{padding:52px 0 48px}
  .cp-hero h1{font-size:32px;letter-spacing:1px}
  .cp-hero.has-img{padding:76px 0 68px}
  .cp-others{grid-template-columns:1fr}
  .yp-plan .yp-slogan{min-height:0}
}

/* 提交成功后的「立即扫码支付」按钮行（弹窗复用商城 window.BJPay） */
.cp-payrow{margin-top:14px;display:flex;flex-direction:column;gap:6px;text-align:center}
.cp-payrow small{opacity:.75}

/* 收货地址自动定位（与商城 /api/geo/* 同链路） */
.cp-loc{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-loc-btn{border:1px solid #dbe7dd;background:#fff;color:#15803d;border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer;transition:background .15s}
.cp-loc-btn:hover{background:#f0fdf4}
.cp-loc-tip{font-size:13px;color:#6b7280;line-height:1.5}
.cp-loc-tip.ok{color:#15803d}
.cp-loc-tip.warn{color:#b45309}

/* 附近地点选择列表（微信位置选择同款） */
.cp-poi-list{margin:10px 0 0;max-width:460px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;overflow:hidden}
.cp-poi-head{font-size:12px;color:#6b7280;padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb}
.cp-poi-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid #f3f4f6;background:#fff;cursor:pointer;font:inherit;line-height:1.5;transition:background .15s}
.cp-poi-item:last-child{border-bottom:0}
.cp-poi-item:hover{background:#f0fdf4}
.cp-poi-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cp-poi-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111827;font-weight:600;font-size:13px}
.cp-poi-first .cp-poi-main{color:#15803d}
.cp-poi-dist{flex:none;font-size:12px;color:#9ca3af}
.cp-poi-sub{display:block;margin-top:2px;font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 手机端体验增强（≤640） ===== */
@media (max-width:640px){
  .cp-loc-btn{padding:10px 16px;min-height:44px;font-size:14px}
  .cp-poi-item{padding:12px 14px}
  .cp-poi-main{font-size:14px}
}