/**
 * 付费墙前端样式。
 *
 * ══════════════════════════════════════════════════════════════════════════
 *  本文件现在只剩三类内容
 * ══════════════════════════════════════════════════════════════════════════
 *
 *  ① **矩形/间距**与外层边距（三个区块统一的收尾）；
 *  ② **JS 动态创建的元素**的样式 —— pay.js 会自己 `createElement('img')`
 *     并定类名 `wxas-paywall__img`，还会整类覆写状态元素的 className
 *     （所以 `is-ok` / `is-err` 必须在这里与共享类并列定义）；
 *  ③ 站长的配置提示（`.wxas-pay-notice`，仅在管理员/编辑者视角出现）。
 *
 *  卡片骨架（头部、图标、标题、价格、步骤、二维码盒、状态胶囊、页脚、
 *  响应式断点、深色模式）全部在 `plugin/assets/blocks.css` 的
 *  `.wxas-lock` 组件里，主题色由 `.wxas-lock--pay` 给出（暖琥珀）。
 *
 *  ⚠️ **不要再往这里加布局规则。**
 *     三个区块同页出现是常态（先扫码、再付积分、再付款），
 *     布局写在三处必然出现「同一种卡片三个间距」。
 *
 *  ⚠️ 覆写主题色：`.wxas-lock--pay { --wxas-lock-accent: #…; }`。
 *     价格颜色由 blocks.css 的 `.wxas-lock__price` 固定为微信绿，
 *     不挂在主题变量上 —— 「钱」的颜色跨模块必须一致。
 */

/* ==========================================================================
 *  1. 外层容器
 * ========================================================================== */

.wxas-paywall {
	margin: var(--wxas-lock-outer, 1.5em) 0;
}

/* ==========================================================================
 *  2. 二维码
 * ========================================================================== */

/*
 * 二维码盒、骨架、注入图、刷新按钮的样式**全部**在
 * `plugin/assets/blocks.css` 的 `.wxas-lock__qr*` 一节里 —— 三个带码的
 * 界面（验证码查看 / 支付查看 / 授权卡）共用同一份定义。
 *
 * ⚠️ 这里曾经单独写过一份 `.wxas-paywall__qr-img` / `.wxas-paywall__img` /
 *    `.wxas-paywall__qr-skeleton`，而授权卡又跨扩展借用了这几个类 ——
 *    结果是「付费墙改了尺寸、授权卡跟着变，但没人知道两份是耦合的」，
 *    而且授权卡从未声明对 pay.css 的依赖（只在恰好同页时才不出错）。
 *    已全部收进共享层，**不要在这里加回来**。
 *
 * 若要改二维码外观，改 `assets/blocks.css`。
 */

/* ==========================================================================
 *  3. 状态胶囊的语义修饰
 * ========================================================================== */

/*
 * 状态语义色（is-ok / is-err，含失败提示的感叹号图标）**已全部移到
 * `plugin/assets/blocks.css`** —— 三个区块共用一套，不再各写一份。
 *
 * ⚠️ 不要在扩展里再加 `.is-*` 规则：共享层用的是
 *    `.wxas-lock .wxas-lock__status.is-err`（特异性更高），
 *    写在这里也不会生效，只会让人误以为改了有用。
 *
 * ⚠️ 但有一点必须留在扩展侧记住：pay.js 的 `say()` 用 className
 *    **整体覆写**状态元素的类（`'wxas-lock__status wxas-paywall__qr-status'`），
 *    共享类必须由 JS 一并写上，否则覆写后样式全丢。
 */

/* ==========================================================================
 *  4. 已解锁态
 * ========================================================================== */

.wxas-paid-wrap {
	margin: var(--wxas-lock-outer, 1.5em) 0;
}

/* 已解锁后不再需要卡片的壳 —— 读者已经付过了。 */
.wxas-paid-unlocked {
	padding: 0;
	border: 0;
	background: none;
}

.wxas-paid-body {
	color: inherit;
}

/* ==========================================================================
 *  5. 站长配置提示（只在管理员视角输出，访客看不到）
 * ========================================================================== */

.wxas-pay-notice {
	margin: 1rem 0;
	padding: 12px 14px;
	border: 1px solid #f5e2a8;
	border-radius: 10px;
	background: #fdf7e3;
	color: #8a6100;
	font-size: 13px;
	line-height: 1.7;
}

/*
 * 「本区块绑定的道具还被别处复用」这条提示（见 class-pay-block.php
 * 的 reuse_notice()）。用中性底色，与「配置错误」的黄色提示区分开 ——
 * 它不是错误，只是知情信息。
 */
.wxas-pay-notice--reuse {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-color: #e2e8f0;
	border-left: 3px solid #94a3b8;
	border-radius: 6px;
	background: #f8fafc;
	color: #64748b;
	font-size: 12px;
}

.wxas-pay-notice--nested {
	border-color: #f5c2c7;
	background: #fdf2f3;
	color: #8a1f2a;
}

/* 深色模式下这几条提示同样要可读。 */
@media (prefers-color-scheme: dark) {
	.wxas-pay-notice {
		border-color: #4a3d17;
		background: #2a2413;
		color: #e8c76a;
	}

	.wxas-pay-notice--reuse {
		border-color: #2e343c;
		border-left-color: #64748b;
		background: #1f2429;
		color: #94a3b8;
	}

	.wxas-pay-notice--nested {
		border-color: #4c1d24;
		background: #2a1215;
		color: #f0a1aa;
	}
}

.is-dark-theme .wxas-pay-notice {
	border-color: #4a3d17;
	background: #2a2413;
	color: #e8c76a;
}