/**
 * SSG 公共样式 - 付费墙 + 支付加载
 *
 * 抽取自 ArticleContentTemplate / TutorialOverviewTemplate 中重复的 paywall-* 与 pay-loading/pay-success 样式。
 * TutorialOverviewTemplate 中的增强样式（paywall-hint / paywall-btn-group / vip-benefits）由页面自行保留。
 *
 * 配色：暖黄温馨风
 * 依赖：auth.css（提供 --primary-color 变量）
 * 引入：SharedSnippet.cssTags()
 */

/* ---- 付费解锁遮罩 - 暖黄温馨风 ---- */
.paywall-overlay { position: relative; margin-top: 20px; }
.paywall-mask { position: relative; overflow: hidden; }
.paywall-mask::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; }
.paywall-card { text-align: center; padding: 32px 20px; background: linear-gradient(135deg, #FFF7E6, #FFFBF3); border-radius: 8px; margin-top: 16px; border: 1px solid #FFE7BA; }
.paywall-icon { font-size: 36px; margin-bottom: 8px; }
.paywall-title { font-size: 16px; font-weight: 600; color: #0F172A; margin-bottom: 6px; }
.paywall-desc { font-size: 13px; color: #475569; margin-bottom: 16px; line-height: 1.6; }
.paywall-btn { display: inline-block; padding: 8px 24px; background: var(--primary-color, #FA8C16); color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background 0.2s; }
.paywall-btn:hover { background: var(--primary-hover, #D46B08); }
.paywall-btn.vip { background: #FA8C16; }
.paywall-btn.vip:hover { background: #D46B08; }
.paywall-price { font-size: 13px; color: #86909c; margin-top: 8px; }

/* ---- 支付加载/成功 ---- */
.pay-loading { text-align: center; padding: 20px; color: #475569; }
.pay-loading::after { content: ''; display: inline-block; width: 16px; height: 16px; border: 2px solid #FFE7BA; border-top-color: var(--primary-color, #FA8C16); border-radius: 50%; animation: stu-spin 0.8s linear infinite; margin-left: 8px; vertical-align: middle; }
.pay-success { text-align: center; padding: 20px; }
.pay-success-icon { font-size: 48px; color: #10B981; }
.pay-success-title { font-size: 18px; font-weight: 600; color: #0F172A; margin: 12px 0; }

/* ---- 通用加载动画（与 @keyframes spin 区分命名，避免与页面自定义 spin 冲突） ---- */
@keyframes stu-spin { to { transform: rotate(360deg); } }