/* ========== 二维码弹窗（隔离样式，防止被外部CSS覆盖） ========== */

/* 弹窗遮罩 - 最高层级 */
.modal-overlay { display:none !important; position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; background:rgba(15,23,42,.6) !important; backdrop-filter:blur(4px) !important; z-index:99999 !important; align-items:center !important; justify-content:center !important; opacity:0; transition:opacity .3s ease; }
.modal-overlay.active { display:flex !important; opacity:1 !important; }

/* 弹窗主体 */
.modal-overlay .qr-modal-box { background:#fff !important; border-radius:20px !important; max-width:780px !important; width:90% !important; position:relative !important; overflow:hidden !important; box-shadow:0 25px 80px rgba(15,23,42,.2),0 8px 24px rgba(26,86,219,.12) !important; display:block !important; flex:none !important; box-sizing:border-box !important; }
.modal-overlay .qr-modal-box::before { content:'' !important; position:absolute !important; top:0 !important; right:0 !important; width:180px !important; height:140px !important; background:linear-gradient(135deg,#1a56db,#3b82f6 50%,transparent 100%) !important; border-radius:0 20px 0 80px !important; opacity:.10 !important; pointer-events:none !important; z-index:0 !important; }

/* 头部 */
.modal-overlay .qr-modal-header { display:flex !important; align-items:center !important; padding:2rem 2rem 1rem !important; position:relative !important; z-index:1 !important; flex-direction:row !important; flex-wrap:nowrap !important; width:auto !important; max-width:none !important; }
.modal-overlay .qr-modal-title-group { display:flex !important; align-items:center !important; gap:.75rem !important; flex-direction:row !important; width:auto !important; }
.modal-overlay .qr-modal-icon { width:40px !important; height:40px !important; background:linear-gradient(135deg,#f97316,#fb923c) !important; border-radius:8px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:1.35rem !important; color:#fff !important; flex-shrink:0 !important; }
.modal-overlay .qr-modal-title-text h3 { font-size:1.5rem !important; margin:0 !important; color:#0f172a !important; font-weight:800 !important; letter-spacing:-.02em !important; }
.modal-overlay .qr-modal-title-text h3::before { content:'' !important; display:inline-block !important; width:4px !important; height:1.15em !important; background:linear-gradient(180deg,#1a56db,#3b82f6) !important; border-radius:2px !important; margin-right:.6rem !important; vertical-align:middle !important; }
.modal-overlay .qr-modal-close-btn { position:absolute !important; top:1.25rem !important; right:1.25rem !important; width:38px !important; height:38px !important; background:#1a56db !important; color:#fff !important; border:none !important; border-radius:50% !important; font-size:1.2rem !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; z-index:2 !important; transition:all .25s ease !important; box-shadow:0 3px 10px rgba(26,86,219,.3) !important; flex-shrink:0 !important; }
.modal-overlay .qr-modal-close-btn:hover { background:#0f3a9e !important; transform:scale(1.08) !important; }

/* 提示文字 */
.modal-overlay .qr-modal-tip { padding:0 2rem .9rem !important; position:relative !important; z-index:1 !important; display:flex !important; align-items:center !important; gap:.6rem !important; color:#475569 !important; font-size:.9rem !important; line-height:1.6 !important; flex-wrap:nowrap !important; width:auto !important; }
.modal-overlay .qr-modal-tip .tip-icon { font-size:1.15rem !important; flex-shrink:0 !important; }

/* ====== 核心：二维码卡片网格（必须确保两列均分）====== */
.modal-overlay .qr-cards-grid {
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:1.35rem !important;
  padding:0 2rem 1.5rem !important;
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  box-sizing:border-box !important;
  flex:none !important;
  max-width:none !important;
  overflow:visible !important;
}

/* 单个卡片 - 确保不被外部flex/grid规则影响 */
.modal-overlay .qr-card {
  border-radius:16px !important;
  padding:1.4rem 1.2rem !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
  border:1.5px solid #e8ecf1 !important;
  background:#fff !important;
  box-shadow:0 2px 12px rgba(15,23,42,.05) !important;
  /* 防止被外部.article-card等规则覆盖 */
  display:block !important;
  flex:none !important;
  flex-basis:auto !important;
  max-width:none !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.modal-overlay .qr-card.personal { border-color:rgba(249,115,22,.22) !important; }
.modal-overlay .qr-card.business,
.modal-overlay .qr-card.crossborder { border-color:rgba(26,86,219,.18) !important; }

/* 卡片标签 */
.modal-overlay .qr-card-tag { display:inline-flex !important; align-items:center !important; gap:.4rem !important; padding:.4rem 1.15rem !important; border-radius:999px !important; font-size:.875rem !important; font-weight:700 !important; color:#fff !important; margin-bottom:.9rem !important; width:auto !important; max-width:none !important; }
.modal-overlay .qr-card.personal .qr-card-tag { background:linear-gradient(135deg,#f97316,#fb923c) !important; box-shadow:0 2px 8px rgba(249,115,22,.3) !important; }
.modal-overlay .qr-card.business .qr-card-tag,
.modal-overlay .qr-card.crossborder .qr-card-tag { background:linear-gradient(135deg,#1a56db,#3b82f6) !important; box-shadow:0 2px 8px rgba(26,86,219,.3) !important; }

/* ====== 二维码图片容器和图片 ======
   核心原则：每张QR图按自己的原始比例自然展示，绝不强制压成正方形
   个人QR接近正方形 → 自然显示
   企业QR是横向矩形 → 自然横向展示，不压缩不变形 ====== */
.modal-overlay .qr-code-wrap {
  /* 不强制宽高，让内容决定尺寸；设最大边界防止超大图 */
  max-width:220px !important;
  min-width:160px !important;
  margin:0 auto .65rem !important;
  border-radius:14px !important;
  background:#fafbfc !important;
  border:1.5px solid #e8ecf1 !important;
  box-shadow:0 2px 10px rgba(15,23,42,.06) !important;
  padding:.5rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:none !important;
  box-sizing:border-box !important;
  /* 不允许子元素溢出 */
  overflow:hidden !important;
}

/* QR图片：按原始比例自然缩放，不超过容器最大值 */
.modal-overlay .qr-code-wrap img,
.modal-overlay .qr-code-img {
  display:block !important;
  border-radius:10px !important;
  /* 自然比例：宽度自适应，高度自动 */
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:200px !important;
  /* 防止被全局 img { height:auto; max-width:100% } 干扰 */
  object-fit:contain !important;
  object-position:center !important;
}

/* 操作提示 */
.modal-overlay .qr-action-hint { font-size:.7875rem !important; color:#64748b !important; margin-bottom:.75rem !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:.35rem !important; width:auto !important; }
.modal-overlay .qr-action-hint .hint-icon { font-size:.95rem !important; }

/* 场景描述文字 */
.modal-overlay .qr-card-scene {
  font-size:.8rem !important;
  color:#334155 !important;
  line-height:1.7 !important;
  text-align:left !important;
  display:block !important;
  width:100% !important;
  padding:.85rem 1rem !important;
  border-radius:12px !important;
  margin:0 !important;
  position:relative !important;
  box-sizing:border-box !important;
  max-width:none !important;
}
.modal-overlay .qr-card.personal .qr-card-scene { background:rgba(249,115,22,.06) !important; border:1.5px solid rgba(249,115,22,.18) !important; }
.modal-overlay .qr-card.personal .qr-card-scene::before { content:'✅' !important; position:absolute !important; top:.7rem !important; left:.85rem !important; font-size:.95rem !important; }
.modal-overlay .qr-card.personal .qr-card-scene { padding-left:2.2rem !important; }
.modal-overlay .qr-card.business .qr-card-scene,
.modal-overlay .qr-card.crossborder .qr-card-scene { background:rgba(26,86,219,.05) !important; border:1.5px solid rgba(26,86,219,.15) !important; }
.modal-overlay .qr-card.business .qr-card-scene::before,
.modal-overlay .qr-card.crossborder .qr-card-scene::before { content:'✅' !important; position:absolute !important; top:.7rem !important; left:.85rem !important; font-size:.95rem !important; }
.modal-overlay .qr-card.business .qr-card-scene,
.modal-overlay .qr-card.crossborder .qr-card-scene { padding-left:2.2rem !important; }

/* 底部栏 */
.modal-overlay .qr-modal-footer-bar {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:1rem 2rem 1.5rem !important;
  position:relative !important;
  z-index:1 !important;
  gap:.4rem !important;
  width:auto !important;
}
.modal-overlay .qr-footer-logo-img { height:36px !important; width:auto !important; max-width:none !important; }
.modal-overlay .qr-trust-line { font-size:.75rem !important; color:#94a3b8 !important; font-weight:500 !important; letter-spacing:.02em !important; line-height:1.5 !important; }


/* ========== 立即留资弹窗（高级设计 v3 — 专业级） ==========
   关键改进：选择器不依赖 .form-input-wrap 包裹
   直接用 .form-modal-modern input/select/textarea 确保样式一定生效 ========== */

.form-modal-modern {
  background:#fff !important;
  border-radius:20px !important;
  max-width:480px !important;
  width:92% !important;
  position:relative !important;
  overflow:hidden !important;
  box-shadow:
    0 32px 100px rgba(15,23,42,.16),
    0 10px 40px rgba(26,86,219,.10),
    0 0 0 1px rgba(15,23,42,.04) !important;
  display:block !important;
  flex:none !important;
}

/* ====== 头部渐变区域（不是5px装饰条了）====== */
.form-modal-header {
  background:linear-gradient(160deg,#1e3a5f 0%,#1a56db 50%,#2563eb 100%) !important;
  padding:2.25rem 2rem 1.75rem !important;
  text-align:center !important;
  position:relative !important;
  z-index:1 !important;
}
/* 装饰圆 */
.form-modal-header::before {
  content:'' !important;
  position:absolute !important;
  top:-40px !important; right:-30px !important;
  width:140px !important; height:140px !important;
  background:rgba(255,255,255,.06) !important;
  border-radius:50% !important;
  pointer-events:none !important;
}
.form-modal-header::after {
  content:'' !important;
  position:absolute !important;
  bottom:-20px !important; left:-20px !important;
  width:80px !important; height:80px !important;
  background:rgba(255,255,255,.04) !important;
  border-radius:50% !important;
  pointer-events:none !important;
}
.form-modal-header h3 {
  font-size:1.5rem !important;
  color:#fff !important;
  font-weight:800 !important;
  margin:0 0 .4rem !important;
  letter-spacing:-.02em !important;
  position:relative !important; z-index:1 !important;
}
.form-modal-header p {
  font-size:.9rem !important;
  color:rgba(255,255,255,.78) !important;
  margin:0 !important;
  line-height:1.5 !important;
  position:relative !important; z-index:1 !important;
}

/* 关闭按钮 — 白色半透明 */
.form-modal-modern .modal-close-x {
  position:absolute !important;
  top:1rem !important; right:1rem !important;
  width:34px !important; height:34px !important;
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.25) !important;
  border-radius:50% !important;
  font-size:1.05rem !important; font-weight:600 !important;
  cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  transition:all .25s ease !important;
  line-height:1 !important; z-index:3 !important;
  backdrop-filter:blur(4px) !important;
}
.form-modal-modern .modal-close-x:hover { background:rgba(255,255,255,.32) !important; transform:rotate(90deg) scale(1.08) !important; }

/* 表单主体 */
.form-modal-modern .modal-body {
  padding:1.75rem 2rem 2rem !important;
  position:relative !important;
  z-index:1 !important;
}

/* 表单组间距 */
.form-modal-modern .form-group { margin-bottom:1.15rem !important; }
.form-modal-modern .form-group:last-of-type { margin-bottom:.5rem !important; }

/* 标签样式 */
.form-modal-modern .form-group label {
  display:block !important;
  font-size:.85rem !important;
  font-weight:650 !important;
  color:#334155 !important;
  margin-bottom:.45rem !important;
  letter-spacing:.01em !important;
}
/* 红色必填星号 */
.form-modal-modern label span[style*="color:var(--danger)"],
.form-modal-modern label span[style*="color:red"],
.form-modal-modern label span[style*="color:#ef"] { color:#ef4444 !important; margin-left:2px !important; }

/* ====== 核心：直接选择器 — 不依赖 .form-input-wrap ======
   这是 v3 最关键的修复：无论 HTML 怎么写，这些规则都生效 ====== */
.form-modal-modern input[type="text"],
.form-modal-modern input[type="tel"],
.form-modal-modern input[type="email"],
.form-modal-modern select,
.form-modal-modern textarea,
.form-modal-modern .form-input-wrap input,
.form-modal-modern .form-input-wrap select,
.form-modal-modern .form-input-wrap textarea {
  width:100% !important;
  padding:.82rem 1.1rem !important;
  border:1.8px solid #e2e8f0 !important;
  border-radius:13px !important;
  font-size:.935rem !important;
  color:#0f172a !important;
  background:#f8fafc !important;
  transition:all .25s ease !important;
  font-family:inherit !important;
  display:block !important;
  box-sizing:border-box !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  outline:none !important;
}
/* Focus 蓝光效果 */
.form-modal-modern input[type="text"]:focus,
.form-modal-modern input[type="tel"]:focus,
.form-modal-modern input[type="email"]:focus,
.form-modal-modern select:focus,
.form-modal-modern textarea:focus,
.form-modal-modern .form-input-wrap input:focus,
.form-modal-modern .form-input-wrap select:focus,
.form-modal-modern .form-input-wrap textarea:focus {
  border-color:#3b82f6 !important;
  background:#fff !important;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.10),
    0 4px 14px rgba(59,130,246,.08) !important;
}
/* Placeholder */
.form-modal-modern input::placeholder,
.form-modal-modern textarea::placeholder { color:#94a3b8 !important; }

/* Select 下拉箭头 */
.form-modal-modern select,
.form-modal-modern .form-input-wrap select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 15px center !important;
  padding-right:38px !important;
}
/* Textarea */
.form-modal-modern textarea,
.form-modal-modern .form-input-wrap textarea {
  resize:vertical !important;
  min-height:82px !important;
  line-height:1.55 !important;
}

/* 图标容器 */
.form-input-icon {
  position:absolute !important;
  left:.85rem !important; top:50% !important;
  transform:translateY(-50%) !important;
  font-size:1rem !important; color:#94a3b8 !important;
  pointer-events:none !important;
}

/* ====== 提交按钮 — 渐变 + 阴影 + 微动画 ====== */
.form-submit-btn,
.form-modal-modern button[type="submit"],
.form-modal-modern .form-btn-submit {
  width:100% !important;
  padding:.95rem 1.5rem !important;
  background:linear-gradient(135deg,#1a56db 0%,#2563eb 50%,#3b82f6 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:13px !important;
  font-size:.98rem !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:all .3s ease !important;
  letter-spacing:.01em !important;
  box-shadow:
    0 4px 18px rgba(26,86,219,.30),
    0 2px 5px rgba(26,86,219,.12) !important;
  margin-top:.4rem !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
}
/* 按钮光泽效果 */
.form-submit-btn::before,
.form-modal-modern button[type="submit"]::before,
.form-modal-modern .form-btn-submit::before {
  content:'' !important;
  position:absolute !important;
  top:0 !important; left:-50% !important; width:60% !important; height:100% !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent) !important;
  transition:left .5s ease !important;
}
.form-submit-btn:hover,
.form-modal-modern button[type="submit"]:hover,
.form-modal-modern .form-btn-submit:hover {
  transform:translateY(-2.5px) !important;
  box-shadow:
    0 10px 35px rgba(26,86,219,.40),
    0 4px 10px rgba(26,86,219,.16) !important;
  background:linear-gradient(135deg,#1557c0 0%,#1d4ed8 50%,#2563eb 100%) !important;
}
.form-submit-btn:hover::before,
.form-modal-modern button[type="submit"]:hover::before,
.form-modal-modern .form-btn-submit:hover::before { left:120% !important; }
.form-submit-btn:active,
.form-modal-modern button[type="submit"]:active,
.form-modal-modern .form-btn-submit:active { transform:translateY(0) !important; }
.form-submit-btn:disabled,
.form-modal-modern button[type="submit"]:disabled,
.form-modal-modern .form-btn-submit:disabled {
  opacity:.55 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}

/* 取消按钮（index.html 用） */
.form-modal-modern .form-btn-cancel {
  background:#f1f5f9 !important;
  color:#64748b !important;
  border:1.5px solid #e2e8f0 !important;
  border-radius:13px !important;
  padding:.85rem 1.25rem !important;
  font-size:.9rem !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:all .2s ease !important;
  display:inline-block !important;
  margin-right:.75rem !important;
}
.form-modal-modern .form-btn-cancel:hover { background:#e2e8f0 !important; color:#334155 !important; }

/* 底部信任提示条 */
.form-trust-bar {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.65rem !important;
  margin-top:1.35rem !important;
  padding-top:1.15rem !important;
  border-top:1.5px solid #f1f5f9 !important;
  flex-wrap:wrap !important;
}
.form-trust-icon { font-size:.92rem !important; }
.form-trust-text {
  font-size:.745rem !important;
  color:#94a3b8 !important;
  font-weight:500 !important;
}

/* 成功结果 */
.form-result {
  padding:3rem 2rem !important;
  text-align:center !important;
}
.form-result > div[style*="font-size:3rem"] {
  font-size:3.5rem !important;
  animation:successBounce .5s ease !important;
}
@keyframes successBounce {
  0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1}
}


/* ========== 移动端 QR 弹窗 ========== */
@media (max-width: 768px) {
  .modal-overlay .qr-modal-box { max-width:94% !important; width:94% !important; border-radius:14px !important; max-height:90vh !important; overflow-y:auto !important; }
  .modal-overlay .qr-modal-header { padding:1.25rem .75rem .5rem !important; flex-direction:column !important; text-align:center !important; }
  .modal-overlay .qr-modal-title-group { flex-direction:column !important; gap:.4rem !important; }
  .modal-overlay .qr-modal-title-text h3 { font-size:1.1rem !important; }
  .modal-overlay .qr-modal-title-text h3::before { display:none !important; }
  .modal-overlay .qr-modal-title-line { font-size:.8rem !important; }
  .modal-overlay .qr-modal-close-btn { top:.5rem !important; right:.5rem !important; width:30px !important; height:30px !important; font-size:.9rem !important; }
  .modal-overlay .qr-modal-tip { padding:0 .75rem .5rem !important; font-size:.8rem !important; flex-wrap:wrap !important; text-align:center !important; justify-content:center !important; }
  .modal-overlay .qr-cards-grid { grid-template-columns:1fr !important; gap:.8rem !important; padding:0 .75rem 1rem !important; }
  .modal-overlay .qr-card { padding:1rem .75rem !important; }
  .modal-overlay .qr-card-tag { font-size:.8rem !important; padding:.3rem .8rem !important; margin-bottom:.6rem !important; }
  .modal-overlay .qr-code-wrap { max-width:200px !important; min-width:140px !important; margin:0 auto .5rem !important; padding:.4rem !important; }
  .modal-overlay .qr-action-hint { font-size:.75rem !important; margin-bottom:.5rem !important; }
  .modal-overlay .qr-card-scene { font-size:.75rem !important; padding:.65rem .75rem .65rem 1.8rem !important; }
  .modal-overlay .qr-card.personal .qr-card-scene { padding-left:1.8rem !important; }
  .modal-overlay .qr-card.business .qr-card-scene,
  .modal-overlay .qr-card.crossborder .qr-card-scene { padding-left:1.8rem !important; }
  .modal-overlay .qr-modal-footer-bar { padding:.6rem .75rem .8rem !important; }
  .modal-overlay .qr-footer-logo-img { height:26px !important; }
  .modal-overlay .qr-trust-line { font-size:.65rem !important; }
}


/* ========== 移动端 留资弹窗 v3 ========== */
@media (max-width: 768px) {
  .form-modal-modern { max-width:94% !important; width:94% !important; border-radius:16px !important; max-height:90vh !important; overflow-y:auto !important; }
  .form-modal-header { padding:1.85rem 1.35rem 1.35rem !important; }
  .form-modal-header h3 { font-size:1.22rem !important; }
  .form-modal-header p { font-size:.82rem !important; color:rgba(255,255,255,.72) !important; }
  .form-modal-modern .modal-close-x { top:.7rem !important; right:.7rem !important; width:30px !important; height:30px !important; font-size:.95rem !important; }
  .form-modal-modern .modal-body { padding:0 1.3rem 1.5rem !important; }
  .form-modal-modern input[type="text"],
  .form-modal-modern input[type="tel"],
  .form-modal-modern select,
  .form-modal-modern textarea,
  .form-modal-modern .form-input-wrap input,
  .form-modal-modern .form-input-wrap select,
  .form-modal-modern .form-input-wrap textarea {
    padding:.75rem .9rem !important;
    font-size:.875rem !important;
    border-radius:11px !important;
  }
  .form-modal-modern select { padding-right:32px !important; background-position:right 11px center !important; }
  .form-submit-btn,
  .form-modal-modern button[type="submit"],
  .form-modal-modern .form-btn-submit {
    padding:.85rem 1.25rem !important;
    font-size:.93rem !important;
    border-radius:12px !important;
  }
  .form-result { padding:2rem 1.25rem !important; }
  .form-trust-bar { flex-wrap:wrap !important; gap:.4rem !important; margin-top:1rem !important; padding-top:1rem !important; }
}