/* ==========================================================================
   拍拍 · 付费意愿测试组件样式（全部选择器以 .wtp- 开头）
   --------------------------------------------------------------------------
   命名空间是刚需：首页（style.css）已经有自己的 .btn / .row / .msg / .hide，
   组件样式若沿用这些通用名，把它挂到首页上就会把主站按钮改样。
   所以这里一律 .wtp-*，首页与 /pricing 都能安全共用同一份。
   ========================================================================== */
.wtp-card {
  background: #fff;
  border: 1px solid #E4E6EF;
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
  position: relative;
}

/* 弹出模式：底部卡片 + 遮罩（移动端单手可达，不挡全屏） */
.wtp-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(17, 24, 39, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: wtp-fade .18s ease-out;
}
.wtp-sheet {
  width: 100%; max-width: 520px;
  background: #fff; border-radius: 18px 18px 0 0;
  padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  animation: wtp-up .22s ease-out;
}
@media (min-width: 620px) {
  .wtp-mask { align-items: center; padding: 20px; }
  .wtp-sheet { border-radius: 18px; }
}
@keyframes wtp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wtp-up { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }

.wtp-body { position: relative; }
.wtp-head { margin-bottom: 12px; }
.wtp-head b { display: block; font-size: 17px; color: #1F1F28; line-height: 1.5; }
.wtp-sub { display: block; font-size: 13px; color: #6B6F80; margin-top: 4px; line-height: 1.7; }
.wtp-q { font-size: 15px; color: #5C6070; margin: 4px 0 10px; }
.wtp-q b { color: #1F1F28; }
.wtp-step { animation: wtp-fade .18s ease-out; }
.wtp-hide { display: none !important; }
.wtp-close {
  position: absolute; top: -6px; right: -4px;
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: #A6ABBA; cursor: pointer; padding: 4px 8px;
}
.wtp-close:hover { color: #5C6070; }

.wtp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0 0; }
@media (min-width: 620px) { .wtp-grid { grid-template-columns: repeat(4, 1fr); } }
.wtp-opt {
  border: 1.5px solid #D5D9E6; background: #fff; border-radius: 14px;
  padding: 12px 8px; text-align: center; cursor: pointer; color: #1F1F28;
  font-size: 18px; font-weight: 700; font-family: inherit;
  transition: .15s;
}
.wtp-opt span { display: block; font-size: 12px; font-weight: 400; color: #6B6F80; margin-top: 2px; }
.wtp-opt:hover { border-color: #7C4DFF; background: #F3EEFF; }
.wtp-opt.wtp-on { border-color: #6438E8; background: #F3EEFF; box-shadow: 0 0 0 3px rgba(124, 77, 255, .12); }

.wtp-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wtp-btn {
  flex: 1 1 110px; text-align: center;
  border: 1px solid #D5D9E6; background: #fff; color: #1F1F28;
  border-radius: 12px; padding: 11px 14px; font-size: 15px;
  font-family: inherit; cursor: pointer;
}
.wtp-btn:hover { border-color: #7C4DFF; color: #6438E8; }
.wtp-btn.wtp-primary { background: #6438E8; border-color: #6438E8; color: #fff; }
.wtp-btn.wtp-primary:hover { background: #5626d6; color: #fff; }
.wtp-btn.wtp-wide { flex: 1 1 100%; }

.wtp-none {
  display: block; width: 100%; margin-top: 10px;
  border: 1px solid #E4E6EF; background: #F7F8FC; color: #5C6070;
  border-radius: 12px; padding: 10px; font-size: 14px;
  font-family: inherit; cursor: pointer;
}
.wtp-none:hover { border-color: #7C4DFF; color: #6438E8; }

.wtp-input {
  width: 100%; margin-top: 10px;
  border: 1px solid #D5D9E6; border-radius: 12px;
  padding: 11px 12px; font-size: 15px; font-family: inherit;
  color: #1F1F28; background: #fff;
}
.wtp-input:focus { outline: 2px solid rgba(124, 77, 255, .35); border-color: #7C4DFF; }
.wtp-input:disabled { background: #F7F8FC; color: #A6ABBA; }

.wtp-check {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: #5C6070; line-height: 1.7; margin-top: 10px;
}
.wtp-check input { margin: 4px 0 0; width: 17px; height: 17px; accent-color: #6438E8; flex: none; }

.wtp-msg { margin-top: 10px; font-size: 14px; min-height: 20px; }
.wtp-msg.wtp-ok { color: #15803D; }
.wtp-msg.wtp-err { color: #DC2626; }
.wtp-note { margin-top: 10px; font-size: 12px; color: #6B6F80; }