/**
 * 「积分内容」区块 —— 前台样式。
 *
 * ══════════════════════════════════════════════════════════════════════
 *  本文件现在只有两件事：**外边距** 与 **已解锁态**
 * ══════════════════════════════════════════════════════════════════════
 *
 *  未解锁卡片的全部骨架（卡片、头部、图标、步骤、按钮、状态、页脚、
 *  响应式断点、深色模式）都在 `plugin/assets/blocks.css` 的 `.wxas-lock`
 *  组件里，由三个区块共用；主题色由 `.wxas-lock--points` 修饰类给出。
 *
 *  ⚠️ **不要再往这里加布局规则。**
 *     三个区块在同一篇文章里同时出现是常态（先扫码、再付积分、再付款），
 *     布局写在三个地方 → 必然出现「同一种卡片三个间距」。
 *     要改布局，改 `blocks.css`；这里只留「只有积分模块才需要」的东西。
 *
 *  ⚠️ 覆写主题色的入口也统一了：站长写一段
 *     `.wxas-lock--points { --wxas-lock-accent: #…; }` 即可换色，
 *     不必再记一套 `--wxas-points-*` 变量名。
 */

/* ==========================================================================
 *  1. 卡片外边距
 * ========================================================================== */

/*
 * 只设**纵向**外边距，不设横向：横向由主题的正文容器决定，
 * 卡片自己加左右边距会在窄主题里被压窄、在宽主题里对不齐正文。
 */
.wxas-points-lock {
	margin: var(--wxas-lock-outer, 1.5em) 0;
}

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

/*
 * 已解锁后卡片不再是「锁」，去掉卡片的底色与边框，
 * 只保留正文——读者已经付过积分，不需要再看到一张收费面板的壳。
 */
.wxas-points-wrap {
	margin: var(--wxas-lock-outer, 1.5em) 0;
}

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

/*
 * 正文容器：刻意**不加**内边距与边框。
 * 它是站长自己写的内容，套一层带边框的盒子会让它看起来像被引用。
 */
.wxas-points-unlocked {
	padding: 0;
	border: 0;
	background: none;
}

/* ==========================================================================
 *  3. 确认解锁弹窗
 * ========================================================================== */

/*
 * 由 points.js 的 openConfirm() 动态创建，挂在 <body> 下（不是卡片内）——
 * 否则会被 `.wxas-lock` 的 `overflow: hidden` 裁掉，且 z-index 会困在
 * 卡片的层叠上下文里，被同页其它元素盖住。
 *
 * ⚠️ 主题色用本模块的微信绿，与卡片一致；但这些规则**不能**依赖
 *    `.wxas-lock` 那组变量 —— 弹窗不在卡片 DOM 里，取不到。
 *    所以这里全部写具体色值，并用 `.wxas-points-confirm` 前缀把
 *    `button` 规则提升一级，压过主题的 `button {}` 默认样式
 *    （主题会给按钮加字体、投影、padding，不压住弹窗按钮会明显走形）。
 */
.wxas-points-confirm {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* 主题可能给 body 设了 line-height / 字体，这里显式接住。 */
	font-family: inherit;
	line-height: 1.5;
}

.wxas-points-confirm__mask {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: wxas-points-fade 0.18s ease-out;
}

.wxas-points-confirm__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 340px;
	padding: 24px 22px 18px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35), 0 2px 8px rgba(15, 23, 42, 0.08);
	text-align: center;
	animation: wxas-points-pop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.wxas-points-confirm__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #07c160;
}

.wxas-points-confirm__icon svg {
	width: 24px;
	height: 24px;
}

.wxas-points-confirm__title {
	color: #1e293b;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.wxas-points-confirm__text {
	margin-top: 6px;
	color: #64748b;
	font-size: 13px;
	line-height: 1.7;
}

.wxas-points-confirm__text b {
	color: #07c160;
	font-size: 15px;
	font-weight: 800;
}

/* 余额账：当前 → 解锁后。把「花掉会不会不够」摆到眼前，比一句叮嘱有用。 */
.wxas-points-confirm__ledger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #64748b;
	font-size: 12px;
}

.wxas-points-confirm__num {
	color: #334155;
	font-family: Consolas, Monaco, monospace;
	font-size: 14px;
	font-weight: 700;
}

.wxas-points-confirm__num--after {
	color: #07c160;
}

.wxas-points-confirm__arrow {
	color: #94a3b8;
}

.wxas-points-confirm__actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

/*
 * ⚠️ 选择器必须带 `.wxas-points-confirm` 前缀（提升一级特异性）：
 *    主题的 `button { font-family; padding; box-shadow; ... }` 是元素选择器，
 *    不带前缀虽然也压得住（(0,1,0) > (0,0,1)），但主题常用
 *    `.entry-content button` 一类写法 —— 虽然弹窗在 body 下不会被它命中，
 *    这条前缀是为「将来有人把弹窗挪进正文容器」留的保险。
 *    各项属性也写全，不依赖继承。
 */
.wxas-points-confirm .wxas-points-confirm__btn {
	flex: 1 1 0;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 12px;
	background: #07c160;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.1s;
}

.wxas-points-confirm .wxas-points-confirm__btn:hover {
	background: #06ad56;
}

.wxas-points-confirm .wxas-points-confirm__btn:active {
	transform: scale(0.98);
}

.wxas-points-confirm .wxas-points-confirm__btn:focus-visible {
	outline: 2px solid #07c160;
	outline-offset: 2px;
}

.wxas-points-confirm .wxas-points-confirm__btn--ghost {
	background: #f1f5f9;
	color: #475569;
	font-weight: 500;
}

.wxas-points-confirm .wxas-points-confirm__btn--ghost:hover {
	background: #e2e8f0;
}

@keyframes wxas-points-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes wxas-points-pop {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * 深色模式。
 *
 * ⚠️ 只覆盖 `prefers-color-scheme`，不覆盖 `.is-dark-theme` ——
 *    后者是**古腾堡编辑器**的界面开关，而弹窗只在网站前台出现，
 *    编辑器里根本不会渲染它。加上只是噪音。
 */
@media (prefers-color-scheme: dark) {
	.wxas-points-confirm__card {
		background: #1e242b;
		box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
	}

	.wxas-points-confirm__icon {
		background: rgba(7, 193, 96, 0.16);
	}

	.wxas-points-confirm__title {
		color: #f1f5f9;
	}

	.wxas-points-confirm__text {
		color: #94a3b8;
	}

	.wxas-points-confirm__ledger {
		background: rgba(255, 255, 255, 0.06);
		color: #94a3b8;
	}

	.wxas-points-confirm__num {
		color: #e2e8f0;
	}

	.wxas-points-confirm__num--after {
		color: #34d399;
	}

	.wxas-points-confirm .wxas-points-confirm__btn--ghost {
		background: rgba(255, 255, 255, 0.08);
		color: #cbd5e1;
	}

	.wxas-points-confirm .wxas-points-confirm__btn--ghost:hover {
		background: rgba(255, 255, 255, 0.14);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wxas-points-confirm__mask,
	.wxas-points-confirm__card {
		animation: none;
	}

	.wxas-points-confirm .wxas-points-confirm__btn {
		transition: none;
	}

	.wxas-points-confirm .wxas-points-confirm__btn:active {
		transform: none;
	}
}