/* =====================================================================
 * 访客转化弹窗（CentSnap 系统内置）  front-guest-popup.css
 * 组件前缀 cs-gp-；五套主题 t-aurora / t-sunset / t-deepsea / t-tech / t-party
 * 三端自适应：桌面居中宽幅(双栏) / 平板居中卡片(单栏) / 手机底部抽屉(全宽)
 * 仅前台游客可见；已登录、维护模式、admin/api 路径均不注入（服务端已拦截）。
 * ===================================================================== */
.cs-gp-mask {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(8, 11, 16, .55);
  backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  animation: csGpFade .2s ease-out;
}
.cs-gp-mask.cs-gp-show { display: flex; }
@keyframes csGpFade { from { opacity: 0; } to { opacity: 1; } }

.cs-gp-pop {
  width: 90%; max-width: 720px; background: #fff;
  border-radius: 16px; overflow: hidden; display: flex;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  animation: csGpRise .25s ease-out;
}
@keyframes csGpRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.cs-gp-visual {
  flex: 0 0 42%; position: relative; color: #fff;
  padding: 30px 26px; display: flex; flex-direction: column;
  justify-content: space-between; overflow: hidden;
}
.cs-gp-visual .cs-gp-blob { position: absolute; border-radius: 50%; filter: blur(36px); opacity: .55; }
.cs-gp-visual h4 { position: relative; font-size: 23px; line-height: 1.35; margin: 0 0 14px; font-weight: 800; }
.cs-gp-visual ul { position: relative; list-style: none; padding: 0; margin: 0; font-size: 13.5px; line-height: 2; }
.cs-gp-visual ul li { position: relative; padding-left: 22px; }
.cs-gp-visual ul li::before { content: "\2713"; position: absolute; left: 0; font-weight: 800; }
.cs-gp-visual .cs-gp-proof {
  position: relative; font-size: 12px; opacity: .92; margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 12px;
}
.cs-gp-visual .cs-gp-proof b { font-size: 18px; }

.cs-gp-form { flex: 1; padding: 26px 28px; position: relative; }
.cs-gp-form .cs-gp-x {
  position: absolute; top: 14px; right: 16px; color: #9aa3af; font-size: 22px;
  cursor: pointer; line-height: 1; background: none; border: none; padding: 4px;
}
.cs-gp-form .cs-gp-x:hover { color: #374151; }
.cs-gp-form .cs-gp-eyebrow { font-size: 12px; color: #9aa3af; letter-spacing: 1px; margin-bottom: 6px; }
.cs-gp-form h3 { font-size: 22px; margin: 0 0 4px; color: #111827; }
.cs-gp-form .cs-gp-sub { font-size: 13px; color: #6b7280; margin: 0 0 18px; }
.cs-gp-tabs { display: flex; gap: 6px; background: #f1f3f7; padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.cs-gp-tabs div { flex: 1; text-align: center; padding: 8px; border-radius: 7px; font-size: 13px; color: #6b7280; cursor: pointer; transition: .15s; }
.cs-gp-tabs div.on { background: #fff; color: #111827; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.cs-gp-field { margin-bottom: 12px; }
.cs-gp-field input {
  width: 100%; padding: 11px 13px; border: 1px solid #e3e7ee; border-radius: 9px;
  font-size: 14px; outline: none; box-sizing: border-box; transition: border-color .15s;
}
.cs-gp-field input:focus { border-color: var(--cs-gp-accent, #2f6fed); }
.cs-gp-main {
  display: block; width: 100%; text-align: center; padding: 12px; border: none;
  border-radius: 9px; background: var(--cs-gp-accent, #2f6fed); color: #fff;
  font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 4px; text-decoration: none;
}
.cs-gp-main:hover { filter: brightness(.94); }
.cs-gp-soc { display: flex; gap: 10px; margin-top: 14px; }
.cs-gp-soc a {
  flex: 1; text-align: center; padding: 9px; border: 1px solid #e3e7ee;
  border-radius: 9px; font-size: 13px; color: #374151; text-decoration: none; transition: .15s;
}
.cs-gp-soc a:hover { background: #f9fafb; }
.cs-gp-fine { font-size: 11px; color: #9aa3af; margin-top: 14px; line-height: 1.6; }
.cs-gp-nothx {
  display: block; width: 100%; text-align: center; margin-top: 10px;
  font-size: 12px; color: #9aa3af; cursor: pointer; text-decoration: underline;
  background: none; border: none;
}

/* ─────────────── 五套主题（背景非单调，带光斑 / 海浪 / 网格 / 礼花）─────────────── */
.cs-gp.t-aurora { --cs-gp-accent: #7c3aed; }
.cs-gp.t-aurora .cs-gp-visual { background: radial-gradient(120% 120% at 20% 10%, #7c3aed, #2563eb 55%, #06b6d4); }
.cs-gp.t-aurora .cs-gp-visual .cs-gp-blob.a { width: 160px; height: 160px; background: #a855f7; top: -40px; left: -30px; }
.cs-gp.t-aurora .cs-gp-visual .cs-gp-blob.b { width: 130px; height: 130px; background: #22d3ee; bottom: -30px; right: -20px; }

.cs-gp.t-sunset { --cs-gp-accent: #ea580c; }
.cs-gp.t-sunset .cs-gp-visual { background: linear-gradient(150deg, #f97316, #dc2626 70%, #b91c1c); }
.cs-gp.t-sunset .cs-gp-visual .cs-gp-blob.a { width: 170px; height: 120px; background: #fbbf24; opacity: .4; top: 30px; left: -30px; }
.cs-gp.t-sunset .cs-gp-visual::after {
  content: ""; position: absolute; right: 14px; bottom: 10px; width: 90px; height: 46px;
  background: rgba(255, 255, 255, .18); border-radius: 8px; box-shadow: -30px 8px 0 -2px rgba(255, 255, 255, .12);
}

.cs-gp.t-deepsea { --cs-gp-accent: #0ea5e9; }
.cs-gp.t-deepsea .cs-gp-visual { background: linear-gradient(160deg, #0c4a6e, #0369a1 60%, #0ea5e9); }
.cs-gp.t-deepsea .cs-gp-visual::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 18px, transparent 18px 36px);
  transform: skewY(-4deg);
}

.cs-gp.t-tech { --cs-gp-accent: #22d3ee; }
.cs-gp.t-tech .cs-gp-visual { background: #0b1220; }
.cs-gp.t-tech .cs-gp-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(34, 211, 238, .12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34, 211, 238, .12) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cs-gp.t-tech .cs-gp-visual h4,
.cs-gp.t-tech .cs-gp-visual ul,
.cs-gp.t-tech .cs-gp-visual .cs-gp-proof { text-shadow: 0 0 12px rgba(34, 211, 238, .4); }

.cs-gp.t-party { --cs-gp-accent: #db2777; }
.cs-gp.t-party .cs-gp-visual { background: linear-gradient(120deg, #f43f5e, #db2777 40%, #8b5cf6 75%, #3b82f6); }
.cs-gp.t-party .cs-gp-visual .cs-gp-blob.a { width: 120px; height: 120px; background: #fde047; opacity: .5; top: -20px; right: 10px; }
.cs-gp.t-party .cs-gp-visual .cs-gp-blob.b { width: 90px; height: 90px; background: #22d3ee; opacity: .5; bottom: 20px; left: -10px; }

/* ─────────────── 三端自适应 ─────────────── */
/* 平板：居中卡片，隐藏视觉区，聚焦表单 */
@media (max-width: 768px) {
  .cs-gp-pop { max-width: 420px; }
  .cs-gp-visual { display: none; }
  .cs-gp-form { padding: 24px 22px; }
  .cs-gp-form h3 { font-size: 20px; }
}
/* 手机：底部抽屉式全宽卡 */
@media (max-width: 480px) {
  .cs-gp-mask { align-items: flex-end; background: rgba(8, 11, 16, .45); }
  .cs-gp-pop { width: 100%; max-width: none; border-radius: 18px 18px 0 0; flex-direction: column; }
  .cs-gp-visual { display: none; }
  .cs-gp-form { padding: 22px 20px 26px; }
  .cs-gp-form h3 { font-size: 20px; }
  .cs-gp-form .cs-gp-sub { font-size: 12.5px; }
  .cs-gp-soc a { font-size: 12px; }
}

/* 尊重「减少动态效果」系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .cs-gp-mask, .cs-gp-pop { animation: none; }
}