/* ============================================================
 * checkout.css v2.0
 * ------------------------------------------------------------
 * 颜色：按钮 #F53851，售价 #FC1E3D，原价 #333
 * ========================================================== */
:root {
  --theme: #F53851;
  --theme-dark: #d42e44;
  --price-red: #FC1E3D;
  --orig-dark: #333333;
  --safe-green: #2faa6b;
  --safe-green-soft: #e8f7ee;
  --text-soft: #555;
}

body {
  background: #f5f5f5;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 68px;
  font-family: 'Poppins','Arial',sans-serif;
}

.ck-header {
  position: sticky; top: 0; z-index: 10;
  background: #fff; display: flex; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #eee;
}
.ck-header h1 { font-size: 16px; margin: 0 auto; font-weight: 700; }
.back { position: absolute; left: 12px; font-size: 24px; color: #555; }

.ck-product {
  display: flex; gap: 12px; background: #fff;
  padding: 12px 14px; margin-bottom: 8px;
}
.ck-product img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }
.ck-meta { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ck-name { font-size: 14px; line-height: 1.4; font-weight: 700; }
.ck-sum  { font-size: 12px; color: #888; line-height: 1.3; }

.ck-section { background: #fff; padding: 12px 14px; margin-bottom: 8px; }
.ck-title {
  font-size: 14px; margin: 0 0 10px;
  padding-left: 8px; border-left: 4px solid #F53851;
  line-height: 1.2; font-weight: 700;
}

/* 套餐红块 */
.bundle-stack { display: flex; flex-direction: column; gap: 5px; }
.bundle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 14px; border: 2px solid #F53851; border-radius: 8px;
  background: #fff; color: #F53851; cursor: pointer;
  font-size: 13px; font-weight: 800;
  transition: background .15s, color .15s;
}
.bundle-row .bd-left { white-space: nowrap; }
.bundle-row .bd-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.bundle-row .bd-orig { font-size: 10px; color: #999; text-decoration: line-through; }
.bundle-row .bd-save { font-size: 10px; font-weight: 700; }
.bundle-row.on {
  background: #F53851; color: #fff; border-color: #F53851;
  box-shadow: 0 3px 10px rgba(245,56,81,.2);
}
.bundle-row.on .bd-orig { color: rgba(255,255,255,.7); }
.bundle-row.on .bd-save { color: #ffe4d8; }

/* SKU 列 */
.sku-group { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #eee; }
.sku-group:last-child { border-bottom: 0; margin-bottom: 0; }
.sku-group-h { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.sku-num-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.sku-attr-label { color: #777; font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; }
.sku-attr-label b { color: #555; font-weight: 700; }
.sku-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sku-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 6px; border: 2px solid #ddd; border-radius: 10px;
  font-size: 12px; background: #fff; cursor: pointer; color: #555; gap: 4px;
  transition: border-color .15s;
}
.sku-pill img { width: 75px; height: 75px; object-fit: cover; border-radius: 6px; background: #eee; }
.sku-pill .sku-img-wrap { position: relative; display: inline-block; line-height: 0; }
.sku-pill .sku-zoom {
  position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.sku-pill .sku-zoom svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; }
.sku-pill.on { border-color: #F53851; color: #F53851; background: #ffe9ec; font-weight: 700; }
.sku-pill.txt-only { flex-direction: row; padding: 6px 14px; border-radius: 999px; }

/* 注文内容 */
.ck-summary .sm-thumbs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed #eee; }
.ck-summary .sm-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.sm-fee { list-style: none; padding: 0; margin: 0; }
.sm-fee li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--text-soft); }
.sm-fee b.minus { color: #FC1E3D; font-weight: 700; }
.sm-grand {
  margin-top: 8px; padding-top: 10px; border-top: 1px solid #f0f0f0;
  display: flex; justify-content: space-between; align-items: center;
}
.sm-grand span { font-size: 14px; color: #333; font-weight: 700; }
.sm-grand b { color: #FC1E3D; font-size: 22px; font-weight: 800; }

/* 表单 */
form label { display: block; font-size: 13px; color: #444; margin-bottom: 10px; }
form .req { color: #F53851; }
form input, form select {
  display: block; width: 100%; margin-top: 3px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 4px; background: #fff; font-size: 14px;
}
form input:focus, form select:focus { border-color: #F53851; outline: none; }
.form-row.two { display: flex; gap: 8px; }
.form-row.two label { flex: 1; }
.zip-hint { display: block; margin-top: 3px; font-size: 11px; color: #999; }
.blacklist-err {
  margin: -4px 0 10px; padding: 10px 12px;
  background: #fff0ee; border: 1px solid #F53851; border-radius: 6px;
  color: #F53851; font-size: 12px; font-weight: 700;
}

/* ===== 支付块 v2.0 ===== */
.pay-block { border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.pay-block-hd {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; background: #fafafa;
}
.pay-block-hd input[type=radio] { width: 18px; height: 18px; accent-color: #F53851; margin: 0; }
.pay-block-name { font-size: 14px; font-weight: 700; color: #222; }
.pay-block-fee { font-size: 12px; color: #888; margin-left: auto; }
.pay-block-body { padding: 0 14px 0; }
.pay-block.selected { border-color: #F53851; background: #fff; }
.pay-block.selected .pay-block-hd { background: #ffe9ec; }

/* Stripe Elements */
#cardElement { border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; background: #fff; }
.StripeElement--focus { border-color: #F53851; }

/* 安全 */
.sec-sec { background: var(--safe-green-soft); border: 1px solid #cfe9da; border-radius: 8px; margin: 0 8px 8px; padding: 14px; }
.sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #2faa6b; margin-bottom: 6px; }
.sec-text { font-size: 11px; line-height: 1.6; color: #4a6a59; }
.sec-sub { font-size: 12px; font-weight: 700; color: #333; margin: 8px 0 6px; }
.sec-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sec-badge { max-height: 22px; width: auto; background: #fff; border: 1px solid #e5e5e5; border-radius: 3px; padding: 1px 3px; }

/* ===== 挽留弹窗 ===== */
.retention-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.retention-modal {
  background: #fff; border-radius: 14px; padding: 24px 20px;
  width: min(340px, 90%); text-align: center;
  font-size: 15px; font-weight: 700; line-height: 1.6;
}
.retention-btns { display: flex; gap: 10px; margin-top: 16px; }
.btn-ret-back, .btn-ret-stay {
  flex: 1; padding: 10px; border: 0; border-radius: 50px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-ret-back { background: #f0f0f0; color: #555; }
.btn-ret-stay { background: #F13E55; color: #fff; }

/* SKU 放大预览 lightbox */
.sku-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sku-lightbox img { max-width: 92%; max-height: 92%; object-fit: contain; border-radius: 8px; }

/* Sticky */
.ck-sticky {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; background: #fff;
  border-top: 1px solid #eee; display: flex; align-items: center;
  z-index: 99; box-shadow: 0 -2px 8px rgba(0,0,0,.06); min-height: 52px;
}
.ck-sticky-left { flex: 1; padding: 4px 14px; display: flex; align-items: center; line-height: 1.15; }
.ck-sticky-left b { color: #FC1E3D; font-size: 20px; font-weight: 800; }
.ck-submit {
  flex: 0 0 58%; background: #F53851; color: #fff; border: 0;
  padding: 11px 20px; font-size: 14px; font-weight: 800;
  letter-spacing: .5px;
  margin: 4px 8px 4px 0;
  border-radius: 50px;
}
.ck-submit:active { background: #d42e44; }
.ck-submit:disabled, .ck-submit.disabled { background: #ccc; }